Питай дизайнер #5: Как да създам визия за уеб по темплейт

Новата статия на Любомира Попова е за фрийлансъри и собственици на малък бизнес, които сами се оправят с дизайна на сайта и рекламните си материали. Ако и на теб ти предстои да търсиш готов темплейт за сайта си, за лендинг страница или за така модерните картички–мотиватори с мъдри мисли, прочети съветите на Люба – ще ти помогнат да направиш по-добър избор.

Можеш и да я питаш, ако нещо не ти е ясно или имаш нужда да си свериш часовника.  Напиши въпроса си в коментарите. Люба ще отговори на първите 5 до събота вечер.

===

Все повече се използват предварително подготвени визии, дизайн темплейти и мокъпи от сайтове като canva.com, freedesignresources.net или envato.com. И това е
супер. От една страна спестява време, а от друга – дава възможност на хората, които си
изработват визиите сами, да тестват своите идеи в съчетание с професионално
направени дизайни.

Когато създавате криейтиви самостоятелно, обикновено започвате с идеята, въз
основа на която подбирате подходящи снимки, шрифтове, цветове и елементи.

Когато работите по шаблон, процесът е обратeн – първо виждате готовия „продукт“, харесвате го и решавате да го използвате за своите цели. В този случай е твърде лесно да се „подхлъзнете“ просто да смените изображенията и текста, за да получите страхотен дизайн. А всъщност, промяната на дори един елемент в дизайна, може да промени цялата композиция до неузнаваемост. Ето защо, е необходимо да имате предвид някои основни неща още на ниво мислене, за да можете да
подберете най-подходящия дизайн и той да сработи с вашите материали.

Има два подхода при създаване на визия за уеб по темплейт:

1.  Да измислите идеята, да подберете неговите компоненти и после да търсите
   темплейт, на който да паснат.
2. Да намерите възможно най-подходящия темплейт за вашата цел и според неговата визия, да подберете изображенията, текстовете и останалите елементи.

Първият вариант е доста по-сложен за изпълнение, защото е трудно да се намери
нещо предварително подготвено, което да пасва точно на конкретна идея. Често, при този подход, се налага доработване на дизайна, а понякога това излиза по-трудоемко, отколкото да се изработи от нулата.

Вторият подход е доста по-лесен, а и е по-подходящ за хора, които си правят сами дизайна.

Тук ще вметна, че съветите в тази статия са подходящи не само, когато изработвате
цялостна визия (например за реклама), но и когато подбирате фон за хедъра или
слайдер в сайта си. Въпреки че във втория случай търсите само едно изображение, то ще е част от композиция заедно с заглавията и бутоните, които ще застанат върху него. Затова трябва да го подберете така, че да пасне на тази композиция, да я подсилва и да е в хармония с останалите елементи.

Кои са основните елементи на криейтива и какво да имате предвид при подбора
им?

Цел на дизайна

Както винаги, наблягам на целта като водеща, защото именно тя определя целия криейтив – има разлика между композиция за хедъра на сайт, визия за реклама или
банер в сайт. Има разлика и във възприятията на потребителя в зависимост от това
къде вижда изображението – в нечий сайт или като Фейсбук реклама, например.
Опитвайте се да си представите контекста на потребителя в момента на срещата му с криейтива и подбирайте темплейтите и според това. Не се изкушавайте просто да харесате нещо, без да прецените как ще изглежда в реална среда.

Не забравяйте и какво е основното действие, което визията ви трябва да предизвика. Ако правите реклама, е силно препоръчително да имате бутон, стрелка или някакъв елемент, който да подтиква към изпълнението му.

Неслучайно, темплейтите са предварително измислени спрямо различните цели – местоположение на изображението (реклама, сайт, лендинг страница); цел на
криейтива (да продава, да представя, да забавлява); какво представя (услуга, продукт,
локация, личност); сфера на дейност (автосервиз, туризъм, изкуство). Хубавото е, че в
сайтовете за предварително подготвени визии има включени категории и/или филтри – по вид дизайн, сфера на дейност, предназначение и т.н. Това е така, защото много от
елементите в дизайна (като цветове, форми, шрифтове, иконки) се асоциират с
определени сфери и възможни действия от страна на потребителя. Въпреки че
дизайнерът не е работил конкретно за вас, той е обмислил всеки детайл така, че да
действа в подкрепа на цялостното внушение.

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

Бранд идентичност

Ако имате изградена бранд идентичност (или поне следвате някаква лична
стилистика), е задължително тя да бъде заложена в отделните ви криейтиви. Тук
вариантите са 2: или подберете темплейт във вашата стилистика, или бъдете готови да
промените цветовете и част от елементите, така че да си паснат с вашия стил.

