Висуал Цонтент Дирецтион Шта требате знати
Тхе визуелни правац садржаја је мање широко дискутован, али кључан аспект веб-дизајна високих конверзија. Сваки посетилац "упија" нови сајт на пуњење прве странице - било да то раде свесно или не.
Естетика игра улогу, али то је више о укупни дојам дизајна. На тај осећај могу утицати размаци, типографија, симетрија, али углавном односе између елемената странице.
Дизајнери желе посетиоце останите на страници и наставите да се померате тако што ће привући њихову пажњу и заинтересовати их за сајт. Принципи дизајна увек треба да се фокусирају на функцији пре форме. То значи да дизајн треба допунити садржај, не увући га као накнадну мисао.
У овом посту желим вам показати неколико савјета о томе како можете побољшајте изглед и визуелни садржај на вашем сајту.
Фокусирајте се на композицију
Сваки део сајта се гради на укупан распоред. Овај укупни распоред ствара композицију која прати правила гешталт теорије која то наводи цјелина је увијек већа од зброја дијелова.
Појединачне области странице долазе заједно формирају целину. Елементи дизајна морају да се изграде гравитација о садржају; све на страници треба природно усмерите посетиоце све док не дођу до дна странице.
Због тога су везе између различитих делова садржаја (слике, текстови, дугмад, итд.) Толико важне за дизајн.
Ваш циљ би требао бити подстицање људи да прегледате сајт из сопствене склоности. Лакше је рећи него учинити, али можете много тога научити проучавање реалних примера.
Почетна страница за Монкоп је одличан пример визуелне хијерархије и текст и слике. Много простора се користи између елемената, а типографија надопуњује брендиране векторске илустрације.
Док се померате, приметићете равни хоризонтални блокови страница подељено по бојама, границама и графици. Они су изграђени десигн паттернс на уму конзистентност понуде на целој страници.
Према дну, наћи ћете раздвајање у две колоне са сликама на једној страни, текст на другој страни. Слике такође свап сидес у обрасцу десно-лево-десно-лево. Ово привлачи пажњу, и разбија монотонију типичне странице док је још одржавање природног тока у садржају.
А сличан естетски дизајн може се наћи на веб страници Пицјумбо-а, одредишне странице за фото-аддон за Пхотосхоп и Скетцх кориснике.
Почетна страница ставља фокус на лого и видео за преглед. Док се померате, приметићете прилагођене анимације које се крећу по целој страници. Ова анимација стварно хвата пажњу, и добија гледаоца заинтересовани да наставите да се померате.
Све у свему, страница се осјећа опен и лако за прегледавање. Садржај је подељени у хоризонталне блокове са оштром типографијом и чистим иконама.
Размотрите начин на који се разликују елементи странице баланс заједно, простор између елемената, контраст између боја и различити облици. Све ове ствари играју улогу у укупном саставу. Сваки сајт природно привлачи одређену тежину на садржај.
Нема апсолутног одговора јер је различит за сваки сајт. На пример, неке везе за навигацију изгледају боље када су велике и превелике. Други се боље уклапају када су мала са великим словима.
Предлажем вам да проучите друге веб странице у својој ниши. Стварно анализирајте како се састављају. Чак и покушајте поново изградити распореде да бисте видели који елементи коначно чине дизајн "окупљен".
Тип дизајна важи
Начин на који дизајнирате своју типографију утиче на смер садржаја на вашем сајту. Ово има везе са хијерархијом и типом стилове дизајна различитих елемената странице као што су параграфи, заглавља, листе са ознакама, цитати и посебни елементи изгледа као што су колоне или табеле.
Висуалс може утицати и на изглед, па је добра идеја дизајнирати садржај са природном прогресијом. Пишите садржај на такав начин тече низ страницу, и чува људе кроз сваки пасус.
Највећи алат који имате на располагању је око за дизајн. Научите да препознате разлике у типографским елементима и како се оне односе на друге елементе странице. Створите везе између секција страница да бисте разликовали области садржаја.
Неке ствари које можете размотрити:
- Величина текста
- Породица фонтова
- Цолор цонтраст
- Одељци секције страница
- Висина линије и маргине параграфа
- Размак слова и горња / мала слова
На пример, погледајте почетну страницу монитора кампање. Горњи линкови за навигацију користе све капе са малим словима. Остали заглавља на страници пратите овај исти дизајн свих капе која ствара осећај униформности.
Остали већи заглавља на сајту су много истакнутије, и стварно скоче са странице. Само гледајући типичан дизајн заглавља, требало би да буде лако рећи разлику између заглавља и његове упарене копије тела.
Стилови типографског дизајна на монитору кампање су изузетни и они природно се уклопи у распоред. Потребна је пракса да би се постигао овакав резултат, али што више покушавате, то ће бити лакше.
Да бисте сазнали више, препоручујем следеће везе:
- Принципи дизајна: визуелна тежина и смер
- Рад са визуелном тежином у вашим дизајну
- 19 Фактори који утичу на композициону равнотежу
Водећи садржај
Разумем да различите врсте веб страница имати различите методе за вођење посетилаца преко сајта. На пример, одредишне странице желе да воде посетиоце тидбитс оф информатион, смалл ицонс, сцреенсхотс, и свједочанства.
Друге локације као што су блогови обично не доводе људе на почетну страницу одједном. Већина људи земљиште на страници чланка, тако да су изгледи постова на блогу истакните наслов, и привући људе даље у садржај. Ово је место где квалитетни цопивритинг долази у игру зато што желите да читаоци висе од сваке речи.
Потребне су друштвене мреже и веб апликације квалитетно корисничко искуство, тако да је то нешто другачија тема, али размислите како је Фацебоок феед намијењен подстицање померања и интеракције корисника.
Методе дизајна које употребљавате да бисте задржали људе који ће претраживати сајт мењају током времена. Али генерално, ваш циљ је да водич за посетиоце са правцем визуелног садржаја.
Погледајмо а почетне странице и а блог десигн уочити разлике.
Цацтус је статички генератор страница за ОС Кс. Њихова почетна страница пажљиво прати Апплеов стил дизајна - много белих и танких фонтова санс-сериф.
Садржај је организован у колоне, блокове и делове текста једноставном графиком. Ове исте естетике су заједнички за Аппле производе, Тако ће корисници Мац-а уживати у овом дизајнерском стилу.
Информације о производу - укључујући функције и подешавања - су наведене на почетној страници. Сама страница подстиче померање кроз јединствени садржај, основне иконе и наизменични узорак колоне левог / десног блока садржаја.
Циљ је да се пруже информације постојећим корисницима, и да прода Нови Корисници идеју о кактусу.
Сада упоредите тај дизајн са почетном страницом за Тхе Нект Веб. Садржај је много спорадичније на почетној страници блога, јер постоји много различитих тема.
Правоугаоници стварају мрежу која енкапсулира више постова у један распоред. Циљ је овде корисници читају садржај на сајту. Није битно да ли посетиоци нешто преузимају, али је битно да ли су остани да читаш нешто.
Начин на који људи читају је са греат пхотос и цатцхи хеадлинес. ТНВ ради велики посао, а њихов распоред је направљена да би људи прегледали са сличним минијатурама поста у области са стране и после садржаја.
Вођење посјетитеља на одређену радњу разликује се на свакој веб-локацији. Али можете много научити проучавајући шта други успешни сајтови раде, и учити како да их копирате.
Труст Иоур Еиес
Појединачна својства дизајна могу се аналитички објаснити, али се имплементација мијења за сваку локацију. Слика хероја са линком "Прођите даље" не ради исто на свим веб страницама.
Учење дизајна је веома велико визуелни процес. Ваше око за дизајн је најважнији аспект. Морате да правилно видети ствари да идентификује ово визуелна хијерархија. Ако га можете видјети на другим веб страницама, моћи ћете да га реплицирате на својим сајтовима.
Најбољи савјет који имам је да само веруј својим очима. Направите листу омиљених веб локација и проведите 5 минута прегледавајући сваку од њих. Запишите своје омиљене елементе на страници и како они утичу на дизајн. Ово ће вам помоћи интернализовати ове концепте из перспективе УИ / УКС, него у перспективу корисника.
И не бојте се пробати ствари! Нико није био добар у дизајну само читањем чланака о дизајну. Да, помажу - они заиста могу пуно помоћи. Али ти потреба до креирајте ствари од нуле како бисте сазнали шта Извођење радова и шта не.
Тренирајте своје око проучавањем изгледа веб страница које вам се свиђају и рекреирате их. Временом ћете изградити библиотеку образаца која ће вам олакшати пројектовање нових сајтова.
Окончање
Надајмо се да ће вам ови савети помоћи да започнете и пружите основну мапу за праћење. Није лако постати веб дизајнер, али свијету је потребан талент, а никада није било лакше научити те основне појмове.
Студија најбољи примери веб сајтова са елементима странице у којима уживате. Траин оку да препозна односе, а ви ћете брзо развити потребне вештине реплицате те односе у свом раду.
