Essential Design Trends, grudzień 2016 r
Czy zdajesz sobie sprawę, że jakiś element dekoracyjny wciąż pojawia się? Nawet te drobne szczegóły, które wyglądają nieco nieistotnie, mogą być wskaźnikami trendów w projektowaniu. Jest to szczególnie prawdziwe w przypadku elementów w tym miesiącu.
Każdy z tych trendów - białe krawędzie otaczające projekt strony internetowej, kinografy i małe animacje ładowania - to pozornie proste szczegóły, które zwiększają wrażenia wizualne użytkowników.
Oto, co zyskuje na popularności w tym miesiącu:
1) Białe krawędzie
Więcej projektów internetowych wykorzystuje białe krawędzie lub obramowanie wokół obwodu projektu w przeglądarce internetowej. Jest to nowy zwrot w starym pomyśle, kiedy więcej stron internetowych zostało zbudowanych do pewnych rozmiarów, a ramka została użyta dla dziwnych szerokości przeglądarki.
To coś, co wyblakło, gdy coraz więcej projektantów wybierało responsywne projekty o pełnej szerokości.
Nowy zwrot z oprawy jest interesujący i jest dobrym sposobem na stworzenie płótna do projektu. Większość witryn wykorzystujących ten trend obejmuje białą, ale nie obowiązkową krawędź wokół projektu. Ma kilka pikseli szerokości i jest zwykle umieszczany wokół trzech lub czterech boków projektu. (Niektórzy decydują się na opuszczenie ramy z dołu projektu, aby zachęcić do przewijania.)
Zaletą białej krawędzi jest to, że projekt jest czysty z białymi liniami, które pomagają skupić się na mocnych wyborach kolorów, przyciągają wzrok z krawędzi ekranu do innych lekkich elementów (takich jak pola tekstowe lub wezwania do działania) i Obramowanie może pomóc utworzyć tło dla przewijania paralaksy lub innych animowanych efektów.
Browar Camden Town robi to wyjątkowo dobrze. Białe kadrowanie wypełnia elementy projektu, tworząc głębokość i ostrość dla użytkownika. Biała separacja oddziela każdą nową sekcję treści na ekranie i przyczynia się do ogólnej organizacji projektu. (Plus, białe akcenty naprawdę uwydatniają mocną czerwoną i czarną paletę kolorów, aby kombinacja nie była zbyt przytłaczająca).
2) Kinografy
Kinografie to zdjęcia z elementem ruchu w nich. Może to być wszystko, od zdjęcia osoby, która mruży oczy do subtelnego ruchu chmur na niebie, gdzie nic się nie porusza. Podczas gdy najczęstsze zastosowania trendu projektowania wciąż pojawiają się w reklamach i mediach społecznościowych, projektanci stron internetowych zaczynają również wykorzystywać tę technikę "na żywo".
Działa, ponieważ użytkownicy są zaintrygowani ruchem. Jest skuteczny z wielu tych samych powodów, dla których wideo jest dobrym rozwiązaniem, aby przyciągnąć uwagę użytkownika. Ruch i akcja są wciągające. To interesujące. To jest prawdziwe.
Jeśli chodzi o pracę z kinografią, premia polega na tym, że można stworzyć projekt z ruchem, ale bez wysokiej produkcji, która towarzyszy projektowi wideo.
Sztuczką do robienia kinematografii jest zakorzenienie ruchu w rzeczywistości. Nawet jeśli scena jest bardziej wymyślona, na przykład Monochromatyczny Paryż , prawa fizyki powinny odnosić się do ruchu na ekranie. Woda powinna płynąć w dół, na przykład grawitacja powinna być siłą, która wpływa na ruch.
Ruch musi również być prosty i subtelny. Za dużo ruchu, a film może być lepszym rozwiązaniem. To, co przyciąga użytkowników do kinematografii, jest elementem zaskoczenia. To, co wygląda jak zdjęcie na obrazie bohatera, ma w sobie coś, co się w nim dzieje. Ten mały divot pomoże przyciągnąć ludzi, utrzyma ich dłużej w projektowaniu i, miejmy nadzieję, doprowadzi do konwersji strony internetowej.
3) Małe animacje ładowania
Czas ładowania to wielka sprawa. Ale nie zawsze można uwzględnić szybkość sieci, w której znajduje się użytkownik; to tam małe animacje ładowania mogą stać się wielką sprawą.
Czym różni się ten mały trend animacji ładowania od tego, że czasami go widzisz, czasami nie projektujesz elementu. Tak czy inaczej zespół projektowy przykłada szczególną wagę do tego, aby każdy użytkownik przychodził na stronę z pozytywnym doświadczeniem.
Te małe animacje można rozpoznać po tym, że nie są częścią wygody użytkownika, która ma wpływ na ogólny cel witryny. Są prostym, małym elementem, który przyciąga twoją uwagę na szybką sekundę, podczas gdy główny projekt witryny jest serwowany.
Fajną cechą tego trendu jest to, że te małe animacje są naprawdę małe, od rozmiaru samego obrazu do akcji na ekranie, nie ma wiele do zobaczenia, ale to, co tam jest, jest absolutnie zachwycające.
Oto trzy wspaniałe przykłady:
- Hannah Purmort's ładowanie animacji to pojedynczy ruch w przeciwnej kombinacji kolorów ekranu głównego. Skok jest przenoszony również przez projekt w efekcie przewijania.
- Susa Ventures zawiera małą ikonę z małym pasku ładowania. Ta przykuwa twoją uwagę, ponieważ malutki goryl jest interesujący wizualnie i sprawia, że jesteś ciekawy treści witryny.
- FPG używa szkicu, który wydaje się być narysowany na ekranie podczas ładowania reszty strony głównej. Jedyną wskazówką, że w rzeczywistości jest to animacja ładująca, jest to, że reszta ekranu jest znacznie bardziej rozbudowana po załadowaniu działającym wideo i jeszcze więcej szkiców. Efekt jest płynny i kończy się prawie zanim użytkownik zorientuje się, że się zaczął.
Wniosek
Szczegóły stanowią sedno każdego dobrego projektu. Ważne jest, aby pamiętać, że projektowanie (i rozliczanie) rzeczy, które nie zauważy każdy użytkownik, jest ważne. W ten sposób każdy z tych trendów łączy się poprzez małe elementy projektu, które nie stanowią oczywistej części ogólnej estetyki.
Te małe elementy mogą być tym, co naprawdę wyróżnia twoją stronę internetową dla użytkownika. Może to być element radości, który przywraca kogoś do twojego projektu. Szczegóły mogą wyróżniać sukces i porażkę.
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.