20 Rosnących trendów w projektowaniu stron internetowych w 2017 roku

Minął kolejny rok i projektanci patrzą w przyszłość. Wiele obiecujące trendy w projektowaniu na pewno wybuchną w 2017 roku. W ubiegłym roku obejrzałem topowe trendy w projektowaniu na 2016 rok i widzieliśmy wiele zmian od tego czasu.

Więc w tym poście wybrałem 20 najlepszych trendów zauważyłem to zyskuje trakcję w 2017 roku. Te trendy w projektowaniu może odnosić się do dowolnej strony internetowej, więc miej oczy otwarte na te techniki, gdy przechodzimy przez rok 2017 i później.

1. “Wystepować w” odznaki

Startupy, blogi, projekty SaaS, a nawet małe firmy używają teraz “jak w opisie” odznaki na swoich stronach internetowych. Te odznaki często link do artykułów na blogach głównego nurtu takie jak HuffPo, Forbes, CNN, Fox i inne serwisy informacyjne.

Celem jest zweryfikuj stronę internetową i budować zaufanie z nowymi gośćmi. Łatwiej jest zaufać stronie internetowej, gdy widzą, że tak było wspomniane w autorytatywnych publikacjach.

W rzeczywistości wiele najlepszych blogów docenić ekspozycję, więc naprawdę pomaga wszystkim zaangażowanym. Te duże witryny często zwolnij swoje logo online ale możesz także znaleźć przezroczyste PNG lub SVG, tylko googlując.

Zaleca się również, abyś link do oryginalnego artykułu wspominając twoją stronę. To dowodzi tego byłeś naprawdę wspomniany na stronie, a ty nie tylko wymyślasz roszczenia.

2. Odważne linki nawigacyjne typu all-caps

widziałem dziesiątki eleganckich menu nawigacyjnych wszyscy polegają na tym samym projekcie. Te linki nawigacyjne różnią się czcionką i rozmiarem ale zwykle mają podobne cechy, Jak na przykład:

• Wszystkie duże litery
• Pogrubiony
• Równomiernie rozmieszczone
• Wyrównany do prawego rogu

Strona główna Zazzle jest doskonałym przykładem. Ale możesz to znaleźć na wielu stronach startowych ponieważ to jest czysty sposób udostępniania linków które są łatwe do odczytania i łatwe do przeglądania.

Najczęściej kojarzę ten trend z firmami i startupami technologicznymi ale może to być także powszechne na blogach.

Zanotuj następnym razem, gdy zobaczysz ten trend, ponieważ jest wszędzie. I spodziewam się, że będzie wzrastać aż do 2017 roku.

3. Blogi w stylu czasopism

Blogowanie było taką niszową koncepcją na początku XXI wieku. Jeśli prowadziłeś bloga w 2003 roku, uznano to za słodkie małe hobby. W nieco ponad dekadę ten trend radykalnie się zmienił. Teraz blogi mogą zapewnić dochód w pełnym wymiarze godzin, i zaczynają wyglądają bardziej jak czasopisma cyfrowe.

Spójrz na oryginalny projekt TechCruncha, kiedy po raz pierwszy został uruchomiony w 2006 roku?

Teraz spójrz na aktualną stronę główną Techcrunch w 2017 roku:

To nie tylko wygląda jak magazyn, to też działa jak jeden. TechCrunch publikuje dziesiątki (jeśli nie setki) nowych postów każdego dnia. Są one pierwszym źródłem wiadomości startowych.

Trendy w stylu czasopism mają duże znaczenie. Strona główna używa duża opisana sekcja historii, każdy post ma swoją własną miniaturę, i strony artykułów centrum wokół nagłówka.

Kiedy się nad tym zastanowić, TechCrunch niewiele się zmienił. To jest wciąż “tylko blog”. Ale jest zaprojektowany i zarządzany jak magazyn, a to wszystko robi różnicę.

4. Tła wideo

Odtwarzanie dźwięku jest prawdopodobnie najbardziej denerwującym trendem w sieci. Ale zaskakująco, automatyczne odtwarzanie wideo (bez dźwięku) jest szybko rosnącą tendencją. Możesz to zauważyć na dziesiątkach witryn biznesowych, na których znajduje się tło wideo przejmuje cały ekran.

Naprawdę lubię tę technikę, gdy jest prawidłowo stosowana. Tak długo jak wideo odnosi się do witryny i nie blokuje zawartości, Myślę, że to fajny efekt w nagłówku.

5. Przyciski duchów

Tak jak minimalizm karmi się dalej w projektowanie stron internetowych pojawia się wiele nowych trendów. Jednym z takich trendów jest wzrost przycisków ducha które nie mają wewnętrznego wypełnienia, ale mają zewnętrzną granicę.

Przez większość czasu te przyciski kontrast z innymi przyciągać uwage. Możesz to zobaczyć na stronie głównej Instantmojo za pomocą zielonego przycisku rejestracji tuż obok przycisk ducha łączący się z demonstracją na żywo.

Inne strony zostały przyjęte styl projektowania czysto-duchowego do ich przycisków na całej powierzchni. Doskonałym przykładem jest nowy układ Bootstrap.

Myślę, że przyciski duchów działają na stronach, które skłaniać się ku minimalizmowi. Mogą nie pasować do każdej strony internetowej, ale widzę, że ich wykorzystanie rośnie z każdym rokiem.

6. Opcjonalne okno modalne

Okna modalne są bardzo irytujące i nie wyobrażam sobie, żeby jakikolwiek użytkownik ich polubił. jednak udowodniono, że zwiększają rejestrację, a marketerzy nie mogą ignorować technik, które działają.

Dlatego myślę, że modalne okna opt-in będą kontynuuj wspinaczkę w 2017 r.

Nie są moją ulubioną rzeczą i nigdy nie dodaję ich do moich stron internetowych. Ale jeśli celem jest zwiększenie liczby rejestracji, modalne okna są niezawodnym sposobem na przyspieszenie procesu.

Nowe wtyczki mogą nawet cel wyjścia który wyzwala modal za każdym razem, gdy użytkownik próbuje opuścić witrynę. Inne moduły pojawiają się po x sekundach lub są ustawione na otwarcie, gdy użytkownik przewinie w dół wystarczająco daleko.

Niezależnie od tego, jak uruchamiane są modały, jak są one projektowane lub jak się z nimi czujesz, myślę, że będą w pobliżu na dłuższą metę.

7. Ilustracja i grafika wektorowa

Dzięki nowym programom do projektowania wektorów, takim jak Sketch i Affinity Designer, nowa fala ilustratorów wkracza do sieci. Projektowanie graficzne i projektowanie interfejsów stale łączą się z bardziej multidyscyplinarnymi projektantami teraz niż kiedykolwiek wcześniej.

Oznacza to, że będziemy widzieć dużo więcej niestandardowych ikon i ilustracje na całej stronie w niedalekiej przyszłości.

Wielu ilustratorów ćwiczy artystów, więc myślę, że zobaczymy więcej pełnych stron tła wykonane za pomocą oprogramowania do cyfrowego malowania, renderowane szczegółowo jak grafika koncepcyjna.

8. Naprawiono przewijanie pasków bocznych

Pierwsza fala stałego projektu koncentruje się na paskach nawigacyjnych. Są one zbyt powszechne, zwłaszcza w responsywnych projektach, w których stały navbar powiela wrażenie natywnej aplikacji mobilnej.

Ale w 2017 roku spodziewam się zobaczyć jeszcze jeden lepki element-lepki pasek boczny.

Prawie każdy główny blog korzysta z tego rodzaju lepkiego paska bocznego. To zachowuje zawartość w widoku przez cały czas i zwiększa prawdopodobieństwo, że użytkownicy będą interakcja z zawartością paska bocznego.

Plus z dziesiątkami darmowych wtyczek jQuery, które mogą replikuj efekt sticky sidebar. Łatwiej niż kiedykolwiek ustawić to na dowolnej stronie internetowej.

9. Spis treści na stronie

Okazało się, że ostatnie studium przypadku Treść Longform przewyższa shortform zarówno w rankingach, jak i jakości zatrzymywania użytkowników. To prawda, że ​​nie zawsze jest to prawdą, ponieważ niektóre zapytania można szybko odpowiedzieć.

Ale dzięki znacznie większej zawartości treści w sieci, naturalnie jest to zobaczyć więcej artykułów dodanych do artykułów. Zobaczysz to na długich stronach z recenzjami lub w artykułach, które dzielą się na wymienione elementy.

Dodanie spisu treści może poprawić wrażenia użytkownika i pomóż przerwać czytanie na mniejsze kawałki. Spis treści może również pomóż w rankingu witryny! Jeśli Google uzna Twoją stronę za wartościową, możesz uzyskać linki skoku w wynikach wyszukiwania.

Może być prawdą, że ToC są teraz dość rzadkie. Ale spodziewam się, że ta tendencja wzrośnie w ciągu 2017 i wielu lat później.

10. Jasne kolorowe wzory

Nie jestem pewien, czy ten trend wyłonił się z minimalizmu lub jako reakcja na projekt materiałów Google. Ale natknąłem się na dziesiątki stron internetowych, które używają jasne pastelowe kolory zmieszane z innymi żywymi kolorami stworzyć bardzo fantazyjny wygląd.

Strona główna Rentberry to świetny przykład, który również wykorzystuje ton gradientów. I ma nawet wyżej wymienione “Wystepować w” odznaki umieszczone pod spodem! Dwa trendy w jednej witrynie.

Zauważysz, że kolory nie przenikaj całej strony, i są wyciszone innymi odcieniami bieli i szarości.

Widziałem ich wystarczająco dużo żywe schematy kolorów wierzyć, że rosną.

11. Animacje przewijania

Projektanci stron internetowych wiedzą o przewijaniu i o tym, jak strasznie jest. Jednak nie o to mi chodziło z tytułem “przewiń animacje”. Widziałem już wiele witryn ożywić zawartość po przewinięciu przez pewną część strony.

Ten trend jest głównie ogranicza się do stron startowych i firm SaaS które chcą pizzazz w swoim projekcie.

Nie mogę powiedzieć, czy jest to szczególnie przydatny trend. To na pewno chwyta oko ale nie sądzę, by oferowało to znacznie więcej niż estetyka. Mimo to jest to trend, który wydaje się szybko rozprzestrzeniać i kiedy używane oszczędnie może być naprawdę schludny.

12. Aplikacje jednostronicowe (SPA)

Aplikacje jednostronicowe to strony internetowe zbudowany wyłącznie za pomocą wywołań Ajax. JavaScript pobiera zawartość z serwera i ładuje go dynamicznie, więc strona nigdy nie odświeża.

Typowymi przykładami są witryny takie jak Gmail i Facebook. Ale z więcej technologii JS, Zauważyłem, że coraz więcej SPA rozwijało się cały czas. Heck, nawet CodePen można uznać za SPA.

Dzięki potężnym bibliotekom frontendowym, takim jak React & Aurelia, będzie jeszcze łatwiej stworzyć SPA od podstaw w 2017 roku.

13. Przełączalne paski wyszukiwania

Kiedyś były to pola wyszukiwania zawsze były widoczne gdzieś na stronie internetowej, na pasku bocznym lub w nawigacji. Ale ostatnio zauważyłem znacznie więcej pól wyszukiwania domyślnie ukryty, i musi być włączony do widoku.

Z pewnością przydatny trend oszczędzaj miejsce na stronie kiedy jeszcze dostęp do funkcji wyszukiwania. Jeśli nie masz pewności, gdzie umieścić formularz wyszukiwania w nowym projekcie, możesz rozważyć użycie pola przełączania połączonego z ikoną szkła powiększającego w nawigacji.

14. Wiadomości adblockowe

Nie można zaprzeczyć temu rośnie blokowanie reklam. Jedyne pytanie brzmi: w jaki sposób wydawcy poradzą sobie z tym trendem. Niektóre witryny grzecznie dodawać wiadomości do przestrzeni reklamowych jak Time.com. W Hongkiat zauważysz reklamy wewnętrzne, aby wypełnić pustkę ten link dalej w witrynie.

Jeden poważny trend, który widzę, rośnie bloki treści adblock. To jest technika do “blokuj blokowanie reklam”. Ta funkcja jest już dostępna w wielu dużych witrynach, takich jak Business Insider i Forbes. Niestety, boli to zarówno użytkownika, jak i wydawcę, a wszystko to wynika ze złej jakości technik reklamowych.

Ostatecznie nie ma znaczenia, kogo obwiniasz lub gdzie stoisz w debacie o blokowaniu reklam. Więcej osób instaluje wtyczki adblock i oczekuję więcej wydawców, aby się wycofać.

15. Czyste ikony SVG

Grafika SVG już przeniknęły do ​​sieci, ale z każdym dniem stają się coraz większe. I mam wrażenie, że 2017 będzie ogromny rok dla SVG w sieci.

Możesz znaleźć tysiące darmowe zestawy ikon SVG na stronach takich jak Flaticon, jeśli wiesz, jak szukać. Ale ty też możesz kod SVG w HTML, na przykład korzystając z tego przykładu na CodePen.

Tak więc projektanci mają sposób na używanie SVG, a programiści mają również możliwość korzystania z SVG. Nowoczesna obsługa przeglądarki wygląda dobrze na całej planszy, więc nie ma problemu z kompatybilnością. Wystarczy tylko projektanci rozpoznać moc SVG i zacznij z nich korzystać!

16. Adobe XD

Adobe wypuścił pełna wersja beta Adobe XD w 2016 r. i od tego czasu szybko się rozwija. Obecnie obsługuje komputery Mac i Windows, i jego w fazie testowania przed pełnym rozwinięciem.

Możesz wyszydzić pomysł jakiegokolwiek programu wyprzedzającego Sketch, ale Adobe jest głównym producentem oprogramowania kreatywnego z jakiegoś powodu. Plus Sketch to wciąż tylko Mac, podczas gdy Adobe jest chce wspierać wszystkich.

