KategorieDesign

Reddit Redesign…

 

Reddit hat eine Finanzierung über 220 Millionen US-Dollar erhalten und wird nun mit 1,8 Milliarden US-Dollar bewertet. Die Funding-Runde war die größte in der Geschichte der selbsternannten „Startseite des Internets“. Neben VCs wie Andreessen Horowitz und Sequoia Capital war auch Y-Combinator-Präsident Sam Altman beteiligt. Mit dem frischen Geld soll unter anderem ein Redesign von reddit.com im Stil von Facebooks News Feed und der Twitter-Timeline bezahlt werden. [Mehr bei Recode]

Bitte nicht. [via]

KUNST:: Minimale Filmposter

Also mehr minimal geht nicht…

 

von Nick Barclay

via

CSS Design Awards 2014

Die CSS Design Awards 2014 wurden vergeben. Hier meine Favs.

Beste Webseite
A Spacecraft for All

Könnte man drüber streiten, aber die ist schon recht gut. Nicht zuletzt liegt das daran das Google maßgeblich dran beteiligt war.

Beste Agency Webseite:
DAN Paris by DAN Paris

Mir unverständlich. Viel zu unruhig, seltsame Comic-Animationen gemischt mit Hochglanzfotografie. Ach neee.

Beste Community Webseite
I-remember.fr by WERKSTATT

Für mich ist das die Webseite des Jahres. Fantastische Idee. Tolle Umsetzung.

Alle Gewinnder in den Kategorien findet ihr hier:
The 2014 Website Of The Year Is…

 

WEBDESIGN::Relaunch NW News

Vor ein zwei Wochen habe ich mich mit den Social Media Menschen bei der NW News über Ihres in die Jahre gekommenen Design ausgetauscht. Ging alles los mit diesem Tweet:

Die Werbung im Internet ist wirklich zunehmend schlimm und nervtötend geworden. Aber wohl viel Licht ist, gibt es auch viel Schatten. Ich nutze eben deshalb keinen Adblocker, weil ich gute Inhalte zu schätzen weiß. Nur Flash Inhalte werden bei mir erstmal nicht gestartet.
Die Konversation endete damit, dass die NW wohl ein neues Design in der Pipeline hat und das wurde jetzt veröffentlicht. Ich möchte das Ganze erstmal Loben und dem Team gratulieren aber auch ein paar Dinge ansprechen die meiner Meinung nach so nicht gehen.

ICH WILL HIER DIE ARBEIT DER PROGRAMMIERER UND DER DESIGNER AUF KEINEN FALL SCHLECHT REDEN, SONDERN LEDIGLICH AUF DINGE HINWEISEN, DIE MIR ALS WEBENTWICKLER AUFGEFALLEN SIND. DIE SEITE IST WIRKLICH SCHICK ABER ES FEHLT AN DETAILS UND TESTS.

Werbung

Werbung muss ja sein, das sehe ich ein. Schaue ich mir auch an. Ich zahle den Preis für gute Inhalte. Aber ich zahle hier etwas viel. Siehe Performance. Wenn ich das hier so sehe, kann ich verstehen warum Nutzer AdBlocker verwenden… Alles flackert, bewegt sich und macht mich ganz kirre. Schlimm.

Das Mega Menu

Das Mega Menu ist das Hauptproblem dieses neuen Designs. Ein Mega Menu sollte versuchen viele Inhalte möglichst strukturiert und übersichtlich darzustellen. Leider geht das hier voll in die Hose. Meiner Meinung braucht diese Seite dieses überdemensioniertes Menu gar nicht. Dazu später mehr.
Ich möchte erst auf die Usability zu sprechen kommen. Nicht genug, dass die Werbung mich ganz kirre macht, dass Menu tut es mit seiner Benutzung auch. Hover ich einen Menupunk, springt mir regelrecht ins Gesicht. Beim scrollen der Seite das Gleiche. Der Mauszeiger „schaut“ den Menupunkt nur an und ich bekomme ein Submenu präsentiert, welches ich garnicht sehen wollte und ich weiß somit garnicht mehr wo ich bin, da sich der Inahlt des Menu´s in keiner Weise vom Inhalt der Seite abgrenzt. Ich bin wieder verwirrt. Wieso nicht einfach das Menu mit einen Klick öffnen?
Des Weiteres scrollt das komplette Menu mit. Und nimmt kostbaren Platz für Inhalte. Denn wenn der Nutzer scollt, will er im Zweifel das Menu nicht nutzen. Eine entschlackte Variante hätte gereicht. So irgendwie:

nw_minimenu

Nun zu dem Punkt, warum ich der Meinung bin, dass diese Seite kein Mega Menu gebraucht hätte:
Das Menu macht aus dem Grund keinen Sinn, da es versucht Inhalte darzustellen, die der Nutzer nicht braucht. Er klickt die Inhalte an und weiß meistens genau, wo er auf der Seite hin navigieren möchte ohne erste Snippets und Vorschauen im Menu präsentiert zu bekommen. Ich bin auch davon überzeugt, das der Großteil des Traffics über soziale Netze generiert wird und nur ein kleinerer Teil über direkte Zugriffe. Wie oben im Screenshot kurz zusammengefummelt, hätte das Menu mit einer Dropdown Funktionalität völlig ausgereicht. Wichtige, oft besuchte Seite einfach dort anzeigen, fertig. Davon abgesehen sind einige der Menus einfach größtenteils leer.

Die Seite der Hochschule OWL macht das recht gut. Auch wenn das Design etwas in die Jahre gekommen ist.

Ein gelungenes Bsp. eines Megamenus: http://codyhouse.co/demo/mega-site-navigation/index.html

Java Script

Die Seite ist voller JavaScript. JavaScript ist toll. Mag ich. Es gibt im Web aber Statistiken die belegen, dass ca. 1% der Nutzer JavaScript deaktiviert haben (Finde die Statistik gerade leider nicht mehr).  Das scheint auf den ersten Blick recht wenig, geht man aber davon aus, wieviele Besucher die Seite der NW täglich hat, können das schon mal vorsichtig geschätzt 50 – 100 Nutzer sein. Hier mal ein Screenshot der Seite ohne Java Script:

nw_jsdisable
Als Webentwickler weiß ich, dass große Seite nicht ohne JavaScript auskommen, will man dem Besucher mehr bieten als bloße Inhalte. Aber Warum keine Warnung? Ein kleiner Hinweis? Das sind nicht mehr als 2 Zeilen Code. Und es gibt ja auch nocht den http://modernizr.com/ und seine no-script Klasse. Der Besucher wird hier völlig alleine gelassen. Das ist nicht so schön.

Fehler im Java Script

nw_jserrors
Ja, der Otto-Normalo sieht das gar nicht und bekommt meistens auch nichts davon mit. Die Seite läuft trotzdem, aber solche Fehler sind meistens ein kleiner Schneeball, der zur Lawine wird und Browser finden sowas nicht nett. Genau wie Google und der w3c Validator.

Cookie Warnung

Wo ist die Cookiewarnung?!!

Wetter Widget

Ein Wetter Widget. aha. Warum? „Dont boil the ocean“. Features und Spielereien sind nett, aber nicht, wenn es auf Kosten der Nutzbarkeit und der Übersicht geht. Klammern wir das mal aus und schauen uns das Widget mal genauer an:
NW_wetterwidget
Der Hintergrund ist sehr hell und die Typo in weiß gehalten. Ergo man kann es kaum lesen. Abhilfe hätte hier eine einfach If Else geschaffen, welche je nach Wetter einfach die Kolorierung der Typografie angepasst hätte. Falls keine Programmierer anwesend sind, hätte auch ein einfacher Schatten der Schrift funktioniert.

Hier eine kleine schnelle nicht optimierte Anpassung (klick für beste Ansicht):
wetter_neu
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.96);

Immernoch nicht perfekt, aber schon etwas besser lesbar. 2 Zeilen im CSS Code. Um eine Optimierung für ältere Browser zu erreichen, wäre die Abfrage des Hintergrundes und die Textanpassung die bessere Lösung, da text-shadow nur in modernen Browsern (CSS3) funktioniert.
Das Wetter Widget ist auch so eine Funktion, die man als Programmierer total cool findet und eine Implementierung super viel Spaß macht. Leider sehen das die Nutzer anders und wenn man mal ehrlich ist, hat jeder Nutzer genug Wetter Apps auf seinem Smartphone und eine Google Suche bringt ein schnelleres (und hübscheres) Ergebnis…

nw_googleWetter

Typografie

