10 Самых выдающихся трендов веб-дизайна 2015

Posted on by riasevastopol

Не забывайте 2015? Apple Watch, новый iPhone 6S, и опять как словно бы в Парк Юрского периода. Думается, что это было лишь день назад.

2 015 год покинул собственный ??неповторимый стиль на всем, а также на веб-дизайне, что адаптируетсяи в текущем году к мобильным устройствам, тем самым обгоняя по популярности настольные компьютеры. Основываясь на моих собственных дискуссиях с проектной командой в UXPin, давайте разглядим десятку топ-трендов и подумаем как возможно продолжить «пожинать» их преимущества в грядущем 2016 году.

1. Минимализм

Минималистские сайты воплощают один из основных совершенств веб-дизайна в 2015 году: простоту. Оставляя самые главные элементы и убирая лишнее – разрешая вашему сайту смотреться элегантно – что кроме этого сокращает время загрузки – хорошее преимущество для мобильного браузера. К тому же, меньшее количество элементов свидетельствует более несложный адаптивный дизайн.

Как поясняется в бесплатном управлении «Тренды веб-дизайна 2015/2016» (Web Design Trends 20152016), минималистская эстетика трудилась вместе с продвижениями визуальных возможностей, что поощряет другие тенденций, такие как HD фоны.

В приведенном выше примере,Omega включает лишь то, что нужно: языковые настройки, возможность расширения меню и логотип для возвращения на основную страницу.10 Самых выдающихся трендов веб-дизайна 2015 Это завлекает внимание практически только к основной картине (либо Hero image) шикарной продукции, по причине того, что нет вторых элементов интерфейса пользователя, с которыми тут возможно соперничать.

Рекомендации

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

Бесплатные ресурсы

  • Gallery of Minimal One-Page Websites – сайт, посвященный показу лучших одностраничных сайтов.
  • Best Minimalist WordPress Themes – хорошие стартовые площадки для минималистских шаблонов, не смотря на то, что и не все они бесплатные.
  • Design Trends: Elegance of Minimalism – бесплатный путеводитель, обучающий нужным приемам минимализма на базе 28 примеров лучших образцов дизайна этого года.

2. Долгая прокрутка

Маленькие экраны «приводят к» долгой прокрутке.

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

Долгая прокрутка трудится оптимальнеена сайтах с интенсивным мобильным трафиком либо с довольно часто обновляющимся содержанием, и менее действенна для сайтов с «тяжелыми» СМИ, такими как видео, каковые тянут время загрузки.

Рекомендации

  • Сложные меню навигации либо перескакивание с раздела на раздел защищает от дезориентированных пользователей, что есть неспециализированной проблемой прокрутки.
  • Нарисуйте «игривые» нюансы долгой прокрутки с эффектами, такими как прокрутки и параллакс, вызывающие анимации.
  • Избегайте негативных последствий SEO, следуя рекомендациям статей Moz и Quicksprout.

Бесплатные ресурсы

  • One Page Love – галерея лучших одностраничных сайтов, систематично обновляется.
  • «Apple Resurrects the Scroll Wheel» – статья TechCrunch разбирает, как Apple Watch может вдохнуть новую судьбу в веб-сайты с прокруткой.
  • How to Create a Parallax Website – учебник из двух частей, что преподает базы, а также программирование для параллакс-дизайна.

3. Новый Flat дизайн

Сегодняшняя плоская конструкция превратилась по собственной сути в альтернативу скевоморфизму. Новая, более узкая итерация плоской конструкции – Райан Аллен именует его «Flat Design 2.0» – предлагает больше шансов для процветания и мелких элементов:

  • заголовки и Осветительные блики
  • Градиент и / либо падающие тени
  • Больше значений для детализации

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

Рекомендации

  • Кнопки-призраки смогут быть использованы за пределами плоской конструкции. Их прозрачность «держит» внимание пользователя на фоновом изображении, что делает их популярным дополнением к Hero images.
  • Несложная графика плоского дизайна делает загрузку легче легкого.Это превосходно трудится на адаптивном дизайне.

