Съвременни тенденции в уеб дизайна. Безцветни - призрачни копчета

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

Според Internet Live Stats в света има повече от 1,2 милиарда уебсайта. Всяка секунда тази стойност се увеличава с около 10 единици. Независимо от индустрията, в която работите, вашият уебсайт трябва да бъде актуален както в технологиите, така и в дизайна. В тази статия ще се съсредоточим върху външен видуебсайт - как трябва да изглежда през 2017 г. Твърде ярките, цветни и претенциозни шрифтове отдавна се считат за остарели. Иконите заместват изображенията, за да улеснят потребителите при навигацията в елементите на менюто. Тези факти обаче са известни на повечето специалисти, занимаващи се с интернет маркетинг. От тази статия ще научите как трябва да изглежда модерен дизайнсайтове.

1. Уеб дизайнът е фокусиран предимно върху мобилни устройства.

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

Какво означава подходът на първо място за мобилни устройства? Това е уеб разработка, която се фокусира върху мобилната реакция. Използването на адаптивен дизайн е напълно логично, особено като вземете предвид официалната статистика, публикувана от StatCounter, независима агенция за уеб анализи. По думите му делът на използването на интернет през мобилни устройства е 51,3%. Именно поради тази причина Google спря да поддържа своята услуга за незабавно търсене. Тази функция беше достъпна за потребители на настолни компютри и предлагаше резултати от търсенето, докато човек просто въвежда своята заявка. С увеличен трафик, собствениците на бизнес ще могат да получат повече продажби. Следователно фокусирането върху по-широка аудитория е напълно логично.

2. Скрита навигация

Много от нас са чували, че за да се увеличи процентът на изпълнение на целево действие от потребителя, е необходимо да се минимизира броят на необходимите кликвания. Колкото по-малко кликвания, толкова по-висока е конверсията. Въпреки този факт, съвременният уеб дизайн често включва наличието на скрито изскачащо меню, което се появява след щракване върху така наречения „хамбургер“. Това решение се основава на подход за адаптивен дизайн, когато е необходимо менюто да се постави по такъв начин, че да изглежда правилно на мобилни устройства.

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

3. Просторен първи екран

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

4. Специализирани зони за навигация

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

5. Разработка на дизайн на уеб сайт в стил Material Design Lite

Material Design се превърна във важно разширение на т.нар плосък дизайн, широко използвана тенденция през последните няколко години. Android дизайнът е създаден като интерфейс за мобилни устройства, но сега напълно завладя и настолните компютри. Този визуален подход прави използваемостта основен компонент на целия дизайн. Материал Design Lite(MDL) е следващото поколение материален дизайн. Той включва насоки, набори от оформления и цялостна рамка с инструменти, които позволяват на всеки дизайнер бързо и лесно да създаде MDL сайт, използвайки удобна селекция от палитри.

6. Големи икони

Популярността на иконите в дизайна на уебсайтове се обяснява с факта, че човек помни 65% от визуалната информация след три дни и само 10-20% от писмената или устната информация. Следователно човешкият мозък намира за по-лесно да обработва изображения, отколкото текст. Струва си да се отбележи, че иконата трябва да съответства на текста, за който се отнася, за да не обърква потребителите. Отегчените изображения на хора с преувеличени и изкуствени изражения на лицето са остарели. Иконите също трябва да са векторни, за да се показват правилно на всяко устройство. Можете да разгледате примери за дизайн на уебсайтове в нашия и да се запознаете с нашата работа.

Основните изисквания за използване на икони в уеб дизайна:

• Иконата трябва да съответства на съдържанието;
• Трябва да съдържа ясно послание;
• Трябва да е вектор;
• Иконата трябва да е лесна за четене, независимо дали е малка или голяма.

Да преминем към най-новите тенденциипри избора на шрифтове и цветове за сайта.

7. Опростени шрифтове и мека цветова палитра

Токсичните цветове в уеб дизайна изпаднаха в немилост преди около петнадесет години. Сега дизайнерите са преминали към сдържани пастелни нюанси, меки, некрещящи цветове. Схемата 60-30-10 не губи своята актуалност: в модерен уеб дизайнПреобладават неутралните цветове от бяло до бледо сиво, 30% от пространството е използвано в по-светъл тон и само 10% е боядисано в наситен цвят, като по този начин създава призив за действие.

Уеб разработката навлезе в ерата на простата красота, където се предпочитат големи и прости шрифтове с няколко меки нюанса. Как може да се обясни тази тенденция? Този подход има смисъл, защото фокусира вниманието на потребителите изключително върху най-много важни блоковеинформация.

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

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

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

Все пак има причини да следваме тенденциите. Разглеждането на сайтове като Awwwards, FWA или CSS Design Awards може да ви вдъхнови и в резултат на това да ви помогне да погледнете отвъд дизайнерските си навици. Можете да научите за нови визуални светове, с които (съзнателно или не) да се интегрирате графичен език. Гледането на другите как работят ви помага да подобрите собствените си умения, както и да сте в крак с най-новите технологии.

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

Еволюцията на Canvas и WebGL играе голяма роля в този процес. Модерни проектичесто малко объркващи, по-малко интуитивни от минималистичните, но със сигурност оставят трайно впечатление на потребителите.

Какво още ни очаква в уеб дизайна през 2017 г.? Ето моите прогнози.

Отворена композиция

Доскоро светът на дизайна беше доминиран от „затворени“, симетрични и статични композиции. От 2016 г. се появиха много сайтове, които се отдалечиха от този стил. Отворените композиции със свободно подредени елементи, движещи се някъде извън екрана, набират популярност - примери за такава работа могат да се видят на romainpsd.com, durimel.io или booneselections.com. Разпределението на елементите в тези сайтове създава впечатлението, че те продължават да живеят зад монитора.

Асиметрия

2016 също наруши правилото за симетрия, което е преобладаващо в индустрията от доста време. за дълго време. Много дизайнери са създали асиметрични оформления, които далеч не са идеално балансирани от лявата и дясната страна. Като примери бих искал да ви покажа отличния сайт culture.pl, хаотичния dada-data.net и споменатия по-рано durimel.io.

Разнообразие

Дизайнерите са създали по-динамични композиции, които включват повече пресичащи се диагонални линии (poigneedemainvirile.com, vanderlanth.io) или по-сложни форми (residente.com/en, helloheco.com, predictiveworld.watchdogs.com).

Илюзията за хаос

През 2016 г. много дизайнери съзнателно и умишлено започнаха да се отдалечават от минималистичния дизайн. Имаше желание да повече свободаи по-малко твърд подход към дизайна. Зад това, разбира се, стои нуждата от промяна, но и обичайното чувство на скука. В един момент всеки се отегчава от създаването на прости оформления с прости елементи.

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

Някои геометрични фигури, „увиснали във въздуха“, имат само декоративна цел (melanie-f). Това е типично и за припокриващи се елементи. Текстовете са частично припокрити със снимки, както на e03.epicurrence.com и melville-design.com, или изображенията са насложени едно върху друго, както може да се види на olivierbernstein.com.

Освен това е отличителна техника за нарушаване на обичайната минималистична хармония. Огромните заглавия контрастират рязко с деликатни и фини структури и цветове.

Богат фон и шарки

Все по-често се появяват фонове и шарки, върху които има малки чертички, ивици или точки.

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

Решетъчен модел

Един от първите сайтове, на които се появи такава решетка, беше werkstatt.fr, който обаче не използваше характерни анимации.

Малко по-различен начин за използване на решетката е показан на klimov.agency, brand.uber.com и maisonullens.com. В тези случаи решетката има много специфична функция – да прави движенията на елементите логични. Това ви позволява да рационализирате нестандартните решения и дава отговори на въпроси като „защо полетата на илюстрацията не съвпадат с полетата на бутона“? Това създава ритъм и в същото време оправдава нарушенията му.

Декоративни детайли

Какво наистина се е променило в напоследък, така че това е подход към детайла. Има постепенно отдалечаване от минимализма. Има много други елементи, които имат само декоративни функции. „Летящи“ геометрични фигури и съответните фрагменти. Линейните, крехки икони са леко отделени от съдържанието, което илюстрират. Подчертанията и линиите са изместени. Появяват се зърнистост и бъгове, като на bigyouth.fr или kikk.be.

Бутоните по-рядко се създават като ясни правоъгълници с текст вътре. Те често се появяват като меки, изместени линии, като тези на dahllaw.dk или yasuhiroyokota.com. Друга опция за бутон е ефектно задържане на курсора върху Canvas, като на hpsoundincolor.com и cavalierchallenge.com.

Обмислени концепции - плавни анимации между секциите

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

Изобилието от анимации елиминира рязкото разделяне на страницата на секции. Сайтът се променя плавно, докато превъртате. Съдържанието се появява и изчезва с помощта на меки анимации. Последователностите на тези преходи стават все по-сложни. Това не са просто произволни ефекти между блокове от съдържание, а обмислена концепция, в която се появява всеки елемент точното време(Nationalgeographic.com, stylenovels.com). Анимациите са част от уебсайта от самото начало, а не просто добавен случаен детайл.

Интересни анимации украсяват прости оформления. Те добавят нова стойност и правят страницата уникална. Те се превръщат в същността на целия проект, както при Ifly50 или tennentbrown.co.nz. Анимациите често създават красива, елегантна структура на уебсайтове: Cuberto.com, lookbook.wedze.com, skarv-fashion.com или corentinfardeau.fr.

Разнообразна типография

Променящите се тенденции могат да се видят и в използваните шрифтове. Доскоро целият Интернет беше доминиран от прости, нео-гротескни шрифтове като Helvetica, Roboto, Lato или Open Sans. Малко по-"декоративната" нео-гротеска се използва по-често в заглавията и това е повече проста версияе избрано за останалата част от текста. Серифните шрифтове практически не се използват.

През последните 2 години ситуацията започна да се променя. Дизайнерите смело използват различни видове шрифтове. Сега те са по-склонни да работят с контрасти - комбинирайки серифни и безсерифни шрифтове.

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

По-големите технологични възможности и по-смелите решения водят до нарастване на разнообразието в уеб типографията.

Геометрични шрифтове

Геометричните sans-serif шрифтове станаха много популярни, като класическите Futura, ITC Avant Garde, Proxima Nova или тези, налични в библиотеката на Google - Poppins или Montserrat. Тези шрифтове са много по-изразителни от „невидимите“ нео-сан серифи. По-„агресивен“ и изразителен характер на уебсайт може да се постигне чрез използване на по-голяма дебелина, както на доста стария сайт hugeinc.com, но ето по-нови примери: sequence.co.uk, startuplab.no или www.protest.eu .

Serif шрифтове

Много често серифните шрифтове се използват не само за основен текст, но и за големи заглавия. Особено често се използват декоративни, като тези на duhaihang.com или jennyjohannesson.com. повече популярни шрифтовемогат да бъдат наречени тези, които принадлежат на Бодони или Дидот.

Еднопространствени шрифтове („пишеща машина“)

Използвайте пропорционални шрифтове, които обикновено се свързват с пишещи машини- иновация. Вече могат да се видят в сайтове като admirhadzic.com, cuberto.com или designembraced.com.

Контрастна комбинация от шрифтове

През 2016 г. беше обичайно да се отдалечаваме от меките, хармонични комбинации от шрифтове за по-изразен контраст. Експресивните комбинации бяха подобрени от високия контраст на размерите на текста. Големите и декоративни шрифтове бяха съчетани с прости геометрични, точно както геометричните заглавия бяха съчетани със серифни шрифтове в текста на съдържанието.

Огромна типография като част от основното изображение

Много готино и обичайно нещо беше използването на много големи текстови размери върху основните изображения. Това създаде много силен контраст между заглавията и останалото съдържание. Примери могат да се видят на oursroux.com, femmefatale.paris или monsieurcaillou.com.

Понякога като декорация се използва надпис в началото, като coretinfardeau.fr или nurturedigital.com.

Ярък примерГореспоменатият сайт е jennyjohannesson.com, който използва декоративните качества на серифния шрифт Goku.

Допълнителни ефекти, приложими към типографията

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

Големи букви в текстовете

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

В днешно време е забележимо, че дизайнерите използват много по-големи шрифтове, особено когато става въпрос за серифни шрифтове.

Ела на тъмната страна

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

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

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

Нека обобщим

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

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

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

Друго нещо, което ме плаши, е фактът, че новите тенденции към „деконструкция“ ще бъдат невъзможни за прилагане при търговски клиенти или просто няма да отговарят на комуникационния им профил. (Правителствените или банковите уебсайтове не могат да бъдат претрупани).

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

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

Минимализмът ще стане по-сложен и детайлен. Уебсайтовете тази година все повече ще използват Canvas. Ще видим много „хаос“, разнообразие от форми и изрази в бъдещи проекти. Това е добра новина за дизайнерите, на които им е писнало от минималистични стилове Flat, Material или Metro.

Всяка година научаваме нещо ново за дизайна и 2016 не прави изключение. Статията, която написахме миналата година, имаше такъв успех, че решихме да направим някои прогнози за 2017 г., така че нека започваме!

излезе нова статия → ← Прочетете и се вдъхновете!

Тенденциите в дизайна се влияят от медиите, технологиите, модната индустрия и напоследък от използваемостта. Тенденцията се появява бавно, постепенно, прониквайки във всички области на дизайна, след което изчезва по абсолютно същия начин. Повечето дизайнерски тенденции продължават не повече от една или две години. Дизайнът през 2017 г. ще продължи тенденциите, започнали през 2016 г. с някои нови промени, това усещане е добре познато и познато и може би сте го забелязали през последните няколко години. Основното влияние остава Material Design на Google с малки промени.

Какви тенденции в уеб дизайна ни очакват през 2017 г

01. Полуплосък дизайн

През последните няколко години плоският дизайн беше най-популярен на пазара за уеб дизайн, но сега, под влиянието на Material Design, той става все по-едноизмерен. Този преход започва с малко светли сенки, което го прави полуплосък дизайн. Еволюцията на плоския дизайн от минималистичния стил преминава към нови развиващи се технологии. Плоският дизайн все още е там, но е претърпял някои подобрения.

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

Проект: Ресурс | UI/UX инструмент за уеб услуги
Автори: Руслан Латипов; LS графика; Антон Мишин; Валери Гурков

Проект: Плейлист на слушателя

02. Движещи се снимки (Cinemagraphs)

Синемаграфите не са тези GIF анимации, които виждаме навсякъде в интернет. Синемаграфите са неподвижни изображения с незначителни елементи на движение. Тази техника прави една проста снимка по-реалистична.

03. Още 3D

3D определено се движи в нашата посока и ще видим това влияние във всички области на дизайна. С VR/AR технологиите, които бързо набират скорост, това поле се развива доста бързо.

Проект: LUV.IT

Проект: Отворени годишни награди

Проект: Air Max '17

Проект: NIKE F.C. | 3D златни топки в реалния свят

Проект: Better You Brand

04. Анимации

Анимацията все повече присъства в уеб дизайна, форматът може да бъде всякакъв - WebGL CSS, GIF, SVG или видео. Анимацията е една от най-важните тенденции в уеб дизайна през изминалата година, не се притеснявайте да я използвате.

Проект: Nickelodeon Kids избират президента

Проект: Приложение AR Virtual Fitness Coach

Проект: ZH OURO- Рио 2016

05. Едностранични сайтове/целеви страници

През 2017 г. ще видим растеж на сайтовете с една страница поради техния потенциал за маркетингови цели и способността им да насочват по-добре посетителите.

Ако имате нужда от целева страница, можете да я поръчате от мен →

06. Геометрични фигури, модели, линии и кръгове

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

Проект:

Проект: DRAP.agency Брандиране

Проект: Pfizer - Активен и 50+ за НовиятЙорк Таймс

07. Смели цветове

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

Проект: Edris — лого, проектирано от MiLo

Проект: Изобразен – адаптивен демо уебсайт за Adobe

Проект: b2mach

08. Иновативно превъртане и паралакс

Това е страхотна визуална идея, която ще добави уникалност към всеки уебсайт. От многослоен паралакс до видео паралакс, всичко е възможно с приставката D.ex Multilayer Parallax. Този продукт е разработен изцяло от студио Milothemes под ръководството на Loredana Papp и Mihai Baldean. Предлага се за закупуване на Envato Market / codecanyon.net

това WordPress плъгин, което ви позволява да правите красиви Parallax блокове с повече от един слой. Бъдете креативни и комбинирайте слоеве във всеки стил, който искате. Направихме 12 различни примерив ръководството за плъгини, за да улесните първото си запознаване с прекрасния свят на паралакса. Играйте със слоевете!

09. Цветови преходи

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

10. Мобилно сърфиране (отзивчив дизайн)

През 2015 г. и 2016 г. се наблюдава значително увеличение на гледанията от мобилни устройства. Таблетите и смартфоните вече са предпочитаният избор за сърфиране в интернет, изпреварвайки настолните компютри и лаптопите - и тенденцията продължава. Всеки уебсайт, който няма адаптивен уеб дизайнтрябва да актуализирате възможно най-скоро!

Проект: Адаптивна анимация на уебсайт

11. Персонализирани графики и илюстрации

Стоковата фотография все още е доста популярна, но през 2016 г. се появи нова тенденция, която ще продължи да расте през 2017 г.: използването на персонализирани графики и илюстрации. Ако искате уникален, красив уебсайт, който всеки посетител да ви запомни, сътрудничете си с дигитални дизайнери. Това означава по-малко стокови снимки и повече оригинални, уникални изображения.

12. Творческо използване на неутрално пространство и мрежа

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

13. Разказвайте истории (разказване на истории)

Уебсайтовете вече започват да разказват истории, за да спечелят клиентите. Хората са склонни да запомнят истории повече от четене на проста (суха) информация.

Още видео за разказване на истории от Business of Youth:

14. Постепенно зареждане на съдържание (Lazy Loading)

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

15. Разделяне на съдържание

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

16. Формуляри на цял екран

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

17. Видеоклипове навсякъде

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

Проект: Hillsong

18. SEO е важно! (SEO е важно)

SEO е много важно за един уебсайт, така че красивият уебсайт без добро SEO ще остане аутсайдер.

19. Скрита навигация

Менютата за хамбургер създават много дебати за и против колко трудно е потребителите да намерят менюто, но едно нещо е сигурно - тази тенденция ще остане и хората в крайна сметка ще свикнат с подобни менюта.

20. Малки детайли на дизайна

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

Проект: Barometa - Платформа за работа от следващо поколение

21. Тенденции в дизайна на лого

21.1. Минимализъм

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

21.2. Ръчно рисувано

Тази тенденция е в светлината на прожекторите през последните няколко години и този стил е чудесен за хипстърски бизнес. Използва се за фризьорски салони (бръснари), кафенета, ресторанти, предмети за изкуство и занаяти.

21.3. Отрицателно пространство

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

21.4. Изрязване

Не става по-минималистично от тази тенденция. Показва само това, което е достатъчно да посочите в логото, за да разпознаете компанията, и нищо повече.

21.5. Геометрия

Тази тенденция е старата школа, но е един от онези стилове, които никога няма да умрат.

21.6. Линия изкуство

Тази тенденция е популярна сред бизнеса от ново поколение

автори: Сам Хийли; Андреа Шлафер; Яцек Яничак

21.7. Шарки

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

Автори: Ник Едлин; Станислав Алейников; Лукас Гил-Търнър

21.8. Анимирани лога

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

Автори: Хавиер Миранда Нието; The Work Co

21.9. Винтидж

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

Автори: Роман Додонов; Минго идеи нагоре; Ще опитам още

21.10. Цветови преходи

Градиентите са навсякъде тази година – и логата не са изключение.

21.11. Илюстрации в лога

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

Автори: Бодеа Даниел; Яцек Яничак

21.12. Фотография в лога

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

22. Тенденции в типографията

22.1. Голяма, смела и красива типография

Типографията може да е най-важният елемент в създаването на зашеметяващ дизайн. Тази година типографията ще бъде удебелена (удебелена) и голяма с открояващи се заглавия.

Автори: Александър Лагута

Автори: Куим Марин

Проект: Серия Baugasm - пакет 4

22.2. Градиенти/цветови преходи в типографията

Градиентите без съмнение са тенденция днес и ще ги намерите и в типографията.

22.3. Визуална йерархия

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

22.4. Малка типография

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

Автори: Слава Олейник; Баха Самир; Witty Digital

Проект: Серия Baugasm - пакет 4

22.5. Анимирана типография

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

Проект: Безплатен анимиран шрифт Gotham Pro

22.6. Типографията среща фотографията

Комбинацията между текст и фотография може да даде отлични резултати. Вижте тези страхотни примери.

22.7. Геометрични форми и типография

Геометричните форми могат да работят добре с типография, за да създадат красив дизайн.

22.8. Сдвояване на шрифтове

Използвайте два или повече шрифта заедно. Това все още е модерно през 2017 г.

———————————

Посветен на уеб дизайна и дигиталните тенденции през 2018 г. Олга е член на журито на Awwwards и всеки ден преглежда стотици нови сайтове, разработени от агенции и дизайнери от цял ​​свят. Това й позволява да бъде в крак с най-новите разработки и тенденции в уеб разработката и дизайна.

Статията описва основните послания на лекцията и пълна версияможете да го намерите на линка.

Интерактивен свитък

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

Уебсайтът Volcan е любим пример. Диамантеният курсор става намек за това, което ви очаква, когато щракнете. Има интерактивен елемент. В резултат на това курсорът не е необходим; курсорът изпълнява своята роля.

Пример за интерактивен свитък на уебсайта на Volcano

Нова тема за битки между UI/UX дизайнери – колко удобна е? Но ако обмислите всичко мъдро, може да се получи добре.

SVG маски

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

Ако използвате Photoshop, можете да направите това, като просто изрежете дупка в слоя с маска. Или чрез застъпване на 6 квадрата. За нашия клиент направихме преход от екран на екран, използвайки това нещо. Отварянето на изображение от формуляр също е SVG маска. Но ако погледнете оформлението, то изглежда като статична картина.

Платно

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

Уеб сайтът Climachill от Adidas, например.

Преобразуването с буква е Canvas. Преливането на градиенти е Canvas. И това е популярно от няколко години, но скоро няма да остарее. Тъй като тежи малко и е 2D графика, която е трудна за копиране. Подходящо за тези, които искат много „уау“ на уебсайта си.

3D+WEBGL

