Алёна Лазарева, редактор-фрилансер, специально для блога Нетология написала статью о семи возможных способах улучшения веб-дизайна.
Ученые ученых Станфордского универстета провели опрос, который показал, что 46% респондентов формируют свое мнение о сайте, исходя из его внешнего вида и интерфейса. Если дизайн не нравится пользователю, то весь контент кажется ненадежным и не заслуживает доверия. Рассказываем о том, как сделать дизайн сайта лучше.
Иллюстрации
Правильно подобранные иллюстрации оживляют сайт. Их главная задача — не просто заполнить пустое место, а вызвать эмоции и связать их с брендом. Авторские иллюстрации помогут сделать сайт узнаваемым. Их можно использовать в заголовках, значках и при создании анимации.
Иллюстрации помогут сделать даже самый минималистичный дизайн дружелюбным.
Наполняя сайт иллюстрациями, важно помнить об однородности и не злоупотреблять ею. Самые красивые иллюстрации будут отклонены, если их будет слишком много.
Dropbox использует простые иллюстрации, которые усиливают впечатление от текста.
Типографика
Типографика играет большую роль в формировании идентичности бренда. Это зависит от того, как пользователи воспримут текст.
Каждый шрифт имеет свой характер. Постарайтесь подобрать шрифт, передающий настроение текста за счет графического изображения.
Условные шрифты можно разделить на четыре категории:
Античные шрифты (Serif) — это шрифты с засечками. Раньше их использовали для коллекции книг и периодических изданий, но с появлением экранов высокого разрешения в веб-дизайн вошли старинные шрифты. Они легко читаются, поэтому подходят для набора большого объема текста.
Гротескные шрифты (Sans Serif) — шрифты без засечек. Хорошо подходит для небольших текстов, заголовков и узких столбцов.
Декоративные шрифты — шрифты, имитирующие исторический стиль или декоративную обработку. Они подходят для набора небольшого объема текста, требующего сложного художественного оформления.
Рукописные шрифты — шрифты, имитирующие почерк или каллиграфический стиль. Их используют как декоративные.
Google Fonts — библиотека бесплатных шрифтов, позволяющая легко выбрать подходящий шрифт и импортировать его на свой сайт. Определившись со шрифтом, не забудьте настроить булавку, контур и межстрочный интервал.
Дизайн-студия Perky Bros для оформления своего сайта использовала два шрифта: Brown и Minion. В оформлении навигационной панели использован гротескный шрифт Brown, а для ввода информации о компании — старинный Minion.
Еще одно дизайнерское агентство Your Majesty также использует два шрифта: гротескный Plain для оформления меню и декоративный Canela для выделения информации об основных партнерах компании.
Не бойтесь комбинировать шрифты с зубцами и без. Главное правило – они должны легко читаться и легко читаться.
Фотографии
Большинству людей легче запомнить картинку, чем прочитанный или услышанный текст. Поэтому к выбору фотографий для сайта следует подходить особенно внимательно.
Согласно исследованиям, одно изображение может заменить 84 слова.
Правильная фотография для сайта должна быть:
- информативной;
- качественный;
- оригинальный;
- эмоциональный.
Дизайнеры любят размещать на своих сайтах большие фоновые фотографии. Они прекрасны, но быстро забываются. Исключение составляют фотографии, вызывающие эмоции: например, изображения людей или фотографии в необычных ракурсах.
Идеальным вариантом будет отказ от стоковых фотографий, особенно бесплатных. Если пользователь увидит фото с сайта на другом ресурсе, это может подорвать доверие к вашему контенту и бренду в целом.
У Почты России есть два официальных представления в социальных сетях — Дмитрий Маркин и Татьяна Кузнецова. Пользователи выяснили, что фотографии обоих были куплены на стоковых фотографиях, и усомнились в реальности сотрудников. История быстро разлетелась по сети, ударив по репутации почты и ее «чиновников».
Анимация
Анимация на сайте — эффектная, но далеко не новый приём. Сначала анимация создавалась с помощью GIF, затем — Flash. Оба решения существенно замедлили работу сайта. Теперь для создания анимации используются CSS-кодирование и JavaScript, которые существенно не влияют на производительность.
Анимацию можно полностью экранировать или интегрировать в навигацию. Его главная задача — помочь пользователю разобраться в сложных моментах и обратить его внимание на важные детали.
Студия веб-разработки HTMLBURGER использует «бургер-меню» в истинном смысле этого слова. Элементы навигации оживают при перемещении курсора. Это не только привлекает внимание, но и дает понять, какие элементы кликабельны.
Видео
Как и в случае с анимацией, движущееся изображение на странице мгновенно привлекает внимание пользователей. Главные преимущества видео — динамика, развитие сюжета и больший эмоциональный отклик.
Видео на сайте может быть использовано в следующих целях:
- показать то, о чем трудно рассказать (обучающие роэлики);
- рассказать историю;
- продемонстрировать продукт.
От фонового видео лучше отказаться только ради красоты. Они снижают производительность сайта и не несут никакой информации пользователю. Если же вы просматриваете пользовательские все равно, то присмотритесь к альтернативным видео — анимации, параллаксу и кинематографии.
Синемаграф — фотография, один элемент которой совершает легкое и бесконечно повторяющееся движение, а остальная часть изображения остается неподвижной.
Если вы разместите на сайте видео, которое воспроизводится автоматически, то звук отключится автоматически. Позвольте пользователю самому решить, хочет ли он включить звук, и предоставьте возможность сделать это легко. Внезапный громкий звук пугает не только пользователя, но и всех вокруг.
Вместо тысяч слов — яркое, динамичное видео, которое с первой секунды загружает в мир игры Monument Valley.
Цвета
С каждым новым поколением мониторы и устройства отображения становятся лучше. Поэтому понятие «безопасная веб-палитра» безнадежно устарело. Однако, выбирая цветовую гамму сайта, не забывайте:
- о целевая аудитория;
- корпоративный стиль;
- контрастной типографике;
- цветовая гармония.
Чтобы выбрать цветовое решение, определите свою целевую аудиторию и сообщение, которое вы хотите до нее донести.
Яркие цвета
Использование яркой цветовой палитры при оформлении сайта – популярная тенденция последних лет. Это универсальное решение для сайтов, рассчитанных на широкую аудиторию.
Одни дизайныры подбирают цветовую гамму на глаз, другим помогают генераторы цветовой палитры. Adobe Color CC считается лучшим на данный момент. С его помощью вы сможете создавать собственные цветовые решения, а также вдохновляться работами других дизайнеров.
Любителям материального дизайна будут полезны такие инструменты, как MaterialPallete или Material Design Palette Generator.
Стоит помнить, что генераторы могут помочь дизайнеру, но чувство вкуса они не заменят. Эффективная палитра, которую выдает генератор, может оказаться неудачным решением на этапе реализации.
Сервис, который подпишет и отправит за вас открытку вашим друзьям. Основная целевая аудитория сервиса — женщины, но не только они оценят яркую цветовую гамму и милые иллюстрации.
Монохром
Монохромная палитра – это сочетание одного основного цвета и теней, тонов и полутонов этого оттенка. Такое цветовое решение позволяет сайту выглядеть стильно и лаконично. Он идеально подходит для создания плоского или минималистичного дизайна.
Выбирая для сайта монохромную палитру, особое внимание уделите контрасту. Если оно будет недостаточно резким, элементы сайта сольются с фоном.
Модерирует студия дизайна монохромных сайтов из Канады.
Ретро
Как только все забывают о стиле ретро в веб-дизайне, он снова возвращается. Дизайнеры любят его за сдержанную цветовую палитру и способность вызывать ностальгию у пользователей.
Для оформления сайта диджитал-агентство использует сепию и знак, который раньше обозначал придорожные мотели и рестораны на автомагистралях Америки.
VR-эффекты
Развитие технологий виртуальной реальности — одна из самых обсуждаемых тем этого года. Хотя технологии пока не позволяют в полной мере использовать VR в веб-дизайне, все существующие попытки находятся на стадии прототипа. Пока неясно, сможет ли VR сделать сайты более удобными для пользователя или просто останется способом привлечения внимания.
Но есть устройства, которые можно назвать имитацией виртуальной реальности. Іх главная цел — программа звонково-звонозводства своего партнера по евейтингу.
Параллакс-эффект
Эффект параллакса создается при прокрутке, когда фон и объект на нем прокручиваются с разной скоростью. Этот эффект используется для создания у пользователя иллюзии трехмерности. Этот прием можно применить ко всей странице или отдельным блокам, чтобы привлечь внимание к определенной части контента.
Герои проекта помощи бездомным оживают при пролистывании страницы и рассказывают историю своей жизни.
360°-обзор
обзоры на 360° создаются из нескольких фотографий одного объекта под разными углами. Они приклеены таким образом, что пользователь может повернуть его на 360° и рассмотреть со всех сторон.
Этот прием выполняет ту же функцию, что и видео: демонстрирует товар. Однако главное отличие от видео — возможность управления.
При просмотре товара покупатель сам контролирует время и скорость просмотра. Это делает его участником процесса, а не пассивным наблюдателем.
Выводы
- Используйте авторские иллюстрации.
- Особое внимание обратите на типографику. У каждого шрифта есть символ — выберите тот, который соответствует вашему тексту.
- Откажитесь от стоковых фотографий. Это может подорвать доверие к бренду.
- Используйте анимацию, чтобы выделить самое важное.
- Определите целевое значение для видео на сайте: расскажите историю, объясните сложное, продемонстрируйте товар.
- Выбирайте цветовую схему сайта, поддерживающую идеологию бренда.
- Сделайте пользователя участником мероприятия.
Какой бы метод вы ни выбрали, не забывайте о здравом смысле. Каждый прием должен быть оправдан определенной целью. Не существует идеальных решений для всех, но они подойдут именно вам.
Мнения автора и редакции могут не собачить. Хотите написать рубрику в «Нетологии»? Ознакомьтесь с нашими условиями публикации.
