Płaski styl, co. Wolna przestrzeń, duże elementy

Co to jest płaska konstrukcja? Ten kierunek design jest jednym z najczęściej omawianych 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 znieść najwięcej różne kształty 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, nie ma tu nacisku na płaską konstrukcję dużo uwagi 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. Sugeruje to skeuomorfizm aktywne użytkowanie różne efekty: cienie, odbicia, odbicia i realistyczne tekstury. W płaskiej konstrukcji nie ma i nie może być czegoś takiego.

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. Wyjdź z systemu Windows 8 z nowym interfejsem na zawsze zmienił projekt i w dużej mierze z góry określił wektor rozwoju sieci, przynajmniej jej element wizualny.

Nie stanął na uboczu także Apple, które również porzuciło elementy pseudo-wolumetryczne w projektowaniu interfejsów swoich urządzeń. Powstał Microsoft i Apple nowa rzeczywistość, w którym nie było miejsca na strony o przestarzałych projektach. 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. Dzięki temu projektanci mogą tworzyć najbardziej optymalne podejścia Najlepszym sposobem zademonstrować 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.

Dla płaska konstrukcja typowy szerokie zastosowanie Czcionki bezszeryfowe nie są jednak akisomami i szeryfy mogą również dobrze wyglądać 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ść. Proste i Piękny design, w którym nie ma nic zbędnego, nie zawsze jest wygodne, 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 oczywiste różnice, wszystkie elementy leżą w tej samej płaszczyźnie. W pogoni za prostotą projektanci mogą niechcący ukryć lub nieświadomie zamaskować Ważne cechy lub działań, a użytkownik, nie widząc zwykłych podpowiedzi, może stracić orientację w serwisie.

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 prostego figury geometryczne często prowadzi do dwóch całkowicie różne projekty mogą okazać się do siebie bardzo podobne. Projektanci stosujący elementy płaskie mają ograniczone możliwości, bo nie mają zbyt wiele do dyspozycji. duży wybór akceptowalne opcje. W 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żna by pomyśleć, że przed nami różne sekcje ta sama aplikacja. Ale nie, projektanci Marco La Mantia i Simone Lippolis pracowali niezależnie od siebie. Podstawowe elementy projektu są używane jako figury geometryczne a biała czcionka bezszeryfowa to rozwiązanie więcej niż logiczne. Ale wynik jest godny ubolewania - taki sam schemat kolorów całkowicie pozbawił projekt jego 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 sobie pozwolić 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 przydatna funkcja nie spełniają.

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ć. Takie błędy są szczególnie widoczne w urządzenia mobilne – mały rozmiar ekranie znacznie 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 cienia ani struktury. Nawet gradienty nie cieszyły się dużym uznaniem, chociaż w niczym nie zaprzeczały zasadom płaskiego projektowania.

Ale stopniowo projektanci zaczęli od nich odchodzić proste rozwiązania, próbując znaleźć jakieś kompromisowe rozwiązanie między płaskością a skeuomorfizmem. Rezultat był nowy styl, które 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 rozmieść elementy różne poziomy, 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ł 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. Rekomendacje Google bardzo szczegółowe i łatwe do naśladowania. 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.

Która się rozwija aplikacje mobilne i stron internetowych, napisał dla nas felieton i wyjaśnił sprawę dotyczącą projektowania płaskich i materiałowych.

Ogólnie rzecz biorąc, różnica między projektowaniem płaskim a projektowaniem materiałów jest subtelna. Osobie, która nie ma głębokiej wiedzy na temat projektowania graficznego, rzeczywiście mogą wydawać się bardzo podobne. W tym artykule postaram się „rzucić światło” na niektóre różnice między nimi. Otrzymasz dodatkową wiedzę, na tyle niezbędną, aby przypadkowo nie zranić delikatnej natury projektanta.

Trochę historii

Zanim zaczniemy mówić o różnicach pomiędzy dwoma najpopularniejszymi trendami projektowymi, dowiedzmy się, skąd się one biorą. Istnieje opinia, że ​​​​projekt materiału tworzony jest na podstawie płaskiego. Skąd w takim razie wzięło się projektowanie płaskie?

Skeuomorfizm

Jeśli chodzi o interfejs użytkownika i projektowanie stron internetowych, koncepcja skeuomorfizmu odnosi się do podejścia, którego główną ideą jest naśladownictwo. Nie wdając się w szczegóły, przypomnijmy sobie interfejsy Apple sprzed iOS 7, z ich „realistycznymi teksturami, oświetleniem i bombastycznymi efektami”.

