Примери и идеје најбољег изгледа веб локације


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

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

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

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

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

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

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

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

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

1. Изглед једног колона

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

Такође, изглед са једним колоном делује добро за стварање одличног доживљаја читања, јер фокусира корисника на садржај, без ометања на било коју страну. Зато је блогерска страница Средња усваја за све своје чланке.

Медиј користи изглед једног ступца да би побољшао искуство читања.

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

Оцеан Ресорт користи пуну ширину свог дизајна са једним колоном да би максимизирао утицај слика.

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

Због његове једноставности, мало је изазова око једног распореда једног ступца. Међутим, требате пажљиво размотрити проток информација. Који налог треба кориснику да види ваш садржај?

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

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

Ако се изглед једног ступа чини мало рестриктиван, али и даље имате много садржаја за комуникацију, размислите о усвајању дизајна који је фокусиран на садржај.

2. Садржај фокусиран изглед

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

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

Међутим, ако се изврши правилно, садржај који је фокусиран на садржај идеалан је за било коју веб локацију која је фокусирана на копирање. Тајна је у томе да разбијете садржај унутар овог изгледа на мале комаде које је лако пробавити.

Постови на Боагворлд-у разбијају садржај с насловима, листама, сликама и детаљним наводима.

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

Пажљиво размотрити и бочне ступове. Важно је да веб дизајнер постави прави садржај у ове ступце и да они визуелно имају тачну тежину.

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

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

Смасхинг Магазине користи своје бочне ступце за пружање секундарних информација о посту.

Није да је садржај фокусиран на садржај погодан за сваку страницу ваше веб локације. Веб странице често спајају овај изглед са дизајном у стилу часописа.

3. Изглед часописа

Као што име говори, овај приступ распореда се широко користи у часописима или вестима на којима се приказује велики број различитих прича.

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

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

Веб локације са вестима фаворизирају изглед часописа.

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

Овај стил распореда веб страница такође може бити помало неодољив, са великим бројем слика и наслова који вичу на пажњу.

Најефикаснији начин решавања овог проблема је стварање јасне визуелне хијерархије. Другим речима, направите неке од „прича“ већим од других.

Промјеном величина приче они усмјеравају пажњу корисника.

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

Такође помаже да је остатак корисничког интерфејса јасан, са чистом типографијом и једноставним навигационим тракама. Ако ћете користити изглед часописа, морат ћете напорно радити да ствари буду једноставне.

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

4. Распоред решетке мреже

Изглед који изгледа као да прекида њихову мрежу може бити визуелно много занимљивији од традиционалнијих приступа. Такође су одлични за скретање пажње на одређене елементе екрана који пробијају из уобичајених стубова.

Узмимо за пример Веб сајт ВР Арлес фестивала. Запазите како вам скрећу пажњу на навигациону траку тако што се преклапају два ступа.

ВР Арлес Фестивал скреће вам пажњу на навигациону траку тако што се преклапају са два ступа.

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

Овај дизајн скреће пажњу на текст и позива на акцију делимично га преклапајући са сликом.

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

Њихова урођена сложеност је разлог зашто их обично видите како их користе компаније које воде дизајн, као што су дизајнерске агенције или модни брендови. Они показују степен софистицираности дизајна који се свиђа одређеној публици.

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

5. Изглед целог екрана

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

Узмимо за пример, Врсте у комадима. Ово богато и интерактивно презентацијско искуство говори о 30 ангажованих врста.

Специес анд Пиецес је богато интерактивно искуство које се одвија без потребе за померањем.

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

Није да се морате стриктно држати приступа на једном екрану. На први поглед Роук на веб локацији Парламент Скуаре Чини се да је веб локација преко цијелог екрана у истом смислу као и Специес ин Пиецес. Њихова раскошна слика испуњава целокупни приказ.

Ова веб локација користи цео видовњак да би приказала своје врхунске фотографије.

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

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

Ипак, ако имате невероватне слике које ћете показати, борит ћете се да пронађете бољи дизајн изгледа. Али, ако желите опцију да додате опис и позиве на акцију поред тих слика, можда бисте желели да размотрите алтернативни изглед.

6. Наизменични изглед

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

Оно што јој даје име је да се слика наизменично окреће. Тако ће први блок имати садржај са леве стране и слику са десне стране, док ће следећи блок обрнути тај изглед.

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

Вебидо наизменично текст и слике у различитим садржајима блокира своју почетну страницу.

Није да су ови блокови садржаја ограничени на слике и текст. Понекад веб локације замењују слику видео. Једнако тако, садржајна страна елемента може садржавати све, од икона до сведочења или позива на акцију.

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

Цонверткит укључује изјаве и позиве на акцију заједно са њиховим сликама.

