Сайт

Тренды сайтов 2018: как все было? – Plerdy

05.07.2023

Содержание

Тренды веб-дизайна в 2018 году

марта 20, 2018

Стильные и эффектные сайты привлекают посетителя с первых секунд просмотра. Но как сделать такой сайт самостоятельно? Делимся с вами шестью трендами в веб-дизайне, которые актуальны в 2018 году и которые можно легко воплотить в жизнь на платформе Vigbo.

Чистая типографика

 

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

Примеры красивого сочетания шрифтов. Источники: vedadsiljak.com, chocolatier-megeve.fr, verse-co.com, handsoneveryday.com

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

 

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

Эффектный логотип

 

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

 

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

Источники: culturainquieta.com, @whiteandsalt

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

Создание шрифтового логотипа в системе управления сайтом Vigbo

Лаконичный дизайн

 

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

 

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

Примеры сайтов с лаконичным дизайном: threegraceslondon.com, sansceuticals.com, marbury.co, jessicacomingore.com, heschung. com, kinfolk.com

Стильные фотографии

 

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

 

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

 

Рассмотрим пример поиска фото по запросу «Interior». Мы видим популярное фото, которое имеет много скачиваний на стоке и, соответственно, очень часто встречается на сайтах.

Одинаковые фотографии на четырех разных сайтах. Источники: dribbble.com, theme.pixflow.net, designhouse605.com, behance.net

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

Примеры фотографий по запросу interior на unsplash.com

Анимация

 

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

Источники: dribbble.com, behance. net

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

 

  1. Используем ресурс Giphy: загружаем ролик, обрезаем нужные кадры, сохраняем результат.

  2. Используем программу Photoshop: выбираем file (Файл) > import (Импортировать) > video frames to Layers (Кадры видео в слои). Выбираем нужную часть видео, сохраняем как файл gif (комбинация alt+ctrl+shift+s или file > export > save for Web). В модульном окне выбираем формат gif. 

 

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

Эффекты при загрузке контента

 

Анимационные эффекты при загрузке контента также цепляют внимание зрителя и впечатляюще смотрятся на сайтах. На сайтах Vigbo доступны несколько эффектов:

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

  • Эффект фиксации изображения. Картинки на странице остаются неподвижными при прокрутке.

  • Эффект плавного появления. Контент плавно загружается при прокрутке страницы.

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

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

А если возникнут вопросы, воспользуйтесь нашими руководствами или обратитесь к техподдержке Vigbo — мы всегда на связи!


Полезные и вдохновляющие статьи 2 раза в месяц.


Без спама и только по делу

Тренды в веб-дизайне в 2018 году — перевод статьи от Hubspot

Мы перевели статью из блога Hubspot — о трендах в веб-дизайне в 2018 году. Вообще она вышла ещё в январе, но в марте они её дополнили. Так что вдохновляйтесь. Веб-дизайн постоянно развивается. То, что выглядело современно и свежо, может в одночасье устареть, а ушедшие в небытие тренды — вновь вернуться в моду.Мы собрали список из 15 тенденций, чтобы подготовить вас к тому, куда грянет волна веб-дизайна.

1. Жирный шрифт

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

2. Синемаграфия

Синемаграфия — это зацикленное статичное видео или gif-файл, где часть картинки обездвижена. Это популярный способ добавить движения статичным страницам. Пример — сайт датского агентства CP + B Copenhagen, на котором гифка делает интересной простую страницу.

3. Брутализм

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

4. Насыщенный градиент

Градиенты были повсюду в 2017 году, и они остаются популярными в 2018-м. Главная страница на сайте агентства Y7K в Цюрихе показывает прекрасный пример того, как сделать двухцветный эффект свежим и современным.

Дизайн email-рассылок: полная инструкция

5. Яркие цвета в разных слоях

Расположенные зигзагообразно и наложенные друг на друга яркие слои добавят глубину и текстуру простому макету сайта, как видно на примере команды из Сан-Паулу Melissa Meio-Fio.

6. Только текст

Некоторые веб-сайты вообще убирают изображения и разделы навигации, опираясь только на несколько строк простого текста.Датское агентство B14 использует такой подход: на сайте описывается их цель и даются ссылки на работы. Это современный и не загромождённый подход к информации.

7. Иллюстрации

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

8. Ультра-минимализм

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

9. Duotone

Duotone — это монохромное изображение с добавленными поверх цветом или ярким градиентом. Этот эффект делает картинку сочнее и ярче.Эти упрощённые двухцветные цветовые схемы выглядят круто и современно, как в примере Australian Design Radio.

