Ръководството на уеб дизайнера за стилизиране на плочки
Стилните плочки са визуална препратка към езика на дизайна на уебсайт (или друг дизайн, който може да бъде доставен). Те помагат да се разкаже история чрез колекции от шрифтове, цветове и стилове, а когато се разглеждат в комбинация с телени рамки, карти на сайта и други елементи на потребителския интерфейс, те определят тази история по достъпен и удобен за клиента начин. В тази статия ще обясня как да извлечете най-доброто от тази удобна техника.
01. Какво съдържат плочките за стил?
Една успешна стилова плочка трябва да съдържа примерни елементи на потребителския интерфейс, да дефинира цветова схема, да покаже как ще се използват принципите на типографския дизайн и да демонстрира връзката между марката на клиента и предложеното визуално решение. Например, ако клиент е използвал думите „надежден“ или „надежден“, за да опише бизнеса си, плочката със стил трябва визуално да представя това.
Най-вече стилните плочки предлагат отправна точка за обсъждане и изясняване на бизнес целите и личните предпочитания на клиента.
02. Кога да използвам стилни плочки
Стилните плочки предлагат гъвкава отправна точка, която помага да се определи как ще изглежда уебсайт, по достъпен начин, който клиентите могат да разберат. Мислете за тях като за нещо средно между а дъска за настроение и макет - те помагат да се определи и комуникира как даден визуален стил ще бъде приложен в уебсайт, включително потребителски интерфейси, ориентирани към настолни компютри и мобилни устройства.
Можете да ги използвате вместо традиционните първи макети, генерирайки идеи и обратна връзка от клиента, за да информирате за окончателния подход на проектиране. В Саманта Уорън Отделно списък статия, тя описва как процесът на стиловите плочки помага да „раздразни страстта зад марката, разкривайки късчета с описателна доброта, като същевременно свързва клиента с проекта“.
03. Как изглеждат стилните плочки?
Няма определен начин, по който трябва да изглеждат плочките ви със стил. Ключът е да се гарантира, че няма да ги объркате с дъски за настроение, които са недостатъчни, за да се установи напълно визуален език, като същевременно не се стига твърде далеч по обратния път към пълен макет на дизайна.
Вижте горните примери от Phase2 Technology, създадени по време на работа върху нов уебсайт за сайта на Washington Examiner 2012.
04. Как да използвам стилните плочки успешно
След като разберете принципите на стилните плочки, те трябва да се впишат добре в процеса на проектиране. Обикновено те ще бъдат генерирани по-рано в жизнения цикъл на дизайна, отколкото бихте могли да създадете първите си макети, и в резултат те ще ви позволят да получите обратна връзка по-рано. Следвайте четирите стъпки, за да включите стиловите плочки във вашия работен процес:
Слушайте вашия клиент
Срещнете се с вашия клиент в началото на вашия проект и съберете възможно най-много подходяща информация. Някои дизайнери може да се окажат по-лесни за провеждане на индивидуални интервюта със заинтересованите страни, докато други ще предпочетат групова среща; направи това, което ти върши работа. Уверете се, че задавате на всички ключови вземащи решения и заинтересовани страни едни и същи основни въпроси.
Ако това помогне, можете да създадете въпросник за вашите клиенти преди първата среща по проекта. Ако се мъчите да разберете какви въпроси трябва да задавате на клиента си, StyleTil.es уебсайт подчертава някои полезни ресурси, включително тези от Анди Рътлидж и Ким Кълън .
На Саманта Отделно списък статията също помага да се определят някои полезни техники за разпит, за да се извлече максимума от тези първи срещи. Най-важното е, че трябва да съберете прилагателни, за да опишете полезно историята, която вашите клиенти искат да изобразят чрез уебсайта си.
Използвайте рамка за дизайн, за да интерпретирате кратката информация
Използвайки прилагателните, които сте записали в първата стъпка, създайте обобщен набор, за да идентифицирате теми на прилагателния език. Приложете тези теми към вашата рамка за дизайн, като използвате принципи на проектиране като хармония и единство, за да се направи избор относно елементите на дизайна и визуалното им представяне на историята. Не забравяйте да използвате всеки съществуващ език за брандиране, ръкопис и визуален език, който вече е на разположение, за да помогне за контекстуализиране на дизайна и вашия отговор.
Определете визуалния език
Използвайки информацията, която сте събрали в стъпка 01, и изхода, генериран чрез вашата интерпретация в стъпка 02, определете общите теми и започнете да ги съпоставяте със стилистични устройства. Генерирайте различна плочка за всяка визуална интерпретация, която сте измислили. Изпълнените стилови плочки ще ви позволят бързо да установите дали сте на същата страница като вашия клиент от гледна точка на визуален език.
Уебсайтът styletil.es, създаден от Саманта Уорън, предоставя удобен PSD шаблон за вас Изтегли и използвайте като отправна точка за извеждане на плочките на вашия стил.
Повтаряйте, докато стилът не бъде договорен
Работете с клиента си, за да направите промени в стилната плочка. Тъй като итерирате извън контекста на окончателното оформление на уебсайта, можете да се съсредоточите върху това да гарантирате, че вашият стилистичен подход продължава да отразява бизнес целите и целите на дизайна.
05. Трябва ли стилните плочки да заменят макети?
Това е често срещан подход в началото на дизайнерския проект за създаване на макети на страници, но ако някога сте се налагали да преговаряте за хибрид - включващ елементи от два или повече макета и компрометиращ дизайнерския подход - вие ' Ще съм запознат с разочарованието, което може да донесе използването на макети в началото на процеса на проектиране.
От гледна точка на клиента, макетът представлява цялостно дизайнерско решение, но тъй като често за първи път виждат вашата интерпретация на дизайнерската справка, разбираемо е, че те ще идентифицират елементи, които харесват, а елементи, които не харесват. Също така е естествено заключението, че получената от вас обратна връзка ще ви принуди да обедините различни елементи от различните макети, водещи до това, което Саманта Уорън маркира Решение 'Franken-comp' .
Макетите могат да изглеждат като прост, очевиден начин да се определи как даден проект може да започне процеса на преминаване от краткото проектиране към завършването. Но стиловите плочки могат да бъдат по-интелигентен начин за разглеждане на нещата, получаване на обратна връзка и определяне на визуален език в сътрудничество с вашия клиент рано.
Това може да помогне да се избегне чувството на неудовлетвореност и разочарование от необходимостта да се сглоби окончателен макет от отделни части на напълно откачени компилации и помага да се запази клиентът напълно ангажиран и вграден в процеса на проектиране.
06. Къде да научите повече
- Стилни плочки и как работят - A A List Apart статия
- Мамят и безплатен PSD шаблон за Style Tiles
- Леярницата: новият ни реагиращ дизайн прототипът на стила
Думи : Сам Хамптън-Смит
Като този? Прочетете тези!
- Безплатно Четки за фотошоп всеки креатив трябва да има!
- Най-доброто Приставки за Photoshop
- Крайното ръководство за проектиране на най-добрите лога
Какво мислиш? Ще раздавате ли стилни плочки или се придържате към традиционните макети на страници? Споделете вашите виждания в коментарите по-долу ...