Бесплатные ресурсы

  • Design Trends: Evolution of Flat Design – бесплатный путеводитель научит «плоским» способам, основанным на 18 примерах лучших образцов этого года.
  • 25 Flat Device Mockups – шаблоны для макетов для Flat дизайнов на разных устройствах.
  • 50 Flat Icon Sets – собрание Digital Synopsis по 50 плоским комплектам иконок, каковые возможно безвозмездно применять и ознакомиться.

4. Замечательные Анимации

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

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

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

Рекомендации

  • Анимации для приложений и интернета так же, как и прежде смогут воспользоваться Диснеевскими хорошими 12 правилами анимации.
  • Формат долгой прокрутки надеется на анимацию, дабы создать видимость ровной прокрутки.На вершине этого, анимации, вызванные прокруткой, создают более захватывающий и зрелищный сайт.
  • Загрузочные экранные анимации дают пользователям своевременную оценку и развлекают их на протяжении ожидания.
  • Чуть заметные анимации на фоне, если они не чрезмерно громадные либо отвлекающие, смогут добавить мало живости визуально устаревшему дизайну сайта.

Бесплатные ресурсы

  • не сильный3 Animation Cheat Sheet – эта нужная коллекция готовых, играющих анимаций разрешает вам использовать предварительно сделанные классы CSS к любому элементу, которому вы захотите.
  • Web Animation – довольно часто обновляемое управление по синхронизации и времени для анимации на веб-интерфейсах и страницах.
  • Interaction DesignAnimations – бесплатное 80-страничное управление обучающее сотрудничеству с дизайнерскими способами, основанными на 47 примерах лучших образцов года.

5. броские цвета

В прошлом дизайнеры были ограничены 216 веб-совместимыми цветами, но сейчас их миллионы, это продвижение стало дешёвым с возникновением HD экранов.

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

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

Рекомендации

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

Бесплатные ресурсы

  • ColourLovers – глобальное сообщество, демонстрирующее собственные «умные» палитры и обсуждающие теорию цвета во всех средствах массовой информации.
  • Tint UI – выборщик цвета для копирования шестнадцатеричных кодов. Разрешает просмотр посредством платформ (Material Design, IOS, и т.д.), брендов (на данный момент, Firefox, и т.д.), либо текущие тенденции.
  • Design Trends: Vibrancy of Color – бесплатный путеводитель, обучающий способам применения цвета, основанный на 22 примерах лучших образцов года.

6. HD обои

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

HD – это больше, чем 200 точек в 1 дюйме (dpi), тогда как стандартное определение 72 дюйма. Это разрешает изображениям со стандартным определением в виду, смотреться блочно либо размыто на HD устройствах, но HD изображения выглядят прекрасно в на данный момент. Это указывает, что пользователи с SD дисплеями не увидят отличия – но те с HD, непременно, увидят.

Рекомендации

  • Обои устройств в большинстве случаев не соответствуют пропорции камер 1:1.5, исходя из этого нужно будет принять активное участие в «обрезке».В другом случае, вы не станете осуществлять контроль, что урезали, а что покинули.
  • Масштабируемая векторная графика (SVG) передает образы, применяя точки и линии;растровые форматы (.jpg, .png, .gif) трудятся пиксель-в-пиксель. Применяйте SVG для новой графики, и сохраните растровые форматы настоящих изображений и видео, по причине того, что они имеют фиксированное число пикселов сначала – вот из-за чего так принципиально важно, «захватить» СМИ в HD сначала.

Бесплатные ресурсы

  • Improving Image Quality on the Retina Display – советы по отбору HD дисплеев, а также применение запросов CSS медиа.
  • Browser Shots – онлайн инструмент для тестирования разрешения экрана возможностей браузера и вашего сайта.
  • 20 HD Blurred Background Sets – коллекция бесплатных размытых HD обоев.

7. Ясные фотографии

Благодаря, в частности повышению экранов HD, веб-дизайн используетболее высокий уровень качества (а иногда и более художественное) фотографий.

Это стало самый разумеется с преобладанием основных изображений либо hero images – одиночные снимки, каковые заполняют целый фон. Hero images завлекают пользователей сходу, что делает их совершенными для landing и login страниц.

