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.) używają 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 brudne słowo i inny styl 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 wszystko elementy dekoracyjne należy usunąć, a pozostało tylko to, z czym użytkownik końcowy może 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”. Dolałem oliwy do ognia i duża liczba błędy obecne w iOS 7 oraz białawy, półprzezroczysty wygląd z animacją paralaksy i „smarka” 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 efekty wizualne. Jest to szczególnie przydatne podczas tworzenia wersji adaptacyjnych, ponieważ prostsze formy, 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.
Współczesne tendencje i podejścia do tworzenia 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 jasnego, soczystego paleta 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. Aby wyróżnić nagłówki, których możesz użyć wielkie litery.
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 dziedzin zawody kreatywne. 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 na 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
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 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. Skeuomorfizm polega na aktywnym wykorzystaniu różnych efektów: cieni, odbić, refleksów i realistycznych tekstur. 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. 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ń. 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 szczerze mówiąc, w moim ekstremalne przejawy 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.
Jest całkiem możliwe, że dominujący dla kilku ostatnie lata tendencję do skrajnych uproszczeń zastąpi coś innego. 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.
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 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 skutkuje dwoma całkowicie różnymi projektami, które są bardzo różne podobny przyjaciel na przyjacielu. 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ż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. Podstawowe elementy projektu są używane jako figury geometryczne a biała czcionka bezszeryfowa to rozwiązanie więcej niż logiczne. 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 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 zauważalne na urządzeniach mobilnych - 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.
Zrobiła wiele, aby promować Mieszkanie 2.0 Firma Google. Wytyczne dotyczące projektowania materiałów to próba stworzenia nowego języka wizualnego, który łączy w sobie płaski i elementy objętościowe projekt. Zalecenia Google są bardzo szczegółowe i łatwe do wykonania. 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. Znaczące zmiany nie należy się spodziewać – 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.
