Płaska konstrukcja (płaska konstrukcja) to popularny styl w projektowaniu serwisów WWW i interfejsów, a także systemów operacyjnych, który charakteryzuje prostota, wyrafinowanie i minimalizm. Płaskie projekty zaczęły zdobywać popularność w 2010 roku jako przeciwieństwo skeuomorfizmu.
Skeuomorfizm - fizyczny ornament lub element projektu skopiowany z kształtu innego przedmiotu, ale wykonany z innych materiałów lub innymi metodami. Przykłady obejmują ceramikę ozdobioną imitacjami nitów, aby przypominały podobne naczynia wykonane z metalu lub kalendarz komputerowy, który imituje wygląd oprawianie stron kalendarza biurkowego (definicja z Wikipedia).
Popularyzację płaskiego stylu w projektowaniu ułatwiło wydanie od Microsoft systemu operacyjnego Windows 8 w stylu Metro, a także iOS 7, w którym jabłko wybiera również styl płaski. Dopiero potem zaczyna się prawdziwa era płaskiego projektowania. Wkrótce duży usługi wyszukiwania i aplikacje - Google, Youtube, jest wiele serwisów, które w swoich projektach wykorzystują zasady stylu płaskiego. W ostatnie lata flat design to lider światowych trendów w projektowaniu stron internetowych.
Korzyści z płaskiej konstrukcji
- Praktyczność - zastosowanie flat designu pozwala zminimalizować ilość stylów, skryptów i animacji, co pozwala na szybsze ładowanie strony.
- Łatwy do dostosowania - płaska konstrukcja jest dość łatwa do dostosowania do różnych rozdzielczości ekranu.
- Wygoda użytkowania - dzięki uproszczonemu stylowi użytkownicy łatwiej dostrzegają informacje w serwisie.
- piękno - zewnętrzna bezstronność i proste projekty pozwalają skupić się na projektach, które naprawdę się cieszą.
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 swoją czystość i wyrafinowanie rozwiązania projektowe mogą być stylowe i piękne, bez zbędnego hałasu, co pozwala skoncentrować się na produkcie lub usłudze.
1 - Korzystanie z obiektów 2D
W płaska konstrukcja wykluczone jest użycie elementów, które dodają głębi i objętości do obiektu: cienie, gradienty, światła, tekstury, refleksy, animacje. Podczas przedstawiania obiektu wyświetlane są tylko jego kontury.
2 - Ikony i proste obiekty
Zastosowanie płaskich ikon i jednosylabowych kształtów z wyraźnymi konturami i jednym kolorem pomaga maksymalnie uprościć projekt i uczynić go lżejszym. Sterowanie staje się intuicyjne dla użytkownika i stymuluje interakcję.
3 - Proste czcionki do projektowania stylu
Dużo uwagi poświęca się typografii i czcionkom w płaskiej konstrukcji. Nie zastosowano tu kursywy, czcionka harmonijnie wpisuje się w projekt strony, nie tylko w treści, ale także w nawigacji. Nawet w typach czcionek witryny zaleca się minimalistyczny styl.
4 - Gra kolorów
Płaska konstrukcja zawiera kilka podstawowych kolorów, które wykluczają stosowanie płynnych przejść i gradientów, ale mogą być jasne i kontrastowe w stosunku do siebie.
5 - Minimalizm
Płaska konstrukcja polega na zastosowaniu wizualizacji elementów, wykorzystując całą szerokość ekranu i jednocześnie minimalizując informacje.
Istnieje coś takiego jak prawie płaska konstrukcja. Jest to jedna z koncepcji płaskiego designu wykorzystująca proste elementy i dwuwymiarową przestrzeń. Przykładem może być zdjęcie wysokiej jakości, które jest rozmyte w tle lub przyciemnione. Pozwala to na stworzenie głębi i perspektywy na temat.
Przykłady płaskiej konstrukcji
W Internecie, w tym w segmencie białoruskim, można znaleźć wiele przykładów realizacji stron o płaskim designie o różnej tematyce, w tym zasoby informacyjne, portale, a nawet sklepy internetowe.
W ostatnim czasie popularny stał się taki kierunek projektowania jak FLAT - design czy flat design.
Użytkownicy systemu Windows 8 i nowszych znają już projekt FLAT, ponieważ pierwszą rzeczą, jaką napotykają podczas uruchamiania systemu, jest ten ekran.
Sam wygląd FLAT - design wynika z rozłożenia aplikacje mobilne... Myślę, że wynika to z faktu, że obiekty projektu FLAT są tworzone za pomocą obiektów wektorowych, dzięki czemu łatwiej je dostosować do różnych platform gadżetowych.
MIESZKANIE - projekt posiada następujące cechy:
Całkowite lub częściowe odrzucenie gradientów, złożonych tekstur i cieni z czego jestem osobiście bardzo zadowolony. Nie narzekam na cienie i lubię z nich korzystać, ale pozwolę sobie odwieść odwieczne problemy z wyświetlaniem gradientu.
Na pierwszy plan wysuwa się typografia, geometria. Zwłaszcza jeśli chodzi o projektowanie stron internetowych.
Harmonia i. Projekt wykorzystuje ograniczoną liczbę kolorów. Oto przykład popularnej palety wzorów FLAT.
Wykorzystanie kreatywnych ikon informacyjnych.
Jak już powiedziałem, projekt FLAT stał się bardzo popularny w aplikacjach mobilnych, ponieważ jego główną cechą jest łatwość układu i możliwość dostosowania. Projekt FLAT jest również szeroko stosowany w infografikach, ponieważ opiera się na harmonijnym postrzeganiu informacji poprzez zastosowanie konstruktywnych technik typografii i kolorystyki.
Kiedyś najpopularniejszym kierunkiem w projektowaniu stron internetowych był Web 2.0. Teraz jego miejsce zajął projekt FLAT. Moda ma tendencję do powrotu do zapomnianego starego, aby zrobić z niego nowe. Kto wie, kiedy projekt FLAT wyjdzie z mody, ale na razie ciesz się prostotą, harmonią i informacyjną treścią obecnego trendu. Nawiasem mówiąc, płaska konstrukcja była popularna już w latach 80., ale wtedy wynikało to z cech technicznych, niemożności wyświetlania cieni i gradientów. A teraz większość wiodących firm IT przeszła na Flat Design.
No cóż, dostosujemy się do zmieniającego się świata. W następnym artykule pokażę, jak tworzyć ikony stylu FLAT przy użyciu prostych kształtów w programie Photoshop.
Jeśli są Państwo zainteresowani moimi publikacjami, to proponuję być na bieżąco najnowsze aktualizacje na stronie serwisu.
(Odwiedzono 2333 razy, 1 wizyt dzisiaj)
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żytkownikaa 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, wydał Microsoft 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 grafiką bitmapową opartą 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, że \u200b\u200bsą już najnowsze wersje programu Illustrator świetne narzędzie stworzyć dobrą grafikę.
Muszę to powiedzieć grafika wektorowa polega głównie na pracy z prostymi, płaskimi kształtami, jednolitymi kolorami i siatkami. Adobe Illustrator jest bardzo elastyczny w ustawieniach i umożliwia dostosowanie siatki do własnych potrzeb, wyrównanie obiektów i użycie 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.
profesjonaliści
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 aplikacji mobilnych: czysty projekt 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!
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.
Dobre przykłady płaskiej konstrukcji można znaleźć 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?
Flat design to nowoczesny styl interfejsu użytkownika i projektu graficznego, 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 i tak dalej.
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 wypuścił Windows Phone 7, w którym zastosowano płaską konstrukcję z ostrymi krawędziami i prostą grafiką odziedziczoną po wczesnym produkcie.Microsoft (Zune). Później, zainspirowany swoim sukcesem, Microsoft wydał plik operacyjny system Windows 8 w oparciu o ten sam płaski styl Metro.
W końcu płaski projekt osiągnął szczyt w 2013 roku, kiedy Apple wypuściło iOS 7, oferujący zupełnie nowy wygląd 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 grafiką bitmapową opartą na pikselach.
Jeśli chodzi o program Adobe Illustrator, wykorzystuje on grafikę wektorową, składającą się z krzywych i linii, zwanych wektorami, które są podane za pomocą wzorów matematycznych.
Dawno temu Adobe Illustrator nie był szczególnie wygodnym programem do tworzenia grafiki o doskonałej jakości. Dobra wiadomość jest taka, że \u200b\u200bnajnowsze wersje programu Illustrator stały się doskonałym narzędziem do tworzenia dobrej grafiki.
Muszę powiedzieć, że grafika wektorowa polega głównie na pracy z prostymi, płaskimi kształtami, jednolitymi kolorami i siatkami. Adobe Illustrator jest bardzo elastyczny w ustawieniach i pozwala dostosować siatkę do swoich potrzeb, wyrównywać obiekty i używać różnych typów przyciągania. 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.
Załóżmy, że jesteś projektantem interfejsu i dobrze orientujesz się w paletach kolorów i eksperymentujesz z paskiem kolorów w programach 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.
profesjonaliści
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 aplikacji mobilnych: przejrzysty projekt z dużymi przyciskami sprawia, że \u200b\u200bkorzystanie z telefonu jest doskonałe.
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 mieszkań czują się komfortowo, ponieważ znalezienie elementów na stronie internetowej, które trzeba kliknąć lub dotknąć na ekranie telefonu komórkowego, może być trudne, ponieważ nie są one 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, może być również dobrym rozwiązaniem. 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!
Płaska konstrukcja jest kluczowym kierunkiem w projektowaniu w nadchodzących latach, dlatego oferujemy jej bliższe poznanie i poznanie 5 podstawowych zasad, które stanowiły jego podstawę.
Przedstawiamy Flat Design
W języku rosyjskim płaska konstrukcja tłumaczy się jako „płaska” i stała się absolutnym faworytem po prezentacji Apple iOS. Minimalistyczne podejście do projektowania pod kątem użyteczności jest na pierwszym planie. Zakład polega na wygodzie użytkownika. Jest to wyraźny protest przeciwko „piszczałce” (wizualizacja obiektów, jak w rzeczywistości). Wybór padł na bardziej uproszczone i jednocześnie proste rozwiązania w planie estetycznym. Użytkownicy, zmęczeni realistycznymi wizualizacjami, entuzjastycznie przywitali się w tym kierunku, a coraz więcej projektów internetowych przechodzi na ten format.
Chcę zauważyć, że „mieszkanie” nie oznacza „nudy”. Rozwiązania płaska konstrukcja mogą być piękne, są bardziej wyrafinowane, czyste, wolne od zbędnych elementów, przekształcając się w „wyspę spokoju”. W końcu sprawiają, że treść jest zrozumiała. Pozostaje nauczyć się podstawowych zasad, aby wprowadzić je w życie.
Zasada nr 1: Precz z niepotrzebnymi efektami„Płaska” konstrukcja nie ma na celu przeniesienia objętości, dlatego podstawą jest dwuwymiarowa wizualizacja. Oznacza to, że nie zobaczysz cieni, refleksów ani odblasków z teksturami (wyjątkiem są długie cienie). Tylko transfer obwodów i nic więcej.
Zalecane jest stosowanie w projektowaniu postaci monosyllabicznych, a także monitorowanie klarowności konturów, która ma na celu podkreślenie lekkości i nieważkości. Ponadto takie lakoniczne elementy dobrze naśladują czujnik, co powoduje chęć interakcji z przedmiotem (wezwanie do kliknięcia, dotknięcie). Jednak prostota elementów nie jest równa prostocie projektu jako całości - dotyczy to tylko konturów. W rezultacie wszystko, co użytkownik widzi, jest dla niego zrozumiałe i może z niego łatwo korzystać.
Płaska konstrukcja wymaga szczególnej ostrożności podczas pracy z czcionkami. Oznacza to, że ich charakter jest wymagany, aby uzupełnić schemat projektu, nie zaprzeczając mu. Ponadto w płaskiej konstrukcji czcionka jest również kluczowym elementem nawigacyjnym.
Nie tylko czcionka, ale także kolor to niezbędny element „płaskiego” projektu. Zdecydowana większość palet oparta jest na 2-3 kolorach, choć oczywiście są wyjątki. Zwykle soczyste i jasne, ale wybierane są czyste kolory. Jak wspomniano, nie ma gradientów i niepotrzebnych przejść.
Płaska konstrukcja jest doskonałym przykładem takiego globalnego trendu, jakim jest minimalizm. Projektanci odrzucają nadmierne „dzwonki i gwizdy”, odchodzą od skomplikowanych i niejawnych podejść do wizualizacji, która przynosi owoce w postaci aktywności użytkownika.
Płaski czy prawie płaski? Szukamy kompromisu!
Podsumowując, chcę zauważyć, że dzisiaj istnieje synergia między projektem płaskim i niepłaskim. To idzie o „prawie płaskim” projekcie. Jest to najczęstsze zastosowanie opisywanej koncepcji, gdy wraz z prostymi i zwięzłymi elementami oraz dwuwymiarową przestrzenią projektanci stosują 1-2 techniki głębokości i perspektywy.
Trendem 2017 był również Semi Flat Design - konstrukcja półpłaska. Pod wpływem Material Design stał się nieco bardziej przestrzenny. Pojawiają się jasne cienie, które sprawiają, że projekt jest częściowo płaski. Płaska konstrukcja jest dziś aktualna, ponieważ cienie stały się głębsze i bardziej złożone, ale podstawowa koncepcja nie została naruszona.
