Питай дизайнер #2: Как и защо да съставите бриф, ако правите сайта си сами

Защо брифът за уеб сайт е важен за дизайна – практически съвети за визията, стилистиката и детайлите

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

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

Като начинаещ дизайнер подходих към професията с вдъхновението на твореца. Бях убедена, че моята работа е да създам красива визия, която клиентът да харесва и чрез която потребителят да използва сайта с удоволствие. Искрено вярвах, че това, че съм художник, ще ми е в плюс при създаването на криейтиви.

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

Днес ще споделя как всеки от въпросите в брифа е предмет и на дизайна и по какъв начин се осъществява чрез него. Ще илюстрирам с примери и от моите сайтове, за да съм максимално ясна в контекста на фрийлансър, който си прави сайта сам.

– Защо да съставите бриф

– Кои са основните елементи на брифа

– Как елементите на брифа се отнасят към дизайна на сайта

• Бранд
• Контекст
• Аудитория
• Източници на трафик
• Цел
• Структура и дизайн
• Съдържание
• Референции
• Срок

Защо да съставите бриф

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

Той обхваща проекта в неговата цялост и ви позволява да не пропуснете важни детайли.

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

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

Ясният план е полезен и при определяне на бюджета. По него ще прецените дали можете да изградите всичко още в началото. Ако не – ще ви даде възможност да разграничите елементите от първостепенна и второстепенна важност.

Брифът е и опорната точка при измерване на резултатите. След като сте направили сайта и сте го популяризирали, проверявайте периодично дали той наистина изпълнява целите си, доколко е ясен и удобен за клиентите и какви ползи ви носи. Когато потребителите не вървят по заложените от вас стъпки, е време да го оптимизирате. Най-често се налага редакция на съдържането и/или структурата, но дизайнът е ключов за възприемането на това съдържание.

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

Кои са основните елементи на брифа

• Бранд. Кои сте вие, какво правите и за кого сте полезни? Имате ли предишно присъствие на пазара и онлайн и какво е то?

• Контекст. Каква е сферата ви и какво правят конкурентите ви?

• Аудитория. Кои са хората, които ще използват сайта и какво искат да постигнат чрез продукта/услугата ви?

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

• Цел. Каква е крайната цел на уеб сайта? Тя невинаги е същата като целта на бизнеса/дейността ви.

• Структура и дизайн. Каква е търсената стилистика, какви са тенденциите, конкурентите, нагласите на потребителите?

• Съдържание. Какъв ще е основният начин за предаване на информацията – текст, видео, изображения?

• Референции. Каква стилистика харесвате, кои сайтове са ви удобни за ползване, кои реклами определяте като добри, с какъв тип дизайн не желаете да ви асоциират?

• Срок. Кога искате да завършите сайта и реалистичен ли е този срок?

Как елементите на брифа се отнасят към дизайна на сайта

Fineluart Design Portfolio – представяне на бранда и дейността

Бранд. Кои сте вие, какво правите и за кого сте полезни? Имате ли предишно присъствие на пазара и онлайн и какво е то?

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

Затова, преди да започнете да правите сайт, си изяснете максимално какво е целта му. Това ще ви зададе и посока за начина, по който да представите себе си пред потенциалните клиенти:

• Как да покажете кои сте: сложете логото си в хедъра, ако е подходящо и във футера. Изградете сайта си със своите бранд цветове или ако нямате такива – определете ги сега. Използвайте собствени снимки поне в разделите, в които описвате себе си и дейността си. Покажете лицата на екипа си (или поне на основните хора в него). Разказвайте истории чрез снимки – ежедневието в офиса, работните места, доволни клиенти с вашия продукт/услуга.

• За кого сте полезни: изберете визия, снимки, шрифт според аудиторията; включете изображения с места, на които потенциалните ви клиенти обичат да ходят (ако предметът на дейността ви го позволява/изисква). Така показвате, че ги познавате и сте готови да отговорите на техните нужди. Създавате доверие и ги предразполагате да се чувстват комфортно. Ако са младежи, можете да използвате по-разчупен дизайн и повече емотикони. Младежите обичат да се забавляват и да „разцъкват“. Ако са собственици на бизнес, заложете на по-строга визия – не им губете времето. Ако са родители, подберете ярки комбинации от цветове и закачливи форми – те са загрижени за децата си, покажете, че и вас ви е грижа.

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

Сайт на Дамян Петров – художник

Контекст. Каква е сферата ви и какво правят конкурентите ви?

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

Така е, защото се съобразяват с потребностите на клиентите си и ги улесняват максимално. По отношение на общата композиция, това наистина е важно и за дизайна. Но като визуална стилистика не е необходимо да се стремите да изглеждате като конкурентите си. Напротив – постарайте се да се отличите от тях. Можете да го направите с по-различен тип снимки. Или с по-ярки цветове. С фотографии с изчистен фон. Дори с черно-бели фотографии, ако дейността ви позволява. Можете да заложите на криви линии или овални форми, да използвате контрастни цветове или повече въздух между елементите. Даже, можете да пробвате с някаква провокация, ако не държите на по-делово излъчване.

Галерия Fineluart – хедър с най-характерните творби, кратко описание, фокус върху продукта

Аудитория. Кои са хората, които ще използват сайта и какво искат да постигнат?

Определете общия профил на своите клиенти. Първо като демография (пол, националност, възраст, социално и материално положение), после като нагласи и вътрешна мотивация да използват вашия продукт/услуга.

• Демографията ще ви помогне да подберете общия тон на визуалната комуникация – дали е удачно да използвате по-провокативни визии, дали да подберете по-четливи шрифтове, може ли да включите тъмен фон, да използвате иконки и емотикони, във визиите да преобладават фотографиите или илюстрациите.

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

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

Галерия Fineluart – фокус върху продукта, възможност за задържане на потребителя чрез СТА секция и линковевъв футъра

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

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

Много често собствениците на сайтове разглеждат вътрешните страници като продължение на началната. Но потребителите могат да влязат директно в сайта от всяка една негова страница. При това положение, не бива да ги оставяте да прочетат един текст и да си отидат. Една от причините винаги да поставяте логото си в хедъра е познаваемостта на бранда – така хората, които идват и си отиват, ще ви запомнят и следващият път, когато попаднат на ваше полезно съдържание, ще имат история с вас. За да ги задържите, можете да направите следното – след края на съдържанието поставете елементи, които привличат вниманието и водят към информация за вас и дейността ви. Може да им предложите още линкове към тематични статии, секция с най-търсените продукти, кратка информация за автора и т.н.

Помислете за присъствието на такъв елемент и най-вече – кой би бил най-подходящ според съдържанието на страницата. Ако е статия в блога за използването на ваш продукт, дайте линк/бутон към него с възможност за закупуване. Ако самият сайт е блог, оформете кратко представяне за себе си със снимка и дайте възможност да прочетат други ваши статии. Ако имате новинарски сайт, добавете няколко секции: последни новини, актуални новини, най-четени и т.н. Ако сайтът е представителен за дейността ви, покажете най-важните си услуги със снимка, въведение и линк към страницата с описанието.

Оформете визуално този тип елементи така, че да си личи, че не са част от текстовото съдържание, но и че са достатъчно важни, за да им се обърне внимание. Например чрез фон, рамка, снимка, стрелка или бутон.

Галерия Fineluart – хедър с най-характерните творби, ясно послание, колаж с видовете стилове, които са включени в галерията

Цел. Каква е крайната цел на уеб сайта? Тя невинаги е същата като целта на собственика му.

Естествено, крайната цел на един фрийлансър е да печели пари от това, което обожава и с което се справя най-добре. Но невинаги това се осъществява директно чрез сайта. Когато става въпрос за онлайн магазин, целта е продажба. Ако предлагате услуги, крайната цел е изпращане на запитване. За новинарските сайтове и блогове – четене на статии. За влоговете – гледане на видео.

Как това се отразява на дизайна? На първо място е важно за визуалната йерархия на елементите. Тези, които се отнасят пряко към основната цел, трябва да са по-големи, ярки и категорични. Останалите могат да са с по-приглушени цветове и не толкова забележими. Използвайте няколко типа бутони, чието оформление да се повтаря, където и да ги поставите. Един с наситен цвят и контрастен надпис за основното действие, което искате да предизвикате. Останалите да са сиви, по-светли или пастелни. Линковете (като „Прочети повече“) да си останат, цветово, като всички останали линкове в сайта, освен ако четенето на статии не е ваша основна цел. Поддържащите страници (като блог в онлайн магазин) трябва да водят към основните, но не и обратно.

