9 основних савета за веб дизајн за почетнике самосталне израде

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


Савјети за веб дизајн за почетнике

Ових је дана могуће да било ко буде веб дизајнер. Да, то је одважна изјава – али са повећаном доступношћу софтверу за дизајн отвореног кода као што је Гимп, и са платформама за израду сопствених производа као што су Вик и Веебли преплављују тржиште, граница између аматерски и доброверна веб дизајнер постао је много тањи и магловитији од касног. Занимљивост код креативности је да нико не може одлучити за вас кад сте „спремни“ да испуните одређену улогу. Много роцк звезда никада није држало часове музике; многи успешни уметници никада нису проучавали људску анатомију; а већина веб дизајнера тамо нема формалну диплому. Дакле, ако сте направили веб локацију свог предузећа, да ли можете са сигурношћу рећи да сте „веб дизајнер“? То ћете одредити.

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

Кликните за Твеет

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

Шта је овај водич (а шта није)

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

БРЗИ САВЕТ: Основно знање ХТМЛ-а и ЦСС-а биће од велике користи за сваког новог дизајнера. Ако заиста желите да се ваше руке баве шифрирањем, предлажем да проверите В3Сцхоолс да сазнате више о фондацији.

Основе веб дизајна за почетнике

Идемо на то, зар не? Ево неких од најкориснијих трендова и смерница које треба знати када правите прву веб локацију:

1. Оставите миша, покупите оловку

Ваша веб локација можда већ постоји као леп, комплетан ентитет у вашем уму – зато одмах скочите у Пхотосхоп (или још горе, прегледач и ХТМЛ) да бисте то планирали. Вхоа, вхоа – охлади млазнице на секунду! Не стављај колица пре коња. Прво извадите оловку и тампон папир и почните да уводите своје идеје у нешто лако опипљиво. Ово је важна фаза за мапирање структуре вашег веб локације користећи само правоугаонике, цртеже и надахнуте идеје (често назване вирефраминг). Ствари могу бити супер грубе у овом тренутку; нико то неће видети осим тебе.

Пример сајта са жичаним оквиромЖични оквир веб странице вам помаже да развијете изглед и структуру своје веб странице, истовремено побољшавајући корисничко искуство (УКС) и штедите време.

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

2. Следите хијерархију

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

Задржите садржај „Изнад фолдера“

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

Коришћење слике „Херо“

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

Пример слике хероја / банера

“Преклоп” се може мењати у зависности од уређаја

Ево где ствари постају компликоване – и зашто се не бисте преоптерећивали покушавајући да уклопите све изнад ове магичне линије. У зависности од корисниковог уређаја, димензије екрана могу се јако разликовати. 5К екран који пада на чељусти има вертикалну резолуцију од 2880 пиксела, док иПхоне 5 има мање од половине. То значи да мобилни корисници једноставно неће моћи да ставе што више садржаја у своју некретнину на екрану. (Више о томе касније.)

БРЗИ САВЕТ: Опште правило је да се осигура да се садржај „изнад преклопа“ уклапа у најнижи заједнички називник димензија екрана. То се обично прихвата као 768 пиксела вертикалне резолуције.

3. Типографија је ваш дизајн

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

  • Проверите да ли је текст читљив (избегавајте цветне фонтове!) и довољно велик (обично око 16 пк за тело).
  • Придржавајте се само тога два слова—И пазите да се добро споје заједно!
  • Дајте својим параграфима мало простора да дишу један између другог и довољно их поставите горња облога или маржа на својим насловима да означите јасне прекиде у садржају.
  • Избегавајте дуге редове текста. На очима је лакше да линије параграфа не буду више од тога 15 речи дугачко– и нешто мање него за мобилне екране.
  • Сериф фонтови су обично најбољи само у штампаном облику – осим ако се не користе у великим насловима на вебу.

4. Боје & Контраст је пресудан

Дуго смо разговарали о психологији боја, али концепт се понавља. Боје које одаберете за своју веб страницу играју огромну улогу у томе како корисници перципирају вашу марку, као и колико мотивирани могу да се осећају у предузимању акција (тј. Куповини ствари) путем ваше веб странице. Зашто? Па, свака боја изазива одређене емоције, или због своје прирођене природе или због културног условљавања, ове боје су постале повезане са одређеним врстама пословања. Ако би дечија играчка компанија или финансијски саветник целокупну веб локацију офарбали у црно црну боју, апсолутно би послали погрешне сигнале намењеној публици. На супротној страни, јарко наранџасто или пријатно плаво, привлачиће савршен тон и свест за своје купце.

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

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

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

БРЗИ САВЕТ: Најбоље је избегавати пуна засићеност са бојама на вебу. Чиста црвена (хек вредност # фф0000) је мало превише оштра на очима. Слично томе, чисто црно (# 000000) за фонтове превише вибрира за очи, док нешто смањена црна (# 333333) олакшава читање.

Такође желите да се ваш текст покаже са позадинским сликама. Употреба врло заузетих фотографија може одвратити текст, тако да избегнете овај проблем или користите мање детаљне фотографије или користите слој, рецимо, ргба (51,51,51,0.5) да помогнете омекшавању слике испод текста..

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

Контраст такође игра улогу у томе како су корисници привучени одређеним кључним елементима ваше веб локације. Ваши најважнији тастери за позивање на акцију морају привлачити око употребом контрастних боја. Плави „Купи одмах!“ дугме губи своју хитност и вреди када га прогута веб локација која свугде користи плаву боју – али црвено дугме на истој страници привлачи пажњу корисника вичући: „Хеј! Кликни ме!”

6. Коришћење слика

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

Разумевање типова датотека & Компресија

Постоји додатни корак који се мора предузети за употребу слика на вебу. Оне фантастичне фотографије које добијете са веб локација Схуттерстоцк и иСтоцк могу да буду прилично масивни (5.000+ хоризонталних пиксела и 10+ мегабајта) што је у реду за штампање, али нису погодни за веб локације. Не постоји свако супер брзи Фибер Интернет, тако да морате смањити величину слика да бисте их прилагодили времену учитавања (да не спомињемо да ће 40% посетилаца отићи ако на сајту треба дуже од 3 секунде!). Обично желите да задржите сваку слику на највише од 500 килобајта по величини, мада би ваша просечна величина датотеке вероватно била око 100 килобајта.

  • ЈПЕГ је стандардни формат за фотографије. То је губитнички формат, што значи да се квалитета слике смањује приликом компримовања. Ако користите ЈПЕГ за позадинску слику пуне ширине, препоручујем вам да њена хоризонтална резолуција буде на не мање од 1200пк. За опште намене, избегавајте употребу било које слике са мање од 600 пк хоризонтална резолуција, јер ће се вероватно појавити мутно на модерним екранима.
  • ПНГ је преферирани избор графике или слика које захтевају транспарентност. То је формат без губитака, који је одличан за задржавање квалитета слике, али такође може повећати величину датотека. Генерално ћете користити ПНГ графику за илустрације, иконе или мање слике које се због њихове транспарентности могу сложити на друге елементе. Ретко ће вам требати ПНГ да буде већи од 1000пк.
  • СВГ (скалабилна векторска графика) је новији формат који замењује ГИФ па чак и ПНГ у неким случајевима. Лепота СВГ-а је у томе што он може бити велик или ситан на екрану колико вам треба, а да притом задржи савршену јасноћу и јасноћу (и још увек је мала величина датотеке). Требали бисте размотрити употребу СВГ-а за било који лого, икону или векторски графички на вашој веб локацији; како су високи ДПИ дисплеји сада већ уобичајени, оштрина СВГ-а ће пружити највећи квалитет слике.

Примјери врсте сликовних датотека

6. Дизајн мобилног уређаја

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

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

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

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

БРЗИ САВЕТ: Проверите да ниједан појединачни елемент на вашој веб локацији, посебно ако је интерактиван, није мањи од 44пк од 44пк величина. Зашто? Ово је најмања мета која може бити тамо где прст још увек прецизно може да је додирне.

7. Нека ствари буду поравнане

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

8. Нека буде једноставно

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

Да ли су потребне сенке у кутији? Луди, украшени обрасци? Десетине боја? Вероватно не.

9. Велики отворени простори

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

Закључак

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

Рођен је дизајнер!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map