Płaska konstrukcja stała się ostatnio popularna w aplikacjach i witrynach internetowych. Nie oznacza to, że każdy lubi ten styl każdemu, ale z pewnością nie pasuje do wszystkich aplikacji i witryn. Płaska konstrukcja ma wiele zalet, takich jak prostota i minimalizm, co ułatwia użytkowanie. W przypadku niektórych zastosowań płaska konstrukcja może być zbyt prosta. Oznacza to, że dodaj cienie lub gradienty, aby wyglądały lepiej.

Wiele osób twierdzi, że projektowanie płaskich stron internetowych to efektowny projekt. Mówią, że jest to sposób, aby projekt był jak najbardziej przyjazny dla użytkownika. Oto kilka inspirujących przykładów płaskich projektów. Ten wybór z różnych portfolio jest świetny do zrozumienia płaskich projektów, które faktycznie działają.

ISSLand

Styczeń kreatywny

Minimalna małpa

Co to jest płaska konstrukcja?

Płaska konstrukcja skupiona na użytkowniku
Płaska konstrukcja jest prosta
Płaska konstrukcja - mniej gradientów
Płaska konstrukcja obejmuje proste linie i kwadratowe rogi
Zwykle stosowany jest silny kontrast kolorów
Płaska konstrukcja nie ma cieni, faz, tekstur ani tego, co wygląda 3D
Płaska konstrukcja występuje tylko w 2 wymiarach
Flat design - trend w kierunku prostoty i minimalizmu
Płaska konstrukcja - nie używaj dodatkowych efektów
Nie ma żadnych dodatków
Płaska konstrukcja - mniej przycisków i body kitów
Płaska konstrukcja oznacza skupienie się na czcionkach
Kombinacje kolorów, kontrastujące kolory i ciekawe wariacje kolorystyczne to ważne składniki płaskiej konstrukcji.
Płaska konstrukcja to jeden z wielu projektów. Nadaje się do niektórych projektów, ale nie do innych.

Co nie jest płaską konstrukcją

Płaski projekt nie jest skeuomorficzny ani projekt, który naśladuje kształt i kontury „rzeczywistości”.
Płaska konstrukcja nie obejmuje błyszczących przycisków
Płaska konstrukcja nie obejmuje dekoracji
W płaskiej konstrukcji nie znajdziesz tradycyjnych koncepcji „głębi”
Płaska konstrukcja nie pasuje do wszystkich projektów

Czy płaska konstrukcja to tylko wydajny projekt?

Niektórzy uważają płaską konstrukcję za skuteczną. Oznacza to, że upraszcza korzystanie z witryn i aplikacji, umożliwia wyszukiwanie niezbędne informacjebez rozpraszania się. Oczywiście nie tylko płaska konstrukcja ułatwia znalezienie informacji. Jeśli wszystko zostanie zrobione dobrze, użytkownicy nie będą mieli problemów. Projekt powinien być prosty i łatwy dla tych, którzy potrafią z niego korzystać. Niektórzy wolą używać płaskiej konstrukcji, podczas gdy inni wolą inny styl projektowania.

Elementy do płaskiej konstrukcji

Jak płaska konstrukcja? Oto kilka elementów, które można wykorzystać do płaskiej konstrukcji.

Płaski pakiet ikon

Płaski design to kluczowy kierunek projektowania na najbliższe lata, dlatego zapraszamy do jego lepszego poznania i poznania 5 podstawowych zasad, na których się opiera.

Znajomość z płaska konstrukcjaom

W języku rosyjskim płaska konstrukcja oznacza „płaską konstrukcję” i stała się absolutnym faworytem po prezentacji systemu operacyjnego iOS firmy Apple. Prym wiodło minimalistyczne podejście do projektowania pod kątem użyteczności. Stawiamy na wygodę użytkownika. To wyraźny protest przeciwko „squerforming” (wizualizacji obiektów, tak jak w rzeczywistości). Wybór padł na bardziej uproszczone, a jednocześnie proste rozwiązania estetyczne. Użytkownicy, którzy są zmęczeni realistycznymi wizualizacjami, z entuzjazmem przyjęli ten trend, a coraz więcej projektów internetowych przechodzi do tego formatu.

Chciałbym zaznaczyć, że „płaskie” nie oznacza „nudne”. Płaskie rozwiązania mogą być piękne, są bardziej wyrafinowane, czyste, wolne od zbędnych czegokolwiek, przekształcające się w „wyspę spokoju”. W końcu sprawiają, że treść staje się zrozumiała. Pozostaje poznać podstawowe zasady, aby zastosować je w praktyce.

Zasada nr 1: Precz z niepotrzebnymi efektami

„Płaski” projekt nie ma na celu przekazania objętości, dlatego opiera się na dwuwymiarowej wizualizacji. Oznacza to, że nie zobaczysz żadnych cieni, żadnych refleksów ani odblasków z teksturami (z wyjątkiem długich cieni). Tylko przenoszenie konturów i nic więcej.

Zasada nr 2: im prostsze, tym lepsze

Zaleca się stosowanie w projektowaniu figur jednosylabowych, a także przestrzeganie przejrzystości konturów, która ma na celu podkreślenie lekkości i nieważkości. Ponadto takie lakoniczne elementy dobrze imitują czujnik, generując chęć interakcji z obiektem (wezwanie do naciśnięcia, dotknięcia). Jednak prostota elementów nie równa się prostocie projektu jako całości - dotyczy tylko obrysu. Dzięki temu wszystko, co widzi użytkownik, jest dla niego jasne i może z łatwością z tego korzystać.

Zasada nr 3: Typografia i jej znaczenie

Płaska konstrukcja zachęca do zachowania szczególnej ostrożności podczas pracy z czcionkami. Oznacza to, że ich charakter jest zobowiązany do uzupełnienia schematu projektowego, nie zaprzeczając mu. Ponadto w płaskiej konstrukcji czcionka jest również kluczowym elementem nawigacji.

Zasada 4: akcenty kolorystyczne

Nie tylko typ, ale także kolor to istotny element płaskiej konstrukcji. Zdecydowana większość palet bazuje na 2-3 kolorach, choć oczywiście są wyjątki. Zwykle wybiera się soczyste i jasne, ale jednocześnie czyste kolory. Jak wspomniano, nie ma gradientów ani niepotrzebnych przejść.

Zasada 5: Wybierz minimalizm

Płaski design to doskonały przykład światowego trendu, jakim jest minimalizm. Projektanci porzucają niepotrzebne „dzwonki i gwizdki”, odchodzą od skomplikowanych i niejawnych podejść do wizualizacji, która daje efekty w postaci aktywności użytkownika.

Płaski czy prawie płaski? Szukamy kompromisu!

Podsumowując, chciałbym zauważyć, że dziś istnieje synergia między konstrukcją płaską i niepłaską. Chodzi o „prawie płaski” projekt. Jest to najczęstsze zastosowanie opisywanej koncepcji, kiedy razem z prostymi i lakonicznymi elementami i dwuwymiarową przestrzenią projektanci stosują 1-2 techniki głębi i perspektywy.

Trendem roku 2017 był również Semi Flat Design - półpłaski design. Pod wpływem Material Design stał się nieco bardziej przestrzenny. Pojawiają się jasne cienie, które sprawiają, że projekt jest półpłaski. Płaska konstrukcja jest nadal aktualna, ze względu na cienie stała się głębsza i bardziej złożona, ale podstawowa koncepcja nie została naruszona.

W tym artykule przedstawię Ci płaską konstrukcję. Prawdopodobnie już coś o tym słyszałeś, bo mieszkanie stało się jednym z wiodących trendów w sieci w ciągu ostatnich kilku lat.

Dzisiaj przyjrzymy się, czym jest płaski projekt, jak do tego doszło i czego potrzebujesz, aby stworzyć czysty, żywy i responsywny projekt.

możesz znaleźć dobre przykłady Płaska konstrukcja pod adresem http://market.envato.com/. Istnieje mnóstwo układów, ikon i szablonów, które zapewniają solidne zrozumienie tego, jak wygląda nowoczesny design. .

1. Co to jest płaska konstrukcja?

Płaska konstrukcja - nowoczesny styl interfejs użytkownika, a także projekt graficzny, charakteryzujący się minimalizmem. Płaska konstrukcja charakteryzuje się zastosowaniem minimum elementów i brakiem różnorodnych efektów tekstury, cienia i światła, na przykład: mieszane kolory, gradienty, rozjaśnienia itp.

Mieszkanie jest przeciwieństwem skeuomorfizmu( skeuomorfizm jest zasadą projektowania, gdy jednemu produktowi nadaje się wygląd innego, tj. gdy różne elementy interfejsu są kopiowane z rzeczywistych obiektów - przybliżone tłumaczenie) a także bogate wzornictwo, ale warto powiedzieć, że płaska konstrukcja wcale nie jest tak prosta, jak się wydaje na pierwszy rzut oka. Zawiera pewne cechy skeuomorfizmu, ale porozmawiamy o tym nieco później.

Ogólnie rzecz biorąc, flat pomaga skupić użytkownika na treści bez rozpraszania się przez elementy wizualne. Płaska konstrukcja podkreśla prostotę elementów, jednocześnie czyniąc interfejs bardziej responsywnym, przyjemnym i łatwiejszym w użyciu.

2. Trochę historii

Wiadomo, że płaska konstrukcja istniała na długo przed tym, zanim stała się globalnym trendem w Internecie. Płaski projekt był dość popularny w latach 80., ponieważ technika nie była jeszcze wystarczająco rozwinięta, aby obsługiwać złożone efekty, tekstury i cienie. Jednak nawet wtedy projekt dążył do skefomorfizmu, starając się, aby elementy interfejsu były jak najbardziej realistyczne.

Płaski design, w takiej postaci, w jakiej widzimy go teraz, zaczął zdobywać popularność po tym, jak Microsoft zaczął produkować produkty w tzw. Metrze. Metro to projekt interfejsu użytkownika firmy Microsoft, który zachwyca stylem i prostotą.

W 2010 Microsoft wydał telefon Windows 7, w którym zastosowano płaską konstrukcję z ostrymi krawędziami i prostą grafiką odziedziczoną po wczesnym produkcieMicrosoft (Zune). Później, zainspirowany sukcesem, Microsoft wypuścił system operacyjny Windows 8 oparty na tym samym płaskim stylu Metro.

W końcu płaski projekt osiągnął szczyt w 2013 roku, kiedy Apple wypuściło iOS 7 prezentuje zasadniczo nowy styl z całkowicie przeprojektowanymi elementami interfejsu użytkownika, w tym ikonami i czcionkami. Apple stworzył wizualne zasady projektowania interfejsu użytkownika i ikon .

Wkrótce potem Google zaczął używać płaskiego stylu w swoich aplikacjach i na stronach internetowych, nazywając go Wygląd materiału ... Google ma nawet całą sekcję poświęconą temu stylowi, w tym opis celów projektowania stron internetowych, jego zasad i wskazówek dotyczących tworzenia różnych obiektów projektowych: ikon, układów i tak dalej.

Od tego czasu mieszkanie stało się kluczowym trendem w projektowaniu stron internetowych, dzięki czemu strony internetowe, aplikacje i elementy interfejsu są eleganckie, czyste i stylowe.

Tak więc istnieją trzy globalne przykłady płaskiego projektowania firm, bez których trudno wyobrazić sobie współczesny świat technologii:

Projekt Metro firmy Microsoft

Projekt Apple iOS 7

Material Design Google

3. Pamiętaj o czystości

Płaski projekt jest najwyraźniej nazywany „płaskim” z powodu braku elementów trójwymiarowych i realistycznych efektów, takich jak gradienty, tekstury, światła, półtony, cienie. Pamiętaj, że styl płaski to dwuwymiarowy (płaski) sposób przedstawiania obiektów.

Ponadto w płaskiej konstrukcji przedmioty są przedstawiane w bardzo uproszczony i stylizowany sposób.

A czasami używa się nawet sylwetki lub konturów przedmiotu, tj. wystarczy, aby obiekt był rozpoznawalny, ale nie przeciążał go drobnymi szczegółami.

Minimalizm stał się w dzisiejszych czasach światowym trendem: prostota form i użycie ostrych krawędzi tworzą czysty i przyjemny design. Proste formy są łatwiejsze do zrozumienia i zrozumienia. Dzięki temu projekt jest minimalistyczny, czysty, nie nadając mu zajętego, niechlujnego wyglądu.

4. Doskonałość

Wiedz, że jeśli chodzi o tworzenie płaskich ikon i elementów interfejsu użytkownika, musisz sprawić, by wyglądały ostro, schludnie i idealnie. tak dużo jak to możliwe. Co więcej, dotyczy to zarówno grafiki rastrowej, jak i wektorowej.

