Путь к крутому веб-дизайнеру: UI/UX, wireframing, верстка и самообучение

Дизайн
Содержание
  1. Сокращение
  2. Общепринятые соглашения – наши друзья
  3. Тренды
  4. 1. Цветовые гаммы
  5. 2. Шапка и боковые баннеры
  6. 3. Верхняя навигация
  7. 4. Области со вкладками контента
  8. 5. Обложки, основанные на сетке
  9. Часть пятая: Верстка
  10. Пользовательские сценарии
  11. Акцентирование
  12. Чего не нужно делать
  13. Кому подойдет профессия?
  14. Разработка дизайна сайта, работа
  15. Подготовка к сдаче дизайна сайта
  16. Ошибка 4. Не думать о том, как клиенты будут изменять или добавлять контент после запуска сайта
  17. Разберем частые ошибки в веб-дизайне:
  18. 1. Аляпистые детали
  19. 2. Слишком яркие цвета
  20. 3. Неудобный поиск и форма обратной связи
  21. 4. Нечитаемые шрифты
  22. 5. Доступность на разных устройствах
  23. Базовые правила
  24. Часть вторая: Исследование
  25. Основные правила по созданию оптимального дизайна сайта
  26. Цель сайта
  27. Целевая аудитория
  28. Практика
  29. Шаг 4: Цветовая палитра и брендинг
  30. Вступление
  31. Интерактивные элементы могут быть скрыты
  32. Взаимодействуйте с пользователями посредством «языка дизайна»
  33. Добавьте больше фотографий на сайт
  34. Закон Фиттса

Сокращение

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

Вот вещи, которые можно удачно сократить на вашем сайте:

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

Отказываемся от подзаголовков под CTA и другими важными элементами. CTA — сам по себе очевидный и понятный сигнал. Лучшим решением будет вложить силы и время на его детальную проработку, чем вставлять подзаголовки под каждой кнопкой с объяснением, куда эта кнопка приведет.

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

Так вставлять текст не надо!

Функциональные блоки. Боремся с желанием показать все и сразу. Один функциональный блок = 4 или 8 элементов внутри. Лучше сгруппировать дополнительную информацию в другой тематический блок.

Путь решения проблемы. Золотое правило UX-дизайна — проблема должна быть решена в 3 клика. Не заставляйте пользователя пройти опрос, поставить лайк и оценить качество обслуживания для того, чтоб посмотреть условия доставки.

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

Общепринятые соглашения – наши друзья

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

Только представьте, что бы было, если каждый веб-дизайнер размещал на своем сайте свой вариант иконки RSS, а не просто преобразовывал общепринятый.

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

Изучайте пользователей, их поведение и ожидания. Ваш сайт должен им соответствовать и оправдывать. Больше информации по этой теме можно найти, почитав экспертов по юзабилити Якоба Нильсена или Дмитрия Сатина.

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

Тренды

1. Цветовые гаммы

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

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

The L.A. Times является отличным примером стандартной цветовой схемы.

2. Шапка и боковые баннеры

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

Если блоги обычно используют баннеры 125 на 125 пикселей, то новостные сайты обычно тратят на баннер 300 на 250 пикселей или же используют длинные боковые баннеры.

Telegraph, к примеру, отводит 730 на 90 пикселей на баннер в области шапки.

3. Верхняя навигация

Хоть здесь и есть несколько исключений, но в большинстве своем новостные сайты используют место сразу под шапкой для основного навигационного меню. The New York Times и MSNBC – яркие примеры исключений из этого правила, они оба используют левую боковую панель для меню навигации.

А вот Times Online использует двойную панель навигации.

4. Области со вкладками контента

Многие новостные веб-сайты используют вкладки с контентом, которые позволяют посетителям видеть популярные статьи, недавние статьи и так далее. Для таких вкладок иногда отводится место на боковой панели, иногда – в области с основным контентом, как на Wired. Это позволяет дать пользователям больше контроля над тем контентом, который они хотят видеть. Также это может сэкономить пространство.

5. Обложки, основанные на сетке

Такое сайты обычно строятся с помощью сеток. Такой дизайн популярен не только из-за четкого и строгого вида, но и из-за того, что так удобнее всего управлять контентом и организовывать его. У The New York Times самая лучшая обложка, основанная на сетке.

Часть пятая: Верстка

Я считаю, что веб-дизайнер должен уметь верстать. Хотя наверняка найдется много ленивых коллег, которые со мной не согласятся

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

Я не силен во Front-end, ведь настоящий Front-end — это глубокий JavaScript, разработка сложной логики интерфейсов для крупных и серьезных проектов. У меня другой склад ума — не программиста, а дизайнера, поэтому принуждать себя к области, которая не нравится смысла не вижу. Но я всегда смогу «оживить» свой дизайн и сделать рабочий HTML прототип на достаточно высоком уровне, если потребуется. И это довольно шикарная опция для веб-дизайнера, ведь ваш ценник, как специалиста, поднимается, как минимум, вдвое. Не стоит бояться осваивать новые горизонты. Верстка — это не сложно.

Если вы хотите освоить верстку и базовые навыки Front-end разработчика, советую:

  1. Изучить теорию. Советую для этого освоить сайт htmlbook.ru. От начала и до конца, все HTML теги, все CSS свойства
  2. Закрепить знания на практике. Для этого подойдут следующие мои материалы:
    • Создание Landing Page на WordPress, части: 1, 2, 3, 4, 5, 6, 7, 8, 9
    • Создание HTML тем на Bootstrap
    • Джедай верстки #4. Bootstrap: Погружение в адаптивную HTML верстку на примере коммерческого сайта
    • Создание сайта под ключ на заказ, уроки 11, 12,13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24, 25
    • Адаптивная верстка Landing Page. Джедай верстки #5
    • Адаптивная HTML верстка сайта салона красоты
    • Создание крутого Swiper-слайдера от А до Я

Материала по HTML верстке более, чем достаточно, поэтому с версткой все.

Пользовательские сценарии

У каждого сайта есть вполне понятные цели: заставить пользователя позвонить по номеру, оставить заявку или оформить заказ. Проработка пользовательских сценариев или customer journey map помогает в этом и буквально «за руку» ведёт посетителя сайта по его страницам так, что он так или иначе достигнет нужных целей. При создании пользовательских сценариев учитывается типы пользователей, которые будут посещать сайт, их цели и интересы. Например, пользовательский сценарий человека, который нацелен купить конкретный товар будет отличаться от сценария пользователя, который только узнал о том, что такой товар существует.

Акцентирование

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

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

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

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

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

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

Попытка акцентировать внимание пользователя на всех компонентах сразу приведёт к обратному эффекту, то есть внимание пользователя не будет акцентировано ни на одном компоненте

Чего не нужно делать

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

Перед запуском проверьте свой сайт по списку антирекомендаций:

  • Не заставляйте пользователя ждать. В юзабилити каждая секунда на счету. Если страница не грузится в течение 3-4 секунд, пользователь уходит.
  • Не усложняйте. Посетитель заходит, чтобы получить информацию сразу, а не искать её на страницах ресурса. Лучше сделайте поиск и навигацию понятными.
  • Не используйте неочевидные по смыслу иконки. Графика – это красиво, но, если значок меню или кнопки непонятен, на него никто не будет кликать.
  • Не перегружайте веб-страницу элементами. Пустое пространство упрощает восприятие, поэтому стоит делать свободную разметку, не уплотняя содержание.
  • Не мельчите. Шрифты должны быть читабельными. Иллюстрации тоже не стоит делать чересчур детализированными, так как это негативно влияет на конверсию мобильной версии.

Дизайн онлайн платформ – это творческий процесс. Однако для достижения результатов он должен подчиняться указанным правилам.

Кому подойдет профессия?

  • Людям, которым нравится рисовать и при этом испытывающим интерес к технологиям.
  • Кто хочет работать в ИТ-сфере, но не заниматься программированием или версткой.
  • Испытывающим искренний интерес ко всему новому.
  • Способным к самообучению.
  • Готовым к постоянным изменениям, развитию.
  • Внимательным, усидчивым.

Иметь художественное образование не обязательно. Работодатели и заказчики не указывают его в списке обязательных требований. Если вы не ходили в «художку», то все равно сможете работать. Но чтобы научиться веб-дизайну с нуля, нужно будет самостоятельно освоить теорию. Что именно потребуется знать, рассмотрим .

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

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

Важно внимание к деталям, способность продумать и аргументировать каждое решение

Разработка дизайна сайта, работа

1) Создавайте группы слоев. По принципу (шапка, слайдер, тело, сайтбар подвал и т.д.  (header, slider, body, sitebar, footer)). Задавайте цвета группам слоев, это поможет ориентироваться в исходнике.

2) Давайте названия слоям, иначе, когда их будет множество, сориентироваться будет гораздо сложнее. Это поможет как верстальщику, так и Вам, если придется вносить правки в макет.

3) Не склеивайте слои в фотошопе без необходимости, это повысит скорость внесения изменений в макет при необходимости.  Не растрируйте шрифты без надобности.

4) Высоту шрифтов задавайте целыми числами. Иначе верстка получится отличной от макета.

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

6) Оставляйте заметки о том, что нарисовали, если это необходимо.

7) Показывайте на макетах указателями курсоров как реагируют элементы.

Подготовка к сдаче дизайна сайта

  • Удаляем все лишние файлы из папок с проектом дизайна.
  • Удаляем все лишние слои из исходников, иначе верстальщик сверстает и их.

  • Удаляем все лишние направляющие, можно оставить только те, что использовались в качестве сетки.
  • Проверяем орфографию, чтобы не пришлось краснеть из-за ошибок или опечаток, и переделывать.
  • Проверяем, все ли дополнительные материалы приложены к проекту (шрифты, текстуры, документы).
  • При необходимости создаем пояснительную записку, в которой описываем работу интерфейсов и т.д.
  • Для веба сохраняйте изображения через (файл > сохранить для Web и устройств…( Save for Web & Devices…)) таким образом файлы будут весить меньше.

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

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

Ошибка 4. Не думать о том, как клиенты будут изменять или добавлять контент после запуска сайта

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

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

Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?

Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.

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

Разберем частые ошибки в веб-дизайне:

1. Аляпистые детали

Не стоит использовать все приемы графики сразу, анимировать все вокруг и делать сайт похожим на новогоднюю ёлку. Соблюдайте единый стиль и не пытайтесь разместить все фишки на одной странице, они будут отвлекать от сути ресурса.

2. Слишком яркие цвета

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

3. Неудобный поиск и форма обратной связи

Читатель может заинтересоваться сайтом и начать искать на нем нужную информацию. Это не должно быть сложной задачей, иначе пользователь просто уйдет со страницы к конкурентам. А также должны быть доступны контакты и обратная связь

Это важно для повышения лояльности целевой аудитории, легкости подписки на сайт и возможности для пользователя написать вам

4. Нечитаемые шрифты

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

5. Доступность на разных устройствах

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

Базовые правила