10. Смешивание горизонтального и вертикального текста

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

11. Геометрические формы и паттерны

Необычные формы и паттерны всё чаще появляются на сайтах и добавляют некоторую причудливость макету. Канадская дизайнерская студия MSDS использует смелые узорные буквы на главной странице.

Что будет, если сделать дизайнера менеджером

12. Шрифт Serif

Много лет разрешения экрана были ограничены, а у онлайн-шрифтов не было поддержки, и поэтому в борьбе за разборчивость и чистоту сайтов дизайнеры много лет избегали шрифтов с засечками. Теперь техвозможности стали шире, поэтому шрифты с засечками — важный элемент в 2018 году. Они никогда не выглядели так современно, как сейчас. На сайте The Sill заголовок serif добавляет изысканности и стиля.

13. Перекрытие текста и изображений

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

14. Натуральные формы

Прошли те времена, когда строгие макеты по сетке и острые края были обязательным атрибутом макета. В 2018-м будут модны изогнутые линии и мягкие натуральные формы. В примере из Neobi мультяшный фон добавляет благородства, индивидуальности и яркости несложному дизайну.

15. Рисованные шрифты

Пользовательские отрисованные вручную шрифты в последние месяцы появляются всё чаще. И не без оснований, ведь они добавляют картинке характера и обаяния. На KIKK Festival’s website созданный вручную шрифт стал причудливым якорем на главной странице.

Поделиться:

Полное руководство для дизайнеров

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

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

1. Компонентные системы проектирования

Если ваша компания еще не внедрила систему проектирования, скорее всего, вы это сделаете в ближайшие несколько лет. Согласно последнему отраслевому отчету Enterprise UX за 2017–2018 годы, 67% опрошенных в настоящее время создают свои приложения, если у них их еще нет.

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

MailChimp, созданный в соответствии с MailChimp Design System .

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

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

Как говорит Натан Кертис, «дизайн-система — это не проект, это продукт, обслуживающий продукты».

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

Что делает дизайн с практической точки зрения? Давайте посмотрим на систему дизайна Polaris, используемую Shopify. Они разбивают свою систему дизайна на четыре области:

Принципы продукта : Заявления о миссии и подходы к дизайну продукта, такие как ориентация продавца на первое место и акцент на доступность.

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

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

 

Система дизайна Polaris от Shopify.

Как создать дизайн-систему

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

  1. Создайте инвентаризацию пользовательского интерфейса : Просмотрите все свои продукты/веб-сайты и перечислите все используемые шаблоны проектирования. Исправьте все несоответствия, с которыми вы столкнетесь.
  2. Получите поддержку организации
    : Представьте свои выводы, чтобы привлечь всех остальных. Это помогает оценить количество часов проектирования и разработки, потраченных впустую на избыточную работу, а также упомянуть, как более оптимизированные продукты могут улучшить показатели NPS.
  3. Установление принципов проектирования: Какие принципы действуют в вашей компании? Объедините ответы в основной список.
  4. Создайте цветовую палитру : Стандартизируйте свою цветовую палитру, используя точные цветовые коды, и примите универсальное соглашение об именах
  5. Создайте типографскую шкалу : Точно настройте размер шрифта, толщину, высоту строки и т. д. и установите конкретные правила отображения текста.
  6. Реализовать библиотеку иконок и другие стили: Пересмотрите свой первоначальный инвентарь пользовательского интерфейса и сохраните выбранные значки и варианты дизайна.
  7. Начните создавать свои первые шаблоны : Проведите аудит своей библиотеки шаблонов, чтобы выбрать те, которые лучше всего отражают вашу компанию, ваши продукты и ваших клиентов.

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

GE Digital, построенный в соответствии с Predix система проектирования.

2.

Многоугольные формы и геометрические слои

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

https://www.anakin.co/

Стиль в основном основан на геометрии, либо с формами (как правильными, так и неправильными), либо с базовыми геометрическими узорами (сетки, плоскости). Давайте разберем его конкретные компоненты:

Простая геометрия

http://www.espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017

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

Жирные линии для привлечения внимания

http://www.mountaindew.com/nba/

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

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

Детализация

https://chop-chop.agency/

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

3. Тактильный дизайн

Тактильный дизайн имеет интересное происхождение: он вырос из принципов Material Design, но в то же время модернизировал старые тенденции скевоморфизма начала 2010-х годов.

В двух словах, Tactile Design делает объекты реальными в цифровом пространстве. Согласно руководству Google по материальному дизайну, «материал основан на тактильной реальности, вдохновлен изучением бумаги и чернил, но технологически продвинут и открыт для воображения и магии».

