6 уловок веб-дизайнера


Содержание

Профессия веб-дизайнер: кто это такой и чем занимается?

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

Кто такой веб-дизайнер?

Профессия веб-дизайнер – это смесь знаний новейших технологий и умения заинтересовать публику у экранов монитора.

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

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

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

Главные навыки:

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

Главные качества:

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

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

Этапы работы веб-дизайнера

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

  • Подготовка технического задания или сокращённо ТЗ

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

  • Юзабилити (удобство использования)

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

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

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

Должностная инструкция

Это самое важное, ведь задав любому работодателю вопрос: “Что должен знать и уметь хороший веб дизайнер?” Будет много задач и требований, поэтому стоит заранее быть готовым.

  1. Создание макетов сайта.
  2. Разработка уникального дизайна.
  3. Стилевое оформление страниц сайта, учитывая все технологические стандарты интернета: создание иконок, баннеров, логотипов, лендингов, промо-страниц, анимаций, картинок, аватаров, визиток.
  4. Создание образцов web-документов.
  5. Умение пользоваться различными программами и кодами: HTML, CSS, Photoshop, Corel Draw, Illustrator Macromedia Flash и т. д.
  6. Работа с графикой: оптимизация элементов графики (тон, корректировка цвета).
  7. Создание программной части страницы.
  8. Создание электронных презентаций.
  9. Отслеживание новинок в данной отрасли.
  10. Разработка маркетинговых и рекламных мероприятий.

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

Программы разделим на несколько категорий:

  1. Программы для обработки растровой графики. Их назначение заключается в редактировании графических файлов и работа с эффектами: Adobe Photoshop – один из главных инструментов. Его аналоги — Paint.net и GIMP.
  2. Работа с векторной графикой. Эти программы предназначены для работы с надписями и кнопками. Самыми популярными стали: Corel DRAW и Adobe Illustrator.
  3. Текстовые редакторы. Чтобы полностью создать сайт, нам важны знания ещё двух языков для вёрстки, таких как HTML и CSS. Знание основ будет огромным плюсом, как для начинающего, так и для опытного фрилансера.
  4. Есть ещё и дополнительные программы, к примеру, Colormania (работа с цветом) или Adobe Flash (для создания анимаций и баннеров), но это уже тема отдельной статьи, так как нюансов и знаний в этой области достаточно.

Плюсы и минусы профессии

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

Плюсы:

  • Возможность стать свободным фрилансером.
  • Востребованность вакансии на рынке труда.
  • Карьерный рост.
  • Перспективная возможность сотрудничать с заказчиками со всего мира.
  • Высокая заработная плата (при наличии определённого опыта и хорошего портфолио).
  • Возможность воплощения различных идей без финансовых вливаний.
  • Творческая самореализация.
  • Развитие в команде единомышленников.

Но, как бы ни была привлекательна эта профессия, всегда найдётся «ложка дёгтя».

Минусы:

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

Где найти работу веб-дизайнером

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

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

А может вы и вовсе хотите стать одним из сотрудников компании Red Keds, Студии Артемия Лебедева или Яндекс? Или вы мечтаете открыть собственную студию? Тогда вам точно нужно применять все советы на практике!

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

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

Заработная плата

А сколько же зарабатывает веб-дизайнер? Нужно чётко понимать, что сумма прямо пропорциональна вашему опыту, наличию портфолио, а также престижу студии и количеству заказов. По всему Рунету вы можете найти разные суммы, так как фиксированной зарплаты нет. Всё зависит от объёма выполняемой работы и дедлайна.

Если говорить примерно, то средняя зарплата веб-дизайнера составляет 30 — 50 тыс. руб. в месяц. Профессионалы в этом деле могут получать больше 100 тыс. руб.

Готовы потрудиться, чтобы обрести финансовую свободу, и как бонус — найти работу онлайн? Тогда просторы интернета ждут именно вас. Читайте в следующей статье, с чего начать и как стать веб-дизайнером самостоятельно.

Заключение

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

Но, что делает обычного человека действительно востребованным профессионалом? Ведь новичков очень много, а вот найти толкового — задача не из простых. Ответ довольно прост! Главное — это определить вектор развития, поставить цель и изучать то, что именно вам по душе. Если это дело, от которого горят глаза и сердце, то будут и финансовая прибыль, и приятные отзывы от заказчиков.

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

100+ сервисов для веб-дизайнера, о которых Вы могли даже не подозревать

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

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

Итак, вот подборка из 5-ти групп сервисов для веб-дизайнера:

16 бесплатных ресурсов для веб-дизайнера

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

Следующие сайты являются одними из самых лучших в данной области:

  • 1 Freebbble — если Вам нужно еще больше бесплатностей для создания Вашего дизайна, тогда загляните на данный сервис. Здесь Вы найдете очень много великолепных дизайнерских решений, которые можно скачать абсолютно бесплатно.
  • 2 AllFreeStock — классный сервис с бесплатными фото, mockup-ами, видео, звуковыми эффектами, а также иконками. Да и сам сайт очень прост в использовании.
  • 3 Dribbble — введите в поиске «freebie» и Вы найдете список всех бесплатностей, которые есть на этом сервисе и сможете скачать каждую из них.
  • 4 Graphic Burger — дизайн в высоком качестве.
  • 5 Pixel Buddha — сайт для профессиональных дизайнеров. Есть платные материалы.
  • 6 Freebiesbug — если Вы хотите использовать при разработке дизайна самые новые PSD шаблоны и новинки, тогда обязательно посетите данный сайт.
  • 7 365 PSD — большая коллекция PSD файлов.
  • 8 Dbf — данный сервис объединяет лучшие бесплатности сервиса Dribble и сервиса Behance.
  • 9 Marvel — это бесплатные материалы от дизайнеров, которые имеют хорошую репутацию у своих коллег и клиентов.
  • 10 UI Space — материалы ручной работы.
  • 11 Free Section of Pixeden — здесь находятся премиум-материалы.
  • 12 Free Section of Creative Market — новая бесплатность каждый понедельник.
  • 13 Teehan+Lax — это лучший ресурс с mockup-ом для iPhone 6 и iPad, а также графического интерфейса iOS8.
  • 14 Tech&All — большая коллекция PSD шаблонов, которые Вы можете использовать без какой-либо дополнительной ответственности.
  • 15 Freepik — бесплатные графические ресурсы.
  • 16 Tethr — самый потрясающий дизайн для iOS.

19 онлайн-палитр

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

  • 1 Material Palette — полезный инструмент для генерации и экспорта цвета для Material Design.
  • 2 New Flat UI Color Picker — этот сервис просто обязателен к использованию, если Вы создаете дизайны в современном Flat стиле. Цвета сделают Ваш сайт более привлекательными, несмотря на саму плоскую Flat концепцию дизайна.
  • 3 Flat UI Colors — еще один сервис, который должен присутствовать в арсенале дизайнера работающего с Flat.
  • 4 Coolors — классный сервис для дизайнеров, который позволяет получить не только великолепные цветовые схемы для сайта, а также сделать это очень быстро.
  • 5 Skala Color — это бесплатное ПО для подбора и определения цвета на OS X.
  • 6 Couleurs — еще одно приложение для пользователей Mac для работы с цветом на экране монитора.
  • 7 Material UI Colors — большой спектр цвета на Ваш выбор.
  • 8 Colorful Gradients — большая коллекция готовых градиентов, которые Вы можете использовать в своих проектах.
  • 9 Adaptive Backgrounds — плагин jquery который автоматически понимает доминирующий фоновый цвет изображения и делает фоновый блок с таким же цветом.
  • 10 Brand Colors — здесь Вы найдете цвета, которые используют самые известные бренды.
  • 11 Paletton — данный сервис позволит очень легко подобрать цветовую гамму для Вашего сайта.
  • 12 0 to 255 — поиск и изменение цветовых схем происходит намного легче с использованием данного сервиса.
  • 13 Colour Lovers — это небольшое сообщества где дизайнеры делятся своими наработками. Вы также можете создать свою цветовую схему или узор и разместить для общего обозрения свое творение.
  • 14 Adobe Color CC — цветовые схемы созданные в сообществе Kuler.
  • 15 Bootflat — если Вы работаете с сайтами во Flat дизайне, тогда Вы просто обязаны попробовать данный сервис.
  • 16 Hex Colorrrs -преобразование из формата HEX в RGB.
  • 17 Get UI Colors — с помощью данного сервиса Вы получаете потрясающие цвета для интерфейса пользователя.
  • 18 Coleure — отличный инструмент для выбора цвета.
  • 19 Palette for Chrome — данный плагин для браузера Google Chrome позволяет создавать цветовые схемы. А изображения можно брать прямо из изображений.

17 сайтов для поиска вдохновения

