Меню

Основные тренды веб дизайна 2017-2018, 1 часть

Каждый год мы узнаем что-то новое о дизайне, и 2016 не стал исключением. После успеха прошлогодней статьи об основных трендах в дизайне мы решили осветить ситуацию на 2017 год, поэтому давайте начнем!

1. Полуплоскостный дизайн

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

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

Проект: Resourсe | UI/UX Tool for Web Services
Автор: Руслан Латыпов, LS Graphics, Антон Мишин, Валерий Гурков

Полуплоскостный дизайн - тренды веб дизайна Проект: Resourсe | UI/UX Tool for Web Services Фото
Проект: Плейлист слушателя Автор: Anzi
Полуплоскостный дизайн Фото Проект: Плейлист слушателя
Полуплоскостный дизайн Проект: Плейлист слушателя Фото

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

Синемаграфы – это не обычные гифки вроде тех, которые мы видим по всему интернету. Это статтичные изображения с отдельными движущимися элементами. Эта техника делает фото реалистичнее, вдыхая в них жизнь.

Синемаграфы - тренды веб дизайна от студии веб-разработки - Orbita Гиф
Синемаграфы - тренды веб дизайна от студии веб-разработки - Orbita Gif
Gif Синемаграфы - тренды веб дизайна от студии веб-разработки - Orbita
Синемаграфы - тренды веб дизайна от студии веб-разработки - Orbita Фото Город

3. Больше 3D

3D определенно движется вперёд, и мы ожидаем увидеть его отглоски во всех областях дизайна. Благодаря быстрому развитию VR / AR эта сфера развивается довольно быстро. Проект: LUV.IT Автор: Аарон Мартинеc
Больше 3D - тренды веб дизайна от студии веб-разработки - Orbita Фото
Больше 3D - тренды веб дизайна Проект: Открытые ежегодные награды Фото
Больше 3D - тренды веб дизайна от студии веб-разработки - Orbita Проект: Air Max ’17 Фото
Больше 3D - тренды веб дизайна Проект: NIKE F.C. | 3D Золотые мячи в реальном мире - Orbita Фото
Больше 3D - тренды веб дизайна Проект: бренд «Лучший ты» Фото

4. Анимация

Анимации в веб-дизайне становится все больше – это может быть gif, SVG, WebGL CSS или видео.
Анимация определенно стала одной из самых главных тенденций веб-дизайна в прошлом году, поэтому можете смело ее использовать.

Проект: Nickelodeon Kids Pick The President
Автор: Жан-Пьер ЛеРу

Анимация - тренды веб дизайна Проект: Nickelodeon Kids Pick The President Фото
Анимация - тренды веб дизайна от студии веб-разработки - Orbita Gif Проект: AR Virtual Fitness Coach App | AR
Проект: UI Collection in Motion Автор: Минь Фам
Анимация - тренды веб дизайна Проект: UI Collection in Motion Gif
Анимация - тренды веб дизайна Проект: ZH OURO-Rio 2016 Gif

5. Лендинговые страницы

В 2017 году мы увидим подъем лендинговых страниц благодаря их маркетинговому потенциалу и способности лучше таргетировать аудиторию.

6. Геометрические формы, узоры, линии и круги

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

Проект: Pfizer — Active and 50+ для New York Times
Автор: Юстина Стасик; Владимир Марчуков

Геометрические формы - тренды веб дизайна от студии веб-разработки - Orbita Фото
Геометрические формы - тренды веб дизайна Проект: брендинг агентства DRAP Фото
Геометрические формы - тренды веб дизайна от студии веб-разработки - Orbita Проект: брендинг агентства DRAP Фото

7. Смелые цвета

Используйте яркие цвета, чтобы заявить о себе. Материальный и плоскостный дизайн отлично сочетаются с ярким цветом. Вы можете использовать цветовую палитру Google для выбора и комбинации желаемых цветов. Проект: Edris – дизайн логотипа MiLo Автор: Лоредана Папп-Динея, Михай Балдеан, Milo Themes
Смелые цвета - тренды веб дизайна от студии веб-разработки - Orbita Фото цветовая гамма
Смелые цвета - тренды веб дизайна Проект: Edris – дизайн логотипа MiLo Фото
Смелые цвета - тренды веб дизайна от студии веб-разработки - Orbita Фото
Смелые цвета - тренды веб дизайна Проект: b2mach - Orbita Фото

8. Инновационная прокрутка и параллакс

Эта визуальная идеяотлично добавляет уникальный элемент на любой сайт. От многослойного параллакса до видео-параллакса — все возможно.
Встречайте многослойный параллакс D.ex. Этот продукт полностью является заслугой Milothemes под руководством Лореданы Папп и Михая Болдеана . Его можно купить на Envato Market / codecanyon.net.
Это плагин WordPress, который позволяет создавать красивые параллакс-секции с более чем одним слоем. Проявите креативность и комбинируйте слои как хотите. Мы привели 12 различных примеров, чтобы помочь вам с первыми шагами в красивом многослойном мире. Поиграйте со слоями.

Инновационная прокрутка и параллакс - тренды веб дизайна от студии веб-разработки - Orbita Фото

9. Переход цвета

Переходы цвета — одна из основных тенденций. Начиная с 2016 года и быстро развиваясь, даже такие крупные имена, как Instagram, решили изменить свои логотипы и изображения с одного тона на цветные переходы. От логотипов до кнопок или оверлеев картинок — этот тенденция тренд везде.

Переход цвета - тренды веб дизайна от студии веб-разработки - Orbita Фото

10. Мобильные версии (адаптивный дизайн)

2015 и 2016 годы ознаменовали значительное увеличение количества мобильных браузеров. Планшеты и смартфоны теперь в приоритете перед ПК, ноутбуками и планшетами в плане просмотра сайтов, и этот тренд будет развиваться. Любые сайты, не ориентированные на отзывчивый веб-дизайн, должны обновляться как можно скорее! Проект: адаптивная анимация сайта Автор: Muharrem Senyil
Мобильные версии (адаптивный дизайн) - тренды веб дизайна от студии веб-разработки - Orbita Gif