Главный принцип, которому нужно следовать при веб разработке – ставить себя на место потенциального пользователя. Знать его потребности недостаточно. Каждый элемент на странице должен проходить через фильтр вопросов. Упрощает ли он использование сайта? Легко ли понять информацию через тексты? Сможет ли посетитель найти то, зачем зашёл на ресурс?

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

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

Посетителям нужна информация, хорошие сайты – понятные.
Управляйте вниманием с помощью контента. Текстовые материалы с графикой нужны не только для информации

Расставляйте акценты и направляйте взгляд картинками.

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

Часть вторая: Исследование

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

Вы должны четко понимать, ПОЧЕМУ вы создаете именно такую секцию, именно такие элементы, именно такой порядок на Web странице. Все ваши действия должны быть подкреплены железобетонным основанием. Довольно странно будет звучать объяснение на вопрос «Почему здесь эти круглешочки?» в виде — «Потому, что я где-то увидел такие и решил данную форму применить под ваш выдуманный контент, так как у меня не работает фантазия». Странно, не правда ли?

Right Way — исследование. Исследование — это самый первый шаг дизайнера при работе над любым проектом. Нужно четко вывести группу пользователей, максимально узнать аудиторию, под которую вы разрабатываете интерфейс, узнать потребности этой аудитории. Конечно, основываясь только на своем личном опыте и своих ощущениях довольно сложно прийти к объективно правильному решению в интерфейсе, ведь вы не беспристрастны по отношению к результату вашего творчества и ваш личный опыт относительно конкретного продукта может быть весьма ограниченным. Тем не менее, если вы хорошо изучили продукт, для которого делаете дизайн сайта, то можете сделать какие-то выводы, принять решения. Самый минимум, который вы просто обязаны сделать, если вы фрилансер, работаете один и у вас нет своей команды UX специалистов — изучить текущий опыт бизнеса, накидать портрет среднего потребителя продукта. Например, если вы создаете посадочную страницу для продажи сельскохозяйственной техники, скорее всего, потенциальные клиенты не ищут особых изысков в визуальном исполнении сайта, их более интересуют каталог продукции, фотографии, сроки и способы дставки именно в их регион, цены и возможные скидки. Последний пункт говорит о том, что проектирование UX очень тесно связано с бизнесом. Это то, о чем обычно не говорят веб-дизайнеры, но думают все.

В начале своего исследования нужно пообщаться с владельцем бизнеса, вашим заказчиком. Он является специалистом в своем продукте и у него есть опыт работы с клиентами, он знает свою аудиторию. Записывайте все ключевые моменты на стикеры или в блокнот для дальнейшего анализа. Если вы фрилансер — изучите опыт аналогичных продуктов, тематические форумы и сообщества, но не применяйте слепо наработки конкурентов в своем проекте — это не правильно и не эффективно. Если вы — студия, у вас есть ресурсы и бюджет проекта достаточный для глубокого исследования — проводите онлайн-опросы, интервью с аудиторией, A/B-тестирования нескольких потенциально эффективных прототипов.

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

Наименование персоны Что ценят в первую очередь? Каковы цели посетителей?
Трактористка Глаша
  • Сроки поставки (не опоздать на посев)
  • Удобство доставки в регион (жд, авто, авиа)
  • Качество оборудования (чтобы не сломалось посреди поля)
  • Простота подключения (консультации по сложному агрегату)
Персона #2 ….. …..
Персона #3 ….. …..

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

Основные правила по созданию оптимального дизайна сайта

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

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

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

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

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

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

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

К примеру, делают все ресурсы на черном фоне со спецэффектами в фотошопе.

Я не спорю, что это красиво и классно смотрится.

Однако будет ли удобно читать статьи на таком сайте? Надолго ли вы на нем задержитесь?

Я думаю, что нет.

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

То есть, если задача продавать, то весь акцент дизайна должен сосредотачиваться на простоте и удобстве в заказе товара.

Чтобы дизайн сайта был конфеткой, нужно соблюдать три основных правила.

Цель сайта

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

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

Если сайт вы создаете для себя, то и цель вы должны определить сами.

Если же делаете работу на заказ, то должны узнать у заказчика четкое описание цели.

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

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

Если этого не сделать, то ничего не получится.

Целевая аудитория

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

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

Если цель обоих сайтов будет одинаковой, то дизайн сайтов может быть совершенно разным.

Целевая аудитория отличается и ее предпочтения совершенно разные.

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

Это является самой основной задачей веб-дизайнера.

Практика

Запомните такие слова: «Практика, практика и еще раз практика«. Чтобы wеб-дизайн был хорошим, нужно много практиковаться и экспериментировать.

С первого раза отличный результат у вас никогда не получится.

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

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

Шаг 4: Цветовая палитра и брендинг

Цветовая палитра отражает ценности бренда, передаёт настроение и облегчает восприятие контента. Ориентируйтесь на эти принципы для создания единого стиля:

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

— Основные и акцентные цвета. Выберите цвета для фона, текста и основного контента. Добавьте акцентные пятна для кликабельных элементов или кнопок.

— Цветовые сочетания. Чтобы подобрать корректную палитру, используйте законы цветового круга. Попробуйте ресурсы для автоматической комбинации цветов, например, сервис Adobe Color. 

— Контраст и читаемость. Обеспечьте достаточный контраст между цветами фона и текста для удобства чтения. Убедитесь, что текст четко виден на выбранных фоновых цветах.

— Соблюдение единого стиля. Поддерживайте единую гамму во всех разделах сайта. Используйте её для элементов интерфейса, кнопок, ссылок, заголовков и фона.

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

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

— Синий и белый. Синий символизирует спокойствие, доверие и профессионализм