Део разлога који су наизменични блокови толико учестали је тај што су једноставан приступ распореду с неколико недостатака. Ако требате да саопштите неколико продајних места, готово увек је то поуздана опција за изглед.

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

7. Изглед на основи картица

Изглед страница на бази картица је још један уобичајени приступ распореду који ћете видети широм веба.

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

То их чини популарним избором за странице са производима са веб локација е-трговине. Омогућава веб локацији да приказује слику производа, опис и цену. Можете чак да додате функционалности попут „сачувај за касније“, као што видите из Веб локација Асос.

Веб локације за електроничку трговину као што је Асос фаворизирају изглед на основу картица за приказ уноса производа.

Међутим, наћи ћете веб локације помоћу распореда заснованих на картицама у било којој ситуацији у којој корисници требају да бирају са листе. На пример, друга типична употреба би била приказивање листе чланака на блогу или вестима.

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

Награде користе изглед засноване на картици за листање постова на свом блогу.

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

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

Други мали проблем је у различитим количинама садржаја. Ако једна картица има више садржаја од друге, она може оставити бели простор било унутар картице или између сваког реда.

Ако картице имају различите количине садржаја, могу оставити размаке између картица.

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

Омогућавањем картицама да попуњавају празан простор, на крају ћете добити естетски угоднији дизајн.

Ипак, ово је мање питање, што објашњава широко прихватање овог приступа изгледа.

Други једнако популаран дизајн је распоред слике хероја.

8. Распоред хероја

Изглед хероја је назван по сликама јунака, оним великим сликама са текстуалним слојевима који доминирају на почетним страницама на тако великом броју веб локација. Аппле добро користи класични имиџ хероја.

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

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

Као што видите из Пикаве и Аппле Веб странице се обично састоје од велике позадинске слике, наслова или каишева и описа. Распоред хероја често долази са истакнутим позивом на акцију.

Ако требате јасно објаснити шта нудите на својој почетној страници или одредишној страници на начин који ће привући пажњу, тада би слика хероја могла бити прави пут. Међутим, то је вероватно опсег њихове употребе.

Повремено ћете видети распоред јунака који се користи на наредним страницама. Али, у већини случајева, слика хероја једноставно одвлачи пажњу од вреднијих садржаја. Зато користите са пажњом.

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

Знатно рјеђа опција за изглед је изглед подијељеног екрана.

9. Подјела екрана

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

Ова веб локација користи распоред дељеног екрана како би објаснила два дела њихове понуде.

Оно што горњи пример чини толико ефикасним је да постоји јасан разлог за распоред подељеног екрана. На веб локацији се јасно види да постоје две стране њиховог посла – дизајн и развој.

Сличан пример је када желите корисницима дати јасан бинарни избор. Подељени екран има пуно смисла у тој ситуацији, јер екран подељује подједнако између две опције.

На пример, агенција за моделирање 62 Менаџмент користи подјељени екран да охрабри кориснике да препознају да ли траже мушки или женски модел.

62 Управа користи дизајн са раздвојеним екраном како би охрабрила кориснике да изаберу између две опције.

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

Слична опција која би обезбедила мало више флексибилности је асиметрични изглед.

10. Асиметрични изглед

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

Предност овог изгледа пред дељеним екраном је што омогућава додавање нагласка на одређеној страни странице. Што више некретнина има страна, више је фокусирате на њу. То вам заузврат омогућава да идентификујете примарни и секундарни садржај.

Ако су постављене примарне и секундарне колоне, приступ можете користити на више начина. На пример, Фелик Лесоуеф користи методу на својој веб локацији за поделу између садржаја и навигације.

Фелик Лесоуеф користи асиметрични изглед да би истакнуо навигацију према својим веб локацијама.

Супротно томе, Ноурисх Еатс веб страница користи другу колону да вам омогући да видите следећи одељак своје веб странице.

Ноурисх Еатс користи овај изглед изгледа да би истакнуо секундарни садржај на видљивији начин.

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

Како одабрати распоред

Читајући овај чланак, направили сте први корак у одабиру правог изгледа за своју веб локацију. Научили сте које су вам опције на располагању.

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

Уместо тога, погледајте веб локације у другим секторима који имају повезане врсте садржаја. Ако имате веб локација брошура намењена Б2Б публици, погледајте друге сличне странице. Исто тако, ако имате веб локацију за е-трговину, погледајте е-трговину у другим секторима.

Одатле сарађујте са својим дизајнером да експериментишете са неким различитим приступима. Наведите их да уоквирују неке идеје засноване на различитим изгледима и видеће шта највише одговара вашем садржају.

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

Истина је да ћете вероватно бирати и бирати између различитих приступа изгледа за различите делове веб странице, и то је у реду. Јер када је у питању изглед веб страница, употреба правог у правом тренутку је критична.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me