Шесть актуальных трендов веб-дизайна | GeekBrains
https://d2xzmw6cctk25h.cloudfront.net/post/2104/og_image/696f6d77c5495caa47e4e6b1205243cd.png
Хороший дизайн всегда заставляет задуматься. Вот вы весь день кликаете на ссылки и скроллите, но потом вдруг почему-то останавливаетесь — на оригинальном взаимодействии с пользователем, интересном фото или просто на детали, которую раньше не видели. Что бы это ни было, глаз зацепился.
Почему так случилось? Здесь наверняка замешаны актуальные тенденции UX, визуальный опыт пользователя, его путь на вашем сайте. Как раз в этом и заключается разница между хорошим и классным сайтом.
Как и все тренды, тенденции в UX меняются. Если вы представляете бизнес, ваш сайт должен привлечь внимание, вовлечь и продать. Это и есть задача UX: захватить внимание пользователя, удержать его на странице и повысить конверсию.
В блогах и портфолио UX работает на чтение и шеринг материалов в других источниках. 75% пользователей оценивают, доверять сайту или нет, по внешнему виду. Поэтому важно, чтобы каждый разработчик фокусировался на потребностях юзера.
В этом материале мы выделили последние тенденции в веб-дизайне и для каждой подобрали сайт, который ярко её демонстрирует.
Чем меньше, тем лучше. Звучит как клише, но это один из топовых трендов ушедшего года, сохраняющий актуальность и сейчас. Бренд газировки Seriously Unsweetened создал минималистичный и подталкивающий к размышлению сайт.
Он сделан в конструкторе Squarespace. На основном изображении прозрачные бутылки с напитком размещены на ярком фоне: по одной на каждый вкус. А на узнаваемость бренда работает икс в логотипе.
Мы призываем дать свободу своему внутреннему минималисту. Вы облегчаете жизнь аудитории, не используя сложный UX — то, что дизайнеры называют «умственным усилием» (cognitive effort). Страница загружается быстрее, статистика отказов снижается и сайт фокусируется на целях вашего бренда.
Используйте пустое пространство с простыми, но контрастными цветовыми схемами, сосредоточьтесь на мелких деталях вроде логотипа и ставьте заголовки, которые чётко описывают содержание страницы.
Фокус на пользователе: Lemonade
Этот сайт — настоящий game-changer. Он меняет правила игры. Используя интеграцию с CUI (Conversation User Interface), он всего за пять минут способен предоставить пользователю подробные страховые котировки.
Lemonade — отличный пример привлекательного одностраничного сайта. На нём легко ориентироваться благодаря удобным кнопкам с действиями — например, «Узнать цены и подключить».
Интересное представление чат-бота — Майя — помогает быстрее подобрать подходящую страховку. Искусственный интеллект активно мимикрирует под живого человека: у Майи даже есть лицо. Этот чат-бот узнаёт нужную информацию маленькими кусочками. А также предсказывает возможные ответы пользователя и запоминает самые частые опечатки.
Такой веб-дизайн вызывает доверие. Кроме того, переходя между страницами, пользователь всегда знает, куда попадёт, — действия обозначены чётко.
Пример Майи показывает, как можно «очеловечить» своего бота
Нам целиком и полностью нравится этот UX — от заголовка «Забудьте всё, что вы знали о страховании» до розовых кнопок. И хотя чат-боты — идея совсем не новая, мы считаем, что за ними будущее.
Интересная анимация прокрутки: Crypton Trading
Сайт центра криптовалют, который использует искусственный интеллект для прогнозирования трендов и предпочтительных периодов покупки. Даже если вы не имеете отношения к крипте, вы будете прокручивать сайт и не сможете остановиться. И всё из-за потрясающей анимации, которая активируется во время скроллинга.
Каждый шаг прокрутки открывает новую букву, предложения формируются в неторопливом темпе — и пользователь вовлекается в криптопутешествие. Такой диалоговый UI помогает легко усваивать сложные технические детали.
Интерактивное приветствие
Вообще, если вы владеете JavaScript, то можете сами легко анимировать свой сайт. А если нет, у большинства веб-разработчиков есть инструменты для анимации, которые можно брать и использовать.
Но нужно оговориться: недавнее исследование NNG на рынке UX показало, что большинство пользователей замечают медленную загрузку страниц из-за нагромождения анимации прокрутки. Поэтому главное — не перестараться. Будьте осторожны, или вы рискуете пользователями.
Яркие фото товаров: Apple
Список топовых сайтов не обходится без Apple. Мы обсудили дизайн её сайта с Ганешем (Ganesh), старшим UX-разработчиком в MVF Global. Ему нравятся сверхреалистичные фото продуктов с разных углов, которые помогают продвигать товары благодаря особенному визуальному представлению.
Не каждый может конкурировать с Apple, это факт. Но принцип «качественные фотографии лучше продают» работает для всех. Поэтому вкладывайте время и деньги в фото и заботьтесь о том, что подумает покупатель.
Если хотите вдохновить сценариями использования своего продукта — так Apple продвигает линейку Pro — или просто показать его крупным планом, используйте вместо тысячи слов фото и получите отличную конверсию.
Если хотите построить личный бренд в вебе, нет примера лучше, чем сайт дизайн-студии Leandro Pedretti, созданный в конструкторе Wix. На момент подготовки статьи сайт, к сожалению, недоступен, так что выше ссылка на макет в Pinterest. В хедере — видео с разработкой прототипа, где сразу же демонстрируются возможности компании в дизайне.
Один клик — и вы под впечатлением. Видео вызывает больший эмоциональный отклик, чем картинка. Поэтому рекомендуем использовать возможности быстрого интернета. Но видео должно быть коротким, визуально привлекательным и без звука. Нет ничего хуже, чем звуки на сайте.
Сайт производителя бритв Harry’s продвигает мобильный дизайн. Мудрый шаг, учитывая, что недавний опрос показал: 83% покупателей по всему миру в будущем планируют делать покупки со смартфона.
Если вы разрабатываете интернет-магазин, убедитесь, что вы используете современные адаптивные технологии. Чётко представьте основные действия пользователей на сайте, упростите рекламные баннеры и укоротите меню.
В интернет-магазине также должны быть качественные фотографии товаров — это повышает доверие к бренду и демонстрирует актуальный ассортимент. Это именно то, что нам нравится в Harry’s, который разработан на конструкторе Shopify.
Последнее, но не по важности
Помните об основе основ — о заголовке. Чем крупнее, тем лучше. Жирные начертания шрифтов в сочетании с флэт-анимацией становятся всё популярнее. Пользователи проводят меньше времени на сайтах, и примерно 46% из них уйдут, если не увидят на странице чёткий месседж. Здесь поможет огромный красочный заголовок. Исследования показывают, что цвет увеличивает узнаваемость сайта на 80%, поэтому рекомендуем массивный заголовок, шрифт Sans Serif (без засечек) и яркий, однотонный фон.
Чтобы по-настоящему заинтересовать аудиторию, вы должны «повести её на прогулку», рассказать историю с запоминающимся содержанием. Анимация прокрутки хорошо подходит для этого — формирует повествование и не усложняет макет.
Узнайте свою аудиторию. Создайте сайт, который работает именно для неё, и подумайте об эстетике: оценят ли, например, любители технологий анимацию, или ваш смелый продукт не нуждается в этом? Какими бы ни были ваши страницы, никогда не забывайте о том, кто будет читать, нажимать и скроллить. Будьте в курсе тенденций дизайна, и тогда у вас получится сайт, который действительно привлечёт пользователей.
Эта статья — адаптированный перевод материала Website Building Expert. Недавно мы также писали об актуальных цветовых трендах по версии Shutterstock.
Хотите освоить лучшие практики веб-дизайна и все актуальные тренды? Тогда ждём вас на факультете веб-дизайна GeekUniversity! 🙂
Тренды веб-дизайна, о которых важно знать в 2019
Знаете ли вы, какие способы привлечения внимания пользователей являются самыми популярными в этом году? А какие из них могут похвалиться наиболее высокими показателями вовлечения? Тренды приходят и уходят, но всегда нужно знать, какие из них сегодня могут оказаться полезными для вашего проекта, а какие — нет.
Между тем дизайнеры отличаются каким-то странным отношением к трендам. Если заставить их неотступно следовать за веяниями моды, они скажут, что это ограничивает их творческий потенциал. С другой стороны, надо понимать, что тренды способны многое поведать о предпочтениях пользователей — том, что люди сегодня любят, а что терпеть не могут — помогая тем же дизайнерам создавать продукты, которые гарантированно становятся популярными.
Люди — существа, прежде всего, визуальные, в силу чего внешний вид объектов оказывает мощнейшее воздействие на то, как мы их понимаем и относимся к ним. Поэтому за всеми новинками в области дизайна нужно не только следить, но и примерять на себе, а точнее — на своей аудитории.
В этой статье внимание читателя будет сосредоточено на наиболее важных тенденциях веб-дизайна в 2019 году.
Содержание статьи
1. Цифровые иллюстрации
2. Сочные, яркие цвета
3. Hero-видео
4. Разделенный экран
5. Геометрические фигуры
6. Градиенты и дуотоны
7. Жирный шрифт
Заключение
1. Цифровые иллюстрации
В последние годы цифровые иллюстрации стали одним из важнейших трендов визуального дизайна. Такие изображения позволят вашему дизайну выгодно отличиться от других и помогут вам установить с посетителями эмоциональную связь. Иллюстрации — инструмент довольно гибкий; дизайнеры продуктов могут использовать их для разных целей: и в качестве hero-изображения, и для демонстрации какой-либо функции продукта, и даже в качестве иконки на панели навигации.
Среди цифровых дизайнеров популярны следующие два типа иллюстраций: нарисованные от руки плоские иллюстрации и трехмерные. Первые призваны произвести впечатление ручной работы, без искажений продемонстрировать мастерство художника; в данных иллюстрациях легко передать особенности его стиля. Slack, Intercom и Dropbox — это всего лишь несколько компаний, которые используют такого рода изображения.
Нарисованные от руки иллюстрации выглядят и чувствуются как более личные
Трехмерные иллюстрации — новая тенденция. Дизайнеры начали использовать их, чтобы добавить в графическое оформление больше реализма, стереть границу между цифровым и физическим миром.
3D-иллюстрации создают у пользователей впечатление, что они могут дотянуться до объектов на экране, дотронуться до них
2. Сочные, яркие цвета
Есть причина, почему так много digital-дизайнеров стремятся использовать яркие цвета: так они стараются сделать лендинг пейдж визуально интереснее, придать ему некую изюминку. Внимание пользователя — драгоценный ресурс, а один из самых эффективных способов привлечь внимание — использовать цвета, которые помогают выделиться. Яркий фон обязательно обратит на себя взгляд посетителя и внесет свой вклад в организуемый вами по-настоящему незабываемый опыт.
Яркие цвета — отличный способ привлечь внимание посетителя
Читайте также: 8 ярких цветовых трендов 2019 года3. Hero-видео
Лучше один раз увидеть, чем сто раз услышать — формула превосходного веб-дизайна. Образность играет ключевую роль в визуальном оформлении, поскольку помогает дизайнерам быстро донести до пользователя основную мысль.
Долгое время веб-дизайнеры вынуждены были довольствоваться только статичными изображениями. Но сейчас все изменилось. Высокоскоростное соединение позволяет превращать главные и посадочные страницы сайтов в захватывающие фильмы. Видео вызывает куда больший интерес пользователей, и они готовы уделить просмотру лендинга больше своего времени. Клипы, используемые в hero-разделе, могут иметь вид зацикленных видео, длящихся всего несколько секунд, либо полнометражных картин со звуком.
Дизайнеры используют видео, чтобы рассказывать истории
4. Разделенный экран
Split-screen — относительно незамысловатый прием в дизайне. Все, что вам нужно сделать — это разделить экран лендинга на две части, и в каждую заложить конкретное сообщение. Эта техника хорошо себя проявляет на мобильных устройствах; на небольших экранах две горизонтальные панели могут быть продемонстрированы в виде вертикальных блоков контента. Вам пригодится этот прием, когда вам нужно будет за один раз донести до пользователя сразу два оффера.
Разделенный экран будет особенно полезен интернет-магазинам, которые одновременно смогут обратиться как к мужчинам, так и к женщинам
Технология также хорошо работает, когда вам нужно связать текстовое сообщение с соответствующими изображениями.
Разделенный экран поможет связать друг с другом текстовое сообщение и изображение
5. Геометрические фигуры
Для создания красивых орнаментов можно использовать геометрические фигуры и шаблоны. Они прекрасно подойдут для эффективного представления и цифровых продуктов. Дизайнеры могут использовать изображения формата SVG и PNG с геометрическими узорами на фоне. Такие фоны хорошо масштабируются, так что вам не придется беспокоиться о том, как они будут выглядеть на маленьких и больших дисплеях.
С геометрическими узорами вы можете дать волю своим фантазиям
6. Градиенты и дуотоны
Градиенты — универсальный инструмент, который можно использовать в любом типе дизайна. Дизайнеры часто их используют, чтобы придать своей работе чуть больше глубины. Современные тенденции графического дизайна диктуют использование больших, смелых и красочных образцов, с помощью которых вы можете сделать сильное и понятное заявление.
Как правило, при работе с градиентами дизайнеры любят экспериментировать. Например, вот что происходит при наложении линейного одноцветного градиента на фотографию:
Наложение одноцветного градиента на фотографию
И вот как выглядит радиальный двухцветный градиент на простом фоне:
Эффект дуотона стал популярным благодаря Spotify, музыкальному стриминговому сервису. Авторы проекта долго ломали голову над тем, как ярче и интереснее выразить идентичность своего бренда, и в дизайне решили остановиться на эффекте дуотона.
Если говорить проще, то дуотоны — это фильтры, которые заменяют белые и черные оттенки фотографии двумя цветами. При помощи дуотонов вы можете придать практически любому изображению стиль вашей компании; просто используйте основной цвет вашего бренда в качестве duotone-фильтра.
Дуотон в hero-изображении
Читайте также: Лучшие цвета для роста трафика, конверсии и продаж7. Жирный шрифт
Большинство дизайнеров знают, что в процессе разработки контент всегда должен стоять на первом месте. Дизайн должен почтительно относиться к сообщению, которое создатели продукта хотят донести до своей аудитории. Жирный шрифт помогает дизайнерам с успехом справляться с этой задачей. Массивный, доминирующий на экране текст мгновенно притянет к себе взгляды каждого без исключения посетителя.
Жирный шрифт выполняют важную функцию — он делает текст более легким для чтения. Взгляните на следующий пример. Этот шаблон является отличным примером того, насколько мощным может быть жирный шрифт:
Дизайнеры могут использовать жирный шрифт, чтобы сделать акцент на тексте
Заключение
Должны ли вы следовать трендам? Каждый сам ответит на этот вопрос. Но если вы хотите узнать, выиграет ваш лендинг от того или иного популярного приема или нет, вы должны его протестировать. Ну, а приведенные выше примеры помогут обрести вам вдохновение, которое так важно на первом этапе.
Высоких вам конверсий!
По материалам: smashingmagazine.com
28-03-2019
Самые яркие тенденции веб-дизайна в 2016 / Habr
Мир веб-дизайна ярок и многообразен. Большие изменения происходят здесь не каждый год. Подтверждает это и стремительный рост технологий, который за последние несколько лет показал, что важные тенденции в веб-дизайне недалекого будущего будут сосредоточены на улучшении имеющихся разработок.Плоский дизайн станет более текстурированным, “кинематографические опыты” будут более распространенными, а использование библиотек JavaScript позволит больше экспериментировать. Мы уверены, что растущая популярность WebGL и виртуальной реальности позволит изменить вебсайты, которые мы знаем, в нечто новое с интересными интерактивными возможностями.
В этой статье мы рассмотрим 11 крупнейших ожидаемых тенденций веб-дизайна этого года. Так что устраивайтесь поудобней и начинайте читать!
1. WebGL (Web Graphics Library)
Среди новейших достижений есть приметная технология WebGL (Web Graphics Library). Её использует множество удивительных сайтов, появившихся недавно.
По-простому, WebGL — это способ визуализации интерактивной 3D и 2D графики в браузерах с аппаратным ускорением, без каких-либо плагинов.
1.1 Интерактивное 3D приложение WebGL
Experience Curiosity (разр. NASA)
WebGL был одной из центральных тем конференции SIGGRAPH 2015. Презентацию по трехмерной графики и WebGL вы можете посмотреть на этом канале YouTube.
Из полуторачасового видео, вы узнаете о веб-приложении NASA “Experience Curiosity”, созданием которого отметилась третья годовщина посадки марсохода “Curiosity” на Марс. Приложение позволяет пользователям “покатать” трехмерный марсоход NASA на поверхности Марса и “управлять” рукой-манипулятором.
Для создания этого ресурса использовался Blend4Web (фреймворк для создания браузерных 3D-приложений) и Blender (пакет для трехмерного моделирования и анимации).
Веб-сайт Beloola использует three.js (библиотека JavaScript)
Beloola — это первая социальная сеть, сконструированная в виде трехмерного мира. Она напоминает Linden Lab в Second Life, но не требует никакого специального программного обеспечения, кроме самого браузера.
1.2 3D “Видео” WEBGL
Angry Wife (разр. Madeo)
Другим типом 3D в WebGL может служить игровое промо “Angry Wife”. На первый взгляд, оно выглядит как обычное видео, но это совсем не так. На самом деле, 3D сцена, интегрированная в веб-страницу, использует JavaScript библиотеку three.js.
Проект “The Boat” от SBS TV (Австралия)
Австралийское телевидение SSB TV переработала историю писательницы Nam Le “The Boat” о побеге из Вьетнама и превратило её в интерактивный видео-рассказ с помощью WebGL. Приложение состоит из нескольких частей с отлично выполненной анимацией и вручную раскрашенными иллюстрациями. Здесь также используется three.js, как и в предыдущем примере.
BecauseRecollection
В приложении Because Recollection воплотилась идея создания своеобразной машины времени, но только в отношении музыки. Большое количество звуковых эффектов тесно связанно с происходящем на экране и зависит от действий пользователя. Проект сделан с помощью PIXI в виде скомпонованной серии клипов, которые активируются различными интерактивными элементами.
1.3 Визуализация данных с WebGL
Histography (Matan Stauber)
Histography демонстрирует исторические события из Википедии на интерактивной шкале времени (прим. переводчика. Для запуска требуется браузер Chrome). Наверное, это кажется не очень интересным, но попробуйте сами и, возможно, вы удивитесь тому, как такая огромная масса данных может быть трансформирована в простой и отзывчивый инструмент.
“The Museum of The World” (разр. Британский музей и Google)
Похожая идея была реализована несколько иным способом для коллекции Британского музея. Проект “The Museum of The World” — это результат партнерства между Британским музеем и Институтом культуры Google. Исторические объекты из коллекции музея показываются на “шкале времени” выполненной в 3D с помощью WebGL.
Вы можете перемещаться во времени вперед и назад по осям Z или Y, и по континентам, используя ось X. С помощью меню можно выбрать теги к объектам, которые сгруппированы по ключевым темам (торговля, конфликт и т.д.).
1.4 2D анимация на основе WebGL
Nouvelles-Ecritures от FranceTV
Проект “Nouvelles Ecritures” (прим. переводчика. “Современные свитки”) французского телеканала FranceTV — это сайт с очень интересной реализацией 2D-анимации WebGL в браузере. Ощущение, что читаешь богато иллюстрированный свиток, который плавно прокручивается по вертикали. Проект выполнен с помощью JavaScript библиотеки Pixi.js.
С технической точки зрения — это непрерывная двухмерная анимация, которая выполняется в псевдо 3D пространстве. Выглядит очень эффектно!
2. VR (Виртуальная реальность)
Виртуальная реальность (VR) — это родственная технология, которая способна встряхнуть мир гаджетов в 2016 году. Возможно, совсем скоро всё станет гораздо интереснее.
Вы слышали о Google Cardboard? С телефоном Android и куском картона вы можете получить ощущение виртуальной реальности в домашних условиях. Google добавил к самодельным очкам специальное приложение Android — Cardboard Camera, которое позволяет просматривать виртуальные фото. Это приложение стало одним из лучших по мнению The Guardian в январе 2016 года.
Однако, если вы желаете получить более качественную “виртуальную реальность”, то можете оставить предзаказ на набор Rift VR от Oculus (приблизительно 600$). Есть нечто среднее между Google Cardboard и Oculus — это VR GEAR от Samsung (100$).
Имеет ли это какое-либо значение для веб-дизайна? Пока нет, но взгляните на WebVR (JavaScript API, который обеспечивает доступ к устройствам VR) и на некоторые проекты, где используется эта технология. Рабочие примеры можно найти на сайте Mozilla VR. Вот что говорят сами разработчики: “Мы хотим создать открытую, высокопроизводительную систему виртуальной реальности для сайтов”.
2.1 VR video
Catch the Dragon (“Поймай дракона”) от Peugeot
Промо Peugeot 208 — это отличный пример взаимодействия устройств виртуальной реальности и видео. При запуске предлагается выбрать нужную опцию просмотра: VR (для Google Cardboard) или панорамное видео 360. Обе версии полностью интерактивные. Если вы используете устройство с гироскопом, то придется активно крутить головой, чтобы “поймать дракона”.
3. Системы частиц
Deutser
Системы частиц в трехмерной графике начали использовать еще с 80-х годов для эмуляции некоторых природных явлений, таких как туман, дым, огонь, вода, трава и облака. Теперь с появлением WebGL это стало доступным и для браузеров.
Интересный пример использования частиц — веб-страница “Deutser”. Посмотрите, как разлетаются элементы и возвращаются обратно в виде фигур и символов, реагируя на движения мыши. Результат реально гипнотизирует.
4. Обзорные панорамы
Rainforest (Тропический лес) от Regnskogfondet
Rainforest — это не просто панорамная картинка. С каждым шагом вы все дальше и дальше погружаетесь в джунгли с полноценным обзором на 360 градусов.
Здесь качественные трехмерные декорации, панорамы на весь экран. Однако, гораздо интереснее выглядит интеграция навигационных элементов в структуру “мира”.
5. Полноэкранное видео с интерактивными сценами и элементами
Christmas Express (Рождественский экспресс) от Milka использует набор видео-эпизодов разделенных интерактивными сценами.
Сайт Christmas Express также эксплуатирует идею полноэкранного видео, но насколько я понимаю, здесь нет ничего общего с WebGL.
Вы пройдете сквозь этапы создания рождественского письма. 10 минут на написание послания и сутки на доставку. Всё выглядит очень реально, детали совершенны и даже анимация пера точно следует начертаниям букв. Рождественское настроение обеспечено!
6. Анимационные рассказы
Трансляция идей через анимационный пересказ — это не ново. Но все же просматривается тенденция, которая со временем постоянно развивается. Интересно, что преобразования относятся не только к визуальному или техническому аспектам.
Для создания хорошей анимационной истории недостаточно разработать дизайн и найти исполнителя. Нужно набраться мужества, чтобы преодолеть корпоративные стереотипы и ограничения правообладателей. Результат будет выглядеть необычно, но сайты использующие такой прием, явно выделятся в мире корпоративных веб-страниц.
Годовой отчет от Danish Crown (крупнейший в Европе производитель свинины)
Годовой отчет за прошедший год от европейского производителя пищевых продуктов Danish Crown — это не скучные диаграммы и таблицы, к которым все привыкли. Страница отчета обращается к своим инвесторам на простом и смелом визуальном языке, где активно используется абстрактный юмор и смешные иллюстрации. Стилистика текста также выдержана в простых и ярких выражениях.
И вот, что говорят представители самой компании: «Это не выглядит заумным. Не выражает чей-то взгляд, не передает задачу, не усыпано терминами. Это не имеет отношения к среднестатистическим базовым ценностям – проявлению уважения и инициативы. По этой причине, мы это делаем. Проявляем уважение и инициативу».
World’s Easiest Decision
Такой вид повествования более распространен для веб-страниц организаций НПО. Так сайт Climate Reality Project “World’s Easiest Decision” представляет собой интерактивный комикс об изменении климата. Посетитель отвечает на простые вопросы и, в зависимости от его ответов, показывается фильм или предлагается подписать петицию.
Этот пример отлично демонстрирует, насколько удачно плоский дизайн совмещен с текстурами.
7. Линейная навигация
Несколько лет назад дизайнеры и разработчики делали все, что избежать линейной навигации. Основной упор делался на удобство меню и простоту перемещения по страницам ресурса.
Сейчас невозможно представить, что прокрутка на сайте считалась когда-то, как нечто неудачное (да это было). Хотя по прежнему можно услышать о мифической “above the fold” от некоторых разработчиков, клиентов или дизайнеров (прим. переводчика. “Above the fold” — часть страницы, которая видна пользователю без прокручивания).
В этой статье мы не выделяем лучшие сайты-визитки года. Давайте просто попытаемся найти некоторые новые и интересные способы, которые используют дизайнеры для создания линейной навигации на сайтах.
Портфолио видео от Julien Belmonte
Сайт кинорежиссера Жюльена Бельмонте (Julien Belmonte) содержит все его фильмы, а навигация по ним выполнена очень удачным способом. Фильмы перемещаются по горизонтали слева-направо и подсвечиваются один за другим. При этом используется подвижная красная линия, напоминающая временный маркер.
Здесь почти нет иной навигации. Разве что, в разделе “About”, где текст выглядит, как финальные титры любого фильма.
Francesco Bertelli online CSV
Франческо Бертелли (Francesco Bertelli) придумала инновационный подход для своего онлайн CSV. Используемый интерактивный календарь выглядит эстетично и является эффектным инструментом для демонстрации собственного профессионального роста.
Интерфейс позволяет быстро и легко ориентироваться, услужливо вычеркивая даты, которые вы уже исследовали. При выборе нужного пункта, экран с информацией распахнется на весь браузер. Такой подход концентрирует внимание посетителя сайта только на нужной ему теме.
8. Постраничная навигация
Этот тип навигации используется уже давно. В предыдущей статье “Тренды 2013 года” сайт Bagiga был примером таких типов навигации: “screen-after-screen” или “previous/next”.
Читая обычные книги, мы перелистываем страницу за страницу и этой привычкой стараются воспользоваться некоторые дизайнеры.
Manufacturer of Masterpieces
Производитель драгоценностей Imperiali Geneve использует аналогичный подход, как и Франческо Бертелли, когда внимание пользователя сосредотачивается на каждом отдельном экране, где рассказывается своя история. Сайт линейный, но без свободной прокрутки. Вы перемещаетесь от экрана к экрану без каких-либо посредников.
Здесь используются слайдовая навигация, с интерфейсными элементами начала и конца каждого экрана. Все это больше напоминает переходы между сценами фильма, нежели прокрутку сайта-визитки.
Музей Ван Гога в Амстердаме
Похожий тип навигации используется на сайте музея Ван Гога в Амстердаме. Номер страницы и их количество, стрелки в сочетании со слайдовыми переходами между экранами — полное ощущение, что вы читаете традиционную книгу.
Дизайнеры стремятся приблизиться к привычным нам решениям, что используют традиционные источники информации. Так какой же путь у веб-дизайн в будущем? Так рамка вокруг страницы — это старый прием, который тем не менее часто применяется.
9. Страница в рамке
Исследования показали, что эта тенденция становится все более популярной, нежели мы думали вначале. Подобные идеи в веб-дизайне развиваются давно, но никогда они не были выполнены с таким вкусом и изяществом.
Ginger Bread Branch (Пряничный филиал) от The PNC Financial Services Group, Inc.
Сайт посвящен первому в натуральную величину банку сделанному из реальных пряников. Он также интересен, как пособие для обучения экономики. На этом ресурсе не только используется рамка внутри окна браузера, но и постраничная навигация.
wloks
Вебсайт Wloks предлагает графические ассеты шикарным и уникальным способом. Вместо обычного электронного интерфейса стоковых фотографий, этот сайт использует интересный стиль печатных каталогов и росписей-обманок, с рамкой и меню элементов, размещенных в углах экрана.
Beer 34
Производители пива Beer 34 нашли свое уникальное решение для контроля экрана в различных разрешениях, черпая вдохновение из инфографики и истории. В тоже время, сохраняется вид старой этикетки. Сделано все достаточно просто и это наиболее очаровательный пример в рассматриваемом наборе.
10. Знакомимся с преобразованием CSS
Stand4humanrights
Stand4HumanRights предлагает вам присоединится к сообществу, добавив свое фото на социальную стену, которая выглядит как огромная изогнутая поверхность. Затем вы можете разместить пост в социальных сетях. “Социальной стена” может перетаскиваться и это выполнено на основе CSS transform. Смотрится интересно, однако, требует больших вычислительных мощностей и не столь чувствительно, как можно было бы ожидать.
Species In Pieces (Виды в кусочках)
Species In Pieces использует анимацию CSS для своей интерактивной выставки, которая предлагает для изучения 30 исчезающих видов со всего мира. Модели животных составлены из отдельных кусочков, которые складываются при переходе от одного объекта к другому (прим. переводчика. Для работы требуется браузер Chrome).
11. SVG-анимация
holohalo
На самом деле кажется странным, что существует так мало страниц использующих классическую технологию Scalable Vector Graphics ( SVG ) для отображения чего-то более интересного, нежели масштабируемые иконки для разных разрешений. Holo Halo — это исключение из правила и может служить источником вдохновения для дизайнеров, показывая, что можно сделать с SVG.
Итог
Без сомнений, ведущий тренд в веб-дизайне 2016 года — WebGL во всех его проявлениях: интерактивное видео, игры, анимация и визуализация данных. Виртуальная реальность, как ожидается, имеет большое будущее, но многое зависит от доступности устройств VR.
Другой общей тенденцией является акцент на стандартные медиа. Это относится к ручному рисованию, окрашенных и сканированных элементов наподобие проекта The Boat. Также видна тенденция создания веб-страниц, напоминающих печатные книги, журналы, наклейки, плакаты и комиксы. Это достигается с помощью постраничной навигации, использовании рамок и попыток рассматривать экран монитора как “страницу”, а не привычное “окно”.
И если вам удалось осилить эту большую статью, то получите маленький бонус — прокатитесь на Delahaye 165:
Вебсайт timeshift165
Разбираемся в трендах веб-дизайна / Habr
Несмотря на обилие в интернете разнообразных статей о направлениях веб-дизайна, разобраться в том, какой дизайн визуально устарел, а какой в тренде и почему, довольно нелегко. Для начала нужен глобальный взгляд на новейшую историю веб-дизайна, чтобы не запутаться в деталях. В этой статье рассказана краткая история визуальных направлений последних лет и даны их ключевые отличительные признаки.Речь здесь пойдет именно о визуальной эволюции веб-дизайна, с небольшой оглядкой на вехи в развитии технологий. Дело в том, что, хотя влияние технологий заметно, оно не является определяющим. Например, и скевоморфный, и «плоский» дизайн можно сделать, применяя один и тот же стек технологий.
Итак, поехали.
Первая декада XXI века — карамельный веб «2.0»
Выступая на конференции Future of Web Design в Hью-йорке, известный американский дизайнер Elliot Jay Stocks описал «то, что люди подразумевают под визуальным дизайном в стиле веб 2.0», следующими признаками:
• яркие цвета;
• бейджи «специальное предложение», налепленные на страницу;
• глянцевость, стеклянность, «карамель» в иконках и иллюстрациях;
• закругленные углы;
• градиенты;
• паттерны на фон с диагональными линиями;
• отражения.
Эти клише наполняли интернет в основном с 2003 по 2010. Часто технологии не очень поспевали за модой. Вспомним, например, верстку закругленных уголков, которая делалась с помощью картинок. Однако, как видно из этого же примера с уголками, мода подхлестывала технологии.
2011 — скевоморфизм
С начала второго десятилетия XXI века на смену «карамельному» тренду пришел истинно натуралистичный дизайн.
Скевоморфизм — это использование элементов дизайна очень похожих визуально на их аналоги в реальном мире. В промышленном дизайне, например, широко известна история о том, что двигатель в первых автомобилях поместили впереди, так как это казалось интуитивным: ведь лошади же спереди повозки.
Детально прорисованная трехмерная иконка «мусорная корзина» или «кожаный» фон приложения-календаря у iOS того времени — характерные примеры скевоморфизма. Существует и другое толкование этого слова, близкое понятию affordance, однако, здесь мы говорим о скевоморфизме именно как о визуальном стиле.
Черты скевоморфизма в вебе:
• трехмерные элементы;
• приглушенная, натуралистичная цветовая схема;
• элементы, выглядящие как ткань, кожа или другой физический материал, с реалистичными швами и текстурой;
• «тисненые» буквы;
• «занавесочки», ленточки, печати.
Параллельно этому тренду в моду входили и более фундаментальные вещи, связанные с развитием браузерных технологий, облегчением труда верстальщика и, скажем прямо, формированием вкуса у веб-дизайнеров, которые, наконец, окончательно стали отдельной профессией.
Это в моде и по сей день:
• интересная, разнообразная типографика;
• следование законам печатного дизайна в оформлении текста;
• большие фотографии на фон.
Надо сказать, что все это время законодателем мод был по сути один крупный бренд с инноваторским имиджем, угадайте кто? Ну конечно, Apple. Элементы веб 2.0, а затем и скевоморфизма впервые появились на их сайтах и приложениях.
Но в 2010–2011 году на сцену стиля вышли сразу два конкурента.
2010 — Windows Metro (он же Microsoft design language и Modern UI)
В 2010 году Microsoft представил общественности свой новый дизайн, радикально отличный от прошлого. Основной упор в стайлгайде был сделан на «плоские» элементы и типографику, в отличие от прежних, «иконочных» интерфейсов. Изменения преподносились как «по-настоящему цифровой дизайн».
Так как и Apple тоже в это время начал вводить элементы минимализма, это быстро стало трендом, захлестнувшим интернет.
Не в последнюю очередь огромная популярность «плоского» дизайна связана с техническими потребностями в эпоху стартапов и мобильных устройств. Как никогда важно стало быстро делать сайты и приложения, которые бы выглядели адекватно и на десктопе и на экране смартфона. Со скевоморфными элементами трудно сделать действительно responsive дизайн, а с плоскими — пожалуйста, и выглядит стильно.
2011 — Twitter Bootstrap
Twitter Bootstrap был представлен как фреймворк для облегчения жизни программистам фронт-энда, а по сути стал проводником нового стиля.
Легкость и визуальная аккуратность фреймворка сыграли немаловажную роль в его стремительном распространении. Но основной причиной было, конечно же, решение «под ключ» целого комплекса характерных задач фронт-энд разработки. То, что можно сразу получить и качественный код под все платформы, и хороший дизайн, привлекло тысячи разработчиков. А в интернете начались разговоры про то, что все сайты стали на вид одинаковые…
Однако существует мнение, что ни тогда, ни сейчас Bootstrap не являлся законодателем мод, а скорее их прямым отражением. В Bootstrap 1.0 применялись градиенты, больше было теней и другого ненавязчивого 3d, характерного для эпохи заката скевоморфизма.
Вот, например, как изменилось модальное окно c кнопками:
Bootstrap 1:
Bootstrap 3:
2012 — Flat Design
Скевоморфизм стал превращаться в ругательное слово, а маятник моды качнулся в другую сторону — в полную силу вошел тренд «плоский дизайн» со следующими визуальными признаками:
• минимализм;
• двухмерность, без теней и глубины;
• на первом плане контент;
• возврат ярких цветов.
Даже кнопка, для которой был традиционен affordance — приподнятая форма, похожая на форму физических кнопок, — стала плоским прямоугольником.
Продолжают активно развиваться тренды, ставшие модными еще в эпоху скевоморфизма:
• интересная типографика и ориентация на печатный дизайн;
• большие фотографии и даже видео на фоне сайтов.
2013 — борьба трендов
Накал страстей в разгар борьбы наступающего плоского и не сдающегося скевоморфного дизайна достиг апогея. Это стало одной из самых обсуждаемых тем в интернете не только среди дизайнеров. Аргентинское агенство In tacto даже выпустило на эту тему игру.
Агентство похвасталось успехами в известном видеоролике.
Тем временем, прогресс не стоит на месте и в 2014 году вышли два «визуальных языка», которые, возможно, решат исход борьбы.
2014 — Google Material Design
Подробнейший стайлгайд от Google впечатляет не столько новизной дизайна, сколько уровнем пиара и масштабом донесения до аудитории. Google действительно удалось стать законодателем мод в дизайне приложений, для которых предназначался стайлгайд. Однако очень быстро появилось и несколько фреймворков Material Design для веба, большая часть которых сделана не в Google (например, вот Material Design в Angular.js).
Как объяснил дизайнер John Weley на конференции Google I/O 2014, в противоположность подходу Microsoft, которые объявляли свой Metro “authentically digital”, Google хотели вернуться к реальному, «нецифровому» миру, найти натуралистичную, в чем-то даже скевоморфную метафору для интерфейса. Однако метафора, которую они выбрали, все же оказалась самым плоским, что было в физическом мире — это бумага.
Соответственно, почти все в интерфейсе выглядит и ведет себя, как бумага. Экраны — это листы бумаги, а на них — чернила. В дизайн вернулись тени, отбрасываемые, когда один лист располагается над другим. Снова появилась приподнятая кнопка, но теперь она не нажимается (не «опускается») при клике, а выдает эффект растекающихся чернил. Бумага, тем не менее, имеет и ряд нереалистичных свойств, например, у нее нет текстуры, а листы могут бесшовно соединяться и разделяться.
Стиль Google Material Design в целом поддерживает тенденции минимализма, использования ярких цветов и интересной типографики.
Из нового же он привел в моду следующее:
• возврат теней и глубины в дизайн;
• иконки используются много, они в целом плоские, но с тенями, складками и «глубиной»;
• анимации в стиле метафоры «бумажных листов».
Анимация впервые настолько адекватно поддерживает общую стилевую идею и практически выступает на первый план стайлгайда. Почти в каждом разделе присутствуют примеры с интересной и обоснованной анимацией.
2014 — IMB Design Language
В конце прошлого года компания IBM выложила в открытый доступ свой новый design language.
Как сказано в блоге IBM, вдохновляющей идеей для нового дизайна была аналогия с человеческими языками. Язык – это то, что позволяет людям общаться, понимать друг друга и вместе решать задачи. Подобным образом и визуальный язык – design language – призван помочь дизайнерам и разработчикам продуктов «заговорить на одном языке», и между собой, и с пользователями.
IBM Design Language в отличие от Google Material Design не дает рекомендаций по размерам отступов, а задает общефилософский хороший тон в дизайне. Например, есть несколько абзацев о золотом сечении и вариантах сетки, но нет никаких шаблонов и ограничений «вот так будет в стиле IBM, а вот так совсем нет», как это сделано в Material Design. Нежелание дарить ленивым готовые шаблоны авторы стайлгайда объясняют стремлением дать свободу новым идеям. На фоне разговоров о том, что все сайты и приложения стали одинаковыми, звучит заманчиво.
Иногда конкретные цифры и гайдлайны все же можно разыскать. Например, в разделе Иконографика есть следующая рекомендация: «не скругляйте уголки, тогда иконки будут иметь более строгий «научный» вид».
Сравните иконки Google Material Design
… и IBM Design Language:
В IBM Design Language большое внимание уделено акценту на пользователя и контент, а также опять-таки анимации. За основу концепции движения взяты бессмертные принципы диснеевской анимации. Кратко, но довольно емко рассказано, в чем секрет притягательности и стильности некоторых приемов. Даются интересные примеры, например, про то, как блок warning при появлении двигается тяжело, с замедлением, своей тяжеловесностью привлекает внимание и создает впечатление важности.
2015, что дальше?
Судя по акценту на движения элементов в двух нашумевших стилях 2014 года, анимация становится новым полем, на котором разыграется битва трендов.
И это понятно, ведь технологии сделали создание анимаций как никогда ранее легким. А в визуальном веб-дизайне сейчас, похоже, сложилась ситуация, когда что-то новое привнести трудно. Это ведет к тому, что законодатели стиля не пытаются резко реформировать «плоский дизайн», а перемещают акцент на анимации, чтобы сделать их своей узнаваемой «фишкой». Так что самое интересное нас ждет, конечно, впереди.
7 тенденций веб-дизайна в ближайшем будущем / Habr
Многие статьи пытаются рассказать о том, что сейчас в веб-дизайне считается крутым. Я попытаюсь зайти за очевидные рубежи и сделать предсказания на эту тему.1. Жесты вместо кликов
Мы забыли, как раньше было сложно прокручивать страницы. Приходилось тащить курсор к правому краю, чтобы пользоваться такой древней штукой, как полоса прокрутки. Если вы тогда уже были профессионалом, вы могли использовать колесо мышки, клавиши курсора или трекпад – но в этом вы обгоняли большинство пользователей.
В 2015 прокручивать проще, чем кликать. На мобильном можно делать прокрутку большим пальцем. А попасть точно в цель тяжелее – ровно наоборот по сравнению с десктопом.
В результате, всё больше сайтов будут построены на идее превосходства прокрутки над кликами. И конечно, именно это мы и видим.
Эта тенденция продолжится, поскольку мобильных устройств становится больше. На современных сайтах меньше мест для кликов, и больше прокрутки. Меньше ссылок, больше кнопок, больших кликабельных областей и высоких страниц, которые надо прокручивать.
Сайты, делящие статьи на несколько страниц, скоро усвоят это. Они превратятся в одностраничники, или даже, как TIME, в бесконечные страницы.
Пока неизвестно, появится ли веб на часах – но если да, то там он наверняка будет управляться жестами.
2. Свёрнутые меню отмирают
Прокрутка ничего не стоит, а устройства сильно отличаются в размере – поэтому свёрнутые меню уходят. Дизайнеры наконец-то могут не впихивать всё на верх страницы. Это ведёт к дизайну типа Medium – полноэкранные заголовки страниц, с контентом, который открывается только после прокрутки.
Используя высокие страницы, дизайнеры могут наполнять их большими красивыми картинками. В 2015 будет больше сайтов, использующих вертикальное пространство, и больше крупных картинок.
3. Пользователи ускоряются, сайты упрощаются
Сегодня любой подросток является экспертом по использованию веба. Даже начинающие умеют пользоваться вкладками браузера и жестом возвращаться на предыдущую страницу. В результате всё ускоряется, и пользователь становится менее терпимым. Если хотите вывести из себя спокойного человека, замедлите ему ненадолго интернет.
Сайты должны стать не только быстрее технически, но и проще для понимания. Задерживающие пользователя дизайны подобны сайтам, которые медленно грузятся. Простые дизайны проще окинуть взглядом. Проще увидеть, какой из этих дизайнов более новый – тот, от которого быстрее можно получить удовольствие:
Это основная причина смерти скевоморфического дизайна (копирования формы или внешнего вида предметов другими средствами) – пользователи более восприимчивы, менее терпеливы и много информации замедляет их.
Мобильные приложения опережают веб-сайты, предлагая минималистичные и красивые интерфейсы. Это потому, что минимализм лучше работает.
Плоский дизайн – это лишь начало. Тенденция идёт по направлению к немедленности и простоте.
4. Пиксели мертвы
На десктопе пиксель – это пиксель. Известно даже, сколько обычно пикселей в дюйме – 72 dpi. Теперь уже мало кто знает, что это такое.
В отзывчивом дизайне всё идёт к сеткам и процентам. Но остаётся ещё одна неохваченная тема: растровые изображения. Почти весь веб построен на изображениях с разрешением в половину экрана, и они не масштабируются. На ретина-дисплеях и в современных браузерах пришло время векторных картинок.
Это уже происходит с иконками, основанными на шрифтах и Material design от Google. Они идеальны для дизайнеров и современных браузеров.
Технологии уже есть, но профессиональным дизайнером нужно дать время на смену привычек, чтобы они могли делать сайты для высококачественных экраном. Когда экран среднего десктопа достигнет качества ретина, дизайнеры воспоследуют.
5. Анимация возвращается
Чтобы создать впечатление старого сайта, набросайте туда GIFок “Under Construction” и Flash-анимации. Но в современном мире анимация возвращается в новом виде. Плоский дизайн выглядит довольно уныло. Анимация помогает сайты выделиться и запихнуть больше информации в то же пространство.
Мобильные приложения поменяли ожидания пользователя. Они используют движение для передачи смысла, и сайты начинают делать примерно то же.
Технологии вроде CSS-анимации упрощают улучшение дизайнов без использования плагинов или проблем со скоростью и совместимостью. Веб-компоненты (о них ниже) ускорят этот процесс.
GIF-анимация вернулась и эффективно работает, её так просто создавать и делиться ею.
6. Компоненты – это новые фреймворки
Веб-технологии усложняются и становятся менее семантическими. Дизайнерам приходится писать сложный код на страницах для использования простых вещей, вроде включения в страницу Google Analytics или кнопки Facebook Like. Было бы проще, если бы могли написать что-либо вроде:
<google-analytics key=”UA-12345–678">
И это возможно с веб-компонентами, которые начнут распространяться в 2015 году. Google’s Material design уже пришёл к нам, и может послужить катализатором этого движения. Он обеспечивает анимацию и компоненты взаимодействия, взятые от приложений Android, с простыми тэгами вроде
Если оно приживётся, то на основе компонентов появится гораздо больше фреймворков. Возможно, Bootstrap 4.0?
7. Социальное насыщение и восход прямой электронной почты
Социальные сети пользуются большим успехом, но производители контента не так уж и счастливы. Проблема в насыщении. В Facebook пользователи видят лишь те из миллиардов постов, которые, по мнению сети, понравятся большинству пользователей. Со временем ваши посты видят всё меньшее количество людей. Эту проблему можно решить, как ни странно, заплатив Facebook.
Соцсети не умрут, но в 2014 многие заметные блоггеры вроде Тима Ферриса отвернулись от соц.сетей и сосредоточились на добрых старых емейл-рассылках. У емейлов есть преимущество – их увидит больший процент людей.
Я считаю, что эта тенденция усилится в 2015 году, вместе с веб-нотификациями (которые работают так же, как нотификации в мобильных приложениях).
Бонусное не-предсказание: CSS-формы
Эту крутую технологию заметят только дизайнеры. CSS shapes позволяют встраивать контент в формы, например, в круги:
Это круто, но пока браузеры не будут это гарантированно поддерживать, пожалуй, рискованно тратить на это время и делать две разных реализации дизайна для старых и новых браузеров. А кроме дизайнеров это никто и не заметит. Но это круто.
Чего ожидать в 2015
В 2014 мобильные приложения вытеснили десктопы, но основная масса веб-дизайнеров ещё не подтянулась. Большинство организаций заказывают веб-сайт, который хорошо выглядит на компьютере, а на мобильном работает уже во вторую очередь. В 2015 такая стратегия кажется непрофессиональной. Мобильники становятся основными веб-устройствами.
Плоский дизайн уже повсюду, но это не только плоские кнопки – главное, это более простые и быстрые сайты. Простота – это не мода, это будущее.
Всё более модно вставлять в посты анимацию, которая и выглядит качественно, и улучшает пользовательское восприятие.
Пиксели и скрытые меню с кликами уходят, уступая место прокрутке. Веб-компоненты облегчают создание сайтов, похожих на мобильные приложения.
Сейчас мы наблюдаем приход наилучших практик из мобильных приложений в веб. Со временем разница между приложениями и сайтами может полностью исчезнуть.
Тренды веб-дизайна 2019 — актуальные идеи • You Win Digital
Модный веб-дизайн — неотъемлемая часть работы специалистов, разрабатывающих необычные проекты для известных брендов и ведущих компаний. Новые идеи вытесняют устаревшие эффекты визуализации, ведь следование тенденциям — залог популярности веб-дизайна. В этой статье рассмотрим популярные тренды веб-дизайна 2019.
Современный веб-дизайн сочетает в себе привлекательность и простоту для пользователя сайта. Тренды веб-дизайна уже использовались ранее, но свою популярность завоевали лишь в этом году.
Тренды веб-дизайна
Рассмотрим популярные тренды дизайна сайтов этого года.
Минимализм
Имеет особое значение в дизайне сайтов: посетителю проще ориентироваться при минимальном количестве текста и инфографики. Минималистичный стиль характеризует индивидуальность бренда и поднимает сайт на первые позиции поисковиков. Плюс минимализма в веб-дизайне — «легкость» сайта и его адаптивность.
Навигация «под большой палец»
Распространенность смартфонов диктует правила веб-разработчикам при создании сайтов. Поэтому для мобильных версий дизайн сайта делают не только адаптивным, но и удобным для использования одним пальцем. Основные функции (скроллинг, ввод текста и расположение кнопок) должны быть легкодоступными.
Микро-эффекты
Пока пользователь находится на сайте, некоторые события создают определенное настроение. Они акцентируют внимание посетителя, например: оживление изображения при наведении на него курсора, оригинальный переход с одной картинки на другую, приятный звук при выполнении действия или анимация. Микро-эффекты создают присутствие некой мини-игры, располагающей посетителя сайта к взаимодействию. Это значит, что пользователь проведёт на сайте больше времени, что положительно скажется на SEO-оптимизации.
Параллакс
Один из популярных трендов веб-дизайна 2019. Его еще можно назвать – украшение со смыслом: завораживающий переход из одной части изображения к другой. Применим для web-ресурсов любого направления.
Плавные органичные формы
По сложившимся стереотипам сайты выглядят структурированно в виде прямоугольных или квадратных форм. Тренды дизайна сайтов 2019 разрывают этот шаблон ничем не отличающихся друг от друга страниц. Плавные и натуральные формы выделяют основные элементы сайта и придают глубину. У посетителя сложится впечатление доступности и комфорта.
Модные шрифты: необычная типографика
В течение последних 3-4 лет наблюдалось развитие тенденции огромной типографики. Но тренды веб-дизайна в этом году вышли на новый уровень. Описания, заголовки, ценники теперь цепляют внимание за счет непривычного по размеру кегля и необычного шрифта. И это не предел – концептуальность типографики в скором времени откроет еще больше неожиданных решений.
Split-screen
Разделенный на 2 части экран хоть и простой, но эффектный прием в дизайне. Такой метод сто́ит применять там, где требуется донести до пользователя одновременно два оффера или связать изображение с текстовым сообщением.
Видеоконтент
Тренды в веб-дизайне 2019 подразумевают акцент на видеоконтенте в соцсетях, так как это простейший способ донести информации до пользователя. Видеоконтент легко воспринимается, к тому же видео на сайте увеличивает его позицию в поисковой выдаче – это подтвердил Google.
Дудлы
Нарисованные вручную иллюстрации создают на сайте особую атмосферу. Чем небрежнее будут линии, мазки и надписи, тем интереснее это будет выглядеть на странице.
Чат-боты
Органично смотрятся на веб-странице и привлекают к себе внимание, улучшая дизайн сайта. Тренды этого года говорят о том, что в будущем боты превратятся в персонажей бренда.
2019 год интересен трендами веб-дизайна. Но помните, что каждая из этих идей самодостаточна и использование их всех может перезагрузить сайт и сделать его неряшливым. Мы поможем вам разработать продающий сайт с запоминающимся модным дизайном. Посмотрите примеры наших работ и убедитесь в этом сами.
Подборка невероятных сайтов веб-дизайн студий — Look At Me
В последнее время появилось невероятное количество удивительных сайтов дизайн-агентств. Интернет сильно влияет на наше создание и восприятие мира. Дизайнеры лидируют во влиянии на современный мир веб-дизайна и задают новые модные тенденции. Но даже новички веб-дизайна должны начинать с чего-то. В этой коллекции собраны 25 крутых сайтов веб-дизайн студий. Любому творческому человеку нужно иметь свое портфолио и тут вы можете почерпнуть несколько идей для своего собственного дизайна.
1. http://www.fabriziomichels.com.au/
Очень крутой одностраничный сайт с оригинальным дизайном.
2. http://www.adv.ru/
Необычный русскоязычный сайт веб-разработки. Порадовали необыкновенные заголовки и иллюстрации к ним, дизайнер постарался на славу.
3. http://liechtenecker.at/
Голубо-оранжевая цветовая гамма, стильный и современный немецкий сайт.
4. http://notamedia.ru/
Слайдер в виде ленты на главной странице является самым удивительным элементом сайта.
5. http://www.emotionslive.co.uk
Яркий сайт, эмоции просто зашкаливают от такого глубокого зеленого цвета.
6. http://webdesignerwall.com/
Все цвета радуги есть на этом сайте, в то же время, он не выглядит навязчивым и броским, приятная бежевая текстура и полет фантазии.
7. http://astronim.com/
Анимация в бирюзовом цвете на главной странице и забавные названия пунктов меню.
8. http://www.agima.ru/
Очень клевая анимированная панорама Петровки в формате flash при входе на сайт.
9. http://www.aic.ru/
Одностраничный русскоязычный сайт с горизонтальным перелистыванием страниц, интересные названия пунктов меню.
10. http://www.rzmota.com/
Красивый вид сверху на рабочее место дизайнера, приятная цветовая гамма и красивая галерея работ.
11. http://www.sitesoft.ru/
Этот сайт нельзя просмотреть полностью в окне браузера, нужно мышью перемещаться в какую-нибудь сторону, очень оригинальное решение.
12. http://www.tse-webdesign.be/
Доска и надписи мелом в шапке, пожалуй, изюминка этого стильного сайта. Нестандартные шрифты добавляют шарма.
13. http://www.nimax.ru/
Невероятно модный тренд в веб-дизайне — эскизы страниц с яркими дизайнерскими элементами.
14. http://www.lozoodivenere.it
При наведении мыши, слайдер просто взрывается яркими красками. Попробуйте!
15. http://www.lawebshop.ca/
Рисованные от руки красные элементы органично смотрятся на бежевом фоне.
16. http://icelab.com.au/
Голубой цвет и рисованные черно-белые объекты достаточно распространенная тенденция.
17. http://www.the-neighbourhood.com
В шапке сайта — последний веб-проект креативной студии дизайна.
18. http://smallstudio.com.au/
Действительно космический дизайн веб-студии.
19. http://www.studiobreakfast.be/
Ярко и креативно. Истинная любовь к дизайну.
20. http://www.creativespark.co.uk/
На этом сайте есть персонажи, их несколько, они меняются в слайдере и сопровождают вас на каждой странице сайта, куда бы вы не пошли.
Ниже мы представляем шаблоны для сайтов из категории «Веб-дизайн». Вы сможете найти уже готовое решение для своей студии.
21. http://www.motocms.ru/
Шаблон сайта наполнен яркими элементами, которые выдают его специализацию.
22. http://www.motocms.ru/
Изображение растянуто на весь экран готового сайта, такая опция будет очень полезна для цифрового художника или иллюстратора.
23. http://www.motocms.ru/
На белом фоне уютно разместились круглые пункты меню, готовый сайт можно полностью наполнить своим контентом и кастомизировать.
24. http://www.motocms.ru/
Приятная бумажная текстура и яркие оранжевые ленты, как элемент креативного дизайна.
25. http://www.motocms.ru/
Главная страница данного шаблона состоит из миниатюр работ из вашего портфолио.
Ваше мнение о представленных дизайнах или свои пример оставляйте в комментариях ниже.
Добро пожаловать в МотоДизайнБлог.