Как составить грамотное ТЗ на дизайн: подробная инструкция
Любой бизнес рано или поздно сталкивается с задачами, для реализации которых необходим дизайн. Это может быть дизайн рекламного креатива (например, для таргетинга), сайта или страницы сайта, продукции компании.
Давайте разберемся вместе, что нужно добавить в ТЗ для дизайнера, чтобы получить прогнозируемый результат в означенный срок. У нас есть для вас подробная инструкция, основанная на многолетнем опыте.
Работа с дизайнером может вывести бизнес на новый уровень, а может обернуться для руководителя головной болью, сорванными проектами и потраченным впустую временем.
Грамотно составленное техзадание позволяет свести к минимуму непонимание между постановщиком задачи и исполнителем, помогая получить предсказуемый и эффективный результат. И, что немаловажно, сохранить нервы в целости.
В создании дизайна принимают участие две стороны:
- Руководитель. Человек, который ставит задачу специалисту или группе специалистов, контролирует ход ее выполнения и принимает результат. В роли руководителя может выступать владелец бизнеса или любое другое лицо, принимающее решения (маркетолог, директор по маркетингу и др.).
- Исполнитель. Один или несколько специалистов, работающие инхаус или на аутсорсе. Это могут быть графические и UX/UI-дизайнеры, 3D-аниматоры, моушн-дизайнеры.
Для создания простых креативов (например, для тестирования рекламной кампании) привлекать отдельных специалистов необязательно. Маркетолог все может сделать сам. Достаточно уметь пользоваться Adobe Photoshop и освоить один из онлайн-сервисов графического дизайна: например, Canva или Crello.
Для выполнения более сложных задач (например, для создания оригинальной анимации на сайт или видео для рекламы) потребуется помощь узкого специалиста.
Перед тем, как ставить задачу дизайнеру, нужно разобраться, с какой маркетинговой базой предстоит работать. Для этого постарайтесь собрать информацию по следующим вопросам:
- Что за продукт планируется продвигать?
У вас должно быть четкое представление о продукте, его преимуществах и особенностях.
- Кто конкуренты и как они работают?
Разберитесь, кто продвигает аналогичные товары/услуги, какие каналы и способы продвижения для этого используются.
- Для какой целевой аудитории предназначен продукт?
Составьте детальный портрет вашей целевой аудитории.
Дисклеймер. Не стоит ограничиваться набором сухих характеристик – пол, возраст, регион проживания. Согласитесь, что в категорию, например, мужчин 25-40 лет, проживающих в Москве и Московской области, попадают очень разные люди.
В понятное и эффективное техническое задание для дизайнера (и для других узких специалистов, таких как копирайтеры, контент-менеджеры, разработчики) нужно добавить следующую информацию↓
- Вразумительный заголовок. Включите в него всю основную информацию: «кто исполнитель», «что должен сделать», «к какой дате нужно сделать».
- Имя и фамилия исполнителя и его контакты. Укажите конкретного исполнителя.
- Описание задачи. Составьте максимально детальное описание.
- Исходная информация. Опишите продвигаемый товар/услугу, целевую аудиторию (ту, для которой создается креатив), ожидаемый результат.
- Технические требования. Дайте четкий перечень технических свойств креатива и мест его размещения: формат, размер, расширение и т.п.
- Общие требования. Приложите список всех требуемых характеристик креатива: цвета, шрифты, элементы и т.п.
- Количество. Укажите точное количество необходимых креативов.
- Примеры. Приложите к файлу референсы в виде скринов или ссылок.
- Имя и фамилия постановщика задачи и его контакты. Чтобы исполнитель при необходимости мог уточнять задачу в ходе выполнения.
- Срок выполнения. Укажите конкретные даты и время: дату постановки и дату окончания срока выполнения задачи.
Мы разобрались с основными пунктами, которые нужны в ТЗ для дизайнера. Также не лишним будет упомянуть программы и инструменты, которые могут понадобиться в процессе сборки задания.
Поговорим об инструментах, которые пригодятся при создании ТЗ. Мы в курсе, что никто не любит платные и сложные программы (которые устанавливаются только с помощью танцев с бубном). Поэтому разговор будет о простых и скорее всего уже знакомых вам инструментах.
Составить крутое ТЗ помогут:
- Google Документы.
Можно использовать любой текстовый редактор, но Google Документы хороши тем, что дают возможность совместного доступа к создаваемым документам.
- программа для создания скриншотов (например, удобные и бесплатные Joxi или Monosnap);
Скриншоты пригодятся для демонстрации приглянувшихся референсов конкурентов.
- для выгрузки топовых сайтов конкурентов;
Подборка сайтов, попавших в топы Яндекса и Google по схожим с вашими запросам, понадобится для выявления самых высокоранжируемых конкурентов. У них можно подглядеть что-нибудь интересное: оригинальный рекламный баннер, интересный способ показа кейсов и др (в зависимости от задачи).
- сервис для создания макетов Balsamiq Mockups;
Для большей наглядности после создания текстового ТЗ можно собрать для дизайнера макет рекламного креатива, страницы или даже сайта. Так вы точно сможете быть уверены, что вас правильно поймут.
- немного времени и терпения.
Дисклеймер. Любой инструмент из предложенных можно заменить на знакомую вам альтернативу.
При взгляде на заголовок должно быть ясно: «в чем суть задачи», «кому она поставлена», «к какому времени должна быть выполнена и сдана».
В заголовок добавляем:
- дату постановки задачи и дату дедлайна;
- суть задачи;
- ответственное за выполнение лицо.
Укажите фамилию и имя лица, ответственного за выполнение задачи, а также его контакты для связи. Особенно этот пункт важен в случае, если вы работаете с большим числом специалистов на аутсорсе.
Четко сформулируйте задачу:
- Продумайте и внятно изложите идею. Не пишите сложно и витиевато, – старайтесь выражаться максимально понятно.
- Заранее подготовьте контент (например, написанный копирайтером текст) и примерную схему креатива. В схеме отразите наиболее важные блоки информации, их примерную компоновку.
Дисклеймер. Схема креатива – это не дизайн. Это способ наглядно продемонстрировать идею дизайнеру. Дизайнер может видоизменять и переставлять информационные блоки по своему усмотрению.
Специалисту нужно предоставить все исходные данные, которые понадобятся для выполнения задачи:
- Сформулируйте конкретную цель, обозначив ожидаемый от креатива результат. Это может быть переход на сайт, регистрация на онлайн-мероприятие, подписка на email-рассылку или канал и т.п. Например, цель может звучать: «заполнение брифа на сайте владельцами бизнеса и руководителями компаний в сфере агропромышленности, энергетики, транспортной логистики и производства».
- Опишите ЦА, для которой создается креатив. Укажите пол, возраст, регион проживания, сферу деятельности, должность и уровень дохода целевой аудитории, а также ее интересы, страхи, боли.
- Приведите список основных конкурентов. У них можно подсмотреть интересные идеи.
- Детально опишите продукт.
- Дайте доступ ко всем материалам, которые могут понадобиться: логотипы, фото с уже проведенных фотосессий, гайдлайн, брендбук и т.п.
Рекламные креативы различаются по техническим характеристикам на:
- статичные изображения;
- GIF-анимация и анимационная графика (моушн-дизайн);
- видео (со звуком/без, с субтитрами/без, со спецэффектами/без).
При создании креативов важно учитывать их специфические параметры.
Чтобы дизайнер точнее выполнил задачу, добавьте в ТЗ следующую информацию:
- площадка, на которой будет размещен креатив (например, YouTube);
- формат (например, MPEG4);
- размер;
- расширение;
- вес файла;
- количество кадров в секунду;
- все остальное, что посчитаете важным.
Чем точнее будут указаны требования к дизайну, тем более соответствующий ожиданиям результат вы получите в итоге. Не лишним будет добавить следующие пояснения:
- графика (растровая или векторная);
- цветовая гамма (либо ссылка на брендбук/гайдлайн клиента, либо конкретные цвета в формате #rrggbb);
- шрифты;
- наличие и требования к размещению логотипа, элементов фирстиля;
- размещаемый текст;
- другие важные детали, которые нужно акцентировать при создании вашего креатива.
Укажите точное количество креативов, которые вам нужны. Если количество не указано или указан диапазон – например, 5-10 креативов – велика вероятность получить работу, выполненную по минимуму.
Будет круто, если вы добавите в ТЗ для дизайнера примеры (их еще называют аналогами или референсами), то есть креативы конкурентов, на которые специалист сможет опираться в ходе выполнения задачи.
Укажите свои (если сами ставите задачу) имя и фамилию, а также данные, с помощью которых исполнитель сможет с вами связаться: чтобы уточнить детали задания или отчитаться о выполнении.
Неконкретное, неясное техзадание дает исполнителю возможность истолковать задачу на свой лад. В результате чего постановщик задачи будет неприятно удивлен, когда результат окажется далек от его ожиданий. Однако излишне перегружать ТЗ тоже не стоит: легко перестараться, не оставив специалисту пространства для творческого полета.
Чтобы сотрудничество с дизайнером было не только эффективным, но еще и приятным для обеих сторон, мы решили добавить несколько полезных коммуникационных хаков.
- Сделайте дизайнера полноценным участником работы, а не исполнителем.
Постарайтесь привлечь дизайнера к обсуждению задачи: предложите поучаствовать в принятии решений, поделиться мнением.
- Держите в курсе.
По возможности рассказывайте специалистам, как дела у проектов после релиза. Принесли ли ожидаемый результат те решения, которые дизайнер добавил по ходу работы? Что пользователям понравилось, а что нет? Обратная связь поможет специалисту в дальнейшем развитии нужных навыков, даст понимание, куда двигаться.
- Говорите о срочных задачах без обиняков.
Горящая и неприятная задача? Предложите исполнителю помощь, а не притворяйтесь, что ничего не происходит. Проявите участие.
- Интересуйтесь.
Узнайте, что интересно дизайнеру, какая сфера деятельности привлекает его больше прочих. Какие задачи он выполняет с радостью, а какие просто потому, что нужно? Что у него получается, а где он видит точки роста? Ощущение ценности и важности сотрудника дорогого стоит.
Не пожалейте времени на составление продуманного и подробного техзадания на дизайн. Не поленитесь и проверьте свое ТЗ перед отправкой исполнителю по нашему Чек-листу. Ведь лучше потратить пару часов на постановку задачи, чем получить кота в мешке (и заплатить за него).
Дайте мне того маркетолога, который умеет пользоваться Adobe Photoshop)))
И я того же мнения. Не хватало ещё заниматься макетированием! Наверное, тогда дизайнер будет разрабатывать стратегию и по. В крупных Ко держат по несколько дизайнеров для решения задач разной сложности, в штате. У меня работает 2 дизайнера на аутсорсе — разделено для сложных и для технических задач. Из неудобств на аутсорсе плохо, что надо тратить время на тех задание в письм виде. Если бы Диз р сидел в отделе, можно дать распоряжение устно. Но чтобы маркетолог делал ещё и дизайн — увольте. Итак многорукий многоног.
в нашей сфере маркетолог должен знать основы дизайна или хотя бы понимать, какой сейчас в тренде и востребован, чтобы добиться от дизайнера того, что нужно. Так же как и дизайнер должен знать основы маркетинга для качественного выполнения своей работы 😉 по опыту — так командная работа строится качественнее и процессы идут быстрее!
у нас только такие 😉
Из личного опыта. Предоставляю исполнителю (дизайнеру) свободу работы полагаясь на ранее представленную блок-схему страницы.
Добрый день, а подскажите, пожалуйста, где у вас выполнена схема та, что слева? Что за программа или это нарисовано?
Добрый. Не самый удобный сервис, но на тот момент был под рукой и назывался draw.io Сейчас это app.diagrams.net
Круто! Спасибо вам большое! Хорошего дня!
это вы за него прототип сделали 😉 помогли исполнителю по доброте душевной! вобще по-хорошему первая и главная часть любого дизайна — это UX аналитика и создание как раз прототипа будущего сайта, а уж потом на его основе — создание креативной UI концепции и дизайн-системы 😉
Как использовать правило третей в веб-дизайне
Чтобы понять «правило третей» в веб-дизайне, давайте начнем с примера. Рассмотрим эту фотографию быка в поле:
Не цепляет, правда? Готов поспорить, если бы вы видели это изображение на сайте, вы бы не задержались там долго.
Теперь подумайте, что меняется, когда мы используем правило третей и поместим быка подальше от центра:
Правило третей может помочь сделать ваш дизайн менее предсказуемым и более интригующим. Оно способно дольше привлекать внимание зрителя, что очень важно, когда вы пытаетесь привлечь свою аудиторию и превратить эту аудиторию в потенциальных клиентов.
В каждом правиле есть исключения. Возможно, вы решите, что ваш дизайн будет более привлекательным, если он будет симметричным. Тем не менее, примите решение после того, как изучите разные варианты.
Мы покажем, как использовать правило третей в дизайне и дизайне пользовательского интерфейса, чтобы вывести ваши изображения на новый уровень.
Как использовать правило третей в дизайне
Правило третей утверждает, что дизайн становится более интересным и визуально привлекательным, когда вы размещаете основной объект (ы) своего дизайна на одном из четырех пересечений сетки третей или в одном из разделов третей. Искусство — это больше, чем догадки. Со времен Древнего Рима геометрия всегда занимала место в значительных произведениях искусства.
Чтобы понять правило третей, давайте рассмотрим пример.
Правило третей рисует две линии, перпендикулярные странице, и две линии, горизонтальные по отношению к странице, чтобы создать сетку из девяти блоков.
Это делит вашу страницу на три части, независимо от того, разрезаете ли вы изображение по горизонтали или по вертикали:
Затем, чтобы использовать правило третей в дизайне, разместите объекты не по центру, поместив их в одну из секций третей:
… Или в одной из точек пересечения:
В примере, показанном выше, главная точка фокусировки — вершина горы — находится слева от центра изображения, в первой трети фотографии.
Давайте рассмотрим, как создать сетку третей в Photoshop за четыре шага.
Как создать правило третей в Photoshop
1. Чтобы использовать инструмент Photoshop «правило третей», просто откройте пустую страницу в Photoshop и нажмите «Вид» → «Показать» → «Сетка»: 
2. Затем перейдите в «Настройки» → «Направляющие, сетка и фрагменты»:
3. Затем выберите цвет линий сетки вместе со сплошной линией. Затем измените «Сетка каждые» на «100 процентов» с разделением «3». Когда вы закончите, нажмите «ОК».
4. Вуаля! Теперь у вас есть сетка по правилу третей. Чтобы добавить изображение, просто перетащите изображение на существующую многослойную сетку, разверните его, чтобы заполнить сетку, а затем переместите объект, пока он не окажется либо в одной из секций третей, либо в одной из четырех пересекающихся точек. .
Примеры правила третей в дизайне пользовательского интерфейса
Чтобы рассмотреть силу правила третей в дизайне пользовательского интерфейса, давайте рассмотрим несколько примеров веб-сайтов, уделяя особое внимание тому, какие веб-сайты используют правило третей.
1. Soulful Vibes Co.
Здесь дизайнер делает основной акцент на хрустальных камнях и браслете из бисера со слоном. Они на левой и правой третях, обеспечивая внимание посетителя к самому центральному тексту: «Это не просто движение, это стиль жизни.»
Дизайнер использует правило третей, чтобы создать умиротворяющую, гармоничную, непринужденную эстетику, которая выглядит более открытой и гостеприимной, чем если бы оба объекта находились на переднем плане и в центре страницы.
2. HubSpot
HubSpot использует правило третей, чтобы сразу привлечь внимание к своему лозунгу, и призыв к действию «Получите HubSpot бесплатно» на главной странице, поскольку внимание большинства посетителей будет начинаться с левой стороны вашего веб-сайта. Иллюстрации помещаются в раздел правых третей, чтобы сбалансировать страницу. Это помогает пользователей сориентироваться и рассматривать сайт правильно: слева направо. Чего было бы труднее достичь с симметричным дизайном.
3. Музей Франса Хальса
Этот сайт нидерландского музея использует правило третей, чтобы привлечь внимание к фотографии женщины, расположенной в разделе левой трети. Страница уникальна, увлекательна и целостна и использует контр-изображения, чтобы сбалансировать асимметричную структуру страницы, в то время как более крупное изображение женщины находится в левой части экрана, справа есть тексты и дополнительные изображения. чтобы уравновесить это.
Когда нарушать правила (третей)
Важно отметить: в дизайне и искусстве нет строгих правил, которым вы должны следовать, и есть исключения из каждого правила или тенденции дизайна.
Как только вы поймете правило третей и то, как оно может повлиять на пользовательский опыт, вы можете нарушить это правило, когда сочтете нужным.
Например, вам может показаться более привлекательным держать изображения в центре экрана, как показано на домашней странице Tone Dermatology :
Здесь центральный акцент на женщине сделан убедительно и смело, особенно потому, что она смотрит в левую часть экрана, поэтому изображение все еще асимметричное (вы видите только ее глаза и нос слева, а ее волосы видны только на краю экрана). верно).
Этот макет дизайна хорошо работает, чтобы привлечь внимание посетителя и, вероятно, не был бы таким мощным, если бы дизайнер использовал правило третей, чтобы поместить женщину в левую или правую часть экрана.
В конечном итоге вы захотите выбрать элементы дизайна, которые лучше всего подходят для нужд вашего бренда. Если вы сомневаетесь, поэкспериментируйте как с более симметричными дизайнами, так и с правилом третей, и подумайте об A/B-тестировании, чтобы выяснить, какой дизайн лучше всего подходит вашей аудитории.
Если вам нужна бесплатная консультация про создание сайтов, напишите нам, пожалуйста, в WhatsApp:
7 правил или как написать ТЗ для дизайнера
Хочешь сделать хорошо — сделай сам? Мы бы поспорили.
Хочешь сделать хорошо — расскажи Хорошему исполнителю что и как. Такой подход сработает всегда.
Документ, в котором лежат подробные ответы на вопросы что, зачем и как – это техническое задание или ТЗ.
Если вы заказываете оформление сайта или рекламных материалов, ТЗ для дизайнера станет руководством к действию и обеспечит полное и качественное воплощение ваших идей.
В статье даем советы, как правильно составить ТЗ для дизайнера.
1. Начать с формы.
В погоне за мыслями мы спешим поставить задачу дизайнеру и сразу говорим о содержании: цветах, блоках, деталях.
Дизайнер читает, начинает сразу представлять. А в конце выясняется, что он представлял сайт, а нужен баннер. Поэтому вначале обозначаем, что именно нужно сделать: целый сайт, страницу, визитку и т.д.
Пусть у нас сеть квестов, и нам нужна страница для детских дней рождения. Мы заказываем лендинг. Для него ставим задачу рассказать о фишках праздника у нас и привлечь родителей отмечать дни рождения детей у нас.
Сами дизайнеры часто говорят, что хотят знать нюансы работы компании и задачи, которые стоят. Без этого их работа может не принести результатов – странички просто будут, но клиентов не приведут и продажи не поднимут.
2. Поделиться информацией о компании или проекте.
Дизайнер не придумает бизнес за вас. Поэтому расскажите о проекте или компании. Кто вы? Чем вы занимаетесь? Какие цели стоят перед вами? Какие интересные и полезные «фишки» есть у вас?
Максимальный объем информации о вас даст дизайнеру яркое представление о вас. На его основе дизайнер сможет нарисовать красивую инфографику или добавить детали.
Добавляем в файл информацию:
- какие квесты у нас есть;
- почему они нравятся детям;
- как проходит игра;
- почему праздник запомнится;
- стоимость и что в нее входит;
- социальные доказательства: сколько праздников провели, фотографии и отзывы.
Если мы сделали серию рекламных фотографий квеста — прикрепляем. Их дизайнер может использовать в качестве доказательства или фоном, как на примере:
3. Обозначить целевую аудиторию.
Описать ваших клиентов — важный пункт того, как составить ТЗ для дизайнера. Знание, кто клиент и чего он хочет, помогает оправдать ожидания.
Пусть информация о ЦА не будет формальной. Лучше узнать основные характеристики у менеджеров по продажам или администраторов.
Дни рождения празднуют дети, но решение принимают их родители. Обычно организацией праздника занимаются мамы, которые хотят придумать необычное, яркое впечатление для детей.
Тогда ЦА можно описать как:
- женщины 25 — 35 лет;
- мамы детей 7 — 12 лет;
- читают и смотрят вместе с детьми сказки;
- ценят качественное обслуживание и соотношение цены и качества.
Для целевой аудитории мы добавили блок: почему квест нравится детям. Дизайнер знал плюсы и особенности нашей работы. Вот что получилось:
4. Показать примеры.
Гораздо проще, когда есть ориентир, который однозначно нравится заказчику. Увидели крутой сайт конкурента, яркий баннер, красивую кнопку? Сохраните ссылки или файл и приложите к заданию.
Это не будет плагиатом. Составить ТЗ для дизайнера с примерами — значит показать, что примерно вы хотите увидеть в итоге.
Если у вас в голове уже есть представление, как должна выглядеть работа, то обязательно скажите об этом. Не все могут нарисовать полноценный прототип, но даже набросать схему на листе А4 будет полезно.
Мы определили темы блоков лендинга, их порядок и наполнение. Нарисовали схему и прикрепили к ТЗ.
Когда вы не даете детали и не делитесь представлениями, по умолчанию это отдается на креативность и профессионализм исполнителя. Прочитать ваши мысли он не сможет.
Идея сделать лендинг пришла, когда смотрели на красивую страницу конкурента? Сохраните ссылку на нее. Погуглите и найдите еще несколько примеров хороших и плохих лендингов, чтобы показать, как надо/не надо делать.
Соберите скриншоты иконок и кнопок, которые вам нравятся. Прикрепите к ТЗ, дизайнер будет счастлив.
Примеры приблизят вас к тому, как правильно составить ТЗ для дизайнера.
5. «Поиграть со шрифтами»
Можно написать ТЗ для дизайнера без указания конкретных цветов и шрифтов. Но может оказаться, что вы по-разному воспринимаете синий цвет или вытянутый шрифт.
Кажется, что самому определить шрифт и гамму сложно. Примеры помогут и здесь. На сервисе GoogleFonts можно посмотреть, как будут выглядеть разные шрифты. Подберите несколько вариантов, которые вам нравятся, и приложите к ТЗ.
То же самое с цветами. Подобрать примерную палитру можно с помощью цветового круга или сервисов в интернете.
Так вы разом решите проблему «брутальный шрифт на романтично розовом фоне».
Если у вас лежит готовый брендбук, в котором прописаны все детали корпоративного стиля — отдайте его дизайнеру. А вам не придется думать, как написать ТЗ для дизайнера , чтобы он сразу все понял.
В нашем случае, палитра цветов, шрифты и правила оформления лежали именно в брендбуке. В ТЗ мы оставили тезисы и ссылки, где подробности можно найти.
6. Учитывать сроки исполнения
Что-то можно отрисовать за 2 часа, а что-то за 2 месяца. Обсудите сроки сдачи, бонусы за раннюю сдачу и штрафы за задержку.
Дизайнеры на фрилансе срывают сроки. Это суровая реальность, с которой не поспорить. Чтобы избежать этого, мы обычно прописываем четкие временные рамки и систему оплаты. Хотя это не всегда помогает, потому что у дизайнера решает убежать собака или его бросает девушка.
Поэтому, можно отдельной строкой прописать, что вы ищете дизайнера без собаки и девушки, чтобы они не отвлекали его от сдачи дедлайна. =)
7. Уважать дизайнера
Он многое знает и умеет. Поэтому прислушивайтесь к советам и аргументируйте свои решения.
Выбирайте один-два канала взаимодействия. Дизайнер может упустить что-то или запутаться, когда идеи и правки летят к нему по телефону, e-mail и во всех соцсетях.
Если вы хотите проверить дизайнера и даете ему тестовое задание, оплатите его. Он тратит свое время и знания, чтобы выполнить работу. Дизайнер может захотеть использовать задание в своем портфолио. Запрещать ему делать это, как минимум, некрасиво.
Понять, что все идет хорошо — просто. По результатам нет большого количества правок. Если вы в 10 раз переделываете макет, вероятно, что ТЗ составлено нечетко и стоит его пересмотреть.
Мы очень надеемся, что эти советы помогут вам разобраться, как составить ТЗ для дизайнера.
О том как создать постоянный поток клиентов в бизнес с помощью социальных сетей и силы интернета мы рассказываем на открытой онлайн-встрече.
Регистрируйтесь здесь, чтобы получить дорожную карту развития вашего проекта, которая четко покажет, как прийти к результату.
Золотое сечение в Web
К сожалению, в наше время перенасыщенное рекламой, у многих сложился стереотип, что дизайн – это просто симпатичная и яркая картинка.
Многие начинающие дизайнеры не задумываются, что прежде всего, дизайн должен быть эффективным, т.е. доносить до конечного пользователя конкретную цель.
Сделав сногсшибательную картинку, иногда видишь, что все-таки в ней что-то не так. И это отражается на потребителе, когда продажи товара просто не идут. В отличие от конкурента, у которого совершенно пустая белая картинка, с парой выражений и логотипом.
На тему эффективного дизайна можно привести несколько ссылок:
Это из того что вспомнилось. Рекомендуется почитать блог Дизайн пользовательских интерфейсов и юзабилити.
Это, скажем так преамбула, которую можно отнести к любому направлению дизайна. В этой статье мы поговорим о Web-дизайне и о применении Золотого Сечения и Правила Третей.
Одной из главных задач эффективного дизайна в Web – это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?
Существует множество путей, например, использовать сетки, можно предпочесть самые элементарные решения или сосредоточится на простоте и удобстве.
Но в любом случае, Вы должны быть уверены, что у пользователей присутствует ощущение баланса, порядка, гармонии и комфорта. Как раз в этом случае, применение золотого сечения становится важным этапом при разработке дизайна web-страницы.
Золотое сечение
Прежде всего, что такое Золотое сечение?
По материалам Википедии:
Золото́е сече́ние (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление, число Фидия, φ) — деление отрезка на части в таком соотношении, при котором большая часть относится к меньшей, как сумма к большей. Например, деление отрезка АС на две части таким образом, что большая его часть АВ относится к меньшей ВС так, как весь отрезок АС относится к АВ (т. е. |АВ| / |ВС| = |АС| / |АВ|).
Эту пропорцию принято обозначать греческой буквой φ (встречается также обозначение τ) и она равна 1.618… (число бесконечное)
В дошедшей до нас античной литературе золотое сечение впервые встречается в «Началах» Евклида (3 в. до н.э.). Термин «золотое сечение» был введён гораздо позднее Леонардо да Винчи, который использовал золотое сечение как пропорции «идеального человеческого тела». Золотое сечение имеет множество замечательных свойств, но ещё больше свойств вымышленных, следуя Леонардо да Винчи, многие люди «стремятся найти» золотое сечение во всём что между полутора и двумя.
На тему Золотого сечения, написано масса литературы, поэтому не буду расписывать в деталях, что это такое. Для тех, кто в первый раз слышит это понятие, настоятельно рекомендую почитать, по ниже приведенным ссылкам:
Но, могу выделить наиболее интересные ссылки:
Золотое сечение в Web
Рис. 1: Золотое сечение на практике в Web
На Рис. 1 демонстрируется принцип Золотого сечения. Допустим, Ваш макет фиксированной ширины – 960px и содержит два основных блока, контент и сайдбар. Как бы вы вычислили ширину колнок, не зная волшебной цифры 1.618?
Конечно, web-дизайн не должен быть строго привязан к Золотому сечению. Но в некоторых случаях, эта пропорция помогла бы улучшить визуальную взаимосвязь всего макета.
Для примера, рассмотрим дизайн блога The 404 Blog.
Рис. 2: The 404 Blog
Приятная композиция, спокойные цвета. Никакого визуального напряжения и никакой агрессивной концентрации на нужных местах блога (хотя сейчас это в моде, что делается с помощью ярких деталей).
Но дизайн блога не придерживается принципов Золотого сечения. И что интересно, чаще всего пользователи этого просто не чувствуют, так они интуитивно разделают макет на два отдельных блока (шириной 583px (630px — 31px — 31px) и 299px (330px — 31px) ).
Дело в том, что свободное пространство на блоге является пассивным. Отношение между двумя основными блоками – 630px : 330px ≈ 1.91 ≠ 1.62 .
Причина, из-за которой макет выглядит почти идеально сбалансированным, хоть и не придерживается Золотого сечения, в том, что отношения между блоками равны.
Кстати, вот несколько удобных приложений, которые помогут с вычислениями Золотого сечения без калькулятора.
1. Phiculator – маленькое и удобное приложение, которое из любого введенного числа, автоматически вычислит, соответствующее Золотому сечению, значение.
2. Golden Section Ratio Design Tool – мощный инструмент, который поможет избежать рутинных операций при работе с компоновкой объектов и форм. Результат Вы можете видеть на лету.
Правило Третей
Это принцип построения композиции, основанный на упрощенном правиле золотого сечения. Правило третей в основном используется фотографами.
При определении зрительных центров кадр, как правило, делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2 (берутся последовательно идущие числа Фибоначчи). Последний вариант дает деление кадра на три равные части (трети) вдоль каждой из сторон.
Несмотря на заметное отличие положения центров внимания, полученных по правилу третей, от золотого сечения, технологическая простота и наглядность сделали эту схему композиции популярной.
Рис. 4: Фотография демонстрирует использование Правила Третей
Чаще всего, невозможно, да и просто бесполезно использовать все четыре точки, для выделения на первый план самых важных деталей макета сайта. Но, не менее успешно использовать одну или две точки, как кстати обычно и делают.
Левый верхний угол обычно самый «сильный», так как пользователи просматривают сайт по принципу формы буквы «F».
Рассмотрим Правило Третей на примере. Допустим, у нас есть макет ширина которого 960px. Высота варьируется между 750 и 950px.
Как разделить макет на 9 равных частей? Несколько несложных шагов:
1. Разделите ширину вашего макета на 3. 960px / 3 = 320px.
2. Разделите высоту вашего макета на 3. ((750px + 950px) / 2) / 3 ≈ 285px.
3. Размер прямоугольника должен быть примерно 320pх на 285px.
4. Постройте сетку прямоугольников, рисуя линии, проходящие через концы прямоугольников.
5. Разместите самые важные элементы на точках пересечения горизонтальных и вертикальных линий.
В качестве примера из жизни, можно привести проект demandware.com.
Хоть цветовая гамма сайта и является яркой и красочной, тем не менее, на нем все кажется предельно простым и понятным.
Рис. 5: Demandware
Если рассматривать эффективность дизайна этого проекта, то сразу можно увидеть прекрасный баланс, за счет совершенного использования Правила Третей.
Обратите внимание, на двух из четырех пересечениях, выделяется самая важная информация, имена та, на которой компания хочет сделать акцент (отмеченно розовыми квадратами).
Также замечательно расположен навигационный блок, на втором пересечении линий. Это является действительно действенным (или эффективным) дизайном.
Заключение
В некоторых случаях, применение Золотого сечения и Правила Третей может значительно улучшить взаимосвязь вашего проекта с посетителями.
При пропорции 1:1.62, ваш сайт становится более удобным и более структурированным для просмотра.