15 Тенденции за уеб дизайн, които трябва да се наблюдават през 2012 г.

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

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

За щастие методите за прилагане на тези функции стават все по-лесни за разбиране и много по-тънки в кода.

1. Отзивчиво проектиране на интерфейса

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

Включително известни JavaScript библиотеки като MooTools и jQuery, стана много по-лесно да анимирате тези функции и дори повече. Повечето съвременни браузъри поддържат този код и дори грациозно се влошават, когато скриптовете не са достъпни. В крайна сметка искате да накарате потребителя да се чувства комфортно, когато взаимодейства с произволно място в дизайна.

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

2. Мобилни устройства със сензорен екран

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

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

3. Тонове свободни!

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

Две от моите лични фаворити са Download PSD и Designmoo, които се актуализират често от висококачествени членове. Освен това в архива на Hongkiat Freebies има много сладки екстри, които можете да проверите. Във всяка ера, преди да е буквално никога не е било толкова лесно да се изтеглят безплатни уеб интерфейси, оформления, лога, банери и практически всеки друг вид PSD / AI файл!

Някои изчистени файлове за изтегляне

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

Комплект мини уеб интерфейс

Тъмен мини музикален плейър

Плъзгащи се маркери

Плъзгач на тъмна снимка

Кутии за търсене

Вход в / Форма за влизане

Вход Модална кутия

Чист формуляр за влизане

Таблици за ценообразуване

Минимални барове за зареждане

Изскачащ прозорец за прикачен файл

4. Стандарти HTML5 & CSS3

И двата нови дизайнерски архетипа са натрупали все по-нарастващи резултати през 2011 г. Дизайнерите на семантични уеб години са чакали години, за да изработят CSS само проектиращи рендеринг заоблени ъгли и падащи сенки. Освен това W3C постигна много напредък в набирането на подкрепа от най-популярните браузъри.

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

Придържането към тези нови стандарти също ще направи развитието на JavaScript и jQuery много по-лесно. Разработчиците вече публикуват и споделят своя код за проект HTML5 / CSS3 онлайн и ако нещата продължат, със сигурност ще забележим още много неща, които ще се появят през следващата година.

5. Ленти и банери

Въпреки, че тази техника за проектиране не е точно “нов” тя никога не се е превърнала в реалност до съвсем наскоро. Вероятно сте видели примери за ъглови ленти, барове за навигация на банери и малки лентови значки. Тези тенденции вероятно са избухнали поради масовото натрупване на подробни уроци, които могат да бъдат намерени чрез Google.

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

6. Premium WordPress Теми

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

След като закупите такава тема, инсталационният процес е подобен на всеки друг. И все пак сега е възможно да се включат функционалности на потребителски плъгин, детски теми, нови администраторски менюта и цял куп други функции директно от темата! WooThemes, ElegantThemes и Rocket Themes са няколко марки, които се открояват преди всичко останалите. Качеството им е безупречно и аз чувствам, че техните разработчици отиват по-нагоре и отзад, за да създадат най-добрите шаблони и най-интуитивните административни менюта.

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

7. Онлайн списания

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

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

8. Лесно падащи сенки

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

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

9. Динамична типография

Шрифтовете са голяма част от сферата, обхващаща традицията на уеб дизайна. Най-забележителните шрифтове, включително Arial, Helvetica, Georgia и Trebuchet MS, съществуват от години. Въпреки че те продължават да служат на дълбока цел в уеб стандартите, има много алтернативни опции за разширена типография на уеб страници.

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

Друга алтернатива са Google Web Fonts, които се държат по подобен начин на Typekit. Препоръчвам заинтересованите дизайнери да проверят медийната заявка в CSS3 @ font-face, тъй като получавате много повече творчество. Този код може да се използва за импортиране на a .TTF или .ОСТ шрифт файл от вашия уеб сървър и го включете като използваем шрифт за стилове! С толкова много алтернативни системи, които се използват за изграждане на динамични шрифтове, очаквам 2012 г. да се превърне във вълна от иновации и дизайнерски таланти в тази област.

10. Галерия със снимки Слайдшоута

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

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

11. Модални изскачащи кутии

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

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

За да получите идеи за собствените си уебсайтове, разгледайте някои от по-популярните общности за споделяне на социални новини. Reddit и Digg са първите две, които идват на ум, тъй като и двата имат регистър / вход модални кутии с типично оформление. Освен това ефектите на потребителския интерфейс за Google+ могат да се похвалят със значителна модална функционалност.

12. Вдъхновяващи списъци

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

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

13. Генерирани миниатюри на изображението

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

Блоговете днес продължават да възприемат тенденцията за изобразените изображения, така че защо да не приложите и генерираните миниатюри в темата си? Те често привличат вниманието ми към заглавието на статията и помагат за разбиването на страница, пълна с текстови връзки.

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

14. Извънгабаритни икони

Тази уникална тенденция е полу-произход от популярността на Mac OS X икона дизайн. Тъй като програмистите започнаха да пускат уебсайтове за своите Mac приложения, ние твърде често виждахме огромните размери, представени в брандирането. Съответно, тази тенденция е подобрена и чрез разработчиците на iOS и сега тя е удобна в съвременната дизайнерска култура.

Трудно е да се предскаже как тези тенденции ще бъдат честни, докато се придвижваме през 2012 г. От една страна, тези икони могат да бъдат тромави и да заемат повече място, отколкото е необходимо. И все пак ние не сме дори близо до недостиг на iOS / OSX приложения, а дизайнерите продължават да произвеждат перфектни пикселни спецификации. Да не говорим, че уеб дизайнерите сега включват и извънгабаритни икони само за всяка марка на страница! Това е добър начин да привлечете вниманието на посетителите и да създадете име за вашата компания.

15. Преувеличени хипервръзки

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

Вижте няколко от примера за връзка от Patterntap, за да видите дали някой изскочи и да ви хване окото. Има толкова много невероятни идеи за хипервръзки дизайн, както в стандартни и hover ефекти. CSS3 заоблени ъгли, текстови сенки и потребителски шрифтови семейства добавят още повече идеи в микса! Един от любимите ми примери е от SimpleBits, който използва кратка динамична анимация на всеки един от блоговите им записи.

заключение

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