Das Thema Typografie. Serifen gehen nicht. Viele <h*> Überschriften wurden hier in: „Droid Serif“ übernommen. Und nicht nur die Überschriften, auch im Menu finden wir die Serifen-Fonts. Bei einer derart großen Zielgruppe, die nicht über die neusten Monitore und Browser verfügt, ist das eher eine schlechte Wahl. Warum? Serifen verschmieren auf älteren Monitoren. Bildschirme bieten immernoch eine sehr viel geringere Auflösung als Papier. Man sagt Papier bieten 1000 ppi und ein modernes Smartphone gerade mal 400 ppi. Das Ergebnis ist, dass die Darstellung auf älteren Monitoren schmiert und nicht lesbar ist oder zumindest nicht hübsch aussschaut. Desweiteren wurden die Fonts von Google Webfonts eingebunden. Hmm. Ja ok. Kann man machen, aber ein Typekit Font wäre die bessere Wahl gewesen. klarer, kompatibler, kleiner, besser, kostenpflichtig.

Performance

Ich habe die Seite vor 2 Stunden aufgerufen. Seit dem steht mein Ventialtor meines Macbook Pros (i7) nicht mehr still. Das mag an den Flash Inhalten liegen, aber selbst wenn ich diese deaktiviere scheint auf der Seite einiges an JS zu routieren. Safari hat gleich mal den Stromsparmodus auf der Seite aktiviert. aha.

safaristromspar

Sicherheit

Oh, wie ich gerade feststellen mußte werden sämtliche Login-Daten der Kunden unverschlüsselt an die Server übertragen. Ernsthaft? Man muss ja keine generelles SSL für die Seite aktivieren (Google mag das seit neustem), aber im Nutzerbereich sollte das schon sein und gerade heutzutage ist das ein unumgängliches Feature. Das sollten die mal schleunigst nachbessern.
Fazit: Für mich fühlt sich diese Seite an wie eine wacklige Beta. Der erste Eindruck ist Top, der zweite floppt. Der Druck, den Programmierer und Designer von „oben“ bekommen ist nicht zu unterschätzen und da wird oft kurz vor der Deadline irgendwas zusammengeschustert. Aber eine solche Seite, in einem solchen Umfang, mit derart vielen Besuchern darf so nicht freigeschaltet werden. Druck hin oder her. Eine Qualitätskontrolle einer unabhängigen dritten Partei hätte hier geholfen. Bleibt nur abzuwarten, wie hier nachgebessert wird. Die mobile Seite habe ich außen vorgelassen. Sieht aber auf den ersten Blick gut aus.

😉

Verwendete Libs der Seite.

  • Backbone js
  • Google Webfonts
  • Bootstrap
  • jQuery
  • jQuery UI

Webserver: Apache

Ist das die neue Gmail App unter Lollipop?

Ich stöbere ja immer gerne in Google Produktseiten rum und heute morgen hab ich mir die Design Guidelines zum Material Design angeschaut ,welche Google vor ein paar Tagen in einer Beta veröffenlicht hat. In der Sektion Typografie sind mir dann diese beiden Screenshots hier aufgefallen. Sieht Interessant aus. Ist natürlich reine Spekulation, könnte aber durchaus sein. Was meint ihr?

style-typography11_large_mdpi style-typography12_large_mdpi

Papierinsekten aus recycelten Magazinen

Mit viel Liebe zum Detail und einer großen Portion Kreativität sind diese farbenfrohen Papierinsekten aus alten Magazinen entstanden. Unten noch ein kleines Making Of Video. Mag ich.

 

via

US Dollar Redesign

View post on imgur.com

 

via

Twitter im Material Design von Rico Monteiro

f0ff1b28649936dfa1668a3f3e523dae

https://www.behance.net/gallery/20424889/Twitter-Material-Design

Bootstrap 3 im Google Material Design

Ein wirklich schön gemachtes Material Design Theme für Twitters Bootstrap Frontend Bib. Die Buttons reagieren sogar auch den Klick mit einer hübschen Animation. Ich bin absoluter Fan vom neuen Design und freu mich auf Android L(ollipop). Wer es gar nicht abwarten kann mit dem Material Design Produktiv zu arbeiten, dem sei das Polymer Projekt oder das Angular JS Projekt ans Herz gelegt. Der Entwickler des Bootstrap Themes rät von der Produktivnutzung bisher noch ab.

http://fezvrasta.github.io/bootstrap-material-design/

Es macht auf jeden Fall einen besseren Eindruck wie das CSS Framework (getleaf.com). Das wirkt meiner Meinung nach sehr unausgereift und kommt detaillos daher.

UPDATE:
screenshot_308

 

 

 

 

 

 

Hier eine weiteres Framework das ohne Bootstrap daher kommt.

http://material-ui.com/

© 2017 Medienproduzent

Theme von Anders Norén↑ ↑