Десигнинг Киллер Веб УИ Лаиоутс витх Фреебиес - Ултимате Гуиде
Подручје веб дизајна заузело је дах за само неколико кратких година. У свијету данас има више активних дизајнера него икада прије, сви који сурађују на иновативним пројектним идејама. Концепти који стоје иза многих од ових трендова су развијени кроз професионалне графичке дизајнере.
Може потрајати мјесецима или чак годинама прије него што у потпуности схватите техничке могућности изградње корисничког сучеља. Потребно је размотрити величине и положај елемената странице, као и читљивост текста и ознака. Уз мало слободног времена можете се упознати са минималистичким приступом за изградњу веб страница са мањим и мањим конфузијама. Чак и тада, постоје и десетине других дизајнерских техника које треба размотрити.
За овај водич сам упарио неке модерне технике дизајна корисничког интерфејса са фреебиес можете преузети и играј се. Надам се да ће то понудити мотивацију онима који су заинтересовани за каријеру у изградњи графике / веб дизајна. Чак и професионални веб дизајнери могу пронаћи неке од ових трендова који су корисни за ваш сљедећи пројект.
Вежбајте са Фулл Темплатес
Када имате вештине да дизајнирате свој сопствени изглед од почетка, нема потребе да почињете са шаблонима. Почетници, с друге стране, могу се осјећати угодније почевши од потпуног дизајна и рада у финијим детаљима.
Постоји неколико одличних бесплатних преузимања пуних шаблона ПСД сајтова за портфолије, почетне странице, блогове и многе друге категорије. Ово су савршени дизајни за почетак да се упознате са “Генерал” веб лаиоут. Свака веб страница ће имати различите потребе за елементима странице и морат ћете одредити које ставке су важне.
Ево примера ПСД названог "АппЦивилизатион", који је дизајнирао Мартин Фабрициус. Изглед је намењен креативном студију који дизајнира мобилне апликације и вероватно сајтове. Према дну ћете пронаћи мали панел икона апликација приказаних у портфолију. Такође ћете приметити да је цео дизајн хоризонтално разбијен у заглавље, врхунски слајд шоу, главни садржај и потамњени подножје.
Оригинал Соурце - Довнлоад
Десигнинг Ландинг Пагес
Погледајмо још један фреебие који је такође дизајнирао Мартин. Следећи пример је одредишна страница коју можете користити за продају било које врсте производа. Углавном су то дигиталне робе које корисник може преузети, тј. Апликације, фотографије, иконе, предлошке итд.
Оригинал Соурце - Довнлоад
Али најбољи део његовог дизајна је да је веома флексибилан за почетнике. Заглавље и даље користи малу горњу навигацију са великом сликом, али су очекиване корисничке акције различите. Он има велику “Купи га!” дугме које се издваја изнад прегиба. На одредишној страници производа то би привукло више пажње него јКуери слидесхов.
Још једна одлична техника корисничког интерфејса је мали приказ карактеристика иПхоне-а на средини странице. Мартин укључује снимак за преглед иПхоне-а, дугме Апп Сторе и малу листу кључних карактеристика. Када посетиоци траже детаље о производу, не можете учинити ствари једноставнијим него путем форматиране листе.
Још предложака:
Ево неколико бесплатних ПСД шаблона које смо издали у пролазу:
- "БиЗ" Бусинесс Вебсите ПСД Темплатес
- "ТхинкЈуице" Продуцт Сите ПСД шаблон
- Профессионал Бусинесс Сите ПСД Темплате
- "Поло360" Портфолио Сите ПСД Темплате
Можда ћете бити заинтересовани за следеће:
- Шаблони за пословне веб сајтове
- "Ускоро" туториали странице + предлошци
Навигација главне локације
Менији и дугмад су само алати за израду много већих елемената странице. Не може се порећи да главна навигација ваше веб странице има веома значајну сврху. Потребно вам је да ваш сајт буде лако доступан са могућим резервним методама за мобилне кориснике.
Испод је супер навигациона трака са ефектом шавова. Стил истицања може бити приказан као замрачена кутија или као врх према доле који показује на садржај странице. Овај стил је био истакнут током година и изгледа одлично у правом окружењу.
Оригинал Соурце - Довнлоад
Још једна слична фреебие је текстурирана навигација заглавља коју је дизајнирао Еди Гил. Стварно ми се свиђа како овај други навигатор укључује и листу линкова и неке додатне странице. Желите да понудите секундарне везе посетиоцима где могу да пронађу ваше профиле на Вебу.
Оригинал Соурце - Довнлоад
Алтернативни стилови менија
Осим типичне хоризонталне навигацијске траке, постоје и други стилови дизајна који треба размотрити. Вертикалне везе се могу поделити на различите поднаслове, што оставља више простора за садржај странице.
Узмимо за пример мени фреебие испод дизајнираног сајта Ицојам.
Сваки наслов је направљен да се прошири и сажме на основу изабраног објекта. Поред тога, дизајн дозвољава малом бројачу да седи на десној страни сваке категорије. Ово би најбоље испунило навигацију блога како би се пребројало колико постова је поднесено у оквиру сваке теме.
Оригинал Соурце - Довнлоад
Савјети за навигацију / водичи:
- 50+ Чисти ЦСС табулатори засновани на табулаторима
- Бреадцрумб Навигатион Најбоље праксе и примјери
- Изградња мобилне навигације са јКуери
- Кодирање Бреадцрумб Навигатион У ЦСС3
- Пројектовање навигације са мање ЦСС-а
Чистији веб обрасци
Модерно доба Интернета је далеко од статичног састанка. Корисници свакодневно деле информације и међусобно комуницирају. Већи дио овог дијељења текста и медија управља се путем веб образаца.
Требало би да погледамо само неколико примера како можете дизајнирати улазе и дугмад чистих форми. Дизајн ваших елемената може много да помогне посетиоцима да их заиста искористе. И то заузврат гради кредибилитет вашег сајта и повећава број прегледа страница.
Поља за пријаву
Постоји неколико одличних примера за пријаву из ПСД-а који се могу прегледати. Овај логин фреебие виа ВП Сциентист има све ваше стандардне елементе. Два поља за унос за пријаву / лозинку, дугме за слање и потврдни оквири за управљање колачићима за сесије.
Овај модел дизајна је савршен ако можете имплементирати ефекте кроз јКуери. Горња десна стрелица вас наводи да помислите на поп-уп стил прозора. Ово је дивна техника за уштеду простора на Вашој веб страници тако што ћете задржати форму скривену док корисник не кликне на линк за регистрацију.
Оригинал Соурце - Довнлоад
Формулар испод можете бесплатно преузети захваљујући дизајнеру Гил Хуибрецхт. Користио је сличан образац са зрнастом позадином и текстурама папира. Оно што ми се посебно свиђа код Гиловог дизајна су "превелики" елементи. Много је пријатније слетање на образац за пријаву који попуњава цијелу страницу. Корисници могу лако да виде шта куцају и да има мање нереда.
Оригинал Соурце - Довнлоад
Ако сте искусни као фронтенд девелопер користећи ЦСС3 онда је супер лако превести ову графику у код. Можете чак и применити изабрани ефекат спољног сјај и заобљене углове за дугмад и поља за унос.
Контакти
Други формулар који ћете наћи на практично сваком веб сајту је контакт форма. Ово обично укључује поља за име пошиљаоца, е-маил и садржај поруке.
Фреебие испод је одличан пример коришћења прилагођених текстура и икона.
Дизајн такође користи плацехолдер тект уместо ознака. То значи да када се форма прво учита свако поље се поставља са подразумеваном вредношћу (нпр: ваше име). Али када почнете да куцате, резервисано место се брише и ваш садржај се приказује уместо тога. Сви претраживачи који подржавају стандарде подржавају овај ефекат и могу вам уштедити мало простора на страници.
Оригинал Соурце - Довнлоад
Још један диван фреебие за хватање је овај контактни образац са картицама дизајниран од стране талентираних Јонно Риеквел. Овај дизајн је много једноставнији и има ознаке изнад сваког улаза. Ово је одлично решење за веће фирме или стартупе који морају да шаљу поруке преко различитих одељења у компанији.
Оригинал Соурце - Довнлоад
Водичи за контакт форме:
- Формулар за пријаву / регистрацију: Идеје и лепи примери
- Направите образац за пријаву ефеката сложених папира
- Креирајте Ајак-базирани ХТМЛ5 / ЦСС3 контакт образац
Риббонс анд Баннерс
Пре само 6 или 7 година заобљени углови су почели да расту у популарним трендовима дизајна. Сада смо дошли још даље са сенкама и угаоним тракама.
Оригинал Соурце - Довнлоад
Неки од ових елемената могу се користити као врхунци дизајна, као што су бројач коментара или датум објављивања блога. Везана трака изнад је савршена за портфолије или странице пројекта где желите да привучете пажњу вашег посетиоца. Такође можете пробати сличну вертикалну траку где дизајн пада са врха.
Ови ситни ефекти странице знатно напредују како бисте побољшали изглед. Посетиоци ће приметити и волети ове естетске љубазности. Али узмите у обзир да су мале кутне траке само дио овог дизајнерског тренда.
Оригинал Соурце - Довнлоад
Осим тога, дизајнирани баннери постали су веома популарни за изградњу препознатљивости бренда. Можете их користити у свом логотипу, навигацији, почетној страници или чак на истакнутим постовима на блогу. Импликације су практично неограничене са добрим дизајнерским могућностима.
Враппинг тхе Цорнер
Још један врло специфичан ефекат врпце се изводи тако да се дизајн умота око угла странице. Ово гради илузију да је ваша страница 3-Д и врпца је омотана око горњег дијела ваше веб странице.
Дизајн испод је 100% бесплатан за преузимање и може се користити за сопствене пројектне идеје. Можете видјети како би то привукло пажњу посјетитеља и зашто је овај тренд прерастао у тако лудило. Пазите да не претерујете са транспарентима. У већини случајева, они могу бити веома досадни попут старијих "веб 2.0" сјајних / пресликаних ефеката.
Оригинал Соурце - Довнлоад
Пројектовање помоћу дугмади
Осим хиперлинкова, ви ћете добити највише интеракције са посетиоцима помоћу дугмади. Ове ставке странице могу да раде било шта уз помоћ јКуери и Ајак позива, осим што можете користити и дугмад за повезивање са статичким садржајем, као што су, на пример, фреебие довнлоадс \ т!
УИ кит испод, дизајниран од стране Матт Гентиле има много више од само дугмади. Његов ПСД сет је фантастичан за почетнике у потрази за градијентима и текстурама за изградњу сличних форми. Често ћете наћи много квалитетније дугмад у УИ киту него са појединачним ПСД-овима.
Оригинал Соурце - Довнлоад
Како креирати варијације
Док проводите време практикујући ове технике, желите да створите много различитих стилова током времена. То може резултирати пребацивањем сличних тастера између различитих пројеката и распореда. Добар пример су млечни тастери које нуди дизајнер Роберт ван Клинкен.
Оригинал Соурце - Довнлоад
Сваки од три оригинална дугмета има другачији стил градијента, изузев ховер и активних стања која изгледају слично. Када радите у Пхотосхопу, морате да ускладите боје између градијента или да преместите боје на слој ефеката. Са овим разумевањем можете чак и да направите сопствена дугмад за бесплатни сет за довнлоад!
Оригинал Соурце - Довнлоад
Воод + Папер Тектурес
Када вам је потребно да зачините своје основне дизајнерске дизајне онда ћете морати да се померите према више лукавим методама. Текстуре су увијек добродошле ако их можете правилно имплементирати преко ЦСС позадина или садржаја сет-видтх. Две од најпопуларнијих текстура које сам видео су дрво и празни папири.
Идеја за бележницу је заиста једноставна, али може да се претвори у цоол дизајн брендирања или као део елемента корисничког интерфејса или уграђеног у целину вашег изгледа. Али папир не изгледа сам по себи на најбољи начин, а друга текстура може помоћи да се стилови уклопе..
Оригинал Соурце - Довнлоад
Слике ће се истицати и изгледати дивно умотане у спољну љуску. Читав концепт текстуре је да вашој веб локацији да одређени осећај или емоцију. Дрвене теме могу изазвати осјећај дома и природе. Ту је чак и страшан дрвени веб УИ кит за преузимање од Јеремиах Вингетт. Ако се осећате креативно, покушајте да саставите неке од сопствених текстура и видите како они функционишу у окружењу заснованом на вебу.
28 Текстура дрвета високе резолуције
Закључак
Најбољи веб дизајнери су они који свакодневно вежбају и никада не дозвољавају да се њихови неуспех одврате од својих крајњих циљева. Морате бити одговорни и брзо се враћати из оба успјеха и неуспјелих покушаја. Савјети и фреебиес у овом водичу би требали бити добра полазна точка за почетак учења о томе како изградити различите концепте страница за веб пројекат. И желели бисмо да прочитамо ваше мисли о том питању у области за дискусију.