Чаще всего самая большая проблема любого проекта это начать его. Возможно в Вашей голове плавают какие-либо идеи. Но как их все взять и реализовать? Да еще так, чтобы всё смотрелось действительно современно и стильно? Так почему же не взять некоторые концепции, а также идеи на лучших дизайнерских сервисах в интернете! С помощью данных сервисов Вы сможете самостоятельно создать действительно потрясающий и современный дизайн чего бы то ни было:

  • 1 FLTDSGN — Вы работаете преимущественно с сайтами у которых дизайн в стиле Flat? Тогда данный ресурс даст Вам очень много информации благодаря которой у Вас будут происходить идеи постоянно.
  • 2 Site Inspire — создаете сайты под заказ и уже не хватает вдохновения? Тогда просто загляните на данный сайт.
  • 3 UI Cloud — это одна из самых больших баз, где собраны дизайн для пользовательских интерфейсов. Данный сервис поможет Вам создать очень качественный UI (пользовательский интерфейс) дизайн для своего проекта и обеспечить легкость в использовании сайтом или веб-приложением.
  • 4 Moodboard — сервис дает возможность создать свой проект, который будет состоять из определенных изображений в одной стилистике, цветов и других материалов.
  • 5 Crayon — если Вы работаете над дизайном страницы с каким-либо товаром или услугой, то этот сервис поможет Вам в поиске идеи в данной области.
  • 6 Land-Book — создание лендинга занятие творческое. Посетите данный ресурс, чтобы узнать больше о креативных блоках и элементах, которые можно размезстить на своем лендинге.
  • 7 Dribbble — для опытных дизайнеров данный ресурс будет очень знаком, ну а для начинающих он окажется крайне полезным. Учитесь дизайну у профессиональных дизайнеров с помощью данного ресурса.
  • 8 Behance — также очень знаменитый ресурс, где профессиональные дизайнеры выкладывают свои работы.
  • 9 Pttrns — данный сервис полезен для тех, кто очень увлекается дизайном сайтов для мобильных устройств. Здесь Вы найдете большое количество различных примеров, которые сделаны профессиональными дизайнерами.
  • 10 Flat UI Design — простыми словами это «доска вдохновения».
  • 11 Awwwards — данный проект постоянно награждает самые креативные, самые минималистичные и самые красивые сайты. Поэтому советую посетить и посмотреть что сейчас наиболее актуально в мире веб-дизайна.
  • 12 The Starter Kit — полезный инструмент для веб-дизайнеров и веб-разработчиков.
  • 13 One Page Love — если Вы занимаетесь созданием одностраничных сайтов, то данный сервис Вы обязательно должны взять на вооружение. Потому что благодаря ему Вы будете создавать более дружелюбные сайты, которые будут нравится пользователям и будут максимально удобны при использовании.
  • 14 UI Parade — дизайн элементов пользовательского интерфейса и новые идеи после посещения данного ресурса Вам обеспечены.
  • 15 The Best Designs — лучшие разработки в сфере веб-дизайна.
  • 16 Agile Designers — если Вы являетесь дизайнером или разработчиком, то это ресурс, который Вы обязаны проверить.
  • 17 Niice — это поисковик «со вкусом». Потому что он позволяет искать информацию сразу на нескольких популярных сайтах посвященных дизайну. Вводить запрос, естественно, необходимо латинскими буквами.

38 бесплатных фотостоков

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

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

  • 1 Stock Up — один из лучших фотостоков, который предлагает на выбор большой спектр различных изображений.
  • 2 Pexels — лучшие фотографии заката, автомобилей, здания, людей, улиц города, природы и так далее.
  • 3 All the Free Stock — этот сервис предоставляет не только изображения, а также иконки и видео. Все изображения со свободной лицензией (Creative Commons Zero license).
  • 4 Unsplash — многим может быть знаком данный сервис. Здесь каждые 10 дней можно скачать 10 новых изображений.
  • 5 Startup Stock Photos — коллекция изображений посвященных стартапам.
  • 6 Jay Mantri — потрясающие изображения в высоком разрешении для Ваших нужд.
  • 7 Moveast — это фотографии одного португальского путешественника, который делает качественные снимки и позволяет использовать их абсолютно бесплатно.
  • 8 Stokpic — если все вышеупомянутые сайты при поиске не дали тот результат, который Вам нужен, тогда поищите необходимую фотографию здесь.
  • 9 Kaboompics — большой выбор потрясающих фотографий.
  • 10 Function — данный сайт предлагает целые наборы изображений.
  • 11 MMT — потрясающие фото интернета, которые сделаны автором Jeffrey Betts.
  • 12 Travel Coffee Book — данная коллекция фотографий была сделана при путешествии по всему миру.
  • 13 Designers Pics — здесь Вы сможете легко найти изображения как для Вашего личного использования, так и для бизнеса.
  • 14 Death to the Stock Photo — после подписки, данный сервис будет присылать Вам абсолютно бесплатные изображения каждый месяц.
  • 15 Foodie’s Feed — работаете над сайтами с тематикой питания? Тогда посетите данный сайт. Потому что там находится очень много изображений еды в высоком качестве. Так и хочется пустить слюну при просмотре �� .
  • 16 Mazwai — большой выбор видео для фона.
  • 17 Jéshoots — если Вы хотите воспользоваться самыми новыми и современными изображениями прямо сейчас — тогда этот сервис самое подходящее место для поиска таких изображений.
  • 18 Super Famous — данные фотографии были сделаны голландским дизайнером Folkert Gorter.
  • 19 Picography — этот сайт дает Вам возможность выбрать из большого количества изображений с высоким разрешением.
  • 20 Splashbase — коллекция фото и видео материалов для Ваших проектов.
  • 21 Pixabay — еще один сервис с изображениями в высоком разрешении.
  • 22 Little Visuals — подписавшись, Вы будете получать 7 изображений в высоком разрешении каждую неделю. То есть каждый день новое изображение!
  • 23 Splitshire — бесплатные «аппетитные» фотографии.
  • 24 New Old Stock — если Вам нужны старинные фотографии из государственных архивов, тогда Вам отлично подойдет данный сайт.
  • 25 Picjumbo — это еще один сайт, где Вы можете найти и скачать фотографии абсолютно бесплатно.
  • 26 Life of Pix — не все изображения данного сайта полностью бесплатны, но все они в очень высоком разрешении.
  • 27 Gratisography — если Вы не можете найти подходящее изображение с высоким разрешением, тогда данный сайт может Вам в этом помочь.
  • 28 Getrefe — еще больше беспталных изображений для Вашего дизайна.
  • 29 IM Free — этот сайт может похвастаться действительно большим выбором изображений.
  • 30 Cupcake — этот сайт является настоящим раем для фотографов, созданный Jonas Nilsson Lee.
  • 31 The Pattern Library — если Вы ищете паттерны для своего проекта, тогда данный сайт сможет Вам в этом помочь.
  • 32 Public Domain Archive — данный сервис предлагает 100% беслптаные изображения.
  • 33 ISO Republic — этот фотосток также предлагает Вам на выбор изображения в высоком разрешении.
  • 34 Paul Jarvis — на этом сайтке Вы найдете не только статьи, посвященные дизайну, а также коллекции из очень качественных изображений.
  • 35 Lock & Stock Photos — коллекция качественных фото.
  • 36 Raumrot — большой спектр изображений в высоком качестве.
  • 37 Bucketlistly — изображения путешествий.
  • 38 Magdeleine — каждый день новое изображение в высоком качестве.

14 сервисов с бесплатными иконками

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

  • 1 Fontello — сайт генератор иконок.
  • 2 Flat Icon — поиск по 16000+ иконкам в векторе. Здесь Вы сможете найти самые лучшие иконки для своих проектов.
  • 3 Material Design Icons — более 750 иконок от Google.
  • 4 Font Awesome — без сомнений, это лучший иконочный шрифт, который очень легко может быть подключен на любом сайте и имеет массу плюсов.
  • 5 Glyphsearc — поиск по нескольким базам с иконками.
  • 6 MakeAppIcon — с помощью нескольких кликов Вы можете создать иконки для своего приложения.
  • 7 Endless Icons — если Вы работаете с дизайном в стиле Flat, тогда посетите обязательно данный ресурс.
  • 8 Ico Moon — генератор иконок, который имеет более чем 4000 векторных иконок.
  • 9 The Noun Project — на данном сайте находятся тысячи различных иконок созданные разными дизайнерами.
  • 10 Perfect Icons — сервис для создания социальных иконок.
  • 11 Icon Finder — это бесплатный раздел данного сайта. Обязательно изучите его, возможно некоторые иконки Вам пригодятся.
  • 12 Doodle Set — бесплатный набор иконок в стиле Doodle.
  • 13 Flat Set — бесплатный набор икононок в стиле Flat.
  • 14 Icon Sweets — 60 бесплатных векторных иконок для Photoshop, которые сделают Ваш сайт еще более привлекательным.

Вывод

Используя вышеупомянутые ресурсы Вы с легкостью сможете создать действительно привлекательный и креативный дизайн для своих веб-проектов. Поэтому чтобы не потерять данный список сервисов — добавьте данную страницу в закладки своего браузера с помощью сочетания клавиш CTRL+D.

25 советов начинающим веб-дизайнерам

Никита Обухов, основатель сервиса Tilda Publishing и креативный директор студии FunkyPunky, выпустил теоретический курс по веб-дизайну «Дизайн в цифровой среде». Специально для Лайфхакера он сформулировал несколько тезисов курса, которые помогут начинающим дизайнерам понять, как делать сайты для себя или для клиентов.