Próbować zrobić obiekty cyfrowe podobne do swoich rzeczywistych odpowiedników uzasadniano koniecznością ułatwienia interakcji użytkownika z urządzeniem. Tak naprawdę z tego powodu dominowały wszelkie interfejsy z realistycznymi teksturami cyfrowy świat przez wiele lat. Projekt skeuomorficzny świetnie sobie radzi, pomagając użytkownikom płynnie przechodzić ze świata rzeczywistego do świata cyfrowego.

Jednak wraz z rozkwitem technologie mobilne stopniowo pojawia się potrzeba skupienia się przede wszystkim na wygodzie i łatwości użytkowania. Zgadzam się, w tym obszarze istnieje potrzeba tworzenia rozwiązania mobilne, dostępne od różne urządzenia, znacznie wzrasta. I w tym momencie prostota staje się nowym standardem projektowania.

Uwaga: w żadnym wypadku nie myśl, że skeuomorfizm całkowicie zniknął. Jest szeroko stosowany w grach, w których konieczne jest stworzenie realistycznego świata i pomoc graczom w wyczuciu swojej postaci, aby głęboko zanurzyć się w procesie gry.

Płaska konstrukcja

Ten styl jest całkowicie pozbawiony jakichkolwiek trójwymiarowych obiektów. Z grubsza mówiąc, w płaskiej konstrukcji brakuje takich elementów stylistycznych, jak cienie, tekstury, gradienty, ale zwraca się uwagę na grę czcionek, kolorów i ikon. Ale dlaczego to wszystko było konieczne? Odpowiedź jest prosta.

Po pierwsze, płaska konstrukcja znacznie skraca czas ładowania strony. Brak „ciężkich” szczegółów skeuomorficznych (np. warstw, czcionek szeryfowych, gradientów) sprawia, że ​​płaskie elementy projektu są „lżejsze”, co z kolei znacznie przyspiesza czas ładowania. Co więcej, płaskie elementy wyglądają równie atrakcyjnie na obu ekranach. wysoka rozdzielczość i z niskim.

Po drugie, proste obrazy mogą przekazać Twój pomysł użytkownikom szybciej niż szczegółowe ilustracje: są schematyczne i dlatego dość łatwe do zrozumienia.

I oczywiście płaskie ikony ze stosunkowo prostą czcionką mogą skierować uwagę użytkowników na naprawdę ważne treści.

Dziś płaska konstrukcja zyskała zasłużone uznanie, ale nadal ma swoje problemy. Najbardziej oczywistym przykładem takich problemów był Wersja dla Windowsa 8 przez Microsoft. Ten system operacyjny uważany jest za pioniera płaskiej konstrukcji i wspiera koncepcję Metro Design. Przyczyną problemów było to, że firma uznała za konieczne zwrócenie większej uwagi na typografię niż na samą grafikę.

Wyniki testu użyteczności systemu Windows 8 przeprowadzonego przez NN Group wykazały, że użytkownicy mieli trudności z odróżnieniem obiektów klikalnych od obiektów, których nie można kliknąć. Użytkownicy narzekali, że obiekty, które wyglądały na statyczne, w rzeczywistości można było kliknąć. W rezultacie główna misja firmy – pomoc użytkownikom w prawidłowej interpretacji systemu – nie powiodła się.

Kolejną firmą, która często kojarzona jest z płaskim designem jest Apple. W mobilnej sali operacyjnej odeszli od skeuomorficznych elementów projektu systemu iOS 7, wydany w 2013 roku. Tym razem przejście zostało przyjęte nieco lepiej, głównie za sprawą tego, że firma nie postarała się całkowicie zaktualizować koncepcję interfejsu użytkownika, a po prostu dodała kilka zmian w kierunku płaskiego projektu. Dzięki temu użytkownicy mogli korzystać z produktu, opierając się na swoich wcześniejszych doświadczeniach z systemami operacyjnymi i stronami internetowymi.

Wygląd materiału

Powiedzmy sobie jasno: projektowanie materiałów to bardziej markowy produkt niż spontaniczny trend projektowy, który zyskał powszechną akceptację. To głównie odróżnia go od płaskiej konstrukcji.

Nazywając materiał projektowy „markowym”, mam na myśli to, że posiada on cały zestaw jasno określonych zaleceń i zasad, którymi kieruje się każdy szanujący się projektant. Jest całkiem oczywiste, dlaczego Google wprowadziło Material Design: zaistniała potrzeba ujednolicenia projektu, aby aplikacje wyglądały tak samo na każdym z wielu urządzeń z Androidem.