Посоката ще се развива. Когато правиш дори малък, но качествен клип за 1 минута, това означава минимум 10 човека в екипа. Когато е в 3D - това е 1 дизайнер. И webgl е +1 разработчик. 3D може да бъде класически, като на уебсайта Globekit. Изглежда фантастично, уникално. Въпреки че се състои от общо 6 слайда.

Но отново: трябва да внимавате с приложението. Един такъв ефект е напълно достатъчен, за да направи сайта ярък, но не крещящ.

VR

През март 2017 г. се появи първият уебсайт във VR. Има повече от тях. Наскоро направихме първата VR писта на футболен стадион. Човек си слага маска и му се струва, че е на състезателна писта.

Устройство за виртуални състезания от Audi.

Наскоро спорихме дали VR ще се наложи. Да, има бъдеще, защото стана по-лесно да се прави. Ще направим портфолио във VR, така че да можете да го прелиствате, като завъртите главата си, а когато фиксирате погледа си, отидете на работа.

AR

Страхотно е, че сега можете да правите без приложение. Отивате на линк в браузъра си и трябва да имате маркер, който да прочете някои неща. Показвате този маркер и той завършва с рисуването на това, което искате. Тоест първо правиш дизайн в 3D, показваш му го и той довършва добавената реалност. Можете да го персонализирате за себе си.

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

рамка

Това е готова библиотека, където можете да намерите всички неща за AR и VR. Можете да видите как работят, да ги наблюдавате в действие.

Затова съветвам всички уеб дизайнери да завършат обучението си в 3D. Това ще направи вашия сайт много по-жизнен.

Google

Дръжте ги под око. Те не стоят на едно място. Има такова нещо като Google експерименти. Освободете си няколко часа, за да разгледате цялата красота. Google провежда много експерименти, в които включва разработчици и агенции. Последният е използването на големи данни.

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

WebVj

Много нов трик. Страницата е изградена въз основа на данни. Има един японец, Масатацу Накамура, който е особено сериозен за това. Графиките му са направени изцяло от програмист, а не от дизайнери. Той прави много за Google Experiments.

Пример за графика на Масатацу Накамура, направена с помощта на WebVJ

Трендосики

Най-задаваният въпрос е „Какъв цвят/шрифт/десен ще бъде модерен през следващата година?“ Наричам това „тенденции“.

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

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

Нека да разберем какво означава да бъдеш популярен, модерен и модерен в уеб дизайна през 2017 г. За да направите това, нека разгледаме основните тенденции в уеб дизайна. Повечето от тях се скитат от година на година и вече са се превърнали в неразделна част от съвременното изграждане на уебсайтове. Това се дължи особено на развитието на мобилните технологии, комуникационните канали и подобряването на устройствата. Например тенденция като мобилността на уебсайтове стана задължителна. Комерсиализацията на Интернет също диктува своите строги условия към дизайнерите и уеб разработчиците. В същото време някои тенденции отслабват и стават по-малко популярни, но все още остават доста активни. Появяват се и модни хобита, характерни за кратък период. Например миналата година това бяха икони с дълга сянка на изобразените обекти. Тази година геометричните модели станаха популярни, ние също ще ги разгледаме. Така че, нека го вземем по ред.

1. Мобилен, отзивчив дизайн
Днес, може би, най-важната и задължителна тенденция. Сайтът трябва да изглежда еднакво добре на всички резолюции на монитори, лаптопи, екрани мобилни смартфонии таблетки. Търсачките, между другото, много внимателно следят колко добре е адаптиран сайтът различни устройства, и въз основа на това определят мястото си в резултатите от търсенето.

2. Активна типография
Това е една от най-популярните тенденции вече няколко години. Големите шрифтове и типографията на сайта имат два компонента. Първо, естетически - красивите линии, извивки и надписи сами по себе си са декорация и декоративен елемент. И второ, това е функционалност - използване голям шрифтможете недвусмислено и категорично да предадете основната идея на посетителя.