Рекомендации

  • Сочетайте заказные истоковые фотографии так, дабы стоковые фото кроме этого смотрелись как заказные – к примеру, сюжеты и совместимые темы.
  • Для бесплатных сток фотографий, попробуйтеUnsplash и Pixabay.
  • Поработайте с тем, как изображение воспринимается с цветными накладками.К примеру, желтое наложение на второе серое фото сделает его более оптимистичным.
  • Фотографии продукций в естественных условиях увеличивают продажи и больше, чем классические фотографии продукций, посредством создания контекста, дабы клиент имел возможность ощутить каков продукт в действительности.

Бесплатные ресурсы

  • «10 Pitfalls to Avoid When Using Stock Photography» – статья из Design Shack, дающая предупреждение о десяти распространенных неточностях сток фотографий.
  • TinEye Reverse Image Search – хороший инструмент для сток фотографии, что показывает все места с фото в Интернете.
  • «The Ultimate Guide to Beautiful DIY Photography» – управление для начинающих, дабы снимать собственные ??личные веб-фотографии.

8. Динамический шрифт

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

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

Рекомендации

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

Бесплатные ресурсы

  • Design Trends: Dramatic Typography – бесплатный путеводитель научит вас техникам работы со шрифтами, основанный на 21 примере лучших образцов года.
  • Awwwards Typography in Web Design Gallery – сайты-победители, выбранные для за собственную типографику – систематично обновляется.
  • «41 Best Free Web Fonts of 2015» – вместо просмотра тысячи вариантов, вручную выбранный перечень Elegant Theme, лучший в текущем году.

9. Полное Сотрудничество

Прогресс в HTML5, CSS, JavaScript, JQuery на данный момент разрешают осуществлять полное сотрудничество, которое в действительности стимулирует развитие бизнеса. Эта тенденция развилась с повышением:

  • Элементов, каковые смогут быть надавлены (либо по ним возможно совершить)
  • Всплывающие уведомления
  • Применение инструментов персонализации (к примеру, геолокации)
  • Контроль над показательным содержанием
  • Скроллинговая навигация
  • Переходные и цикличные функции

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

Рекомендации

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

Бесплатные ресурсы

Interaction Design Best Practices Volume 1 – бесплатное 109-страничное управление обучающее вневременным IXd методам и техникам, основанные на 33 тематических изучениях.
2016 IxD Awards – лучшая подборка сотрудничеств для IXd, хороший ресурс для новых и вдохновения идей.
Making and Breaking UX Best Practices – руководящие правила UX Booth на базе UX идеи и дизайна, лежащие за практикой.

10. Карточная схема

Завершает десятку еще один тренд, настроенный под мобильные устройства.

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

Рекомендации

  • Вся карта должна быть интерактивной, в отличие от простого изображения либо текстовых ссылок.Закон Фиттса говорит, что это облегчает сотрудничество.
  • Отрицательное пространство между картами, именуемыми «канавой», должны быть четко выяснены.Не заставляйте пользователей гадать, где границы.

Бесплатные ресурсы

  • How to Build a Card Interface with Sketch App 3 – учебник о том, как сделать простые карты, применяя Sketch (многообещающий дизайн приложение).
  • 10 Material Design Cards for Web in CSS and HTML – ресурс для проектирования карт для Гугл Material Design.
  • Design Techniques: CardsMinimalism – бесплатный путеводитель, обучающий картам IU и минималистским способам, основанным на 43 тематических изучениях.

Итоги

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

Если вы желаете определить больше, свободное 185-страничное управление Web Design Trends 20152016 разглядывает эти 10 способов, с более передовой практикой и вручную собранными 100 ссылками бесплатных ресурсов.

Просматривайте о том, как использовать эти тренды, и взглянуть на них в деле в более чем в 160 примерах из таких сайтов, как Гугл, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas, и другие.

Высоких конверсий!

Случайные статьи:

Тренды веб-дизайна 2015 и 2016 год. Научись делать красивые сайты!


Подборка похожих статей:

riasevastopol

More Posts