Mocno wierzę, że będziemy czytać dużo więcej o Adobe XD w nadchodzącym roku. Może stać się oprogramowaniem, do którego należy projektowanie makiet UI-więc możemy w końcu użyć Photoshopa jako narzędzia do obróbki zdjęć (zgodnie z przeznaczeniem).

Wraz z rozwojem nowego oprogramowania pojawia się kilkadziesiąt samouczki i darmowe zestawy GUI także. Możesz znaleźć wiele darmowych Adobe XD w Dribbble wraz z dwie nowe witryny Freebie skupione na XD Designmine i XD Guru.

17. Więcej menu hamburgerowych

Uwielbiam to lub nienawidzę hamburger jest tutaj, żeby zostać. Istnieje wiele badań użyteczności argumentuj przeciwko menu ukrytemu. Ale z małym ekranem i tylko wieloma alternatywami na razie nie ma lepszej alternatywy.

Ikony hamburgerów powoli stają się rozpoznawalnymi symbolami dla menu nawigacji. Podobnie jak ikona lupy “Szukaj”, ikona hamburgera z trzema prętami wkrótce stanie się synonimem “menu”.

Dotyczy to już większości osób znających się na technologii. Ale z każdym mijającym rokiem coraz więcej osób otrzymuje smartfony i zaczyna przeglądać mobilną sieć. I uczą się skojarz ten hamburger z menu nawigacyjnym bez końca w zasięgu wzroku.

18. Ikony funkcji produktu

Pisałem o tym nurcie na Treehouse, ale nie wspomniałem o tym ostatnio. I już w 2017 roku ten trend jest będzie ogromny. To chyba najczęstszy sposób udostępniaj funkcje produktu na stronie głównej.

Zaczynasz od tworzenie listy funkcji dla twojego produktu. Produktem może być wszystko, od programu SaaS po motyw WordPressa lub nawet fizyczny przedmiot.

Wtedy też możesz projektowanie niestandardowych ikon lub znajdź zestaw ikon reprezentować te cechy. Najlepiej jest unikać cech ogólnych Jak na przykład “niezawodny” lub “szybki” ponieważ większość ludzi oczekuje tego.

Zamiast tego wymień cechy to ma znaczenie. Jeśli jest to motyw premium WP, może to oznaczać, że jest responsywny, ile widżetów pochodzi lub jak działa menu.

Te ikony funkcji działają jak wizualizacje pomóc sprzedać każdą funkcję. Sam tekst jest trudne do spożycia ale wizualizacje są o wiele łatwiejsze zrozumieć na pierwszy rzut oka.

19. Powyżej-złożone CTA

Wezwanie do działania tradycyjnie zostały umieszczone na całej stronie internetowej. Ale z gośćmi spędzać mniej czasu na stronach internetowych, ważne jest posiadanie silnego CTA tuż nad fałdą.

Te wezwania do działania mogą być przyciskami, formularzami opt-in lub innymi danymi wejściowymi prowadź ludzi do podjęcia pewnych działań takie jak rejestracja lub czytanie posta na blogu.

Nie mogę ci powiedzieć, jak zaprojektować CTA lub jak zoptymalizować go do konwersji. Ale mogę powiedzieć, że trend wydaje się umieszczać te CTA nad fałdem iz wyraźnym widokiem dla wszystkich odwiedzających, aby zobaczyć.

20. Mniejsze obszary treści

Monitory stały się tak duże, że większość stron internetowych musi ustaw maksymalną szerokość. Dużo trudniej jest czytać zdania, gdy mają szerokość 2000px w porównaniu do tylko 700px.

Mniejsza zawartość to łatwiej konsumować, i ostatecznie tworzy lepsze wrażenia na stronach internetowych o dużej zawartości.

Myślę, że więcej projektantów zdaje sobie z tego sprawę i będzie powoli zmniejszyć rozmiar obszarów zawartości. Wolę maksymalną szerokość 750px, ale możesz iść tak mała jak 600px lub mniej.

Krótsze akapity z mniej zdań i mniejsze obszary treści będzie zawsze zwiększyć czytelność. Najważniejsze publikacje, takie jak NY Times, mogą odbiegać od własnych wytycznych strukturalnych. Ale w przypadku prostego bloga lub witryny firmy trend się zbliża dłuższe treści z mniejszymi akapitami i obszarami treści.

Zawijanie

Jest wiele innych trendów, których nie mogłem opisać w tym poście, ale myślę, że te 20 są najbardziej interesujące. W miarę postępu w 2017 r. Powinno być jasne, które trendy eksplodują, a które nie.

A jeśli masz inne pomysły lub sugestie dotyczące nadchodzących trendów w projektowaniu, możesz zostawić komentarz poniżej.