W programie Adobe Photoshop wszystko jest jasne: działa z grafika rastrowaktóry jest oparty na pikselach.

Odnośnie programu Adobe Illustrator, to używa grafiki wektorowej, składającej się z krzywych i linii, zwanych wektorami, które są definiowane za pomocą wzorów matematycznych.

Dawno temu Adobe Illustrator nie był szczególnie wygodny program do tworzenia doskonałej grafiki. Dobra wiadomość jest taka najnowsze wersje Ilustrator stali świetne narzędzie stworzyć dobrą grafikę.

Muszę powiedzieć, że grafika wektorowa polega głównie na pracy z prostymi, płaskimi kształtami, pełnymi kolorami i siatkami. Adobe Illustrator jest bardzo elastyczny w ustawieniach i pozwala dostosować siatkę do swoich potrzeb, wyrównać obiekty i używać różne rodzaje trzaskanie. Ułatwia to stworzenie idealnego projektu, który będzie wyglądał czysto i stylowo na każdym wyświetlaczu. Jeśli chcesz dowiedzieć się, jak stworzyć idealną grafikę to przeczytaj artykuł: Jak stworzyć kompozycję perfekcyjną w pikselach za pomocą programu Adobe Illustrator .

5. Kolor

Jedną z bardziej charakterystycznych cech płaskiej konstrukcji, poza cieniami, jest użycie koloru. Większość kolorów używanych w płaskich projektach składa się z zaledwie kilku kolorów podstawowych.

Kolor w płaskiej konstrukcji wyróżnia się jasnością, nasyceniem i bogactwem.Kolorystyka mieszkania nie ogranicza się do kilku specjalnych kolorów, zawiera wiele odcieni, a ich wybór zależy tylko od tego, co przedstawiasz, czy będą to ikony cukierków, czy przedmioty retro w wyszukanej palecie retro.

Powiedzmy, że jesteś projektantem interfejsu i dobrze radzisz sobie z paletami kolorów. Eksperymentujesz z paskiem kolorów w programie programy Photoshop i Illustartor, mieszając kolory według własnego uznania. Jednak proces ten jest dość skomplikowany i wymaga dużej intuicji, doświadczenia i umiejętności. Oto kilka narzędzi, które pomogą Ci stworzyć własną paletę kolorów.

Niektóre z nich nadają się do wszelkiego rodzaju projektów i ilustracji, nie tylko płaskich. Na przykład Adobe Color CC, lepiej znany jako Cooler. Obecnie jest dostępny zarówno w witrynie internetowej, jak i bezpośrednio w produktach Adobe. Chłodnica jest bardzo elastycznym narzędziem, które pozwala tworzyć własną paletę kolorów lub wybierać spośród niestandardowych palet z biblioteki.

Innym prostym i łatwym w użyciu generatorem palet kolorów jest Coolors. Wystarczy nacisnąć spację, a program wygeneruje paletę kolorów, kolory można skorygować, jest też funkcja eksportu.

Istnieje kilka innych podobnych usług z niestandardowymi paletami, które mogą być przydatne. Jest jednak jedno narzędzie stworzone specjalnie do projektowania płaskiego FlatUIColors.com by Designmodo - usługa z zestawem „płaskich” kolorów, bardzo wygodnych w użyciu. Ta strona stała się bardzo popularna wśród projektantów poszukujących dobrych rozwiązań kolorystycznych dla doskonałych projektów. Spróbuj!

W programie można znaleźć szerszą gamę kolorów i palet Przewodnik Google Material Design.

6. Długie cienie

Jak wspomniano powyżej, flat design charakteryzuje się prostotą, dużą ilością wolnej przestrzeni - dlatego mieszkanie odrzuca użycie jakichkolwiek efektów. Jest jednak jeden efekt typowy dla płaskiej konstrukcji. Efekt ten stał się trendem i charakterystyczną cechą mieszkania.