Choć całkiem funkcjonalna, płaska konstrukcja jest nadal uważana za trudną do zrozumienia. Prawda jest taka, że ​​płaskie obiekty na ekranie mogą dezorientować użytkowników (zwłaszcza tych, którzy nie mają doświadczenia w korzystaniu z interfejsów mobilnych i webowych). Dlatego material design stara się przywrócić elementy skeuomorfizmu, ale w mocno uproszczonej formie. Obrazy wyglądają płasko, zwłaszcza jeśli chodzi o kolory, ale nadal są wielowymiarowe dzięki obecności osi Z.

Inaczej mówiąc, material design można nazwać ulepszoną wersją flat designu z elementami skeuomorfizmu – animacją, cieniami i warstwami. W ten sposób możesz uczynić produkt bardziej intuicyjnym pod względem nawigacji i uniknąć niepotrzebnej komplikacji w ogólnym stylu.

Plusy i minusy płaskiej konstrukcji

Zostawmy historię ewolucji stylów i przejdźmy do czegoś bardziej znaczącego – wymieńmy mocne i słabe strony płaska konstrukcja.

• Minimalizm i styl
• Intuicyjność. Łatwiej będzie Ci przekazać swój pomysł użytkownikom.
• Oszczędność czasu i zasobów. Strony ładują się znacznie szybciej przy mniejszym zużyciu przepustowości.
• Skup się na treści. Interfejs pozbawiony jest zbędnych szczegółów, które mogą odwracać uwagę od naprawdę cennych informacji.
• Wygląda równie dobrze różne urządzenia niezależnie od tego, czy jest to przeglądarka na komputerze, czy na smartfonie.
• Przyspiesza proces tworzenia witryny lub aplikacji, eliminując niepotrzebne poprawki projektowe.

• Minimalistyczny styl.
• Całkiem intuicyjny na poziomie intuicyjnym. Konstrukcja materiału będzie równie łatwa do zauważenia zarówno dla doświadczonych użytkowników, jak i początkujących.
• Umiarkowany skeuomorfizm. Wszystko wygląda bardziej realistycznie dzięki zastosowaniu osi Z (unikalna koncepcja Google).
• Istnieje zestaw podręczników, które są stale aktualizowane. Dlatego każdy projektant może zawsze się do nich zwrócić, jeśli w procesie pracy pojawią się trudności.
• Zachęcamy do animacji rozwiązań internetowych. Nie trzeba przypominać, jak bardzo ludzie kochają ruch. Dodatkowo animacja pozwala uczynić interfejs bardziej przejrzystym i intuicyjnym.

• Ma właściciela (firmę Google). Dlatego wszelkie pytania i sugestie dotyczące ulepszeń należy kierować do właściciela.
• Ze względu na oś Z proces projektowania może zająć więcej czasu.
• Elementy animowane wymagają więcej zasobów.
• Sztywne trzymanie się wytycznych może ograniczyć oryginalność projektu.

Podsumować

W rzeczywistości nie należy uważać, że jedno z rozważanych podejść do projektowania ma wyraźną przewagę nad drugim, ponieważ style płaskie i materiałowe idą obok siebie. Obie cieszą się ogromną popularnością i obydwie pozbawione są nadmiernego realizmu. Material design jest następcą flat designu, natomiast flat design sam w sobie był reakcją na rozwiązania zbyt ciężkie i realistyczne. Material design dodał coś, od czego flat design zawsze starał się odejść – trochę skeuomorfizmu. Chociaż jedno zawsze będzie się różnić między tymi podejściami: projektowanie materiałów jest produktem zastrzeżonym Google, a płaska konstrukcja jest wynikiem połączenia kilku praktyk projektowych, które dążą przede wszystkim do ogólnej prostoty.

Prawdę mówiąc, płaski design bardzo ewoluował w ostatnich latach, od stylu całkowicie „płaskiego” do stylu „półpłaskiego”. Pozwala teraz na użycie warstw i subtelnych cieni, dzięki czemu obiekty wydają się głębsze niż wcześniej. Zatem ty i ja jesteśmy szczęśliwymi rówieśnikami płaskiej konstrukcji 2.0.

Wreszcie nic nie stoi na przeszkodzie, aby spróbować połączyć te dwa podejścia, aby stworzyć naprawdę funkcjonalny i przyjazny dla użytkownika produkt. Zaczerpnij zatem inspirację od guru projektowania mieszkań i materiałów i do dzieła!

Mieszkanie - projekt (płaska konstrukcja) - Ten popularny styl przy projektowaniu stron internetowych i interfejsów, a także systemów operacyjnych, osobliwość czyli prostota, wyrafinowanie i minimalizm. Płaska konstrukcja zaczęła zyskiwać na popularności w 2010 roku jako przeciwieństwo skeuomorfizmu.

