Тренды веб дизайна сайтов 2022 с примерами
Больше видео, авторских анимаций, иммерсивного взаимодействия и адаптаций под конкретного пользователя. Возврат к эстетике 90-х и 00-х, нестареющая классика ар-деко, акцент на шрифт и месседж, брутальный дизайн «без дизайна», эстетика билбордов и уличной культуры, расцвет паттернов, абстракций и сложных форм, синтез графики и фото, возврат увлечения градиентами, эффект стекла и многогранность кристаллов. Вот к чему движется мир веб дизайна на рубеже 2022/2023.
Рассмотрим ключевые тренды с примерами подробнее.
Видео, анимация и моушн-дизайн
Наиболее мощный и долгоиграющий тренд гласит, что современные сайты должны быть «живыми», динамичными, отражающими некие процессы, течение, развитие. Как этого добиться? Есть десятки вариантов — можно выбирать любой, это все работает.
Начать с простого — пользователи любого возраста, статуса и типажа обожают видео. По статистике оно привлекает внимание и продает в РАЗЫ лучше, чем любые продающие тексты или статичные картинки.
Отличным решением в духе времени станет также создание краткого ролика «О компании за 2 минуты», а также преобразование (хотя бы частичное) вашего портфолио в видео-формат: стало/было, timelapse работ, избранные моменты установки/монтажа/создания чего бы то ни было. Плюс — видеоотзывы. Пора забыть о благодарственных письмах с печатями. Люди НЕ верят текстам, но верят реальным людями, которых можно слышать и видеть.
Другой способ оживить сайт — это иммерсивная прокрутка. То есть сайт меняется, трансформируется на глазах пользователя по мере того как то его скроллит, он как бы взаимодействует с ним, рассказывая свою историю. Меняется фон, отдельные элементы приближаются, подсвечиваются, затемняются, появляются из разных точек (не только снизу, но и сбоку, или в формате проявления из центра экрана), бегут стрелки, оживает инфографика.
Наконец, третий путь — это различные анимации:
- анимированный курсор меняющий свою форму или размер при наведении на те или иные блоки притягивает внимание, удерживая пользователя на сайте пока он «играет».
- индивидуализированные анимационные эффекты для окна загрузки, удерживающие внимание в процессе ожидания;
- анимация в логотипах;
- микро-анимация, когда на заставке пользователь видит не просто изображение, скажем, города, а города, в котором едут машины, идет дым из труб, открываются окна, пролетают птицы;
- анимация 360 градусов для демонстрации товаров (одежда, мебель, украшения, техника и проч.)
Объемный мир 3D
Проявлением того же самого тренда «в статике» является рост популярности 3D изображений. Они также по-своему делают мир на экране более живым и осязаемым, так как передают уже не плоскую картинку, а объем, то есть выводят сайт в новое пространственное измерение, делая его более выразительным.
Популярность набирают не только объемные изображения, но и объемные шрифты, которые можно применять в заголовках и даже в логотипе.
Сложные формы и очертания
Один из ключевых посылов современного веб дизайна — мир (человек, явление, продукт и проч.) крайне сложен и многогранен. Он подобен фракталу, калейдоскопу или кристаллу со множеством граней. Простые формы вроде круга и треугольника, столь любимые дизайнерами в прошлом десятилетии, уже не воспринимаются как интересные и самодостаточные. Взгляд пользователя ищет что-то что требует долгого разглядывания, осмысления, погружения в некую мозаику элементов и форм.
Высшее искусство в этой связи будет заключаться в том, чтобы позволить зрителю самому додумать, разгадать и оценить ваше изображение. Не нужно давать готовых решений — предпочтение отдается ассоциативным иллюстрациям в духе набросков, где требуется проследить ход линий, найти узлы их переплетений, чтобы сложилась картинка, или подключить собственную фантазию.
Комбинация фото с графикой
Одним из возможных способов создания сложного многослойного изображения будет комбинация фото с графикой. Синтез разных типов изображений позволяет создать нечто принципиально новое, «на стыке» двух миров: с одной стороны, стилизовать фото за счет использования декоративных элементов, а с другой — вдохнуть жизнь с рисованные элементы за счет интеграции в них реального изображения.
Абстракции, паттерны, наброски
В определенном смысле абстракции — это также «сложные формы». Мы не видим «готовую» картинку дома, дерева или автомобиля, а воспринимаем цвет, форму, изгиб линий на ином — подсознательном уровне, что рождает в голове целый ряд ассоциаций, причем разный у каждого конкретного человека.
И в мире веб дизайна 2022–2023 абстракции рулят! Равно как паттерны (повторяющиеся узоры) и рисунки «от руки» в духе эскизов, набросков. Все это следует в духе времени, взывая к обоим полушариям нашего мозга, заставляя не просто пассивно воспринимать готовое изображение, а переосмысливать его сквозь призму собственного опыта и мировоззрения.
Там — где есть простор для разных трактовок и ассоциативных рядов — взаимодействие с пользователем получается более личным, как будто он ведет с вами внутренний диалог. Ведь он видит то, что не видит больше никто другой и каждый видит что-то свое, никогда в точности не повторяющееся.
Эффект стекла и кристаллов
Еще один «горячий» тренд 2022–2023 — это эффект стекла текстурах и/или кристалла в объемных изображениях. Его уже активно применяют в своем дизайне лидеры технологических отраслей, задающие тенденции, а, значит, вскоре это веяние распространится повсеместно.Стеклянные текстуры с эффектом прозрачности и характерными бликами/градиентами отлично подходят для оформления фонов, подложек, кнопок и других элементов сайта. При этом важным акцентом является НЕ блеск, а именно матовость и прозрачность.
Кристаллические формы, в свою очередь, набирают популярность для использования в широкоформатных изображениях, логотипах, элементах сайтов.
В приоритете — приглушенные многослойные изображения с размытыми конкурами и бесчисленными гранями, нарисованные вручную (не фото) — еще один пример «сложных форм» взывающих к миру ассоциаций.
Возврат в 90-е, на пороге 00-е
Знаете ли вы, что некоторые модные веяния цикличны и довольно предсказуемы? Еще недавно на пике популярности была стилистика 80-х, сегодня она уже приелась и приходит черед следующего десятилетия — возвратилась мода на 90-е, характерными особенностями которых считаются яркая цветовая палитра, металлические оттенки, зернистые текстуры, определенная брутальность.
Одновременно начинается обращение к эстетике нулевых, которая следующая в очереди. Ее атрибуты — неоновые цвета, яркие блики с прямой аллюзией на CD диски, технологичность и заигрывание с футуристическими формами.
Эти ретро-волны органично дополняет расцвет темы уличной культуры, граффити и психоделики в веб дизайне — перечисленные явления как раз зарождались и активно развивались в указанные десятилетия.
Сегодня они уже негласно получили статус «официального» искусства и из контркультуры превратились в одно из ее направлений. Дизайнеры 2020-х хотят поднять их на новый уровень, переосмыслить и использовать в поиске свежих решений и подходов.
Все эти темы отлично подойдут для продуктов, которым близки бунтарство, новаторство, свобода выражения, устремленность в будущее, душевность, нон-конформизм.
От ар-деко до минимализма
В то же время, современная картина трендов — это торжество многообразия, калейдоскоп возможностей и бесконечность стилистических направлений. И пока кто-то вдохновляется граффити и абстракционизмом, другие выбирают проверенную временем классику и утонченность.
Сегодняшняя «эталонная» классика — это стилистика ар-деко, с ее нарочитой декоративностью, орнаментальными мотивами, характерными шрифтами и геометрическими формами. Ее выбирают проекты транслирующие такие ассоциации как престиж, солидность, премиальное качество, эксклюзивность, безусловный стиль и чувство вкуса, утонченность.
При этом вовсе не обязательно буквально следовать всем установленным канонам прошлого — ведь мы не ставим целью копировать стилистику 20-х, а лишь вдохновляемся ей, предлагая что-то «по мотивам», но уже с новым вкусом и акцентом. В этой связи особенно интересно выглядят проекты комбинирующие ар-деко с минимализмом, который как лейтмотив нашего времени играет главную тему во всем уже на протяжении многих лет.
Минимализм остается ультрамодным и актуальным и сам по себе, не разбавленный иными стилями. В приоритете — функциональность и простота, то есть по максимуму убрать все лишнее, оставив только самое критичное.
Градиенты
Еще одно визуальное решение, набирающее популярность — градиенты и в особенности многоцветные. Плавные переходы цвета, тона и полутона, использование более широкой и яркой палитры для создания настроения, размытые абстракции, джазовый стиль, уход от «скучной» однотонности — вот то, что задает направление при выборе фонов.
Свежо и стильно смотрится комбинация многоцветного градиентного фона с фотографией или иллюстрацией, где все слои накладываются друг на друга так, что трудно отличить где начинается один и заканчивается другой.
Приглушенная палитра + экологичность и тема природы
На каждый тренд обычно находится контртренд совершенно противоположной направленности. Если вас не прельщают сочные оптимистичные градиенты — обратитесь к скандинавской сдержанности. Спокойная, пастельная приглушенная палитра природных оттенков, крафтовой бумаги, также на пике популярности. Оливковый, бежевый, бледно-розовый, серо-голубой, приглушенный горчичный, кремовый и фисташковый — идеально!
Обращение за вдохновением к природе наблюдается не только на уровне цветовой палитры, но и в плане узоров, форм, отправных точек для логотипов и/или нейминга. На пике популярности сегодня различные стилизованные минималистичные паттерны цветов, травы, леса, моря.
Монохромность и эстетика темного
Многие модные проекты сегодня выбирают черный для создания мощного графичного акцента на сайте. Современно и стильно смотрятся полностью монохромные проекты, в которых ведущая роль отводится формам, конкурам, типографике, а иллюстрации представлены, например, в карандашных оттенках серого.
После долгих лет «господства» светлого (белый фон, много воздуха, свободного пространства) наблюдается обратный откат в сторону темных тем сайтов. Они подсознательно воспринимаются более весомыми, эстетичными и премиальными.
Дизайн Zero/ брутализм / дизайн без картинок
Но есть немало людей, которым вовсе надоела бесконечная гонка за новыми визуальными формами выражения. Они уходят от всякой красивости и эстетики и предлагают контр-дизайн или его выверенное и нарочитое отсутствие, тем самым выделяясь среди тысяч «одинаково красивых» сайтов.
Его приметы — простейшие формы и шрифты, минимальное количество цветов и графических элементов, отсылки в эре зарождения интернета (вспомним первые компьютеры с белыми шрифтами меню на синем экране) или внутреннему рабочему пространству разработчиков (схемы, стрелки, прототипы без попыток что-либо приукрасить).
Такое направление получило общее название брутализм, но не стоит путать его с плохим дизайном. В той же мере качественный естественный макияж далеко не равен полному отсутствию макияжа или его неумелому применению. В отличие от «плохих» сайтов брутальные проекты в духе контр-дизайна НЕ отпугивают, а привлекают клиентов, в них все на своих местах и работает на то, чтобы произвести нужное впечатление. В некотором смысле создание такого проекта даже сложнее, чем создание «красивого» сайта в традиционном понимании.
Впрочем, следует быть осторожным при выборе именно этого стиля для своего сайта. В наибольшей мере он подходит технологичным компаниям, приложениям и продуктам связанным с IT — именно такая аудитория оценит брутализм по достоинству и поймет его глубинный сарказм.
Широкую традиционную аудиторию этот подход скорее отпугнет.
Акцентированный шрифт
Если вам близка концепция минимализма и сокращения доли картинок/графики/градиентов/элементов в дизайне, но брутализм кажется слишком экстремальным, то отличным решением будет создание шрифтового проекта, который ставит во главу угла текст и то, как именно он написан.
Один из частых приемов — занять текстовым месседжем бОльшую часть главного экрана. При этом слов не должно быть слишком много, но они должны быть написаны очень крупным — огромным — размером и интересным шрифтом, который 1 в 1 попадает в настроение вашего проекта. В этом случае картинки в общем-то уже не нужны: можно оставить фон минималистично однотонным, или же использовать какие-то приглушенные изображения, не перетягивающие внимание.
Вообще шрифтовые решения в вебе переживают эру расцвета — все больше и больше проектов ставят во главу угла не цвет или формы, а именно шрифтовую составляющую.
Чтобы разобраться в многообразии шрифтов и выбрать наиболее актуальные и привлекательные — мы подготовили отдельную статью на эту тему. https://iteraciya.ru/articles/kakie-samye-luchshie-shrifty-dlya-sayta-i-logotipa/
1 экран = 1 сообщение
Еще одно необычное и свежее визуальное решение, перекликающееся отчасти с предыдущей темой — это минималистичный экран в стилистике рекламного билборда или журнальной передовицы. На нем всего одно послание (это может быть суть вашего предложения, презентация нового товара, какая-то ударная новость и проч.), а фон или изображение под ним занимают 100% площади первого экрана сайта. Никаких дополнительных блоков, каруселей, ссылок, иконок объясняющих «почему стоит выбрать нас» и прочего «дробления» на мелкие элементы нижних уровней — все это допустимо (в умеренном количестве), но только не в верхней лицевой части сайта, где кроме этого главного месседжа обычно оставляют только неакцентированную строку меню.
Такой дизайн может подойти многим проектам в совершенно разных сферах, но особенно хорошо он «дружит» с концепцией сторителлинга, когда ваш сайт «рассказывает» историю компании или продукта.
В этом случае некоторая медийность формы и содержания дополняют и усиливают друг друга.
Инклюзивность, доступность, адаптивность
Возможно, вы сейчас подумали о версии для слабовидящих. И вы правы, но это лишь малая часть айсберга. Пользователи — абсолютно все — делают выбор в пользу сайтов, которыми ИМ удобно пользоваться. То есть в приоритете уже не столько запоминающийся Я-дизайн, отражающий некие посылы самой компании, а адаптивный во всех смыслах дизайн, меняющийся под конкретного пользователя.
Что это значит? Да, это и продуманные адаптивные версии для разных разрешений экранов, но не только — мобильная верстка уже давно подразумевается по умолчанию, сегодня пора выходить на новые уровни адаптивности.
Например, сейчас многие веб проекты начинают активно добавлять такие опции как настройка нужного уровня контраста или выбор светлого/темного вариантов представления. Парадоксально, но статистика показывает, что такое простое и, одновременно, неочевидное решение, как дублирование сайта в светлом и темном дизайне позволяет существенно увеличить заинтересованность и конверсию.
Не нужно на этапе дизайна выбирать за пользователей — они просто хотят сделать это сами! Начнем с того, что темная тема (как и в различных читалках) гораздо комфортнее для глаз при неярком освещении и в целом в вечернее время. Но помимо этого люди делятся на тех, кто в визуальном плане лучше воспринимает темные сайты и тех, кто предпочитает светлые — причем тех и других примерно поровну. Не теряйте эту вторую половину своих клиентов.
Адаптация сайта может идти и на другом — аудиальном уровне. Вспомните, как много ваших знакомых в мессенджерах любят отправлять голосовые сообщения (и как много других просто вскипают от бешенства когда их получают)) Все люди совершенно разные. Но в современном мире веб дизайна никто не должен оставаться «за бортом». Создайте еще одно инклюзивное решение для тех, кто предпочитает сайт «слышать» (в силу личных особенностей, или временных обстоятельств — за рулем, плохое зрение, недостаточное освещение, другое) — что подразумевает доступ к озвучиванию определенных элементов/блоков, а также взаимодействие посредством голосовых команд.
__________
Это далеко не все набирающие силу тенденции в сфере веб дизайна, но, как нам кажется, наиболее яркие, характерные и многообещающие. Комбинируйте их в разных пропорциях, следуйте им, спорьте с ними или просто игнорируйте. Вы лучше всего знаете как должен «выглядеть» ваш бизнес в онлайн пространстве.
А мы поможем реализовать ваш проект и/или предложим свое видение, исходя из опыта работы в самых разных сферах бизнеса. Готовы выполнить концепт дизайна главной страницы вашего будущего сайта БЕСПЛАТНО. Потому что мы уверены в качестве своих услуг и НЕ пытаемся никому продать кота в мешке.
Флэт (flat) дизайн: лучшие практики плоского дизайна
Как улучшить пользовательский опыт, если вы используете flat дизайн
Перевод статьи Flat-Design Best Practices
Автор: Kate Meyer
Сайты в стиле плоского дизайна не всегда удобные. Например, пользователи могут не понимать, какие элементы кликабельные и теряться в навигации из-за этого.
Но этой проблемы можно избежать, если вы будете последовательно и четко показывать разницу между активными и неактивными элементами дизайна.
Плоский дизайн сайта
Подходит ли плоский дизайн для ваших целей?
6 приемов для улучшения пользовательского опыта
Подведение итогов
Плоский дизайн сайта
Пик популярности плоского дизайна пришелся на 2012 год, но и до сих пор он применяется очень широко. Без него сейчас не обходится ни одна крупная компания: Apple, Amazon, Microsoft и даже IBM работают в стиле flat. Очевидно, что это уже не просто модная тенденция.
apple.com
www.microsoft.com
www.ibm.com
welcome.stepik.org
bestawards.co.nz
Flat дизайн создает ощущение дорогого и современного продукта, и в ряде случаев применяется для привлечения внимания молодых пользователей. Флэт дизайн отличает простой пользовательский интерфейс. Он легко адаптируется под любые устройства.К сожалению, у плоского дизайна есть существенный недостаток: зачастую пользователь не знает, куда кликнуть, что, в результате, снижает эффективность его работы. Выбирая плоский интерфейс, дизайнеры, как правило, удаляют очевидно активные элементы, и пользователь не знает, «куда жать».
Несмотря на недостатки, плоский дизайн может быть очень классным. Воспользуйтесь нашими советами, и ваши пользователи скажут вам «спасибо».
Подходит ли плоский дизайн для ваших целей?
Прежде чем перейти на стиль flat, решите, подходит ли он для ваших целей. Факторы, которые говорят, что результат будет успешным:
Небольшое количество текста и простота информационной архитектуры. Ультраплоский дизайн оптимален для небольших сайтов объемом 1−10 страниц.
Низкий уровень интерактивности и отсутствие сложных элементов. В случае использования ультраплоского дизайна пользовательского интерфейса сложные приложения или интерфейсы с необычными моделями интерактивности не смогут направлять действия пользователей.
Высокий процент постоянных посетителей. Сайты, куда заходит большое количество постоянных посетителей, как правило, более успешны, если они сделаны в стиле flat. В таких случаях посетители скорее интуитивно воспользуются интерактивными элементами.
Целевая аудитория пользователей уровня «эксперт в области технологий». Если ваша аудитория состоит исключительно из дизайнеров, разработчиков или опытных пользователей, они с легкостью разберутся с навигацией на вашем сайте с дизайном в стиле flat.
Но даже если характеристики, приведенные в списке, совпадают с вашими целями, мы рекомендуем дизайнерам избегать абсолютно плоского интерфейса.
Конечно, при создании дизайнерского портфолио или простых маркетинговых вебсайтов он не повредит. Более того, подобные веб-сайты могут оказаться в выигрыше благодаря модному flat дизайну без потери удобства использования, «пользовательские» функции в таких вебсайтах минимальны.
focuslist.co: Единственная цель сайта – продвижение приложения для повышения производительности. Самые простые сайты, подобные этому, могут выиграть благодаря плоскому дизайну (хотя его нельзя считать полностью плоским из-за тени за скриншотом).
Большинство цифровых продуктов намного сложнее, чем одностраничный маркетинговый сайт. В таких случаях мы рекомендуем использовать полуплоский формат или формат Flat 2.0. Он представляет из себя эволюцию стиля, который, хотя и похож на плоский дизайн, однако включает полутени, блики и градиенты для создания эффекта глубины.Обратите внимание: Плоский дизайн может показаться простым, однако это не значит, что его проще создать. Скорее всего, вам понадобится помощь талантливого визуального дизайнера.
6 приемов для улучшения пользовательского опыта
Если вы уверены, что плоский дизайн полностью подходит для ваших целей, тщательно продумайте, как вы сообщите пользователю о возможности взаимодействия с активными элементами сайта (ссылками, кнопками, полями форм, слайдерами и так далее).
kentuckyderby.com
Когда пользователи не уверены, можно ли кликнуть или нажать на какой-либо элемент интерфейса, они наводят на него мышку. На экране выше показаны результаты изучения движения глаз пользователя, который следит за малейшими изменениями в форме курсора и цвете фона меню. Они показывают ему, куда кликать мышью. (Красные круги означают точки фиксации).Визуальные изменения, вызванные действиями курсора, или изменения формы курсора (например, из стрелки он превращается в руку), означают, что на элемент можно нажать мышкой. К сожалению, подобные показатели кликабельности слабы и требуют усилий для взаимодействия. В результате, они фактически снижают целевую доступность сайта.
1. Никогда не делайте одинаковым обычный и кликабельный текст
Например, если для ссылок вы используете жирное начертание, или определенный цвет, то не следует использовать жирное начертание или такой же цвет текста просто так. Используйте визуальный дизайн, чтобы четко обозначить активные и неактивные кнопки и элементы. Будьте постоянны.
surfstudio.ru
uxsofia.com
piraja.no
2. Четко обозначайте активные элементы
- Кнопки должны хоть немного быть похожи на настоящие.
- Если вы выбрали дизайн в стиле flat, воздержитесь от использования прозрачных кнопок (они выглядят как текст, заключенный в тонкую прямоугольную рамку).
- Мелкие элементы должны увеличиваться при клике мышкой.
- В ссылках используйте стандартные, легко узнаваемые иконки. За редким исключением, эти иконки должны работать в паре с текстовым содержанием элемента.
karavaev-lab.ru
planetpass.com
channel.iloverunning.ru
3. Используйте традиционные макеты и стандартные шаблоны сайтов
При стандартной раскладке пользователи смогут легко догадаться о цели каждого элемента даже при отсутствии традиционных индикаторов. Сочетание стандартного макета с чистым визуальным дизайном и большим количеством свободного пространства сделает каждый раздел сайта заметным и понятным.
teavana.
com
На карте фиксированных точек по результатам изучения движения глаз пользователя показаны первые несколько секунд после захода пользователя на сайт teavana.com. (Синие круги означают точки фиксации). Так как Teavana использует простой визуальный дизайн с достаточно традиционным макетом онлайн-магазина, сайт удобен в использовании, несмотря на флэт дизайн. Белое пространство и соответствующее ожиданиям расположение верхней строчки меню помогают пользователям легко распознать цель и задачи сайта.
4. Уделите внимание контрасту
Убедитесь, что текст и все элементы имеют четкую и заметную форму. Использование светло-серого на темно-сером фоне — популярный прием в плоском дизайне, но редко дает хороший результат. Кроме того, не увлекайтесь использованием фоновых изображаний с текстовым наполнением.
sabemasson.com
Главная активная кнопка ‘See more’ на первом экране уже не так заметна, и на фоне крупного изображения она «потеряна» для пользователя.
Улучшить дизайн страницы можно, добавив цветовой акцент, например, более темный оттенок голубого, который уже используется в пользовательском интерфейсе.
5. Добавьте глубину
Материальный веб-дизайн (Material Design) — визуальный язык, созданный компанией Google, был представлен в 2014 году. Лучшее качество материального дизайна — это тщательно продуманная структура с четкими правилами, действиями и визуальными свойствами. К сожалению, его не всегда правильно применяют на деле. Например, зачастую тени и градиенты используются для улучшения визуального ряда, а не для того, чтобы поддержать пользователей и создать для них четкие индикаторы.
material.io
Вам необязательно пользоваться принципами материального дизайна, чтобы получить все его преимущества.
Создайте собственный язык при помощи полутрехмерных элементов.
Скриншот приложения LiquidText
В довольно плоском по форме приложении для аннотаций для iOS используются едва видимые тени. Они попадают под интерактивные элементы и панель инструментов и разделяют элементы пользовательского интерфейса от текста.
6. Сомневаетесь? Добавьте ссылку
Когда пользователи закономерно предполагают, что видимый ими элемент — это ссылка, это действительно должна быть ссылка. Например, если ссылка содержит описательный текст, заголовок и уменьшенное изображение «в одном флаконе», то все связанные элементы должны вести на одну и ту же страницу.
nrdc.org
В обзоре «Наши приоритеты» на сайте пользователи должны навести курсор на уменьшенное превью сайта, чтобы увидеть текст и ссылку. К сожалению, на самом деле ссылку имеет только иконка, изображающая маленькую стрелку.
В таком случае добавьте ссылки в каждый связанный элемент.
Подведем итоги
Плоский дизайн — мощное направление в дизайне — но только при правильном применении.
Не жертвуйте удобством ради красивого дизайна. Вместе с пользователями проверяйте, понятен ли им ваш сайт.
Рассмотрите каждый элемент на соответствие этому чеклисту, чтобы проверить удобство пользования:
Чек-лист:
Подсказки, какие элементы кликабельные, постоянны по всему сайту.
Кликабельные элементы выделяются, имеют достаточный контраст и заметны.
Кликабельные элементы находятся именно там, где пользователи ожидают их найти.
Отсутствуют элементы, которые выглядят кликабельными, хотя таковыми не являются.
Все элементы, относящиеся к одному и тому же фрагменту контента (иконка, изображение, текст), связаны и указывают на одну и ту же страницу.
Существует обратная связь всякий раз, когда между щелчком мыши и последующим действием возникает задержка.
Оригинальный текст: Kate Meyer / nngroup.com
Перевод: Светлана Граудт
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также:
Навигация по сайту — примеры как сделать навигацию удобной
Белое пространство: способы вёрстки контента на сайте
Виджеты для сайта бесплатно — Прокачай Тильду!
Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне
Картинки для сайта — как подбирать фото и изображения на фотостоках
Где найти фото — руководство по поиску картинок для сайта или статьи
Анализ и подготовка контента при создании сайта
Как написать текст для лендинга — создание текста для landing page
Шрифт для сайта — как выбрать или поменять шрифты
Размеры изображений для 9 социальных сетей — справочник
Как создать сайт.
Пошаговое руководство
37 лонгридов с отличным дизайном
| Показать больше |
10 примеров хорошего веб-дизайна
Когда дело доходит до дизайна веб-сайта, бывает сложно понять, с чего начать. Вы хотите, чтобы ваш веб-сайт выглядел великолепно, но если у вас нет опыта, как добиться этого наилучшим образом, установка правильных элементов может оказаться сложной задачей.
Многие владельцы бизнеса на этапе запуска чувствуют то же самое. Имея 1,6-1,9 миллиарда веб-сайтов в Интернете, создать сайт, который выделяется среди остальных, может быть непросто.
В этой статье мы покажем вам несколько лучших примеров хорошего дизайна веб-сайта.
Эти веб-сайты созданы профессиональными веб-дизайнерами, поэтому вы сможете черпать вдохновение при создании своих собственных.
Кроме того, мы также поговорим о затратах на создание веб-сайта и об особых соображениях, которые следует учитывать, приступая к этому процессу.
Давайте начнем.
Заинтересованы в дизайне веб-сайтов?
У нас есть отличная статья. Узнайте больше о разработке пользовательского веб-сайта WordPress.
ПодробнееПримеры удачного дизайна веб-сайта
Следующие веб-сайты представляют небольшую выборку того, что возможно в отношении отличных дизайнерских идей. Они также могут помочь вам понять конкретные вещи, которые нужно сообщить вашему дизайнеру перед началом проекта, связанного с веб-дизайном.
Также возможен поиск нестандартных современных шрифтов для веб-дизайна, которые сокращают время и затраты на сам веб-дизайн. Шрифты Masterbundles расширяют их разнообразие и подходят для любых нужд.
Можно использовать шрифты в плакатах, логотипах веб-сайтов, фирменном стиле, заголовках и т. д. Каждый упомянутый ниже веб-сайт имеет свой собственный подход к шрифтам, который помогает им выделиться среди других веб-сайтов.
1. Superlist
Superlist использует контрастную схему темных и светлых цветов, чтобы сделать свой веб-сайт популярным.
Они сосредоточены на том, чтобы помогать командам выполнять задачи, будь то работа или игра. Разделенный экран в верхней части их домашней страницы помогает привлечь внимание пользователя от первой до последней прокрутки.
Кроме того, такие функции, как:
- горизонтальный скроллер с визуальными элементами высокой детализации
- различные ключевые слова, которые выделяются при переходе вниз по странице
- при наведении курсора на определенные области на экране появляется несколько рисунков
дизайн веб-сайта удерживает внимание пользователя на странице.
2. Bluemonday
Bluemonday предлагает необычный цифровой контент. Видео, которое начинает воспроизводиться при загрузке страницы, — это не то, к чему привыкли видеть посетители, что заставляет их обратить внимание на сайт.
Дизайн Bluemonday уникален и отличается от других сайтов. Это делает его запоминающимся и выделяет среди остальных.
На сайте есть текст, выделенный разными цветами, а также замедленная съемка и GIF-файлы вместо традиционных изображений. Также есть текст, который появляется только при прокрутке определенных областей. В общем, дизайн веб-сайта может вдохновить вас.
3. Ultatel
Ultatel уделяет особое внимание побуждению своих посетителей к действию. Они дают посетителям возможность получить демонстрацию или цитату прямо над сгибом на своей домашней странице. У них также есть видимые ярлыки для их организации, что помогает завоевать доверие посетителей.
Ultatel также отлично сравнивает облачные телефонные системы с традиционными, излагая плюсы и минусы каждой из них на главной странице. Это помогает посетителям принять решение об использовании услуг Ultatel без необходимости поиска этой информации.
4. Spotify.Design
Все мы знаем (и больше всего любим) Spotify за его возможности потоковой передачи музыки. Но знаете ли вы, что у компании есть целый веб-сайт, посвященный дизайну? Spotify.
Design дает нам представление о том, что делает музыкальное приложение таким хитом.
На их веб-сайте есть информация об инструментах, которые Spotify использует в бизнесе, разработке, исследованиях и многом другом. Они также дают представление о продукте, что помогает нам понять, как он работает.
Вся эта информация представлена в визуально привлекательной форме, что облегчает ее восприятие.
Если вы хотите быть в курсе последних разработок Spotify, вы можете подписаться на их рассылку по электронной почте. Затем они будут отправлять регулярные обновления прямо на ваш почтовый ящик.
5. Интелиус
Intelius — это веб-сайт, предоставляющий информацию об общедоступных записях. Типы услуг, которые они предлагают, сразу видны, как и информация о видах поиска, которые можно выполнить.
Это позволяет посетителям немедленно приступить к работе с сайтом — без необходимости прокручивать или щелкать мышью, чтобы понять, что делает Intelius.
Дизайн сайта чистый и лаконичный, что упрощает навигацию.
Использование пустого пространства гарантирует, что посетители могут сосредоточиться на текущей задаче, увеличивая вероятность того, что они найдут нужную им информацию.
Intelius предоставляет информацию об общедоступных записях. Кроме того, на Intelius легко найти то, что вы ищете, потому что он предоставляет ссылки на различные типы поиска прямо внизу страницы.
6. Музей Франса Хальса
Музей Франса Хальса — голландский музей, использующий элементы цифрового дизайна, связанные с его экспонатами. Это позволяет посетителям увидеть, какие события происходят, и получить представление о музее, не заходя внутрь.
Посетители могут познакомиться с музеем и даже купить билеты, не выходя из дома. А благодаря адаптивному дизайну сайт отлично выглядит независимо от того, какое устройство вы сейчас используете.
Веб-сайт был разработан таким образом, чтобы изображения и страницы переходили таким образом, что вы чувствуете, что действительно находитесь там.
7. Us Search
Us Search — это веб-сайт, предоставляющий специалистам в области права услуги по поиску. Цветовая схема яркая и мощная, а кнопка призыва к действию прозрачная и находится в верхней части страницы. Функции сразу видны, как и информация о ценах.
Раздел «О нас» краткий и содержательный, в нем основное внимание уделяется укреплению доверия и демонстрации возможностей продукта. Говоря об особенностях, каждый из них получает свою собственную коробку с белым фоном и черным текстом, что помогает ему выделиться.
Поскольку у людей нет времени прокручивать длинные блоки текста, UsSearch является хорошим примером работы профессиональных веб-дизайнеров, так как сайт быстро добирается до сути.
8. Hyer
Hyer — это веб-сайт, предлагающий услуги по аренде частных самолетов. Дизайн чистый и гладкий, с большим количеством пустого пространства между элементами.
Это гарантирует, что сообщение будет громким и четким, что позволит посетителям легко понять, что делает Hyer и какую пользу это может принести им.
Самолет, который взлетает, когда вы прокручиваете страницу вниз, — приятный штрих с визуальной точки зрения.
Четкие и простые слоганы позволяют посетителям понять, что делать дальше. Здесь люди могут либо забронировать самолет, либо совместный рейс. Здесь нет двусмысленного языка или сложной навигации — только два понятных варианта.
У них также есть функция на их домашней странице, которая показывает их самые популярные направления, а также их приложение для управления полетами. Это позволяет легко и удобно получать информацию о рейсе.
9. Carmax
Carmax — это веб-сайт, предназначенный для покупателей/продавцов/торговцев на автомобильном рынке. Дизайн должен поражать все три типа людей, и он делает это таким образом, чтобы он был одновременно информативным и визуально привлекательным.
На главной странице есть панель, где вы можете искать конкретный автомобиль или просматривать его по марке и модели. Вы также можете продать / обменять прямо с первой страницы через VIN или номерной знак автомобиля.
Сразу видно их УТП (24-часовые тест-драйвы и 30-дневные возвраты), становится ясно, что Carmax сосредоточена на предоставлении наилучшего возможного опыта для своих клиентов с помощью веб-сайта, который хорошо работает и выглядит великолепно.
10. Surge.AI
Surge.AI — это веб-сайт, предлагающий услуги маркировки данных. Видео, которое вы видите при прокрутке страницы вниз, великолепно, потому что оно информативно и окружено преимуществами, которые показывают пользователям, что их ждет.
Привлекательные эскизы блогов заставят вас остановиться и прочитать больше, а кнопка призыва к действию поможет вам приступить к работе над вашими проектами.
Нам также нравятся темные цвета вверху, которые контрастируют со светлыми внизу, поскольку четко разделяют верхнюю и нижнюю части страницы.
Стоимость
Знание стоимости разработки отличного веб-сайта важно при составлении бюджета вашего проекта.
Средняя стоимость дизайна сайта зависит от нескольких факторов:
- Размер сайта
- Количество страниц
- Сложность элементов дизайна
- Если вам нужен нестандартный функционал
- Если вам нужен система управления контентом
- Сколько редакций вы хотите
- Ваше местоположение
С учетом всех этих элементов средняя стоимость разработки веб-сайта колеблется от 1600 долларов США за простую целевую страницу до 12000 долларов США за сложное веб-приложение или специальное программное обеспечение.
Однако имейте в виду, что это средние значения, поэтому ваш конкретный проект может стоить больше или меньше в зависимости от ваших требований.
Особые соображения для стартапов
Особые соображения для стартапов при создании своего сайта.
Создать хорошо выглядящий веб-сайт — это одно, а убедиться, что он хорошо работает и прост в использовании, — совсем другое.
Это особенно актуально для стартапов, которые часто имеют ограниченный бюджет и должны обеспечить, чтобы их сайт работал как можно быстрее и эффективнее.
Некоторые вещи, о которых стартапам следует подумать при создании своего веб-сайта, включают следующее.
Пользовательский опыт
Пользовательский опыт вашего веб-сайта (UX) — это то, насколько легко людям пользоваться вашим сайтом. Вы хотите убедиться, что ваша навигация проста в использовании и что весь ваш основной контент можно быстро найти.
Вам также следует протестировать свой веб-сайт на разных устройствах, чтобы убедиться, что он хорошо работает на всех размерах экрана.
Все больше и больше людей используют свои мобильные телефоны для работы в Интернете, поэтому очень важно убедиться, что ваш веб-сайт оптимизирован для мобильных устройств.
Поисковая оптимизация
Поисковая оптимизация гарантирует, что ваш сайт будет отображаться как можно выше на странице результатов поисковой системы по определенным ключевым словам, связанным с бизнесом. Это важно, потому что это может помочь вам получить больше органического трафика на ваш сайт.
Есть несколько вещей, которые вы можете сделать, чтобы улучшить SEO вашего сайта. Вы можете использовать правильные ключевые слова, создавать высококачественный контент и создавать обратные ссылки.
Безопасность
Обеспечение безопасности вашего веб-сайта необходимо по двум причинам. Во-первых, это поможет защитить данные ваших посетителей. Во-вторых, это поможет защитить ваш сайт от хакерских атак.
Вы можете сделать несколько вещей для защиты своего веб-сайта, включая установку SSL-сертификата и использование подключаемого модуля безопасности.
Кроме того, крайне важно быть в курсе любых обновлений и исправлений, которые необходимо установить.
Интеграция с социальными сетями
Все больше и больше людей используют социальные сети, поэтому очень важно обеспечить интеграцию вашего веб-сайта с социальными сетями. Это позволит вам поделиться своим контентом с более широкой аудиторией и связаться с большим количеством потенциальных клиентов.
Некоторые критически важные идеи для интеграции с социальными сетями включают добавление кнопок социальных сетей на ваш веб-сайт, создание профиля в социальных сетях для вашего бизнеса и совместное использование вашего контента в социальных сетях.
Вы также можете использовать платную рекламу в социальных сетях для продвижения своего сайта. Различные социальные сети, такие как Facebook, Twitter и LinkedIn, предлагают разные варианты и способы таргетинга на определенную аудиторию.
Привлечение потенциальных клиентов
Если вы хотите привлекать потенциальных клиентов и превращать посетителей веб-сайта в постоянных клиентов с помощью своего веб-сайта, вы должны убедиться, что у вас есть правильная целевая страница и форма захвата.
Это форма, которую посетители могут заполнить, чтобы подписаться на вашу рассылку новостей или запросить дополнительную информацию о вашем продукте или услуге.
Вы должны разместить форму для захвата лидов на видном месте на своем веб-сайте и убедиться, что ее легко найти и использовать. Вы также можете рассмотреть возможность использования всплывающей формы, чтобы повысить видимость формы захвата лидов.
Кроме того, полезно провести раздельное тестирование различных версий формы, чтобы определить, какая из них работает лучше всего. Этот процесс включает в себя создание двух или более разных версий вашей формы, а затем их тестирование, чтобы увидеть, какая из них генерирует больше всего лидов.
Доступность16% населения мира имеют инвалидность. Тем не менее, только около 3% веб-сайтов спроектированы таким образом, чтобы люди с нарушениями зрения, слуха и/или моторики могли правильно получить к ним доступ.
Создание доступных веб-сайтов является обязательным требованием для некоторых предприятий в соответствии с Законом об американцах-инвалидах.
Чтобы проверить, доступен ли ваш веб-сайт в настоящее время, вы можете использовать этот бесплатный инструмент для проверки доступности веб-сайтов.
Электронная торговля
Если вы управляете интернет-магазином, вам необходимо убедиться, что ваш веб-сайт правильно настроен для электронной коммерции. Это включает в себя добавление таких функций, как корзина для покупок, страницы продуктов и процесс оформления заказа.
И снова возникает вопрос безопасности. Убедитесь, что любая информация, представленная через ваш сайт, является конфиденциальной. Это поможет клиентам чувствовать себя уверенно при вводе платежной информации.
Помимо прочего, это можно сделать путем интеграции с надежной платформой электронной коммерции для запуска вашего магазина.
Хорошо спроектированный сайт электронной коммерции также будет содержать страницы продуктов, содержащие высококачественные изображения продуктов, описания, отзывы покупателей и другую соответствующую информацию.
Аналитика
Очень важно отслеживать эффективность вашего веб-сайта, чтобы вы могли видеть, насколько хорошо он работает.
Google Analytics — это бесплатный инструмент, который можно использовать для отслеживания различных показателей, включая просмотры страниц, уникальных посетителей и время нахождения на сайте.
Однако существует множество других инструментов, которые могут предлагать больше или меньше функций в зависимости от того, что вы ищете.
Отслеживание того, как работает ваш веб-сайт, поможет вам улучшить его, а также поможет вам увидеть, работает ли ваш маркетинг.
Заключение
Хорошо разработанный веб-сайт необходим для любого бизнеса в современном мире. Хороший веб-сайт поможет вам выделиться среди конкурентов, привлечь больше клиентов и увеличить прибыль.
Идеи и мозговой штурм с использованием приведенных выше дизайнов веб-сайтов могут помочь вам создать красивое и практичное присутствие в Интернете.
Помните о своей аудитории при разработке сайта и не бойтесь экспериментировать, пока не найдете то, что лучше всего подходит для вас.