Как да създадете ръководство за стил на уебсайт за вашата марка

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


Създаване на ръководство за стил на уебсайт

Нека тук нарисуваме сценарий. Кажете, че уебсайтът ви се разраства бързо както в обхвата на съдържанието си, така и в броя на хората, които трябва да вземете на борда, за да го поддържате. Вие сте наели дизайнери, разработчици, копирайтъри, мениджъри на социални медии – целият шебанг. Всеки човек идва и си отива, допринасяйки с парчето си за цялостната грандиозна схема – все пак последователността на вашата марка е започнала. Някои връзки на бутони са сини; други са зелени. Една подпозиция е с размер 26px; друга подпозиция е 24px. Вашето лого има твърде много подплънки около него на една страница, но твърде малко подплънки на друга …

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

Именно там идва ръководството за стил.

Какво е ръководство за стил и защо бизнесът ми се нуждае от такъв?

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

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

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

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

Кога е време да създадете ръководство за стил

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

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

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

Вашето ръководство за стил съществува в рамките на вашия уебсайт

Преди да започнете да изграждате своя пътеводител, ще трябва да посочите къде съществува. Най-добрата практика е да разпределяте своя собствена област във вашия уебсайт, или като директория (www.yourdomain.com/styleguide) или като поддомейн (styleguide.yourdomain.com).

БЪРЗА ЗАБЕЛЕЖКА: Не забравяйте, че вашето ръководство за стил трябва да споделя същия CSS файл като останалата част от вашия уебсайт. Това гарантира, че актуализациите на дизайна в едната веднага ще се отразят в другата, запазвайки всичко унифицирано и последователно.

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

Нека извлечем това от пътя: създаването на вашия ръководство за стил ще отнеме време. Но помислете за енергията, която влагате в нея, като инвестиция, която ще ви спести повече време (и пари) в дългосрочен план.

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

ВИЖТЕ СЕ В ДЕЙСТВИЕ: Един от най-популярните и изчерпателни ръководства за стил за справка принадлежи Старбъкс. Погледнете тяхното, ако имате нужда от вдъхновение за получаване на нещо основно.

Стили водачи Vs. Модели библиотеки

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

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

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

Как да създадете ръководство за стил

За да изработите ръководство за стил, което отметка всички полета, ето стъпките, които ще предприемете:

Стъпка 1. Определете същността на вашата марка

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

Стъпка 2. Задайте правилата на вашето лого

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

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

Стъпка 3. Установете типографията

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

Пример за ръководство за типография на BBCБи Би Си споделя маркирането и оформлението на техните типографски елементи – необходимост от голяма информационна организация, която използва много различни заглавия с различно значение.

Стъпка 4. Вземете решение за вашата цветова палитра

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

Пример за ръководство за цвят на MozillaMozilla поддържа своята марка последователна, като определя цветовата палитра на техния софтуер. Важно е да включите цветни кодове в HEX, Pantone, HSB, CMYK и RGB; ако възникне поводът, че вашата марка трябва да съществува извън компютърния екран, ще сте готови за това!

Стъпка 5. Определете правилната иконография

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

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

Стъпка 6. Определете правилните изображения

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

Стъпка 7: Изградете системата за оформление и мрежа

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

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

Стъпка 8: Оформете елементите

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

Форми

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

Бутони

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

Менюта

Отново голяма част от това, което вече сте установили, ще ви доведе до голяма степен тук. Разстоянието и подравняването на текста са основни стилове за уточняване. Дали вашето лого ще действа като начален бутон? Изхвърляте ли познатата „икона за хамбургер“ за нещо по-креативно?

Modals

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

Взаимодействие и анимационни ефекти

Вярвате или не, марката ви може да бъде изразена в подробности дори за минути, колкото са милисекундите от ефект на задържане. Текстова връзка със стойността {анимация: 500ms лекота; } предава различна индивидуалност и чувство за неотложност в сравнение с {анимация: 100ms линейна; }.

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

Не забравяйте за съдържанието

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

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

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

Ръководствата за стил на съдържанието могат да бъдат доста изчерпателни, дори да включват граматически правила, които бихте очаквали от английски професор. Ръководството за Tuts+ прави точно това. (Техният пътеводител дори ми казва да го напиша като „Tuts +“, а не „Tutsplus“!)

заключение

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

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

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