Fineluart Design Portfolio – хедър с бранд стилистиката, фокус върху продуктите/услугите

Структура и дизайн. Каква е търсената стилистика, какви са тенденциите, конкурентите, нагласите на потребителите?

Редно е да съчетаете стила на бранда си с тенденциите и очакванията на своя клиент. Например в момента е на почит минимализмът. Не просто да има малко елементи и цветове, а да не съдържа повече от необходимото. Затова използвайте изчистена тема, вложете само необходимите елементи и я брандирайте с вашата характерна стилистика.

Първо си изяснете структурата – какви страници ще включите, колко, кои от тях са по-важни, кои ще присъстват в главното меню, колко от тях са поддържащи и е редно да препращат към основните. Това ще определи кои страници да са по-информативни и в кои да разгърнете творческо оформление.

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

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

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

Поставете различни елементи с резюмета от най-важното за дейността – акценти с вашите предимства; секция с уточнение с какво сте по-различни; няколко снимки с линк към галерията; продукти/услуги с кратко описание и линк към продуктовите страници; мнения на ваши клиенти; последните статии в блога; карта с адреса; форма за обратна връзка. Ако страницата е по-дълга, е добра практика да поставите втора секция с call-to-action, като призивът е насочен към основната мотивация на хората да използват съответният продукт/услуга. Подборът на тези секции отново зависи от целите ви – не слагайте нищо излишно и не пропускайте нищо важно.

Във футера поставете основни акценти от дейността си, логото, необходимите от правна гледна точка линкове. Добавете отново, така че да се откроява визуално, най-важния призив за действие, съчетан с добре написано послание. Най-накрая дайте възможност на посетителите да ви последват в социалните мрежи или да прочетат блога ви, за да продължат да са ангажирани с вас, ако още не са на етап да поръчват/пишат запитване.

След като сте направили първа страница, ще имате ясна идея как да създадете и вътрешните страници. Те следват резюметата, които вече сте поставили и ги разгръщат за по-лесно възприемане. В тях разглеждате всяка услуга/продукт поотделно. Имате свободата не просто да ги опишете, но и да добавите акценти, изображения, видео демонстрация , всичко, което би задържало потребителя в сайта.

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

Галерия Fineluart – фокус върху снимките на продукта, възможност за преминаване към поръчка – основната цал на сайта

Съдържание. Какъв ще е основният начин за предаване на информацията – текст, видео, изображения?

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

• Ако сайтът ви е представителен или дейността ви е свързана с текст, дизайнът трябва да е по-изчистен, с по-пастелни цветове и с по-малко нюанси. Изображенията е по-добре да са вътре в текста, за да допълват информацията, да разчупват големите текстови блокове и да привличат вниманието към определени послания. Отделяйте важните елементи по някакъв начин – чрез фон, иконка, рамка и т.н. Може да имате няколко типа важни елементи – цитати, изводи, съвети. Изберете различно оформление за всеки от тях и го използвайте по един и същи начин навсякъде.

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

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

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

• Ако професията ви е по-техническа, можете да използвате схеми, вместо изображения.

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

Adobe Creatives Types

Референции. Каква стилистика харесвате, кои сайтове са ви удобни за ползване, кои реклами определяте като добри, с какъв тип дизайн не желаете да ви асоциират?

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

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

Срок. Кога искате да завършите сайта и реалистичен ли е този срок?

Щом ще работите по план, няма как да пропуснете залагането на реалистични срокове. Определете срокове за цялостно изпълнение и за приключване на различните етапи. След като сте си написали брифа, ще можете да прецените за кое колко време ви трябва. Първо отделете време за проучване на пазара, нишата, конкуренцията, примерите, темите за избраната платформа за сайт, аудиторията. След това – за изграждането на началната страница. Доста често се случва нейното създаване да отнеме толкова време, колкото всички останали взети заедно. Предвидете и срок, накрая, за изпипване на детайлите.

Не забравяйте на всеки етап да сверявате дали не сте се отклонили от основната концепция, цялостната визия и структурата, подходяща за вашата аудитория.

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

===

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

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

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