10 популярни тенденции в елементите на съвременния уеб дизайн
Тенденциите в уеб дизайна могат да се променят и избледняват почти толкова бързо, колкото станат модерни. Но досега през 2013 г. шепа тенденции наистина изглеждаше, че превзема уеб дизайна от буря и сякаш се придържа.
Днес ще разгледаме десет тенденции в съвременните уеб елементи и ще покажем някои страхотни примери за всеки - всичко - от винтидж типография и кръгове, до живи цветове и удобни vCards. Още по-добре за вас е, че всички примери по-долу са достъпни за изтегляне (някои безплатни, някои платени).
Разгледайте елементи Envato
1. Винтидж типография
Голям, смел тип в ретро стил е изключително популярен в момента. Стилът работи чудесно за проекти, където ви липсват силни визуални изображения или в комбинация с остри изображения, създавайки интерес с букви.
Тази тенденция е тази, която съществува от доста време и сякаш никога не остарява. Това, което се променя, е начинът, по който виждаме използвания класически тип стайлинг.
В момента реколта типография най-често е фокусна точка в минималистичната дизайнерска схема. В допълнение, дизайнерите наистина играят с реколта и много малко цветове, като черно-бели палитри или шепа заглушени цветове. (Преди няколко години реколта типография беше популярна в комбинация със смели цветове.)
Ретро типографски знаци и значки : С шест стила, всички използват безплатни шрифтове, създаването на винтидж облика никога не е било по-лесно. Всеки стил също идва с координиращо фоново изображение. (5 $)
2. Реалистични ефекти
Докато дебатът плосък срещу скеуоморфизъм продължава да бушува, дизайнерите все още обхващат триизмерни, подобни на живота ефекти. От сенки, до повдигнати ъгли, до текстури, точно както много дизайнери все още използват тези техники. (Въпреки че по-голямата част от разговора е съсредоточена около достойнствата на плоския дизайн.)
Ключът към добрия набор от реалистични ефекти е тънкостта. Ефектите трябва да отразяват реалността. Сенките трябва да следват моделите на светлината в дизайна, скосите трябва да добавят текстура, а градиентите трябва да служат на цел.
Реалистични модерни уеб сенки : Този комплект съдържа елементи с повдигнати ръбове, сенки и 3D ефекти. ($ 6)
3. Жив цвят
Плоският дизайн е вдъхновил много вторични тенденции, включително използването на ярки цветни палитри с повече нюанси, отколкото някои дизайнери са свикнали. В тенденция сега са супер ярки, живи, наситени цветни палитри за уеб дизайн и приложения. Вместо да избират два или три цвята, върху които да надграждат, дизайнерите създават широки цветови палитри с нагоре от пет цвята.
Тези палитри са склонни да се използват по два начина: много ярък цвят в целия дизайн. Помислете един оттенък на всеки червен, жълт, оранжев, син, зелен и лилав, в допълнение към черно и бяло. Или тези палитри са съсредоточени върху нюанси на един, жив цвят. И двете опции са особено популярни.
Живият цвят излъчва тон, който дизайнерите трябва да са наясно. Много високи цветове могат да изглеждат леки и забавни и може да не работят за някои видове проекти. Живият цвят в монотонен стил е по-тонизиран.
uiGo Colors: Плоският iOS UI комплект съдържа различни елементи в плоския стил, използвайки много цвят. ($ 8)
4. Панделки
Панделите са елемент, който дизайнерите използват Бен от дълго време. Но те сякаш правят някакво завръщане. Особено популярни при дизайна на сайтове с една страница, панделите са инструментът за прости обяви - като „Очаквайте скоро“ - или за показване на награда или признание.
80 Премиум уеб ленти : Този комплект панделки съдържа панделки в почти всяка форма, формат и посока, които можете да си представите, с персонализирани цветови опции. (2 $)
5. Плоски икони
С плосък като фактически топ тенденция на 2013 г., повечето дизайнери скачат с шанс да го използват по някакъв начин. Иконите са един от най-популярните избори заради тяхната гъвкавост. Дизайнерът може да използва плоски елементи в комбинация с някои други „по-малко плоски“ елементи в цялостния дизайн на сайта, нещо, което става все по-често, тъй като плоският дизайн се простира до „почти плоския дизайн“.
В допълнение към плоските икони, плоските бутони са популярни и за дизайнерите, които искат да включат докосване на тенденцията към проектите. Дори Yahoo включва бутони и икони с плосък стил в рамките на своя сайт, което не е вътрешно плоско.
Плоски метеорологични икони : девет прости и добре очертани метеорологични икони. (3.99 $)
6. Винтидж лого или значки
Винтидж логото и значките възпроизвеждат тенденцията на винтидж тип с допълнителен слой стайлинг. Значките са особено модерни, когато става въпрос за сайтове, използващи инструменти и ефекти на играта. Тези прости лога не само изглеждат класически, но простият стил може да бъде лесен за създаване и копиране по много начини. Просто отнема шепа хубави шрифтове и основни форми.
Настоящата тенденция - като винтидж типография - се фокусира върху минимални ефекти за тези значки с малко цвят или допълнителен стайлинг. Силни форми и смели надписи са популярни.
Комплект значки за винтидж лого : Този пакет съдържа осем различни винтидж двуцветни лога. Разнообразието от включени стилове предлага много гъвкавост. (4 $)
7. Карти
Въпреки че много от картите или плочките на уебсайта, които виждаме, не са задължително проектирани в плосък стил, те са се развили от концепцията за дизайн на плосък метро.
Тези прости кутии се използват по различни начини. Картите или плочките също са популярна техника за организиране на съдържание в отзивчиви дизайнерски проекти, защото те подреждат и подреждат красиво в различни размери.
След като един стил е проектиран, е лесно да го използвате по други начини. Карти за информация за контакт (почти с вид на цифрова визитка), карти за връзки или друга информация, карти за подчертаване на портфейли или изображения. Тенденцията работи, защото е много гъвкава
vCard интерфейс : Добавете био, работа, информация за контакт и връзки в социалните медии в обикновен формат в стил на карти. Този комплект се предлага като изтегляне от PSD или CSS. (Безплатно)
8. Кръгове
Кръговете, копчетата и циферблатите направиха истинско завръщане. Докато много дизайнери са се отклонили от закръглените форми в миналото, все повече и повече кръгове се възприемат като забавен начин за изграждане на бутони и други елементи на потребителския интерфейс.
Част от обжалването е, че те могат да бъдат проектирани така, че да приличат на нещо, което трябва да докоснете, имитирайки действието на натискане на бутон. Тази концепция работи чудесно за дизайна на мобилни устройства и приложения, където се очаква потребителите да докоснат или докоснат елементи, за да направят нещо. Ефектът се прелива и към уебсайтове в пълен размер, задвижвани от десктоп.
Обикновен бутон за покупка : Насърчете купувачите да направят покупка с различен бутон за покупка. (Безплатно)
9. Прости градиенти
Еволюцията на плоския дизайн до „почти плосък“ постави нов акцент върху прости наклони. Дизайнерите искат промяната в нюанса, но искат тя да е супер фина.
Този ефект работи за фонове, бутони, икони и най-различни други елементи. Простите градиенти често не са натрапчиви и могат да бъдат приятен начин за създаване на дълбочина.
CSS Gradient Set : Този комплект съдържа прости градиенти в осем готови за използване цветове като отправна точка за по-големи елементи или набори от икони. Предлага се като PSD или CSS изтегляне. (Безплатно)
10. Плъзгачи
Когато става въпрос за показване на фотография или портфолио, е трудно да се намери сайт, който да не използва някакъв тип плъзгач. (Все по-често те стават популярни и при видео.) Повечето плъзгачи работят върху автоматично превъртане, което потребителите могат да спрат или да поставят на пауза и да представят голямо изображение на дисплея и по-малки изображения или бутони, които напредват през изображенията.
Плъзгачите работят с различни други стилове на проектиране - тук представеният стил има три версии, които могат да работят за плоски или скеуморфни проекти. Този инструмент е прост и ефективен начин да покажете много работа, като същевременно поддържате визуално доминиране.
Чисти плъзгачи : Този комплект съдържа три стила за лесна употреба, поразителни плъзгачи за снимки и използва безплатни шрифтове. ($ 3)
заключение
Гледането на тенденции е чудесен източник на вдъхновение за уеб дизайн. Нищо не може да стимулира креативността, като да видите други творчески процеси в действие. Какви други нововъзникващи тенденции знаете? Какво следва? Споделете идеите си в коментарите.