Skeuomorfizm- fizyczna ozdoba lub element projektu, który jest kopią kształtu innego przedmiotu, ale wykonany z innych materiałów lub przy użyciu innych metod. Przykładami mogą być ceramika ozdobiona imitacją nitów przypominających podobne garnki wykonane z metalu lub kalendarz komputerowy imitujący wygląd mocowanie stron papierowego kalendarza biurkowego (definicja z Wikipedia).

Popularyzację stylu płaskiego w projektowaniu ułatwiło wydanie system operacyjny Windows 8 od Microsoftu w stylu Metro, a także iOS 7, w którym Firma Apple wybiera również styl płaski. Potem zaczyna się prawdziwa era płaskiego projektowania. Już wkrótce duże firmy również przejdą na Flat-design usługi wyszukiwania i aplikacje - Google, Youtube, pojawia się wiele witryn, które w swoim projektowaniu wykorzystują zasady płaskiego stylu. W ostatnich latach flat design jest liderem światowych trendów w projektowaniu stron internetowych.

Korzyści z płaskiej konstrukcji

1. Praktyczność- zastosowanie płaskiej konstrukcji pozwala zminimalizować ilość stylów, skryptów i animacji, co pozwala na szybsze ładowanie strony.
2. Łatwe w adaptacji- płaska konstrukcja jest wystarczająco łatwa do dostosowania do różnych rozdzielczości ekranu.
3. Łatwość użycia- dzięki uproszczonemu stylowi użytkownicy łatwiej dostrzegą informacje na stronie.
4. uroda- bezstronność zewnętrzna i proste projekty pozwalają skupić się na projekcie, który naprawdę Cię przyciąga.

5 zasad projektowania płaskich stron internetowych

Płaska konstrukcja wcale nie jest nudna, jak mogłoby się wydawać na pierwszy rzut oka. Ze względu na czystość i wyrafinowanie rozwiązania projektowe mogą być stylowe i piękne, bez niepotrzebnego hałasu, co pozwala skoncentrować się na produkcie lub usłudze.

1 - Korzystanie z obiektów 2D

Płaska konstrukcja wyklucza użycie elementów, które nadają obiektowi głębię i objętość: cienie, gradienty, światła, tekstury, odbicia, animacja. Gdy obiekt jest obrazowany, wyświetlane są tylko jego kontury.

2 - Ikony i proste obiekty

Stosowanie płaskie ikony a jednosylabowe figury o wyraźnych konturach i tym samym kolorze pozwalają maksymalnie uprościć projekt i uczynić go lżejszym. Sterowanie staje się intuicyjne zrozumiałe dla użytkownika i zachęcaj do interakcji.

3 - Proste czcionki w stylu projektowania

Dużo uwagi poświęca się typografii i czcionkom w płaskiej konstrukcji. Nie stosuje się tutaj kursywy, czcionka harmonijnie wpasowuje się w projekt strony, nie tylko pod względem treści, ale także nawigacji. Nawet w przypadku typów czcionek witryny zalecany jest styl minimalistyczny.

4 - Gra w kolory

Płaska konstrukcja zawiera kilka podstawowych kolorów, które wykluczają użycie płynne przejścia i gradienty, ale mogą być jasne i kontrastujące ze sobą.

5 - Minimalizm

Płaska konstrukcja polega na zastosowaniu wizualizacji elementów, wykorzystaniu całej szerokości ekranu i jednoczesnej minimalizacji informacji.

Istnieje coś takiego jak prawie płaska konstrukcja. To jedna z koncepcji projektowania płaskiego, która zakłada wykorzystanie prostych elementów i dwuwymiarowej przestrzeni. Przykładem może być zdjęcie wysokiej jakości, który rozmywa się tło lub przyciemnione. Pozwala to na stworzenie głębi i perspektywy obiektu.

Przykłady płaskich projektów

W Internecie, także w segmencie białoruskim, można znaleźć wiele przykładów rozwoju stron internetowych o płaskiej konstrukcji o różnej tematyce, w tym aktualności, portale, a nawet sklepy internetowe.

Nie wiemy, czy zauważyłeś, czy nie, ale ostatnio (szczególnie w zeszłym roku) w projektowaniu stron internetowych na całym świecie można zaobserwować wyraźny trend w stronę uproszczeń, brutalnego minimalizmu i wizualnego rozjaśniania tego, z czym jako użytkownicy mamy do czynienia na każdym kroku. dzień. Mówiąc najprościej, projekt stał się „płaski”: w przeciwieństwie do wypukłych ikon z czasów szybkiego wzrostu portale społecznościowe i web 2.0, obecnie coraz częściej witają nas proste ikony nowych usług. Wszystko to ma swoją nazwę - płaska konstrukcja. Nie mieszkanie, ale mieszkanie.

