Визуален дизайн на уеб сайт

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

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

Съдържание

1. Дефиниране на Повърхност на уеб сай. Визуален дизайн
2. Осмисляне на сетивата
2.1. Мирис и вкус
2.2. Допир
2.3. Слух
2.4. Зрение
3. Следвайте окото
3.1. Нови инструменти за проследяване на очите
4. Контраст и еднородност
5. Вътрешна и външна последователност
6. Палитри с цветове и типография
7. Композиция на дизайна и ръководства за стил

Дефиниране на Повърхност на уеб сайт. Визуален дизайн

На ниво Скелет на уеб сайт вие се занимавате предимно с подреждане:

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

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

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

Осмисляне на сетивата

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

В процесът на проектиране това е последната спирка по пътя за предоставяне на изживяване на вашите потребители.

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

Кое от петте сетива (мирис, вкус, допир, слух, зрение) можете да използвате зависи от типа продукт, който проектирате.

Мирис и вкус

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

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

Допир

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

Това включва елементи на интерфейса и дизайн на взаимодействието (като например подредбите на бутоните), както и чисто сензорни съображения, като:

• Форма на устройството. Заоблена или квадратна?
• Използвани текстури. Гладка или груба?
• Вложени материали. Пластмаса или метал?

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

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

Гледайте видео в YouTube: Дизайн на най-новия контролер за Sony PlayStation 5

Слух

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

• Фаровете ви са включени.
• Предпазният ви колан не е закопчан.
• Вратата ви е отворена, но сте оставили вашия ключ в запалването.

Гледайте видео в YouTube: Звуков сигнал на Peugeout при непоставен колан на водача

Звукът може да се използва не само за информиране на потребителя, но и за вдъхване на усещане за индивидуалност на продукта.

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

Гледайте видео в YouTube: Как да използвате вашето дистанционно за телевизори TiVo

Зрение

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

Поради тази причина останалата част от тази публикация е съсредоточена върху това как визуалният дизайн подкрепя потребителското изживяване.

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

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

Всеки има различно усещане за естетика. Това не означава, че решенията на дизайнерите трябва да се основават на това, което изглежда готино на всички.

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

„Въпросът е: Колко ефективно дизайнът поддържа целите, дефинирани на всяко от по-ниските нива на потребителското изживяване?“ 

Например, дали външният вид на продукта прави разграничения между части на архитектурата неясни или двусмислени, подкопавайки структурата?

Или визуалният дизайн изяснява опциите, налични за потребителите, подсилвайки структурата?

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

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

Разгледайте още примери за дизайн във Figma: Профил на Nickelfox

Ако идентичността, която искате да предадете, е техническа и авторитетна, използването на шрифтове от комикси и ярко „крещящи“ цветове вероятно не е правилният избор.

Осмислянето на сетивата не е толкова въпрос на естетика, колкото е въпрос на стратегия.

Следвайте окото

Един прост начин за оценка на визуалния дизайн на даден продукт е да се запитате следните въпроси за потребителите:

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

Екипите по проучване на потребителите понякога използват сложно оборудване за проследяване на очите (Eye Tracking Equipment), за да определят какво точно гледат тестовите субекти, как очите им се движат по екрана, и времето, през което се фокусират върху определена част от екрана или върху дума, фраза или обект.

Гледайте видео в YouTube: ViRETS - Система за проследяване на очите във виртуална реалност

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

През повечето време простото задаване на въпроси е напълно подходящо.

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

След това опитайте да определите къде отива окото.

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

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

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

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

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

1. Дизайнът следва плавен поток.

Когато хората коментират, че даден дизайн е „претоварен“ или „претрупан“, те наистина реагират на факта, че дизайнът не ги води гладко из страницата.

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

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

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

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

„Движението на очите на потребителя по страницата не се случва случайно. Това е резултат от сложен набор от дълбоко вкоренени инстинктивни реакции към визуални стимули, които всички хора споделят.“ 

За щастие, за вас като дизайнери, тези реакции също не са напълно извън вашия контрол.

През вековете хората са разработили различни ефективни визуални техники за привличане и насочване на вниманието.

Нови инструменти за проследяване на очите

Технологичните иновации ни помагат да разработваме нови и интересни инструменти за изследвания. Екипите по проучване на потребители непрекъснато откриват иновации, които се предоставят от технологиите.

Например неотдавнашната наличност на евтино оборудване за проследяване на погледа ускори използването (и злоупотребата) на проследяването на погледа.

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

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

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

„Топлинните карти показват къде е концентрирал погледа си посетителя и колко дълго е гледал в дадена точка.“ 

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

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

Гледайте видео в YouTube: Анализ на топлинни карти с Hotjar

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

Възможностите за наемане на оборудване на седмична и месечна база направиха цената на такъв тип технология по-достъпна.

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

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

Установявате:

1. Докъде потребителите превъртат отделни страници.
2. Върху кои бутони щракват с мишката или кои зони докосват с пръст на екрана.
3. Кое съдържание се игнорира.

Други популярни решения на пазара са MouseFlow, Microsoft Clarity и CrazyEgg.

Контраст и еднородност

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

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

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

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

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

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

Изображението по-долу показва, че:

1. При визуално неутрално оформление нищо не се откроява.
2. Контрастът може да се използва, за да направлява погледа на потребителя около страницата.
3. Контрастът може да се използва, за да привлече вниманието на потребителя към няколко ключови елемента.
4. Прекаленото използване на контраст води до визуална бъркотия.

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

„Защо тези елементи са различни? Не би ли трябвало да са еднакви? Може би е било просто грешка. Или би следвало да забележа нещо тук?“

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

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

Еднородността влиза в действие в много различни аспекти на визуалния дизайн.

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

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

Оформлението, базирано на мрежа (Grid-Based Layout), е една техника от дизайна за печат, която се пренася ефективно в интернет.

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

Не всяко оформление ще използва всяка част от мрежата. Повечето оформления вероятно ще използват само няколко части. Въпреки това разположението на всеки елемент в мрежата трябва да бъде еднородно и последователно.

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

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

Лесно е да попаднете в капана на придържането към мрежова система (или който и да е стандарт, предназначен да гарантира еднородност), дори когато очевидно вече не работи.

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

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

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

Вътрешна и външна последователност

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

Тези проблеми приемат две форми:

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

Добрите решения на проблемите с вътрешната последователност се коренят в разбирането на Скелета на сайта.

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

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

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

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

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

„Най-добрият подход е да проектирате всеки елемент, да го изпробвате в различни контексти и след това да преработите дизайна според нуждите.“ 

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

„Успешният дизайн не е просто колекция от малки, добре проектирани обекти. По-скоро обектите трябва да образуват система, която функционира като сплотено, последователно цяло.“ 

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

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

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

Хората реагират положително на бизнес компании с ясно дефинирана идентичност.

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

Палитри с цветове и типография

Цветът може да бъде един от най-ефективните начини за комуникиране на идентичността на търговската марката.

Някои брандове са толкова тясно свързани с цветовете, че е трудно да се мисли за компанията, без цветът автоматично да изникне в паметта ви - помислете за Coca-Cola, Nivea или Apple.

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

Това не означава, че те използват тези цветове, като изключват всички останали.

Основните цветове на търговската марка обикновено са част от по-широка палитра с цветове (Color Pallete), използвана във всички рекламни материали на една компания.

Цветовете в стандартната палитра на дадена компанията са избрани специално за това колко добре работят заедно, като се допълват взаимно, без да се конкурират.

Една цветова палитра трябва да включва цветове, които се поддават на широк спектър от приложения.

Alpen използва ограничена цветова палитра, за да разграничи характеристиките и функционалността на техния корпоративен уеб сайт.

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

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

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

Когато се използват в един и същ контекст, цветове, които са много близки един до друг, но не съвсем еднакви, подкопават ефективността на вашата цветова палитра. Това не означава, че получавате само един нюанс на червеното, един нюанс на синьото и така нататък.

Това означава, че ако искате да използвате различни нюанси на червеното, уверете се, че са достатъчно различни, за да могат потребителите да ги различат, и се уверете, че използвате всеки по последователен начин.

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

Компании от ранга на Microsoft и Audi използват персонализирана типография, за да създадат по-силно чувство за идентичност в своите комуникации.

Прочетете повече: 47 години история и еволюция на бранда Microsoft

Запознайте се с насоките за бранд идентичност на Audi.

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

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

Ето защо опростени шрифтове като Calibri, Arial и Times New Roman са толкова широко използвани. Те обаче не са единственият ви избор. Не е нужно да жертвате стил, за да постигнете четливост.

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

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

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

Принципите за ефективно използване на шрифт наистина са същите като тези за други аспекти на визуалния дизайн:

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

Композиция на дизайна и ръководства за стил

Най-прекият аналог на схемата на страницата (wireframe) за областта на визуалния дизайн е визуалният макет (mock-up) или композицията на дизайна.

„Композицията на дизайна е визуализация на готовия продукт, изграден от компонентите, които са били избрани. Композицията показва как всички части работят заедно, за да образуват сплотено цяло.“ 

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

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

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

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

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

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

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

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

Друга причина да документирате вашата система за проектиране (design system) е, че хората в крайна сметка напускат своите работни места. Когато това стане, те си тръгват с богатство от знания за това как се проектира един продукт и как се изгражда ежедневно.

Без едно ръководство за стил (style guide), което остава актуално спрямо най-новите стандарти и практики, това знание се губи.

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

Окончателната документация на решенията за дизайн, които сте взели, е ръководството за стил (style guide).

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

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

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

Създаването на ръководство за стил също е полезно за налагане на последователност на дизайна в една децентрализирана бизнес организация.

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

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

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