Не забравяйте да гледате на логото като на елемент в синхрон с цялостната
композиция – то трябва да изпъква, но и да не стои като кръпка отгоре. Когато подбирате, гледайте дизайнът да позволява добавяне на лого. Може да има включено примерно лого (или иконка) – тогава преценете дали формата му е подходяща – ако е квадратна, а вашето лого е продълговато, ще е изключително трудно да го сложите по убедителен начин. Ако има празно пространство, преценете дали то е подходящо за добавяне на водещ елемент (какъвто е логото) или е част от т. нар. „въздух“, чиято цел е да накара водещия елемент да изпъква и да привлича внимание.

Продукт или услуга

Има значение какво ще рекламирате/представяте чрез визията си. Ако става въпрос за
услуга, ще трябва да визуализирате използването ѝ или емоцията на потенциалния
клиент преди или след използването ѝ. Ако е продукт, той трябва да присъства на
централно място. Под „централно място“ нямам предвид в центъра на композицията,
нито да е най-видимият елемент, а по-скоро, че неговото присъствие трябва да е
осезаема част от цялата „история“ в криейтива.

Ако се изкушите да подберете темплейт, в който продуктът е изрязан и наставен върху
фона, внимавайте! Ако не можете да изрежете своя прецизно, по-добре търсете
темплейт с цялостна снимка на продукт. Или снимайте вашия на равен фон, който да
използвате без да се налага да режете.

Снимки/ изображения

Както обикновено, ще започна с препоръката винаги да използвате висококачествени
изображения, независимо дали са ваши снимки или stock фотографии. Имайте
предвид, че изображението една от най-въздействащите части на криейтива. Неправилният му подбор може да съсипе цялата идея, колкото и да е добра като
замисъл. Ето някои от основните моменти (а и най-често срещани грешки), за които
трябва да внимавате:

• В темплейтите винаги са използвани висококачествени изображения, затова внимавайте, ако вашите са с ниско качество. Още при подбора на шаблона, се опитайте да си представите дали разполагате с подобна снимка и, ако не – дали можете да си я набавите/заснемете.
• Ако в момента не разполагате с професионално заснети снимки и решите да си заснемете изображенията сами, огледайте цялостната композиция преди да снимате. Какво е осветлението? Продуктът ви изпъква ли спрямо фона? Има ли излишни детайли (като кабели, кошчета за боклук и т.н.)? Тествайте различни ъгли на заснемане, пробвайте да снимате и различни детайли, а не само една
  обща снимка.
• Дали посланието идва от самото изображението и дали, ако го смените, ще отнемете основната идея.
• Как са композирани останалите елементи (текст, бутон, ефекти, рамки) спрямо изображението и разполагате ли със снимка, чийто композиционен център е на същото място (за да не се окаже, че някой бутон закрива важна част от вашата снимка например). Това е необходимо, за да избегнете цялостно преправяне на дизайна.
• Цветовата гама на снимката трябва да е в хармония с общата цветова гама. Помислете дали вашето изображение няма да застане твърде дисхармонично. Съответно, ако нямате подходящо, бъдете готови да обработите изображението и/или нюансите на останалите изображения.
• Някои темплейти са с по 2-3 изображения. Имайте предвид, че те са подбрани (и/или обработени) така, че да си отиват помежду си. Когато ги подменяте със свои, подбирайте ги така, че да не са в различна гама (едното да е твърде ярко, а другото да е с избледнели цветове), да не са с различно осветление (светлината трябва да идва от една посока, например отдясно), да не са с твърде различна композиция (едното да е в твърде близък план спрямо другите). Разбира се, тези неща могат да бъдат пренебрегнати, ако са търсен ефект или ако ги комбинирате така, че да има логика в разликите им (например да имитират симетрична композиция или контрастна хармония).

• Ъгъл на заснемане и равнини в изображенията. Ако ще композирате няколко елемента, внимавайте да не са в различни равнини. Например, ако искате да наставите чаша от една снимка върху маса от друга снимка, а те не са снимани от един и същи ъгъл, то може да се получи ефект на левитираща и/или изпадаща чаша. Това винаги е дефект и ако нямате подходящи снимки, то по-добре сложете чашата върху някакъв фон, отколкото върху масата.
• Ефектите около изображението винаги са мислени като цветове и форми, част от цялостното равновесие в композицията. Например по-минималистична снимка може да е съчетана с повече детайли. Ако я смените с много детайлна снимка, то ще направите целия дизайн претрупан. И обратно – детайлната снимка изключва съчетание с още елементи. Ако я смените с по-изчистена, рискувате визията ви да изглежда недовършена.
• Понякога върху изображението има текст без фон под него. Тук е редно да прецените дали вашето изображение е с подобни цветове на същите места. В противен случай текстът може да се изгуби. Другият вариант е да съумеете да направите текста контрастен (с фон, рамка, светлосянка или друг ефект).
• Когато има текст върху снимката, гледайте как е разположен спрямо основния елемент в нея. Например, ако текстът е вляво, а от дясно има човешка фигура, подберете снимка, която да съответства на това изображение. Разбира се, можете да промените разположението на текста, но в такъв случай ще се наложи да преправите почти целия дизайн, т.е. нуждата от предварително подготвена визия, се обезсмисля.

