Помните 2015? Apple Watch, новый iPhone 6S, и снова как будто в Парк Юрского периода. Кажется, что это было только вчера.
2 015 год оставил свой неповторимый стиль на всем, в том числе на веб-дизайне, который продолжает адаптироваться и в этом году к мобильным устройствам, тем самым обгоняя по популярности настольные компьютеры. Основываясь на моих собственных дискуссиях с проектной командой в UXPin, давайте рассмотрим десятку топ-трендов и подумаем как можно продолжить «пожинать» их преимущества в предстоящем 2016 году.
1. Минимализм
Минималистские сайты воплощают один из главных идеалов веб-дизайна в 2015 году: простоту. Оставляя самые основные элементы и убирая лишнее – позволяя вашему сайту выглядеть элегантно – что также уменьшает время загрузки – хорошее преимущество для мобильного браузера. И вдобавок, меньшее количество элементов означает более простой адаптивный дизайн.
Как поясняется в бесплатном руководстве «Тренды веб-дизайна 2015/2016» (Web Design Trends 2015 & 2016), минималистская эстетика работала вместе с продвижениями визуальных возможностей, что поощряет другие тенденций, такие как HD фоны.
В приведенном выше примере,Omega включает только то, что необходимо: языковые настройки, возможность расширения меню и логотип для возвращения на главную страницу. Это привлекает внимание почти исключительно к главной картинке (или 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 правилами анимации.
- Формат длинной прокрутки полагается на анимацию, чтобы создать видимость гладкой прокрутки.На вершине этого, анимации, вызванные прокруткой, создают более захватывающий и зрелищный сайт.
- Загрузочные экранные анимации дают пользователям своевременную оценку и развлекают их во время ожидания.
- Едва заметные анимации на фоне, если они не чрезмерно большие или отвлекающие, могут добавить немного живости визуально устаревшему дизайну сайта.
Бесплатные ресурсы
- CSS3 Animation Cheat Sheet – эта полезная коллекция готовых, играющих анимаций позволяет вам применять предварительно сделанные классы CSS к любому элементу, которому вы захотите.
- Web Animation – часто обновляемое руководство по синхронизации и времени для анимации на веб-страницах и интерфейсах.
- Interaction Design & Animations – бесплатное 80-страничное руководство обучающее взаимодействию с дизайнерскими методами, основанными на 47 примерах лучших образцов года.
5. Яркие цвета
В прошлом дизайнеры были ограничены 216 веб-совместимыми цветами, но теперь их миллионы, это продвижение стало доступным с появлением HD экранов.
Как поясняется в «Веб-дизайн трендах 2015 и 2016 годов», мы увидели рост ярких, живых цветов, совпадающих с тоном плоского дизайна, но эти «счастливые» цвета сочетаются с другими тенденциями также.
Цвета, привлекающие внимание, снижают вероятность того, что сайт будет выглядеть скучно – естественная слабость Минимализма. Когда они активно используются со шрифтами, цвета могут привлечь внимание к определенным словам или фразам. Кроме того, цвета выполняют важную функцию – повысить удобство: подумайте о картах, которые меняют цвет, когда они парят – очевидный индикатор интерактивности.
Советы
- Каждый цвет вызывает определенные эмоции, так что выбирайте правильные, чтобы соответствовать «личности» вашего продукта.
- Разберитесь в том, как теория цвета применяется в дизайне,прежде чем выбрать свою схему.
Бесплатные ресурсы
- ColourLovers – глобальное сообщество, демонстрирующее свои собственные «умные» палитры и обсуждающие теорию цвета во всех средствах массовой информации.
- Tint UI – выборщик цвета для копирования шестнадцатеричных кодов. Позволяет просмотр с помощью платформ (Material Design, IOS, и т.д.), брендов (Twitter, Firefox, и т.д.), или текущие тенденции.
- Design Trends: Vibrancy of Color – бесплатный путеводитель, обучающий методам использования цвета, основанный на 22 примерах лучших образцов года.
6. HD обои
Для большинства людей, владеющих устройствами высокой четкости, это был всего лишь вопрос времени, прежде чем этот тренд заявил о себе.
HD – это больше, чем 200 точек в 1 дюйме (dpi), в то время как стандартное определение 72 дюйма. Это позволяет изображениям со стандартным определением в виду, выглядеть блочно или размыто на HD устройствах, но HD изображения выглядят хорошо в SD. Это означает, что пользователи с 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 в настоящее время позволяют осуществлять полное взаимодействие, которое на самом деле стимулирует развитие бизнеса. Эта тенденция развилась с увеличением:
- Элементов, которые могут быть нажаты (или по ним можно провести)
- Всплывающие уведомления
- Использование инструментов персонализации (например, геолокации)
- Контроль над показательным содержанием
- Скроллинговая навигация
- Переходные и цикличные функции
Этот год также видел больше микро-взаимодействий, то есть звук «Дзинь», когда вы посылаете электронную почту, или анимацию, чтобы привлечь внимание к новому уведомлению.
Советы
- Знаковые элементы объясняют, как и что работает и делают взаимодействие легче. Подумайте о том, как икона гамбургер с надписью «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 – ресурс для проектирования карт для Google Material Design.
- Design Techniques: Cards & Minimalism – бесплатный путеводитель, обучающий картам IU и минималистским методам, основанным на 43 тематических исследованиях.
Итоги
Важнее, что вы применяете тренды, основанные на потребностях ваших пользователей, а не на желании быть модным. Не все эти тенденции будут подходить каждому сайту, поэтому всегда работайте с обратной связью от пользователя.
Если вы хотите узнать больше, свободное 185-страничное руководство Web Design Trends 2015 & 2016 рассматривает эти 10 методов, с более передовой практикой и вручную собранными 100 ссылками бесплатных ресурсов.
Читайте о том, как применять эти тренды, и посмотрите на них в деле в более чем в 160 примерах из таких сайтов, как Google, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas, и другие.
Высоких конверсий!