В сочетании с белым он даёт чистый, прохладный и свежий вид сайта, отражает ясность и привлекает внимание к деталям товаров

— Зелёный и серый. Зелёный ассоциируется со здоровьем, природой, экологичностью Серый подойдёт для акцентов и обрамления, добавит лаконичности и элегантности.

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

Вступление

Нелегко создать работающий и красивый дизайн веб-сайта. На самом деле это не так.

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

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

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

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

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

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

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

Интерактивные элементы могут быть скрыты

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

Свободный характер взаимодействия с сенсорным интерфейсом даёт дизайнерам больше простора в выборе средств для представления информации. Используя в качестве индикатора движение или создавая удобный интерфейс, вызывающий желание прикоснуться, можно добиться богатой функциональности, не загромождая при этом страницу. Например, интерактивное приложение для набросков Paper, созданное студией FiftyThree, позволяет перелистывать страницы одним движением пальца. Это не только помогает передать ощущение от работы с бумажным альбомом, но и освобождает интерфейс от лишних элементов.

Чтобы посмотреть, как это работает, откройте сайт BostonGlobe.com на стационарном компьютере и уменьшайте размер окна браузера

Обратите внимание на то, как меняется изображение на экране.

При проектировании приложения дизайнеры должны найти легко считываемые метафоры и области, где пальцы ложатся естественным образом. На маленьком экране интерактивный элемент найти гораздо легче, и это приучает пользователей исследовать среду. Ещё один пример интерфейса, где предпочли положиться не на проверенные решения, а на пытливость пользователей — это мобильная версия Facebook. В приложении для iOS навигация открывается быстрым движение пальца в верхнем углу.

Чтобы посмотреть, как это работает, откройте сайт BostonGlobe.com на стационарном компьютере и уменьшайте размер окна браузера

Обратите внимание на то, как меняется изображение на экране.

Не бойтесь прятать интерактивные элементы — пользователи обязательно их найдут. Главное — обеспечить быстрый доступ к инструментам, без которых взаимодействие невозможно. Если вы не вполне уверены в своей клиентской базе, всегда показывайте несколько опций сразу. Согласно Якобу Нильсену, пока основные элементы взаимодействия доступны для всех новых пользователей, дополнительные настройки можно скрыть, оставив их привилегией «экспертов».

Взаимодействуйте с пользователями посредством «языка дизайна»

В своих трудах по эффективной коммуникации Аарон Маркус освещает 3 фундаментальных принципа «языка дизайна» — всего того, что пользователь видит на экране.

  • Организация. Обеспечьте свой сайт ясной и прозрачной структурой для удобства пользователей. Последовательность расположения элементов, простота и ясность навигации сайта – основные понятия организации. Эти же правила должны быть применены ко всем элементам сайта.
  • Экономия. Сделайте больше с минимальным набором визуальных элементов. В своей работе нужно использовать следующие 4 основных принципа: простота, ясность, уникальность и выразительность. Простота включает в себя только самые важные элементы для коммуникации. Ясность: каждый элемент сайта должен быть понятен и не вызывать вопросов. Уникальность: все основные элементы и их свойства должны быть уникальными. Выразительность: все самые важные элементы должны быть легко воспринимаемы.
  • Коммуникация. Сделайте сайт, соответствующим ожиданиям пользователей. В грамотном пользовательском интерфейсе в балансе находятся четкость, читабельность, типографика, символика, цвета или текстуры. Оптимально будет использовать 3 гарнитуры шрифта максимум 3-ех размеров – по 18 слов или 50-80 символов на строке.

Добавьте больше фотографий на сайт

Бесплатный фотосток — Unsplash

Посмотрим правде в глаза: все мы любим смотреть фотографии, видео, гифки или иллюстрации

Они с большей вероятностью привлекут наше внимание на странице сайта, чем любой фрагмент текста, каким бы прекрасно не был написан текст

Согласно исследованию, пользователи тратят на 10% больше времени на просмотр изображений, чем на чтение контента, связанного с этими фотографиями. Это означает, что вы должны попытаться включить как можно больше ярких визуальных элементов, будь то видео или фото, на свой веб-сайт.

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

  • Pexels
  • Unsplash
  • Pixabay
  • Stocksnap

Закон Фиттса

В 1954 году психолог Пол Фиттс провёл эксперимент. Он положил на стол две мишени и попросил испытуемых поочерёдно попадать в них ручкой. Расстояние между мишенями увеличивалось, а сами мишени — уменьшались.

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

Его очень часто применяют в дизайне интерфейсов, так как при использовании приложений и сайтов люди прицеливаются в те же мишени — кнопки, слайдеры, ссылки. Самый очевидный вывод из закона Фиттса — чем больше кнопка, тем проще в неё попасть:


Изображение: Skillbox Media

Ещё один вывод — нельзя ставить разные по смыслу кнопки рядом. Иначе пользователь может ошибиться и сделать неверный клик:


Изображение: Skillbox Media

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


Изображение: Skillbox Media

Благодаря закону Фиттса один из бывших дизайнеров Apple Джефф Раскин выяснил, почему панель настроек в программах для macOS удобнее, чем в их аналогах для Windows. И абсолютно те же различия можно заметить на современных системах.

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


Изображение: Skillbox Media

В Windows выше панели инструментов вверху окна есть небольшой отступ под панель с кнопками «Закрыть», «Свернуть» и «Открыть на весь экран». Из-за этого попасть в нужное место становится сложнее. Но зато кнопка «Пуск» стоит в углу — благодаря этому пользователь может вести курсор «куда-то в угол», и он точно попадёт в нужное место:

Оцените статью

Как стать крутым веб-дизайнером: все по полочкам и по шагам

Разработка сайтов
Содержание
  1. Сокращение
  2. Общепринятые соглашения – наши друзья
  3. Тренды
  4. 1. Цветовые гаммы
  5. 2. Шапка и боковые баннеры
  6. 3. Верхняя навигация
  7. 4. Области со вкладками контента
  8. 5. Обложки, основанные на сетке
  9. Часть пятая: Верстка
  10. Пользовательские сценарии
  11. Акцентирование
  12. Чего не нужно делать
  13. Кому подойдет профессия?
  14. Разработка дизайна сайта, работа
  15. Подготовка к сдаче дизайна сайта
  16. Ошибка 4. Не думать о том, как клиенты будут изменять или добавлять контент после запуска сайта
  17. Разберем частые ошибки в веб-дизайне:
  18. 1. Аляпистые детали
  19. 2. Слишком яркие цвета
  20. 3. Неудобный поиск и форма обратной связи
  21. 4. Нечитаемые шрифты
  22. 5. Доступность на разных устройствах
  23. Базовые правила
  24. Часть вторая: Исследование
  25. Основные правила по созданию оптимального дизайна сайта
  26. Цель сайта
  27. Целевая аудитория
  28. Практика
  29. Шаг 4: Цветовая палитра и брендинг
  30. Вступление
  31. Интерактивные элементы могут быть скрыты
  32. Взаимодействуйте с пользователями посредством «языка дизайна»
  33. Добавьте больше фотографий на сайт
  34. Закон Фиттса

Сокращение

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

Вот вещи, которые можно удачно сократить на вашем сайте:

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

Отказываемся от подзаголовков под CTA и другими важными элементами. CTA — сам по себе очевидный и понятный сигнал. Лучшим решением будет вложить силы и время на его детальную проработку, чем вставлять подзаголовки под каждой кнопкой с объяснением, куда эта кнопка приведет.

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

Так вставлять текст не надо!

Функциональные блоки. Боремся с желанием показать все и сразу. Один функциональный блок = 4 или 8 элементов внутри. Лучше сгруппировать дополнительную информацию в другой тематический блок.

Путь решения проблемы. Золотое правило UX-дизайна — проблема должна быть решена в 3 клика. Не заставляйте пользователя пройти опрос, поставить лайк и оценить качество обслуживания для того, чтоб посмотреть условия доставки.

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

Общепринятые соглашения – наши друзья

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

Только представьте, что бы было, если каждый веб-дизайнер размещал на своем сайте свой вариант иконки RSS, а не просто преобразовывал общепринятый.

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

Изучайте пользователей, их поведение и ожидания. Ваш сайт должен им соответствовать и оправдывать. Больше информации по этой теме можно найти, почитав экспертов по юзабилити Якоба Нильсена или Дмитрия Сатина.

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

Тренды

1. Цветовые гаммы

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

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

The L.A. Times является отличным примером стандартной цветовой схемы.

2. Шапка и боковые баннеры

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

Если блоги обычно используют баннеры 125 на 125 пикселей, то новостные сайты обычно тратят на баннер 300 на 250 пикселей или же используют длинные боковые баннеры.

Telegraph, к примеру, отводит 730 на 90 пикселей на баннер в области шапки.

3. Верхняя навигация

Хоть здесь и есть несколько исключений, но в большинстве своем новостные сайты используют место сразу под шапкой для основного навигационного меню. The New York Times и MSNBC – яркие примеры исключений из этого правила, они оба используют левую боковую панель для меню навигации.

А вот Times Online использует двойную панель навигации.

4. Области со вкладками контента

Многие новостные веб-сайты используют вкладки с контентом, которые позволяют посетителям видеть популярные статьи, недавние статьи и так далее. Для таких вкладок иногда отводится место на боковой панели, иногда – в области с основным контентом, как на Wired. Это позволяет дать пользователям больше контроля над тем контентом, который они хотят видеть. Также это может сэкономить пространство.

5. Обложки, основанные на сетке

Такое сайты обычно строятся с помощью сеток. Такой дизайн популярен не только из-за четкого и строгого вида, но и из-за того, что так удобнее всего управлять контентом и организовывать его. У The New York Times самая лучшая обложка, основанная на сетке.

Часть пятая: Верстка

Я считаю, что веб-дизайнер должен уметь верстать. Хотя наверняка найдется много ленивых коллег, которые со мной не согласятся

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

Я не силен во Front-end, ведь настоящий Front-end — это глубокий JavaScript, разработка сложной логики интерфейсов для крупных и серьезных проектов. У меня другой склад ума — не программиста, а дизайнера, поэтому принуждать себя к области, которая не нравится смысла не вижу. Но я всегда смогу «оживить» свой дизайн и сделать рабочий HTML прототип на достаточно высоком уровне, если потребуется. И это довольно шикарная опция для веб-дизайнера, ведь ваш ценник, как специалиста, поднимается, как минимум, вдвое. Не стоит бояться осваивать новые горизонты. Верстка — это не сложно.

Если вы хотите освоить верстку и базовые навыки Front-end разработчика, советую:

  1. Изучить теорию. Советую для этого освоить сайт htmlbook.ru. От начала и до конца, все HTML теги, все CSS свойства
  2. Закрепить знания на практике. Для этого подойдут следующие мои материалы:
    • Создание Landing Page на WordPress, части: 1, 2, 3, 4, 5, 6, 7, 8, 9
    • Создание HTML тем на Bootstrap
    • Джедай верстки #4. Bootstrap: Погружение в адаптивную HTML верстку на примере коммерческого сайта
    • Создание сайта под ключ на заказ, уроки 11, 12,13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24, 25
    • Адаптивная верстка Landing Page. Джедай верстки #5
    • Адаптивная HTML верстка сайта салона красоты
    • Создание крутого Swiper-слайдера от А до Я

Материала по HTML верстке более, чем достаточно, поэтому с версткой все.

Пользовательские сценарии

У каждого сайта есть вполне понятные цели: заставить пользователя позвонить по номеру, оставить заявку или оформить заказ. Проработка пользовательских сценариев или customer journey map помогает в этом и буквально «за руку» ведёт посетителя сайта по его страницам так, что он так или иначе достигнет нужных целей. При создании пользовательских сценариев учитывается типы пользователей, которые будут посещать сайт, их цели и интересы. Например, пользовательский сценарий человека, который нацелен купить конкретный товар будет отличаться от сценария пользователя, который только узнал о том, что такой товар существует.

Акцентирование

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

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

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

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

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

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

Попытка акцентировать внимание пользователя на всех компонентах сразу приведёт к обратному эффекту, то есть внимание пользователя не будет акцентировано ни на одном компоненте

Чего не нужно делать

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

Перед запуском проверьте свой сайт по списку антирекомендаций:

  • Не заставляйте пользователя ждать. В юзабилити каждая секунда на счету. Если страница не грузится в течение 3-4 секунд, пользователь уходит.
  • Не усложняйте. Посетитель заходит, чтобы получить информацию сразу, а не искать её на страницах ресурса. Лучше сделайте поиск и навигацию понятными.
  • Не используйте неочевидные по смыслу иконки. Графика – это красиво, но, если значок меню или кнопки непонятен, на него никто не будет кликать.
  • Не перегружайте веб-страницу элементами. Пустое пространство упрощает восприятие, поэтому стоит делать свободную разметку, не уплотняя содержание.
  • Не мельчите. Шрифты должны быть читабельными. Иллюстрации тоже не стоит делать чересчур детализированными, так как это негативно влияет на конверсию мобильной версии.

Дизайн онлайн платформ – это творческий процесс. Однако для достижения результатов он должен подчиняться указанным правилам.

Кому подойдет профессия?

  • Людям, которым нравится рисовать и при этом испытывающим интерес к технологиям.
  • Кто хочет работать в ИТ-сфере, но не заниматься программированием или версткой.
  • Испытывающим искренний интерес ко всему новому.
  • Способным к самообучению.
  • Готовым к постоянным изменениям, развитию.
  • Внимательным, усидчивым.

Иметь художественное образование не обязательно. Работодатели и заказчики не указывают его в списке обязательных требований. Если вы не ходили в «художку», то все равно сможете работать. Но чтобы научиться веб-дизайну с нуля, нужно будет самостоятельно освоить теорию. Что именно потребуется знать, рассмотрим .

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

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

Важно внимание к деталям, способность продумать и аргументировать каждое решение

Разработка дизайна сайта, работа

1) Создавайте группы слоев. По принципу (шапка, слайдер, тело, сайтбар подвал и т.д.  (header, slider, body, sitebar, footer)). Задавайте цвета группам слоев, это поможет ориентироваться в исходнике.

2) Давайте названия слоям, иначе, когда их будет множество, сориентироваться будет гораздо сложнее. Это поможет как верстальщику, так и Вам, если придется вносить правки в макет.

3) Не склеивайте слои в фотошопе без необходимости, это повысит скорость внесения изменений в макет при необходимости.  Не растрируйте шрифты без надобности.

4) Высоту шрифтов задавайте целыми числами. Иначе верстка получится отличной от макета.

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

6) Оставляйте заметки о том, что нарисовали, если это необходимо.

7) Показывайте на макетах указателями курсоров как реагируют элементы.

Подготовка к сдаче дизайна сайта

  • Удаляем все лишние файлы из папок с проектом дизайна.
  • Удаляем все лишние слои из исходников, иначе верстальщик сверстает и их.

  • Удаляем все лишние направляющие, можно оставить только те, что использовались в качестве сетки.
  • Проверяем орфографию, чтобы не пришлось краснеть из-за ошибок или опечаток, и переделывать.
  • Проверяем, все ли дополнительные материалы приложены к проекту (шрифты, текстуры, документы).
  • При необходимости создаем пояснительную записку, в которой описываем работу интерфейсов и т.д.
  • Для веба сохраняйте изображения через (файл > сохранить для Web и устройств…( Save for Web & Devices…)) таким образом файлы будут весить меньше.

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

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

Ошибка 4. Не думать о том, как клиенты будут изменять или добавлять контент после запуска сайта

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

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

Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?

Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.

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

Разберем частые ошибки в веб-дизайне:

1. Аляпистые детали

Не стоит использовать все приемы графики сразу, анимировать все вокруг и делать сайт похожим на новогоднюю ёлку. Соблюдайте единый стиль и не пытайтесь разместить все фишки на одной странице, они будут отвлекать от сути ресурса.

2. Слишком яркие цвета

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

3. Неудобный поиск и форма обратной связи

Читатель может заинтересоваться сайтом и начать искать на нем нужную информацию. Это не должно быть сложной задачей, иначе пользователь просто уйдет со страницы к конкурентам. А также должны быть доступны контакты и обратная связь

Это важно для повышения лояльности целевой аудитории, легкости подписки на сайт и возможности для пользователя написать вам

4. Нечитаемые шрифты

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

5. Доступность на разных устройствах

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

Базовые правила