Это учебник нового формата, в котором знания и опыт, накопленные за 15 лет работы в вебе, систематизированы и упакованы в 20 увлекательных лонгридов, написанных простым языком.

Создание сайта — это технология

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

Нельзя работать над проектом, который ты ненавидишь

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

Любая разработка начинается с боли и неудовлетворённости

Если исходить из того, что дизайн — это решение проблем, то дизайнеры — это «проблеморешатели». Чтобы устранить проблему и найти эффективное решение, нужно сначала провести исследование и точно определить проблему, затем сфокусироваться на конкретных «болевых точках». Для этого нужно понять, что делают люди, для которых вы создаёте сайт, зачем они это делают, как они видят окружающий мир, какие у них ценности и потребности.

Умение слушать — первое, чему следует научиться дизайнеру

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

Нужно понять мир, в котором существует человек. У каждого из нас есть уникальный опыт (события, которые мы пережили), который детерминирует наше отношение к миру. Часто мы говорим: «Да, я это знаю, мне всё понятно». Но оказывается, что разница кроется в деталях и она может быть принципиальной. Поэтому, когда мы слушаем человека, нужно постараться вжиться в его образ, как это делают актёры. Почувствовать себя на его месте.

Иллюстрация из лекции об эмпатии курса «Дизайн в цифровой среде». Автор: Юлия Засс

Идея требует времени

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

Переключитесь на другую задачу, а ещё лучше возьмите паузу: займитесь спортом, погуляйте по городу, пообщайтесь с друзьями. Совет не новый, но он действительно работает — через какое-то время идея обязательно появится.

Используйте майндмэппинг для генерации идей

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

Проводите исследования

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

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

Смотреть картинки — это работа

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

Фото: Tilda Publishing

Следите за трендами

Дизайнер — это проводник развития визуальной культуры, поэтому важно находиться в современном контексте.

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

Хороший дизайн — это результат вашего саморазвития и самообразования

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

Учитесь не только веб-дизайну

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

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

Направляйте критику в конструктивное русло

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

Найдите вдохновляющих людей

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

Не жалейте времени на хорошую композицию

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

Людей давно соблазняет мысль рассчитать идеальные пропорции математически (канон Виллара де Оннекура, ряд Фибоначчи и так далее). Но никакие цифры не позволят создать такую композицию, которую вы почувствуете, раз за разом меняя положение объектов. Это непросто, требует навыков и опыта, но это самый интресный и плодотворный способ.

Ограничьте цветовую палитру

Цвет — это просто. Это такая супербазовая единица, как буква. Но это не значит, что нужно покрасить всё в разные цвета. Наоборот, используйте один цвет, который займёт 80–90%, и дополнительный цвет в качестве акцента. Один — лучший вариант. Три использовать нельзя. Два — очень аккуратно.

Подключите фирменный шрифт

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

Используйте сетку как вспомогательный инструмент

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

Цукерберг рекомендует:  Html - Что означает .php в ссылке

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

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

Фото: Tilda Publishing

Итерации — основа хорошего дизайна

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

Главный навык дизайнера — уметь рассказать историю

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

В веб-дизайне под сторителлингом мы понимаем способ подачи информации. Цифровой сторителлинг — сочетание контента и интерфейса.

Рисуйте каждую страницу как Landing Page

В идеале Landing Page — это страница, где человек получает ответы на все ключевые вопросы по услуге или продукту без перехода на другие страницы. Формат Landing Page появился как способ увеличить конверсию при рекламе, но постепенно те принципы, которые сложились в формате Landing Page, стали распространяться и на страницы в целом.

Добавьте «воздуха»

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

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

Не перегружайте меню

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

Продавайте себя, а не портфолио работ

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

Увлеките пользователя продуманной типографикой

Контент должен быть хорошо оформлен. Недостаточно просто выложить кусок текста — нате, читайте! Вниманием читателя нужно управлять. Используйте приёмы из графического дизайна.

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

20 признаков ужасного веб-дизайнера

Если Вы, уважаемый читатель, сотрудничаете с веб-дизайнером или планируете нанять его для создания сайта, ― эта публикация поможет Вам вычислить того, кто привык «творить» шаблонами и недостоин носить гордое имя дизайнера. Хм, Вы и есть веб-дизайнер? Тогда добавьте эту страницу в закладки, отправьте статью себе на email и на всякий случай распечатайте.

Здесь собраны целых 20 моментов, которые могут Вас дискредитировать

1. Затраты на создание сайта меньше 30 000 рублей

Как бы Вы ни желали сэкономить ― если создание сайта (ну, возможно, кроме визитки-одностраничника) обходится дешевле тысячи долларов, вероятно, веб-дизайнер не сильно заинтересован в успехе Вашего проекта. И сайт будет соответствующим. Все хотят тратить как можно меньше и зарабатывать миллионы ― но если бы это было так просто, миллионером был бы каждый первый. На создании сайта лучше не экономить, поскольку Вы получите именно то, за что заплатили. За 30 тысяч можно и машину купить, но вы догадываетесь, какой она будет. Если вы всё ещё думаете, что сайт может стоить меньше тысячи долларов, рано или поздно Вы обратитесь к тому веб-дизайнеру, чьи услуги казались слишком дорогими. Скупой платит дважды, и второй раз ― чаще всего дороже.

Симпатичная девушка в наушниках, готовая принять входящий звонок ― сколько раз вы видели её улыбку на разных сайтах? Подобную стоковую фотографию можно найти на страницах контактов, в боковых меню, иногда даже в шапке сайта. Красотка-С-Гарнитурой не повысит продажи и не увеличит число звонков. Единственное, что она сделает, ― придаст вашему сайту шаблонный и глуповатый вид: callback.

3. Веб-дизайнер перестал Вам звонить

Каждый новый веб-сайт начинается c энтузиазма, с желания сделать отменный ресурс, который будет стабильно генерировать прибыль. Поддерживать эту энергию нужно всё время, пока сайт создаётся и наполняется контентом. Если веб-дизайнер перестал регулярно выходить на связь, ― значит, движущая сила проекта ослабла. Ваш веб-дизайнер должен выходить с вами на связь каждую неделю (а лучше каждый день!). Требуйте постоянно поддерживать контакт, назначайте день и время для совещаний каждую неделю до тех пор, пока проект не будет закончен.

4. Вы нашли своего дизайнера по объявлению на сайте

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

5. Ваш веб-дизайнер не знает, где брать контент для сайта

Создание контента для нового сайта ― самая трудная задача, с которой сталкиваются все клиенты. Это причина большинства задержек. Хороший веб-дизайнер предложит вам решение и предупредит вас об этом решающем этапе на первой же встрече. Вот возможные варианты решений по копирайтингу:
а) клиент создаёт весь контент самостоятельно (будьте готовы: потребуется много времени и усидчивости);
б) клиент поручает работу кому-либо из своих сотрудников (штатному копирайтеру);
в) клиент нанимает копирайтера-фрилансера;
г) веб-дизайнер предлагает копирайтера из своей компании;
д) веб-дизайнер нанимает фрилансера.

6. Креатив — цель № 1 для веб-дизайнера

Креатив не должен быть смыслом жизни Вашего веб-дизайнера. Американское агентство HubSpot выяснило, что 76 % пользователей в первую очередь хотят легко найти то, что они ищут. Только 10 % пользователей сообщили, что «красивое оформление» ― это главное качество сайта. Так что креативный дизайн мало кого беспокоит. Чем лучше организован Ваш контент, тем дольше пользователь будет исследовать сайт. Чем больше времени он проведёт на сайте, тем выше вероятность покупки. Посему ― убедитесь, что у Вашего веб-дизайнера правильные приоритеты.

7. Веб-дизайнер ― Ваш родственник

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

8. Ваш веб-дизайнер ― это Вы сами

Нужны годы, чтобы научиться делать приличные сайты. И если Ваша основная профессия не имеет ничего общего с дизайном, ― Вы, увы, не сможете воплотить свой проект в одиночку. Поручите дело мастеру!

9. Вы создаёте сайт в автоматической программе для веб-дизайна

Как показывает опыт, чтобы не наткнуться на дилетанта, следует посмотреть портфолио претендента и документ о профессиональном образовании ― у липового дизайнера не будет ни того, ни другого. Научиться пользоваться недорогой дизайнерской программой можно за пару часов. Но Вы не узнаете того, чему настоящий веб-дизайнер научился за годы практики. Другими словами, программа не сможет сделать для Вас сайт, который будет привлекать целевых посетителей и продавать Ваш продукт. Никто не может называться крутым дизайнером только потому, что умеет пользоваться фотошопом. Ваш веб-дизайнер может уверять, что знает все программы Adobe как свои пять пальцев, но его работы всё же никуда не годятся. Только многолетний опыт превращает ужасного дизайнера в привлекательного профи.

10. Ваш веб-дизайнер не использует специальное ПО управления проектами

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

11. Веб-дизайнер задаёт мало вопросов

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

Вот 10 вопросов, которые просто обязан задать грамотный веб-дизайнер:

1) Каковы Ваши главные и второстепенные цели для этого сайта?
2) Кто Ваша целевая аудитория?
3) Опишите своего типичного потребителя.
4) Назовите Ваших конкурентов в онлайне и оффлайне.
5) Занимаетесь ли Вы маркетингом вне интернета?
6) Где находится Ваша целевая аудитория (в масштабах города, страны, планеты)?
7) Каковы принципы Вашего бренда?
8) Есть ли у Вас свой копирайтер?
9) Можете ли Вы предоставить дополнительную информацию (фотографии, видео, брошюры)?
10) Можем ли мы получить аналитику по Вашему нынешнему сайту?

12. У Вашего веб-дизайнера слишком много клиентов

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

Если Вы ― веб-дизайнер, и ваша цель ― зарабатывать 500 000 у.е. в год, постарайтесь заполучить 10 клиентов с бюджетом по 50 тысяч, а не 50 проектов по 10 тысяч. Прибыль та же, но меньше клиентов, звонков, переходов на личности и головной боли.

13. Нет плана работы

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

14. Нет структуры будущего сайта

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

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

15. Нет стратегии по конверсии

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

Конверсия может быть первичной и вторичной. Первичная конверсия ― это реальные продажи на сайте или запросы на подробное описание товара. Вторичная конверсия ― это обычно заполнение форм, где требуется email. Ваш веб-дизайнер должен выяснить у Вас ― какие способы связи с Вами будут предоставлены клиентам и как они сами предпочитают контактировать с вашей фирмой. В конце концов, для этого Вы и создаёте сайт.

16. Ваш веб-дизайнер работает в IT-отделе Вашей компании

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

17. Картинка с рукопожатием

Если Вы увидите её на сайте ― распорядитесь немедленно убрать. Это так же избито, как и Красотка-С-Гарнитурой, олицетворяющая службу поддержки. К тому же этот ненужный символ сотрудничества занимает много места.

18. Нет SEO-стратегии

Допустим, Вы решили найти помещение для розничного магазина, который обязательно должен располагаться в оживлённом месте. Неужели Вы примете предложение агента по недвижимости, не расспросив его об этом условии и не убедившись лично, что место действительно оживлённое и пешеходный трафик высок? Это просто недопустимо. Другими словами, если Ваш веб-дизайнер не думает о будущем SEO-продвижении, он действительно ужасен.

19. Отсутствие системы управления контентом

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

20. Ваш веб-дизайнер живёт в другой стране

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

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

Текст подготовлен по мотивам публикации: «20 Signs Your Web Designer is Terrible» (англ.)

Внимание дизайнерам сайтов и веб-дизайнерам (уловка) — некий мужчина из Канады предлагает разработать дизайн сайтов!

Я занимаюсь дизайном сайтов по интернету. Неделю назад получила письмо из Канады от заказчика:

Здравствуйте уважаемый дизайнер. Я нашел вас на украинском рабочем сайте. Сам я — небольшой стартап в Канаде, пользующийся услугами людей с родины. На сегодня мы открыли новый домен agent-canada.com, поставили туда временный шаблон и начали наполнять. Нам нужен дизайнер, кто для начала перерисует это на уникальный дизайн в тесном взаимодействии со мной и моими помощниками в России и Украине.
Точного тех задания нет. Но основное видно из шаблона agent-canada.com а также прилагаемого эскиза, который накрапала девочка верстальщица. Ей надо немного помочь профессиональной рукой художника. Я сам бывший программист, а также в детстве посещал 4 года художественную школу, так что имею определенные ожидания к гамме и композиции.
Шлите, пожалуйста, свои цены, предложения, портфолио, резюме и эскизы на # или мой личный #. Добавьте меня в скайпе boris.garbuzov. Обсудим в голосе. Если не можете сами, посоветуйте товарищей.
Ожидаю теплого земляческого участия и божеских цен. Со своей стороны всегда откликнусь на просьбу о помощи и коммерческие предложения. Особенно если вас интересует Канада. C глубоким уважением к вашим талантам и ремеслу,

Office: 417 Louis Riel, 8888 University Drive, Vancouver BC, V5A 1S6, Canada

Web: www.isconnection.ru, www.isconnection.ca

Я согласилась на это задание. Он сказал, что ему необходимо разработать главную страницу + к которой нужно мне самой создать три коллажа для флэш-шапки и лого для сайта, кроме главной ему надо нарисовать еще 7 остальных страниц. При этом он сказал, что если ему понравится мой эскиз главной, то он согласен работать со мной и дальше. Я указала что такая сложная главная страница будет стоить 100$, он согласился все оплатить. За 2 дня я сделала главную страницу и коллаж, отослала ему. Он сказал, что его устраивает и он согласиться со мной работать, если остальные какие-то украинские дизайнеры (которые будут выполнять эту же работу) не заслужат его внимание и их цена его не устроит. На это я сказала ему, что так мы изначально не договаривались устраивать соревнования кто даст меньше. Он сказал, что для «подогрева отношений» необходимо около месяца постоянных эскизов и т.д. В общем стало видно, он хотел оторвать дизайн бесплатно.
Через какое-то время он написал, что все же мой эскиз нравится ему и что он вроде будет меня иметь ввиду если что.
Но в итоге написал такое:

Здравствуйте третий раз. Сим информирую вас, что нанял на этот проект других исполнителей — «худпромовца» за 150 на дизайн и верстальщицу еще за 150 на порезку и натяжку. С вами попытаемся связаться насчет следующих проектов.
Между тем пришла в голову мысль предложить вам воспользоваться бесплатной услугой нашей фирмы. Если вас интересует эмиграция в Канаду, учеба или работа в ней, то заполните, пожалуйста, анкету в приложении или на http://isconnection.ru/anketa и наш эмиграционный консультант бесплатно оценит ваши шансы и порекомендует решения. Также, задавайте любые вопросы по почте и в скайпе.
С уважением, Борис.

Из последнего предложение видно, что человек еще и предлагает эмиграцию в Канаду, что похоже уже далеко не на просто поиск дизайнеров.

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

6 фактов о важности UX в веб-дизайне

Перевод статьи “User Experience Is Important For Web Designers” о важности UX в веб-дизайне (хотя это понятее широко вошло в обиход только с развитием мобильных приложений, где пользовательский опыт (UX) был крайне важен).

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

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

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

Дизайнеры отлично информированы о разнообразии предпочтений и интересов пользователей, и всегда находятся в поиске наиболее оригинальных решений. Для бизнесмена же вопрос стоит немного более прозаично: «Как можно получить максимум от присутствия в Сети?»

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

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

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

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

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

Сравнение UI-дизайна и UX-дизайна

UX-дизайн происходит от английских слов User Experience Design (то есть дизайн пользовательского опыта). UI-дизайн – от английских слов User Interface Design (то есть дизайн пользовательского интерфейса). Эти два термина тесно взаимосвязаны. Для получения очень хороших результатов необходимо использование обоих подходов.

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

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

Что такое UX-дизайн?

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

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

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

Успешный дизайнер UX должен сделать все так, чтобы ответом на все вышеописанные вопросы было «да». Именно это является задачей этой статьи – познакомить читателя с новой важной дисциплиной, а также показать, как применить опыт и знания в традиционном веб-дизайне для получения качественного пользовательского опыта.

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

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

UX-дизайн играет важную связующую роль во взаимоотношениях между будущими или настоящими клиентами с определенной компанией. Это вовсе не бином Ньютона – просто типичный подход в любом бизнесе.

Что может дать традиционному веб-дизайну UX

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

Данный новый подход добавил к веб-дизайну определенные значительные составляющие.

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

Веб-дизайнеры должны применять в своей работе элементы UX-дизайна

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

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

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

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

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

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

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

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

Должно быть учтено все

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

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

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

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

Обязанности дизайнера UX, в основном, состоят в развитии и совершенствовании цифровых технологий, но, как теоретические, так и практические нюансы лежат в различных плоскостях:

Контент и планирование: анализ целевой группы и конкурентов. Анализ структуры продукта и создание контента.

Прототипирование, построение модели: прототипирование и построение модели, тестирование. Планирование дальнейшего усовершенствования и создания.

Реализация и аналитика: координация действий разработчиков и UI-дизайнеров. Интеграция и ориентация на главную цель. Аналитика и итерации.

Вполне очевидно, что перед дизайнерами UX стоят сложные разносторонние задачи. Итерации продукта практически всегда связаны с аналитикой и тестированием, однако в практике это происходит «между делом».

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

Заключение

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

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

У веб-дизайнеров достаточно опыта для разработки качественной и эффективной стратегии, которая отвечала бы потребностям бизнеса.

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

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

Гайд для веб-дизайнера: 5 шагов к идеальной типографике

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

1. Где вообще искать шрифт и сколько это стоит

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

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

На данный момент есть 2 основных ресурса:

Их лицензия предполагает 10 000 просмотров в месяц. Также можно посмотреть шрифт на сайте шрифтового дизайнера, там он может стоить дешевле.

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

Если вы пользуетесь Creative Cloud и продуктами компании Adobe , то наверняка знакомы с fonts.adobe.com. Пока нет? Вы можете подписаться на этот сервис за 49.99$ в месяц.

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

