20 најтоплијих трендова који ће обликовати веб дизајн долазе 2016

Како се време напредује са годинама, многи нови трендови дизајна се појављују на хоризонту. Подручје веб дизајна се увијек мијења с новим алатима, радним процесима и најбољим праксама за изградњу корисних распореда.

Тешко је предвидети који ће точни трендови привући највећу пажњу. Ипак, новија историја показује шаблон трендова који расту као пожар. Организовао сам 20 јединствених трендова који су стечени током 2015. године и вероватно ће се наставити иу 2016. години.

1. Скица Апп за УИ дизајн

Скетцх брзо замењује Пхотосхоп за све задатке дизајнирања корисничког интерфејса у распону од ниске вјерности жичане мреже до хигх-фиделити моцкупс & ицон десигн.

Скетцх Апп је апликација за Мац само за веб и мобилне дизајнере. Она нуди глатко радно окружење за израду векторских елемената за било који интерфејс, али такође задржава многе функције које бисте очекивали од Пхотосхопа као што су текст ефекти и стилови слојева.

Иако нема доказа да ће Скетцх икада бити издан за Виндовс, још увек је постао вредан избор од стране ОС Кс корисника. Поједностављени радни процес и јефтинија цијена дају Адобе-у трку за свој новац. Ако Скетцх настави да пружа најбоље искуство дизајна корисничког интерфејса онда ће сигурно наставити да расте иу 2016. години и даље.

2. ИДЕ-и базирани на претраживачу

Десктоп ИДЕ-ови су присутни деценијама са опцијама од Нотепад ++ до Ксцоде и Висуал Студио. ИДЕ олакшава писање кода помоћу предлога и означавања синтаксе (између осталих функција).

Традиционално ИДЕ-ови су објављени као десктоп апликације. Током протеклих неколико година, дошло је до драматичног повећања ИДЕ-ова у цлоуд базираним претраживачима. За њих није потребан никакав други софтвер осим веб прегледача који омогућава дев-овима да пишу кодове са било ког рачунара са приступом Интернету.

Цлоуд ИДЕ-ови функционишу више као веб апликације где можете да сачувате исјечке кода на рачуну за дељење или личну меморију. ЦодеПен је један од најпопуларнијих ИДЕ-а са подршком за ХТМЛ / ЦСС / ЈС заједно са прилагођеном обрадом као што је Јаде / Хамл и ЛЕСС / СЦСС.

Мозилла Тхимбле је још један ИДЕ за почетнике који желе да науче како шифрирају. Такође Цодепли је одличан за тестирање специфичних одговарајућих оквира као што су Боотстрап или Зурб'с Фоундатион без потребе за преузимањем датотека.

3. Бесплатно Сасс / СЦСС Микинс

Препроцесори су већ годинама у тренду, али су тек недавно постали довољно популарни да се осећају свеприсутно у читавој области веб дизајна / развоја. Данас се чини чудним писати ванилин ЦСС када Сасс / СЦСС може да пружи много више.

Једна од предности је растућа понуда библиотека Сасс микин. Једноставни миксини су као исјечци кода или основне функције за генерисање поновљивог кода у ЦСС-у. Иако увек можете написати своје, многи програмери су били довољно љубазни да ослободе бесплатне микине на мрежи.

Неки микини долазе у библиотекама попут Боурбона, док други могу бити самостални. Покушајте да извршите претрагу у ГитХуб-у за Сасс / СЦСС миксине да бисте видели шта можете да пронађете.

4. Распореди картица

Изглед веб сајта је први пут популаризован од стране Пинтерест-а пре неколико година и од тада је постао тренд за веб-странице које садрже много садржаја. Бесплатни додаци попут јКуери Масонри могу се користити за опонашање овог стила изгледа анимираним картицама за различите висине и ширине.

Изглед картице најбоље се користи на страницама са много података које треба прегледати. Одредишна страница за Гоогле Нов користи распоред картица за оглашавање опционалних картица за апликацију Гоогле Нов.

Можете замислити изгледе картица као динамичније мреже са фокусом на минимизирање садржаја на најосновније елементе да би се пописало више ставки заједно. Онлине часописи као што су УГСМАГ и Тхе Нект Веб представљају савршене примјере изгледа картица који се користе за приказ недавног садржаја поста.

5. Цустом Екплаинер Видеос

Велике и мале компаније подједнако су преузеле тренд прилагођених видеоснимака. Они се често креирају са анимацијом попут Црази Егг примера. Али други видеозаписи се ослањају на снимке из стварног живота као што је Инстаграм Дирецт.

Сврха видео снимка је да покаже како неки производ или услуга функционира. Посетиоци могу да прегледају листу карактеристика и још увек немају појма како тај производ функционише. Видеозаписи разјашњавају све визуално и покривају важне ствари у само неколико минута.

Ако желите да се окушате у изради прилагођеног видео објашњавача, погледајте овај курс Удеми. То је детаљна студија која се фокусира на видеозаписе за дизајн одредишне странице.

6. Ливе Продуцт Превиевс

Дизајн одредишних страница је доживио невјеројатан раст који произлази из већих брзина Интернета и могућности прегледника. Један од главних трендова које сам приметио је додавање прегледа производа уживо на почетним страницама или прилагођеним одредишним страницама.

Узмите на пример Слацк-ову страницу производа. Садржи видео обилазак и векторску графику која покрива Слацк интерфејс. Ови прегледи производа имају за циљ да потенцијалним корисницима пруже увид у функционисање производа.

Вебидо је још један одличан пример са живом анимацијом која се игра на почетној страници. Ово омогућава посетиоцима да виде Вебидо у акцији без потребе да ручно демо производ. Али не морате увек да се ослањате на анимације за преглед производа. Ицоњар користи једноставан ПНГ сцреенсхот како би показао шта је производ и како ради.

7. Аутоматизовани тркачи задатака

Свијет развоја фронтенд-а се толико промијенио са неколико нових најбољих пракси за креирање веб-локација. Тренери / системи за изградњу као што су Гулп и Грунт користе се много чешће за низ задатака који су претходно захтевали мануелне напоре..

Аутоматизација је основа брзог обртања и избацивања квалитетног кода. Машине не праве грешке, тако да што више можете аутоматизовати са сигурношћу, мање проблема ћете имати (у теорији).

Да бисте сазнали више, погледајте овај пост Реддит објашњавајући како раде тркачи задатака. Ови алати у основи покрећу ЈС код који ће аутоматизовати делове вашег тока посла, било прилагођене ЈС или скрипте које су написали други.

8. Нативе ЈС Мобиле Аппс

Ја сам велики заговорник коришћења правих алата за тај посао. У случају развоја мобилних апликација то значи Јава за Андроид, Објецтиве-Ц / Свифт за иОС.

Али не желе сви да науче нови језик само да би направили мобилну апликацију. Срећом, постаје лакше за домаће апликације да буду креиране и компилиране са алтернативним библиотекама као што су НативеСцрипт или Реацт Нативе.

Празнина да постанете програмер за мобилне апликације скраћује се са могућношћу креирања мобилних апликација путем ЈаваСцрипт-а. ПхонеГап је још једна опција заснована на ХТМЛ / ЦСС / ЈС коду.

Иако се процес креирања веома разликује, ЈС брзо постаје решење за кодере који желе да изграде мобилне апликације без учења новог језика.

9. Алати за сарадњу за дизајн

Размена тренутних порука и групни разговор траје више од једне деценије. Међутим, ови ресурси су се традиционално ослањали на отворени текст са одређеном способношћу да приложе датотеке.

Нови тренд који се појављује је могућност дељења докумената о живом дизајну у оквиру апликација за ћаскање. Значајан је један пример где се коментари и коментари могу поставити на врх документа. Ово даје дизајнерима чист начин да директно поделе рад са свима у тиму.

Слацк је тренутно најпопуларнија цхат апликација која подржава многе сличне функције. Све већа Слацк корисничка база је одлучна у креирању проширења која увелико побољшавају Слацкове могућности и повезују се с другим производима као што су Хангоутс, МаилЦхимп, па чак и ВордПресс.

10. Респонсиве Фронтенд Фрамеворкс

