Od autora: Pozdrowienia, przyjaciele! Dziś porozmawiamy o tym czym jest flat design, czyli flat design strony internetowej. Termin ten od dawna podbija serca projektantów stron internetowych i nadal cieszy się niesłabnącą popularnością. Największe firmy (Google, YouTube, Microsoft, Apple Inc., itp.) wykorzystują go do projektowania swoich stron internetowych i aplikacji. Czy nadal nie należysz do sekty zwolenników płaskiego projektowania stron internetowych? W takim razie idziemy do Ciebie!
Jak myślisz, co jest powodem tak ogromnej popularności płaskiego designu? Odpowiem Ci w skrócie: to naprawdę działa! W tym artykule wyjaśnię Ci, na czym polega ten styl, opowiem o jego zaletach i wadach oraz pokażę kilka doskonałych przykładów projektowania płaskich stron internetowych, które z pewnością zainspirują Cię do robienia wielkich rzeczy. Więc chodźmy!
Wszystko zaczęło się od skeuomorfizmu
Dla tych, którzy nie wiedzą, skeuomorfizm nie jest wulgarnym słowem, ale innym stylem projektowania stron internetowych. Płaska konstrukcja jest często przedstawiana jako przeciwieństwo skeuomorfizmu, co moim zdaniem nie jest do końca słuszne. To raczej uproszczenie niż antagonizm.
Do 2010 roku dominującym stylem w projektowaniu interfejsów był skeuomorfizm. Pokazywał elementy tak, jak wyglądały w rzeczywistości, aktywnie wykorzystując faktury, cienie, odbicia i inne atrybuty trójwymiarowego obrazu. Apple poczynił w tym względzie szczególne wysiłki, starannie kopiując większość obiektów oprogramowania z obiektów rzeczywistych.
Wkrótce pseudo-wypukłe ikony przestały przyciągać większość użytkowników i twórców stron internetowych, co zapoczątkowało erę płaskiego projektowania stron internetowych. Świat doszedł do wniosku, że należy usunąć wszystkie elementy dekoracyjne, a pozostawić jedynie to, z czym końcowi będzie wygodnie wchodzić w interakcję.
„Najlepszy projekt to jak najmniej projektowania”
Jak Dieter Rams patrzył w wodę – słynny projektant przemysłowy, który sprzeciwia się natrętnemu designowi, efektom animacji itp. W czerwcu 2013 roku Apple Inc. wprowadził rewolucyjny iOS 7, który otrzymał wszystkie atrybuty stylu płaskiego projektowania stron internetowych. Jednak samolot nie od razu „pokonał” realizm i objętość.
Użytkownicy długo nie mogli zapomnieć magii Steve’a Jobsa i ikon, „które chce się lizać”. Wielu nawet pożegnało się z „biedną siódemką” i przeszło na „promiennego Androida”. Oliwy do ognia dodała duża liczba błędów występujących w iOS 7 oraz białawy, półprzezroczysty wygląd z paralaksą i animacją „smark” podczas otwierania aplikacji.
Ci, którzy pogodzili się z nieuniknioną rzeczywistością i pozostali przy systemie operacyjnym Apple, w końcu zdali sobie sprawę, że płaskie projektowanie stron internetowych nie tylko wygląda interesująco, ale także wprowadza porządek i ujednolicony styl wizualny we wszystkich aplikacjach.
Plusy i minusy płaskiej konstrukcji
Zalety stosowania tego stylu obejmują:
przejrzystość kompozycji i zwięzłość pomocy wizualnych. Responsywny interfejs w stylu „nic zbędnego”, dzięki któremu użytkownicy szybko zorientują się, co chcieli im przekazać;
nacisk na dobrą typografię. Treść jest na pierwszym miejscu, co w dzisiejszym natłoku informacji jest niezwykle ważne;
mniejszy rozmiar stron internetowych i szybsze działanie witryny dzięki minimalnej liczbie efektów wizualnych. Jest to szczególnie przydatne przy tworzeniu wersji adaptacyjnych, gdyż im prostsze formularze, tym łatwiej je wyświetlić na małych ekranach urządzeń mobilnych.
Płaskie projektowanie stron internetowych ma również swoje wady:
ograniczenie wyobraźni projektanta stron internetowych do uproszczonych kolorów, typografii i ikonografii. Dlatego ryzyko stworzenia nudnej i pozbawionej wyrazu strony internetowej jest większe;
brak trójwymiarowości i cieni czasami utrudnia zrozumienie, czy element jest klikalny, czy nie;
brak konkretnych, stałych zasad.
Jeśli zdecydowałeś się zastosować ten styl na swojej stronie, gratuluję - pokazuje to, że zależy Ci na doświadczeniu użytkownika i nadążasz za duchem czasu. Jeśli dopiero zaczynasz jako projektant stron internetowych i nie wiesz, jak prawidłowo używać płaskiego projektu, aby Twoja witryna wyglądała trafnie, a jednocześnie nie była uproszczona, wypróbuj te wskazówki:
Zapomnij o „ceglanych ścianach” i jasnym tle. Płaskie projekty stron internetowych zwykle wykorzystują proste, gładkie i miękkie obrazy w tle.
Nowoczesne trendy i podejścia w tworzeniu stron internetowych
Poznaj algorytm szybkiego rozwoju od podstaw w tworzeniu stron internetowych
Żadnych gradientów, ikon 3D, animowanych przejść i innych efektów specjalnych. Wszystko to sprawi, że Twoja witryna będzie cięższa i sprawi zamieszanie - czy tego potrzebujesz?
Używaj płaskich ikon z wyraźnymi konturami, aby zwiększyć wygodę i funkcjonalność.
Użyj jasnej, bogatej palety kolorów. Teraz trendem są odcienie widma słonecznego: jasne żółcie, róże i zielenie. Najważniejsze, żeby nie przesadzić - na stronie nie powinno być więcej niż 3 kolory.
Skoncentruj się na typografii. W płaskiej konstrukcji preferowane są jasne, oryginalne napisy, które wzywają do działania i zapewniają łatwą nawigację po witrynie. Tutaj również ważne jest, aby nie przesadzić. Zapomnij o czcionkach „pisanych odręcznie” i innych fantazyjnych czcionkach. Do wyróżnienia nagłówków można używać wielkich liter.
Zachęcamy do korzystania z różnorodnych kształtów geometrycznych. Kwadraty, okręgi, linie i inne kształty nie tylko poprawią strukturę serwisu, ale także stworzą przejrzystą hierarchię i podzielą treść. Użytkownicy to docenią, uwierz mi.
Uprość maksymalnie menu nawigacyjne i inne elementy witryny. W przypadku przycisków używaj zwykłych prostokątów bez cieni i podkreśleń.
Tym samym z biegiem lat strony internetowe o płaskiej konstrukcji stały się standardem akceptowanym przez absolutnie wszystkich. Spójrz na większość nowoczesnych stron internetowych – są płaskie do szpiku kości.
Na koniec podam obiecane przykłady udanych projektów płaskich, które mogą posłużyć Ci za inspirację do stworzenia własnych arcydzieł.
1. Strona internetowa http://dunked.com.
Popularna platforma do publikowania portfolio, skierowana do przedstawicieli różnych zawodów kreatywnych. Minimalistyczny, płaski design strony internetowej wywołuje poczucie rzetelnej i zrozumiałej usługi, która nie rozprasza niepotrzebnymi efektami specjalnymi.
2. Interfejs Microsoftu.
Microsoft to jedna z firm, dzięki którym styl płaski stał się tak popularny. Może pamiętasz odtwarzacz Zune, konkurenta iPoda, który Microsoft wypuścił na rynek w połowie 2000 roku? Zatem projekt tego produktu znacznie różnił się od większości zastosowań tamtych czasów, głównie ze względu na dużą typografię, płaskie ikony, duże i jasne kształty.
Interfejs ten, nazwany Metro, został później przeniesiony na komputery osobiste (system operacyjny Windows 8), interfejs Xbox 360 i inne produkty oprogramowania Mircosoft.
3. Strona internetowa http://www.vox.com.
Cóż, jesteś zainspirowany? Precz z pseudorealistyczną estetyką 3D!
To wszystko. Subskrybuj i udostępniaj nasze artykuły znajomym w sieciach społecznościowych. Wysokie konwersje dla Ciebie!
Nowoczesne trendy i podejścia w tworzeniu stron internetowych
Poznaj algorytm szybkiego rozwoju od podstaw w tworzeniu stron internetowych
Dziś skupimy naszą uwagę na jednym z najpopularniejszych obszarów współczesnego projektowania graficznego, jakim jest flat design.
Słynny artysta Edgar Degas powiedział kiedyś: „Sztuka to nie to, co widzisz, ale to, co pozwalasz zobaczyć innym”. Dotyczy to również projektowania graficznego, które można również zdefiniować jako sztukę rozwiązującą konkretny problem. Projekt graficzny ma możliwość zmiany nastroju i przekazu poprzez najmniejsze zmiany kształtów i odcieni, liter i odstępów. Trendy w tej dziedzinie, które stały się integralną częścią życia codziennego, wpływając na proces decyzyjny i rozwiązując problemy prezentacji nowoczesnego produktu, a także kształtując gusta użytkowników.
Dziś terminu „płaska konstrukcja” używa się w grafice do wielu celów i zadań, które mają wspólne cechy stylistyczne. Płaski design to trend, który znalazł wiele przejawów w obszarze produktów cyfrowych, dzięki lakonicznemu zastosowaniu wizualnych środków wyrazu.
Obecnie termin ten jest powszechnie używany jako przeciwieństwo „bogatego designu” ze względu na harmonijną prostotę, która stanowi podstawę tego podejścia. Najbardziej zauważalną cechą, która dała nazwę temu ruchowi, jest użycie płaskich, dwuwymiarowych szczegółów wizualnych w przeciwieństwie do wysoce realistycznych i szczegółowych obrazów skeuomorficznych. Flat design na przestrzeni ostatnich lat aktywnie się rozwija, obejmując coraz więcej obszarów projektowania graficznego, które znajdują szerokie i różnorodne zastosowania w dziedzinie cyfrowego projektowania interfejsów webowych i mobilnych. Podejście to można postrzegać jako styl promujący użyteczność i harmonię wizualną interfejsów użytkownika.
Historia płaskiej konstrukcji
Oczywiście płaska konstrukcja nie pojawiła się z powietrza. Za jego pochodzenie uważa się zwykle styl szwajcarski. Styl szwajcarski, znany również jako międzynarodowy styl typograficzny lub w skrócie styl międzynarodowy, to ruch, który powstał w latach dwudziestych XX wieku, ale spotkał się z wielką krytyką, a następnie dramatycznie odrodził się w projektowaniu graficznym w Szwajcarii w latach czterdziestych i pięćdziesiątych XX wieku mocny fundament projektowania graficznego połowy XX wieku na całym świecie. Założycielami tego ruchu twórczego byli Joseph Müller-Brockmann i Armin Hofmann.
Według serwisu Design Is History podsumowanie kluczowych cech tego stylu jest następujące: „…styl skupiający się na prostocie, czytelności i obiektywności. Spuścizną tego stylu jest użycie czcionek bezszeryfowych, siatek i układów asymetrycznych. Zdjęcia wyróżniają się także jako środek komunikacji wizualnej. Najważniejsze dzieła o wpływowym charakterze zostały zaprojektowane w formie plakatów, które uznano za najskuteczniejszy sposób przekazywania informacji”.
Z plakatów przedstawionych jako przykłady wynika, że zwolennicy tego stylu upodobali sobie proste kształty, odważne i rygorystyczne czcionki o dużej czytelności, geometryczne połączenia detali, płaskie ilustracje i przejrzystą hierarchię wizualną. Szwajcarskie wzornictwo szybko stało się coraz bardziej popularne w różnych krajach i zyskało nowe życie w sztuce początku XXI wieku.
Chociaż styl ten doczekał się wielu wyrazów w dziedzinie projektowania wizualnego do druku: plakatów, znaczków, kart, okładek książek, czasopism itp., w erze projektowania cyfrowego znacznie poszerzył swoje horyzonty, szczególnie w dziedzinie projektowania interfejsu użytkownika .
Strony internetowe i aplikacje mobilne otworzyły niesamowitą i owocną perspektywę dla tego minimalistycznego i funkcjonalnego podejścia do rozwiązań projektowych. Styl ten nazwano „płaskim designem”, który natychmiast stał się popularny i zapoczątkował nowy kierunek w projektowaniu graficznym.
Pierwszy krok w kierunku zwiększenia popularności płaskiego interfejsu użytkownika w produktach cyfrowych wykonała firma Microsoft, ruch ten rozpoczął się na początku XXI wieku i szeroko rozwinął się w produktach w 2010 r., w szczególności w rozwoju interfejsów mobilnych dla systemu Windows Phone 7. Kluczowe cechy płaskiego interfejsu użytkownika design, taki jak intuicyjne proste kształty, odważna, wyraźna typografia, jasne kontrastujące kolory, długie cienie, brak skomplikowanych detali i tekstur, dobrze się zakorzenił. Kolejny wzrost popularności płaskiego designu nastąpił w 2013 roku, kiedy Apple wypuściło iOS 7 wykorzystujący zasady płaskiej grafiki jako podstawę wygodnych, intuicyjnych interfejsów. Można również powiedzieć, że niektóre z kluczowych zasad projektowania płaskiego znalazły zastosowanie w Material Design firmy Google.
Zatem głównymi cechami płaskiej konstrukcji są:
- prostota form i elementów;
- minimalizm;
- funkcjonalność;
- odważna i czytelna typografia;
- jasna i ścisła hierarchia wizualna;
- połączenie kontrastujących kolorów, które zapewnia szybką percepcję wzrokową;
- unikanie tekstur, gradientów i skomplikowanych kształtów;
- zastosowanie zasad siatki, podejście geometryczne i równowaga wizualna.
Korzyści z płaskiej konstrukcji
Projekt Fdat ma szereg zalet, które decydują o jego popularności i różnorodności w projektowaniu cyfrowym. Wśród najważniejszych:
- czytelność;
- przejrzysta hierarchia wizualna za pomocą kształtów, kolorów i czcionek;
- efektywna organizacja szybkiej i intuicyjnej nawigacji w interfejsach webowych i mobilnych;
- łatwa skalowalność dla responsywnego projektowania;
- znikome obciążenie dla systemu cyfrowego.
Podsumowując, płaska konstrukcja zapewnia szerokie pole do twórczych poszukiwań i koncepcji stylistycznych.
Płaska konstrukcja - zastosowanie w praktyce
Różnorodność stylów projektowania dostępnych i rozwijających się obecnie dobrze nadaje się do projektowania płaskiego ze względu na jego elastyczność i swobodę artystyczną.
Już na początkowym etapie planowania ogólnego układu, logiki i przejść można zastosować zasady projektowania płaskiego. Cyfrowe narzędzia i oprogramowanie do projektowania wykorzystywane na tym kluczowym etapie pozwalają projektantom zaprezentować klientom i zespołom jeden układ wszystkich ekranów aplikacji lub stron internetowych, a nawet ten podstawowy układ ma już kluczowe funkcje wizualizacyjne typowe dla płaskiego projektu. Na tym etapie idealnie nadaje się do szybkiego i sprawnego wyeksponowania rozwiązań projektowych w prostym, monochromatycznym układzie.
Projekt interfejsu użytkownika
Interfejsy użytkownika zdecydowanie stały się szeroką i sprzyjającą dziedziną płaskiego projektowania. Znalazł swój rozwój zarówno w abstrakcyjnych koncepcjach interakcji użytkownika, jak i w różnorodnych oryginalnych interfejsach, ikonach, elementach interfejsu i ilustracjach.
Tego typu ilustracje stanowią dodatkowe wsparcie dla produktów cyfrowych, są bardziej skomplikowane pod względem szczegółów i zaspokajają potrzeby estetyczne użytkowników, a jednocześnie błyskawicznie nawiązują do konkretnego tematu.
Drukowane ilustracje
Różnorodność celów nowoczesnego projektowania płaskiego i jego rosnąca popularność w produktach cyfrowych wpłynęły również na inne obszary projektowania, w szczególności na projekty produktów drukowanych, takich jak plakaty i okładki książek, z których wywodzi się to podejście.
Marka
Obecnie w projektowaniu marek z powodzeniem zastosowano zasady projektowania płaskiego ze względu na swoją elastyczność, a wiele produktów jest prezentowanych na urządzeniach lub otrzymuje cyfrowe wsparcie online. Płaski design w brandingu jest często przedstawiany w logo i ikonach aplikacji.
Wszystkie fakty i korzyści wspomniane na temat płaskiego designu zdecydowanie nie oznaczają, że ten styl zwyciężył z innymi podejściami do projektowania. Każdy styl i kierunek projektowania ma swoje zalety i wady. Płaska konstrukcja otworzyła jednak nowe perspektywy, zwłaszcza w zakresie niestandardowych rozwiązań, które zapewniają harmonijną równowagę piękna i funkcjonalności.
W ostatnim czasie ogromną popularność zyskał specyficzny styl w projektowaniu stron internetowych i interfejsów użytkownika, który ze względu na stylizację swoich elementów nazywany jest Płaskim.
Jeśli spojrzysz na stronę internetową wykonaną według zasad Flat, nie zobaczysz żadnych przejść gradientowych, żadnych cieni, ani najmniejszego śladu objętości lub tekstury. Podstawowymi zasadami stylu flat są prostota, zwięzłość i minimalizm. Głównymi cechami charakterystycznymi są rzeczy, na których można się skupić - jasne, niezwykłe kolory, niestandardowa typografia, prymitywy graficzne.
Dziś coraz więcej projektantów wykorzystuje ten trend w swojej pracy, ale styl Flat zyskał szczególną popularność wraz z rozpowszechnieniem się nowoczesnych mobilnych systemów operacyjnych Windows Phone i iOS 7, ponieważ są oni zwolennikami tego trendu, chociaż nie przestrzegają to całkowicie.
Nasza firma ma już doświadczenie w tworzeniu stron internetowych w stylu Flat, a my chętnie pomożemy Ci stworzyć płaską stronę internetową!
W tym artykule podkreślimy podstawowe zasady projektowania płaskiego, których należy przestrzegać, jeśli chcesz zastosować mieszkanie jako główny styl swojego projektu.
Poniżej przeanalizujemy i podamy przykłady niektórych witryn korzystających ze stylu płaskiego.
1. Usuń wszystkie efekty
Podstawową zasadą flat designu jest stworzenie dwuwymiarowego obrazu, który sam w sobie jest już płaski. Jednocześnie musisz pozbyć się wszystkich elementów, które mogą dodać przynajmniej trochę głębi obrazowi: gradienty, płynne przejścia, cienie, skosy, objętość, tekstury i tak dalej. Wszystkie elementy obrazu mają twarde krawędzie, a także nie wyróżniają się i nie mają głębi w stosunku do innych elementów obrazu.
W flat designie nie znajdziesz elementów, które starają się wyglądać realistycznie (skeuomorfizm), animacji 3D, realistycznych ikon itp. Sam projekt stara się jednak pozostać podobny do tradycyjnego, jednak teraz na pierwszy plan wysuwają się etykiety, przyciski i nawigacja.
Na pierwszy rzut oka witryna wykorzystująca Flat design może wydawać się zbyt prosta, chociaż w rzeczywistości styl ten charakteryzuje się przejrzystą hierarchią elementów, wygodnym rozmieszczeniem wszystkich narzędzi interakcji z użytkownikiem, a co za tym idzie, charakteryzuje się wysokim wskaźnikiem użyteczności.
2. Używaj prostych elementów
Aby osiągnąć swoje cele w płaskiej konstrukcji, projektanci używają przycisków i ikon. Powinny być jak najbardziej intuicyjne i klikalne. Podobnie jak wszystkie inne elementy interfejsu, powinny być płaskie i proste, bez dodatkowych efektów. Projektanci często sięgają także po proste kształty geometryczne – prostokąty, koła i kwadraty, dzięki czemu każdy kształt może być odrębnym obiektem.
3. Skupmy się na typografii
Ponieważ zgodnie z poprzednią zasadą grafika w flat designie jest prosta, niezwykle ważnym elementem jest typografia – projektowanie napisów. W płaskiej konstrukcji na pierwszy plan wysuwa się typografia wraz z przyciskami.
Czcionki powinny być czytelne i oczywiście spójne z projektem, gdyż przy prostym projekcie niezwykle ozdobne czcionki będą wyglądać nie na miejscu. Nie warto jednak używać zwykłych czcionek, lepiej poeksperymentować i wybrać taką, która przyciągnie uwagę użytkownika.
Można rozważyć połączenie prostej czcionki bezszeryfowej z nową czcionką, która będzie postrzegana jako element artystyczny. Czcionki powinny sprawić, że projekt będzie prostszy i bardziej przejrzysty, podczas gdy przyciski i inne elementy powinny służyć jedynie zwiększeniu interaktywności.
4. Przyciągajmy uwagę kolorem
Kolor odgrywa niemal główną rolę w płaskim projektowaniu. Jeśli dokładnie przestudiujesz strony stworzone w oparciu o tę koncepcję, pierwszą rzeczą, która rzuca się w oczy, jest jasna paleta kolorów. Zwykle składa się z kilku kontrastujących czystych (bez odcieni) kolorów, dwóch lub trzech, choć liczba ta może sięgać nawet ośmiu. Co więcej, wszystkie te kolory są zwykle używane jednakowo.
Najpopularniejsze kolory to kolory podstawowe i wtórne. Czyli kolory podstawowe (cyjan, magenta, żółty, czarny) i te uzyskane w wyniku ich zmieszania. Również bardzo często podczas tworzenia płaskiego projektu stosuje się kolory retro w kolorystyce, takie jak łosoś, fiolet itp.
5. Minimalizm
Płaska konstrukcja ma prosty charakter i dobrze komponuje się z minimalistycznym podejściem.
W ogólnym projekcie witryny należy unikać zbyt wielu wodotrysków i gwizdków. Oczywiście proste kolory i tekst mogą nie wystarczyć. Dlatego jeśli chcesz dodać efekty wizualne, musisz wybrać proste zdjęcia. Niektóre witryny produktów detalicznych wykorzystują płaską konstrukcję, aby umieścić swoje produkty na prostym, nierozpraszającym tle.
Należy zauważyć, że niektóre zdjęcia mają naturalną głębię, ale ogólnie wpisują się w ogólną płaszczyznę projektową
Co to jest płaska konstrukcja? Ten kierunek projektowania jest jednym z najczęściej dyskutowanych w Internecie. Krótko mówiąc, flat design to niezwykle uproszczony styl, którego korzenie sięgają minimalizmu. Ale to nie jest dokładnie minimalizm, ponieważ ten styl może przybierać różne formy w zależności od wymagań projektowych. Aby lepiej zrozumieć, czym jest płaska konstrukcja, lepiej cofnąć się i zdefiniować, czym na pewno nie jest.
To nie jest 3D. Sama grafika 3D pozwala uzyskać bardzo realistyczne, ale jednocześnie dwuwymiarowe obrazy. W przeciwieństwie do 3D, w projektowaniu płaskim nie zwraca się dużej uwagi na szczegóły tworzące głębię i wymiar, takie jak cienie, światła i tekstury.
To nie jest skeuomorfizm. Płaska konstrukcja pojawiła się jako alternatywa dla pseudo-objętościowych elementów projektu imitujących rzeczywiste obiekty lub procesy. Skeuomorfizm polega na aktywnym wykorzystaniu różnych efektów: cieni, odbić, refleksów i realistycznych tekstur. Nie ma czegoś takiego w płaskiej konstrukcji i nie może być.
O płaskim designie ludzie zaczęli mówić po raz pierwszy w latach 2012-2013, kiedy po raz pierwszy pojawił się ten styl. Trend był bardzo zauważalny i wywołał sporo szumu, gdyż Microsoft jako jeden z pierwszych rozwinął ten kierunek. Wydanie systemu Windows 8 z nowym interfejsem na zawsze zmieniło projekt i w dużej mierze z góry określiło wektor rozwoju sieci, przynajmniej jej komponentu wizualnego.
Nie stanął na uboczu także Apple, które również porzuciło elementy pseudo-wolumetryczne w projektowaniu interfejsów swoich urządzeń. Microsoft i Apple stworzyły nową rzeczywistość, w której nie ma miejsca na witryny o przestarzałym designie. Jednocześnie Apple nie postąpił tak radykalnie jak jego odwieczny konkurent i stopniowo pozbył się elementów skeuomorfizmu.
Płaska konstrukcja sama w sobie nie jest ani dobra, ani zła, to projektanci stron internetowych sprawiają, że jest ona wygodna lub niewygodna. Ale bądźmy szczerzy, w swojej skrajnej formie płaska konstrukcja nie wygląda zbyt estetycznie. Prawdopodobnie strefa najlepszej percepcji w tym przypadku znajduje się gdzieś pośrodku pomiędzy elementami płaskimi i pseudoobjętościowymi.
Całkiem możliwe, że dominujący od kilku lat trend skrajnych uproszczeń zostanie zastąpiony czymś innym. Są ku temu pewne przesłanki – na przykład kierunek Material Design, stworzony przez projektantów Google.
KOMPATYBILNE Z KONSTRUKCJĄ ADAPTACYJNĄ
Odejście Microsoftu i Apple od skeuomorfizmu w projektowaniu interfejsów miało poważne konsekwencje. Nowy styl niemal natychmiast został przyjęty jako nowe podejście do UX. Od tego czasu płaski design stał się dominującym trendem, który nadal jest aktualny. Dziś płaskie elementy są wszechobecne, widzimy je na stronach internetowych, w aplikacjach i na wyświetlaczach różnych urządzeń.
Zasady płaskiego projektowania dotyczą szerokiego zakresu kategorii projektowych, ale jego rygorystyczne siatki i uproszczona grafika najlepiej wyświetlają się na urządzeniach o małych rozmiarach ekranów.
Trend w kierunku minimalizmu znacznie uprościł pracę projektantów - łatwiej jest im projektować interfejsy, które wyświetlają się poprawnie na każdym typie urządzenia. W przypadku elementów pseudo-objętościowych wszystko było inaczej – czasami interfejs, który na ekranie komputera stacjonarnego wyglądał niesamowicie, na urządzeniu mobilnym zamieniał się w coś niezrozumiałego.
Jedną z głównych zalet płaskiej konstrukcji jest jej skalowalność. Płaskie elementy wyglądają dobrze niezależnie od rozmiaru i, w przeciwieństwie do projektów perfekcyjnych w pikselach, są znacznie łatwiejsze w obsłudze.
ELASTYCZNA PLATFORMA
Płaska konstrukcja, w swoim dążeniu do prostoty, charakteryzuje się dużą elastycznością: wszystkie elementy z reguły powstają z jednorodnych geometrycznych kształtów, co ułatwia tworzenie zrównoważonego układu, w którym każdy moduł lub blok ma swoje miejsce. Wszystkie elementy są łatwo rozróżnialne i, co ważne, w trakcie pracy można je szybko zamieniać bez naruszania oryginalnych ustawień.
Siatki mają również elastyczną strukturę, która może być dostarczana w różnych konfiguracjach. Pozwala to projektantom na tworzenie najbardziej optymalnych podejść, które najlepiej prezentują dostępną treść. Brak ograniczeń i konieczność dostosowywania siatki w przypadku zmiany lub dodania nowych elementów znacznie przyspiesza pracę.
CZYTELNA TYPOGRAFIA
Płaska konstrukcja znacząco zmieniła sposób, w jaki projektanci myślą o typografii. Nowy styl wymagał innego podejścia do doboru czcionek i jakości układu. W rezultacie brak cieni i różnorodnych efektów ułatwił czytanie tekstów.
Płaski design charakteryzuje się szerokim wykorzystaniem czcionek bezszeryfowych, jednak nie jest to akisoma i szeryfy mogą dobrze wyglądać także w połączeniu z płaskimi elementami. Czcionki szeryfowe będą całkiem odpowiednie jako nagłówek, ale można je zastosować także w tekście głównym, jeśli typografia nie narusza jedności kompozycyjnej.
MINUSY
Może się wydawać, że płaska konstrukcja nie ma wad, ale tak nie jest. Chcąc podkreślić czyste linie i kształty, niektórzy projektanci wpadają w pułapkę skupiania się na estetyce, zaniedbując użyteczność. Prosty i piękny projekt, w którym nie ma nic zbędnego, nie zawsze jest wygodny, a takie błędy są szczególnie widoczne podczas korzystania z urządzeń mobilnych.
W płaskiej konstrukcji często trudno jest określić, który element jest interaktywny, a który nie. Wszystko jest takie samo, nie ma wyraźnych różnic, wszystkie elementy leżą w tej samej płaszczyźnie. W pogoni za prostotą projektanci mogą niechcący ukryć lub nieświadomie zamaskować ważne funkcje lub działania, a użytkownik, nie widząc zwykłych podpowiedzi, może stracić orientację w witrynie.
Weźmy tę witrynę jako przykład. Jakie elementy w nim są interaktywne. Wszystko? Albo tylko niektóre? Niejasny. Można to znaleźć tylko losowo, ale są to niepotrzebne ruchy, co jest niepożądane.
UTRATA INDYWIDUALNOŚCI
W przypadku każdej marki, firmy lub projektu projektowego wyjątkowość ma ogromne znaczenie. Niezależnie od tego, czy jest to strona internetowa, aplikacja, broszura, plakat czy wizytówka, projekt musi być oryginalny i dobrze rozpoznawalny.
Jedną z wad płaskiej konstrukcji jest jej styl wizualny. Używanie prostych kształtów geometrycznych może często skutkować powstaniem dwóch zupełnie różnych projektów, które będą do siebie bardzo podobne. Projektanci stosujący elementy płaskie mają ograniczone możliwości, ponieważ nie mają do dyspozycji dużego wyboru akceptowalnych opcji. Ostatnio w Internecie można zobaczyć wiele witryn z klonami, które w rzeczywistości nie są klonami. To tylko zbieg okoliczności. Co więcej, zbieg okoliczności jest nieprzyjemny, ponieważ witryna traci swoją tak potrzebną indywidualność, gubiąc się na tle innych zasobów o podobnym wyglądzie.
Czasami robi się zabawnie. Patrząc na te zdjęcia, możesz pomyśleć, że patrzymy na różne sekcje tej samej aplikacji. Ale nie, projektanci Marco La Mantia i Simone Lippolis pracowali niezależnie od siebie. Jako główne elementy projektu zastosowano podstawowe kształty geometryczne i białą czcionkę bezszeryfową – decyzja bardziej niż logiczna. Ale wynik jest katastrofalny - ta sama kolorystyka całkowicie pozbawiła projekt wyjątkowości. A takich przypadków jest mnóstwo.
W pogoni za modą
Płaski design jeszcze długo pozostanie jednym z najgorętszych trendów, po prostu dlatego, że dobrze prezentuje się na wyświetlaczach urządzeń mobilnych. Jednak wielu projektantów wybiera mieszkanie nie tylko dlatego, że pozwala im szybko rozwiązać większość problemów, ale także ze względu na chęć stworzenia czegoś nowoczesnego i modnego.
Jednak w pogoni za modą można popełnić poważny błąd: jeśli bezmyślnie podążamy za wszystkimi trendami, całkiem możliwe jest zapomnieć o użyteczności designu. Mieszkanie może być bardzo piękne, eleganckie, a nawet pełne wdzięku, jednak o wyborze projektanta powinna decydować funkcjonalność, a nie dążenie do piękna. Czasami chęć „wepchnięcia” w projekt czegoś modnego tylko jej szkodzi, np. długie cienie, jedna z najbardziej rozpoznawalnych cech flat designu.
Przed nami prace projektantów Aleksandra Lototsky'ego i Erika Malmskelda. To typowe przykłady wykorzystania długich cieni w projektowaniu. Teraz nikogo to nie zdziwi, ale kiedyś, a obie prace powstały jeszcze w 2013 roku, kiedy w modzie dopiero zaczynała się płaska konstrukcja, nowy styl wizualny był bardzo ciekawy i atrakcyjny. W rezultacie pojawiło się tak wiele podobnych ikon, że dziś użycie cieni jest rozwiązaniem schematycznym i nieciekawym. Kiedyś było to modne, teraz już nie. Cienie są jak cienie. Nie ma w nich żadnego znaczenia, nie pełnią żadnej użytecznej funkcji.
ZŁY WYBÓR CZCIONKI
Każdy projektant marzy o stworzeniu czegoś pięknego i jednocześnie funkcjonalnego. Ale w pogoni za estetyką możesz dokonywać złych wyborów, które wpływają na użyteczność. Przykładem jest moda na cienkie i lekkie czcionki. Ten typ typografii wygląda czysto i lekko, ale jest też trudny do odczytania.
Czasem uzasadniony jest wybór cienkiej czcionki – np. do stosowania w nagłówkach. Kiedy jednak tekst główny jest napisany tą samą czcionką, często nie da się go odczytać. Tego typu błędy są szczególnie widoczne na urządzeniach mobilnych – mały rozmiar ekranu drastycznie zmniejsza czytelność treści.
PŁASKIE 2.0
W ciągu ostatnich kilku lat projektanci eksperymentowali z płaskimi elementami i wnieśli do płaskiego projektowania wiele nowych rzeczy. Styl jest w pełni ukształtowany i jak każdy inny ustalony styl, ma swoje zalety i wady.
Mieszkanie u zarania swego istnienia wyróżniało się surową wizualną prostotą, nie było w nim cieni ani struktur. Nawet gradienty nie cieszyły się dużym uznaniem, chociaż w niczym nie zaprzeczały zasadom płaskiego projektowania.
Stopniowo jednak projektanci zaczęli odchodzić od zbyt prostych rozwiązań, próbując znaleźć rozwiązanie kompromisowe pomiędzy płaskością a skeuomorfizmem. Rezultatem jest nowy styl, który niektórzy projektanci nazywają Flat 2.0. W elementach projektu stopniowo zaczęły pojawiać się cienie, gradienty, a nawet jasne, prawie niewidoczne struktury. Płaskiemu projektowi wyraźnie brakuje głębi, a projektanci zaczęli stosować podejścia hybrydowe. Na przykład wizualnie rozmieszczaj elementy na różnych poziomach, eksperymentuj z odcieniami i cieniami. Innym często stosowanym przykładem podejścia hybrydowego jest wykorzystanie nie tylko ikon i płaskich ilustracji wektorowych, ale także fotografii.
Google zrobiło wiele, aby wypromować Flat 2.0. Material Design Guideline jest próbą stworzenia nowego języka wizualnego, który łączy w sobie płaskie i trójwymiarowe elementy projektu. Zalecenia Google są bardzo szczegółowe i łatwe do przestrzegania. Jednocześnie Google nie nalega na ścisłe trzymanie się wszystkich zasad określonych w wytycznej – projektanci mogą eksperymentować, tworząc własne, oryginalne projekty, w których można łączyć różnorodne elementy.
WNIOSEK
Dziś Flat 2.0 jest na etapie formowania się, ale kierunek, w jakim ten styl będzie się rozwijał, jest już dość jasny. Nie należy się spodziewać znaczących zmian – trendsetterzy Google, Apple i Microsoft nie zamierzają się poddać. Jeśli nastąpią zmiany, będą one nieznaczne - pojawią się nowe podejścia, ktoś wymyśli ciekawą „sztuczkę”, nadal będą podejmowane próby czerpania tego, co najlepsze ze skeuomorfizmu. Jednak w ujęciu globalnym nie ma co oczekiwać czegoś naprawdę nowego – flat design to trend długoterminowy i tylko styl najlepiej wpisujący się w nowe technologie, które jeszcze nie istnieją, może wyprzeć go z ugruntowanych pozycji.
Słowo „płaskie” przetłumaczone z języka angielskiego oznacza „płaskie”. Od momentu powstania tzw. Flat design utrzymuje swoją pozycję już od kilku lat, zajmując wiodącą pozycję na rynku.
Gdzie to wszystko się zaczęło
Projektowanie stron internetowych zmieniało się wiele razy od czasu jego powstania. Przebyła długą drogę od prostych i nudnych elementów do trójwymiarowych, wypukłych i niemal materialnych. Można to łatwo zaobserwować na przykładzie zmiany wyglądu systemu operacyjnego Windows. Komponent wizualny rozwija się równolegle z rozwojem technologii. Jednak nowe trendy wskazują raczej na powrót do minimalizmu i prostoty.
Od skeuomorfizmu do płaskiego designu
Styl poprzedzający mieszkanie był skeuomorfizmem. Od dłuższego czasu jest to główny trend w projektowaniu. Skeuomorfizm to styl pseudowolumetryczny, którego wszystkie elementy imitują wygląd rzeczywistych obiektów (notatnik, budzik), wykorzystując cienie, naturalne tekstury i inne rzeczy. Jego uderzające przykłady znaleziono we wczesnych interfejsach smartfonów. Zaczęła tracić na swojej pozycji po 2010 roku, kiedy projektanci dużych firm zaczęli zwracać uwagę na uproszczenia i opracowując interfejsy użytkownika, zaczęli pozbywać się głównej cechy skeuomorfizmu - trójwymiarowości.
Doskonałym wizualnym przykładem różnicy stylów jest zdjęcie poniżej. Obraz po lewej stronie jest projektem płaskim, natomiast ten po prawej stronie to skeuomorfizm.
Charakterystyka stylu płaskiego
Mieszkanie to styl dwuwymiarowy. Nie ma absolutnie żadnych efektów wizualnych, takich jak płynne przejścia kolorów, cienie czy trójwymiarowe tekstury. Jednym słowem wszystko co sprawia, że obraz jest trójwymiarowy.
Główna treść informacji zawarta jest w ikonach (ikona Płaska konstrukcja). Powinny być jak najbardziej przejrzyste dla użytkownika, jeśli chodzi o aplikacje na smartfony. W przypadku witryn internetowych ikony są głównymi elementami oddającymi ich specyfikę i przekaz informacyjny. Z reguły prezentowane są w postaci prostych kształtów geometrycznych, koła lub kwadratu, z charakterystycznym konwencjonalnym obrazem.
Opracowując projekt płaski, zwraca się również uwagę na kolorystykę. Powinno być monotonne, nie nachalne i nie rozpraszać użytkownika. Najczęściej stosuje się jeden czysty kolor i kilka kontrastujących odcieni. Nawiasem mówiąc, istnieje wiele usług internetowych oferujących zestawy kolorów typu Flat design, z których można korzystać, kopiując kody szesnastkowe kolorów, które lubisz.
Nie mniej ważne jest coś takiego jak typografia (tekst). Ze względu na ogólną prostotę, komponent tekstowy szczególnie wyróżnia się. Oznacza to, że powinien być czytelny i nie zaprzeczać ogólnemu stylowi. Będzie to zależeć od pomyślnego wyboru czcionki i jej koloru.
Przykłady płaskich projektów
Zacznijmy od tego, że ikony wielu znanych zasobów Internetu i sieci społecznościowych zmieniły się w bardziej płaski sposób. Niedawno giganci Google i YouTube również zmienili swój wygląd na płaski. System operacyjny Windows, zaczynając od ósemki, całkowicie porzucił wszelkie oznaki głośności na ikonach, co cieszyło oczy niektórych użytkowników w poprzednich wersjach, i zaczął stosować się do płaskiego projektu. Ich śladem poszli twórcy aplikacji mobilnych na iOS i Androida.
Strony typu one-page (landing page) szeroko korzystają z zalet Flat designu, dla którego decydującą rolę odgrywa nie pretensjonalny wygląd, a funkcjonalność i czytelność.
Ewolucja płaskiej konstrukcji
Początkowo Flat Design był rzeczywiście całkowicie płaski, co stwarzało pewne trudności użytkownikom przyzwyczajonym do wypukłych przycisków. Jeśli w skeuomorfizmie klikalność przycisków była natychmiast zauważalna, to w pierwszych odmianach płaskiej konstrukcji nie zawsze było możliwe określenie interaktywności elementów za pierwszym razem.
Po wydaniu przez Microsoft systemu Windows 8, zaprojektowanego w płaskim stylu, nie wszyscy użytkownicy byli w stanie od razu zorientować się w nowym interfejsie i ikonach, na które mogą kliknąć. Wygląd elementów nie wskazywał w żaden sposób na możliwą interakcję z nimi. Ten projekt był wygodniejszy dla aplikacji mobilnych, które podchwyciły ten pomysł. Apple jako pierwszy zrobił to w iOS 7.
Jednak płaska konstrukcja nie stoi w miejscu i ewoluuje w kierunku większej złożoności. Dziś coraz częściej przypomina konstrukcję półpłaską lub, jak to się nazywa, Flat 2.0. Zaczęły pojawiać się w nim efekty głębi, cienie i gradienty. Głębokość w płaskiej konstrukcji osiąga się poprzez ułożenie elementów na różnych poziomach lub pod kątem.
Tak czy inaczej, styl ten jest u szczytu popularności i cieszy się dużym zainteresowaniem. Jeśli więc planujesz zaprojektować swoją stronę internetową, możesz bezpiecznie zdecydować się na projekt płaski. A jeśli potrzebujesz brakujących elementów do swojej witryny, w Internecie możesz znaleźć ogromną liczbę bezpłatnych elementów interfejsu użytkownika o płaskiej konstrukcji (do pobrania bezpłatnie), takich jak ikony, czcionki, szablony i inne niezbędne elementy interfejsu użytkownika.
Plusy i minusy stylu
Bez wątpienia w dzisiejszym szybkim życiu taki dyskretny, informacyjny styl jest wygodniejszy niż jego poprzednik. Płaska konstrukcja ma wiele niezaprzeczalnych zalet.
Być może najważniejszą rzeczą jest szybkie ładowanie stron internetowych. Strony internetowe korzystające z płaskiej konstrukcji otwierają się znacznie szybciej niż te, które są przeładowane animacjami i innymi ciężkimi obiektami. Czas ładowania jest szczególnie ważny dla optymalizacji SEO i promocji witryny na górę.
Uproszczony wygląd ułatwia czytanie tekstu i pozwala skupić się na głównej treści.
Projekt wygląda harmonijnie i całościowo, co stwarza ogólnie przyjemne wrażenie.
Nic nie może być idealne, a płaska konstrukcja nie jest wyjątkiem. Mimo całej pozornej prostoty opracowanie naprawdę udanego projektu płaskiej sieci nie jest takie łatwe. Istnieje możliwość uczynienia go nudnym i nieatrakcyjnym. Albo wręcz przeciwnie, przesadź z projektem i zapomnij o funkcjonalności. Głównym zadaniem przy opracowywaniu Flat designu jest zachowanie idealnej równowagi pomiędzy pięknem i łatwością użytkowania.