Wczorajszą prezentacją nowego mobilnego systemu operacyjnego iOS 7 Apple ostatecznie potwierdził szybki wzrost popularności tego trendu, tradycyjnie zachwycając część swoich fanów, ale spotykając się także ze znacznym niezadowoleniem wśród doświadczonych użytkowników i projektanci. O co chodzi? Jaki jest pożytek z tej płaskiej konstrukcji i czy świat naprawdę jej potrzebuje? Postanowiliśmy zwrócić się do ekspertów z Ukrainy i zagranicy.

Poprosiliśmy ich o odpowiedź na trzy główne pytania:

• dlaczego świat zaczął zmierzać w stronę flat designu w internecie i mobile i co to jest;
• co to da Apple i iOS 7;
• jak wpłynie to na projektantów z jednej strony i użytkowników z drugiej.

Denis Sudilkovsky, Kijów
Specjalista ds. projektowania interakcji, producent Prodesign.in.ua

„Efekt wahadła” w przewidywaniu przyszłości objawia się tym, że jeśli w jakiejś kwestii pojawią się dwie skrajności, ludzkość przechyli się z jednej strony na drugą. Dotyczy to niewątpliwie projektowania systemów interaktywnych. Płaska i nieciekawie prymitywna sieć zmieniła się kiedyś w obszerne przyciski internetowe. Wizualizacje interfejsu osiągnęły szczyt realizmu i wahadło leci w jego kierunku Odwrotna strona- płaskie i proste.

Co Apple na tym zyska? Zachowa swoje miejsce w trendzie i setkach tysięcy komentarzy mówiących, że ich iOS staje się bardzo podobny do Androida.

Projektanci będą musieli ewoluować (i nie żartujcie, kiedy płaskie projektowanie przyjdzie do inżynierii mechanicznej i da nam płaskie samochody :). Gdy nie ma dekoracji, cała praca polega na stworzeniu nastroju z treścią na konkretny scenariusz z użytkownikiem. Zawód ten będzie miał coraz więcej wspólnego z Reżyserem niż z Artystą. Przeciwnie, użytkownicy otrzymują nowe doświadczenie i nowe wrażenia. Osobiście jestem zwolenniczką iPhone'a od 4 lat, ale tej wiosny zmieniłem telefon na Androida z jednego powodu - znudziła mi się monotonna idealność interfejsu Apple.

Daniela Bruce’a w Sztokholmie
Starszy specjalista ds. kreacji cyfrowych, danielbruce.se

Na początek chciałbym zaznaczyć, że nie podoba mi się określenie „płaska konstrukcja”. Większość projektów graficznych od wieków była „płaska”. Myślę też, że ogranicza to twoje możliwości wyjątkowy design, gdy wybór jest pomiędzy mieszkaniem a czymś innym. Design może oznaczać znacznie więcej. Wesoły, jasny, mroczny, pozytywny, minimalistyczny – możesz to nazwać jak chcesz. Ale dzisiaj rzadko słyszę, żeby ktoś uważał projekt za coś więcej niż płaski lub skleromorficzny. To trochę smutne.

Dlaczego internet i urządzenia mobilne powoli przechodzą w stronę płaskiego projektu? Z mojego punktu widzenia jest to po prostu trend. Nigdy nie widziałem artykułu o zaletach płaskiej konstrukcji interfejsy użytkownika i nadal nie jestem co do tego przekonany. Prosty i przejrzysty design – tak, ale to nie to samo, co „płaski”. Spójrz na przykład na Google. Nie robią całkowicie płaskich projektów, oni – i ja to podzielam – nadal widzą potrzebę pewnej głębi i różnorodności.

Bardzo się zdziwiłem, gdy kilka lat temu Microsoft wybrał dla siebie ten kierunek, prezentując słynny styl Metro. Faktycznie, korzystali projekt graficzny do dużych znaków, na które ludzie patrzą z pewnej odległości i nigdy nie wchodzą w interakcję z małymi ekranami zawierającymi znaczną liczbę elementów. Ładnie wyglądają, ale czy mają dobrą użyteczność?

To, co wczoraj wieczorem widziałem u Apple, było tylko złą kopią kilku ciekawe projekty, które pojawiały się na stronach takich jak Dribbble i Behance ostatni rok. Nie widziałem nic nowego – poza tym, że daleko mu do tego samego” stare jabłko»Steve’a Jobsa. Firma pokazała, że ​​nie jest w czołówce designu interfejsy mobilne. Oczywiście w ciągu najbliższych kilku miesięcy zobaczymy, jak fani przyjmą te wszystkie białe projekty i kreatywne gradienty, ale nie sądzę, że ten aspekt będzie miał tak duży wpływ, jak niedawne przestoje Google. Ale z drugiej strony, tak czy inaczej, Apple zawsze wyznaczał trendy i inspirował wielu ludzi, w tym mnie.

Dotyczący zwykli użytkownicy, to lubią jasne kolory.

Iwana Klimenko, Kijów
projektant interfejsu mobilnego, 5tak.com

W dużej mierze podchodzę trochę filozoficznie do tej sytuacji fascynacji stylizacją na płasko. To nie pierwszy raz, kiedy projektanci interesują się minimalizmem i sztucznymi materiałami. Wszystko przemija.

Era Bauhausu lat 20-30 wniosła ogromny wkład do designu, jednak szczelność tonalna i sztuczność nie były w stanie oprzeć się pragnieniu i wewnętrznemu pragnieniu ludzi do istnienia w otoczeniu bardziej naturalnych rzeczy.

Potem, w latach 60., wszyscy zaczęli podziwiać plastik.

Meble, naczynia, a nawet ubrania są wykonane z plastiku. Wydawało się, że to Nowa nadzieja ludzkości, ale znowu nie - ludzie bardzo szybko powrócili do form naturalnych lub do kopii naturalnych materiałów.

Ostry kontrast form i minimalistyczna grafika zawsze wyrażały narastanie wewnętrznych konfliktów w społeczeństwie. Design to tylko lustro, które pokazuje nasz wewnętrzny świat. Dzieje się za dużo. Życie bardzo przyspiesza, a my po prostu nie mamy czasu na myślenie i rozważanie czegokolwiek. Często nie mamy czasu po prostu żyć.

Minimalizm i cały ten sprzęt elektroniczny to tylko krok na drodze do czegoś bardziej naturalnego i ludzkiego. Więcej niż tylko kolejny komputer. Nawet mi smutno, że Apple, które umiało patrzeć głęboko, już nie istnieje.

Olesia Grichina, Kijów
Projektant interfejsu użytkownika w Componentix, twitter: elendiel

Myślę, że projektanci mieli na to ogromny wpływ duża liczba gadżety z różne rozmiary ekran i rozdzielczość - dla całej tej różnorodności łatwiej jest stworzyć projekt bez tekstur, skomplikowanych cieni, które prawidłowo uwzględniają oświetlenie itp. Zaczęli myśleć bardziej w kierunku „jak uczynić to wygodniejszym dla użytkownika” niż „jak pięknie rysować”. Treść jest najważniejsza, a w naszej pracy ważne jest, aby przedstawić ją w jak najlepszy sposób.

Wydaje mi się, że zmiany zewnętrzne(płaski interfejs użytkownika, ikony) szczególnie nie zauważyliśmy żadnych poważnych zmian w łatwości obsługi i tym, jak ludzie przeklinają ten temat. Kiedy sprawdzą, czy to działa, zacznie mówić: „Och, jakie to wygodne i dlaczego nie zrobili tego wcześniej?” Mam nadzieję, że wpłynie to na projektantów w taki sposób, że będą zwracać większą uwagę na użyteczność interfejsu, a nie na tekstury i cienie. W końcu będzie można wytłumaczyć klientom, że taki jest trend :)

Myślę, że flat design nie wpłynie szczególnie na użytkowników – jeśli będzie im wygodnie tworzyć i konsumować treści, to zadowolonych osób będzie mnóstwo. Ale ikony włączone ekran główny nadal kwaśny :)

Paweł Grozyan, Kijów
Projektant produktu w MacPaw, grozyan

"Jabłko! A-ha-ha, przestań! – krzyczą projektanci. - Hurra, stało się łatwiej. - użytkownicy skandują." Rozumiem oba punkty widzenia. Dziś po prezentacji z WWDC2013 wielu moich kolegów wstało i powiedziało: „Pieprzyć ten zawód! Ktoś teraz może rysować takie głupoty. A te ikony za 30 dolarów?!”. I na pierwszy rzut oka mają rację, ale jeśli kopiesz głębiej, zdajesz sobie sprawę, że istnieją tysiące obiektów przez długi czas Różniły się one jedynie scenariuszem użytkowania, potem kształtem, potem kolorem, a dopiero potem detalami artystycznymi. Pamiętam czasy, gdy wszyscy ci goście na profilach LinkedIn, którzy dziś mówią UX, UI Designer, nerwowo kopiowali efekt białego cienia liter. Jak Apple. Następnie jasne i jasne miejsca. Jak Apple. Następnie interfejsy bogate w tekstury i realizm. Jak Apple. Cała ich praca polegała na kopiowaniu, ponieważ nie było oryginalnej, jednolitej i wygodnej koncepcji rozwoju dla wszystkich. To jest dokładnie ten problem, który dzisiaj rozwiązuje płaska konstrukcja. Choć wydaje mi się to niewłaściwe, że tak to nazywam. Dobrze, że Microsoft tego nie wymyślił, a powstał ponad dziesięć lat przed erą cyfrową, w dziedzinie wydawniczej.

Mieszkanie - to nie jest dla kliknięć, tylko dla kliknięć, kranów, kranów. Nie można tego nazwać płaskim – brak „grubych” tekstur i cieni na przyciskach sprawia, że ​​jest to raczej uproszczenie i pozbawione wizualnej agresji. I nie można obejść się bez gradientów dla przycisków. Popieram ten trend. Jeśli nie wpłynie to na jakość doświadczenia użytkownika, wszystkim będzie łatwiej z tym żyć. Przede wszystkim dla użytkownika. Po drugie dla twórcy: będzie łatwiej realizacja techniczna, wygodniejszy w klikaniu (podkreślenie linków - cześć) i wieloplatformowy - łączący web, mobile i desktop w jedno jednolite doświadczenie. Bez wątpienia jest to odważny ruch ze strony Apple. I tylko oni mogą o tym decydować. Ich historia ma dziesiątki potwierdzeń, więc mają większe szanse na sukces niż odwrotnie.

Strony internetowe w stylu flat design wyglądają jak prosta geometryczna przestrzeń blokowa z kolorowymi akcentami (ikony, podkreślenia tekstu, infografiki) z minimalną ilością szczegółów graficznych i bez nadmiaru informacje tekstowe. Jak to mówią „minimalizm” i nic zbędnego.

Jak nie rysować płaskich ikon

„Płaskie” projektowanie stron internetowych stało się modne wraz z interfejsami nowy Windows. Rosnącej popularności tego stylu w Rosji sprzyja wzrost liczby projektantów stron internetowych-samouków, którzy nie wiedzą, że interfejs strony internetowej i interfejs „palcowy” (smartfony) to nie to samo (łatwo przewijać w dół strony palcem - a wręcz przeciwnie, będziesz potrzebować dużo cierpliwości i prawdziwego zainteresowania, aby obrócić kółko myszy o 3-4 ekrany w dół). Na rosyjskich płaskich stronach często można znaleźć następujące ikony:

Przykładem są po prostu jaskrawe kolory, które do siebie nie pasują + ikony kiepskiej jakości (wziąłem przykład z płatnego zestawu, ale prawie zawsze freelancerzy korzystają z swobodnie pobranych ikon z różnych zestawów, które również do siebie nie pasują).

Ze względu na niemożność rysowania wysokiej jakości grafiki początkujący projektanci z łatwością korzystają z okazji, aby wszystko uprościć. Jednocześnie pomija się fakt, że projektowanie w stylu „minimalizmu” polega na precyzyjnym, wysokiej jakości opracowaniu szczegółów interfejsu, a nie tylko umieszczaniu ikon pobranych z Internetu na kolorowych kwadratach w Styl Windowsa 8 (które można obecnie znaleźć na wielu rzekomo „nowoczesnych stronach docelowych”).

Przykład dobrych płaskich ikon:

Kolory i ikony powinny nie tylko łączyć się ze sobą, ale także tworzyć jedną całość.

Problemy niskiej jakości płaskiej konstrukcji

1. Nawigacja i użyteczność

Sieć NIE jest prawdziwą przestrzenią, więc aby stworzyć poczucie rzeczywistości i zrozumieć Twoją lokalizację, witryny używają „ bułka tarta", a obrazy ikon są blisko prawdziwe obiekty dla szybkiego zrozumienia i łatwości nawigacji. Tak więc z ikony domu od razu widać, że to „dom”, z ikony słuchawka- że to telefon, wózek - że to koszyk (jak w supermarkecie - wszystko jasne i proste), ikona ze zdjęciem prezentu - prezentu itp.

Jednak nowi projektanci mieszkań często nadmiernie upraszczają ikony. A im dalej projektanci odchodzą od intuicyjnych obrazów, tym trudniej jest je zinterpretować użytkownikowi. Nadmierne uproszczenie czasami utrudnia nawigację. Gdy tylko wszyscy rzucili się do tworzenia modnego, płaskiego projektu strony internetowej, próbując naśladować europejskich projektantów, zapomnieli proste zasady użyteczność.

2. Długie, płaskie owijki na stopy

Strony rozciągają się na 3-4 ekrany, a przestrzeń jest nie tylko oszczędnie wykorzystywana, ale wręcz przeciwnie, dodaje się nadmierną ilość „powietrza”. Jednocześnie nie ma wizualnej motywacji do przewijania - żadnych żetonów, żadnej animacji. Nie jest jasne, w jaki sposób twórcy planowali zainteresować Odwiedzających przewijaniem strony w dół. W końcu w porównaniu do witryn, w których wszystko jest zwarte, witryny z footclothami wymagają dużo energii, aby poruszać myszą po całym ekranie i przewijać.

3. Mylące przyciski

Na płaskich terenach aktywne elementy nie są już oczywiste. Wraz z pojawieniem się płaskiej konstrukcji przyciski również stały się płaskie. Ale wizualny obraz przycisku pochodzi z prawdziwego fizycznego przycisku, a cienie i gradienty po prostu pokazują, że „zdecydowanie możesz tutaj kliknąć”.

4. Źle narysowane ikony

Przez tandetną pracę projektantów ikony na stronach internetowych (jest to szczególnie widoczne na stronach o płaskim stylu) utraciły swoje przewidywalne obrazy. Albo z powodu ograniczone budżety na projektowaniu, być może z powodu niekompetencji samych projektantów stron internetowych, ale elementy nawigacyjne na stronach często nie odpowiadają pierwotnym skojarzeniom i są „naciągane”.

Zakładam, że praca nad stworzeniem ikon przebiega mniej więcej tak: zgodnie ze specyfikacją techniczną potrzebna jest ikona „Indywidualne podejście do klienta”. Osobiście mam obraz menadżera i dwóch klientów, z których każdy jest prowadzony strzałką w innym kolorze (niebieska strzałka prowadzi do niebieskiego klienta, czerwona strzałka prowadzi do czerwonego klienta). Jeśli projektant nie umie rysować, będzie szukał ikony w gotowych zestawach (w najlepszym wypadku kupi ją w banku zdjęć, w najgorszym pobierze z Internetu) i użyj tego, które ma najbardziej odpowiednie znaczenie. Najprawdopodobniej będzie to ikona mężczyzny z krawatem lub walizką. Ogólnie nie posunąłem się zbyt daleko, ale nadal w projekcie strony będzie jasne, że walizka jest „ Indywidualne podejście dla wszystkich” i Zegarek „10 lat na rynku” (swoją drogą, naprawdę to widziałem!) – projektant oszukał.

5. Fałszywe skupienie na treści

Płaski projekt strony internetowej zakłada skupienie się na treści. No jasne – jeśli nacisk nie jest położony na grafikę, to na informację. Ale jeśli uważnie przyjrzysz się „nowoczesnym” stronom docelowym w stylu flat oferowanym przez rosyjskie studia internetowe, niewiele uwagi poświęca się treści. Mianowicie:

• Tekst jest prezentowany przypadkowo. Nie jest jasne, jak rozmieszczone są w nim akcenty, czego się trzymać, a co jest wtórne.
• Nie ma projektu jako takiego. Tabele, listy punktowane, nagłówki, ogłoszenia często nie są w ogóle opracowane.
• Często goły tekst. Nie ma obrazów ani ikon, które wizualnie wspierałyby bloki tekstowe. W rezultacie nacisk nie jest kładziony ani na grafikę, ani na tekst, ale na sam „styl”. Jednocześnie traci się firmę i jej oferty.

Czy zatem płaskie projektowanie stron internetowych jest w ogóle potrzebne?

W projektowaniu interfejsów dla smartfonów wszystko jest jasne - lekkie, nieobciążone, łatwe w obsłudze. Ale przy projektowaniu stron internetowych w stylu flat, osobiście mam duże pytanie: czy to w ogóle jest skuteczne?

Większość Klientów nie rozumie jakości grafiki i zatwierdzając projekt strony kieruje się osobistym gustem (lubię/nie lubię). I tutaj moda odgrywa rolę.

Płaski projekt strony internetowej może być fajny. ALE! Fajny projekt wymaga naprawdę wysokiej jakości użyteczności i elementy graficzne oraz obecność kreatywnych funkcji i efektów. A jeśli ich nie ma w projekcie, jeśli stronom brakuje oryginalności, wyglądają monotonnie, pusto i nudno. Ogólnie rzecz biorąc, jest to obecnie dostępne na większości rosyjskich witryn.

Przykład wysokiej jakości płaskiej konstrukcji:

Moda na płaskie projektowanie stron internetowych jest chwilowa, jak każda inna moda. Niektórzy tworzą oryginalne, kreatywne projekty, inni kopiują je i stylowo naśladują, bo nie wiedzą, jak sami je wymyślić. A tanie portale „modowe” rosną jak grzyby po deszczu…