Многим кажется, что дизайнер – это капризный художник, который вечно вдохновленно устремляет томный взор вдаль и иногда произносит перед клиентом проникновенные речи о нарушении всей его задумки, ведь «именно этот зеленый символизирует гармонию, а на два тона темнее, как предлагает заказчик, – уже экологичность». Но нет, это стереотип.
Дизайн – это в первую очередь решение конкретной задачи. К примеру, перед клиентом стоит задача – повысить конверсию сайта, значит, дизайнер будет делать все, чтобы заказчик был доволен. Если клиенту нужен запоминающийся сайт, вызывающий доверие пользователя, дизайнер эту задачу будет решать иначе, чем предыдущую.
В этой статье мы расскажем об этапах подготовки дизайна и общим принципам работы с визуальной составляющей сайта.
Дизайн – это не взмахи кистью и не полет творчества, это в первую очередь аналитика.
Как любой проект, работа начинается с определения главной задачи дизайнерского продукта. Что клиенту нужно от сайта? Повышение продаж? Больше доверия к бренду? Узнаваемость?
Когда клиент определился с основной задачей, а дизайнер примерно понимает суть работы, наступает второй этап – работа с целевой аудиторией (дальше ЦА). Чаще всего ЦА определена еще на этапе аналитики и проектирования, но для дизайнера также важно составить портрет типичного пользователя, и чем точнее будет портрет – тем лучше получится финальный продукт.
Давайте рассмотрим пример работы с ЦА. Представим, что заказчик продает детскую одежду в интернете. Мы знаем его продукт, его сильные и слабые стороны и приходим к выводу, что типичный представитель ЦА для этого продукта – замужняя женщина Ирина, ей около 30 лет, доход чуть выше среднего, есть высшее образование. Вероятнее всего, до рождения ребенка у молодой мамы была карьера. Ирина сидит в декретном отпуске и занимается ребенком. Что для нее важно? Мы думаем, здоровье ребенка и семейное благополучие – значит, в продукте ее будет интересовать качество материала и уровень сервиса. Что интересно Ирине? Ирина днями и ночами читает блоги других мамочек, возможно, сама делится своим опытом в интернете. Ее интересует ее ребенок – как он развивается, как он видит мир. Финальный вопрос – что мы можем дать Ирине, чего не могут другие?
Так мы плавно подходим к конкурентному анализу. Дизайнер обязательно будет смотреть сайты конкурентов – что у них плохо, а главное – что у них хорошо, и как он у себя это может улучшить. Почему Ирина выберет наш сайт, а не сайт конкурента? Анализ конкурентов проходит тщательно и детально – от креативной концепции бренда до цвета и расположения кнопок и иконок на экране.
Когда дизайнер прописывает для себя все, чем продукт может Ирину покорить и увести с других сайтов, начинается следующий этап – составление мудборда. Это сложное слово всего лишь означает, что дизайнер накидывает концепцию сайта, определяется с цветами, шрифтами, манерой подачи информации. Будет ли это яркий сайт с сочными цветами и броскими иллюстрациями? Вряд ли, ведь мы помним, что Ирина ценит качество продукта, и ее может напугать обилие цветов и кричащих надписей, как попытка пустить пыль в глаза и «втюхать» некачественный продукт. Мы помним, что Ирина в декрете и никуда не торопится, также Ирина умна и умеет анализировать, она будет внимательно вчитываться и искать подвох. Наверное, наш воображаемый дизайнер в этой ситуации выберет пастельные тона, возможно, акварельные мотивы, как в детских книжках, шрифт будет нейтральным, что позволит Ирине без труда получать информацию. Иллюстрации будут светлые и спокойные, вероятно, полные нежности и ласки. Напоминаем, что все это – всего лишь воображаемая ситуация, чтобы объяснить вам суть работы. К сожалению, в дизайне нет однозначных решений, и мы не можем дать вам строгий принцип работы с той или иной ЦА.
Параллельно дизайнер вдохновляется. Как истинный художник, дизайнер смотрит работы своих коллег на специальных сайтах и отмечает интересные решения. То есть – ворует идеи. Это могут быть сайты со схожей тематикой, могут быть совсем другой направленности, но любое интересное и необычное решение может придать сайту изюминку и станет тем самым фактором, почему Ирина не пойдет к конкуренту, а будет покупать наш продукт. Но если дочитав до этого момента, вы потерли ручки и решили, что просто скопируете понравившийся вам сайт и заживете припеваючи, спешим вас расстроить – вероятнее всего это просто не сработает. У другого сайта главный пользователь — не Ирина, а Светлана, а тут уже совсем другая история. Нет, дизайнер просто отмечает детали и аккуратно вписывает их в свой проект.
Дальше дизайнер приступает к непосредственной работе в специальных программах. По сути работа включает в себя полную прорисовку каждой уникальной страницы сайта. Больше всего времени уходит, конечно, на главную страницу, ведь это первое, что увидит пользователь и именно тут сформируется его отношение к продукту. Это станет дизайн-концепцией всего сайта.
Любой блок, любая деталь дизайна должна нести в себе смысл. Дизайнер – это такой сумасшедший, который постоянно спрашивает себя: зачем я это делаю? Зачем я делаю кнопку темнее? Зачем тут использую эту фотографию, а не другую? Зачем в футере я ставлю сначала значок ВК, потом ФБ и лишь затем ОК, а не в другом порядке? И если ответ не появляется, лучше сразу отказаться от решения, потому что все-таки дизайн – это не картина, так как тут есть четкие критерии оценки.
Слышали слово KPI? Так вот оно не применимо к любому произведению искусства – к примеру, глупо говорить, что шедевр Микеланджело повысил посещаемость Сикстинской Капеллы и является эффективным инструментом привлечения новых людей. Но для дизайна чаще всего есть очень конкретные KPI, а потому работу можно и нужно оценивать.
Есть множество литературы по веб-дизайну с бесконечными правилами и принципами. На самом деле, все зависит от конкретного сайта и задачи, но есть несколько общих правил:
Это касается всех элементов сайта. Чем меньше контрастность – тем сложнее воспринимается и отделяется друг от друга информация. За счет контраста можно выделять одни детали и заглушать другие, выстраивать иерархию веб-страницы и акцентировать внимание пользователя на самых главных элементах.
Этот пункт тесно взаимосвязан с предыдущим. Грамотная расстановка акцентов – гарантия эффективности сайта. Главное тут – не увлекаться, а четко понимать, на чем ставить акцент, ведь если выделять все, вся идея потеряется.
Этот принцип кажется очевидным, но требует отдельного упоминания. Повторяющиеся элементы и цветовая гамма, способ выравнивания, размер шрифта, межстрочное расстояние, отступы и угол скривления углов – все это создает то самое единообразие, которое облегчает пользователю работу с сайтом и сбивает с толку, если этот принцип нарушен. К примеру, вы читаете статью на информационном сайте и знаете, что стрелка «назад» внизу страницы отправит вас обратно на главную страницу. А теперь представьте, что вы читаете не статью, а смотрите все статьи раздела, хотите вернуться на главную страницу, а стрелку «назад» не обнаруживаете. Или обнаруживаете, но не такую и в другом месте. Это только сбило с толку, вызвало раздражение и, может даже побудить вас уйти на более удобный сайт конкурента.
Звучит этот пункт страшно, но на самом деле это всего лишь принцип выравнивания и разбития страницы на блоки. Модульная сетка – это инструмент, который помогает выровнять блоки относительно друг друга и расположить их ровно и чисто. Ниже типичный пример использования модульной стеки для выравнивания элементов:
Этот пункт как бы подводит итог над всем, что мы обсудили ранее. Человек – существо консервативное и ко всем нововведениям относится настороженно и заранее негативно, особенно, когда перемены не входили в его планы. Есть привычные пути получения информации – к примеру, страницу чаще всего пользователи будут считывать слева направо сверху вниз. Не заставляйте пользователя теряться в потоке информации и совершать лишние действия.
Человек, к тому же, существо ленивое, и слишком много текстовой информации могут сбить с толку любого пользователя. Сравните два способа подачи одного и того же текста:
На этом примере хорошо видно, как расположение текста влияет на восприятие. Почему-то нам проще читать текст во втором случае, хотя и там, и там текст и его объем одинаковый.
Конечно, на сайтах, которые берут премии интернета и бьют все рекорды по KPI, вы можете увидеть нарушение почти всех этих принципов, но в этом-то и состоит прогресс. Дизайнер постоянно отслеживает новые тенденции в digital и экспериментирует с разными решениями.
Дизайнер работает не один, а в тесном сотрудничестве с командами проектировщиков, верстальщиков и программистов, ведь хорошая идея может прийти в голову любому специалисту, а мы помним, что каждая мелочь может стать решающей для успеха вашего будущего сайта.
Дизайн – это в первую очередь решение конкретной задачи. К примеру, перед клиентом стоит задача – повысить конверсию сайта, значит, дизайнер будет делать все, чтобы заказчик был доволен. Если клиенту нужен запоминающийся сайт, вызывающий доверие пользователя, дизайнер эту задачу будет решать иначе, чем предыдущую.
В этой статье мы расскажем об этапах подготовки дизайна и общим принципам работы с визуальной составляющей сайта.
Дизайн – это не взмахи кистью и не полет творчества, это в первую очередь аналитика.
Как любой проект, работа начинается с определения главной задачи дизайнерского продукта. Что клиенту нужно от сайта? Повышение продаж? Больше доверия к бренду? Узнаваемость?
Когда клиент определился с основной задачей, а дизайнер примерно понимает суть работы, наступает второй этап – работа с целевой аудиторией (дальше ЦА). Чаще всего ЦА определена еще на этапе аналитики и проектирования, но для дизайнера также важно составить портрет типичного пользователя, и чем точнее будет портрет – тем лучше получится финальный продукт.
Давайте рассмотрим пример работы с ЦА. Представим, что заказчик продает детскую одежду в интернете. Мы знаем его продукт, его сильные и слабые стороны и приходим к выводу, что типичный представитель ЦА для этого продукта – замужняя женщина Ирина, ей около 30 лет, доход чуть выше среднего, есть высшее образование. Вероятнее всего, до рождения ребенка у молодой мамы была карьера. Ирина сидит в декретном отпуске и занимается ребенком. Что для нее важно? Мы думаем, здоровье ребенка и семейное благополучие – значит, в продукте ее будет интересовать качество материала и уровень сервиса. Что интересно Ирине? Ирина днями и ночами читает блоги других мамочек, возможно, сама делится своим опытом в интернете. Ее интересует ее ребенок – как он развивается, как он видит мир. Финальный вопрос – что мы можем дать Ирине, чего не могут другие?
Так мы плавно подходим к конкурентному анализу. Дизайнер обязательно будет смотреть сайты конкурентов – что у них плохо, а главное – что у них хорошо, и как он у себя это может улучшить. Почему Ирина выберет наш сайт, а не сайт конкурента? Анализ конкурентов проходит тщательно и детально – от креативной концепции бренда до цвета и расположения кнопок и иконок на экране.
Когда дизайнер прописывает для себя все, чем продукт может Ирину покорить и увести с других сайтов, начинается следующий этап – составление мудборда. Это сложное слово всего лишь означает, что дизайнер накидывает концепцию сайта, определяется с цветами, шрифтами, манерой подачи информации. Будет ли это яркий сайт с сочными цветами и броскими иллюстрациями? Вряд ли, ведь мы помним, что Ирина ценит качество продукта, и ее может напугать обилие цветов и кричащих надписей, как попытка пустить пыль в глаза и «втюхать» некачественный продукт. Мы помним, что Ирина в декрете и никуда не торопится, также Ирина умна и умеет анализировать, она будет внимательно вчитываться и искать подвох. Наверное, наш воображаемый дизайнер в этой ситуации выберет пастельные тона, возможно, акварельные мотивы, как в детских книжках, шрифт будет нейтральным, что позволит Ирине без труда получать информацию. Иллюстрации будут светлые и спокойные, вероятно, полные нежности и ласки. Напоминаем, что все это – всего лишь воображаемая ситуация, чтобы объяснить вам суть работы. К сожалению, в дизайне нет однозначных решений, и мы не можем дать вам строгий принцип работы с той или иной ЦА.
Параллельно дизайнер вдохновляется. Как истинный художник, дизайнер смотрит работы своих коллег на специальных сайтах и отмечает интересные решения. То есть – ворует идеи. Это могут быть сайты со схожей тематикой, могут быть совсем другой направленности, но любое интересное и необычное решение может придать сайту изюминку и станет тем самым фактором, почему Ирина не пойдет к конкуренту, а будет покупать наш продукт. Но если дочитав до этого момента, вы потерли ручки и решили, что просто скопируете понравившийся вам сайт и заживете припеваючи, спешим вас расстроить – вероятнее всего это просто не сработает. У другого сайта главный пользователь — не Ирина, а Светлана, а тут уже совсем другая история. Нет, дизайнер просто отмечает детали и аккуратно вписывает их в свой проект.
Дальше дизайнер приступает к непосредственной работе в специальных программах. По сути работа включает в себя полную прорисовку каждой уникальной страницы сайта. Больше всего времени уходит, конечно, на главную страницу, ведь это первое, что увидит пользователь и именно тут сформируется его отношение к продукту. Это станет дизайн-концепцией всего сайта.
Любой блок, любая деталь дизайна должна нести в себе смысл. Дизайнер – это такой сумасшедший, который постоянно спрашивает себя: зачем я это делаю? Зачем я делаю кнопку темнее? Зачем тут использую эту фотографию, а не другую? Зачем в футере я ставлю сначала значок ВК, потом ФБ и лишь затем ОК, а не в другом порядке? И если ответ не появляется, лучше сразу отказаться от решения, потому что все-таки дизайн – это не картина, так как тут есть четкие критерии оценки.
Слышали слово KPI? Так вот оно не применимо к любому произведению искусства – к примеру, глупо говорить, что шедевр Микеланджело повысил посещаемость Сикстинской Капеллы и является эффективным инструментом привлечения новых людей. Но для дизайна чаще всего есть очень конкретные KPI, а потому работу можно и нужно оценивать.
Есть множество литературы по веб-дизайну с бесконечными правилами и принципами. На самом деле, все зависит от конкретного сайта и задачи, но есть несколько общих правил:
1. Принцип контрастности
Это касается всех элементов сайта. Чем меньше контрастность – тем сложнее воспринимается и отделяется друг от друга информация. За счет контраста можно выделять одни детали и заглушать другие, выстраивать иерархию веб-страницы и акцентировать внимание пользователя на самых главных элементах.
2. Принцип акцентирования
Этот пункт тесно взаимосвязан с предыдущим. Грамотная расстановка акцентов – гарантия эффективности сайта. Главное тут – не увлекаться, а четко понимать, на чем ставить акцент, ведь если выделять все, вся идея потеряется.
3. Принцип единообразия и повторения элементов
Этот принцип кажется очевидным, но требует отдельного упоминания. Повторяющиеся элементы и цветовая гамма, способ выравнивания, размер шрифта, межстрочное расстояние, отступы и угол скривления углов – все это создает то самое единообразие, которое облегчает пользователю работу с сайтом и сбивает с толку, если этот принцип нарушен. К примеру, вы читаете статью на информационном сайте и знаете, что стрелка «назад» внизу страницы отправит вас обратно на главную страницу. А теперь представьте, что вы читаете не статью, а смотрите все статьи раздела, хотите вернуться на главную страницу, а стрелку «назад» не обнаруживаете. Или обнаруживаете, но не такую и в другом месте. Это только сбило с толку, вызвало раздражение и, может даже побудить вас уйти на более удобный сайт конкурента.
4. Выравнивание по модульным сеткам
Звучит этот пункт страшно, но на самом деле это всего лишь принцип выравнивания и разбития страницы на блоки. Модульная сетка – это инструмент, который помогает выровнять блоки относительно друг друга и расположить их ровно и чисто. Ниже типичный пример использования модульной стеки для выравнивания элементов:
5. Принцип удобства восприятия информации
Этот пункт как бы подводит итог над всем, что мы обсудили ранее. Человек – существо консервативное и ко всем нововведениям относится настороженно и заранее негативно, особенно, когда перемены не входили в его планы. Есть привычные пути получения информации – к примеру, страницу чаще всего пользователи будут считывать слева направо сверху вниз. Не заставляйте пользователя теряться в потоке информации и совершать лишние действия.
Человек, к тому же, существо ленивое, и слишком много текстовой информации могут сбить с толку любого пользователя. Сравните два способа подачи одного и того же текста:
На этом примере хорошо видно, как расположение текста влияет на восприятие. Почему-то нам проще читать текст во втором случае, хотя и там, и там текст и его объем одинаковый.
Конечно, на сайтах, которые берут премии интернета и бьют все рекорды по KPI, вы можете увидеть нарушение почти всех этих принципов, но в этом-то и состоит прогресс. Дизайнер постоянно отслеживает новые тенденции в digital и экспериментирует с разными решениями.
Дизайнер работает не один, а в тесном сотрудничестве с командами проектировщиков, верстальщиков и программистов, ведь хорошая идея может прийти в голову любому специалисту, а мы помним, что каждая мелочь может стать решающей для успеха вашего будущего сайта.