• Форматът на снимката. Съобразете се с това дали снимката е квадратна, продълговата или висока. Ако нямате изображение в подобен формат, може да се наложи да преосмислите цялостната композиция.
• Какъв е стилът на използваната фотография. Ако смените минималистично (или макро) изображение с нещо по-богато на детайли, ще смените цялостното въздействие. Подбирайте темплейтите си и според това – или търсете нещо с подобни на вашите снимки, или си набавете подходящи изображения спрямо избрания шаблон.
• Внимавайте дали снимките внушават движение или посока (например път, поглед, хоризонт, наклон). Ако е така, тези посоки не трябва да си пречат, за да не се разфокусира вниманието на потребителя.
• Ако има хора на снимките, не забравяйте за погледа. Дали гледа право в очите на зрителя или ако гледа нанякъде. Дали погледът е в посоката, към която искате да насочите вниманието – към слогана, логото, бутона.
• Ако сте се спрели на векторно изображение (или иконка), е необходимо да направите много прецизен подбор. За разлика от снимката, която може да внушава доста по-широка палитра от емоции, едно рисувано изображение е стилизирано и с предварително вложена конкретна идея. Т.е. то предава основната идея много синтезирано и затова е необходимо напълно да съответства на вашето основно послание.

Текст и шрифт

След като сте заковали вниманието на потребителя с ефектно изображение, идва мястото на текстовото послание. Освен да е ясно като изказ, то е и визуална част от
композицията. Ето основните моменти, които да имате предвид още на ниво мисъл и подбор:

• Текстът като форма. Той е част от визуалната композиция и неговите форми също влияят на цялостното излъчване на визията. Погледнете на него като на самостоятелна форма. Забележете къде се засича с останалите елементи. Какво е въздействието на негативните му пространства. Излъчването на шрифта отива ли си като форма на посланието на цялостната композиция.
• Добрите практики изискват да не използвате повече от 2 шрифта и при съчетанието им внимавайте да не са твърде подобни, но и да не се „бият“ помежду си. Едно от най-неприятните неща при работа с темплейт е, че много от шрифтовете не работят на кирилица. Бъдете готови да „изгърмят“, когато сменяте примерните текстове със свои и да се наложи да търсите други шрифтове. За типография и комбиниране на шрифтове има изобилие от материали.
  Препоръчвам два от тях, които да използвате като отправна точка по темата: „10 полезни съвети за подобряване типографията на интернет сайта“ и „Успешно комбиниране на шрифтовете“. Ако не сте сигурни дали можете да се справите с комбинирането на шрифтовете, можете да използвате само един, но с 2-3 вариации – bold спрямо regular; различен размер на част от текста; различен цвят; да сложите фон само под част от текста или само под една дума.

• Ако логото ви е текстово (логотип) или е съчетание от знак и текст, имайте предвид, че то също става част от текстовете/шрифтовете в композицията. Когато ги подбирате, гледайте да са в синхрон и с него.
• Съобразете се с дължината на текста. Обикновено текстовете (а и самите думи) на български са по-дълги от английските. Това има значение както за четимостта, така и за баланса в цялостната композиция. Преди да подберете темплейт, можете да разиграете няколко варианта на посланието си и когато търсите подходящ шаблон, да си представите дали някое от тях си пасва.
• Обем на информацията. Понякога е изкушаващо да добавите още информация или да премахнете част от съдържанието в темплейта. Това води до текст или празно пространство, което ще натежи и ще дразни погледа. Ако не сте сигурни как да компенсирате това или как да преправите дизайна, ви съветвам просто да подберете дизайн с подобен на вашия обем от информация.
• Като цяло, не е добра идея да се използват дълги описания. Достатъчно е едно силно послание + името на продукта/услугата + бранда. Оставете описанията за съответстващия пост, статия и/или лендинг страницата. Текстът трябва да бъде четим, особено за уеб, където скоростта на възприемане е толкова висока, че може да се сравни с профучаване покрай билборд на оживен булевард.
• Цветът на текста също е от значение. Ако използвате цветна снимка, е добре да е бял или черен. Ако е върху фон, може и да е в контрастен цвят. Често е добре да е във вашия основен бранд цвят. Тук отново не забравяйте за текста в логото си (ако имате такъв).

