20 Трендови дизања веб дизајна за праћење 2017
Прошла је још једна година и дизајнери гледају у будућност. Много обећавајуће трендове дизајна Прошле године сам покрио врхунске трендове у дизајну за 2016. годину и видјели смо их много промена од тада.
Дакле, за овај пост сам изабрао Топ 20 трендова које сам приметио добијање вуче у 2017. Ови трендови дизајна може да се примени на било који веб сајт, зато пазите на ове технике док се крећемо кроз 2017. годину и даље.
1. “Представљена у” бадгес
Стартупи, блогови, СааС пројекти и чак мала предузећа сада користе “као што је приказано у” бадгес на њиховим веб страницама. Ове значке често линк на чланке о маинстреам блоговима као што су ХуффПо, Форбес, ЦНН, Фок и друге новинске куће.
Циљ је да потврдите веб сајт и изградити поверење са новим посетиоцима. Лакше је некоме вјеровати веб-мјесту када виде да је то било у ауторитативним публикацијама.
У ствари, многи топ блогови ценим експозицију, тако да заиста помаже свима који су укључени. Ове велике локације често објавите своје логотипе онлине али такође можете пронаћи транспарентне ПНГ-ове или СВГ-ове само помоћу гооглинг-а.
Такође је препоручено да и ви линк назад на оригинални чланак помиње ваш сајт. То доказује Ви сте заиста споменути на сајту, и не само да правите тврдње.
2. Болд алл-цапс нав линкови
Видео сам десетине елегантних навигацијских изборника сви се ослањају на исти дизајн. Ови нав линкови разликују се по фонту и величини али обично имају сличне карактеристике, као такав:
- Све капе
- Болдед
- Једнако одвојено
- Поравнато у десни угао
Почетна страница Заззлеа је одличан примјер. Али можете наћи ово на многим веб сајтовима за покретање јер је то чист начин за дијељење веза које се лако читају и лако се прегледавају.
Већином повезујем овај тренд са предузећима и технолошким стартупима али и на блоговима.
Запамтите следећи пут када видите овај тренд јер је свуда. И очекујем да ће наставити да расте иу 2017. години.
3. Блогови у стилу магазина
Блоггинг је био такав концепт ниша још у раним 2000-им. Ако сте 2003. године водили блог, сматрали смо га слатким малим хобијем. За нешто више од једне деценије тај тренд се радикално променио. Сада блогови могу обезбиједи пуни приход, и почињу изгледа много више као дигитални часописи.
Осврните се на оригинални дизајн ТецхЦрунцх-а када је први пут покренут 2006. Изгледа као генерички ВордПресс блог?
Сада погледајте тренутну почетну страницу Тецхцрунцх-а 2017:
Не само то изгледа као магазин, такође функционише као један. ТецхЦрунцх објављује десетке (ако не и стотине) нових постова сваки дан. Они су изворни извор за почетне вијести.
Дизајн трендова у стилу магазина чини велику разлику. Почетна страница користи а велики део приче, сваки пост има своју сличицу, и странице чланка око наслова.
Када размислите, ТецхЦрунцх се није много променио. То је још увек “само блог”. Али дизајниран је и вођен као часопис, и то чини разлику.
4. Видео позадине
Звук са аутоматским репродуковањем је можда најнеугоднији тренд на вебу. Али изненађујуће, аутоматска репродукција видеа (без звука) је тренд који се брзо развија. То можете уочити на десетинама пословних локација на којима се налази видео позадина преузима цео екран.
Стварно ми се свиђа ова техника када се правилно примјењује. Докле год видео се односи на сајт и не омета садржај, Мислим да је то супер ефекат у заглављу.
5. Дугмад Гхост
Као минимализам храни даље у веб дизајн, појављују се многи нови трендови. Један такав тренд је успон дугмића духова који немају унутрашње пуњење, али имају вањску границу.
Већину времена ова дугмад контраст са другима да скрене пажњу. Ово можете видјети на почетној страници Инстантмојо-а помоћу зеленог гумба за пријаву налази се одмах поред дугме духова које се повезује са демо-ом уживо.
Остале локације су усвојене стил дизајна чисто духова на њихова дугмад широм света. Одличан пример је нови Боотстрап распоред.
Мислим да гхост тастери раде на сајтовима наслонити се на минимализам. Могуће је да не одговарају за сваку веб страницу, али видим да се њихова употреба повећава сваке године.
6. Модал прозори опт-инс
Модални прозори су веома досадни, и не могу да замислим да би им се свидио било који корисник. Међутим доказано је да повећавају пријаве, и трговци не могу игнорисати технике које функционишу.
Зато мислим да ће модални опт-ин прозори бити настави се пењати 2017.
Они нису моја омиљена ствар и никада их не додајем на своје веб странице. Али ако је циљ да се повећају пријаве онда су модални прозори сигуран начин да се ствари покрену.
Нови додаци могу чак и циљна излазна намера која активира модал кад год корисник покуша да напусти локацију. Остали модали се појављују након к секунди или су постављени да се отворе када се корисник довољно брзо помери.
Без обзира на то како се модали покрећу, како су дизајнирани или како се осјећате у вези с њима, мислим да ће бити ту за дуги пут.
7. Илустрација и векторска уметност
Са новим векторским програмима као што су Скетцх и Аффинити Десигнер, појављује се нови талас илустратора који се пробијају на веб. Графички дизајн и дизајн интерфејса константно се спајају с више мултидисциплинарних дизајнера него икада раније.
То значи да ћемо видјети много више прилагођених икона и илустрације на целој страници у блиској будућности.
Многи илустратори се баве уметницима, тако да мислим да ћемо видети више потпуних позадина страница направљен дигиталним софтвером за сликање, детаљно приказан као концепт арт.
8. Фиксно померање бочних трака
Први талас фиксног дизајна фокусиран на навигацијске траке. Све су то превише уобичајене, поготово у одговарајућим дизајну где је фиксни навбар реплицира осећај изворне мобилне апликације.
Али у 2017. очекујем да видим још један елемент-лепљива бочна трака.
Скоро сваки велики блог користи ову врсту лепљиве бочне траке. То задржава садржај у приказу у сваком тренутку и повећава вјероватноћу да ће корисници то учинити интеракцију са садржајем на бочној траци.
Плус са десетинама бесплатних јКуери додатака који могу поновите ефекат лепљиве бочне траке. Лакше је него икад поставити ово на било коју веб локацију.
9. Садржај на страници
Недавна студија случаја је то открила лонгформ садржај надмашује схортформ у рангирању и квалитету задржавања корисника. То није увек тачно, јер се на неке упите може брзо одговорити.
Али са много дугачким садржајем на вебу, то је природно видети више садржаја у чланцима. Видећете ово на дугим сајтовима за прегледање или у чланцима који се деле на наведене ставке.
Додавање садржаја може побољшајте корисничко искуство и помоћи разбити читање у мање комаде. Садржај такође може помогните да се ваш сајт боље рангира! Ако Гоогле пронађе вашу страницу вриједном, можда бисте могли добити скок везе у резултатима претраге.
Можда је тачно да су ТоЦ-ови прилично оскудни управо сада. Али очекујем да ће овај тренд експлодирати током 2017. и много година касније.
10. Светле шарене дизајне
Нисам сигуран да ли је овај тренд настао из минимализма или као реакција на Гооглеов дизајн материјала. Али наишао сам на десетине веб страница које користе свијетле пастелне боје помијешане с другим живим нијансама да створи веома маштовит изглед.
Рентберри хомепаге је одличан пример који такође користи тона градијента. И то чак има и горе поменуто “Представљена у” беџеви смјештени испод! Два тренда на једном сајту.
Приметићете боје немојте прожети целу страницу, и пригушени су другим нијансама беле и сиве.
Видио сам доста ових схеме живих боја да верују да су у успону.
11. Листајте анимације
Веб дизајнери знају за скрол-јацкинг и колико је страшно. Међутим, то није оно што сам мислио са насловом “сцролл аниматионс”. Видио сам многе сајтове који су сада анимирајте садржај у приказ када се померате поред одређеног дела странице.
Овај тренд је углавном ограничена на почетне странице и компаније СааС који желе пиззаз у свом дизајну.
Не могу рећи да ли је то посебно користан тренд. То сигурно зграби око али не мислим да нуди много више од естетике. Ипак, то је тренд који се брзо шири и када користи штедљиво може бити стварно уредно.
12. Једна страница апликације (СПА)
Апликације на једној страници су веб сајтови изграђен искључиво са Ајак позивима. ЈаваСцрипт извлачи садржај са сервера и динамички га учитава, тако да страница никад не освежава.
Уобичајени примери су локације као што су Гмаил и Фацебоок. Али са више ЈС технологије, Примијетио сам да се све више и више СПА-а стално развија. Чак и ЦодеПен се може сматрати СПА.
Са моћним библиотекама фронта као што су Реацт & Аурелиа, биће још лакше креирати СПА од нуле у 2017. години.
13. Променљиве траке за претрагу
Некада је то било поље за претрагу увек су били на видику негдје на веб страници, било у бочној траци или навигацији. Али у последње време сам приметио много више поља за претраживање подразумевано скривено, и мора бити укључен у приказ.
Свакако да је то згодан тренд уштедите простор на страници док је још одржавање приступачности функције претраживања. Ако нисте сигурни где да поставите образац за претрагу у новом дизајну, размислите о коришћењу преклопног поља повезаног са иконом повећала на навигацији.
14. Адблоцк мессагес
То се не може порећи Блокирање огласа је у порасту. Једино питање је како ће издавачи водити овај тренд. Неке локације уљудно додајте поруке у огласне просторе лике Тиме.цом. На Хонгкиату, приметићете интерни огласи који попуњавају празнину који повезују даље у сајт.
Један озбиљан тренд који видим јесте повећање блокови садржаја адблоцк. То је техника “блокирајте блокаторе огласа”. Ова функција већ постоји на многим великим сајтовима као што су Бусинесс Инсидер и Форбес. Нажалост, то боли и корисника и издавача, а све то произилази из лоше квалитете рекламних техника.
На крају крајева, није битно тко сте криви или гдје стојите у дебати о блокирању огласа. Више људи инсталира додатке адблоцк-а, а ја очекујем више издавача да се повуку.
15. Пуре СВГ иконе
СВГ грапхицс већ су се продрли у веб, али они из дана у дан постају све већи. И имам осјећај да ће 2017. бити велика година за СВГ на Интернету.
Можете пронаћи хиљаде бесплатне СВГ иконе на сајтовима као што је Флатицон ако знате како да претражујете. Али можете и ви шифрирајте СВГ у ХТМЛ, на пример, користећи овај пример на ЦодеПен.
Дакле, дизајнери имају начин да користе СВГ-ове, а програмери имају и начин да користе СВГ-ове. Модерна подршка за прегледач изгледа добро преко табле, тако да нема проблема са компатибилношћу. Све што је потребно је довољно дизајнерима препознају снагу СВГ-а и почните да их користите!
16. Адобе КСД
Адобе угаси пуна бета верзија Адобе КСД-а у 2016, и од тада је брзо расла. Тренутно подржава и Мац и Виндовс, и његове у фази тестирања пре него што се потпуно извуче.
Можете се ругати идеји било ког програма који прескаче Скетцх, али Адобе је главна софтверска компанија креативног рада с разлогом. Плус Скетцх је још увек Мац-а само док је Адобе у потрази за подршком свима.
Чврсто верујем да ћемо у наредној години много више читати о Адобе КСД-у. Он може постати го-то софтваре за дизајнирање УИ макета-тако да коначно можемо да користимо Пхотосхоп као алатку за манипулацију фотографијама (као што је предвиђено).
Са развојем новог софтвера долази десетина туториали и фреебие ГУИ комплети такође. Можете наћи много Адобе КСД фреебиес у Дрибббле-у заједно са две нове КСД-фокусиране фреебие странице Десигнмине и КСД Гуру.
17. Више менија хамбургера
Волите га или мрзим хамбургер је ту да остане. Постоји много студија о употребљивости расправљати против менија скривених од погледа. Али са малим екраном и само толико алтернатива, за сада нема боље алтернативе.
Иконе хамбургера су полако постају препознатљиви симболи за навигационе меније. Баш као што имплицира икона повећала “Претрага”, икона хамбургера са три траке ускоро ће бити синоним “мени”.
Ово је већ истина за већину људи који су технички паметнији. Али сваке године све више људи добија паметне телефоне и почиње да претражује мобилни веб. И уче повезати тај хамбургер са навигационим менијем без краја на видику.
18. Иконе функција производа
Писао сам о овом тренду на Треехоусе-у, али га недавно нисам споменуо. И одлазак у 2017. је овај тренд ће бити огроман. То је вероватно најчешћи начин делите функције производа на почетној страници.
Почињете прављења листе карактеристика за ваш производ. Производ може бити било шта, од програма СааС до ВордПресс теме или чак физичке ставке.
Онда можеш и ти дизајн прилагођених икона или пронађите сет икона да представи ове карактеристике. То је најбоље избегавајте генеричке карактеристике као такав “поуздан” или “брзо” јер већина људи то очекује.
Уместо тога, наведите функције то је заправо битно. Ако је то врхунска ВП тема, можда је листа која одговара, колико видгета има, или како мени функционише.
Ове иконе функција радите као визуелно да помогне продати сваку карактеристику. Само текст је тешко конзумирати али визуелне слике су много лакше схватите на први поглед.
19. Повишени ЦТА
Позив на акције традиционално су постављени све преко веб сајта. Али са посетиоцима мање времена проводите на веб страницама, од кључног је значаја имати снажан ЦТА тачно изнад прегиба.
Ови позиви на акције могу бити дугмад, опт-ин обрасци или други улази у навести људе да предузму неку акцију као што је пријављивање или читање поста на блогу.
Не могу вам рећи како да дизајнирате ЦТА или како да га оптимизујете за конверзије. Али могу да кажем да се чини да овај тренд поставља ове ЦТА изнад прегиба иу јасном погледу за све посетиоце.
20. Мање области садржаја
Монитори су постали тако велики да већина сајтова мора подесите максималну ширину. Много је теже читати реченице када су 2000пк ширине у поређењу са само 700 пиксела.
Мањи садржај је лакше конзумирати, и на крају ствара боље искуство на садржајним веб-локацијама.
Мислим да више дизајнера ово схвата и да ће полако смањити величину области садржаја. Радије бих максималну ширину од 750пк, али можете ићи као мали као 600пк или мање.
Краћи параграфи са мање реченица и мање области садржаја ће увек повећати читљивост. Главне публикације, као што је НИ Тимес, могу одступати од својих структурних смјерница. Али за једноставан блог или пословни сајт, тренд се креће ка дужи садржај са мањим параграфима и областима садржаја.
Окончање
Постоје многи други трендови које нисам могао покрити у овом посту, али мислим да је тих 20 најзанимљивијих. Како напредујемо у 2017. години, требало би бити јасно који трендови експлодирају и који нису.
А ако имате друге идеје или предлоге за надолазеће трендове у дизајну, слободно оставите коментар испод.