https://www.zennioptical.com/

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

Без границ

https://www.epicurrence.com/

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

Многослойная конструкция

https://www.apple.com/ios/ios-11/

Так же, как и Material Design, тактильный дизайн включает в себя несколько слоев для создания более реалистичного вида. Это означает много теней, чтобы различать слои и придавать немного больше реализма.

Целенаправленное движение и анимация

https://www.getprepd.com/

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

Подробная фотография

https://www. adidas.com/us/ultraboost-all-terrain-shoes/S82036.html

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

4. Сложный настольный/простой мобильный

Соперничество между настольными компьютерами и мобильными устройствами существует с момента появления смартфонов, но мы начинаем понимать, что они вовсе не соперники. Они действительно работают вместе. Согласно исследованию GO-Gulf, около 90% пользователей выполняют одну и ту же задачу на нескольких устройствах во всех возрастных группах.

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

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

Мобильные альтернативы для сложных взаимодействий

  • Замените заголовки видео кадрами из видео. Если вам нужно разместить видео на своем мобильном сайте, используйте ссылку на YouTube.
  • Не использовать эффекты наведения. Вместо этого сенсорные кнопки или элементы управления жестами могут скрывать/показывать информацию.
  • Упрощение анимированных эффектов. Они просто не работают так хорошо на мобильных устройствах. Например, Coach заменяет комбинированную графику слайдер-анимация для настольных компьютеров на анимированный gif для мобильных устройств.
  • Замените выпадающие меню меню-гамбургерами. Любите вы их или ненавидите, гамбургер-меню — это устоявшийся шаблон, который все уже знают, как использовать.
  • Используйте голосовую активацию, когда это возможно. Это становится все более популярным и может стать новой нормой через пару лет.
  • Пересмотрите цвета и фон. Мобильные устройства иногда требуют большей контрастности для сохранения удобочитаемости.

5. Современный ретро-дизайн

Даже New York Times признала, что в настоящее время веб-дизайн переживает эпоху ностальгии. Сегодня дизайн все больше и больше заимствует вкусы 9-го века.0-х, 80-х и 70-х годов. Давайте посмотрим, что привносит каждая из этих эпох:

  • 90-е: Время, когда дизайнеры изучали возможности цифровых платформ. Много анимации, цветов и движущихся частей, или же урезанный дизайн чистой информации.
  • 80-е : Пикселизация зарождающейся индустрии видеоигр смешивается с яркой неоновой культурой старинной моды и раннего MTV.
  • 70-е годы: Приглушенные цвета и смелая типографика — особенно психоделические шрифты — из тех времен, когда печатные СМИ были еще сильны.

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

Типографика старой школы

http://www.sbs.com.au/imyourman/

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

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

Экстремальные цвета

Home

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

Текстура и градиенты

http://thislandishovland.com/

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

Стиль видеоигры

http://mostdecisivegame.com/

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

6. Простые домашние страницы

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

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

Минимализм

https://evernote.com/

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

Семейство плоских моделей

https://www.mint.com/

Flat, Почти Flat и Flat 2.0 — похожие, но с явными отличиями — все они хорошо работают для упрощения домашних страниц. Как и в минимализме, они уменьшают количество отвлекающих факторов и используют цветовые акценты, но плоский дизайн более снисходителен к детализированным визуальным эффектам, таким как HD-изображение.

Тонкие анимации

Home

https://www.ditto.com/

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

  • автоматизированные анимации, которые движутся по фиксированному расписанию
  • анимации на основе триггеров, которые перемещаются, когда пользователь щелкает или прокручивает

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

Красивая фотография и видеосъемка

http://www.casangelina.com/

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

Приоритет читабельности

https://digiday.com/

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

  • Размер текста выше среднего (>16 pt для основного текста).
  •  – преувеличенная высота интерлиньяжа или строки (в 1,75 раза больше размера текста).
  • негабаритные желоба.
  • Цвет текста
  • контрастирует с фоном.
  • 90 066 изображений и выносок по центру, поэтому длины строк остаются одинаковыми.

Заключение

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

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

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

Нашли это полезным? Поделиться с

15 тенденций веб-дизайна в 2018 году (+1 бонус) | Рох𝔦т Кр․ | Muzli

Опубликовано в

·

Чтение: 7 мин.

·

20 января 2018 г.

Вы дизайнер, ищущий вдохновение и тенденции? Тогда вы пришли в нужное место.

Здесь я собрал более 15 тенденций в мире веб-дизайна. Взгляните 👀

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

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