3. Широкоекранно видео
Видеото на цял екран на фона на сайта несъмнено веднага привлича вниманието ни. това добро посрещанеда заинтересува посетителя. Съвременното развитие на технологиите улеснява вграждането на видеоклипове в уебсайт, което означава, че дизайнерите все повече ще използват тази техника. Има обаче едно предупреждение: гледането на видеото е интересно само първия път, вторият и третият път стават скучни. Следователно тази техника е ефективна само за нови посетители.

5. Синемаграфи
Добра алтернатива на широкоекранното видео и страхотни снимкина фона. Синемаграфите са снимки, в които се появяват малки, повтарящи се движения. Те обикновено се представят в gif формат и дават на зрителя илюзията, че гледа видео. Повече за cinemagraphs с голям бройпримери могат да бъдат намерени в селекцията

6. Плосък дизайн
Друга мощна тенденция от последните години. Уебсайтовете, проектирани в плосък цвят, обикновено са чисти и ясни. Но наскоро се появи нов тип плосък дизайн - Semi flat. Това е, когато целият дизайн е направен в плосък цвят и само един елемент има сянка, градиент или текстура. По правило този елемент е бутон, на който се придава обем или изпъкналост, за да привлече вниманието на посетителите.

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

8. Анимация на обекти
Възможностите на съвременните html5 и css3 ви позволяват да използвате голям арсенал визуални ефектина уебсайта. Това прави взаимодействието със страницата по-интересно и вълнуващо за посетителя. Така през новата година ще видим и най-неочакваните интерактивни микродвижения на обекти, обикновено реагиращи на движение на мишката. Може би ще видим примери за по-сложна анимация.

9. Живи цветови схеми
Популярните модерни цветове от 2017 г. предпочитат яркостта и наситеността. Интересни оригинални нюанси на червено, горчица, жълто, изумрудено, наситено синьо, както и червено, люляк и шоколад ще помогнат на вашия сайт да се открои и да придобие свой уникален стил.

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

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

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

13. Едностранични страници
Едностраничните уебсайтове, целевите страници и целевите страници се превърнаха в неразделна част от съвременния интернет. Можете да прочетете повече за това какво е целева страница в статията и. През 2017 целевите страници ще поставят по-голям акцент върху бутон, призоваващ към действие – поръчка, обаждане, регистрация и т.н. Всичко останало, което отвлича вниманието на потенциален посетител, ще бъде отрязано.

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

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

16. Инфографика
Графичното представяне под формата на инфографика все още е популярно и търсено. Придружаването на текста с красива картинка или икона, съчетано със стилни дизайнерски елементи, прави инфографиката естетически привлекателна. Сравнителните инфографики са особено визуално ясни и интересни - като какво се е случило и какво се е случило, да и не, плюсове и минуси, какво трябва и какво не трябва и т.н. Можете също да използвате инфографика, за да разкажете история стъпка по стъпка или да представите ярко скучна статистика.

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

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

19. Подреждане на писма
Натрупването на букви е текст в квадрат. Всъщност това е пример за сложно творческо решение - трябва да представите дълъг текст на малко място. В същото време трябва да изглежда красиво и оригинално. Тази година също е модерно.

20. Празен бутон
За спестяване на място и място на мобилните устройства преди време се появи празен бутон - голям надпис с квадратен контур около думата. Такъв бутон дава преглед на фона зад бутона и в същото време запазва функционалността си на пълноценен бутон. Плюс това, като елемент от дизайна, такъв бутон изглежда стилен и спретнат.

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

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

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

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

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

Инфографика „Тенденции в уеб дизайна 2017“
Предлагам ви инфографика, която ясно представя всички тенденции и тенденции в уеб дизайна. Можете да изтеглите снимката в голям размер, като използвате тази връзка в DeviantArt. Страница на DeviantArt ще се отвори в нов прозорец. Там щракнете върху думата Изтегляне вдясно от снимката и запазете снимката на вашия компютър.