FLAT DESIGN - CZYLI PŁASKI ŚWIAT

Wiedza / 10-05-2013 r.

Pisząc jakiś czas temu post na temat trendów w web designie nie przewidziałem, że pojawi się nowy znaczący trend w projektowaniu graficznym – Flat Design (Płaskie Projektowanie).

Na pierwszy rzut oka można go podciągnąć pod minimalizm. Po dokładniejszym porównaniu, zauważymy istotną różnicę: we Flat Design chodzi nie tyle o ograniczenie ilości elementów, ile o pozbycie się wszelkich ozdobników przy jednoczesnym położeniu nacisku przede wszystkim na czytelność i pomysł.

W zdobyciu popularności tego stylu pomogła premiera systemu Microsoftu – Windows 8, który jest oparty o interfejs Modern UI (następca interfejsu Aero z Windows Vista/7), zakładający wykorzystywanie przejrzystej i czystej typografii, prostych piktogramów oraz kontrastowych barw. Wszystko w oparciu o tzw. kafelki. Poza wyglądem, jest to również bardzo użyteczne rozwiązanie, szczególnie w urządzeniach mobilnych z ekranami dotykowymi.

Ekran startowy nowego Windowsa 8

Różnice w wyglądzie systemów

Jak można zauważyć na powyższym obrazku, większość efektów typu podświetlenia, rozmycia, efekty trójwymiarowości zostały usunięte, a barwne ikony zastąpione piktogramami.

Porównanie aplikacji w stylu skeumorfizmu i Flat Design

Aplikacje na iOS przyzwyczaiły nas do pięknych i dopracowanych w każdym detalu aplikacji z dużą doząskeumorfizmu, jednak i tutaj Flat Design zdobywa coraz większą popularność.

Jak można zauważyć na poniższym zbliżeniu na aplikację Synthesizer 76 dla iPad, ilość detali poraża przy stylu „Applowskim”. Dzięki użyciu faktury oraz cieni wygląda bardzo realistycznie.

Zbliżenie na detale aplikacji Źródło: http://synth76.com/

Podczas porównywania detali między Skeumorfizmem i Flat Design, warto zwrócić uwagę na spłaszczenie aplikacji. Dzięki zachowaniu odpowiednio kontrastowej kolorystyki, aplikacje pozostają użyteczne.

Wykorzystanie odpowiedniej kombinacji kolorów jest bardzo ważne, chociażby ze względu na zasady usability. Użytkownicy zostali przyzwyczajeni do detali typu gradienty, cienie sugerujących przyciski akcji. W „płaskim świecie” trzeba dokładniej przemyśleć nawigację i przyciski akcji pod względem wielkości/kolorystyki/umiejscowienia na projekcie aby jednoznacznie sugerowały swoją klikalność.

Flat design opiera się w dużej mierze na łączeniu silnego, kontrastowego koloru z odcieniami szarości, kolorem czarnym i/lub białym dla zachowania równowagi całej koncepcji. Ale to nie wszystko. Przy wykorzystaniu dobrych barw, można stworzyć projekt multi kolorowy, który wykorzystujący pozornie nie pasujące do siebie kolory. Wszystko zależy od naszego wyczucia estetyki. Z pomocą przyjdzie nam aplikacja Flat UI Colors, która wskazuje trendy kolorystyczne.

Projekty stron internetowych w tym stylu wyglądają świetnie. Są żywe, łączą ciekawe zestawienia kolorystyczne oraz przyciągają wzrok swoją odmiennością od standardowej strony.

Poniżej kilka przykładów:

Tworzenie projektów w „płaskim” stylu zakłada odrzucenie zbędnych ozdobników tj. cienie, gradienty, foto realistyczne tekstury oraz efekty szkła (glossy), które odwracają uwagę czytelnika i niepotrzebnie skupiają wzrok.

Ma być prosto i z pomysłem, który powinien definiować cały projekt. Oczywiście brak efekciarstwa nie oznacza nudy! Główną bronią jest umiejętne łączenie ze sobą kontrastowych kolorów oraz powiększanie elementów kluczowych jak np. buttonów wywołujących akcję, na której zależy twórcy strony.

W projektach webowych często wykorzystuje się efekty, które udostępnia HTML 5 i CSS3 np. przejścia, animacje. Dodatkowo używa się techniki Paralax Scrolling (w skrócie: technika skrolowania umożliwiająca przesuwanie się tła/obrazków/animacji na różnych warstwach, dając poczucie głębi) przy układach Single Page Layout, czyli cała strona jest dostępna w jednym rzucie, bez podziału na podstrony, tylko sekcje.

Poniżej kilka przykładów:

Dużą rolę odgrywa Typografia. Najczęściej wybierane są dwie skrajne odmiany fontów – Bold i Light, osobiście bardzo lubię takie połączenie. Przy wyborze atrakcyjnego kroju pisma, niektóre projekty zwalają z nóg, mimo że nie posiadają dodatkowych grafik. Wpływa to na zwiększenie czytelności strony oraz lepsze skupienie uwagi na samej treści.

Upraszczanie projektów, można również powiązać z trendem panującym w projektowaniu/odświeżaniu znaków firmowych, gdzie coraz częściej logo zostaje znacznie odchudzone względem pierwotnego projektu. W poniższych przykładach, można zauważyć, że pozbyto się gradientów, rozświetleń czy cieni. Znak staje się nie tylko czytelniejszy, ale również łatwiejszy w reprodukcji na materiałach z ograniczoną możliwością zadruku.

Można by rzec – „Czytelność przede wszystkim!”

Warto również wspomnieć o wykorzystaniu ikon – królują proste piktogramy, które przy wykorzystaniu odpowiednich narzędzi można zamienić na fonty, dzięki temu łatwiej i lepiej się skalują.

Podsumowując:

Według mnie, główną zaletą Flat Design jest prostota i łatwość skalowania. Brak efektów i ograniczenie ilości grafik sprzyja tworzeniu atrakcyjnych layoutów responsywnych. To wszystko składa się na mały rozmiar strony i szybkość ładowania na komputerach stacjonarnych jak i urządzeniach mobilnych. Z pewnością coraz więcej stron oraz aplikacji będzie korzystało z tego stylu projektowego. Trzeba jednak pamiętać, że ten styl nie pasuje do każdego projektu aplikacji czy strony internetowej. Musimy się zastanowić czy akurat dla nas Flat Design to najlepsze rozwiązanie. Jeśli już się zdecydujemy na płaski styl, zwróćmy szczególną uwagę na zachowanie użyteczności projektu.