Как вы уже знаете — « Первое впечатление длится дольше ».

Project: Rem by Alim Maasoglu

Вы можете почувствовать мою любовь к Негативным пространствам и в моей работе.

Дизайнеры опережают 🥊 Фильмы в футуристическом дизайне.

Просматривая лучшие проекты, я ежедневно натыкаюсь на работы, демонстрирующие отличные технологии или визуализацию данных. Точки данных выросли в 20 раз за последние 2 года, что затрудняет анализ. Но теперь у нас есть решения 🏖 благодаря JS.

Проект Kepler.gl от Uber Design (Команда: Дизайнер данных: Джинглу Ли)

Изображение передает сообщение, которое стоит тысячи слов . Вместе с тем они экономят место и вызывают интерес пользователей.

Визуальные изображения обрабатываются в 60 000 раз быстрее, чем текст!

Люди запоминают 10% того, что слышат, 20% того, что читают, 80% того, что видят и делают!

Чтобы убедить вас, вовлеченность на одного подписчика в Instagram в 58 раз выше, чем на Facebook.

Seet Эдди ЛобановскийGOT OPEN — Теннис Игра престолов Лена Варгас Афанасьева

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

Более того, покупатели на 85 % чаще покупают продукт после просмотра его демоверсии.

Если вам нужен пример, посмотрите канал Invision на YouTube.

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

Прежде чем приступить к делу, прочтите «Дизайн с использованием света и теней» от Canva Team

Flyknit Lunar 3 | Заставило тебя выглядеть👁 255 | Поживи еще немного.
Автор: Каллум Нотман | STUDIOJQ

Вы можете использовать тени и цвета (с небольшими вариациями) для следующего:

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

Внимание: Не используйте слишком много теней.

В 2018 году мобильный 📱 лидирует 🎢. Google переходит к поиску Mobile-first. Веб-разработчикам теперь удобно работать с адаптивным веб-дизайном. Теперь вы можете увидеть это удобство и в дизайне логотипа. Спасибо Google.

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

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

Принцип мультистабильности .

Вы можете видеть только одну вещь за раз. Никаких исключений не допускается.

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

🧞‍♂️ Отрицательные пробелы — это пустые пространства вокруг или между содержимым. Он может быть любого цвета.

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

Источник: Negative Space — Википедия

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

Вы поняли, это не что иное, как ваш продукт для продажи с оптимизированным CTA.

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

Фокусные точки

Точки интереса, акценты или различия, которые захватывают и удерживают наше внимание.

Microsoft: Hololens Богдана Кононца

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

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

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

Общая судьба (Синхрония)

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

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

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

Они повсюду — лично мне они нравятся. Они отличаются от анимации. Мне трудно объяснить разницу, вы можете увидеть пример ниже.

на базе искусственного интеллекта — запланируйте встречу с Johny vino™

По словам Дэна Саффера, дизайнера и автора книги Микровзаимодействия: проектирование с учетом деталей основная задача.

Лучший пример — средний хлопок 👏. Нажмите на нее 50 раз, чтобы увидеть микровзаимодействие. 💗

Микровзаимодействия также можно использовать для создания высокодинамичных пользовательских интерфейсов. Пользователю не нужно посещать и прокручивать страницы.

Градиенты вернулись 🔙: Спустя долгое время снова в сети. Градиенты 2.0 с различимыми цветами становятся популярными.

Вы можете увидеть их везде, от Spotify до iPhone X 🤩.

Nike Free Design от Лео Нацумэ

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

Веб-дизайнеры превращают типографику в инструмент для создания захватывающих инновационных произведений искусства. В 2018 году веб-дизайн не вращается вокруг нескольких опечаток. Используется комбинация из 5–6 опечаток.

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

Scenery Illustration by Willie.H

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

Каждая секунда задержки снижает удовлетворенность клиентов на 16%, а снижает продажи на 7%.

Какая связь между скоростью и фоном частиц?

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

Исследование Digital Agency by Surja Sen Das Raj

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

Split fold Дизайн для блога от Divan Raj

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

Одноцветные значки легко читаются.

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

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

Когнитивный психолог Джером Брунер предлагает

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

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

Выбор носителя за вами.

Персонаж и иллюстрация от Seung Uk Hong.

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

Режим чтения в браузерах использует CSS печати для отображения содержимого. Лучше добавьте его в свой список юзабилити-тестов.

Авторы и права: Я хотел бы лично поблагодарить всех дизайнеров, вовлеченных в индустрию и сообщество. Особенно на Behance и Dribbble для предоставления примеров.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *