Flat UI – Starten wir durch

Flat UI ist eine Art Frischekur für die Apps und Websites und eine natürliche Reaktion auf den Schmelztiegel an hyperreastlischen Interfaces der letzten zwei Jahre. Gibt es Regeln? Nein, nur Richtlinien und die sind recht einfach. Wer bisher in seinen Interfaces nach weiteren und weiteren Schmuckelementen gesucht hat, wird hier etwas umdenken müssen, denn hier geht es darum, Interfaces auf das geringste zu konzentrieren und dann einzufärben. Keine Schnörkel, nicht einmal abgerundete Kanten (ich bezweifele das aber Entwickler @dirkbloessl ist fest davon überzeugt).

Pastelltöne

Zurückhaltend und dennoch knallig. Sie unterstreichen Bildmaterial großartig aufgrund ihrer geringen Sättigung. Wer unsicher ist, wie er die Farben wählen und finden soll, wird mit der Seite “Flat UI Colors” sehr glücklich werden. Eine ausgezeichnete Seite für Color-Picking. Pinterest gibt auch gerne Aufschluss über gute Farbwahlen in Flat UI (Hier ein Board mit meinen Favoriten)

Monotone Farb-Kombinationen

Es bedarf keiner großen Kompositionen aus Komplementär-Tönen, um ein schönes Interface zu schaffen. Im Gegenteil! Monotone Farbkominationen können z.B. für Web-Apps wesentlich augenfreundlicher sein. Sucht euch einen Farbton aus und Stuft ihn so viel und so wenig ab, wie ihr wollt. Empfehlenswert sind 2-3 Stufen in jede Richtung, um es nicht zu unruhig zu machen. Das ganze mit Graustufen oder Schwarz und Weiss kombiniert und das Farb-Schema ist erstellt. Gute Tools zum Finden und erstellen sind übrigens auch Colourlovers und Adobe Kuler.

Simple und aussagekräftige Icons

 ”Don’t make texts, make interfaces” sagte mal ein kluger Designer. Ein Grund, wieso iOS ein so beliebtes Betriebssystem ist. Gute Icons können den User durch unzählige Screens leiten, ohne, dass er nur einen Buchstaben gelesen hat. Auch in Flat UI’s müssen wir uns dieses Hilfsmittels nicht entledigen. Mein neuster Einkauf ist das aktuellste Glyphish 4 Set, dass bereits von Apple als Dritthersteller-Iconset empfohlen wird. Wer ein etwas vollständigeres Set sucht, sollte sich auch einmal Version 3 und darunter anschauen, um zur Not etwas besser ausgestattet zu sein. 25$ gut investiert!

Touchable Buttons

Optional aber ein Tipp von mir: Gut benutzbare Buttons! Flat UI’s eignen sich perfekt für Responsive-Websites und sind demnach auf fast jedem Multitouch-Gerät zuhause (Smartphone, Tablet und alles dazwischen). Demnach sollten Buttons leicht erreichbar sein und nicht erst bei der zweiten Berührung erwischt werden.

Weitere Tools und Inspirationen

Flat UI HTML Kit – Wer nicht lange gestalten, sondern gleich los bauen möchte: Ein HTML UI-Kit auf GitHub

60 Flat Web UI Design Inspiration – Ein Artikel mit sehr vielen schönen Einblicken in Flat UI

Flat UI auf Dribbble – Alles, was die Community so baut

Wir sind stolz zu behaupten, dass unser Case mit @Oseon und @Studioselzam für den deutschen Preis der Onlinekommunikation 2013 nominiert ist. In der Kategorie “Webmagazin” tritt unser Responsive-Projekt Curtalo gegen namenhafte Größen wie Henkel, Continental oder Eismann an, um den begehrten Preis abzuräumen. Wir drücken die Daumen!

Link zu den nominierten (PDF)

Die Idee ist genial: Erstelle eine Applikation, die die Brücke zwischen allen Services schließt und permanent assistiert. Erinnerung an Termine und Prognose des Verkehrs dort hin ist nur einer von vielen Use-Cases. Was Google auf Android derzeit schon souverän erledigt, fehlt noch auf iOS. Dort scheiterte Google nämlich an Apples App-Politik und der tiefen Integration in das System (Facebook Home all over again). Was tun? Ein App muss her.

Die Idee

Osito bittet ganz zu Anfang um Zugriff auf das Heiligste: Kalender, den aktuellen Standort und falls das nicht reicht: Gmail. Nachdem das erledigt ist, macht sich die App an’s Werk: Es findet Flüge und informiert über Verspätungen, findet Termine und warnt vor Stau via Google Maps. Nahezu alles ist möglich. Insofern Meetings mit einer Person aus dem Adressbuch stattfinden, erinnert die App ggf. an Verspätungen und kann auf Wunsch den Meetingpartner automatisch über SMS oder Mail informieren.

Was magisch und zauberhaft klingt, hat aber auch Schattenseiten. Der permanente Check der aktuellen Geolocation hat in unserem Test das iPhone in wenigen Stunden zu 0% gebracht. Ein enormer Minuspunkt für ein App, dass sich schließlich non-stop um uns kümmern soll.

Die UI

“Less looking, more doing!” ist das Motto von Osito. Die UI bringt Flat-Design zum Besten und lässt große Icons und Bilder sprechen. Wer Probleme mit Text-Layouts und Pastelltönen hat: Finger weg. Dennoch hat die App die Berechtigung dieses zurückgefahrenen Designs: Es soll eher als Informant, quasi Informationsträger, dienen und den User eher mit Daten versorgen, anstatt mit Eyecandy. Gut durchdacht.

Fazit
Von Google Now sind wir weit entfernt. Sympathisch ist zwar, dass die App recht schnell klarmacht, dass die Daten sicher sind und keinerlei Schabernack damit getrieben werden, doch das behauptet Google auch von Zeit zu Zeit. Denn wer Osito seine Dienste abverlangt, bezahlt dies mit allerlei Informationen über sich: Geolocation (jederzeit), Kontakte, E-Mailaccounts und und und. Wer hiermit kein Problem hat, findet in Osito seine neue digitale Sekretärin.

Link: Osito

Ganz zu Anfang: Brauch mein Handy noch ein Foto-App, ich hab doch Instagram? Meine Antwort würde lauten: Ja. Warum? Weil die vermeidliche Romantik und Zeitlosigkeit der Bilder leider von der selben generischen Social-Community gefolgt ist, die schon Facebook bereits liefert. Versteht mich nicht falsch: Instagram ist großartig und macht Spaß. Aber…

…was wäre, wenn ein App wieder das Foto in den Vordergrund bringt und dennoch “social” ist? Was wäre, wenn das komplett ohne Community, #Yolo oder Like-Hascherei ginge? (Ich musste Yolo erstmal googlen, ich werde alt).

Rando versucht genau das: Social sein, ohne Community. Lädt man ein Foto bei Rando hoch, erhält man neues Foto angezeigt. Quasi ein Tausch von Bildern. Lade ich heute also ein Foto der Alster bei strahlendem Sonnenschein hoch, erhalte ich innerhalb der nächsten Stunden sicherlich ein Rando einer wildfremden Person von irgendwo auf der Welt. Ein Sofa aus Russland oder eine Katze auf Bali. Kein Benutzername, keine Profile, keine Likes, kein Paid-Content. Schöne Fotos senden, schöne Fotos bekommen. Danach das Handy beiseite legen und sich des Tages erfreuen. Eine gelungene Abwechslung zu #Yolo.

Link: http://rando.ustwo.se/

Hätte mir vor wenigen Wochen jemand gesagt, dass mir Exporte in Photoshop-Dateien irgendwann Spaß machen werden, hätte ich ihn schief angeschaut. Der ewige Weg über “Für Web speichern unter…” war mir schon immer ein Dorn im Auge. Enigma 64 ist eine Möglichkeit, dies mit nur einem Plugin zu erledigen.

Funktionen

Folgende Funktionen stehen dem findigen Designer dabei zur Verfügung: Export des ganzen Dokumentes, selektierten Ebenen oder einer Auswahl. Nach dem Klick auf die entsprechende Funktion wird der Export sofort in den gewählten Ordner erstellt. Auf Wunsch vorher auch noch mit veränderbarer Dateibezeichnung.

Anwendung

Nur was machen wir jetzt daraus? Komplexe Export-Prozesse für Apps ist dank Slicy eigentlich schon gelöst. Brauche ich Enigma64? Vielleicht, denn es bedient einen ganz anderen Bereich sehr gut: Web!
Neben dem Export der Dateien als Dokument (sehr schnell übrigens!), können z.B. Icons auch als Base64 ausgegeben werden (Bilder in Form von Text). Dies sollte natürlich nicht zu sehr ausgereizt werden, um die Ladegeschwindigkeit des Browser nicht zu hemmen, kann in bestimmten Situationen aber sehr hilfreich sein.

Fazit:

Mehr solche Tools, weniger ist mehr!

Link

Eigene News-Kanäle erstellen

Statt Blogs bei Tumblr oder Blogspot zu erstellen, können User nun eigene Kanäle bei Flipboard einrichten. Ein Klick auf ein “+” kann dann jeden x-beliebigen Artikel zu einem Kanal der Wahl hinzufügen. Dies funktioniert auch ohne Flipboard: Ein Bookmarklet schafft hier Abhilfe.

UI Feinschliff

Flipboard hat nicht viel an der UI gemacht, da bin ich ehrlich. Dennoch ist der Trend spürbar. Kacheln sind nun größer, erinnern nun mehr an Windows 8, und manche Elemente, wie die Suche und das Hauptmenü, sind nun weitaus präsenter positioniert. Der Sidebar-Trend von Facebook ist ebenso spürbar. Während man vorher die Seitenleiste über eine Lupe (!?) öffnete, hält nun das standardisierte Menü-Icon Einzug.

Fazit

Tolles Update, was das “Folgen” von Nutzern auf Flipboard ermöglicht. Ob dies Nutzer von Twitter oder Facebook überzeugen kann, bei Flipboard zu lesen und zu teilen, wird sich zeigen.

Fittext (Link)

Wie unser Portfolio vermuten lässt, lieben wir große Typografie in Webdesigns. Soweit so gut aber wenn es um Responsive geht, stehen große Textblöcke im Weg. Fittext erlaubt das dynamische Anpassen von Textabschnitten an die vorhandene Device/Fenstergröße.

Retina Images (Link)

Wer den Workflow der Integration von x2-Bildern für Retina-Displays kennt, weiss um die Qualen, die ein Entwickler hierbei erleiden kann. Zeitaufwändig und komplex kann das Thema bei größeren Seiten durchaus werden. Retina Images erledigt dies über Javascript und nimmt sich automatisch die höher-aufgelösten Bilder, sobald sie benötigt werden. Auf diese Weise laden User ohne Retina-Bildschirme nicht die teils sehr datenhungrigen x2-Bilder mit.

TinyNav (Link)

Dieses praktische Plugin verwandelt aus der Navigation der Wahl ein Dropdownmenü für Mobilgeräte, um aufwändige Menüs nutzbar und praktisch zu gestalten.

Adapt.js (Link)

Wer kein Freund von “Mobile First” bei der Entwicklung von Responsive-Seiten ist, kann mithilfe von Adapt.js die CSS live hinzuholen, die für das aktuelle Gerät benötigt wird. So können mehrere eigenständige Layouts gebaut werden, die mit diesem vorgeschalteten Javascript live (!!!) ausgewählt werden. Verkleinert/vergrößert man also das Fenster, wird die passende CSS neu ausgewählt.

Bild-Effekte in jQuery zu realisieren ist anstrengend. Pixel-Effekte, Unschärfen und Co. waren bisher am liebsten in Photoshop, weniger gern in jQuery gebaut (die Browserunsterstützung bei den Effekten lässt teilweise zu Wünschen übrig). Wenigstens Webkit-Browser unterstützen dies mittlerweile direkt per CSS in Form von Filtern. Demnach kann ich euch mit der Browser-Unterstützung noch nicht viel weiterhelfen aber es ist zumindest in Sicht, so etwas in ferner Zukunft schnell und ohne Plugins zu lösen.

Um seinem Wunsch-Image als “Vorreiter in Sachen Web” gerecht zu werden, hat Adobe nun einen Generator für derartige Filter publiziert und als Experiment online gestellt. Hier lässt sich nach Wunsch mit einem Interface solche Filter erstellen und einsetzen. Der Code-Output lässt sich beispielsweise auf Bilder anwenden und hat erstaunliche Möglichkeiten. Mit folgenden Code-Zeilen kann so ein Bild z.B. invertiert, entsättigt, sepia-farben und unscharf gemacht werden. Schickes Tool mit allerhand Potential. In Sachen Mobile-Design schon jetzt einsetzbar!

-webkit-filter:
blur(4px)
invert(23%)
sepia(71%)
saturate(93%);

Adobe CSS FilterLab

Oh ein mutiger Titel, ich weiß! 2012 hat viele schöne Bewegungen und Buzzwords mit sich gebracht und es wird Zeit einmal darüber zu sprechen, was 2013 für uns bereithält.

Mobile & Responsive (Schnarch)

Ich weiß, ich weiß: In allen “Voraussagen” der letzten Jahren waren diese Punkte ein wichtiger Bestandteil aber nicht alle Entwicklungen sind so kurzlebig wie Parallax und Co. Der Mensch liebt sein Smartphone und sein Tablet genau so und auch das Web hat sich bereits darauf eingestellt. Was? Ich mache hier grade eine Retrospektive und keine Zukunftsvorhersage? Korrekt!

Die ersten Schritte sind getan und wir haben uns bei Projekten wie Curtalo häufig über Responsive Web gefreut, wie wir auch darüber geflucht haben. 2013 wird mehr Möglichkeiten und mehr Tools für einfacheres Realisieren solcher Websites haben und einen großen Schritt tun (ihr habt es hier zuerst gehört).

CSS3 Media Queries und Mobile-First-Ansätze sind ein gutes Fundament für eine solche Entwicklung aber nicht der Weisheit letzter Schluss. Derzeit sind die Workflows noch sehr unerforscht und es gibt allerhand Tools und Wege, Websites gleichermaßen auf den Desktop und das Mobilgerät zu bringen. Für 2013 freuen wir uns auf einfachere Wege, um Responsive Web als neuen “Standard” für Webdesign präsentieren zu dürfen.

Simples Design – Adieu Gradients, adios Glanzkante, arrivederci Texturen!

Eine grafische Müdigkeit hat sich 2012 breit gemacht und es handelt sich um unseren geliebten “Realismus” in Design. Ich liebe Skeumorphismus und ich bin nicht der einzige in unserer Riege. 2012 hat dies einen Hochpunkt erreicht: Holzkanten im Musik-App des iPads, das Podcast-App mit sich bewegenden 8-Track-Bändern. Wie nah soll die Grafik der Realität noch kommen?

So groß unsere Liebe für diese Art des Designs ist, ist es Zeit, neue Kontinente zu erforschen und das wird sich 2013 ganz klar ausprägen. Begonnen hat dies bereits mit dem iOS-Spiel “Hundreds” oder schon viel früher mit dem To-Do-App “Clear”. Ein sehr gutes Beispiel ist auch .Mail meines geschätzten Kollegen Tobias Van Schneider. Der Wunsch sich wieder auf Funktion und somit auf den Menschen und das Interface als “Werkzeug” zu konzentrieren. Selbst Designer-Plattform Dribbble hat sich schon einiger Texturen entledigt und dies wird für 2013 erst der Anfang sein. Wir freuen uns auf diesen Frühjahrsputz und sind mit unserem Portfolio selber bald in den Startlöchern (aber psssst, ist noch geheim).

