15 Трендови веб дизајна за које треба пазити у 2012. години

До сада је 2011. година довела до неких невероватних промена у дизајну и интернет технологији. Веб развој је постао много глаткија тема за скок у учење, а да не спомињемо безбројне библиотеке отвореног кода које су корисне у поједностављивању процеса. Па ипак, чини се да је глобална дизајнерска заједница далеко од тога да баца ручник.

Желим да представим 15 идеја које су расле веома брзо током протекле године. Ови трендови обухватају технике израде веба и графике које ће вероватно одиграти велику улогу у 2012. години. Вероватно сте видели неке од ових заступљених на многим од ваших омиљених сајтова на мрежи.

Срећом, методе за имплементацију ових функција постају лакше разумљиве и много тање у коду.

1. Одговарајући дизајн интерфејса

Искуство просечног корисника је можда најважнији аспект који треба узети у обзир приликом дизајнирања веб локације. Желите да елементи странице брзо реагују на унос тастатуре / миша и понашају се како се очекује. Неки примери могу да укључе меније са стране, спуштене кутије и искачуће прозоре.

Укључујући познате ЈаваСцрипт библиотеке као што су МооТоолс и јКуери, постало је много лакше анимирати те функције, па чак и више. Већина модерних претраживача подржава овај код и чак се грациозно деградира када скрипте нису доступне. У крајњој линији, желите да се корисник осећа угодно када с било ким у дизајну комуницира.

Слично томе, требало би узети у обзир и унос података и проверу података. На многим страницама за регистрацију ћете добити мале одговоре док радите кроз сваку област уноса. Можете аутоматизовати провјеру важећих адреса е-поште, дуплицираних корисничких имена, па чак и провјерити уносе лозинке. Ово ће уштедети време на корисниковом крају и обезбедити практичан водич током процеса регистрације.

2. Мобилни уређаји са екраном осетљивим на додир

У протеклих неколико година постало је очигледно да смарт телефони добијају подршку чак и међу не-технолошким ентузијастима. Али тек од 2011. године видели смо експлозију мобилних сајтова и шаблона за мобилне уређаје.

Популарност уређаја иПхоне и иПад заједно са телефонима са Андроидом значи да ћете посетиоцима омогућити потпуно интеракцију са вашим страницама путем команди додира. Ово мора постати реално разматрање са сваким дизајнерским моделом. Трендови у мобилном веб дизајну су показали да изградња потпуно одвојене мобилне теме често даје најбоље резултате. На тај начин можете задржати све динамичке садржаје на свом главном изгледу док послужујете танку верзију сајта мобилним корисницима.

3. Тоне Фреебиес!

Ко може рећи да искрено не уживају у бесплатним преузимањима? Веб дизајнери већ годинама деле свој садржај на мрежи, али тек недавно је то постао веома популаран тренд међу дигиталним уметницима. Било је неколико заједница изграђених посебно око бесплатног преузимања за веб и графичке дизајнере.

Два од мојих личних фаворита су Довнлоад ПСД и Десигнмоо, који се често ажурирају од стране врхунских чланова. Поред тога, Хонгкиат Фреебиес архива има доста слатких добрих ствари за провјеру. У било којој ери, дословно никада није било лако скинути бесплатне веб интерфејсе, распореде, логотипе, баннере и практично било коју другу врсту ПСД / АИ датотеке!

Соме Неат Довнлоадс

Испод су само неколико добрих ствари које можете погледати раније у 2011. И ако мислите да ова листа има неке сјајне датотеке, само сачекајте до 2012. године!

Сет за мини УИ

Дарк Мини Мусиц Плаиер

Клизне ознаке

Дарк Пхото Слидер

Сеарцх Бокес

Пријава у / Сигнин образац

Логин Модал Бок

Цлеан Логин Форм

Прицинг Таблес

Минималне траке за учитавање

Поп-уп прилога

4. Стандарди ХТМЛ5 и ЦСС3

Оба ова нова дизајнерска архетипа су нагомилала све већи пораст током 2011. Дизајнери семантичког веба су годинама чекали да дизајнирају ЦСС-дизајн дизајнирајући заобљене углове и сјене. Поред тога, В3Ц је постигао велики напредак у прикупљању подршке од најпопуларнијих претраживача.

Могу да видим само добре ствари за будућност ХТМЛ5 / ЦСС3 веб развоја. Фронт-енд дизајнери се често превиђају у данашњем пољу, али они служе тако велику важност читавом процесу композиције. Покушајте да се не стиснете у било коју „етикету“ засновану на техникама које знате и свакодневно вежбате. Нудимо водич за почетнике за ХТМЛ5 / ЦСС3 кодирање ако осјећате потребу за надокнадом.

Усклађивање са овим новим стандардима такође ће олакшати развој у ЈаваСцрипту и јКуери-у. Програмери су већ објављивали и делили свој ХТМЛ5 / ЦСС3 пројектни код на мрежи, и ако се ствари наставе, сигурно ћемо приметити још много тога у наредној години.

5. Траке и банери

Иако ова техника дизајна није баш “нев” никада се није доиста пробио кроз маинстреам све до недавно. Вероватно сте видели примере угаоних трака, траке за навигацију банера и мале значке на тракама. Ови трендови су вероватно експлодирали због масовног нагомилавања детаљних туторијала који се могу наћи кроз Гоогле.

Веб дизајнери су данас компетентнији у покретању властитих блогова за размјену информација. Сада се једноставне технике могу лако пренијети између дизајнера да би се дуплицирали најпопуларнији ефекти. Постоје чак и бесплатни ПСД-ови које можете преузети да бисте уштедјели напор.

6. Премиум ВордПресс Тхемес

Финално издање ВордПресс 3.0-а је укључивало мноштво дуго очекиваних функција као што су прилагођени типови постова и јединствене слике чланака. Ипак, најдубље промене које сам видео су долазиле из ВордПресс развојних продавница које су специјализоване за премиум ВП теме.

Након што купите такву тему, процес инсталације је сличан било ком другом. Ипак, сада је могуће укључити корисничку функцију додатка, теме за дете, нове меније администратора и читаву гомилу других функција из теме! ВооТхемес, Елегант Тхемес и Роцкет Тхемес су неколико брендова који ми се издвајају изнад свега осталог. Њихов квалитет је беспрекоран и осећам да њихови програмери иду изнад и иза да би створили најбоље шаблоне и најинтуитивније меније администратора.

У 2012 могу само замислити ВордПресс ће постати још лакши за кориштење. То значи да ће бити објављене више квалитетних тема и да ће бити објављени још невероватни блогови.

7. Онлине часописи

Говорећи о ВордПресс темама, требало би да покренемо и брзо усвојени успех онлине часописа. Ови сајтови нису толико различити од било ког генеричког ВордПресс блога осим генералне структуре и распореда страница. Ове веће магове можете уочити самом презентацијом њихове почетне странице и колекцијом аутора који пишу за сајт.

Како часописи почињу да се крећу он-лине, они ће постати извор прихода за многе писце. Додијељена тема као што је 'веб дизајн' циља мању нишу него, рецимо, играње или економија. Али чињеница да видимо више дизајнерских часописа на интернету него што је штампано, показује да свет можда иде у наредним годинама.

8. Еаси Дроп Схадовс

Као аспект ЦСС3, дизајнерима је сада лакше него икада да имплементирају сјенку било гдје на страници. Текстуални оквир и елементи у стилу бок-а добили су одговарајућа својства како би учинили јасне ефекте сјене.

Текст-схадов синтакса је веома лако запамтити и пратити као бок-схадов. Са сликама које су сада непотребне у приказивању ових ефеката, веб програмери могу да се фокусирају на проширење ових основних идеја даље.

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

Фонтови су велики део сфере која обухвата традицију веб дизајна. Најзначајнији фонтови, укључујући Ариал, Хелветицу, Грузију и Требуцхет МС, постоје већ годинама. Иако и даље служе дубокој сврси у веб стандардима, постоји много алтернативних опција за напредну типографију веб страница.

Типекит, на пример, захтева да се у главу документа укључи само пар линија кода. Након тога можете одредити која имена фонтова треба укључити и додати их у свој ЦСС. Најбољи део ове технике је у томе што се ослања углавном на ЈаваСцрипт, тако да крајњем кориснику није потребно да имају инсталиране фонтове.

Друга алтернатива је Гоогле Веб Фонт који се понаша на сличан начин као Типекит. Препоручујем заинтересованим дизајнерима да испитају ЦСС3 @ фонт-фаце медиа куери, јер вам се даје много више креативности. Овај код се може користити за увоз а .ттф или .отф фајл фонта са вашег веб сервера и укључите га као корисни фонт стилова! Са толико алтернативних система који се користе за изградњу динамичких фонтова очекујем да ће 2012. година имати таленат иновација и дизајна у овој области.

10. Галерија слика Слидесховс

Са каснијом популарношћу јКуери-а, приметио сам да се све више слајдова слика убацује у веб распореде. Галерије су савршене за демонстрирање брзог увида у садржај унутар странице. То би могао бити скуп уноса портфеља, фотографија, постова са истакнутим сликама, демо снимака, итд.

Када узмете у обзир многе јединствене клизне и бледе анимације, никада није било лакше направити брзу презентацију за своју почетну страницу. Увјерен сам да ће 2012. година у тим трендовима бити видљива, а не само између дизајнера. Онлине веб апликације и софтверске компаније користе слидесхов као вођене туторијале за приказивање снимака екрана и јединствених функција.

11. Модал Попуп Бокес

Осјећам да су модалне кутије још увијек прилично нове за интернет с обзиром да се већ годинама појављују у десктоп софтверу и мобилним апликацијама. Сврха модалног прозора је да понуди садржај кутије (као што је регистрација корисника или пријављивање) на врху тренутне странице без учитавања на нови.

Многи скрипти галерије слика отвореног кода користе врсту ефекта светлосног поља где позадина постаје тамнија од искачућег прозора. Стварно уживам у овом обиљежју кад год га видим, иако га многи још нису усвојили. Иако су модални оквири секси и елегантни, такође их је веома тешко кодирати и исправно радити.

Да бисте добили идеје за властите веб-локације, погледајте неке од популарнијих друштвених заједница за дијељење друштвених вијести. Реддит и Дигг су прва два која долазе на памет јер обоје имају модалне кутије за регистрацију / пријаву са типичним распоредом. Поред тога, ефекти корисничког интерфејса за Гоогле+ имају значајну количину модалних функционалности.

12. Инспирационе листе

Збирке ставки листе појавиле су се од првих дана веб дизајна. Када смо се преселили у нови век, дизајнери су почели да користе ХТМЛ наручене и неуређене листе за кућне навигационе меније. Али данас листе могу и још се користе за много више.

У већини тема на блогу налазим да је читав сидебар учитан са листама! Да не спомињемо дизајнере који су израдили страшне ЦСС стилове за листе у својим чланцима. Ми смо покривали инспиративне стилове листа на другом посту раније ове године, што би вам могло дати још увид у то питање. Гледајући напријед у 2012. очекујем неке заиста креативне примјере, можда паралелне са прилагођеним Фловапп-овим распоредом задатака и задатака.

13. Генерисане слике Тхумбнаилс

У веб универзуму можемо се сложити да је садржај краљ. Међутим, већина дизајнера ће се такође сложити да страница празног текста брзо постане досадна. Слике могу да додају тај додатни зачин ако знате како да их поспите нежно. Један од таквих метода је употреба динамичких сличица да би се омогућио преглед за сваку страницу или чланак.

Блогови данас настављају да усвајају трендове са истакнутим сликама, па зашто онда не бисте применили генерисане сличице иу вашу тему? Ово често привлачи моју пажњу на наслов чланка и помаже да се разбије страница пуна текстуалних линкова.

Као још један пример, Дрибббле обезбеђује целокупан попис минијатура за сваки снимак дизајна. У таквом распореду у стилу ретка стола супер је лако уочити сваку сличицу и померити се да бисте пронашли оно што тражите. Ова тактика је показала да привлачи пажњу читаве дизајнерске заједнице! Ер, бар чланови Дриббблеа у најбољем случају. Могу само да очекујем да ће у 2012. години доћи до даљег напрезања ових идеја на таквим примерима из прошлости.

14. Превелике иконе

Овај јединствени тренд полу-полази од популарности Мац ОС Кс икона. Како су програмери почели да лансирају сајтове за своје Мац апликације, ми смо сувише често видели огромне величине представљене у брендирању. Сходно томе, овај тренд је такође покупљен кроз иОС програмере и сада се удобно ослања на културу модерног дизајна.

Тешко је предвидети како ће ови трендови бити праведни док се крећемо у 2012. С једне стране ове иконе могу бити незграпне и заузети више простора него што је потребно. Ипак, нисмо ни близу тога да дођемо до недостатка иОС / ОСКС апликација, а дизајнери и даље пијуцкају савршене спецификације пиксела. Да не спомињемо да су веб дизајнери сада укључили огромне иконе у оквиру било којег брендирања страница! То је добар начин да привучете пажњу вашег посетиоца и изградите име за вашу компанију.

15. Претеране хипервезе

Линкови за сидрење су свакако у првих пет најважнијих елемената било ког сајта. Очигледно је да су они од 1990-их прошли дуги пут, а популарни трендови у дизајну само су експоненцијално расли. Чини се да се крећемо у еру у којој преувеличан дизајн има предност.

Погледајте неке од примера линкова из Паттернтап-а да бисте видели да ли је неко искочио и ухватили ваше очи. Постоји толико много невероватних идеја за дизајн хипервезе, како у стандардним тако и код ефеката лебдења. ЦСС3 заобљени углови, текстуалне сенке и прилагођене породице фонтова додају још више одличних идеја у мик! Један од мојих омиљених примјера је из СимплеБитс-а који користи кратку динамичну анимацију на сваком пермалинксу свог блога.

Закључак

Ове идеје су само неки од популарнијих трендова које сам приметио током 2011. године. Одличан веб дизајн је увек фокусиран и држи намере корисника као главни приоритет. Мало је вероватно да ће се ове филозофије разликовати у 2012. години, али како градимо распореде и постојеће податке увијек се мијења. Јавите нам своје мисли или питања у области за дискусију о коментарима.