20 Нарастващи тенденции в уеб дизайна, които трябва да гледате през 2017 година
Измина още една година и дизайнерите гледат напред към бъдещето. много обещаващи тенденции в дизайна Миналата година аз обхванах най-добрите тенденции в дизайна през 2016 г. и видяхме много промени от тогава.
Така че, за този пост аз избрах Топ 20 тенденции което забелязах набира скорост през 2017 година. Тези тенденции в дизайна може да се прилага за всеки уебсайт, така че пазете очите си за тези техники, докато се движим през 2017-а и след това.
1. “Представени в” значки
Стартиращи фирми, блогове, SaaS проекти и дори малки предприятия сега използват “както е показано в” значки на техните уебсайтове. Тези значки често връзка към статии в основните блогове като HuffPo, Forbes, CNN, Fox и други новинарски обекти.
Целта е да утвърждаване на уебсайт и изгради доверие с нови посетители. По-лесно е някой да се довери на уебсайт, когато може да види, че е бил споменати в авторитетни публикации.
Всъщност много топ блогове оценявам експозицията, така че наистина помага на всички участници. Тези големи сайтове често пуснете своите логотипи онлайн но също така можете да намерите прозрачни PNG или SVGs само чрез googling наоколо.
Също така ви препоръчваме връзката към оригиналната статия споменаване на сайта Ви. Това доказва това наистина сте споменати на сайта, а вие не само правите претенции.
2. Bold all-caps nav връзки
Виждал съм десетки елегантни навигационни менюта всички, които разчитат на същия дизайн. Тези навигационни връзки варират по шрифт и размер но те обикновено имат подобни характеристики, като:
- Всички шапки
- с удебелен шрифт
- Равномерно разпределени
- Подравнен в десния ъгъл
Началната страница на Zazzle е чудесен пример. Но можете да намерите това на много стартиращи уебсайтове защото е чист начин за споделяне на връзки които са лесни за четене и лесни за разглеждане.
Най-често свързвам тази тенденция с фирми и технологични стартиращи фирми но може да бъде преобладаващо и в блоговете.
Забележете следващия път, когато видите тази тенденция, защото тя е навсякъде. И очаквам да продължи да расте и през 2017 година.
3. Списания в стил блогове
Blogging е такава ниша концепция още в началото на 2000-те. Ако сте пуснали блог през 2003 г., то е смятано за сладко малко хоби. За малко повече от десетилетие тази тенденция се промени радикално. Сега блоговете могат осигуряват доходи на пълно работно време, и те започват изглеждат много повече като цифрови списания.
Погледнете назад към оригиналния дизайн на TechCrunch, когато за първи път стартира през 2006 г. Изглежда като общ блог на WordPress?
Сега вижте текущата начална страница на Techcrunch през 2017 г .:
Не само изглежда като списание, то също функции като една. TechCrunch публикува десетки (ако не и стотици) нови публикации всеки ден. Те са източникът на първо място за стартиращи новини.
Тенденциите в стила на списанието имат голямо значение. Началната страница използва a голяма част от историята, всеки пост има своя миниатюра, и страниците на статиите център около заглавието.
Когато мислите за това, TechCrunch не се е променил много. Все още е “само блог”. Но Той е проектиран и управляван като списание, и това прави всичко различно.
4. Видео фонове
Звукът за автоматично възпроизвеждане е може би най-дразнещата тенденция в мрежата. Но изненадващо, автоматично възпроизвеждане на видеоклип (без звук) е бързо нарастваща тенденция. Можете да забележите това на десетки бизнес сайтове, където има видео фон поема целия екран.
Наистина ми харесва тази техника, когато се прилага правилно. Докато видео се отнася за сайта и не пречи на съдържанието, Мисля, че това е страхотен ефект, който можете да използвате в заглавната си част.
5. Бутони за призрак
Като минимализмът се храни по-нататък В уеб дизайна се появяват много нови тенденции. Една такава тенденция е покачване на призрак които нямат вътрешен пълнеж, но имат външна граница.
Най-често тези бутони контраст с другите да привлече вниманието. Можете да видите това на началната страница на Instantmojo със зеления бутон за регистрация намира се точно до него бутона за призрак, който се свързва с демонстрация на живо.
Други сайтове са приети стил на чисто призрак към техните бутони в цялата страна. Чудесен пример тук е новото оформление на Bootstrap.
Мисля, че призрачните бутони работят на сайтове склонност към минимализма. Те не могат да бъдат много подходящи за всеки уебсайт, но виждам как тяхната употреба нараства с всяка изминала година.
6. Опции за модален прозорец
Модалните прозорци са супер досадни и не мога да си представя, че всеки потребител би ги харесал. въпреки това доказано е, че увеличават регистрациите, и маркетолозите не могат да игнорират техниките, които работят.
Ето защо мисля, че модалните опции за включване ще бъдат продължавате да се изкачвате през 2017 г..
Те не са моето любимо нещо и никога не ги добавям към моите уебсайтове. Но ако целта е да се увеличат регистрациите, тогава модалните прозорци са сигурен начин да се подвижат нещата.
Новите плъгини могат дори цел на изхода за цел който задейства модален когато потребителят се опита да напусне сайта. Другите модели се появяват след x секунди или са настроени да се отварят, когато потребителят се премести достатъчно далеч.
Независимо от начина, по който се задействат моделите, как са проектирани, или как се чувствате по отношение на тях, мисля, че ще са наблизо.
7. Илюстрация и векторно изкуство
С новите програми за проектиране на вектор, като Sketch и Affinity Designer, има нова вълна от илюстратори, които се срутват в мрежата. Графичният дизайн и дизайна на интерфейса непрекъснато се сливат с повече мултидисциплинарни дизайнери, отколкото някога.
Това означава, че ще видим много повече персонализирани икони и илюстрации на цялата страница в близко бъдеще.
Много илюстратори са практикувани художници, така че мисля, че ще видим по-пълни страници на страници изработен с цифров софтуер за рисуване, изработен подробно като концептуално изкуство.
8. Фиксирани странични ленти за превъртане
Първата вълна на фиксиран дизайн фокусирани върху ленти за навигация. Те са твърде често срещани, особено в отзивчиви проекти, където фиксираната навигационна лента възпроизвежда усещането за собствено мобилно приложение.
Но през 2017 г. очаквам да видя още един лепкав елемент-лепкавата странична лента.
Почти всеки основен блог използва този вид лепкава странична лента. То запазва съдържанието по всяко време и увеличава вероятността потребителите да го направят взаимодействат със съдържанието в страничната лента.
Плюс с десетки безплатни jQuery плъгини, които могат повторете ефекта от лепкавата странична лента. По-лесно от всякога е да го настроите на всеки уебсайт.
9. Съдържание на страницата
Неотдавнашно проучване на случая установи това съдържанието на дълга форма превъзхожда кратката форма както в класацията, така и в качеството на запазване на потребителите. Разбира се, това не винаги е вярно, защото на някои заявки може да се отговори бързо.
Но с много по-дълго съдържание в мрежата е естествено да се види повече статии, добавени в статии. Ще видите това на дълги сайтове за преглед или в статии, които се разделят на изброени елементи.
Добавянето на съдържанието може подобряване на потребителския опит и помощ прекъснете четенето на по-малки парчета. Съдържанието може също помогнете на сайта ви да се класира по-добре! Ако Google намери вашата страница ценна, бихте могли получите скок връзки в резултатите от търсенето.
Може да е вярно, че ToCs в момента са доста оскъдни. Но аз очаквам тази тенденция да се взриви през 2017 г. и много години след това.
10. Ярки цветни дизайни
Не съм сигурен дали тази тенденция се е появила в резултат на минимализма или като реакция на материалния дизайн на Google. Но аз се натъкнах на десетки сайтове, които използват ярки пастелни цветове, смесени с други живи оттенъци да създаде много причудлив външен вид.
Началната страница на Rentberry е чудесен пример, който също използва тонове наклони. И дори има споменатото по-горе “Представени в” значки отдолу! Две тенденции на един сайт.
Ще забележите, че цветовете не прониквайте в цялата страница, и са приглушени с други нюанси на бяло и сиво.
Виждал съм достатъчно от тях ярки цветови схеми да вярвам, че те са във възход.
11. Превъртете анимациите
Уеб дизайнерите знаят за прескачането и колко ужасно е. Но това не е това, което имах предвид със заглавието “превъртайте анимации”. Виждал съм много сайтове сега анимирайте съдържанието когато преминете през определена част от страницата.
Тази тенденция е най-вече ограничено до началните страници и компаниите на SaaS които искат малко pizzazz в техния дизайн.
Не мога да кажа дали това е особено полезна тенденция. Това със сигурност не хваща окото но не мисля, че предлага много повече от естетиката. Все пак, това е тенденция, която изглежда се разпространява бързо и кога използвано пестеливо може да бъде наистина чист.
12. Приложения на една страница (SPA)
Приложенията на една страница са уебсайтове построен изцяло с Ajax разговори. JavaScript изтегля съдържание от сървър и зарежда я динамично, така че страницата никога не освежава.
Често срещани примери са сайтове като Gmail и Facebook. Но със повече JS технология, Забелязвам, че все повече и повече СЗЗ се развиват постоянно. По дяволите, дори CodePen може да се счита за СПА.
С мощни библиотеки за интерфейси като React & Aurelia, ще бъде още по-лесно да създадете SPA от нулата през 2017 г..
13. Превключващи се ленти за търсене
В миналото това беше полето за търсене винаги са били в очите някъде в уеб страница, или в страничната лента, или в навигацията. Но напоследък забелязах много повече полета за търсене скрито по подразбиране, и трябва да бъде включен в изгледа.
Със сигурност е удобна тенденция спестите място на страницата докато е все още поддържане на функцията за търсене достъпна. Ако не сте сигурни къде да поставите формуляр за търсене в нов дизайн, можете да помислите да използвате поле за превключване, свързано с икона с лупа в навигацията.
14. Adblock messages
Не може да се отрече фактът блокирането на рекламите се увеличава. Единственият въпрос е как издателите ще се справят с тази тенденция. Някои сайтове учтиво да добавяте съобщения в рекламните пространства като Time.com. На Hongkiat ще забележите вътрешни реклами за запълване на празнината които се свързват по-нататък в сайта.
Една сериозна тенденция, която виждам, е увеличаване блокове със съдържание на adblock. Това е техника “блокирайте рекламните блокери”. Тази функция вече съществува на много големи сайтове като Business Insider и Forbes. За съжаление, това вреди както на потребителя, така и на издателя, и всичко това произтича от лошото качество на рекламните техники.
В крайна сметка, няма значение кой обвинявате или къде стоите в дебата за блокиране на реклами. Повече хора инсталират плъгини за adblock и очаквам повече издатели да отблъснат.
15. Чисти икони на SVG
SVG графика вече са проникнали в мрежата, но с всеки изминал ден се увеличават. И имам чувството, че 2017 ще бъде огромна година за SVG в мрежата.
Можете да намерите хиляди безплатни SVG икони на сайтове като Flaticon, ако знаете как да търсите. Но вие също можете кодирайте SVG в HTML, например чрез използване на този пример за CodePen.
Така че, дизайнерите имат начин да използват SVG, а разработчиците имат и начин да използват SVG. Съвременната поддръжка на браузъра изглежда добре на борда, така че няма проблем със съвместимостта. Всичко, което е необходимо, е достатъчно дизайнери признават силата на SVG и започнете да ги използвате!
16. Adobe XD
Adobe отложи пълна бета версия на Adobe XD през 2016 г. и оттогава бързо се разраства. Понастоящем поддържа Mac и Windows, и е в етапа на тестване преди напълно да се разточва.
Може да се присмивате на идеята за всяка програма, която изпреварва Sketch, но Adobe е основната софтуерна компания за творческа работа с определена причина. Плюс Sketch е все още само Mac, докато Adobe е в подкрепа на всички.
Твърдо вярвам, че ще четем много повече за Adobe XD през следващата година. Той може да се превърне в софтуер за преминаване към проектиране на потребителски интерфейси-така че най-накрая можем да използваме Photoshop като инструмент за манипулиране на снимки (както е предвидено).
С нарастването на новия софтуер идва десетки уроци и безплатни GUI комплекти също. Можете да намерите много Adobe XD freebies в Dribbble заедно с две нови XD-фокусирани freebie сайтове Designmine и XD гуру.
17. Още менюта за хамбургер
Обичайте го или го мразя хамбургерът е тук, за да остане. Има много проучвания за ползваемост, които спорят срещу скритите от погледа менюта. Но с малък екран и само с много алтернативи за момента няма по-добра алтернатива.
Иконите на хамбургер са бавно стават разпознаваеми символи за менюта за навигация. Също като икона с лупа “Търсене”, иконата за хамбургери с три бара скоро ще бъде синоним на “меню”.
Това вече е вярно за повечето технологично разбирани хора. Но с всяка изминала година все повече хора получават смартфони и започват да разглеждат мобилната мрежа. И те се учат свържете този хамбургер с навигационното меню без край.
18. Икони на функциите на продукта
Написах за тази тенденция в Treehouse, но не го споменавам наскоро. И през 2017 г. тази тенденция е ще бъде огромна. Това е може би най-често срещаният начин споделяйте функциите на продукта на начална страница.
Започваш от съставяне на списък с функции за вашия продукт. Продуктът може да бъде всичко от програма SaaS до WordPress тема или дори физически елемент.
Тогава можете и вие дизайн потребителски икони или намери набор от икони за представяне на тези характеристики. Най-добре е избягвайте общи характеристики като “надежден” или “бърз” защото повечето хора очакват тези неща.
Вместо това, избройте функции това всъщност е от значение. Ако това е премиум WP тема, може би списъкът е отговорен, колко джаджи идват с него или как работи менюто.
Тези икони на функции работа като визуализация да помогна продава всяка функция. Само текстът е трудно за консумация но визуалните ефекти са много по-лесни разбирам с един поглед.
19. CTAs по-горе
Покана към действия традиционно са били поставяни цял сайт. Но с посетители прекарват по-малко време в уебсайтове, от решаващо значение е да имаш силен CTA точно над гънките.
Тези подканващи действия могат да бъдат бутони, формуляри за включване или други входове за да кара хората да предприемат някои действия като записване или четене на публикация в блога.
Не мога да ви кажа как да проектирате CTA или как да го оптимизирате за реализации. Но мога да кажа, че тенденцията изглежда поставя тези CTAs над гънките и в ясен изглед за всички посетители.
20. По-малки области на съдържание
Мониторите са станали толкова големи, че повечето сайтове трябва задайте максимална ширина. Много по-трудно е да се четат изречения, когато те са с ширина 2000 пиксела в сравнение с ширина само 700 пиксела.
По-малко съдържание е по-лесно за консумация, и в крайна сметка създава по-добро преживяване на уебсайтовете, съдържащи много съдържание.
Мисля, че повече дизайнери осъзнават това и ще бавно намаляване на размера на областите на тяхното съдържание. Предпочитам максимална ширина от 750px, но бихте могли да отидете толкова малко, колкото 600px или по-малко.
По-кратки параграфи с по-малко изречения и по-малки области на съдържание винаги ще повиши четивността. Основните публикации като NY Times могат да се отклонят от собствените си структурни насоки. Но за обикновен блог или бизнес сайт, тенденцията се движи към по-продължително съдържание с по-малки параграфи и области със съдържание.
Обобщавайки
Има много други тенденции, които не можах да покрия в този пост, но мисля, че тези 20 са най-интересните. С напредването си през 2017 г. трябва да стане ясно кои тенденции се взривяват и кои не са.
И ако имате други идеи или предложения за предстоящи тенденции в дизайна, можете да оставите коментар по-долу.