Unangenehme Entscheidungen

Trends setzen sich schnell fest und manifestieren einen Schnappschuss von Optik und Usability, der für den Augenblick ein Gefühl von “Zukunft” vermitteln aber genau so schnell wieder out of date sind. One-Page-Sites, Parallax und Portfolio-Sites mit den üblichen 3-4 Pages über Arbeit, Werke und dem guten alten Kontakt. Das sind nur ein paar Beispiele für den aktuellen Stand des Webs und sind ein gutes Zeichen für den Erfindungsgeist der Webmacher. Wir werden 2013 allerhand neuer Innovationen und auch unliebsamer Experimente antreffen.

Ein Beispiel für Erfindungsgeist und Fortschritt, wie ich ihn mir täglich wünsche: Das Portfolio von Kollege Wolfgang Bartelme. Anstatt der üblichen Seiten voller Thumbnails beherbergt er seine Arbeiten in einem großen Slider. Nach einer Kaffeesitzung mit einigen Kollegen, trifft dieses Design auf geteilte Meinung: “Sonst ist da nichts?”, “Was ist, wenn der Kunde mehr erfahren will?”. Genau so gut aber positive Stimmen wie “Perfekte Darstellungsfläche für große Bilder” oder “Wenig Linktiefe für einen schnelles Verständnis der Arbeit, super!”.

Welche Seite auch recht hat, Bartelme hat sich etwas getraut und das Web damit weitergebracht. Ob diese Idee nun aus seiner Feder stammt oder einer anderen Maus entspringt, der Punkt ist klar: Web braucht polarisierende Entscheidungen und mehr Experimente wie diese. Weiter so!

Frohes neues (Web-)Jahr! Wie seht ihr die Zukunft des Webs in 2013?

In Zusammenarbeit mit Oseon und Studio Selzam ist ein sehr spannendes Web-Projekt online gegangen auf das wir besonders stolz sind. Gute Redaktion kombiniert mit einzigartigem Design, guter Performance und nahtloser Darstellung auf nahezu allen Geräten: Das ist Curtalo. Ok, bevor ich jetzt zu sehr den Werber raushängen lasse, hier die harten Fakten zuerst:

• WordPress als CMS
• Responsive in 3 Stufen (Mobile, Tablet und Desktop)
• Verschiedene Grafiken und Designs für die unterschiedlichen Bereiche
• Unzählige Bearbeitungsmöglichkeiten im Backend, um z.B. jedem Autoren seine Socials und Biografien zu verabreichen

Was ist anders als in anderen Blogs?

Der gesamte Informationsaufbau hat WordPress mit seinen neusten Features aus den Vollen schöpfen lassen. Custom Post Types waren hier nur der Anfang. Jeder Kategorie, jedem Bereich und auch den Autoren einzelne Designs, Farbkodierungen und Layouts zu verabreichen, hat nicht nur einmal die Kreativität unserer Entwickler verlangt. Wählt man beispielsweise einen Text aus der Kategorie Lounge an (violett), wird dieser Text auch violett angewählt. Nicht nur eine Spielerei, sondern ein Detail, dass unterbewusst die Marke der jeweiligen Kategorie mitschwingen lässt.

Was würden wir wieder machen?

Mit Oseon und Studio Selzam zusammenarbeiten.

Was würden wir nie wieder tun?

Den Designprozess ähnlich dem Layoutprozess in Mobile beginnen. Zwar sollten Informations-Entscheidungen zugunsten der Mobilversion getroffen werden, doch ist das Hauptmedium der Desktopcomputer und dementsprechend sollte dieser die Referenz für Grafik und Design darstellen.

Link zu Curtalo