Главный принцип, которому нужно следовать при веб разработке – ставить себя на место потенциального пользователя. Знать его потребности недостаточно. Каждый элемент на странице должен проходить через фильтр вопросов. Упрощает ли он использование сайта? Легко ли понять информацию через тексты? Сможет ли посетитель найти то, зачем зашёл на ресурс?

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

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

Посетителям нужна информация, хорошие сайты – понятные.
Управляйте вниманием с помощью контента. Текстовые материалы с графикой нужны не только для информации

Расставляйте акценты и направляйте взгляд картинками.

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

Часть вторая: Исследование

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

Вы должны четко понимать, ПОЧЕМУ вы создаете именно такую секцию, именно такие элементы, именно такой порядок на Web странице. Все ваши действия должны быть подкреплены железобетонным основанием. Довольно странно будет звучать объяснение на вопрос «Почему здесь эти круглешочки?» в виде — «Потому, что я где-то увидел такие и решил данную форму применить под ваш выдуманный контент, так как у меня не работает фантазия». Странно, не правда ли?

Right Way — исследование. Исследование — это самый первый шаг дизайнера при работе над любым проектом. Нужно четко вывести группу пользователей, максимально узнать аудиторию, под которую вы разрабатываете интерфейс, узнать потребности этой аудитории. Конечно, основываясь только на своем личном опыте и своих ощущениях довольно сложно прийти к объективно правильному решению в интерфейсе, ведь вы не беспристрастны по отношению к результату вашего творчества и ваш личный опыт относительно конкретного продукта может быть весьма ограниченным. Тем не менее, если вы хорошо изучили продукт, для которого делаете дизайн сайта, то можете сделать какие-то выводы, принять решения. Самый минимум, который вы просто обязаны сделать, если вы фрилансер, работаете один и у вас нет своей команды UX специалистов — изучить текущий опыт бизнеса, накидать портрет среднего потребителя продукта. Например, если вы создаете посадочную страницу для продажи сельскохозяйственной техники, скорее всего, потенциальные клиенты не ищут особых изысков в визуальном исполнении сайта, их более интересуют каталог продукции, фотографии, сроки и способы дставки именно в их регион, цены и возможные скидки. Последний пункт говорит о том, что проектирование UX очень тесно связано с бизнесом. Это то, о чем обычно не говорят веб-дизайнеры, но думают все.

В начале своего исследования нужно пообщаться с владельцем бизнеса, вашим заказчиком. Он является специалистом в своем продукте и у него есть опыт работы с клиентами, он знает свою аудиторию. Записывайте все ключевые моменты на стикеры или в блокнот для дальнейшего анализа. Если вы фрилансер — изучите опыт аналогичных продуктов, тематические форумы и сообщества, но не применяйте слепо наработки конкурентов в своем проекте — это не правильно и не эффективно. Если вы — студия, у вас есть ресурсы и бюджет проекта достаточный для глубокого исследования — проводите онлайн-опросы, интервью с аудиторией, A/B-тестирования нескольких потенциально эффективных прототипов.

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

Наименование персоны Что ценят в первую очередь? Каковы цели посетителей?
Трактористка Глаша
  • Сроки поставки (не опоздать на посев)
  • Удобство доставки в регион (жд, авто, авиа)
  • Качество оборудования (чтобы не сломалось посреди поля)
  • Простота подключения (консультации по сложному агрегату)
Персона #2 ….. …..
Персона #3 ….. …..

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

Основные правила по созданию оптимального дизайна сайта

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

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

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

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

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

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

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

К примеру, делают все ресурсы на черном фоне со спецэффектами в фотошопе.

Я не спорю, что это красиво и классно смотрится.

Однако будет ли удобно читать статьи на таком сайте? Надолго ли вы на нем задержитесь?

Я думаю, что нет.

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

То есть, если задача продавать, то весь акцент дизайна должен сосредотачиваться на простоте и удобстве в заказе товара.

Чтобы дизайн сайта был конфеткой, нужно соблюдать три основных правила.

Цель сайта

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

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

Если сайт вы создаете для себя, то и цель вы должны определить сами.

Если же делаете работу на заказ, то должны узнать у заказчика четкое описание цели.

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

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

Если этого не сделать, то ничего не получится.

Целевая аудитория

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

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

Если цель обоих сайтов будет одинаковой, то дизайн сайтов может быть совершенно разным.

Целевая аудитория отличается и ее предпочтения совершенно разные.

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

Это является самой основной задачей веб-дизайнера.

Практика

Запомните такие слова: «Практика, практика и еще раз практика«. Чтобы wеб-дизайн был хорошим, нужно много практиковаться и экспериментировать.

С первого раза отличный результат у вас никогда не получится.

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

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

Шаг 4: Цветовая палитра и брендинг

Цветовая палитра отражает ценности бренда, передаёт настроение и облегчает восприятие контента. Ориентируйтесь на эти принципы для создания единого стиля:

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

— Основные и акцентные цвета. Выберите цвета для фона, текста и основного контента. Добавьте акцентные пятна для кликабельных элементов или кнопок.

— Цветовые сочетания. Чтобы подобрать корректную палитру, используйте законы цветового круга. Попробуйте ресурсы для автоматической комбинации цветов, например, сервис Adobe Color. 

— Контраст и читаемость. Обеспечьте достаточный контраст между цветами фона и текста для удобства чтения. Убедитесь, что текст четко виден на выбранных фоновых цветах.

— Соблюдение единого стиля. Поддерживайте единую гамму во всех разделах сайта. Используйте её для элементов интерфейса, кнопок, ссылок, заголовков и фона.

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

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

— Синий и белый. Синий символизирует спокойствие, доверие и профессионализм

