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

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

·

·

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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