Ученые Стэнфордского университета провели опрос, который показал, что 46% респондентов составляют мнение о сайте на основании его внешнего вида и интерфейса. Если дизайн не нравится пользователю, то и весь контент кажется ненадежным и не заслуживающим доверия. В этой статье хочу поговорить о том, какие есть способы для того, чтобы улучшить дизайн сайта.
Иллюстрации
Правильно подобранные иллюстрации делают сайт живым. Их главная задача — не просто заполнить пустое место, а вызвать эмоции и связать их с брендом. Авторские иллюстрации помогут сделать сайт узнаваемым. Их можно использовать в заголовках, иконках и при создании анимации.
Иллюстрации помогут сделать дружелюбным даже самый минималистичный дизайн.
При наполнении сайта иллюстрациями важно помнить о единообразии и не переусердствовать. Самые красивые иллюстрации вызовут отторжение, если их будет слишком много.
Dropbox использует простые в исполнении иллюстрации, которые усиливают впечатление от текста.
Типографика
Типографика играет большую роль в формировании идентичности бренда. От нее зависит, как пользователи будут воспринимать текст.
У каждого шрифта свой характер. Постарайтесь выбрать тот шрифт, который передаст настроение текста за счет графического образа.
Условно шрифты можно разделить на четыре категории:
Антиквенные шрифты (Serif) — это шрифты с засечками. Раньше они использовались для набора книг и периодики, но с появлением экранов с высоким разрешением, антиквенные шрифты пришли в веб-дизайн. Они легко читаются, поэтому подходит для набора большого объема текста.
Гротескные шрифты (Sans Serif) — шрифты без засечек. Хорошо подходят для текстов небольшого объёма, заголовков и узких колонок.
Декоративные шрифты — шрифты, которые имитируют исторический стиль или декоративную обработку. Подходят для набора небольшого объёма текста, который требует сложного художественного оформления.
Рукописные шрифты — шрифты, имитирующие почерк или каллиграфический стиль. Используются так же, как и декоративные.
Google Fonts — известная библиотека бесплатных шрифтов, где можно легко подобрать подходящий шрифт и импортировать его на сайт. Главное не забыть настроить кегль, начертание и междустрочный интервал.
Для оформления своего сайта студия дизайна Perky Bros использовала два шрифта: Brown и Minion. Гротескный шрифт Brown использован в оформлении панели навигации, а антиквенный Minion для набора текста о компании.
Другое дизайнерское бюро Your Majesty тоже использует два шрифта: гротескный Plain для оформления меню и декоративный Canela для выделения информации о главных партнерах компании.
Не бойтесь комбинировать шрифты с засечками и без. Главное, чтобы они легко считывались и сочетались между собой.
Фотографии
Большинству людей легче запомнить картинку, чем прочитанный или услышанный текст. Поэтому к выбору фотографий для сайта стоит подходить особенно тщательно.
Согласно исследованиям, одно изображение может заменить 84 слова.
Правильная фотография для сайта должна быть:
- информативной;
- качественной;
- оригинальной;
- эмоциональной.
Дизайнеры любят размещать на сайтах большие фоновые фотографии. Они красивые, но быстро забываются. Исключение составляют фотографии, которые вызывают эмоции: например, изображения людей или фото с необычных ракурсов.
Идеальный вариант — отказаться от стоковых фотографий, особенно с бесплатных фотостоков. Если пользователь увидит фотографию с сайта на другом ресурсе, это может подорвать доверие к вашему контенту и бренду в целом.
У Почты России есть два официальных представителя в социальных сетях — Дмитрий Маркин и Татьяна Кузнецова. Пользователи выяснили, что фотографии обоих были приобретены на фотостоках и усомнились в реальности сотрудников. История быстро разошлась по сети, ударив по репутации Почты и её «официальных лиц».
Анимация
Анимация на сайте — эффектный, но далеко не новый прием. Сначала анимацию создавали при помощи GIF, затем — Flash. Оба решения сильно замедляли работу сайта. Сейчас для создания анимации используют CSS-кодирование и JavaScript, которые не так заметно влияют на производительность.
Анимация может быть полноэкранной или интегрированной в навигацию. Её главная задача — помочь пользователю разобраться со сложными моментами и привлечь его внимание к важным деталям.
Студия веб-разработки HTMLBURGER использует «бургерное» меню в прямом смысле этого слова. Элементы навигации оживают при наведении курсора. Это не только привлекает внимание, но и дает понять, какие элементы кликабельны.
Видео
Как и в случае с анимацией, движущееся изображение на странице мгновенно захватывает внимание пользователей. Главные преимущества видео — динамика, развитие сюжета и больший эмоциональный отклик.
Видео на сайте подходит для следующих целей:
- показать то, о чем сложно рассказать (обучающие ролики);
- рассказать историю;
- продемонстрировать продукт.
Фоновых видео только для красоты лучше не использовать: они уменьшают производительность сайта и при этом не доносят никакой информации до пользователя. Если же удивить пользователей все равно хочется, советую присмотреться к альтернативам видео: анимации, параллаксу и синемаграфии.
Синемаграф — это фотография, один элемент которой совершает незначительное и бесконечно повторяющееся движение, а остальное изображение остается неподвижным.
Источник — cinemagraphs.com
При размещении на сайте видео, которое воспроизводится автоматически, хорошим тоном будет отключить автовоспроизведение звука. Пользователям нравиться самим решать, нужен ли звук — и лучше предоставить возможность сделать это легко. Внезапный громкий звук пугает не только пользователя, но и всех окружающих.
Вместо тысячи слов — яркое, динамичное видео, которое с первых секунд погружает в мир игры Monument Valley.
Цвета
С каждым новым поколением мониторы и дисплеи устройств становятся лучше. Поэтому концепция «безопасной веб-палитры» устарела. Выбирая цветовое оформление сайта, стоит помнить о:
- целевой аудитории;
- корпоративном стиле;
- контрастной типографике;
- цветовой гармонии.
Чтобы выбрать цветовое решение, определите целевую аудиторию и сообщение, которое хотите до нее донести.
Яркие цвета
Использование яркой цветовой палитры при оформлении веб-сайта — популярный тренд последних лет. Это универсальное решение для сайтов, рассчитанных на широкую аудиторию.
Одни дизайнеры подбирают цветовую схему на глаз, другие используют генераторы цветовой палитры. Одним из лучших на данный момент считается Adobe Color CC. С его помощью можно создавать свои цветовые схемы, а также вдохновляться работами других дизайнеров.
Любителям материального дизайна нравятся таже инструменты вроде MaterialPallete или Material Design Palette Generator.
Правда, важно помнить, что генераторы помогают дизайнеру, но не заменяют чувство вкуса. Эффектная палитра, которую выдал генератор, может оказаться неудачными решением на этапе реализации.
Сервис, который подпишет и отправит за вас открытку вашим друзьям. Основная целевая аудитория сервиса — женщины, но яркую цветовую схему и милые иллюстрации оценят не только они.
Монохром
Монохромная палитра — сочетание одного основного цвета и теней, тонов и полутонов этого оттенка — позволяет сайту выглядеть стильно и лаконично. Такое решение отлично подходит для создания плоского или минималистичного дизайна.
Выбирая монохромную палитру для сайта, особое внимание стоит уделить контрасту. Если он будет недостаточно резким, элементы сайта сольются с фоном.
Сдержанный монохромный сайт дизайн-студии из Канады.
Ретро
Как только все забывают про стиль ретро в веб-дизайне, он снова возвращается. Дизайнеры любят его за сдержанную цветовую палитру и возможность вызвать ностальгию у пользователей.
Для оформления своего сайта диджитал-агентство использует сепию и знак, которым раньше обозначали придорожные мотели и рестораны на трассах Америки.
VR-эффекты
Развитие технологий виртуальной реальности — одна из самых обсуждаемых тем этого года. Пока технологии еще не позволяют полноценно использовать VR в веб-дизайне, все существующие попытки находятся на стадии прототипов. Не до конца понятно, сможет ли VR сделать сайты удобнее или просто останется способом привлечь внимание.
Но существуют приемы, которые можно назвать имитацией виртуальной реальности. Их главная цель — позволить пользователю почувствовать себя участником событий.
Параллакс-эффект
Параллакс-эффект создается при скроллинге, когда фон и объект на нем прокручиваются с разной скоростью. Он позволяет создать у пользователя иллюзию трехмерности. Прием можно применять ко всей странице или отдельным блокам, чтобы привлечь внимание к определенной части контента.
Герои проекта о помощи бездомным оживают при прокручивании страницы и рассказывают историю своей жизни.
360°-обзор
360°-обзор создают из множества фотографий одного предмета под разными углами. Они склеены таким образом, что пользователь может повернуть его на 360° и рассмотреть со всех сторон.
Этот прием выполняет ту же функцию, что и видео: он демонстрирует товар. Однако главное отличие от видео — возможность контроля.
При просмотре товара покупатель сам контролирует время и скорость обзора. Это делает его участником процесса, а не пассивным наблюдателем.
Итак, советы, которые помогут улучшить дизайн сайта
- Использование авторских иллюстраций.
- Внимание на типографику. У каждого шрифта есть характер — подбирайте тот, что подойдет вашему тексту.
- Отказ от стоковых фотографий: их использование подрывает доверие к бренду.
- Использование анимации для выделения важных блоков.
- Определение цели видео на сайте: рассказать историю, объяснить сложное, продемонстрировать продукт.
- Выбор цветовой схемы, которая поддержит идеологию бренда.
- Превращение пользователя в участника событий.
Какой бы прием вы ни выбрали, помните о здравом смысле и доверяйте собственному опыту. Каждый прием должен быть оправдан определенной целью. Идеальных решений для всех не бывает, но есть те, что подойдут именно вашему проекту.
От редакции
Записывайтесь на курсы Нетологии:
«Веб-дизайнер: эффективный сайт от идеи до реализации» >
«Моушн-дизайн: графика в движении» >
«Проектирование интерфейсов: UX-дизайн от стратегии до тестирования» >
«UX-аналитика: исследования пользователей и здравый смысл» >
… и на наши бесплатные программы:
«Основы графического дизайна: композиция, цвет, типографика» >
«Adobe Photoshop: основы для веб-дизайнера» >
«Adobe XD: основы для дизайнера интерфейсов» >
Комментарии (13)
dklein
13.07.2017 18:17+2Нууу, это совсем для тех, кто ничего не соображает в энторнетах и сайтах. Понятно же, что не бывает универсального гайда, как сделать сайт. Сайты бывают разные, для разных целей и аудиторий, ну, как их под одну гребёнку-то…
EverOne
13.07.2017 20:10+1Эти рекомендации вполне подходят для любых сайтов. Все зависит от адекватности дизайнера и маркетолога.
Оффтоп: «энторнетах» — интересно, что вы хотели сказать исковеркав слово Интернет?
AlexBin
13.07.2017 18:28Спасибо за статью.
Но:
… GIF, затем — Flash. Оба решения сильно замедляли работу сайта. Сейчас для создания анимации используют CSS-кодирование и JavaScript, которые не так заметно влияют на производительность.
Вы пишите статью о дизайне, однако даете сравнительную оценку скорости работы разных технологий.
Одинаковые задачи на Flash и CSS будут либо одинаково тормозить, либо Flash будет быстрее. Если на CSS реализовать то же, что возможно на флеше (если получится), он так же будет тормозить, а то и сильнее. Не вводите людей в заблуждение.
Работу сайта замедляет любой тяжелый контент, который можно реализовать на любых технологиях. Напишите лучше «избегайте тяжелого контента».
Rastishka
13.07.2017 19:03Если на CSS реализовать то же, что возможно на флеше (если получится), он так же будет тормозить, а то и сильнее.
Нет не будет. В современных браузерах отличная оптимизация, в том числе hardware рендер. Во флеше же ее не было от слова «совсем».
Хотя статья конечно содержит антисоветы и рассчитана на совсем детей.AlexBin
13.07.2017 22:08-1Нет не будет. В современных браузерах отличная оптимизация, в том числе hardware рендер. Во флеше же ее не было от слова «совсем».
Не позорьтесьAlexBin
13.07.2017 22:17Кстати, благодаря этим бенчмаркам и диспетчеру задач я понял, что означает цифра 5 в HTML5. Это примерно во столько раз сильнее грузит проц анимация на HTML5, чем аналогичная анимация на Flash.
Sonorx
13.07.2017 23:20приводить в доказательство статью 2010 года вот это позор, 7 лет были в спячке?
AlexBin
13.07.2017 23:29-1Наверное HTML5 обидно, что прошло 7 лет, флеш уже фактически похоронили, но тем не менее все эти бенчмарки до сих пор успешно запускаются, и до сих пор флеш всех рвёт. Вы хоть покликали по анимациям?
Goury
13.07.2017 20:11+9Раз уж я всё-равно зачем-то прокрокодилил мимо:
>> Иллюстрации
Тут вроде нормально
>> Типографика
Типографика к шрифтам имеет такое же отношение, как и правила дорожного движения к материалу покрышек колёс.
То есть имеет конечно же, но по дорогам ездят не материалы и не колёса, а люди в автомобилях (ну или вещи какие-нибудь, если это самоуправляемый грузовик).
>> Антиквенные шрифты (Serif) — это шрифты с засечками.
Это просто бред. Serif это засечки, антиква это германизм, которым обозначаются древние печатные рукописные шрифты. Да, они, по случайному совпадению, все с засечками. Но называть шрифты с засечками антиквой равноценно называнию всех внедорожников джипами. Выдаёт деревню и в обществе грамотных специалистов недопустимо.
Дальше про шрифты тоже сплошная чушь, а про собственно типографику — ни слова.
>> Фотографии
Отличное начало и закончили ничем.
Ну да, пример с почтой хороший. Но что с фотографиями-то делать?
А разгадка проста — фотографии надо размещать в дополнение к описанию конкретных физических вещей. Обязательно в дополнение, ни в коем случае не вместо (что просматривается как изначальный нераскрытый посыл).
>> одно изображение может заменить 84 слова
Только если эти 84 слова имеют ценность, но не важность.
Если нет ценности — выбросить их вообще.
Если есть важность — заменять нельзя.
>> Сначала анимацию создавали при помощи GIF, затем — Flash
>> Сейчас для создания анимации используют CSS-кодирование и JavaScript, которые не так заметно влияют на производительность.
Щито_О?
Ну правда, как можно такую чушь нести?
Во-первых гифы применялись с древнейших времён и применяются до сих пор. В последние годы к ним очень медленно начинают примешиваться apng и иногда даже webm.
Во-вторых флеш тормозит. И яваскрипт тоже тормозит. И слишком эффективная CSS анимация тоже тормозит.
В-третьих, всё это тормозит не так сильно, как собранный кривыми руками и с непонятной целью *****код, который любят набивать в неадекватных количествах на свои *****сайты *****кодеры.
В-четвёртых, что за CSS-кодирование?
В-главных: анимация никогда помогала ни в чём разобраться и никогда не помогала привлечь к чему-либо важному внимаине. Анимация помогала только отвлечь. Пример: анимация загрузки помогает отвлечься от негативных мыслей про криворуких разработчиков, не способных сделать быстро загружающийся сайт.
>> Видео
А в этом разделе, внезапно, всё правильно и по делу.
>> Цвета
Тоже по делу, хотя тема совсем не раскрыта.
Хотя раскрывать такую тему в одном разделе одной статьи на хабре не просто и не стоит.
>> VR-эффекты
А тут начинаются просто глупости.
>> Не до конца понятно, сможет ли VR сделать сайты удобнее
Не до конца понятно кому? Маркетологам? Или домохозяйкам?
Разработчикам изначально было понятно что VR, как и любая другая технология визуализации, сможет сделать удобнее только просмотр непосредственно визуализируемого этой технологией контента.
Стерео очки помогают только смотреть на стерео картинки.
Монитор помогает только видеть цветные пиксели.
Помогает ли монитор читать статьи?
Нет, распечатанные на принтере они читаются ничуть не хуже.
Но и не мешает, и на том спасибо.
Если есть что визуализировать — шлем поможет.
Если нет — в лучшем случае не помешает, хотя если вмешаются маркетологи…
>> 360°-обзор
Как и паралакс, к VR не имеет вообще никакого отношения.
И нужен только когда надо показать какой-то объект со всех сторон.
>> отличие от видео — возможность контроля
А это просто чушь.
Заключение: очень дурацкая реклама.
Если качество рекламируемого товара соответствует рекламе — лучше обходить его стороной.
DaneSoul
13.07.2017 22:07Только если эти 84 слова имеют ценность, но не важность.
Если нет ценности — выбросить их вообще.
Если есть важность — заменять нельзя
Не могли бы пояснить, что понимается под ценностью и важностью в данном случае?
Помогает ли монитор читать статьи?
Нет, распечатанные на принтере они читаются ничуть не хуже.
Не могу согласится, так как возможности мгновенного поиска в распечатанном не художественном тексте очень сильно не хватает. Особенно когда цель чтения статьи выяснить какой-то отдельный небольшой момент.
Goury
14.07.2017 23:17Ценность — это когда факт наличия информации важен, но форма большого значения не имеет.
Например красная кофточка. Не важно, красная она или алая или цвета диких роз, не важно кофточка она или футболка или вообще свитер. Но тот факт, что имеет место быть предмет одежды красного оттенка для верхней половины туловища человека, несёт ценность. В этом случае можно заменить описание картинкой.
Важность — это когда не только факт наличия, но и сама информация имеет значение.
Например описание протокола взаимодействия компьютера с принтером. В этом случае текст и схемы нельзя заменить картинками или видео.
>> возможности мгновенного поиска
Просто нужен принтер с более быстрой скоростью печати.
Монитор в качестве такого принтера вполне сгодится.
Но всё-равно было бы лучше, если бы редактор отформатировал статью таким образом чтобы отдельный момент можно было легко найти.
Static555
17.07.2017 10:49на счет анимации вы не правы. Гугл давно предложил в своем Материал дизайне использовать «meaningful animation». Например, когда пользователь вытягивает шторку сверху, она именно выезжает, а не появляется мгновенно, поясняя таким образом пользователю то, что произошло и он автоматически понимает, что ее можно затолкнуть обратно
recloudor
Спасибо, было интересно