20-те най-горещи тенденции, които ще оформят уеб дизайна идват 2016

С напредването на времето с всяка изминала година на хоризонта се появяват много нови тенденции в дизайна. Полето на уеб дизайна винаги се променя с нови инструменти, работни процеси и най-добри практики за изграждане на използваеми оформления.

Трудно е да се предвиди кои точно тенденции ще привлекат най-голямо внимание. Но съвременната история показва модел на тенденции, които растат като горски пожар. Организирал съм 20 уникални тенденции, които са натрупали сила през 2015 г. и вероятно ще продължат и през 2016 година.

1. Скица App за UI дизайн

Sketch бързо замества Photoshop за всички задачи на UI дизайна, вариращи от телени рамки с ниска прецизност да се модели с висока прецизност и дизайн на икони.

Sketch App е приложение само за Mac, създадено специално за уеб и мобилни дизайнери. Той предлага по-гладка работна среда за изработване на векторни елементи за всеки интерфейс, но също така запазва много функции, които бихте очаквали от Photoshop като текстови ефекти и стилове на слоеве.

Въпреки че няма доказателства, че Sketch някога ще бъде издаден за Windows, той все още се превръща в ценен избор от потребителите на OS X. Опростеният работен поток и по-евтиният ценови маркер дават възможност на Adobe да управлява парите си. Ако Sketch продължава да осигурява най-доброто изживяване при дизайна на потребителския интерфейс, то тогава със сигурност ще продължи да расте и през 2016 г. и след това.

2. Браузърни IDE

Десктопните IDE съществуват от десетилетия с опции, вариращи от Notepad ++ до Xcode и Visual Studio. IDE улеснява писането на код с предложения и подчертаване на синтаксиса (наред с други функции).

Но традиционно IDE са пуснати като настолни приложения. През последните няколко години забелязахме рязко покачване на браузърните облачни IDE. Те не изискват друг софтуер, освен уеб браузър, който позволява на разработчиците да пишат код от всеки компютър с достъп до интернет.

Облачните IDE функционират по-скоро като уеб приложения, където можете да запазите кодови фрагменти в профила си за споделяне или лично съхранение. CodePen е един от най-популярните IDE с поддръжка на HTML / CSS / JS заедно с персонализирана предварителна обработка като Jade / Haml и LESS / SCSS.

Mozilla Thimble е друга IDE за начинаещи разработчици, които искат да се научат кодират. Също така Codeply е чудесно за тестване на специфични отзивчиви рамки като Bootstrap или Zurb's Foundation, без да е необходимо да изтегляте файлове.

3. Безплатно Sass / SCSS Mixins

Предпроцесорите са модерни от години, но едва наскоро станаха достатъчно популярни, за да се чувстват повсеместно в цялата област на уеб дизайна / разработката. Днес изглежда странно да пишете ванилов CSS, когато Sass / SCSS може да осигури много повече.

Едно от предимствата е нарастващото предлагане на библиотеки на Sass mixin. Обикновените миксини са като кодови фрагменти или основни функции за генериране на повторяем код в CSS. Въпреки че винаги можете да напишете свои собствени, много разработчици са били достатъчно любезни да пуснат безплатни онлайн смеси.

Някои миксини идват в библиотеки като Bourbon, докато други могат да бъдат самостоятелни елементи. Опитайте да направите търсене в GitHub за Sass / SCSS mixins, за да видите какво можете да намерите.

4. Оформления на карти

Оформленията на уебсайтове за първи път бяха популяризирани от Pinterest преди няколко години и оттогава са се превърнали в тенденция за съдържателни уеб страници. Безплатни приставки като jQuery Masonry могат да се използват за имитиране на този стил на оформление с анимирани карти за различни височини и ширини.

Оформлението на картата се използва най-добре на страници с много данни, които трябва да могат да бъдат сканирани. Целевата страница за Google Now използва оформление на картата, за да рекламира допълнителни карти за приложението Google Now.

Можете да мислите за оформленията на карти като за по-динамични решетки с фокус върху минимизиране на съдържанието до най-важните неща, за да изброите повече елементи заедно. Онлайн списанията като UGSMAG и The Next Web са перфектни примери за оформления на карти, използвани за показване на последното съдържание.

5. Потребителски видеоклипове на Explainer

Както големите, така и малките компании са се насочили към тенденцията на видеоклиповете на обяснителните. Те често се създават с анимация като например Crazy Egg. Но други видеоклипове разчитат на реални кадри като Instagram Direct.

Целта на видеото на обяснителя е да покаже как работи даден продукт или услуга. Посетителите могат да преглеждат списък с функции и все още нямат представа как работи продуктът. Видеоклипове изясняват всичко визуално и покриват важните неща само за няколко минути.

Ако искате да опитате ръката си в правенето на потребителски обяснителни видеоклипове, проверете този курс на Udemy. Това е задълбочено проучване, фокусирано върху видеоклипове за дизайн на целевата страница.

6. Преглед на продуктите на живо

Дизайнът на целевата страница показва невероятен растеж, произтичащ от по-високите скорости на интернет и възможностите на браузъра. Една от основните тенденции, която забелязах, е добавянето на визуализации на продукти на живо на началните страници или персонализираните целеви страници.

Вземете например продуктовата страница на Slack. Той разполага с видео обиколка и векторни графики, покриващи интерфейса на Slack. Тези визуализации на продукти са предназначени да дадат на потенциалните потребители възможност да видят как работи продуктът.

Webydo е друг блестящ пример с анимация на живо на началната страница. Това позволява на посетителите да виждат Webydo в действие, без да се налага ръчно да демонстрират продукта. Но не винаги трябва да разчитате на анимации за визуализации на продукти. Iconjar използва прост PNG скрийншот, за да покаже какво е продуктът и как работи.

7. Автоматизирани изпълнители на задачи

Светът на разработката на frontend се е променил толкова много с няколко нови най-добри практики за създаване на уебсайтове. Работници / системи за изграждане като Gulp и Grunt се използват много по-често за множество задачи, които преди са изисквали ръчно усилие.

Автоматизацията е жизнената сила на бързия обрат и избиването на качествен код. Машините не правят грешки, така че колкото повече можете да автоматизирате с увереност, толкова по-малко проблеми ще имате (на теория).

За да научите повече, разгледайте тази публикация на Reddit, която обяснява как работят тестовете. Тези инструменти основно изпълняват JS код, който ще автоматизира части от вашия работен процес, или потребителски JS, или скриптове, написани от други.

8. Native JS Mobile Apps

Аз съм голям защитник на използването на правилните инструменти за работата. В случай на разработване на мобилни приложения това означава Java за Android, Objective-C / Swift за iOS.

Но не всеки иска да научи нов език, само за да изгради мобилно приложение. За щастие става по-лесно за създаването на родните приложения и за компилирането им с алтернативни библиотеки като NativeScript или React Native.

Разликата да станете програмист за мобилни приложения се съкращава с възможността за създаване на мобилни приложения чрез JavaScript. PhoneGap е още една опция, базирана на HTML / CSS / JS код.

Въпреки че процесът на създаване много се различава, JS бързо се превръща в решение за кодери, които искат да създават мобилни приложения, без да изучават нов език.

9. Инструменти за сътрудничество за проектиране

Незабавните съобщения и груповите разговори се провеждат от повече от десетилетие. Тези ресурси обаче традиционно са разчитали на открит текст с известни възможности да прикачат файлове.

Една нова тенденция е възможността за споделяне на живи проекти в чат приложения. Забележителен е един пример, в който поясненията и коментарите могат да бъдат насложени върху документа. Това дава на дизайнерите чист начин да споделят работата директно с всички в екип.

Slack е най-популярното приложение за чат в момента, което поддържа много подобни функции. Нарастващата потребителска база на Slack е категорична относно създаването на разширения, които значително подобряват възможностите на Slack и се свързват с други продукти, като Hangouts, MailChimp и дори WordPress.

10. Отзивчиви рамки на интерфейса

Frontend рамки като Bootstrap са били около години и продължават да се окажат полезни за проекти както лични, така и професионални. Отзивчивият дизайн накара своя път в рамки и създаде търсенето на код от интерфейса вместо просто задния (Django, Laravel и т.н.).

Преминавайки през 2016 г. мисля, че ще четем много повече за отзивчивите рамки на фронтенда и тяхната стойност в уеб проектите. Много разработчици с нетърпение очакват пускането на Foundation 6 и публичното V1 издание на Bootstrap 4.

Други по-малко известни рамки, които можете да проверите, са Gumby и Pure CSS.

11. По-голям фокус върху дизайна на UX

Полето на дизайна на потребителския опит ще продължи да нараства бързо, като повече дизайнери и разработчици ще забележат. Дизайнът на потребителския интерфейс е част от UX дизайна, но не е крайната цел. Потребителският интерфейс е средство за постигане на цел, като краят е фантастичен потребителски опит.

Само преди 5 години бях едва познат с UX или как се прилага при проектирането на интерфейса. Сега имаме ресурси като UX Stack Exchange и безплатни UX книги. Ако не знаете много за потребителското изживяване, то сега е най-доброто време да изучите и научите как принципите на UX могат да бъдат приложени към всички форми на цифрови интерфейси.

12. Мениджъри на пакети

Дигиталните мениджъри на пакети са се повишили толкова бързо, че на практика са изискване за модерно уеб разработка. Решения като Bower и NPM могат да спестят много време за започване на нови проекти.

Овладяването на всяка нова технология ще отнеме време и ще дойде с кривата на обучение. Но ако има нещо, което всеки разработчик трябва да знае, това е мениджър на пакети. Те изискват известни познания за командите на терминала, но след като свикнете с процеса, никога няма да искате да се върнете обратно.

13. Разширени анимации на потребителския интерфейс

Преходите в CSS3 бяха само началото на дългосрочната тенденция в анимацията в мрежата. Сега имаме десетки CSS и JavaScript библиотеки, посветени на анимацията. Нещата, за които никога не съм мечтал, са вече построени и достъпни безплатно, ако знаете къде да търсите.

Анимацията не е изискване за добър дизайн. Но той може да направи добър дизайн в страхотен дизайн, когато се използва правилно.

Следете анимираните тенденции за интерфейси и вижте какво можете да вземете от различни уебсайтове. Не забравяйте, че уеб анимацията не е филм на Дисни и трябва да бъде третирана с уважение. Използвайте анимацията внимателно, така че да подобри интерфейса, без да се превръща в неудобство или разсейващ елемент на дизайна.

14. Дизайнери се учат да кодират

Темата за горещия бутон тази година е случаят с дизайнерите, които се учат да кодират. Някои дизайнери смятат, че не е тяхната работа да пишат код, докато други смятат, че това се превръща в норма и трябва да бъде възприето.

Чел съм разгорещени дискусии и очарователни публикации по тази тема, които само изглежда да привличат емоционални реакции. Един добър дизайн е просто хубава картина без код. И все пак, за да се съсредоточи върху двете се изисква дизайнерът да прекарва по-малко време да практикува занаята.

Така че има ли окончателен отговор? Някои твърдят, че жизнеспособността на работното място се увеличава за дизайнерите, които знаят кодирането в интерфейса. Ами ако някой не иска да пише код? Струва ли си да се учим да се конкурираме?

Смятам, че най-ясният отговор е да направите каквото искате. Но изглежда, че тази тема е все още на масата за много дизайнери, които вероятно ще продължат дискусията през 2016 година.

15. Безплатни онлайн инструменти и уеб приложения

Преди това всички програми се пускаха от работния плот без значение какво трябва да направите. Но в днешно време постоянно съм изумен колко webapps са достъпни безплатно онлайн.

Ще намерите всичко от URL кодиране / декодиране до напълно свободен Markdown редактор. Дори Google Диск е взел продуктите на Microsoft Office в браузъра (отново напълно безплатно).

Сегашното ниво на изчислителна мощност и хомогенни стандарти от уеб браузърите предлагат неограничен брой възможности. Сложни задачи като възобновяване на създаването и компресиране на изображения могат да се обработват от прозореца на браузъра.

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

Уеб компонентите се опитват да решават проблемите на сложността за разработчиците. Уеб сайтът на WebComponents има големи ресурси и материали, за да даде на разработчиците да започнат да текат тази тема.

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

Докато компонентите не са особено вдигнати до основния статус, те се обсъждат от професионални разработчици по целия свят. Google пусна Polymer, която е рамка, използвана за добавяне на уеб компоненти чрез JS и HTML.

Това може да не е практично да се използва в големи проекти на клиенти все още. Въпреки това технологията е на разположение и с малко практика можете да овладеете концепциите с лекота. За да научите повече и да видите няколко примерни кода, можете да прочетете този CSS-Tricks пост на модулни уеб компоненти.

17. Онлайн ресурси за обучение

Ние всички знаем, че сега е най-лесното време да научите каквито и да било умения от вашия компютър. Изглежда, че онлайн пазарът за обучение нараства експоненциално с нови курсове и уебсайтове, които се появяват всяка година.

Чувствам се по-уверен от всякога, че ще видим повишаване на онлайн обучението. Добре известни сайтове като Treehouse и CodeSchool предлагат невероятни курсове заедно с по-новите сайтове като Bitfountain и Learn-Verified.

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

18. JavaScript от страна на сървъра

Макар да има предишни опции за JS от страна на сървъра, никой не е проникнал толкова бързо, колкото Node.js. Разработчиците на JavaScript са се влюбили в тази библиотека и са гледали как тя се превръща в пряка конкуренция с други езици, като Python или PHP.

Node позволява на разработчиците да създават уебсайтове, използващи един език, за двата кода frontend + backend. А ресурси като Node Package Manager дават още по-голяма стойност на Node.js.

От това, което мога да кажа, Node все още е в подем и продължава да печели от ентусиастите в индустрията. Независимо дали планирате да научите Node или не, няма съмнение, че ще продължи да расте като основна тенденция през 2016 година.

19. Характеристики на уебсайтове, поддържани от докосване

Браузърите на смартфони винаги са поддържали функции за докосване за всички уебсайтове, за да поддържат обратна съвместимост. Напоследък забелязах още плъгини и персонализирани функции, прикрепени към уебсайтове с конкретната цел за управление на сензорни събития.

Плъгини като Photoswipe и Dragend.js са създадени, за да се справят с приплъзване и докосване на дисплеи със сензорен екран. Изглежда, че уеб разработчиците не само изграждат отзивчиви уебсайтове, но и уебсайтове с възможност за докосване.

Ако търсите около вас ще намерите някои наистина впечатляващи характеристики, създадени за уеб, които разчитат единствено на сензорни събития.

20. Материален дизайн в мрежата

Изданието на Google за материалния дизайн беше огромен успех за дизайнерите на Android. Материалният дизайн се счита за дизайн на езика, предназначен да опрости процеса на изработване на потребителски интерфейси за Android смартфони.

С течение на времето уеб дизайнерите взеха това на сърце и изградиха цели уебсайтове на базата на новия дизайн на Google. Изглежда, че тенденцията в материалния дизайн се е преместила отвъд само мобилните приложения в света на уеб дизайна.

Хората, които искат да изградят сайтове с материали, дори не трябва да изобретяват колелото. Свободните библиотеки като Material UI и Materialize предлагат персонализирани кодове за структуриране на ново оформление в началото на фондацията за дизайн на материали.

Затваряне

Разглеждайки тези тенденции, трябва да е ясно, че виждаме реални съгласувани усилия от страна на уеб общността, за да улесним процеса на изграждане на уебсайтове. Всички искаме да спестим време в ежедневния ни работен процес.

От създаването на мрежата видяхме, че много технологии се увеличават, за да бъдат заменени с по-добри алтернативи. Тези тенденции за 2016 г. настояват за по-единен набор от техники за проектиране, които ще направят уебсайтовете на сградите по-лесни и много по-малко сложни.