Essential Design Trends, sierpień 2016
Kolor i warstwy. Ta para elementów konstrukcyjnych była siłą napędową wielu z tegorocznych trendów. Chociaż nie widziałem niczego, co mogłoby przejąć kontrolę nad projektami, takimi jak płaskie wzornictwo kilka lat temu lub bardziej niedawno Material Design, elementy obu stylów pchają projektantów do odkrywania nowych rzeczy.
Zarówno wybory kolorystyczne, jak i nakładanie warstw mają swoje korzenie w tych większych trendach i są stosowane w schematach projektowych, nawet bez całkowicie płaskiej lub materialnej estetyki. Oto, co zyskuje na popularności w tym miesiącu:
1. Wiele warstwowych elementów
Warstwowe elementy i trójwymiarowe efekty są niezbędną techniką w przestrzeni sieci 2D. Dzięki zabawnym technikom, a nawet lepszym pomysłom, wprowadzonym głównie przez Material Design, warstwowe elementy pojawiają się w projektach wszystkich typów.
Szczególnie przyjemne jest to, że strona internetowa jest bardziej realistyczna. Użytkownik może prawie wyciągnąć rękę i chwycić elementy na ekranie. (I to dobrze!) Sztuczka polega na tym, że każda warstwa powinna wyglądać realistycznie i lekko, a warstwy wyglądać naturalnie.
Oto kilka sposobów na rozpoczęcie eksperymentowania z warstwami w projektach:
- "Podnieś" elementy z tła za pomocą prostego cienia lub animacji. Olle robi to z wieloma elementami na różnych płaszczyznach, ale wszystkie są ze sobą połączone i wyglądają naturalnie.
- Zezwalaj na przecinanie się elementów. Tekst może przejść do przestrzeni zajmowanej przez obraz.
- Funkcje przewijania paralaksy są interesującym sposobem tworzenia warstwowych elementów (pierwszy plan porusza się w tle) bez nadmiernego przytłaczania.
- Użyj geometrycznych kształtów, animacji i odmiany kolorów, aby naśladować głębię projektu. Użytkownicy powinni czuć, że mogą niemal wpaść w efekty wizualne, takie jak doświadczenie ustanowione przez Usuń agencję .
- Twórz warstwy wychodząc poza obszar roboczy, z elementami wykraczającymi poza tło lub krawędź ekranu.
- Pozwól elementom spoczywać na wierzchu teksturowanego tła, aby utworzyć separację między górną warstwą (którą użytkownicy mogą sobie wyobrazić, dotykając) a warstwą tła.
2. Ciemne schematy kolorów
Przez chwilę wydawało się, że każda strona internetowa jest minimalistycznym ideałem, w tym surowym białym tłem. Trend ten przesunął się, ponieważ coraz więcej ciemnych schematów kolorów pojawia się jako ulubione wzornictwo.
I nie bez powodu. Ładny ciemny kolor może przyciągać uwagę i nie jest tak ostry dla niektórych użytkowników, jak biały. Z drugiej strony, mroczna estetyka może być nieco bardziej kłopotliwa, jeśli tekst jest mały lub na mniejszych ekranach (dlatego należy zwrócić szczególną uwagę na sposób renderowania elementów na urządzeniach mobilnych).
Elementy, które naprawdę wyróżniają się na schematach ciemnych kolorów, to wykorzystanie fajnego wideo i animacji, nawet jeśli jest to mało rozpoznawalne; odważna biała typografia, wyskakujące jaskrawe kolory, które podkreślają wezwania do działania lub ważne informacje i odpowiedni ogólny nastrój.
Pamiętaj też, że ciemność nie zawsze oznacza czarną. Ciemne schematy kolorów mogą być zakorzenione w różnych odcieniach od czerwieni przez bluesa do zieleni. Podczas gdy opcje czarne są najbardziej powszechne, ważne jest, aby wybrać bogatą czerń, która jest wykonana z różnych kombinacji kolorów. Płaska czerń (lub "K black", jak nazywają to graficy) pozostawia wiele do życzenia w projektowaniu strony internetowej.
Podczas pracy z ciemnymi schematami kolorów należy zachować szczególną ostrożność, aby upewnić się, że istnieje odpowiedni kontrast między elementami, a kolory i obrazy nie gubią się w ciemnej naturze projektu. Biały może być dobrym rozwiązaniem, jak również inne podstawowe kolory o dużej jasności lub nasyceniu. Pamiętaj także o wielkości kontrastu. Rozważ zwiększenie rozmiaru wszystkich elementów tekstowych o 10 do 20 procent podczas pracy z ciemną strukturą, aby zapewnić czytelność.
3. Gradienty powracają
Grad - jedna z technik odrzuconych przez płaską konstrukcję - powraca. (I jest nawet używany w większości płaskich wzorów).
Gradienty działają, ponieważ robią coś, co wielu ludziom uważało za brak płaskiego projektu, co ma pomóc w stworzeniu i ustaleniu głębi. Nowością w tym przypadku jest to, że nie są używane do naśladowania tekstur lub bez celu. Dzisiejszy trend koncentruje się na jasnych gradientach, które podkreślają zawartość. Od pełnoekranowych nakładek gradientowych do tła, prawie wszystko idzie w kierunku techniki ... o ile jest odważne.
Projektanci wykorzystują efekt gradientu na kilka różnych sposobów:
- Gradientowe pary "jednobarwnych kolorów" łączą obie koncepcje projektowe dla odważnego wyglądu, na przykład dla strony internetowej WPcrew .
- Gradienty dwukolorowe to zabawna nakładka kolorów, która zwiększa zainteresowanie zdjęciem, które może być nieco pomijane lub aby dodać głębię do tła.
- Chociaż wiele z tych gradientów wydaje się być na większą skalę, są one również wykorzystywane do mniejszych elementów, takich jak przyciski lub do zwracania uwagi na określone treści.
Jest jeszcze kilka niedopowiedzeń, które należy wziąć pod uwagę. (Ponieważ nie chcesz, aby ten wzór wyglądał tak, jakby wyskoczył z roku 2012!)
- Uważaj na małe gradienty. Używanie ikon nadal nie jest zalecane.
- Nie przytłaczaj treści. Nakładka gradientowa na zdjęciu może być przyjemna (pomyśl tylko o kilku fajnych efektach, które regularnie oferuje Spotify), ale zdjęcie musi być jeszcze widoczne.
- Odważne gradienty kolorów mają zwykle lekkie, wesołe odczucie. Upewnij się, że jest to zgodne z Twoimi treściami.
- Zwróć uwagę na kombinacje kolorów i kontrast, jeśli chodzi o czytelność. Niektóre gradienty mogą być jasne, a biały tekst może stanowić problem. Upewnij się, że testujesz czytelność pod kątem koloru, innego reagującego punktu przerwania i urządzeń o wielu rozmiarach. (W przypadku gradientów problemy z czytelnością mogą czasami pojawiać się w miejscach, których nie można się spodziewać).
Wniosek
Nie ma nic fajniejszego niż kolor, jeśli chodzi o design. Trendy w kolorze są ładne, ponieważ są elementami, które można dodać do niemal każdego stylu bez gruntownego przeglądu. To samo dotyczy warstwowych elementów. Jest to technika, którą można dodać do istniejącego projektu, aby nadać mu bardziej nowoczesny charakter.
Jakie trendy lubisz (lub nienawidzisz) w tej chwili? Chciałbym zobaczyć niektóre ze stron, które Cię fascynują. Wyślij mi link na Twitterze ; Chciałbym usłyszeć od ciebie.