По материалам зарубежных сайтов, которым доверяют профессионалы
Базируясь на тенденциях 2013 года и прочитав большое количество обзоров, нам удалось скомпилировать, что же будет востребовано в WEB-дизайне 2014 года. Хотелось бы выделить две составляющие:
- Первое – это тренды, диктуемые развитием современных мобильных технологий. Данные тренды носят даже не рекомендательный, а обязательный характер. В первую очередь это касается адаптивной верстки сайта.
- Второе – это те самые модные предпочтения, комбинация из которых позволяет дизайнерам создавать уникальное и неповторимое.
1. Мобильные тенденции
- В первую очередь – мобильные устройства
- Любой сайт сейчас часто просматривается на мобильных устройствах, независимо от того, разработан он под них или нет. Поэтому, сайт должен быть рассчитан на работу с тачскрином, содержать большие удобные кнопки навигации и, ни в коем случае, не должен содержать сложные меню навигации, с которыми удобно работать только на настольном компьютере. Если вы не можете реализовать такую навигацию для мобильной версии, может быть вам не нужно её использовать на вашем сайте вообще?
Почему мы настолько сосредоточены на мобильной версии в первую очередь?
Не менее 60% активных пользователей интернета имеют смартфоны.
Например, на наш сайт заходит 25% людей со смартфонов и 10% с планшетов. - Отзывчивый (адаптивный) дизайн
- Любая страница и все элементы должны корректно отображаться на экранах гаджетов с разным разрешением. Они должны изменяться в размере, перемещаться по экрану и т.д. Размер шрифта контента также должен автоматически подстраиваться под разрешение экрана.
2. Дизайнерские решения
- Простота
- Простой дизайн позволяет упростить восприятие контента с помощью текстов и изображений.
- Светлые пространства
- Это помогает подчеркнуть важный контент на странице и заботиться о зрении пользователя
- Отказ от flash-технологий
- Компания Apple отказалась от использования flash и большинство сайтов последовали за ними. Вместо flash используйте CSS3 и HTML5.
3. Визуализация
- Параллакс
- Придает страницам эффект 3D, глубину и весьма оживляет восприятие, особенно при вертикальной прокрутке одностраничного сайта.
- Плоский дизайн
- Чистый визуальный дизайн, использующий цветовые решения. Для выделения элементов используется цвет, вместо причудливых элементов дизайна, таких как тени или градиенты.
- Блоки (Упорядочение)
- Pinterest , новый дизайн Facebook, Flickr показывают, как можно разместить огромное количество однотипной информации удобной для восприятия, разместив её блоками.
- Крупные изображения
- Крупные изображения позволяют правильно расставить приоритеты. Использование больших фоновых изображений тоже может грамотно подчеркнуть изображения внутри контента.
- Цвета
- Цветовая палитра сейчас имеет огромное значение, но дизайнеры не пришли пока к соглашению, какие цветовые комбинации наиболее популярны. Спросите заказчиков, какая гамма для них наиболее предпочтительна, и в этом может помочь генератор цветовой схемы Adobe Kuler.
4. Типографика
- Веб-шрифты
- Теперь мы больше не ограничиваемся 2-4 веб-безопасными шрифтами, а можем использовать загружаемые Google Fonts, выбрать интересные шрифты, которые на всех устройствах пользователей корректно отображаются через CSS. Использование красивых шрифтов помогает нам избавиться от ненужного количества изображений, что помогает сайту более эффективно индексироваться поисковыми системами.
5. Контент
- Видео
- Тенденция размещения видеоматериалов на страницах сайтов обусловлена тем, что теперь нет необходимости держать это всё на своем сервере, а просто брать из YouTube или Vimeo. Любопытство побуждает посетителей смотреть видео.
- Социальные сети
- Это отличный способ поделиться вашим контентом с окружающими и расширить аудиторию посетителей вашего сайта. Кнопки ссылок на социальные сети сопровождают каждую страницу сайта.
6. Умная Навигация (Юзабилити)
- Большие кнопки
- Это хороший пример. Кроме главного меню, используйте большие кнопки для призывов к действию – «Заказать», «Скачать» и т.д. Простота навигации снижают тревогу неуверенного пользователя.
- Вертикальная прокрутка
- Используйте меню навигации, которое остается на месте в верхней части страницы при вертикальной прокрутке вниз (так называемая плавающая навигационная панель). То же самое можно делать с вертикальными рекламными модулями, которые вам необходимо отображать как можно больше и дольше. Хорошее решение – одностраничный сайт с плавной вертикальной прокруткой.