Co to jest konstrukcja płaska i jej cechy. Korzystanie z prostych elementów

Dziś skupimy naszą uwagę na jednym z najpopularniejszych obszarów nowoczesności projekt graficzny, co nazywa się płaską konstrukcją.

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 również można określić jako sztukę, która decyduje Szczególnym zadaniem. Projekt graficzny ma możliwość zmiany nastroju i przekazu poprzez najmniejsze zmiany kształtów i odcieni, liter i odstępów. Trendy w tym obszarze, które stały się integralną częścią Życie codzienne, gdyż wpływają na proces decyzyjny i rozwiązują problemy prezentacji nowoczesnego produktu, a także kształtują 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. Płaska konstrukcja aktywnie rozwija się na przestrzeni lat. ostatnie lata, obejmujących coraz więcej dziedzin projektowania graficznego, które znajdują szerokie i różnorodne zastosowania w tej dziedzinie projekt cyfrowy Dla internetowe i mobilne interfejsy. Podejście to można postrzegać jako styl promujący użyteczność i harmonię wizualną. interfejsy 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 w latach czterdziestych i pięćdziesiątych XX wieku przeżył dramatyczne odrodzenie w projektowaniu graficznym w Szwajcarii. 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 strony internetowej Design Is History: krótki opis kluczowe cechy tego stylu przedstawia się następująco: „...styl nastawiony na prostotę, czytelność i obiektywizm. 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. Główne wpływowe dzieła zostały zaprojektowane w formie plakatów, które były najbardziej uważane Skuteczne środki dostarczanie informacji."

Z plakatów przedstawionych jako przykłady wynika, że zwolennicy tego stylu lubili proste formy, odważne i surowe czcionki wysoki stopień czytelność, geometryczne zestawienia detali, płaskie ilustracje i przejrzystość hierarchia wizualna. Szwajcarskie wzornictwo szybko stało się coraz bardziej popularne w różne kraje i otrzymał nowe życie w sztuce początku XXI wieku.

Chociaż ten styl otrzymał wiele wyrażeń w tej dziedzinie projekt wizualny do druku: plakatów, znaczków, kartek, okładek książek, czasopism itp., w epoce projektowania cyfrowego znacznie poszerzył swoje horyzonty, szczególnie w zakresie 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 rozszerzył się na produkty z 2010 roku, szczególnie w fazie rozwoju. interfejsy mobilne Dla telefon Windows 7. Podstawowe cechy płaskiego projektu, takie jak intuicyjne proste kształty, odważna, wyraźna typografia, jasne kontrastujące kolory, długie cienie oraz brak skomplikowanych szczegółów i tekstur, dobrze się przyjęły. 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 też powiedzieć, że niektórzy kluczowe zasady Płaska konstrukcja znalazła swój wyraz w Wygląd materiału z Google'a.

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ą.

Nawet na etap początkowy Planując ogólny układ, logikę i przejścia, można zastosować zasady projektowania płaskiego. Narzędzia i oprogramowanie cyfrowe narzędzia projektowe wykorzystywane na tym kluczowym etapie pozwalają projektantom prezentować klientom i zespołom spójny układ wszystkich ekranów aplikacji lub stron internetowych, a nawet to podstawowy schemat ma już kluczowe funkcje wizualizacyjne typowe dla płaskiej konstrukcji. 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.

Takie ilustracje zapewniają dodatkowe wsparcie produkty cyfrowe i są zazwyczaj bardziej złożone pod względem szczegółowości i zaspokajania potrzeb estetycznych 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.

Napisał:

Ekspert w zakresie projektowania, rozwoju i analityki internetowej

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 zmieniło się od momentu jego powstania duża liczba raz. Zdał długa droga od prostych i nudnych elementów po trójwymiarowe, wypukłe i niemal materialne. 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. On jest bardzo przez długi czas był głównym trendem w projektowaniu. Skeuomorfizm to styl pseudo-wolumetryczny, którego wszystkie elementy naśladują wygląd prawdziwe przedmioty ( Zeszyt, budzik), używając cieni, naturalnych tekstur i nie tylko. Jego żywe przykłady można było znaleźć 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ły wyraźny przykład różnice w stylach, poniższe zdjęcie może służyć jako wskazówka. 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 kolory, cienie, tekstury wolumetryczne. 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 są one przedstawiane w formie prostej figury geometryczne, okrąg lub kwadrat, z charakterystycznym konwencjonalnym obrazem.

Przy opracowywaniu płaskiego projektu zwraca się uwagę schemat kolorów. 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 internetowych i portale społecznościowe. Nie tak dawno Giganci Google’a i YouTube również zmieniły swój projekt na płaski. System operacyjny Windows, począwszy od ósemki, całkowicie porzucił wszelkie oznaki głośności na ikonach, co cieszyło oczy niektórych użytkowników poprzednie wersje i zaczął stosować się do płaskiego projektu. Deweloperzy poszli w ich ślady aplikacje mobilne dla 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ł. I oni zrobili to jako pierwsi Firma Apple w projekcie 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ść 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, możesz je znaleźć w Internecie wielka ilość Bezpłatny płaska konstrukcja Elementy interfejsu użytkownika (do pobrania bezpłatnie), takie 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żniejsze jest szybkie ładowanie strony internetowe. 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łówne zadanie przy opracowywaniu płaskiej konstrukcji należy to wytrzymać idealna równowaga pomiędzy pięknem a łatwością obsługi.

W tym artykule opowiem Ci o płaskiej konstrukcji. Pewnie już coś o tym słyszeliście, gdyż mieszkanie stało się w ciągu ostatnich kilku lat jednym z wiodących trendów w sieci.

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

możesz znaleźć dobre przykłady projekt płaski na stronie internetowej http://market.envato.com/. Istnieje mnóstwo układów, ikon i szablonów, które pozwolą Ci jasno zrozumieć, jak wygląda nowoczesny design .

1. Co to jest płaska konstrukcja?

Płaska konstrukcja - nowoczesny styl interfejs użytkownika, a także oprawa graficzna charakteryzująca się minimalizmem. Płaska konstrukcja charakteryzuje się użyciem minimalnej liczby elementów i ich brakiem różne efekty tekstury, cienie i światła, na przykład: mieszane kolory, gradienty, światła i tak dalej.

Mieszkanie jest przeciwieństwem skeuomorfizmu( Skeuomorfizm to zasada projektowania polegająca na tym, że jednemu produktowi nadaje się wygląd drugiego, tj. gdy różne elementy interfejsu są kopiowane z rzeczywistych obiektów – ok. tłumaczenie.) , a także bogate wzornictwo.Warto jednak powiedzieć, że płaska konstrukcja wcale nie jest tak prosta, jak się wydaje na pierwszy rzut oka. Zawiera pewne cechy skeuomorfizmu, ale o tym porozmawiamy nieco później.

Ogólnie rzecz biorąc, płaski pomaga użytkownikowi skupić się na treści, bez rozpraszania się efektami wizualnymi. Płaska konstrukcja podkreśla prostotę elementów, jednocześnie czyniąc interfejs bardziej responsywnym, przyjemnym i łatwym w obsłudze.

2. Trochę historii

Płaski design, jak wiadomo, istniał na długo zanim stał się światowym trendem w sieci. Płaska konstrukcja była dość popularna w latach 80. ze względu na fakt, że ówczesna technologia nie była jeszcze na tyle rozwinięta, aby obsługiwać złożone efekty, tekstury i cienie. Jednak już wtedy projekt dążył do skeufomorfizmu, starając się, aby elementy interfejsu były jak najbardziej realistyczne.

Płaska konstrukcja w takiej formie, w jakiej ją obecnie widzimy, zaczęła zyskiwać na popularności po tym, jak Microsoft zaczął produkować produkty w tzw. stylu metra. Metro to projekt interfejsu użytkownika firmy Microsoft, który uderza swoim stylem i prostotą.

W 2010 Firma Microsoft wypuściła system Windows Phone 7, w którym zastosowano płaską konstrukcję z ostrymi krawędziami i prostą grafiką odziedziczoną z jednego z wcześniejszych produktów. Microsoftu (Zune). Później, zainspirowany sukcesem, Microsoft wypuścił system operacyjny System Windows 8, oparty na tym samym płaskim stylu Metro.

W końcu płaska konstrukcja osiągnęła swój szczyt w 2013 roku, kiedy Apple wypuściło na rynek iOS 7 demonstruje zasadniczo nowy design z całkowicie przeprojektowanymi elementami interfejsu użytkownika, w tym ikonami i czcionkami. Firma Apple Utworzony zasady wizualne projektowania interfejsu użytkownika i ikon .

Wkrótce potem Google zaczął używać stylu płaskiego w swoich aplikacjach i stronach internetowych, nazywając go Wygląd materiału. Google ma nawet całą sekcję poświęconą temu stylowi, zawierającą opis celów projektowania stron internetowych, jego zasad i instrukcje dotyczące 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.

Istnieją zatem trzy światowe przykłady płaskiego projektowania od firm, bez których trudno sobie wyobrazić nowoczesny świat technologie:

Projekt Metro firmy Microsoft

Projekt Apple iOS 7

Material Design Google

3. Pamiętaj o czystości

Płaski projekt podobno nazywany jest „płaskim” ze względu na brak elementów trójwymiarowych i realistycznych efektów, takich jak gradienty, tekstury, rozjaśnienia, półtony, cienie. Pamiętaj, że styl płaski to dwuwymiarowy (płaski) sposób przedstawiania obiektów.

Co więcej, w płaskiej konstrukcji obiekty są przedstawiane w bardzo uproszczony i stylizowany sposób.

A czasami wykorzystuje się nawet samą sylwetkę lub kontury obiektu, tj. na tyle, aby obiekt był rozpoznawalny, ale nie przeciążał go drobnymi szczegółami.

Minimalizm stał się obecnie światowym trendem: prostota kształtów i zastosowanie ostrych krawędzi tworzą czysty i przyjemny design. Proste formy bardziej zrozumiałe i łatwiejsze do zrozumienia. Dzięki temu projekt pozostaje minimalistyczny i czysty, nie nadając mu zatłoczonego, zagraconego wyglądu.

4. Doprowadź to do perfekcji

Wiedz, że jeśli chodzi o tworzenie płaskich ikon i elementów interfejsu użytkownika, musisz sprawić, aby wyglądały wyraźnie, schludnie i perfekcyjnie co do pikseli, tj. tak dużo jak to możliwe. Co więcej, dotyczy to zarówno grafiki rastrowej, jak i wektorowej.

Z programem Adobe Photoshopie tutaj wszystko jest jasne: działa z grafika rastrowa, który jest oparty na pikselach.

Odnośnie programu Adobe Illustratorze, wówczas wykorzystuje grafikę wektorową, składającą się z krzywych i linii zwanych wektorami, które są określone za pomocą wzorów matematycznych.

Dawno, dawno temu Adobe Illustrator nie był zbyt popularny wygodny program aby stworzyć grafikę idealną w pikselach. Dobra wiadomość jest taka najnowsze wersje Stal ilustracyjna świetne narzędzie stworzyć dobrą grafikę.

Muszę to powiedzieć Grafika wektorowa zasadniczo polega na pracy z prostymi, płaskimi kształtami, czystymi kolorami i siatkami.Adobe Illustrator jest bardzo elastyczny w ustawieniach i pozwala dostosować siatkę do swoich potrzeb, wyrównywać obiekty i używać Różne rodzaje przyciąganie. Ułatwia to stworzenie idealnego projektu, który będzie wyglądał czysto i stylowo na każdym wyświetlaczu. Jeżeli chcesz dowiedzieć się jak stworzyć idealną grafikę to koniecznie przeczytaj artykuł: Jak stworzyć grafikę idealną w pikselach za pomocą programu Adobe Illustrator .

5. Kolor

Jeden z najbardziej specyficzne cechy płaska konstrukcja, oprócz cieni, polega na użyciu koloru. Większość kolorów, jakie wykorzystuje w swoich elementach płaska konstrukcja, składa się z zaledwie kilku podstawowych kolorów.

Kolor w płaskiej konstrukcji jest jasny, bogaty i bogaty.Płaska kolorystyka nie ogranicza się do kilku specjalnych kolorów, zawiera wiele odcieni, a ich wybór zależy wyłącznie od tego, co przedstawiasz, czy są to ikony słodyczy, czy przedmioty w stylu retro w wyrafinowanej palecie retro.

Załóżmy, że jesteś projektantem interfejsu użytkownika i dobrze znasz palety kolorów, eksperymentujesz z panelem kolorów w Programy Photoshopa i Illusstartor, mieszając kolory według własnego uznania. Proces ten jest jednak dość złożony i wymaga dobrej intuicji, doświadczenia i umiejętności. Tutaj znajdziesz narzędzia, które pomogą Ci stworzyć własną paletę kolorów.

Niektóre z nich nadają się do wszystkich rodzajów projektów i ilustracji, a nie tylko do płaskich projektów. Na przykład Adobe Color CC, lepiej znany jako Cooler. Dziś jest do niej dostęp zarówno poprzez stronę internetową, jak i bezpośrednio poprzez produkty Adobe. Cooler to bardzo elastyczne narzędzie, które pozwala stworzyć własną paletę kolorów lub wybrać niestandardową paletę z biblioteki.

Kolejnym prostym i wygodnym generatorem palet kolorów jest Coolors. Wystarczy nacisnąć spację, a program wygeneruje paletę kolorów, można dostosować kolory, 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 firmy Designmodo - usługa z zestawem „płaskich” kolorów, bardzo wygodna w pracy. Ta strona stała się bardzo popularna wśród projektantów poszukujących dobrych rozwiązań kolorystycznych dla idealnego projektu. Spróbuj!

Możesz także znaleźć większą różnorodność kolorów i palet Przewodnik Google po projektowaniu materiałów.

6. Długie cienie

Jak wspomniano powyżej, płaska konstrukcja charakteryzuje się prostotą i dużą ilością wolnej przestrzeni - dlatego płaska konstrukcja odrzuca stosowanie jakichkolwiek efektów. Jest jednak jeden efekt typowy dla płaskiej konstrukcji. Efekt ten stał się trendem i cecha charakterystyczna mieszkanie.

Mówimy teraz o długich cieniach. Mają pewne typowe cechy, które czynią ten efekt rozpoznawalnym, a mianowicie: nachylenie o 45 stopni i duży rozmiar(cień może być kilkukrotnie dłuższy od samego obiektu. Dzięki temu długie cienie nadają mieszkaniu pewien efekt głębi.

Efekt ten sprawia, że obiekt staje się bardziej trójwymiarowy, jednocześnie utrzymując go w kontekście płaskiej konstrukcji.

7. Praca z czcionkami

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

Płaskie projekty zazwyczaj wykorzystują proste style czcionek, dzięki czemu cały projekt jest ogólnie przejrzysty i czytelny. Można znaleźć wiele darmowe czcionki w Adobe Typekit, jeśli korzystasz z produktów Adobe. W Font Squirrel znajdziesz także wiele dobrych darmowych czcionek. Ale nie zapomnij przeczytać licencji, jeśli zamierzasz używać czcionki do celów komercyjnych.

Najczęściej w płaskiej konstrukcji zwyczajowo stosuje się wielkie litery i kontrastujące kolory, dzięki czemu tekst jest bardziej czytelny.

Używaj czcionek oszczędnie, pamiętając, że powinny one uzupełniać i uzupełniać projekt, a nie pojawiać się jako osobny element. Nie oznacza to, że nie można używać skomplikowanych czcionek szeryfowych lub pisanych odręcznie. Pamiętaj tylko, aby zachować minimalizm i zachować wszystko w równowadze. Jednak w języku płaskim nadal często używa się czcionek bezszeryfowych, ponieważ wyglądają one bardziej rygorystycznie i schludnie.

8. Plusy i minusy płaskiej konstrukcji

Mimo że płaski design stał się tak popularny ze względu na wiele zalet, nadal istnieją pewne wady, z którymi spotykają się projektanci stosujący ten styl. Spójrzmy na zalety i wady.

plusy

Popularność

Płaski design stał się trendem, zdobywając coraz więcej pozytywnych recenzji wśród projektantów i projektantów stron internetowych i wcale nie wydaje się tracić swojej pozycji. Wręcz przeciwnie, rozprzestrzenia się coraz bardziej, zyskuje nowe formy i cechy, staje się coraz bardziej twórczy.

Prostota

Płaska konstrukcja jest prosta, minimalistyczna i czysta. Flat on the web pomaga użytkownikom skupić się na treści, zamiast rozpraszać się efektami wizualnymi. Działa to również w przypadku interfejsów aplikacji mobilnych: przejrzysty projekt duże guziki Wykorzystuje urządzenia mobilne doskonały.

Jasność

Kolor to kolejna fajna zaleta płaskiej konstrukcji. Jasne i bogate kolory wyglądają atrakcyjnie i czysto, a brak gradientów sprawia, że projekt jest stylowy. Co więcej, takie czyste kolory sprawiają, że jest bardziej pozytywny i reprezentacyjny, a płaska konstrukcja tworzy odpowiedni nastrój.

Wady

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

Brak reakcji

Czasem nieobecność ważne szczegóły Lub efekty wizualne utrudnia proces tworzenia przyjaznego interfejsu i ogólnie sprawia, że cały projekt nie reaguje. Nie wszyscy użytkownicy czują się komfortowo z mieszkaniem, ponieważ znalezienie na stronie internetowej elementów, które trzeba kliknąć lub dotknąć na ekranie, może być trudne telefon komórkowy ponieważ nie są interaktywne.

Problemy z typografią

Jak wspomniano wcześniej, nie każda czcionka nadaje się do płaskiego projektu. Czasami tak bogata czcionka z ostrymi krawędziami wygląda naprawdę wyważona i stylowa. Jeśli jednak czcionka zostanie wybrana nieprawidłowo, może to zrujnować cały projekt. Trzeba naprawdę dobrze wyczuć, które czcionki nadają się do płaskich, a które nie.Brak doświadczenia sprawia, że wybór czcionki jest bardzo trudny.

Słabe efekty wizualne

Ze względu na ograniczenia w zastosowaniu efektów, kolorów i czcionek, płaskie projekty mogą wydawać się zbyt proste i zimne. Minimalizm może być również jego główną wadą – inne płaskie projekty wyglądają dokładnie tak samo jak Twoje. Dlatego bardzo trudno jest sprawić, by Twoje ikony lub strony internetowe wyglądały inaczej niż projekty kogoś innego, ponieważ używasz tych samych uproszczonych kształtów, palety kolorów i podobne czcionki. W rezultacie płaska konstrukcja może z czasem stać się nudna.

9. Przyszłe trendy w projektowaniu mieszkań

Nie można powiedzieć, że płaska konstrukcja w pełni się ukształtowała i zatrzymała, być może wynika to z jej wspomnianych wcześniej wad, płaska konstrukcja dąży do rozwoju i zmian, nabywania nowych cech i zwiększania wyrazistości wizualnej.

Jeśli się przyjrzysz ostatni przykład płaska konstrukcja, można to zauważyć naprawdęstopniowo odchodzi od swoich sztywnych narzędzi i zaczyna dodawać subtelne efekty, takie jak: gradienty, cienie, oświetlenie i inne efekty wizualne.

Te drobne akcenty nadają płaskiemu projektowi głębię, nie będąc jednocześnie zbyt szczegółowymi jak projekty skeuomorficzne.Te subtelne ulepszenia sprawiają, że mieszkanie jest bardziej responsywne i wygodne, a także nadają świeży 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ę czuje się coraz lepiej.

wnioski

Tym samym omówiliśmy kilka faktów z historii płaskiego designu, porozmawialiśmy o kolorach, kształtach i typografii. Przyjrzeliśmy się różnym punktom widzenia, skupiliśmy się na zaletach i wadach mieszkania i poznaliśmy kilka głównych zasad tworzenia dobrego projektu.

Mam nadzieję, że nauczyłeś się sam Nowa informacja z tego artykułu lub przynajmniej uznał go za interesujący. Powinieneś spróbować stworzyć płaski projekt, jeśli nie robiłeś tego wcześniej.

W końcu co jeszcze można wspomnieć o płaskiej konstrukcji?

Jeśli naprawdę lubisz mieszkanie z ostrymi krawędziami, bogatą kolorystyką i wyraźnymi czcionkami, czystością i minimalizmem, to sięgnij po to!

To modne, ale jak w przypadku każdego stylu graficznego, nie ograniczaj się do jednej techniki. To, że mieszkanie jest modne, nie oznacza, że nie możesz zastosować w swoim projekcie innych stylów. Skeuomorfizm z jego drobnymi szczegółami i teksturami może również stać się dobra decyzja. Najważniejsze jest, aby pamiętać, że projekt jest inny dla każdego projektu, musi wyrażać jego ducha, cel, istotę, a jednocześnie pozostać wygodnym i funkcjonalnym. Do przodu!

Płaska konstrukcja to dziś jeden 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 godnym uwagi byłby: decydujący krok Microsoftu w tym kierunku, z systemem Windows 8 i nowym Projekt Google'a, z wyraźnym przejawem chęci zagłębienia się w minimalizm.

Oto przykłady elementów definiujących .

Życie po Web 2.0

W postaci zaokrąglonych kształtów elementów z najróżniejszymi efektami - 3D, cienie, rozjaśnienia i odbicia, gradienty, tłoczenia. Jednym słowem wszystko co tworzy głębię i objętość. Duże, jasne elementy sterujące, połysk, tekstury i inne podobne wyrażenia ustępują miejsca prostym, dwuwymiarowym reprezentacjom obiektów wizualnych.

Projekt pływaka

Typografia w sercu stylu

Należy pamiętać, że jest to podstawa do zbudowania „płaskiej” witryny. Prostota elementów Flat design, a także same zasady minimalizmu podkreślają znaczenie typografii. Treść tekstowa w zasadzie możliwa jest wymiana niektórych ciężkich grafik lub obrazów. Dziś na wielu stronach internetowych typografia stała się projektem. Naturalnie, ponieważ płaski design jest często minimalistyczny, charakter czcionek musi być z nim zgodny ogólny schemat, styl i kompozycja. Na przykład wielkie litery są często używane w przypadku elementów lub nagłówków.

Koderwall

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

Płaska paleta kolorów

Płaska konstrukcja zmierza również w stronę większej różnorodności kolorów. Projektanci stron internetowych coraz częściej korzystają z palet kolorów, aby wdrożyć być może najbardziej podstawową zasadę projektowania: witryna internetowa powinna różnić się od innych.

Minimalna małpa

Wolna przestrzeń, duże elementy

Od początku do końca ma minimalistyczną podstawę, czyli przyjmuje swoje podstawowe zasady: duże bloki treści, duże elementy, wolna przestrzeń, brak niepotrzebnego zamieszania i pretensjonalności.

Projekt brody

Płaska konstrukcja ikon, przycisków, ilustracji

Przyciski, ikony, plakietki i ilustracje również nabierają wyglądu 2D. Muszą odpowiadać określonemu stylowi na wszystkich stronach witryny, oddawać nastrój samej witryny i być łatwe do zrozumienia dla każdego użytkownika.

Wybór kolorów ikon, podobnie jak samych ikon, nie jest łatwym zadaniem. Możesz użyć czystych kolorów. Próbując udekorować projekt, musisz pomyśleć o tym, jak sprawić, by strona była łatwa w użyciu. Z jednej strony ważne jest, aby nie naruszać stylu, ale z drugiej strony konieczne jest, aby ikony były zauważalne. W ilustracjach dążymy do minimalizmu, unikając popularnych wcześniej efektów 3D.

Przeczytaj także: Ponad 20 inspirujących stron internetowych z płaskimi ilustracjami w projektowaniu