Цялост на композицията

Не на последно място, ще напомня че всички елементи на дизайна трябва да са в убедителна хармония. Докато изпипвате детайлите, не изпускайте от поглед
цялостната композиция. Ето основните неща, които да следите:

• Визуална йерархия. Основното послание трябва да се излъчва от
  композиционния център (например продукта; човекът, който ползва услугата; образът, който символизира дейността). Всички останали елементи трябва да подкрепят този център (детайли, рамки, фонове, иконки) или да са негово следствие (текстовото послание, бутонът с призива за действие).
• Пространство или т.нар. „въздух“ в композицията. Не се изкушавайте да правите логото си и/или текстовете по-големи. Напротив, именно повечето въздух около даден елемент привлича вниманието върху върху него. По-малко или никакво пространство между отделните елементи, създава усещане за претрупване и накрая нищо от визията не се възприема, дори основното послание се губи. Понякога пространството идва и от подбора на снимките
  (например път, хоризонт, планински връх, небе). Ако сте подбрали такъв темплейт и искате да смените въпросните снимки, използвайте визии с подобно звучене или бъдете готови да загубите част от това пространство.

• Цветова хармония. Цялата композиция е мислена и като цветова хармония (дори да става въпрос за контрастна хармония). Когато избирате предварително подготвен дизайн, си представете дали вашите изображения и бранд цветове си подхождат с него. И ако не е така, струва ли си да променяте изцяло цветовете на визията или е по-добре да търсите по-подходяща за вас.
• Светлосянка. Окото ни е свикнало да възприема света осветен от една страна (заради слънцето) и ние възприемаме така и изображенията, дори да са с изкуствено осветление или да са илюстрации. Тази наша вродена черта се отразява на възприятията ни за цялостната композиция. Т.е. следете дали всички снимки, елементи и ефекти в дизайна са осветени по един и същи начин. И ако не са, дали това е търсен ефект (например за някакъв контраст), или е нещо, което може да разбалансира цялата визия и да попречи на възприемането ѝ.
• Включени елементи и взаимодействие между тях (снимки, текстове, бутони, рамки, иконки). Ако изберете дизайн с множество елементи, трябва да можете да ги „напълните“ със съдържание. Защото ако просто премахнете излишното, ще нарушите целостта на дизайна и ще се наложи да го преработвате. И обратното – ако изберете минималистична визия, не добавяйте твърде много неща от себе си. В това отношение, е най-добре предварително да имате представа какво желаете да съдържа вашия криейтив и да изберете темплейт с подобен брой (и вид) елементи.

И за финал, не се притеснявайте да тествате. Никъде не е казано, че първият дизайн ще е вашият. Подберете няколко темплейта и пробвайте всякакви комбинации от снимки, шрифтове, иконки, бутони, форми, детайли… В течение на времето ще
намерите своя собствен визуален стил.

И питайте! Винаги търсете второ мнение – от близки, колеги, клиенти. Не
възприемайте създаването на дизайн като еднократно действие, напротив, то е
процес. Бъдете винаги готови да редактирате своите визии, ако забележите, че имат
нужда от подобрения.

А от днес до събота вечер можете да питате мен за всичко, което ви интересува при
работа с темплейтиза дизайн, създаване на визии за уеб, а и за всякакви въпроси за
дизайн – принципни или по ваши проекти…

===

Любомира Попова е уеб дизайнер на свободна практика и художник-сюрреалист с артистичен псевдоним Fineluart.
Създава първия си статичен сайт през 2008. В момента се е специализирала в изработката на WordPress сайтове и визии за уеб. Занимава се с дизайн повече от 17 години, като през повечето време е била част от рекламни фирми и агенции. Създавала е визии за почти всички рекламни среди – външна, печатна, уеб, digital, TV. Работи основно с малки бизнеси в сферата на услугите, макар през годините да е правила реклами за представители на почти всички сфери.

Има професионален интереси в областта на дигиталния маркетинг, графичния дизайн и social media. Това ѝ дава възможност да вижда уеб сайтовете не само като дизайн, а като част от визуалната комуникация между бранда и потребителя. За нея всяка отделна визия е част от цялостно развитие, а не „парче дизайн“.

„Редовно консултирам клиенти и млади колеги и винаги се радвам, когато успея да улесня някого по пътя му в моята (любима) сфера. Ако имате въпроси за дизайн и реклама, съм насреща да помогна, независимо дали става въпрос за принципи в дизайна, тенденции, технически въпроси, видове реклами или се нуждаете от конкретни съвети за личните си проекти. Питайте ме.“ Люба