Фронтендски оквири попут Боотстрап-а постоје већ годинама и настављају да буду корисни на пројектима како личним тако и професионалним. Одговарајући дизајн је натерао свој пут у оквире и креирао захтев за фронтенд код уместо само бацкенд-а (Дјанго, Ларавел, итд).

Када пређемо на 2016 годину, мислим да ћемо читати много више о одговорним оквирима сучеља и њиховој вриједности у веб пројектима. Многи развојни програмери жељно ишчекују издање Фондације 6 и јавно в1 издање Боотстрап 4.

Остали мање познати оквири које можете проверити су Гумби и Пуре ЦСС.

11. Већи фокус на УКС дизајн

Подручје дизајна корисничког искуства наставиће да се убрзано развија са више дизајнера и програмера који ће приметити. Дизајн корисничког интерфејса је део УКС дизајна, али није крајњи циљ. Кориснички интерфејс је средство за постизање циља, а крај је фантастично корисничко искуство.

Пре само пет година нисам био упознат са УКС-ом или како је примењен на дизајн интерфејса. Сада имамо ресурсе као што су УКС Стацк Екцханге и бесплатне УКС ебоокс. Ако не знате много о корисничком искуству, сада је најбоље време да проучите и научите како се УКС принципи могу применити на све облике дигиталних интерфејса.

12. Менаџери пакета

Управитељи дигиталних пакета су тако брзо порасли да су практично услов за савремени веб развој. Решења као што су Бовер и НПМ могу уштедети много времена на покретању нових пројеката.

За савладавање сваке нове технологије потребно је време и долази са кривуљом учења. Али ако постоји једна ствар коју би сваки фронтенд (или бацкенд) програмер требао знати, то је пакет менаџер. Они захтевају неко знање о командама терминала, али када се навикнете на процес никада нећете желети да се вратите.

13. Напредне УИ анимације

ЦСС3 транзиције су само почетак дугорочног тренда анимације на вебу. Сада имамо на десетине ЦСС и ЈаваСцрипт библиотека посвећених анимацији. Ствари које нисам ни сањао могуће су сада изграђене и доступне бесплатно ако знате где да их тражите.

Анимација није услов за добар дизајн. Али може направити добар дизајн у одличном дизајну када се правилно користи.

Пратите анимиране трендове за интерфејсе и погледајте шта можете одузети од различитих веб-локација. Запамтите да веб анимација није Диснеијев филм и треба је третирати са поштовањем. Користите анимацију лагано тако да побољша интерфејс без да постане сметња или ометајући елемент дизајна.

14. Десигнерс Леарнинг то Цоде

Тема "врућег дугмета" ове године је случај код дизајнера који уче кодирати. Неки дизајнери сматрају да није њихов посао да пишу кодове, док други сматрају да то постаје норма и да их треба прихватити.

Прочитао сам оштре расправе и фасцинантне постове о овој теми, која само изгледа као да црта емоционалне реакције. Добар дизајн је само лијепа слика без кода. Ипак, да би се фокусирао на оба, дизајнер треба да троши мање времена на вежбање заната.

Дакле, постоји ли коначан одговор? Неки би тврдили да се одрживост посла повећава код дизајнера који познају фронт-кодирање. А шта ако неко не жели да пише код? Да ли је вредно научити само да се такмичимо?

Осећам да је најјаснији одговор да радите шта год желите. Али изгледа да је ова тема још увијек на столу за многе дизајнере који ће вјероватно наставити расправу у 2016. години.

15. Фрее Онлине Тоолс & Вебаппс

Некада је било да се сви програми покрећу са радне површине без обзира на то шта вам је потребно. Али данас сам стално задивљен колико је веб-страница на располагању бесплатно.

Наћи ћете све од кодирања / декодирања УРЛ-а до потпуно бесплатног Маркдовн едитора. Чак и Гоогле диск је преузео Мицрософт Оффице производе у претраживач (поново, потпуно бесплатно).

Тренутни ниво рачунарске снаге и хомогених стандарда од веб претраживача нуде наизглед неограничене могућности. Сложени задаци као што је креирање резимеа до компресије слика могу се обрадити директно из прозора претраживача.