Следующая система typography.com – как пример того, чем не надо пользоваться. В ней всего 2 кириллических шрифта (Gotham и Whitney) при стоимости подписки 100 долларов в месяц. Хотя, если они вам принципиально нужны, можете заплатить, имея при этом вдвое меньше просмотров

monotype.com — отличный сервис всего за 15 долларов в месяц с доступом к гигантской библиотеке, где много кириллицы.

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

Открываете каталог одного из сервисов:

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

И, конечно, есть бесплатные сервисы:

2. Прежде, смотри на атаномию буквы

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

Мы разделяем букву на 2 основных элемента: скелет и мясо. Наиболее явно увидеть скелет можно написав букву тонкой ручкой или маркером. Так она теряет все свои особенности контраста. А в очень жирном начертании штрих начинает работать, и мы видим как раз мясо.

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

Существует 2 основных истока таких инструментов – широкое перо и узкое перо.

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

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

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

3. С засечками или без?

Как вы знаете, шрифты бывают трех типов:

  • Гротеск (без засечек)

Шрифт без засечек в свою очередь разделяют на 2 категории: гуманистические и геометрические.

Самый яркий пример гуманистического гротеска — Gill Sans

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

Примеры — Pt Sans, Mediator

Самый яркий пример геометрического гротеска Futura

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

Примеры — GT Walsheim, Proxima Nova, Graphik

  • Шрифты с засечками — Антиква

Классифицируются на 3 типа:

Гуманистическая (старого стиля) — ширококонечное перо

Самый яркий пример Garamond

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

Примеры Minion, Arno

Контрастная (Классицистическая) — остроконечное перо.

Яркий пример Bodoni, Didona

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

Переходная — нечто среднее между ними

Характеризуется слабым влиянием ширококонечного пера, слабым наклоном оси овалов, умеренным контрастом штрихов

Примеры — Georgia, GT Sectra

Определить то перед вами за шрифт помогут ответы на следующие вопросы:

  • Какой у него наклон оси?
  • Какой у него скелет?
  • Какой контраст штрихов?

Есть еще декоративные шрифты, которые не относятся ни к Гротеску ни к Антикве, о них поговорим в другой раз.

4. Без чего шрифт нельзя считать идеальным

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

Какими качествами должен обладать идеальный шрифт?

Во-первых, должен четко отображаться на экране.

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

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

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

Цукерберг рекомендует:  C# - WPF центрирование

Что делает шрифт читабельным?

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

Open Sans более читабельный, чем Pt Sans. А Verdana более читабельный, чем Open Sans.

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

5. Не рекомендую работать с шрифтами в Photoshop

Выше мы говорили о том, что в зависимости от ОС шрифт отображается на устройствах по-разному. В Adobe Photoshop используется принципиально другой рендеринг — шрифт растеризуется с помощью Anti Aliasing, в то время как в браузере — субпиксельный рендеринг.

В чем разница этих технологий?

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

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

Поэтому я и люблю работать в Sketch! Эта небольшая разница в рендере в итоге сильно мешает. Ее можно заметить, проведя пару тестов того, как шрифт выглядит в редакторе и в браузере.

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

Подходя к выбору шрифта помните, что форма влияет на содержание и шрифт напрямую отражает лицо бренда. А еще не ленитесь тестировать!

На написание статьи вдохновил Филипп Нуруллин.

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

Если верить wiki, то типографика не только шрифт

Типогра́фика (от греч. τύπος — отпечаток + γράφω — пишу) — искусство оформления печатного текста[1], базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки. Типографика, с одной стороны, представляет собой одну из отраслей графического дизайна, с другой – свод строгих правил, определяющих использование шрифтов в целях создания наиболее понятного для восприятия читателя текст.

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

Все понял, кроме того, что такое «рендор» ��

Очепятались, исправились))
спасибо

Шрифт это часть букв, буквы это часть слов, слова часть предложения. в итоге в конечном виде оцениваю сайт\банер\материал. Ну вот ни разу в жизни не различал такие тонкости шрифта — это реально надо было? Это немного на фитиш похоже. все ведь смотрят на конверсию, а для этого фон, шрифт, голая тетка в кадре, посыл, юмор и 100500 тонкостей влияют. Автор может я не так смотрю на жизнь и мне в отпуск надо?

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

Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, вёрстка, самообучение

Всем привет, друзья! В этом материале вы узнаете, что такое веб-дизайн, что такое UI/UX, Wireframing в современном веб-дизайне, рассмотрим базовые правила качественного оформления UI, правильную организацию работы в приложениях для веб-дизайна, рассмотрим, какое значение занимает HTML вёрстка в веб-дизайне и как самостоятельно и правильно обучаться веб-дизайну и развиваться, как веб-дизайнер. Другими словами, друзья — это комплексное руководство крутого веб-дизайнера, которое будет крайне полезно не только начинающим, но и опытным веб-дизайнерам, желающим развиваться профессионально.

Часть первая: UX всему голова

Что ещё за UX и какая ещё голова, с недоумением спросите вы? Начнем с сухих и безжизненных определений, затем разберём всё более подробно и на человеческом языке.

UX — дисциплина, изучающая опыт взаимодействия пользователя с продуктом, восприятие и реакцию, возникающую в результате использования.

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

Давайте для начала посмотрим на картинку. Возможно, это будет для вас шокирующим откровением, но UX — это область, в которую входит как исследование и проектирование, так и визуализация и вёрстка. В результате работы над UX мы должны получить рабочий прототип. Если речь идео о веб-дизайне, таким прототипом является HTML вёрстка. Если взять и вытащить из телефона экран, мы можем увидеть кроме самого экранчика провода, подкладки, клеевые швы. Это и есть интерфейс. Хороший дизайнер разрабатывает интерфейс со всеми потрохами, включая вёрстку. В дальнейшем экран будет подключен к плате телефона (Back-end, PHP, Python, Ruby) или запрограммирован (Front-end, JS). Я понимаю, что кому-то от таких заявлений станет не по себе, особенно старым верстальщикам, для которых вёрстка — это целый мир, отдельная область знаний. Но давайте смотреть на разработку объективно и называть вещи своими именами. А реальность такова, что мы разрабатываем модель, которая в лучшем случае должна пройти тест, и это — ваша задача, как веб-дизайнера. Далее данная модель (HTML вёрстка) может быть непосредственно передана в Back-end разработку или, в случае, если это сложный проект, Front-end разработчику для написания JS кода приложения.

Во многих средних и крупных компаниях зачастую UX, UI специалисты и HTML верстальщики — это разные люди. Но эта модель практически не работает на фрилансе. Наиболее эффективен дизайнер, который может реализовать свою идею от начала до конца, а не передавать половину работы другому человеку, теряя золотую нить идеи. Места под солнцем остается все меньше и «просто верстальщик» сейчас, это как водитель, который умеет жать только на тормоз. В вёрстке нет ничего сложного. Это обычная рутинная работа средней сложности.

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

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

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

Мне неоднократно приходилось наблюдать, как не очень красивые визуально сайты и LP принсили огромные продажи и работали лучше любого заморского Flat интерфейса со стильными иконками и инфографикой. Да да, это были сайты с нелепыми градиентами, огромными кнопками, необработанными фото без ретуши и спрессованными текстовыми блоками. Но они работали. Чудо, скажите вы? Не думаю. Просто дизайнер, который рисовал такой сайт, провел исследование аудитории клиента, просто дизайнер умеет слушать и понимать реальные потребности пользователей продукта, хоть и не обладает особым визуальным вкусом. Или случайно угадал верное направление. Если вы хотите стать по-настоящему крутым веб дизайнером, вы должны иметь 2 блестящие, отполированные стороны одной медали — с одной стороны, вы должны стать хорошим UX специалистом, с другой, вы должны развивать чувство вкуса, чтобы ваши интерфейсы были не только функциональны, но ещё и привлекательны — это UI. Если говорить о том, какой дизайнер лучше — тот, кто рисует с учётом пользовательского опыта, но не красиво или тот, кто рисует изумительные аккуратне интерфейсы, но абсолютно не вникает в проблемы человека, то, однозначно, первый выигрывает. И это понятно, ведь больше денег и клиентов принесет бизнесу именно первый, если говорить простым языком.

Мое скромное мнение: дизайн перестанет существовать ради визуального дизайна, Web 3.0 — это эпоха UX, повышения информативности и удобства.

Задачи UX

Постепенно переходим от теории к практике. Какие же задачи позволяет решить UX?

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

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

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

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

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

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

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

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

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

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

Часть третья: Wireframing, каркасное моделирование

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

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

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

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

Часть четвертая: UI, визуализация

После того, как вы основательно проработали UX, создали несколько каркасов и выбрали наиболее привлекательные варианты, можно приступать к визуализации. Визуализация — это прорисовка каркасов, создание единого стиля, оформление контента. Другими словами, мы начинаем работать над UI. Чаще всего для визуализации используется Adobe Photoshop, Sketch.app, Inkscape+Gimp или другие инструменты. Я советую использовать Adobe XD для визуализации и проработки интерактивного графического прототипа. В дальнейшем в наших уроках мы будем использовать только этот инструмент для создания дизайна, так как здесь можно сразу сделать визуализацию и показать, как будет происходить движение пользователей по страницам. Для работы с векторной графикой я использую Inkscape — здесь я создаю иконки и другую необходимую графику, для работы с растровой графикой — лучшее решение, это Adobe Photoshop.

