płaska - Względnie nowy trend, o którym cała społeczność projektowa nie przestaje mówić.
Ktoś go lubi, ktoś absolutnie nie może się do niego przyzwyczaić, a nawet go nienawidzi.
Dobry projekt powinien przede wszystkim rozwiązać problem biznesowy klienta, dzięki czemu będzie to drugorzędny problem. Jeśli projektant wybrał styl lub narzędzie - „płaski projekt” - niech tak będzie! Ale nie zapominaj, że taki styl nie jest odpowiedni dla wszystkich projektów.
Przeanalizujmy więc, o czym należy pamiętać, jeśli zdecydujesz się poddać trendowi mody i pracować w stylu „płaskiego designu”.
Podstawowe zasady płaskiej konstrukcji to:
1. Brak efektów
2. prostymi elementami
3. Nacisk na typografię
4. Nacisk na kolor
5. Minimalistyczne podejście
6. „Prawie” płaska konstrukcja
Teraz spójrzmy bardziej szczegółowo na każdą z zasad płaskiego projektowania:
Brak efektów
W płaskiej konstrukcji najczęściej nie są używane takie efekty, jak cień, fazy, wytłaczanie, gradienty lub inne techniki zwiększające głębię i objętość. Brak efektów 3D i przeniesienie istotności, w przeciwieństwie do stylistycznego przeciwnika Skemorfizmu. Każdy element powinien pozostać czysty, niezależnie od tego, czy będzie to ikona, pasek nawigacji, ramka, przycisk itp.
Płaski styl ma wyraźny wygląd bez dodatkowych funkcji i elementów. Opiera się na wyraźnym poczuciu hierarchii kompozycyjnej i rozmieszczania elementów. Ta struktura pomaga łatwiej dostrzec projekt i jest intuicyjna dla każdego użytkownika.
Proste elementy
Płaska konstrukcja często wykorzystuje proste elementy interfejsu użytkownika, takie jak przyciski i ikony itp. Podczas tworzenia tych elementów interfejsu projektanci stosują proste kształty (prostokąt, okrąg, kwadrat itp.) - pozwala to na niezależność każdej formy.
Ale nie należy mylić prostych elementów z prostym designem, płaska koncepcja projektowania może być tak złożona, jak każda stylistycznie inna koncepcja projektowania.
Nacisk na typografię
Ponieważ płaska konstrukcja oparta jest na elementach o prostej formie, bez objętości, typografia jest niezwykle ważnym elementem w płaskiej kompozycji.
Charakter czcionki musi być spójny z ogólnym układem i kompozycją - zbyt złożona czcionka może wyglądać dziwnie i pretensjonalnie na zbyt uproszczonym projekcie modelu. Lepiej jest użyć prostej czcionki bezszeryfowej, pogrubionej lub pogrubionej. Tekst powinien być zgodny z prostymi formularzami.
Czcionka powinna być pomocniczym narzędziem pomagają użytkownikom interakcję z naszego interfejsu. Etykiety na przyciskach i innych elementach nie powinny być skomplikowane.
Nacisk na kolor
Kolor jest ważną częścią projektu. Paleta płaskich wzorów, często o wiele jaśniejszych i bardziej kolorowych niż w przypadku innych stylów projektowania. W porównaniu do zwykłego projektu, który koncentruje się na 2-3 kolorach, płaski projekt może obejmować 6 lub nawet 8 odcieni.
Od autora: Pozdrawiam was przyjaciele! Dzisiaj porozmawiamy o tym, jakie płaskie witryny lub płaskie witryny. Termin ten podbił serca projektantów stron internetowych od dawna i wciąż zyskuje na popularności. Największe firmy (Google, YouTube, Microsoft, Apple Inc. itp.) Używają go do projektowania swoich witryn i aplikacji. Nadal nie jesteś sektą do projektowania płaskich witryn? Idziemy do ciebie!
Jak myślisz, co jest przyczyną tak szalonej popularności płaskiego designu? Odpowiem krótko: to naprawdę działa! W tym artykule wyjaśnię ci, jaki to styl, opowiem o jego zaletach i wadach, pokażę wspaniałe przykłady płaskiego projektu witryny, który z pewnością zainspiruje Cię do wykorzystania. Więc chodźmy!
Wszystko zaczęło się od skeuomorfizmu
Dla tych, którzy nie są świadomi, skeuomorfizm nie jest obraźliwym słowem, ale innym stylem projektowania stron internetowych. Płaska konstrukcja jest często przedstawiana jako przeciwieństwo skeuomorfizmu, co moim zdaniem nie jest całkowicie poprawne. Jest to raczej jego uproszczenie niż antagonizm.
Do 2010 r. Skeuomorfizm był dominującym stylem w projektowaniu interfejsów. Pokazał elementy tak, jak wyglądały w rzeczywistości, aktywnie wykorzystując tekstury, cienie, odbicia i inne atrybuty trójwymiarowego obrazu. Apple szczególnie starało się w tym względzie, który starannie skopiował większość obiektów oprogramowania z rzeczywistych obiektów.
Wkrótce pseudo-wypukłe ikony przestały przyciągać większość użytkowników i twórców stron internetowych, co zapoczątkowało erę płaskiego projektowania witryn. Świat doszedł do wniosku, że wszystkie elementy dekoracyjne muszą zostać usunięte, a pozostaje tylko to, co jest wygodne dla użytkownika końcowego.
„Najlepszy projekt to jak najmniej projektu”
Jak Dieter Rams - znany projektant przemysłowy, który sprzeciwiał się obsesyjnemu projektowi, efektom animacji itp., Spojrzał w wodę W czerwcu 2013 r. Apple Inc. wprowadził rewolucyjny system iOS 7, który otrzymał wszystkie atrybuty w stylu płaskiego projektowania stron internetowych. Samolot nie od razu jednak „wygrał” realizm i objętość.
Użytkownicy przez długi czas nie mogli zapomnieć o magii Steve'a Jobsa i ikonach „które chcę polizać”. Wielu nawet pożegnało się z „nieszczęsną siódemką” i przestawiło się na „promiennego Androida”. Dodało paliwa do ognia i dużej liczby błędów, które były obecne w iOS 7, a także białawej, półprzezroczystej konstrukcji z paralaksą i animacją w postaci „smarków” podczas otwierania aplikacji.
Ci, którzy pogodzili się z nieuniknioną rzeczywistością i pozostali z systemem „apple”, w końcu zdali sobie sprawę, że płaskie projektowanie stron internetowych nie tylko wygląda interesująco, ale także wprowadza porządek i jeden styl wizualny do wszystkich aplikacji.
Plusy i minusy płaskiej konstrukcji
Zalety korzystania z tego stylu obejmują:
klarowność kompozycji i zwięzłość środków wizualnych. Reagujący interfejs w stylu „nic więcej”, dzięki czemu użytkownicy szybko zrealizować to, co chcieli przekazać im;
nacisk na dobrą typografię. Treść jest najważniejsza, co jest niezwykle ważne w dzisiejszym bogactwie informacji;
mniejsze stron internetowych i szybsze wykonanie strony internetowej ze względu na minimalną liczbę efektów wizualnych. Jest to szczególnie przydatne podczas tworzenia wersji adaptacyjnych, ponieważ im prostsze formularze, tym łatwiej wyświetlać je na małych ekranach urządzeń mobilnych.
Płaska internetowych ma swoje wady:
ograniczenie wyobraźni projektanta przez uproszczone kolory, typografię, ikonografię. Dlatego ryzyko utworzenia nudnej i pozbawionej wyrazu witryny jest wyższe;
brak trójwymiarowości i cieni czasami nie pozwala nam zrozumieć, czy element można kliknąć, czy nie;
brak szczegółowych ustalonych zasad.
Jeśli zdecydowałeś się użyć tego stylu na swojej stronie, gratulacje - oznacza to, że zależy Ci na wygodzie użytkowników i jest na bieżąco. Jeśli dopiero zaczynasz karierę jako projektant stron internetowych i nie wiesz, jak korzystać z płaskiego projektu, aby Twoja witryna wyglądała trafnie, ale nie prymitywnie, skorzystaj z następujących wskazówek:
Zapomnij o „ceglanych ścianach” i żywych środowiskach. W płaskiej projektowanie stron internetowych, to jest w zwyczaju używać prostych, gładkich, przyciemniony obraz jako tło.
Bez gradientów, ikon wolumetrycznych, animowanych przejść i innych efektów specjalnych. Wszystko to sprawi, że Twoja strona będzie bardziej obciążona i sprawi, że zamieszanie - potrzebujesz jej?
Używaj płaskich ikon z wyraźnymi konturami, które zwiększają wygodę i funkcjonalność.
Użyj jasnej, żywej palety kolorów. Teraz trendem są tony widma słonecznego: jasnożółty, różowy i zielony. Najważniejsze, aby nie przesadzić - na stronie nie powinny być więcej niż 3 kolory.
Skupić się na typografii. W płaskiej konstrukcji preferowane są jasne, oryginalne napisy, które stanowią wezwanie do działania i zapewniają wygodną nawigację na stronie. Ważne jest również, aby nie przesadzić. Zapomnij o „odręcznych” i innych artystycznych czcionkach. Do wyróżnienia nagłówków można używać wielkich liter.
Używaj różnorodnych kształtów geometrycznych. Kwadraty, kółka, linie i inne kształty pomogą nie tylko poprawić strukturę strony, ale także stworzyć przejrzystą hierarchię, a także podzielić zawartość. Użytkownicy docenią to, uwierzcie mi.
Uprość menu nawigacyjne i inne elementy witryny w jak największym stopniu. Jako przyciski używaj zwykłych prostokątów bez cieni i podświetlania.
Tak więc z biegiem lat witryny o płaskiej konstrukcji stały się standardem akceptowanym przez absolutnie wszystkich. Spójrz na większość nowoczesnych witryn - są one płaskie do szpiku kości.
Na koniec dam obiecane przykłady udanego płaskiego projektu, który może służyć jako inspiracja do tworzenia własnych arcydzieł.
1. Strona internetowa http://dunked.com.
Popularna platforma do publikowania portfolio skoncentrowana na przedstawicielach różnych zawodów kreatywnych. Minimalistyczne płaskie projektowanie stron wywołuje poczucie niezawodnej i zrozumiałej obsługi, która nie rozprasza uwagi niepotrzebnymi efektami specjalnymi.
2. Interfejs Microsoft.
Microsoft jest jedną z firm, które stały się tak popularne w płaskich stylach. Może pamiętasz odtwarzacz Zune - konkurenta iPoda wydanego przez Microsoft w połowie 2000 roku? Tak więc konstrukcja tego produktu bardzo różniła się od większości ówczesnych zastosowań, głównie ze względu na dużą typografię, płaskie ikony, duże i jasne formy.
Ten interfejs, który nazywał się Metro, został później migrowany na komputery osobiste (Windows 8), interfejs Xbox 360 i inne produkty Mircosoft.
3. Strona internetowa http://www.vox.com.
Zainspirowany? Precz z pseudo-realistyczną estetyką 3D!
To wszystko. Subskrybuj, udostępniaj nasze artykuły znajomym w sieciach społecznościowych. Twoje wysokie konwersje!
W tym artykule opowiem o płaskiej konstrukcji. Prawdopodobnie już słyszał coś o tym, jak płaski stał się jednym z wiodących trendów w internecie w ciągu ostatnich kilku lat.
Dziś zrozumiemy, co to jest płaska konstrukcja, jak powstało to, czego potrzebujesz, aby stworzyć czysty, jasny i responsywny projekt.
Dobre przykłady płaskiej konstrukcji można znaleźć na stronie http://market.envato.com/. Istnieje wiele układów, ikony i szablony, które dadzą Ci zrozumienie tego, co nowoczesne wzornictwo jak wygląda. .
1. Co to jest płaska konstrukcja?
Płaska konstrukcja - nowoczesny styl interfejsu użytkownika, a także szata graficzna, charakteryzująca się minimalizmem. Płaska charakteryzuje się zastosowaniem minimalnej elementów i brakiem różnych efektów tekstury, światła i cienia, na przykład: do mieszania barw, gradienty światła i tak dalej.
Mieszkanie przeciwstawia się skeuomorfizmowi( skeuomorphism jest zasadą projektowania kiedy jeden produkt otrzymuje inny wygląd, to znaczy gdy różne elementy interfejsu są skopiowane z rzeczywistych obiektów. - tłumaczy uwaga) , a także bogate wzornictwo. Warto jednak powiedzieć, że płaska konstrukcja wcale nie jest tak prosta, jak się wydaje na pierwszy rzut oka. Obejmuje ona pewne cechy skeuomorphism, ale będziemy rozmawiać o tym nieco później.
Na ogół płaska pomaga użytkownikowi skupić się na treści, bez zakłóceń dla efektów wizualnych. Płaska konstrukcja podkreśla prostotę elementów, a jednocześnie sprawia, że \u200b\u200binterfejs jest bardziej responsywny, przyjemny i łatwy w użyciu.
2. Trochę historii
Jak wiadomo, płaski projekt istniał na długo przed momentem, gdy stał się światowym trendem w sieci. Płaskim projekt był dość popularny w latach 80. ze względu na fakt, że technika w tym czasie nie było jeszcze na tyle rozwinięte, aby obsługiwać skomplikowanych efektów, tekstur i cieni. Jednak nawet wówczas dążył konstrukcja skephomorphism, starając się elementy interfejsu jak najbardziej realistyczne.
Płaska konstrukcja, w takiej formie, w jakiej widzimy ją teraz, zaczęła zyskiwać na popularności po tym, jak Microsoft zaczął wytwarzać produkty w tak zwanym metrze. Metro - interfejs użytkownika Microsoft, uderzający 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 jednym z wcześniejszych produktów.Microsoft (Zune). Później, zainspirowany sukcesem, Microsoft wydał system operacyjny Windows 8 oparty na tym samym płaskim stylu Metro.
Ostatecznie płaski projekt osiągnął najwyższy poziom w 2013 r., Kiedy Apple wypuścił na rynek iOS 7 z zupełnie nowym wyglądem i całkowicie przeprojektowanymi elementami interfejsu użytkownika, w tym ikonami i czcionkami. Apple stworzyło jasne zasady projektowania interfejsu użytkownika i ikon .
Niedługo potem Google zaczął także używać płaskiego stylu w swoich aplikacjach i 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 zasady i wytyczne dotyczące tworzenia różnych obiektów projektowych: ikon, układów i tak dalej.
Od tego czasu mieszkanie stało się głównym przedmiotem projektowania stron internetowych, dzięki czemu strony internetowe, aplikacje i elementy interfejsu są eleganckie, czyste i stylowe.
Istnieją zatem trzy globalne przykłady płaskiego projektowania od firm, bez których trudno sobie wyobrazić współczesny świat technologii:
Projekt metra Microsoft
Apple iOS 7 projekt
Projekt materiałów Google
3. Pamiętaj o czystości
Wygląda na to, że płaska konstrukcja nazywana jest „płaską” z powodu braku elementów trójwymiarowych i realistycznych efektów, takich jak: gradienty, tekstury, światła, półcienie, cienie. Pamiętaj, że styl płaski to dwuwymiarowy (płaski) sposób przedstawiania obiektów.
Co więcej, w płaskich obiektach są przedstawione bardzo uproszczone i stylizowane.
A czasami nawet sylwetka lub kontury obiektu są używane, tj. wystarczy, aby obiekt był rozpoznawalny, ale nie przeciążał go nieistotnymi szczegółami.
Minimalizm stał się obecnie światowym trendem: prostota form i zastosowanie ostrych krawędzi tworzą czysty i przyjemny design. Proste formularze są bardziej zrozumiałe i łatwiejsze do odczytania. To sprawia, że \u200b\u200bminimalistyczny design, czysty, uniemożliwiając zdobywanie ruchliwe niechlujny wygląd.
4. Idealny
Wiedz, kiedy chodzi o tworzenie płaskich ikon i elementów interfejsu użytkownika, musisz sprawić, by wyglądały chrupiące, schludne i idealne do piksela, tj. tak dużo jak to możliwe. Ponadto dotyczy to grafiki rastrowej i wektorowej.
Wszystko jest jasne dzięki programowi Adobe Photoshop: działa z grafiką rastrową opartą na pikselach.
Co do programu Adobe Illustrator, używa grafiki wektorowej, składające się z krzywych i linii zwanych wektorami, które są zdefiniowane za pomocą wzorów matematycznych.
Dawno, dawno temu Adobe Illustrator nie był szczególnie wygodnym programem do tworzenia grafiki w pikselach. 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 w zasadzie oznacza pracę z prostymi, płaskimi kształtami, czystymi kolorami i siatkami. Adobe Illustrator jest bardzo elastyczny w ustawieniach i pozwala ci dostosować siatkę do twoich potrzeb, wyrównać obiekty i użyć różnych rodzajów przyciągania. Dzięki temu proces tworzenia idealnego projektu, który będzie wyglądał czysto i stylowo na każdym wyświetlaczu, stał się łatwiejszy. Jeśli chcesz nauczyć się tworzyć idealną grafikę, przeczytaj artykuł: Jak stworzyć kompozycję idealną w pikselach za pomocą Adobe Illustrator .
5. Kolor
Jedną z najbardziej charakterystycznych cech płaskiego projektu, oprócz cieni, jest użycie koloru. Większość kolorów wykorzystujących płaskie elementy w swoich elementach składa się tylko z kilku podstawowych kolorów.
Kolor w płaskiej konstrukcji wyróżnia się jasnością, nasyceniem, soczystością.Kolorystyka mieszkania nie ogranicza się do kilku specjalnych kolorów; zawiera wiele odcieni, a ich wybór zależy tylko od tego, co przedstawisz, czy będą to ikony słodyczy lub przedmioty w stylu retro w wyrafinowanej palecie retro.
Załóżmy, że jesteś projektantem interfejsu i dobrze znasz palety kolorów, eksperymentujesz z panelem kolorów w Photoshopie i Illustartor, mieszając kolory tak, jak chcesz. Proces ten jest jednak dość skomplikowany 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 wszelkiego rodzaju projektów i ilustracji, a nie tylko do płaskiej konstrukcji. Na przykład Adobe Color CC, lepiej znany jako Cooler. Obecnie istnieje do niego dostęp, zarówno za pośrednictwem strony internetowej, jak i bezpośrednio za pośrednictwem produktów Adobe. Chłodnica jest bardzo elastycznym narzędziem, które pozwala albo tworzyć własną paletę kolorów, albo wybierać spośród niestandardowych palet z biblioteki.
Kolejnym prostym i wygodnym generatorem palet kolorów są Coolory. Wystarczy nacisnąć spację, a program wygeneruje paletę kolorów, możesz dostosować kolory, istnieje również funkcja eksportu.
Istnieje kilka innych podobnych usług z niestandardowymi paletami, które mogą być przydatne. Istnieje jednak jedno narzędzie stworzone specjalnie do projektowania płaskiego: FlatUIColors.com firmy Designmodo - usługa z zestawem „płaskich” kolorów, jest 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!
I możesz znaleźć szerszą gamę kolorów i palet w Przewodnik po materiałach Google.
6. Długie cienie
Jak wspomniano powyżej, płaska konstrukcja charakteryzuje się prostotą, dużą ilością wolnego miejsca - dlatego mieszkanie odrzuca stosowanie jakichkolwiek efektów. Istnieje jednak jeden efekt charakterystyczny dla płaskiej konstrukcji. Efekt ten stał się trendem i charakterystyczną cechą mieszkania.
Mówimy o długich cieniach. Mają pewne typowe cechy, które sprawiają, że efekt jest rozpoznawalny, a mianowicie: nachylenie 45 stopni i duży rozmiar (cień może być kilka razy dłuższy niż sam obiekt. W rezultacie długie cienie nadają płaskiemu efekt głębi.
Ten efekt sprawia, że \u200b\u200bobiekt jest bardziej trójwymiarowy, ale jednocześnie pozostawia go w kontekście płaskiej konstrukcji.
7. Praca z czcionkami
Typografia odgrywa dużą rolę w płaskiej konstrukcji. Często tekst staje się głównym elementem kompozycji.
Flat zwykle używa prostych stylów czcionek, dzięki czemu cały projekt jest czysty i czytelny. W produktach Adobe Typekit można znaleźć wiele bezpłatnych czcionek. Znajdziesz również wiele dobrych darmowych czcionek na Font Squirrel. Ale nie zapomnij przeczytać licencji, jeśli zamierzasz używać czcionki do celów komercyjnych.
Najczęściej w płaskiej konstrukcji zwykle stosuje się wielkie litery i kontrastujące kolory, dzięki czemu tekst jest bardziej czytelny.
Używaj czcionek z opieką, należy pamiętać, że powinien on podkreślać konstrukcję i dopasować go, a nie wyglądać jak oddzielny element. To nie znaczy, że nie można użyć serif czcionek lub odręcznych skomplikowanych czcionek. Pamiętaj tylko o minimalizmie i utrzymuj równowagę. Jednak Flat nadal częściej korzysta z czcionek bezszeryfowych, ponieważ wyglądają one dokładniej i dokładniej.
8. Plusy i minusy płaskiej konstrukcji
Pomimo faktu, że płaska konstrukcja stała się tak popularna ze względu na wiele zalet, nadal ma pewne wady, z którymi spotykają się projektanci, korzystając z tego stylu. Spójrzmy na zalety i wady.
profesjonaliści
Popularność
Płaski design stał się trendem, zbierając coraz więcej pozytywnych recenzji od projektantów i projektantów stron internetowych, i wcale nie wydaje się, że traci swoją pozycję. Przeciwnie, rozprzestrzenia się coraz bardziej, zyskując nowe formy i funkcje, stając się coraz bardziej kreatywny.
Prostota
Płaska konstrukcja jest prosta, minimalistyczna i czysta. Płaski w Internecie pomaga użytkownikom skupić się na treści, zamiast rozpraszać się efektami wizualnymi. Działa również w przypadku interfejsów aplikacji mobilnych: przejrzysta konstrukcja z dużymi przyciskami doskonale wykorzystuje urządzenia mobilne.
Jasność
Kolor to kolejny chłodny plusem w płaskiej konstrukcji. Jasne i nasycone kolory wyglądają atrakcyjnie i wyraźnie, a brak gradientów nadaje stylowy wygląd. Co więcej, takie czyste kolory sprawiają, że jest bardziej pozytywna, reprezentacyjna, płaska konstrukcja tworzy właściwy nastrój.
niedogodności
Mieszkanie ma wiele innych zalet, ale żaden projekt nie jest idealny i nie możemy go idealizować. Oto niektóre z wad płaskiej konstrukcji, o których musimy wspomnieć:
Brak reakcji
Czasami brak ważnych szczegółów lub efektów wizualnych utrudnia proces tworzenia przyjaznego interfejsu, co ogólnie powoduje, że cały projekt nie odpowiada. Nie wszyscy płascy użytkownicy czują się komfortowo, ponieważ może być trudno znaleźć elementy na stronie internetowej, które należy kliknąć lub dotknąć ekranu telefonu komórkowego, ponieważ nie są interaktywne.
Problemy z drukowaniem
Jak wspomniano wcześniej, nie każda czcionka może pasować 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 niepoprawnie, może to zniszczyć cały projekt. Musisz naprawdę dobrze czuć, które czcionki są odpowiednie dla płaskich, a które nie. Brak doświadczenia sprawia, że \u200b\u200bwybór czcionek jest bardzo trudny.
Słaba grafika
Ze względu na ograniczenia dotyczące używania efektów, kolorów i czcionek, płaski może wyglądać zbyt prosto i zimno. Jego minimalizm może stać się jego główną wadą - kolejna płaska w końcu wygląda dokładnie takie same. Dlatego bardzo trudno jest odróżnić ikony lub strony internetowe od projektu innej osoby, ponieważ używasz tych samych uproszczonych formularzy, ograniczonych palet kolorów i podobnych czcionek. Z czasem płaska konstrukcja może stać się nudna.
9. Przyszłe trendy projektowania płaskiego
Nie oznacza to, że płaska konstrukcja w pełni uformowała się i zatrzymała na swoim miejscu. Być może z powodu wspomnianych wyżej niedociągnięć mieszkanie stara się rozwijać i zmieniać, zdobywać nowe funkcje i zwiększać ekspresję wizualną.
Jeśli przyjrzysz się uważnie najnowszemu przykładowi płaskiej konstrukcji, zauważysz, że to naprawdę stopniowo od surowych narzędzi i zaczyna dodawać subtelne efekty, takie jak: gradienty, cienie, oświetlenie i inne efekty wizualne.
Te drobne rzeczy dodają płaskiej konstrukcji do pewnej głębokości bez przeciążania szczegółami, podobnie jak w przypadku skeuomorficznego projektu. Te drobne ulepszenia sprawiają, że mieszkanie jest bardziej responsywne i wygodne, a także zapewniają świeży wygląd, czyniąc mieszkanie bardziej elastycznym i wszechstronnym.
W ten sposób mieszkanie nie traci swoich cech, ale staje się bardziej interesujące, elastyczne.- naprawdę się poprawia.
Wyniki
Omówiliśmy zatem niektóre fakty z historii projektowania płaskiego i rozmawialiśmy o kolorach, kształtach i typografii. Przeanalizowaliśmy różne punkty widzenia, skupiliśmy się na zaletach i wadach mieszkania i nauczyliśmy się kilku podstawowych zasad tworzenia dobrego projektu.
Mam nadzieję, że zebrałeś dla siebie nowe informacje z tego artykułu, a przynajmniej uznałeś je za interesujące. Musisz spróbować stworzyć płaski projekt, jeśli wcześniej tego nie robiłeś.
W końcu o czym jeszcze warto wspomnieć o płaskiej konstrukcji?
Jeśli naprawdę lubisz mieszkanie z ostrymi krawędziami, bogatą kolorystyką i wyrazistymi czcionkami, czystością i minimalizmem, śmiało!
To trend, ale jak w każdym innym stylu graficznym, nie ograniczaj się do jednej techniki. Jeśli mieszkanie jest w modzie, nie oznacza to, że nie możesz używać innych stylów w swoim projekcie. Skeuomorphism z jego drobnymi szczegółami i tekstur mogą być również dobrym rozwiązaniem. Co najważniejsze, pamiętaj, że twój projekt jest do każdego projektu, musi wyrażać ducha, cel, istotę, pozostając jednocześnie wygodny i funkcjonalny. Naprzód!
Lekka i wygodna konstrukcja strony internetowej jest uważana za najbardziej poprawną. Płaski styl strony jest w wielu przypadkach odpowiedni. Proste interfejsy często działają lepiej, a dzięki ogólnej tendencji do minimalizmu, płaski kierunek jest nadal aktualna (Microsoft i Apple dokonały ich OSS płaski). Wykorzystując piękne płaskie kolory w projektowaniu, znane firmy nie tracą okazji do wyrażenia swojej indywidualności, zwrócenia uwagi na markę lub zwiększenia konwersji.
Dobre przykłady płaskiej konstrukcji
Pięknie i inteligentnie wykonane płaskie witryny z łatwą nawigacją i intuicyjnym interfejsem. Ich przemyślany, renderowany projekt dobrze się sprzedaje i zapewnia dobre wrażenia użytkownika.
Uruchomić
Unikalna szaro-biało-pomarańczowa wersja mieszkania. Mikro-iteracje wyglądają pięknie w ekspresyjnym interfejsie użytkownika z upiornymi przyciskami i przewijaniem paralaksy rozmytego tła. Efekty przewijania, takie jak lepkie menu i nakładające się stopki z tłem treści strony, wizualnie sprawiają, że witryna jest bardziej kompaktowa.
eTecc Interactive
Prosty projekt strony amerykańskiej agencji nie wygląda zwyczajnie, ponieważ wykonane z wysokiej jakości i gustowne. Stara szkoła projektowania działa nie gorzej niż innowacje; korzystne może być zaprezentowanie firmy i jej usług.
Kancelaria Nehora
Czysta, płaska konstrukcja z wyrafinowanymi elementami nadaje kalifornijskiej kancelarii profesjonalny wygląd. Pięknie zdobiona czapka i stopka. Biały kolor i odcienie złota na ciemnym turkusowym tle tworzą piękny miękki kontrast. Przyjazny interfejs strony usprawnił treść.
Towa
Witryna wordpress niemieckiej agencji ma ładny minimalistyczny wygląd z efektami HTML5 / CSS3 i. Pastelowe / szaro-złote odcienie, gradacja kolorów zdjęć i modułowy układ pomogły pięknie zaprojektować stronę w formie kolażu interesujących faktów na temat firmy.
Amazee labs
Strona internetowa szwajcarskich programistów Drupal ma lakoniczny design z ładnymi kombinacjami kolorów. Elementy wezwania do działania zostały zaprojektowane w sposób kreatywny, zastosowano techniki Flat i HTML5 / CSS3.
Igła kosmiczna
Space Needle to symbol Seattle. Witryna ma także stronę główną z renderowaniem tła. Unikalnie oprawiony zwój z efektami rozjaśniania i mini-slajdów na końcu.
Zbuduj w Amsterdamie
Holenderska agencja brandingowa ma piękną płaską stronę z niestandardowym menu nawigacyjnym. Ładny i stylowo zaprojektowany interfejs, dobrze.
Żółta konferencja
Optymistyczna zawartość, jasnożółta i strona konfiguruje się pozytywnie.
Radość intermedia
Strona międzynarodowej agencji kreatywnej z Polski z płaskim designem w CSS3 i dobrym UX. Strona korzysta z bocznych i dolnych paneli i jest łatwa w użyciu.
Bezpiecznik laboratorium twórcze
Dobrze skonstruowana, przyjazna dla użytkownika strona amerykańskiej agencji z wygodnym półprzezroczystym bocznym menu, panelem projektu i dyskretnymi mini-introsami na ekranie głównym.
Chobani
Mała firma b2b ma przyjemną i bardzo wygodną stronę kulinarną z przejrzystym wyglądem HTML5. Stałe menu rozwijane i oryginalny cztery poziom wtórnego pomaga system nawigacji obecny asortyment.
Unikalna płaska konstrukcja i płaski styl
Wybrano przykłady unikalnej płaskiej stylistyki, która dowodzi, że płaskie interfejsy są skuteczne, interesujące i atrakcyjne. Łącząc ekspresyjną grafikę z przyjemnym kontrastem czcionek, dodając odrobinę animacji i mikroiteracji, możesz nie tylko uczynić stronę kreatywną lub biznesową piękną, ale także pokazać swoją osobowość i wyrazić główne przesłanie za pomocą projektu.
RJ Investments
Witryna brytyjskiej agencji nieruchomości ze stylowym zwięzły płaskim projektu w szarych i białych kolorach. Miękki wyraz dodaje akcentu złotego koloru. Na podstawie WordPress HTML5 / CSS3, jQuery, SVG.
Krzesło pochylone
Wyraźnie zaprojektowana strona - typografia staje się wizualnie bardziej interesująca, gdy chwytliwe kolory powracają do projektu z minimalizmem i płaskim stylem. Rolą „trampoliny” jest zwrócenie uwagi na czerwone nagłówki w portfolio.
FHOKE
Czysty, płaski design i unikalny interfejs użytkownika strony internetowej. Ostrość zdjęć, w tym komputery spożywcze i telefony iPhone (zdjęcia wyświetlane na osobnej warstwie wyglądają realistycznie).
Naród
Chwytliwa, tętniąca życiem strona studia z Londynu. Zarys nagłówka na kompaktowej stronie głównej nie pozostanie niezauważony, podobnie jak spektakularne upiorne przyciski w portfolio / pudełkach. Wykorzystywane są zapętlone wideo w tle, ramki z rozmyciem i korekcją kolorów, stylowe animacje, przejścia, wstępne ładowanie strony. Ekspresyjny design w niebieskich odcieniach przekazuje komunikat o niezawodności studia i energii zespołu.
Mayven dev
Mayven Dev to kreatywny zespół 30 programistów / projektantów UX z San Francisco. Ich strona wyróżnia się powściągliwą estetyką designu, indywidualnością stylu, przyjemnymi rozwiązaniami kolorystycznymi z wyrazistymi kontrastami białej typografii i animowaną grafiką konturową na szmaragdowym tle.
Agencja HughesLeahyKarlovic
Czysty i schludny design miejscu amerykańskiej agencji natychmiast ustawia się pozytywny. Menu nawigacji jest wyjątkowo zaprojektowane: efekt najechania kursorem z zastosowaniem filtra kolorów przekształca obraz tła w zapętlone wideo.
Satis łączności satelitarnej
Obszerna strona rosyjskiego operatora łączności satelitarnej. Estetyka biznesowa realizowana jest poprzez płaski styl z ilustracjami konturowymi.
Ilustracje, efekty i kreatywność w płaskich projektach.
Przykłady dynamicznych projektów, kreatywnego płaskiego projektowania i udanego połączenia płaskich ilustracji z animacją. Modern Flat pozwala łączyć elementy projektowania gier z realistyczną treścią witryn biznesowych.
Studia Tectonica
Projektant wykorzystuje płaską grafikę z gradientami (aktualny trend w sieci), blok jasnych płaskich ilustracji na stronie głównej. Dla atrakcyjnego partycjonowania, wolnego miejsca i animowanej grafiki.
Kraina pikseli
Microsite z klasycznym płaskich zastosowań projektowych przewijanie animacji, płaskie ilustracje i filmy.
100 lat projektowania
Kreatywny projekt sieci społeczności projektantów AIGA. Płaskie kolory wskazują pozycje menu, otwierane sekcje, punkty nawigacyjne i półotwarte okna z karuzelami z ilustracjami.
Agencja Drap
Spektakularna, chwytliwa, kolorowa strona agencji kreatywnej skoncentrowanej na technologii. Doceniają innowacyjne wzornictwo i wszelkie innowacje w prezentacji informacji.
Mobki
Bez płaskich ilustracji z gradientami witryna meksykańskiej agencji wyglądałaby nudno, a projekt jest zbyt zwyczajny dla twórców stron internetowych i aplikacji.
Conodio Ecodom
Oficjalna strona włoskiej firmy zajmującej się rewitalizacją sprzętu AGD i recyklingiem. Żywy zielony design, interaktywne i dynamiczne efekty pasują do witryny organizacji z tego rodzaju działalnością.
Cud zdumiewający
Projekt oferuje zapoznanie się z interesującymi ciekawymi ludźmi, społecznością i wydarzeniami poszerzającymi horyzonty. Począwszy od abstrakcyjnie zaprojektowanego ekranu głównego, oryginalny projekt przyciąga uwagę tych odbiorców.
Zielony Człowiek
Strona służy jako przewodnik po festiwalu w Walii. Żółto-zielony design i animacja z kreatywną płaską grafiką odpowiadają zarówno nazwie domeny, jak i pozytywnym celom projektu.
Czytaj także: Połączenie kolorów w projektowaniu stron internetowych - zielone strony
Portfolio Amelia Thompson
Jedna strona z Chicago. Amelia ma ciekawe portfolio prac w płaskiej stylistyce.
Czytaj także: 30 stylowych stron internetowych agencji i osobiste portfolio projektantów
Gotowe gotowe
Strona systemu zarządzania projektami z funkcją śledzenia błędów jest pięknie urządzona w stylu Flat. Żywe kolory, płaskie grafiki / wideo oraz przycisk kontrast z odwołania nie można pominąć.
Mięta pieprzowa
Strona kreatywna polskiej agencji cyfrowej wykorzystuje geometryczne kształty i niewyobrażalne animacje, ilustracje, fotografie, rysunki.
Geex Arts
Witryna młodego moskiewskiego studia internetowego zachwyca nowoczesnym, ultranowoczesnym designem i znajduje się w TOP 40 agencji cyfrowych. Posiada stylowe menu nawigacyjne, spektakularne przejścia, interaktywne, animacje i dobry UX z niestandardowymi rozwiązaniami.
DAESK
Witryna niemieckiego studia ma ekscytujący projekt sprzedaży HTML5 i niestandardowe menu nawigacyjne. Ekscytujące kwaśne kolory sprzedają produkt (tracker śledzenia czasu). Efekty najechania z przewijaniem paralaksy zwracają uwagę na przyciski z połączeniami i dowodami społecznościowymi. Po pięknie zaprojektowanych recenzjach strona początkowa odnosi się do spraw / historii klientów. Interaktywny na tle wektorowym uruchamia sprzedaż grafiki wideo.
Fcinq
Francuska strona kreatywnego studia: stylowy płaski projekt zaczyna się od pięknego wstępnego załadowania. Ten projekt jest atrakcyjny ze względu na korekcję kolorów zdjęć i unikalne kombinacje kolorów.
D.FY
Elastyczna strona internetowa agencji koreańskiej z kreatywnymi filmami w tle. Nowoczesny, czysty design w HTML5 / CSS3. Pełnoekranowe menu nawigacyjne imponuje płynnym efektem przejścia.
Odważni ludzie
Przeszłe przeprojektowania strony internetowej agencji kreatywnej na Florydzie zostały zaprezentowane w Creative TOP. Brave People ma teraz wydajny design z przejrzystym i kompaktowym płaskim interfejsem.
Nea media
Francuski producent zabawek i gier wideo zastosował styl FLAT i projektowanie stron internetowych. Strona stworzona w WordPress ma zaskakująco modny design.
Ulotki Llittle
Australijska strona internetowa dla dzieci o bujnych, płaskich kolorach. Kontrastowo posiekane czcionki podkreślają atrakcyjność i łączą się z dużymi elementami projektu.
Ic kreatywny
Witryna angielskiego studia wyróżnia się dużymi nagłówkami z apelacją i elementami CTA w kolorze pomarańczowym.
Fatbit
Obszerna strona internetowa programistów internetowych z Indii została stworzona na wordpress i ma różnorodne projekty z mikrointerakcjami i animowanymi ilustracjami. W czapce i stopce czerwony płaski kolor podkreśla połączenia CTA. Strona główna ma stałe tło z korekcją kolorów, obsługuje przeciąganie i upuszczanie slajdów w karuzelach (pierwszy ekran, dowody społecznościowe, promocje na półprzezroczystych kościach).
Menada domeną
Kontynuując 100-letnią tradycję jakości, bułgarski winiarz robi wrażenie na gościach dzięki animowanemu korkociągowi. Ciemna płaska konstrukcja z delikatnymi kontrastami, kreatywne przetwarzanie zdjęć i nieprzerwane rozwiązania sprzedają ideę elitarności marki.
Muzeum Fransa Halsa
Witryna holenderskiego muzeum sztuki ma niezwykłą płaską konstrukcję z gigantycznymi posiekanymi nagłówkami. Aby zrozumieć niestandardowe poziome i pionowe ikony nawigacji menu pomocy.
Drobiazgowość
Deweloperzy płaskich witryn z technologicznej doliny Nowego Jorku. Ekspresyjny, czysty design z geometrią i stałym tłem. Piękne kontrasty w nagłówku, stopce, sekcjach z przyciskami CTA.
Lądowanie i sprzedaż wzorów w stylu FLAT
Atrakcyjność i jasność strony głównej lub wewnętrznej pomagają wyrazić wyjątkową ofertę. Projekt lądowania witryny rozszerza możliwości aplikacji Flat i zwiększa szanse dalszej interakcji z klientami. Celem sprzedaży i lądowania jest zapewnienie wysokiej konwersji. Witryna LP lub strona docelowa są zapamiętywane ze względu na ciekawy lub nietypowy projekt.
Płaski - konstrukcja (płaska konstrukcja) - Jest to popularny styl projektowania witryn i interfejsów, a także systemów operacyjnych, których cechą charakterystyczną jest prostota, wyrafinowanie i minimalizm. Płaska konstrukcja zaczęła zyskiwać popularność w 2010 roku jako przeciwieństwo skeuomorfizmu.
Skeuomorfizm - fizyczna dekoracyjnego lub element, który jest kopiowany z kształtu innego obiektu, ale wykonane z innych materiałów lub w innych metodach. Przykłady obejmują ceramikę ozdobioną imitacją nitów przypominającą podobne doniczki wykonane z metalu lub kalendarz komputerowy, który symuluje wygląd wiązania stron papierowego kalendarza biurkowego (definicja z Wikipedia).
Płaski styl w projekcie został promowany przez wydanie systemu operacyjnego Microsoft Windows 8 w stylu Metro, a także iOS 7, w którym Apple wybiera również styl płaski. Po tym rozpoczyna się prawdziwa era płaskiego projektowania. Wkrótce główne usługi wyszukiwania i aplikacje, takie jak Google i Youtube, przechodzą na Flat -design i pojawia się wiele witryn, które wykorzystują zasady płaskiego stylu w swoich projektach. W ostatnich latach flat design jest liderem światowych trendów w projektowaniu stron internetowych.
Korzyści z płaska
- Praktyczność - Zastosowanie płaskiej konstrukcji pozwala zminimalizować liczbę stylów, skryptów i animacji, co pozwala na szybsze ładowanie strony.
- Łatwy w adaptacji - Płaska konstrukcja jest wystarczająco łatwa do dostosowania do różnych rozdzielczości ekranu.
- Wygoda użytkowania - Dzięki uproszczonemu stylowi użytkownicy mogą łatwiej odbierać informacje w witrynie.
- Piękno - Zewnętrzna bezstronność i proste projekty pozwalają skupić się na projekcie, który naprawdę się wyróżnia.
5 zasad projektowania płaskich witryn
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 hałasu, co pozwala skoncentrować się na produkcie lub usłudze.
1 - Korzystanie z obiektów dwuwymiarowych
W płaskiej konstrukcji wykluczone jest użycie elementów nadających obiektowi głębię i objętość: cienie, gradienty, olśnienie, tekstury, refleks, animacja. Gdy obiekt jest wyświetlany, wyświetlane są tylko jego kontury.
2 - Ikony i proste przedmioty
Zastosowanie płaskich ikon i monosyllabicznych figur z wyraźnymi konturami i jednym kolorem pozwala uprościć projekt i ułatwić. Elementy sterujące stają się intuicyjne dla użytkownika i zachęcają do interakcji.
3 - Proste czcionki w stylu projektowania
Wiele uwagi poświęcono typografii płaskiej i czcionkom. Nie stosuje się tutaj kursywy, czcionka harmonijnie wpasowuje się w projekt witryn nie tylko pod względem treści, ale także nawigacji. Nawet w typach czcionek na stronie mile widziany jest minimalistyczny styl.
4 - Gra w kolor
Płaska konstrukcja zawiera kilka podstawowych kolorów, które wykluczają użycie płynnych przejść i gradientów, ale mogą być jasne i kontrastować ze sobą.
5 - Minimalizm
Płaska konstrukcja obejmuje wykorzystanie wizualizacji elementów, wykorzystanie całej szerokości ekranu i jednocześnie minimalizację informacji.
Istnieje prawie płaska konstrukcja. Jest to jedna z koncepcji płaskiego projektowania, która polega na użyciu prostych elementów i dwuwymiarowej przestrzeni. Przykładem tego może być zdjęcie wysokiej jakości, które jest rozmyte w tle lub przyciemnione. Pozwala to stworzyć głębokość i perspektywę obiektu.
przykłady płaska
W Internecie, w tym w segmencie białoruskim, można znaleźć wiele przykładów tworzenia stron internetowych o płaskiej stylistyce w różnych tematach, w tym w serwisach informacyjnych, portalach, a nawet sklepach internetowych.