16. Раст Веб компоненти

Веб компоненте покушавају ријешити проблеме сложености за програмере. Веб-сајт ВебЦомпонентс има велике ресурсе и материјале који дају програмерима почетак у овој теми.

Ако нисте сигурни како да разумете модуларне веб компоненте, проверите овај пост да бисте сазнали више.

Док компоненте нису посебно дигнуте у маинстреам статус, о њима расправљају професионални програмери широм свијета. Гоогле је издао Полимер који је оквир за додавање веб компоненти преко ЈС-а и ХТМЛ-а.

Ово можда још није практично користити у великим пројектима клијената. Међутим, технологија је доступна и уз мало праксе можете лако савладати концепте. Да бисте сазнали више и видјели неколико узорака кода, можете прочитати овај пост ЦСС-Трицкс на модуларним веб компонентама.

17. Онлине ресурси за учење

Сви знамо да је сада најједноставније вријеме да научите било коју вјештину из удобности вашег рачунала. Чини се да интернетско тржиште учења експоненцијално расте с новим течајевима и веб страницама које се појављују сваке године.

Осећам се сигурније него икада раније да ћемо видети пораст онлине учења. Познати сајтови као што су Треехоусе и ЦодеСцхоол нуде невероватне курсеве поред нових сајтова као што су Битфоунтаин и Леарн-Верифиед.

Ако постоји тема коју желите да научите, вероватно постоји курс на мрежи - посебно ако желите да научите дигиталне технике као што је дизајн корисничког интерфејса или развој апликације.

18. Сервер-Сиде ЈаваСцрипт

Иако су прошле опције за ЈС на страни сервера, ниједна није прожела тако брзо као Ноде.јс. ЈаваСцрипт програмери су се заљубили у ову библиотеку и гледали су како се претварају у директну конкуренцију другим позадинским језицима као што су Питхон или ПХП.

Ноде омогућава програмерима да граде веб сајтове користећи један језик за оба фронтенд + бацкенд кода. А ресурси попут Ноде Пацкаге Манагер-а дају још већу вриједност Ноде.јс.

Из онога што могу да кажем, Ноде је још увек у успону и наставља да привлачи пажњу индустријских ентузијаста. Било да планирате да научите Ноде или не, нема сумње да ће и даље расти као главни тренд у 2016. години.

19. Особине веб-странице које подржавају додир

Смартпхоне претраживачи су увијек подржавали додирне функције за све веб странице како би одржале компатибилност унатраг. Ипак, недавно сам приметио више додатака и прилагођених функција доданих на веб сајтове са специфичним циљем руковања додирним догађајима.

Додаци као што су Пхотосвипе и Драгенд.јс изграђени су за руковање преласком и додиром на екранима осјетљивим на додир. Изгледа да веб програмери не само да граде одговорне веб странице, већ и веб-локације које подржавају додир.

Ако претражујете околину, наћи ћете неке заиста импресивне функције направљене за веб које се ослањају искључиво на додирне догађаје.

20. Дизајн материјала на Вебу

Гооглеово издање дизајна материјала било је огроман успех за Андроид дизајнере. Дизајн материјала се сматра дизајнерским језиком који треба да поједностави процес израде корисничких интерфејса за Андроид паметне телефоне.

Временом су веб дизајнери ово схватили и изградили читаве веб странице на основу Гооглеовог новог дизајнерског језика. Чини се да је тренд дизајна материјала прешао само мобилне апликације у свијет веб дизајна.

Људи који желе да изграде материјалне сајтове не морају чак ни да измишљају точак. Бесплатне библиотеке као што су Материал УИ и Материализе нуде прилагођене кодове за структурирање новог распореда на врху темеља дизајна материјала.

Завршни

Прегледавши ове трендове, требало би да буде јасно да видимо прави заједнички напор од стране веб заједнице да олакшамо процес израде веб сајтова. Сви желимо да уштедимо време у свакодневном раду.

Од оснивања веб-а видели смо да се многе технологије повећавају, да би их замениле боље алтернативе. Ови трендови из 2016. године теже за уједначенијим дизајнерским техникама које ће олакшати и знатно мање сложене веб сајтове.