Правила хорошего тона

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

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

Типографика, текст, ссылки

  • Не используйте слишком большие заголовки;
  • Не используйте шрифт меньше 12px;
  • Не делайте слишком маленький или слишком большой межстрочный интервал;
  • Не растягивайте буквы инструментом «Transform», шрифт должен быть естественно пропорциональным;
  • Не используйте больше 3 шрифтов на странице;
  • Не используйте слишком маленький контраст, не печайтайте светло-серым по белому или тёмно-серым по чёрному;
  • Используйте интервал между символами с осторожностью если знаете, что делаете и выбранный шрифт позволяет сделать текст «воздушным» наиболее элегантно;
  • Не делайте слишком маленьких отступов между абзацами, заголовками и элементами, дайте воздуха дизайну;
  • Не используйте капс без необходимости;
  • Не используйте для основных текстовых блоков слишком сложный декоративный шрифт, это должен быть простой и легкочитаемый шрифт какого-либо семейства Sans или Serif (Serif и Slab — если вы знаете, что делаете);
  • Все ссылки, за исключением пунктов навигации, должны быть подчеркнуты. Старайтесь также оформлять ссылки, которые уже были посещены, более темным цветом, в отличие от дефолтного цвета ссылок;
  • Если иерархия сайта содержит более 3-х уровней, не забывайте о хлебных крошках.
  • Графика, иконки, фотографии

    • Не используйте в дизайне шаблонные фотографии. Лучше сделать самостоятельно, порекомендовать заказчику обратиться к фотографу или найти наиболее «жизненные» фотографии;
    • Не используйте иконки, сделанные из фотографий;
    • Все иконки должны быть выполнены в едином стиле;
    • Не увеличивайте фотографию больше ее оригинального размера;
    • Не масштабируйте графику непропорционально;
    • Не применяйте режимы наложения слоев, отличные от обычного (Normal);
    • Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
    • Не масштабируйте фотографию до конвертации в смарт объект;
    • Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект;
    • Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
    • В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
    • Не используйте чистые цвета, обязательно старайтесь добиться наиболее приятного оттенка;
    • Не используйте более 2-х акцентных цветов на странице и не более двух темно-серых (или черного) цветов для текста. В идеале — только 1 акцентный цвет и 1 темно-серый/черный для текста. Я использую цвета 111111 — 222222 для основного шрифта на светлом фоне;
    • Старайтесь закрашивать акцентным цветом только те элементы, которые наиболее важны на странице, акцентируйте на них внимание. Это кнопки, стрелочки, галочки важных пунктов, текстовые ссылки, информативные иконки (мелкие иконки типа «логин», «пароль», «почта» и иконки в формах акцентировать не обязательно);
  • Правила работы в графическом редакторе, организация работы и прочее

    • Называйте слои со смыслом;
    • Старайтесь упорядочивать смысловые блоки и составные элементы интерфейса в группы;
    • Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
    • Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
    • Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;
    • Не создавайте декоративные элементы, если в этом нет практического смысла. Если это имиджевый сайт и нужна красивая картинка, данное правило можно опустить;
    • Придерживайтесь смысловой визуальной иерархии. Почитать про визуальную иерархию;
    • Используйте правило «внутреннего и внешнего», которое гласит, что расстояния между внутренними элементами блоков должны быть меньше, чем внешнее расстояние между блоками;
    • Не забывайте, что люди чаще всего приходят не на главную страницу сайта, а на внутренние, поэтому продумайте информативные универсальные блоки — шапку, подвал, сайдбары (если есть). Шапка должна быть максимально информативной, но не перенасыщенной. Обязательные элементы: Лого, название проекта, навигация. Поиск по сайту и другие элементы размещаются в зависимости от проекта.
    • Хорошее решение — размещение в футере развернутой навигации или карты сайта со всеми потаенными местами. Футер или подвал — это вообще отдельная тема, достойная отдельной статьи. Постарайтесь продумать подвал до мелочей, старайтесь не делать скудных узких подвалов с логотипом и номером телефона. Здесь опять-же, завист от проекта, но чаще всего футер лучше делать высоким и развернутым. Я очень часто нахожу нужную потаенную информацию именно в подвале и мне нравятся высокие и продуманные подвалы. Не думал, что скажу такое о подвалах.
  • Мы рассмотрели основные утверждения, кторые можно назвать правилами. Давайте теперь рассмотрим самые распространенные мифы веб-дизайна, которые были для кого-то правилами и даже руководством к действию, но сейчас уже не используются профессионалами.

    Мифы веб-дизайна

    • Правило трех кликов. Миф. Если пользователь заинтересовался информацией на главной странице, он сделает сколько угодно кликов для того, чтобы добиться цели. Нам просто нужно ему в этом немного помочь — правильно разместить указатели в навигации на нужный материал. Навигация должна быть простой и понятной;
    • Слайдер контента — это хорошее решение. Весьма спорное утверждение. Я очень часто использовал в качестве формы для вывода контента слайдеры, но есть исследования, подтверждающие, что их мало кто листает и что-то мне подсказывает, что это действительно так. Возможно, в ближайшем будущем эффективность слайдеров контента станет мифом;
    • Чтобы сделать качественный дизайн, нужно много работать. Миф. Правильно определив аудиторию, достаточно одной удачной картинки, заголовка и блока текста, чтобы пользователь искренне заинтересовался продуктом. Встречаются ситуации, когда веб-дизайнер вынужден пичкать что попало в интерфейс (куча секций с CTA, таймеры обратного отсчета, заезженные призывы к действию) по требованию заказчика с обвинениями в том, что дизайнер мало поработал. Это смешно и нелепо. К сожалению, это повсеместная особенность владельцев бизнеса и нужно просто уметь грамотно объяснять, что в веб дизайне правило «чем больше, тем лучше» не работает;
    • Дизайн должен быть оригинальным. Это, конечно, хорошо, если у вас есть месяц в запасе, а у клиента толстый кошелек. Но зачастую все не так. Можно потратить бешеные деньги и время на уникальные иллюстрации, оформление, но прийти к тому-же результату, как если бы таких возможностей не было. Проработайте UX и для отличного результата подобные траты времени и денег будут излишни. Зачастую, пользователи, привыкшие к определенному расположению универсальных блоков (шапка с навигацией, подвал) сбиваются с толку, посещая сайты, где всё «оригинально и необычно». Придерживайтесь стандартов в вебе и вам не придется изобретать велосипец. Кроме того, у стартапов зачастую нет ни времени ни средств для экспериментов. Я считаю, что можно сделать лаконичный дизайн с изюмикой, который будет действительно работать и приносить клиентов, не прибегая к визуальным изыскам.

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

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

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

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

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

    Часть шестая: Самообучение и саморазвитие

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

    Что касается UX — тут все тихо и спокойно. И так будет еще долго, ведь по сути, UX — это дисциплина, изучающая психологию, а здесь врядли что-то может поменяться в ближайшее время. Здесь самообучение заключается в развитии внутреннего мира, собственного опыта. Изучив базу, можно смело работать много лет, лишь изредка мониторя новости в этой области и читать хорошие детективы. Но особого внимание требует самообучение UI, здесь кипит жизнь, тренды в визуальном дизайне сменяют друг друга, дополняются и эволюционируют чуть ли каждый день! Я не сторонник слепого следования тенденциям и трендам, но, как показывает практика, рациональное зерно в трендах есть и за ними нужно следить.

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

    1. Постоянно изучайте работы на ThemeForest — это кладезь современного веб-дизайна. Пытайтесь применить какие-то привлекательные формы отображения контента в ваших работах, но не увлекайтесь и не забывайте о базе — UX, все должно быть в тему;
    2. Будьте постоянным посетителем awwwards.com и смотрите крутые работы, чтобы не расслабляться ;-)
    3. Также, для развития чувства вкуса будет полезно периодически изучать хоршие работы на behance.net. Выделяйте время для того, чтобы практиковаться — повторяйте понравившиеся работы на практике в графическом редакторе, но ни в коем случае не публикуйте свои копии где бы то ни было. Это нужно только для практики и саморазвития;
    4. Критикуйте рекламу на улицах вашего города и думайте, как можно сделать лучше;
    5. Критикуйте UX на улицах и также, думайте, как многие вещи можно было бы сдлать удобнее. Благо, у нас на постсоветском пространстве есть место, где разгуляться на этот счет. Думайте о людях, думайте как люди.

    Премиум уроки от WebDesign Master

    Создание контентного сайта на Jekyll от А до Я

    Создание современного интернет-магазина от А до Я

    Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, вёрстка, самообучение

    Всем привет, друзья! В этом материале вы узнаете, что такое веб-дизайн, что такое UI/UX, Wireframing в современном веб-дизайне, рассмотрим базовые правила качественного оформления UI, правильную организацию работы в приложениях для веб-дизайна, рассмотрим, какое значение занимает HTML вёрстка в веб-дизайне и как самостоятельно и правильно обучаться веб-дизайну и развиваться, как веб-дизайнер. Другими словами, друзья — это комплексное руководство крутого веб-дизайнера, которое будет крайне полезно не только начинающим, но и опытным веб-дизайнерам, желающим развиваться профессионально.

    Часть первая: UX всему голова

    Что ещё за UX и какая ещё голова, с недоумением спросите вы? Начнем с сухих и безжизненных определений, затем разберём всё более подробно и на человеческом языке.

    UX — дисциплина, изучающая опыт взаимодействия пользователя с продуктом, восприятие и реакцию, возникающую в результате использования.

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

    Давайте для начала посмотрим на картинку. Возможно, это будет для вас шокирующим откровением, но UX — это область, в которую входит как исследование и проектирование, так и визуализация и вёрстка. В результате работы над UX мы должны получить рабочий прототип. Если речь идео о веб-дизайне, таким прототипом является HTML вёрстка. Если взять и вытащить из телефона экран, мы можем увидеть кроме самого экранчика провода, подкладки, клеевые швы. Это и есть интерфейс. Хороший дизайнер разрабатывает интерфейс со всеми потрохами, включая вёрстку. В дальнейшем экран будет подключен к плате телефона (Back-end, PHP, Python, Ruby) или запрограммирован (Front-end, JS). Я понимаю, что кому-то от таких заявлений станет не по себе, особенно старым верстальщикам, для которых вёрстка — это целый мир, отдельная область знаний. Но давайте смотреть на разработку объективно и называть вещи своими именами. А реальность такова, что мы разрабатываем модель, которая в лучшем случае должна пройти тест, и это — ваша задача, как веб-дизайнера. Далее данная модель (HTML вёрстка) может быть непосредственно передана в Back-end разработку или, в случае, если это сложный проект, Front-end разработчику для написания JS кода приложения.

    Во многих средних и крупных компаниях зачастую UX, UI специалисты и HTML верстальщики — это разные люди. Но эта модель практически не работает на фрилансе. Наиболее эффективен дизайнер, который может реализовать свою идею от начала до конца, а не передавать половину работы другому человеку, теряя золотую нить идеи. Места под солнцем остается все меньше и «просто верстальщик» сейчас, это как водитель, который умеет жать только на тормоз. В вёрстке нет ничего сложного. Это обычная рутинная работа средней сложности.

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

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

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

    Мне неоднократно приходилось наблюдать, как не очень красивые визуально сайты и LP принсили огромные продажи и работали лучше любого заморского Flat интерфейса со стильными иконками и инфографикой. Да да, это были сайты с нелепыми градиентами, огромными кнопками, необработанными фото без ретуши и спрессованными текстовыми блоками. Но они работали. Чудо, скажите вы? Не думаю. Просто дизайнер, который рисовал такой сайт, провел исследование аудитории клиента, просто дизайнер умеет слушать и понимать реальные потребности пользователей продукта, хоть и не обладает особым визуальным вкусом. Или случайно угадал верное направление. Если вы хотите стать по-настоящему крутым веб дизайнером, вы должны иметь 2 блестящие, отполированные стороны одной медали — с одной стороны, вы должны стать хорошим UX специалистом, с другой, вы должны развивать чувство вкуса, чтобы ваши интерфейсы были не только функциональны, но ещё и привлекательны — это UI. Если говорить о том, какой дизайнер лучше — тот, кто рисует с учётом пользовательского опыта, но не красиво или тот, кто рисует изумительные аккуратне интерфейсы, но абсолютно не вникает в проблемы человека, то, однозначно, первый выигрывает. И это понятно, ведь больше денег и клиентов принесет бизнесу именно первый, если говорить простым языком.

    Мое скромное мнение: дизайн перестанет существовать ради визуального дизайна, Web 3.0 — это эпоха UX, повышения информативности и удобства.

    Задачи UX

    Постепенно переходим от теории к практике. Какие же задачи позволяет решить UX?

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

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

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

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

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

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

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

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

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

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

    Часть третья: Wireframing, каркасное моделирование

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

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

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

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

    Часть четвертая: UI, визуализация

    После того, как вы основательно проработали UX, создали несколько каркасов и выбрали наиболее привлекательные варианты, можно приступать к визуализации. Визуализация — это прорисовка каркасов, создание единого стиля, оформление контента. Другими словами, мы начинаем работать над UI. Чаще всего для визуализации используется Adobe Photoshop, Sketch.app, Inkscape+Gimp или другие инструменты. Я советую использовать Adobe XD для визуализации и проработки интерактивного графического прототипа. В дальнейшем в наших уроках мы будем использовать только этот инструмент для создания дизайна, так как здесь можно сразу сделать визуализацию и показать, как будет происходить движение пользователей по страницам. Для работы с векторной графикой я использую Inkscape — здесь я создаю иконки и другую необходимую графику, для работы с растровой графикой — лучшее решение, это Adobe Photoshop.

    Правила хорошего тона

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

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

    Типографика, текст, ссылки

    • Не используйте слишком большие заголовки;
    • Не используйте шрифт меньше 12px;
    • Не делайте слишком маленький или слишком большой межстрочный интервал;
    • Не растягивайте буквы инструментом «Transform», шрифт должен быть естественно пропорциональным;
    • Не используйте больше 3 шрифтов на странице;
    • Не используйте слишком маленький контраст, не печайтайте светло-серым по белому или тёмно-серым по чёрному;
    • Используйте интервал между символами с осторожностью если знаете, что делаете и выбранный шрифт позволяет сделать текст «воздушным» наиболее элегантно;
    • Не делайте слишком маленьких отступов между абзацами, заголовками и элементами, дайте воздуха дизайну;
    • Не используйте капс без необходимости;
    • Не используйте для основных текстовых блоков слишком сложный декоративный шрифт, это должен быть простой и легкочитаемый шрифт какого-либо семейства Sans или Serif (Serif и Slab — если вы знаете, что делаете);
    • Все ссылки, за исключением пунктов навигации, должны быть подчеркнуты. Старайтесь также оформлять ссылки, которые уже были посещены, более темным цветом, в отличие от дефолтного цвета ссылок;
    • Если иерархия сайта содержит более 3-х уровней, не забывайте о хлебных крошках.
  • Графика, иконки, фотографии

    • Не используйте в дизайне шаблонные фотографии. Лучше сделать самостоятельно, порекомендовать заказчику обратиться к фотографу или найти наиболее «жизненные» фотографии;
    • Не используйте иконки, сделанные из фотографий;
    • Все иконки должны быть выполнены в едином стиле;
    • Не увеличивайте фотографию больше ее оригинального размера;
    • Не масштабируйте графику непропорционально;
    • Не применяйте режимы наложения слоев, отличные от обычного (Normal);
    • Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
    • Не масштабируйте фотографию до конвертации в смарт объект;
    • Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект;
    • Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
    • В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
    • Не используйте чистые цвета, обязательно старайтесь добиться наиболее приятного оттенка;
    • Не используйте более 2-х акцентных цветов на странице и не более двух темно-серых (или черного) цветов для текста. В идеале — только 1 акцентный цвет и 1 темно-серый/черный для текста. Я использую цвета 111111 — 222222 для основного шрифта на светлом фоне;
    • Старайтесь закрашивать акцентным цветом только те элементы, которые наиболее важны на странице, акцентируйте на них внимание. Это кнопки, стрелочки, галочки важных пунктов, текстовые ссылки, информативные иконки (мелкие иконки типа «логин», «пароль», «почта» и иконки в формах акцентировать не обязательно);
  • Правила работы в графическом редакторе, организация работы и прочее

    • Называйте слои со смыслом;
    • Старайтесь упорядочивать смысловые блоки и составные элементы интерфейса в группы;
    • Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
    • Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
    • Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;
    • Не создавайте декоративные элементы, если в этом нет практического смысла. Если это имиджевый сайт и нужна красивая картинка, данное правило можно опустить;
    • Придерживайтесь смысловой визуальной иерархии. Почитать про визуальную иерархию;
    • Используйте правило «внутреннего и внешнего», которое гласит, что расстояния между внутренними элементами блоков должны быть меньше, чем внешнее расстояние между блоками;
    • Не забывайте, что люди чаще всего приходят не на главную страницу сайта, а на внутренние, поэтому продумайте информативные универсальные блоки — шапку, подвал, сайдбары (если есть). Шапка должна быть максимально информативной, но не перенасыщенной. Обязательные элементы: Лого, название проекта, навигация. Поиск по сайту и другие элементы размещаются в зависимости от проекта.
    • Хорошее решение — размещение в футере развернутой навигации или карты сайта со всеми потаенными местами. Футер или подвал — это вообще отдельная тема, достойная отдельной статьи. Постарайтесь продумать подвал до мелочей, старайтесь не делать скудных узких подвалов с логотипом и номером телефона. Здесь опять-же, завист от проекта, но чаще всего футер лучше делать высоким и развернутым. Я очень часто нахожу нужную потаенную информацию именно в подвале и мне нравятся высокие и продуманные подвалы. Не думал, что скажу такое о подвалах.
  • Мы рассмотрели основные утверждения, кторые можно назвать правилами. Давайте теперь рассмотрим самые распространенные мифы веб-дизайна, которые были для кого-то правилами и даже руководством к действию, но сейчас уже не используются профессионалами.

    Мифы веб-дизайна

    • Правило трех кликов. Миф. Если пользователь заинтересовался информацией на главной странице, он сделает сколько угодно кликов для того, чтобы добиться цели. Нам просто нужно ему в этом немного помочь — правильно разместить указатели в навигации на нужный материал. Навигация должна быть простой и понятной;
    • Слайдер контента — это хорошее решение. Весьма спорное утверждение. Я очень часто использовал в качестве формы для вывода контента слайдеры, но есть исследования, подтверждающие, что их мало кто листает и что-то мне подсказывает, что это действительно так. Возможно, в ближайшем будущем эффективность слайдеров контента станет мифом;
    • Чтобы сделать качественный дизайн, нужно много работать. Миф. Правильно определив аудиторию, достаточно одной удачной картинки, заголовка и блока текста, чтобы пользователь искренне заинтересовался продуктом. Встречаются ситуации, когда веб-дизайнер вынужден пичкать что попало в интерфейс (куча секций с CTA, таймеры обратного отсчета, заезженные призывы к действию) по требованию заказчика с обвинениями в том, что дизайнер мало поработал. Это смешно и нелепо. К сожалению, это повсеместная особенность владельцев бизнеса и нужно просто уметь грамотно объяснять, что в веб дизайне правило «чем больше, тем лучше» не работает;
    • Дизайн должен быть оригинальным. Это, конечно, хорошо, если у вас есть месяц в запасе, а у клиента толстый кошелек. Но зачастую все не так. Можно потратить бешеные деньги и время на уникальные иллюстрации, оформление, но прийти к тому-же результату, как если бы таких возможностей не было. Проработайте UX и для отличного результата подобные траты времени и денег будут излишни. Зачастую, пользователи, привыкшие к определенному расположению универсальных блоков (шапка с навигацией, подвал) сбиваются с толку, посещая сайты, где всё «оригинально и необычно». Придерживайтесь стандартов в вебе и вам не придется изобретать велосипец. Кроме того, у стартапов зачастую нет ни времени ни средств для экспериментов. Я считаю, что можно сделать лаконичный дизайн с изюмикой, который будет действительно работать и приносить клиентов, не прибегая к визуальным изыскам.

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

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

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

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

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

    Часть шестая: Самообучение и саморазвитие

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

    Что касается UX — тут все тихо и спокойно. И так будет еще долго, ведь по сути, UX — это дисциплина, изучающая психологию, а здесь врядли что-то может поменяться в ближайшее время. Здесь самообучение заключается в развитии внутреннего мира, собственного опыта. Изучив базу, можно смело работать много лет, лишь изредка мониторя новости в этой области и читать хорошие детективы. Но особого внимание требует самообучение UI, здесь кипит жизнь, тренды в визуальном дизайне сменяют друг друга, дополняются и эволюционируют чуть ли каждый день! Я не сторонник слепого следования тенденциям и трендам, но, как показывает практика, рациональное зерно в трендах есть и за ними нужно следить.

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

    1. Постоянно изучайте работы на ThemeForest — это кладезь современного веб-дизайна. Пытайтесь применить какие-то привлекательные формы отображения контента в ваших работах, но не увлекайтесь и не забывайте о базе — UX, все должно быть в тему;
    2. Будьте постоянным посетителем awwwards.com и смотрите крутые работы, чтобы не расслабляться ;-)
    3. Также, для развития чувства вкуса будет полезно периодически изучать хоршие работы на behance.net. Выделяйте время для того, чтобы практиковаться — повторяйте понравившиеся работы на практике в графическом редакторе, но ни в коем случае не публикуйте свои копии где бы то ни было. Это нужно только для практики и саморазвития;
    4. Критикуйте рекламу на улицах вашего города и думайте, как можно сделать лучше;
    5. Критикуйте UX на улицах и также, думайте, как многие вещи можно было бы сдлать удобнее. Благо, у нас на постсоветском пространстве есть место, где разгуляться на этот счет. Думайте о людях, думайте как люди.

    Премиум уроки от WebDesign Master

    Создание контентного сайта на Jekyll от А до Я

    Создание современного интернет-магазина от А до Я

    13 основных правил веб-дизайна, которые полезно знать заказчику

    Что такое современный сайт? Удобная навигация, красивые картинки, графика и видео и… много других опций, которые подчиняются определенным правилам. Сегодня расскажем об основных правилах веб-дизайна, которые актуальны сейчас. Проверьте, соответствует ли им ваш сайт!

    Сразу оговоримся: сегодня расскажем об основных правилах, этакой библии каждого веб-дизайнера. Есть и более тонкие нюансы — о них речь пойдет в следующих статьях. Кстати, если вам попался специалист, который утверждает, что не признает никаких правил и любит креативить — сто раз подумайте, а еще лучше — посмотрите его портфолио и оцените работы лично. Представьте, что вам попался каменщик, который отвергает строительные нормы и кладет кирпичи как попало — доверите вы ему свой дом? Вот то-то же. Итак, 13 главных правил хорошего веб-дизайна перед вами.

    Основные правила веб-дизайна

    Правило 1. Хорошая скорость загрузки страницы

    Казалось бы, причем здесь веб-дизайн? Объясняем. Многие специалисты так увлекаются графическими экспериментами, что не обращают внимания на скорость загрузки. А она, если напичкать сайт виджетами, анимацией и видео, неизбежно будет падать. Если сайт будет грузиться медленно — не у каждого посетителя хватит терпения ждать, половина просто покинет ваш ресурс, не успев ничего толком посмотреть. С другой стороны, без графических эффектов тоже никуда. Скучную серую простыню текста никто читать не будет — если у вас, конечно, не “Википедия”.

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

    Правило 2. Юзабилити, или удобство использования сайта

    Ваш сайт может быть современным и красивым, но какой в этом толк, если он безнадежно, отчаянно неудобен? Под юзабилити подразумевается удобство ресурса для посетителя. Например, заходит он на главную страницу и видит краткое описание: ага, это интернет-магазин спортивных товаров, все понятно. Хочет посмотреть меню, там все разложено по полочкам: вот каталог, вот условия заказа, здесь сведения о доставке, а тут контактная информация. Идет в каталог, видит категории и подкатегории товаров. Если на сайте действует правило трех кликов (добраться до нужного товара пользователь должен не более чем за три клика. Если действий предполагается больше — юзабилити хромает, надо исправлять) — замечательно.

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

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

    Правило 3. Читаемые шрифты

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

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

    Правило 4. Умеренная цветовая палитра

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

    Правило 5. Современный фон

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

    Правило 6. Единый стиль

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

    Правило 7. Золотое сечение

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

    Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. По этому принципу делаются основные элементы сайта. Например, когда при разработке лендинга нужно разместить на странице несколько блоков, золотое сечение приходит на помощь. Идеальная пропорция ширины каждого блока выглядит примерно так:

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

    Правило 8. Правило третей

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

    Следовательно, рядом с этими точками нужно размещать самую важную информацию — чтобы наверняка увидели. Это может быть кнопка с call to action — призывом к действию, или форма заказа. Считается, что самая “активная” точка — левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!

    Правило 9. Знание эффекта “баннерной слепоты”

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

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

    Что же делать? Хороший веб-дизайнер знает несколько правил, как бороться с баннерной слепотой, и обязательно порекомендует их заказчику. Впрочем, прочитав эту статью, вы и сами будете в курсе. Итак, правила:

    • размещать рекламу чем выше — тем лучше. Огромный баннер на главной с информацией о скидках точно не пройдет незамеченным;
    • играть на контрасте: выделять рекламу ярким цветом, делать контрастные кнопки призыва к действию. Главное — чтобы глаз зацепился;
    • придумывать креативные (но не желтые!) заголовки, привлекающие внимание;
    • использовать фото человека, который смотрит в направлении рекламного баннера. Это работает!

    Правило 10. Кнопка “вверх”

    Казалось бы, такая мелочь, а как важно! Представьте, что у вас интернет-магазин с огромным каталогом товаров или крупный новостной портал — чтобы пролистать сайт вниз, нужно достаточно долго скроллить (крутить колесиком мыши) вниз. А как потом вернуться назад? Многие веб-дизайнеры забывают об этом, заставляя посетителей отматывать страницы вверх. А ведь достаточно всего прикрутить кнопку “Вверх” или графическое изображение ^ — и все сразу понятно. Так вы экономите время пользователя и делаете сайт более удобным.

    Правило 11. Новая ссылка — та же вкладка

    Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс — что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому мы советуем внутренние ссылки открывать во внутренних же окнах, а внешние — в новых. Например, если ссылки ведут на дружественный сайт — пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети — тоже без проблем.

    Правило 12. Больше визуализации!

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

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

    Правило 13. Адаптивная верстка

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

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

    Цукерберг рекомендует:  Логи - Yii2 где посмотреть ошибку
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих