У вас отключен JavaScript
Для пользования сайтом, необходимо, чтобы JavaScript был включен. Посмотреть как включить, выберите свой браузер:

Дизайн-макет для вашего веб-сайта: в мастерской у дизайнера

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

 

В голове родилась картинка или мелодия, а как передать их форму, образ, мотив другому человеку, если рисовать и петь не умеешь?

Представьте, дизайнерам нужно выслушать наши путаные объяснения, понять, что мы хотим, создать это и вызвать невольный возглас восхищения. И они справляются с этой непростой задачей!

В наших предыдущих статьях мы уже рассказывали о том, как в Umbrella организован процесс подготовки к разработке, и как создаются прототипы интерфейса (wireframes).

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

Ведь именно этого мы ждем от веб-дизайнера, правильно?

Чтобы он создал для нас такую картинку, которую пользователь захочет рассмотреть: почитать контент, перейти по ссылкам, кликнуть по кнопкам, и в итоге добавить сайт в избранное, чтобы возвращаться снова и снова.

 

mockup example

Зачем нужен макет?

Как бы подробно и красочно ни объяснял заказчик чего он хочет, каким бы длинным ни было бы описание или техническое задание, два человека почти всегда будут представлять будущий результат совершенно по-разному (за редким исключением).

Поэтому когда готова общая структура страниц, создается макет сайта, который помогает каждой стороне увидеть физическое воплощение идеи, проверить, оправдались ли ожидания, и исправить то, что вызывает сомнения или попросту не нравится.

Макет  отображает полноценный дизайн страниц будущего сайта. С его помощью дизайнер создает стиль сайта: цвета, шрифты, формы, и определяет точное расположение элементов относительно друг друга. Макет создают для каждой страницы веб сайта. Заказчик получает результат в удобном для просмотра формате ( например, .jpeg).

 

ДЛЯ ЧЕГО МАКЕТ ДИЗАЙНЕРУ?

Чтобы:

  • точно отразить все свои идеи, проверить, как они будут выглядеть и устранить все возможные неточности и ошибки;
  • показать заказчику как будут реализованы его пожелания, или предложить свои варианты;
  • обсудить с разработчиками возможности реализации дизайна и устранить возможные несоответствия и сложности на раннем этапе.

ДЛЯ ЧЕГО МАКЕТ РАЗРАБОТЧИКАМ?

Чтобы:

  • лучше понять идею и стиль сайта;
  • заранее продумать как именно будут реализованы дизайнерские идеи и при необходимости внести корректировки до того, как дизайн будет полностью готов.

 

ДЛЯ ЧЕГО МАКЕТ ЗАКАЗЧИКУ?

Чтобы:

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

 

books

Как происходит работа над макетом?

Обычно дизайнер приступает к созданию макета, имея на руках готовые прототипы интерфейсов (wireframes, где уже показаны элементы интерфейса, обозначено их расположение и распределен постранично функционал приложения).

 

1. Дизайнер создает стиль сайта

  • ЦВЕТ

Сначала определяется основная гамма цветов для будущего сайта.

На самом деле, это не так просто, как может показаться на первый взгляд, потому что:

  • цвет влияет на эмоциональный фон. Дизайнеру необходимо учитывать цель сайта и соотносить ее с влиянием выбранного цвета на пользователя. Например:

Голубой цвет успокаивает и излучает надежность.
Зеленый придает оптимизм.
Оранжевый согревает и придает энергию.

  • в разных культурах и странах одни и те же цвета могут восприниматься по-разному, несмотря на существующие общечеловеческие ассоциации с ними. Например:

Белый цвет, как правило, воспринимается как символ чистоты и простоты. А вот в Японии, Индии и Китае  – это цвет траура.

Красный цвет – цвет страсти и сильной энергетики. В Китае красный считается цветом счастья, в то время как в Египте это цвет траура.

 

  • ГРАФИЧЕСКИЕ ЭЛЕМЕНТЫ

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

Хотите посмотреть, как это выглядит на практике? В качестве одного из примеров можно привести Material Design. Кнопки, графические элементы, шрифт – все подчинено одной идее.

 

mockup1

 

mockup 2

 

2. Дизайнер работает в трех направлениях

  • РАБОТА С ЗАКАЗЧИКОМ

Наши заказчики бывают самыми разными:

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

Другие не имеют ни малейшего представления о том, чего хотят. Им просто нужен стильный и удобный сайт.  С ними дизайнеру нужно начинать работу с чистого листа. И в таких заказах ответственность в большей степени ложится на плечи дизайнера.

В любом случае, постоянное общение с заказчиком – это непременное условие успешной разработки дизайна. Дизайнер создает продукт не для себя и не на свой вкус, а именно для заказчика. Поэтому обе стороны должны быть заинтересованы в том, чтобы как можно активнее участвовать в процессе.

 

  • АНАЛИЗ РЫНКА

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

 

  • ТВОРЧЕСКОЕ ВДОХНОВЕНИЕ

Вдохновение –  не менее важный аспект. Ведь это главное оружие дизайнера. Без него веб-сайты были бы идентичными и скучными.

Общение с заказчиком и анализ рынка дают дизайнеру основу, фундамент для возведения самого продукта. А вот насколько привлекательно и оригинально будет выглядеть сайт, во многом зависит от профессионализма и увлеченности дизайнера идеей проекта.

3. Дизайнер создает логотип

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

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

Логотип – это обозначение компании, которое будет использоваться на самой разнообразной продукции компании и в рекламных материалах. По сути, логотиподна из ключевых деталей корпоративного стиля. Он задает стиль всему сайту, а все остальные элементы должны с ним сочетаться и дополнять его.

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

Суметь выразить в небольшом изображении основную идею и привлечь внимание – это еще одна непростая задача для дизайнера.

Дизайнер обычно разрабатывает несколько вариантов логотипа и предлагает на выбор заказчику. Иногда заказчику нравится первый же предложенный вариант, иногда никакой из них. А бывает, заказчик выбирает один из разработанных логотипов и просит подкорректировать его на свой вкус.

Кроме основного варианта дизайнер разрабатывает черно-белую версию логотипа (на случай использования на монохромных или контрастных фонах).

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

4. Дизайнер выбирает структуру сайта и раскладку элементов на странице

Прописная истина для любых действий пользователя в сети: посетитель сайта делает то, что ему удобно и как ему удобно. Поэтому и контент пользователь будет просматривать именно так, как ему привычнее и комфортнее. Значит, все самые важные элементы на странице нужно расположить именно там, куда пользователь будет смотреть в первую очередь.

Например:

Большинство Европейских пользователей будут просматривать заголовки сверху вниз и слева направо. Поэтому самую важную информацию следует разместить в левой части.

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

 

5. Дизайнер создает и размещает элементы, призывающие к действию (Call to Action)

Любой современный сайт задумывается для того, чтобы побудить пользователя к какому-либо действию: приобрести товар или услугу, оформить подписку, зарегистрироваться, позвонить или написать, задать вопрос, выбрать один из нескольких вариантов и т.д.

Дизайнер делает кнопки, призывающие совершить такое действие, более заметными за счет расположения и внешнего вида. Одновременно продумывается и удобство использования таких элементов интерфейса. Иначе пользователь, возможно, и оценит красоту дизайна визуально, но после уйдет с сайта, так и не нажав на заветную кнопку – ее либо не видно, либо от юзера требуется что-то слишком сложное и неудобное.

Например, Google Fonts предлагает очень простые на вид, но очень удобные решения.

Любой, кто зашел на сайт впервые, легко разберется в том, что нужно делать. При этом выдержан стиль сайта, а красный цвет выполняет свою функцию: делает акцент на важных для пользователя настройках и действиях. При этом, цветовой акцент не отвлекает от самих шрифтов, для работы с которыми предназначен сайт.

 

fonts

 

Дизайнеру в помощь

Дизайн – дело сугубо личное и творческое, и применять к профессии дизайнера какие-то общие шаблоны и схемы было бы неправильно.

Но и отрицать преимущества прогресса тоже было бы нерационально, и многие дизайнеры пользуются сегодня дополнительными онлайн инструментами. Сеть пестрит предложениями от таких сервисов. А в условиях современной жесткой конкуренции и стремительных темпов жизни, такие инструменты просто незаменимы. Они сокращают время работы, и одновременно оставляют простор для творчества.

 

sketch

Источник

 

Например, интересные возможности для дизайнеров предлагает платформа Sketch.

Периодически появляются новые инструменты, например:

Платформа Figma хоть и предлагает аналогичные услуги, имеет одно неоспоримое преимущество. Figma позволяет одновременно работать над макетом нескольким коллегам. При этом результат работы постоянно обновляется, то есть у каждого участника команды всегда будет актуальная версия макета.

С другой стороны, наличие большого количества онлайн инструментов позволяет продвинутым пользователям задуматься о том, что они могут и сами создавать дизайн для своих идей. Ведь сейчас можно найти множество конструкторов, при помощи которых самостоятельно можно создать макет (Moqups) или даже действующий сайт (SiteBuilder).

Конечно, каждый волен выбирать сам, но насколько полученный результат будет соответствовать вашим ожиданиям?

 

Возможные ошибки веб-дизайна

worst

 

Сайт The World’s Worst Website Ever – это замечательная иллюстрация основных ошибок дизайна. Вот только некоторые из них:

  • слишком оригинально: скопление большого количества оригинальных дизайнерских идей на одном сайте будет отвлекать пользователя от контента;
  • понятный дизайнеру, но совсем неудобный интерфейс для пользователя и сложная навигация: непонятно, как перейти куда-то или выбрать что-то или долго приходится искать необходимую информацию;
  • несочетаемая смесь различных стилей, шрифтов, цветовых решений;
  • перегруженность экрана функциями, элементами или разнообразием цвета;
  • чрезмерный минимализм: на сайте только сухая информация или минимальное количество элементов, нет ничего, что могло бы вызвать интерес пользователя и удержать его на странице;
  • неправильный выбор цвета;
  • не расставлены акценты, не выделены значимые элементы: например, не используются заголовки, а они должны привлекать внимание посетителя и создавать общее представление о контенте;
  • плохо читается текст: неудачно выбран фон и цвет текста или шрифт;
  • ссылки бесполезны, когда не выделены, так как пользователь не обращает на них внимание и не использует;
  • не продумано отображение страниц в разных браузерах и на разных устройствах.

Обо всех этих типовых ошибках написано и сказано уже достаточно: забавные истории из серии “тыждизайнер”, обсуждения на форумах, огромное количество учебников.

Но глобальная сеть не стоит на месте. Постоянно появляются новые идеи оформления сайтов и приложений. И с каждой такой новой идеей открываются новые творческие перспективы, а одновременно появляется риск новых потенциальных просчетов.

С этой точки зрения дизайнер постоянно выполняет “работу над ошибками”.

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

Но если в результате этого трудоемкого процесса пользователю не просто будет нравиться картинка, а он с головой уйдет в изучение сайта и забудет обо всем остальном, успех достигнут!

Команда Umbrella всегда рада поучаствовать в создании продукта, который будет радовать пользователей и приносить в мир новые позитивные эмоции! Свяжитесь с нами прямо сейчас, не откладывайте свой успех на завтра!

 

Фото: Shutterstock.com


Ещё

  • Umbrella IT вошла в Топ веб и мобильных разработчиков
    Umbrella IT вошла в Топ веб и мобильных разработчиков
    Скейтбордисты и банджи-джамперы любят риск. Будоражащее кровь чувство опасности – именно то, что заставляет их сердца биться быстрее. Но когда дело касается представления своего бизнеса в интернете – зачем рисковать? Umbrella IT – надежный партнер. Мы были первым официальным партнером Symfony в России. Наш опыт и экспертизу давно ценят наши клиенты, а теперь – и …
  • Создаем приложение с механикой Uber: руководство по разработке проекта на миллион долларов
    Создаем приложение с механикой Uber: руководство по разработке проекта на миллион долларов
    Uber стал первым, кто применил бизнес-модель совместного потребления и экономику по требованию и взял на абордаж целый мир. Дестабилизация традиционного рынка такси не мешает Uber позиционировать себя, прежде всего, как технологическую, а не транспортную компанию. И это вполне оправданно – образцовый сервис и эффективные технические решения – именно то, что привело компанию к оглушительному успеху. …
  • Как увеличить вовлеченность в мобильных приложениях: 6 полезных советов
    Как увеличить вовлеченность в мобильных приложениях: 6 полезных советов
    Что заставит пользователей возвращаться в ваше приложение снова и снова? Как запустить работу приложения на полную мощность и сделать его незаменимым для всех и каждого? Десяток, а может и два десятка установленных на смартфон приложений, но пользуетесь в реальности всего несколькими из них? Совсем не хочется, чтобы ваше приложение попало в список “однажды открою, вдруг …