В сочетании с белым он даёт чистый, прохладный и свежий вид сайта, отражает ясность и привлекает внимание к деталям товаров

— Зелёный и серый. Зелёный ассоциируется со здоровьем, природой, экологичностью Серый подойдёт для акцентов и обрамления, добавит лаконичности и элегантности.

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

Вступление

Нелегко создать работающий и красивый дизайн веб-сайта. На самом деле это не так.

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

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

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

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

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

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

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

Интерактивные элементы могут быть скрыты

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

Свободный характер взаимодействия с сенсорным интерфейсом даёт дизайнерам больше простора в выборе средств для представления информации. Используя в качестве индикатора движение или создавая удобный интерфейс, вызывающий желание прикоснуться, можно добиться богатой функциональности, не загромождая при этом страницу. Например, интерактивное приложение для набросков Paper, созданное студией FiftyThree, позволяет перелистывать страницы одним движением пальца. Это не только помогает передать ощущение от работы с бумажным альбомом, но и освобождает интерфейс от лишних элементов.

Чтобы посмотреть, как это работает, откройте сайт BostonGlobe.com на стационарном компьютере и уменьшайте размер окна браузера

Обратите внимание на то, как меняется изображение на экране.

При проектировании приложения дизайнеры должны найти легко считываемые метафоры и области, где пальцы ложатся естественным образом. На маленьком экране интерактивный элемент найти гораздо легче, и это приучает пользователей исследовать среду. Ещё один пример интерфейса, где предпочли положиться не на проверенные решения, а на пытливость пользователей — это мобильная версия Facebook. В приложении для iOS навигация открывается быстрым движение пальца в верхнем углу.

Чтобы посмотреть, как это работает, откройте сайт BostonGlobe.com на стационарном компьютере и уменьшайте размер окна браузера

Обратите внимание на то, как меняется изображение на экране.

Не бойтесь прятать интерактивные элементы — пользователи обязательно их найдут. Главное — обеспечить быстрый доступ к инструментам, без которых взаимодействие невозможно. Если вы не вполне уверены в своей клиентской базе, всегда показывайте несколько опций сразу. Согласно Якобу Нильсену, пока основные элементы взаимодействия доступны для всех новых пользователей, дополнительные настройки можно скрыть, оставив их привилегией «экспертов».

Взаимодействуйте с пользователями посредством «языка дизайна»

В своих трудах по эффективной коммуникации Аарон Маркус освещает 3 фундаментальных принципа «языка дизайна» — всего того, что пользователь видит на экране.

  • Организация. Обеспечьте свой сайт ясной и прозрачной структурой для удобства пользователей. Последовательность расположения элементов, простота и ясность навигации сайта – основные понятия организации. Эти же правила должны быть применены ко всем элементам сайта.
  • Экономия. Сделайте больше с минимальным набором визуальных элементов. В своей работе нужно использовать следующие 4 основных принципа: простота, ясность, уникальность и выразительность. Простота включает в себя только самые важные элементы для коммуникации. Ясность: каждый элемент сайта должен быть понятен и не вызывать вопросов. Уникальность: все основные элементы и их свойства должны быть уникальными. Выразительность: все самые важные элементы должны быть легко воспринимаемы.
  • Коммуникация. Сделайте сайт, соответствующим ожиданиям пользователей. В грамотном пользовательском интерфейсе в балансе находятся четкость, читабельность, типографика, символика, цвета или текстуры. Оптимально будет использовать 3 гарнитуры шрифта максимум 3-ех размеров – по 18 слов или 50-80 символов на строке.

Добавьте больше фотографий на сайт

Бесплатный фотосток — Unsplash

Посмотрим правде в глаза: все мы любим смотреть фотографии, видео, гифки или иллюстрации

Они с большей вероятностью привлекут наше внимание на странице сайта, чем любой фрагмент текста, каким бы прекрасно не был написан текст

Согласно исследованию, пользователи тратят на 10% больше времени на просмотр изображений, чем на чтение контента, связанного с этими фотографиями. Это означает, что вы должны попытаться включить как можно больше ярких визуальных элементов, будь то видео или фото, на свой веб-сайт.

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

  • Pexels
  • Unsplash
  • Pixabay
  • Stocksnap

Закон Фиттса

В 1954 году психолог Пол Фиттс провёл эксперимент. Он положил на стол две мишени и попросил испытуемых поочерёдно попадать в них ручкой. Расстояние между мишенями увеличивалось, а сами мишени — уменьшались.

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

Его очень часто применяют в дизайне интерфейсов, так как при использовании приложений и сайтов люди прицеливаются в те же мишени — кнопки, слайдеры, ссылки. Самый очевидный вывод из закона Фиттса — чем больше кнопка, тем проще в неё попасть:


Изображение: Skillbox Media

Ещё один вывод — нельзя ставить разные по смыслу кнопки рядом. Иначе пользователь может ошибиться и сделать неверный клик:


Изображение: Skillbox Media

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


Изображение: Skillbox Media

Благодаря закону Фиттса один из бывших дизайнеров Apple Джефф Раскин выяснил, почему панель настроек в программах для macOS удобнее, чем в их аналогах для Windows. И абсолютно те же различия можно заметить на современных системах.

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


Изображение: Skillbox Media

В Windows выше панели инструментов вверху окна есть небольшой отступ под панель с кнопками «Закрыть», «Свернуть» и «Открыть на весь экран». Из-за этого попасть в нужное место становится сложнее. Но зато кнопка «Пуск» стоит в углу — благодаря этому пользователь может вести курсор «куда-то в угол», и он точно попадёт в нужное место:

Оцените статью