Mówimy teraz o długich cieniach. Mają pewne typowe cechy, które czynią ten efekt rozpoznawalnym, a mianowicie pochylenie o 45 stopni i duże rozmiary (cień może być kilkakrotnie dłuższy niż sam obiekt, w efekcie długie cienie nadają mieszkaniu efekt głębi.

Efekt ten sprawia, że \u200b\u200bobiekt wygląda bardziej trójwymiarowo, zachowując jednocześnie kontekst płaskiej konstrukcji.

7. Praca z czcionkami

Typografia odgrywa dużą rolę w płaskich projektach. Często tekst staje się głównym elementem kompozycji.

Płaskie zwykle używa prostych krojów, które sprawiają, że cały projekt jest czysty i czytelny. Jeśli używasz produktów Adobe, w Adobe Typekit można znaleźć wiele bezpłatnych czcionek. Font Squirrel ma również wiele dobrych darmowych czcionek. Pamiętaj jednak, aby przeczytać licencję, jeśli zamierzasz wykorzystywać czcionkę w celach komercyjnych.

Najczęściej w płaskiej konstrukcji zwykle używa się wielkich liter i kontrastujących kolorów, dzięki czemu tekst jest bardziej czytelny.

Używaj czcionek ostrożnie, pamiętaj, aby podkreślać i pasować do projektu, a nie pojawiać się jako osobny element, co nie oznacza, że \u200b\u200bnie możesz używać czcionek szeryfowych lub odręcznych złożonych. Po prostu zachowaj minimalny poziom i zachowaj równowagę. Jednak flat nadal częściej używa czcionek bezszeryfowych, ponieważ wyglądają one bardziej surowo i schludnie.

8. Plusy i minusy płaskiej konstrukcji

Pomimo tego, że płaska konstrukcja stała się tak popularna ze względu na wiele zalet, nadal ma wady, z którymi borykają się projektanci używający tego stylu. Rzućmy okiem na zalety i wady.

plusy

Popularność

Płaski design stał się trendem, zbierając coraz więcej pozytywnych opinii / od projektantów i projektantów stron internetowych i nie wydaje się, aby tracił na popularności. Wręcz przeciwnie, rozprzestrzenia się coraz bardziej, nabiera nowych form i cech, staje się coraz bardziej kreatywny.

Prostota

Płaska konstrukcja jest prosta, minimalistyczna i czysta. Mieszkanie w internecie pomaga użytkownikom skupić się na treści, a nie rozpraszać ich treściami wizualnymi. Działa to również w przypadku interfejsów aplikacje mobilne: czysty design z duże przyciski Wykorzystuje urządzenia mobilne idealny.

Jasność

Kolor to kolejny fajny plus w płaskiej konstrukcji. Jasne i nasycone kolory wyglądają atrakcyjnie i czysto, a brak gradientów sprawia, że \u200b\u200bprojekt jest stylowy. Co więcej, tak czyste kolory sprawiają, że jest on bardziej pozytywny, reprezentacyjny, płaska konstrukcja tworzy odpowiedni nastrój.

niedogodności

Mieszkanie ma znacznie więcej zalet, ale żaden projekt nie jest doskonały i nie możemy go idealizować. Oto kilka wad płaskiej konstrukcji, o których musimy wspomnieć:

Brak reakcji

Czasami brak ważnych szczegółów lub elementów wizualnych utrudnia proces tworzenia przyjaznego dla użytkownika interfejsu, a to generalnie powoduje, że cały projekt przestaje odpowiadać. Nie wszyscy użytkownicy uważają mieszkanie za tak wygodne, ponieważ znalezienie elementów na stronie internetowej, które trzeba kliknąć lub dotknąć ekranu, może być trudne. telefon komórkowyponieważ nie są interaktywne.

Problemy z drukowaniem

Jak wspomniano wcześniej, nie każda czcionka pasuje do płaskiej konstrukcji. Czasami taki bogaty krój o ostrych krawędziach wygląda naprawdę wyważony i stylowy. Jeśli jednak czcionka zostanie wybrana nieprawidłowo, może zepsuć cały projekt. Trzeba naprawdę wyczuć, które czcionki są dobre dla płaskich, a które nie. Brak doświadczenia sprawia, że \u200b\u200bwybór czcionki jest bardzo trudny.

Słabe efekty wizualne

Ze względu na ograniczenia w stosowaniu efektów, kolorów i czcionek mieszkanie może wyglądać zbyt prosto i chłodno. Jego główną wadą może być również minimalizm - inne płaskie projekty wyglądają dokładnie tak, jak Twoje. Dlatego bardzo trudno jest zmienić ikony lub strony internetowe od projektów innych osób, ponieważ używasz tych samych uproszczonych kształtów, ograniczonej palety kolorów i podobnych czcionek. W rezultacie płaska konstrukcja może z czasem się znudzić.

9. Przyszłe trendy w projektowaniu mieszkań

Nie znaczy to, że flat-design jest w pełni ukształtowany i zatrzymany na swój sposób, być może to właśnie z powodu wspomnianych wyżej niedociągnięć mieszkanie ma tendencję do rozwoju i zmian, uzyskiwania nowych cech i zwiększania wyrazistości wizualnej.

Jeśli przyjrzysz się bliżej ostatniemu przykładowi płaskiej konstrukcji, możesz zauważyć, że naprawdę stopniowo od swoich rygorystycznych narzędzi i zaczyna dodawać subtelne efekty, takie jak: gradienty, cienie, oświetlenie i inne efekty wizualne.

Te małe rzeczy nadają płaskiej konstrukcji pewną głębię bez przeciążania szczegółów, takich jak projekty skeuomorficzne. Te drobne ulepszenia sprawiają, że mieszkanie jest bardziej responsywne i użyteczne, a także nadaje nowy wygląd, czyniąc mieszkanie bardziej elastycznym i wszechstronnym.

Dzięki temu mieszkanie nie traci swoich cech, ale staje się ciekawsze i bardziej elastyczne.- naprawdę jest lepiej.

wnioski

Dlatego omówiliśmy kilka faktów z historii projektowania płaskiego, rozmawialiśmy o kolorach, kształtach i typografii. Rozważaliśmy różne punkty widzenia, zastanawialiśmy się nad zaletami i wadami mieszkania oraz poznaliśmy główne zasady tworzenia dobrego projektu.

Mam nadzieję, że z tego artykułu dowiedziałeś się nowych informacji lub przynajmniej uznałeś je za interesujące. Musisz spróbować stworzyć płaski projekt, jeśli nie zrobiłeś tego wcześniej.

W końcu o czym jeszcze należy wspomnieć o płaskiej konstrukcji?

Jeśli naprawdę lubisz mieszkanie z ostrymi krawędziami, soczystymi kolorami i wyrazistymi czcionkami, jego czystością i minimalizmem, sięgnij po to!

Jest modny, ale jak w każdym stylu graficznym, nie ograniczaj się do jednej techniki. Jeśli modne jest mieszkanie, nie oznacza to, że nie możesz użyć innych stylów w swoim projekcie. Skeuomorfizm, z jego drobnymi szczegółami i teksturami, również może się stać dobra decyzja... Co najważniejsze, należy pamiętać, że projekt jest inny dla każdego projektu, powinien wyrażać jego ducha, cel, istotę, pozostając przy tym wygodny i funkcjonalny. Naprzód!

Słowo „płaskie” w tłumaczeniu z języka angielskiego oznacza „płaskie”. Od początku swojego istnienia tzw. Płaska konstrukcja od kilku lat utrzymuje swoją pozycję, zajmując czołową pozycję na rynku.

Jak to się wszystko zaczeło

Projektowanie stron internetowych zmieniało się wiele razy od momentu ich powstania. Przeszła długą drogę od prostych i nudnych elementów do trójwymiarowych, wypukłych i prawie materialnych. Można to łatwo zauważyć na przykładzie zmiany wyglądu systemu operacyjnego Windows. Komponent wizualny rozwija się równolegle z rozwojem technologii. Ale jej nowe trendy wskazują raczej na powrót do minimalizmu i prostoty.

Od skeuomorfizmu do płaskiej konstrukcji

Stylem poprzedzającym mieszkanie był skeuomorfizm. To od dawna główny trend w projektowaniu. Skeuomorfizm to styl pseudotomowy, którego wszystkie elementy naśladują wygląd prawdziwe obiekty ( notatnik, budzik), z pomocą cieni, naturalnych tekstur i nie tylko. Jego najlepsze przykłady znaleziono we wczesnych interfejsach smartfonów. Zaczął tracić swoją pozycję po 2010 roku, kiedy projektanci dużych firm zaczęli szukać uproszczeń i rozwoju interfejsy użytkownika zaczął pozbywać się głównej cechy skeuomorfizmu - trójwymiarowości.

Doskonałym wizualnym przykładem różnicy stylów jest poniższe zdjęcie. Obraz po lewej stronie ma płaską konstrukcję, a obraz po prawej stronie jest skeuomorficzny.

Charakterystyka stylu płaskiego

Mieszkanie to styl 2D. Absolutnie brakuje mu efektów wizualnych, takich jak płynne przejścia kolorów, cienie, tekstury wolumetryczne. Krótko mówiąc, wszystko, co sprawia, że \u200b\u200bobraz jest trójwymiarowy.

Główną treścią informacyjną są ikony (ikona Płaska konstrukcja). Powinny być jak najbardziej zrozumiałe dla użytkownika, jeśli nadchodzi o aplikacjach na smartfony. W przypadku serwisów internetowych ikony to główne elementy odzwierciedlające ich specyfikę i przekaz informacyjny. Z reguły prezentowane są w formie prostych figury geometryczneokrągły lub kwadratowy z charakterystycznym konwencjonalnym obrazem.

Przy projektowaniu Flat-design zwraca się uwagę na kolorystykę. Powinien być monotonna, nie nachalna ani rozpraszająca użytkownika. Najczęściej używany jest jeden czysty kolor i kilka kontrastujących odcieni. Nawiasem mówiąc, istnieje wiele usług internetowych z kolorami Flat Design, których możesz użyć, kopiując kody szesnastkowe kolorów, które lubisz.

Równie ważna jest typografia (tekst). Ze względu na ogólną prostotę element tekstowy wyróżnia się szczególnie. Oznacza to, że powinien być czytelny i nie może być sprzeczny z ogólnym stylem. Będzie to zależeć od wyboru czcionki i koloru.

Przykłady konstrukcji płaskich

Zacznijmy od tego, że ikony wielu znanych zasobów internetowych zmieniły się na płaską stronę i portale społecznościowe... Nie tak dawno giganci Google i YouTube również zmienili swój projekt na płaski. Operacyjny system Windowszaczynając od cyfry ósmej, całkowicie porzuciłem wszelkie oznaki głośności w ikonach, co cieszyło oko niektórych użytkowników poprzednie wersjei zaczął przylegać do Flat design. W ich ślady poszli twórcy aplikacji mobilnych na iOS i Androida.

Serwisy typu one-page (landing page) szeroko wykorzystują zalety Flat designu, w których decydującą rolę odgrywa nie pretensjonalny wygląd, ale funkcjonalność i czytelność.

Ewolucja płaskiej konstrukcji

Początkowo Płaska konstrukcja była naprawdę całkowicie płaska, co powodowało pewne trudności dla użytkowników, którzy byli przyzwyczajeni 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 sposób płaski, nie wszyscy użytkownicy mogli od razu dowiedzieć się, jaki jest nowy interfejs i które ikony mogą kliknąć. Wygląd elementów nie wskazywał na możliwą interakcję z nimi. Ten projekt był dogodny raczej dla aplikacji mobilnych, które przyjęły ten pomysł. I pierwszy, który to zrobi jabłko w projektowaniu iOS 7.

Jednak Płaska konstrukcja nie stoi w miejscu i rozwija się w kierunku złożoności. Dzisiaj coraz bardziej przypomina półpłaski projekt lub, jak to się nazywa, Flat 2.0. Zaczęły się w nim pojawiać efekty głębi, cienia, gradientów. Głębokość w płaskiej konstrukcji osiąga się poprzez rozmieszczenie elementów na różnych poziomach lub pod kątem.

Mimo to styl cieszy się największą popularnością i cieszy się dużym zainteresowaniem. Tak więc, jeśli planujesz zaprojektować swoją witrynę, możesz bezpiecznie dokonać wyboru na korzyść Flat design. A jeśli potrzebujesz brakujących elementów do swojej witryny, to w Internecie możesz znaleźć ogromną liczbę darmowych elementów płaskiego interfejsu użytkownika (do pobrania za darmo), na przykład ikon, czcionek, szablonów i innych niezbędnych elementów interfejsu użytkownika.

Plusy i minusy stylu

Bez wątpienia we współczesnym szybkim tempie życia taki dyskretny styl informacyjny jest wygodniejszy niż jego poprzednik. Płaska konstrukcja ma wiele niezaprzeczalnych zalet.

Być może najważniejsze szybki rozruch strony internetowe. Witryny wykorzystujące płaską konstrukcję otwierają się znacznie szybciej niż te, które są przeciążone animacją i innymi ciężkimi przedmiotami. Szczególnie ważny jest czas ładowania do optymalizacji SEO i promocji strony na szczyt.

Uproszczony wygląd poprawia czytelność tekstu i pozwala skupić się na głównej treści.

Wygląd wygląda harmonijnie i całościowo, co sprawia ogólnie przyjemne wrażenie.

Nic nie może być idealne, a Płaska konstrukcja nie jest wyjątkiem. Mimo całej swojej pozornej prostoty opracowanie naprawdę udanego płaskiego projektu WWW nie jest takie proste. Jest szansa, że \u200b\u200bbędzie nudny i nieatrakcyjny. Lub odwrotnie, przesadzaj z designem i zapomnij o funkcjonalności. Głównym zadaniem w rozwoju Flat-design jest utrzymanie idealnej równowagi między pięknem a łatwością użytkowania.

Płaska konstrukcja (płaska konstrukcja) jest obecnie jednym z głównych trendów, zarówno w dziedzinie projektowania stron internetowych, jak i technologii tworzenia interfejsów użytkownika. Z ostatnich przykładów najbardziej godne uwagi są: zdecydowany krok Microsoftu w tym kierunku, z Windows 8 i nowym designem Google, z wyraźną demonstracją chęci zagłębiania się w minimalizm.

Oto przykłady definiowania elementów.

Życie po Web 2.0

W postaci zaokrąglonych kształtów elementów z wszelkiego rodzaju efektami - 3D, cieniami, światłami i odbiciami, gradientami, wytłoczeniami. Jednym słowem wszystko, co tworzy głębię i objętość. Duże, jasne elementy sterujące, połysk, użycie tekstur i inne podobne sposoby manifestacji ustępują miejsca prostej, dwuwymiarowej reprezentacji obiektów wizualnych.

Konstrukcja pływająca

Styl oparty na typografii

Pamiętaj, że jest to podstawa do zbudowania „płaskiego” serwisu. Prostota płaskich elementów konstrukcyjnych, a także same zasady minimalizmu, zwiększają znaczenie typografii. Treść tekstowa w zasadzie można zastąpić niektóre ciężkie grafiki lub obrazy. Dziś na wielu stronach typografia stała się wzornictwem. Oczywiście, ponieważ projektowanie w stylu płaskim jest często minimalistyczne, charakter czcionek musi być skoordynowany z ogólnym schematem, stylem i kompozycją. Na przykład, w elementach lub nagłówkach często stosuje się wielkie litery.

Coderwall

Czytaj także: 12 podstawowych kolorów i przykłady ich postrzegania przez użytkowników

Paleta kolorów o płaskiej konstrukcji

Płaska konstrukcja zmierza również w kierunku większej różnorodności kolorów. Projektanci stron internetowych coraz częściej wykorzystują paletę kolorów do wprowadzenia, być może, podstawowej zasady projektowania: strona powinna różnić się od swojego rodzaju.

Minimalna małpa

Wolna przestrzeń, duże elementy

Od początku do końca ma minimalistyczne podstawy, co oznacza, że \u200b\u200bprzejmuje podstawowe zasady: duże bloki treści, duże elementy, wolną przestrzeń, brak nadmiernego zamieszania i pretensjonalności.

Projekt brody

Płaska konstrukcja ikon, przycisków, ilustracji.

Przyciski, ikony, znaczki i ilustracje mają również dwuwymiarowy wygląd. Powinny one odpowiadać danemu stylowi na wszystkich stronach witryny, odzwierciedlać nastrój samej witryny i być łatwe do zrozumienia dla każdego użytkownika.

Wybór kolorów ikon, a także samych ikon, nie jest łatwym zadaniem. Można stosować czyste kolory. Aby ozdobić projekt, musisz pomyśleć o tym, jak uczynić witrynę wygodną w użyciu. Z jednej strony ważne jest, aby nie naruszać stylu, ale z drugiej strony ikony muszą być widoczne. Na ilustracjach dążymy do minimalizmu, unikając wcześniej popularnych efektów 3D.

Czytaj także: Ponad 20 inspirujących stron z płaskimi ilustracjami