Уеб дизайн тенденции 2013

От една страна 2012 заложи някои идеи, които тепърва ще се развиват в настоящата година от друга страна разгърна достъпността на уеб-а през нарастващия брой различни по-големина и операционна система мобилни устройства. Популярността на мобилните устройства се засилва и от все по-улесненото взаимодействие между средностатистическия потребител и различните видове устройства, както и все по-достъпния интерфейс на приложенията. Било то Android, iOS, Blackberry, Bada или Windows задвижвано устройство тендецията към по-интуитивно взаимодействие е осезаема за потребителите във всеки ценови клас и на всяко устройство. apple_adnroid_blackverry_os_logos Докато през 2011 интернет пространството беше залято от мобилни версии на сайтове и онлайн услуги, 2012 съсвем логично предложи разнообразие в количеството устройствата за покриване на тази пазарна ниша. 2013 ще е очаквано продължение на тази тенденция и според мен Microsoft ( неформални притежатели на мобилното звено на Nokia ) ще дръпнат в посока производство на висок клас качествени устройства. Обръщам толкова много внимание на мобилното потребление, тъй като това е нишата, която диктува значителна част от трендовете последните няколко години. Според мен това ще се отнасе с голяма сила и за 2013.

1. Responsive Web Design

User Experience-a на средностатистическия уеб потребител е един от основните моменти при очертаването на front-end концепцията. Когато говорим за десетки мобилни устройства с няколко операционни системи, всяка от тези операционни системи с няколко текущи версии, с няколко браузъра от различни производител, а понякога и с софтуер, които е писан от уеб ентусиасти, платформата за която се пише става толкова обхватна, че изисква технологии и инструменти, които да пригодят интерфейса на всеки уеб проект към всички тези условности без това да засяга производителността му. responsive_web_Design   Чрез интрументите за Responsive Web Design и CSS-3 media queries поддръжката, които имаме в началото на 2013, с малко повече замисъл в тази посока при оформянето на първичната идея за всеки проект, можем да си напаснем лейаутите към всяка форма на дигитална медия. Идеята е да се мисли за всички устройства като за една силно динамична среда. Responsive Web Design ще е основна посока към която ще се ориентират, ще се приспособяват и ще моделират уеб девелопърите през 2013.

2. Употреба на различни фреймуъркове

След като някои е направил пътека няма нужда да създаваме нова за да минем, по-лесната възможност е да ползваме вече готовата – така ще стигнем по-бързо където сме се запътили. Въпреки че Responsive Web Design-а може да си го създадем от нулата, по-лесния вариант е да изберем отъпканата пътека и да си улесним работата с употребата на различни front-end framework-ове създадени, за да съкратят времето при изграждането на стабилни основи за проектите ни. Ако искаме да учим, изборът да използваме нещо готово няма да ни вдигне много левъла, защото учим фреймуорка, а не езика, който стои зад него. Но в други случай, може да е непрактично да създаваме основи при положение, че някои се е погрижил за стабилни основи и ни ги предоставя безплатно за използване под формата на различни framework-ове. Използването на framework-ове е препоръчително с цел пестене на време и нерви в настройка на различни съвместимости. Естествено преди да се започне с употреба им трябва да се инвестира време, в изучаване на принципите на съответния инструмент, тъй като всички те се различават малко или много по отношение на логиката, която е заложил авторът. Погледнато от друг ъгъл използването на framework-ове, може и да не е много добра идея, тъй като по-бързо и по-лесно не винаги означаво по-добро. Всъщност използването на готови ресурси зависи от контекста, в който се използват и в този ред на мисли употребата им може да бъде нож с две остриета. Някои от най-използваните фреймуоркове са:

повече информация за различни framework-ове тук, тук и тук

3. Background изображения на цял екран

Заедно с предните два тренда, този тренд започна да се появява доста често миналата година и като че ли ще се задържи през настоящата.

4. Ретина дисплей

С представянето на MacBook Pro с ретина дисплей, а в последствие и на други техни устройства с такъв тип дисплей, Apple промениха стандартите, по който изображенията трябва да се оптимизират за уеб. Ретина дисплея съдържа висока гъстота на пиксели, достатъчна за да не позволи на човешкото око да види пикселизация. Съответно ако едно изображение изглежда добре и е оптимизирано за обикновен дисплей, то най-вероятно същото изображение ще изглежда малко по-зле погледнато през ретина дисплей. За да се премахне тази разлика е нужно изображението не просто да се оптимизира за уеб, а да се оптимизира за ретина дисплей, което отваря доста работа на всички уеб дизайнери, които искат сайтове им, създадени преди появата на ретина дисплейте да изглеждат в пълния си блясък. До преди появата не тези дисплей изображенията за уеб се оптимизираха на 72 dpi, сега ретина дисплейте поддържат до 300 dpi, което изисква доста сериозна преработка на изображенията откъм размер. За да се запази скоростта на зареждане на снимките за потребителите, които не са с такъв тип дисплей се използва техника с java script, който детектва резолюцията и ако тя е по-ниска от 2880?1800 страницата зарежда изображения с 72dpi. Спорно е дали Nexus 10 или Kindle Fire HD бият ретина дисплея произведен от Samsung за Apple, но при всички случай тенденцията към по-високо качество на уеб изображенията ще се запази. Характеристики на ретина дисплея

5. Вертикално и паралакс скролиране

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

6. Типография

Типографията е незаменима част от облика на привличащата визия, както и огромна част от “интернета” от началото на съществуването му. Правилният подбор на шрифт, размер, позиция и цвят могат да преобърнат излъчването на всеки сайт в приятно за окото изживяване и да поднесат посланието на идеята с отношение. В наши дни при избора си на шрифт, уеб дизайнерите не са поставени пред няколко възможности ( Arial, Georgia, Verdana… ), както беше преди време. През последните няколко години се появиха различни инструменти ( Font SquirrelGoogle fonts, Typekit … ), които свалиха границите за използване на шрифтове и “легализираха” експериментите с динамична типография в уеб интерфейса.

Вече типографията е навсякъде в уеб-а.

hlvticons.ch
typo_showcase_webtrends_1

simplebits.com typo_showcase_webtrends_2

forefathersgroup.com typo_showcase_webtrends_3

bowtieperiod.comtypo_showcase_webtrends_4

robedwards.orgtypo_showcase_webtrends_5

amazeelabs.comtypo_showcase_webtrends_6  

Наред с тези 6 отправни точки, сред уеб дизайн трендовете през тази година ще е все по-интезивното използване на HTML5 и CSS3 и надявам се тяхната все по-добра и унифицирана браузърна съвместимост. Както и големи бутони и UI елементи. Както и доста празно пространство и минималистичен стил. Както и повече елементи, които препращат към различни социални мрежи. Тенденцията мобилните приложения да изместват уеб сайтовете на съответните услуги също ще се запази.

Съдържанието ще остане на трона си!

Коментари през Facebook

0 Comments

Остави коментар

Your email address will not be published. Required fields are marked *