Веб-дизайн стремительно развивается и ежедневно появляется большое количество публикаций, посвященных новым техническим возможностям и требованиям, которые формируют тенденции.
Охотно делимся кратким обзором статей, размещенных на тематических зарубежных веб-сайтах о наиболее вероятных последних тенденциях в дизайне сайтов на 2015 год.
Текст переведен и адаптирован Генеральным директором компании «Global Media Group» Казанцевым Олегом.
1. Вертикальный скроллинг (прокрутка)
Поскольку смартфоны и планшеты становятся всё более популярными, вертикальный скроллинг становится привлекательнее обычного разветвленного меню, так как на мобильных устройствах для просмотра сайта гораздо удобнее использовать прокрутку, нежели тыкать пальцем в раскрывающееся меню.
Это особенно актуально на домашних страницах сайта, где разработчики пытаются разместить максимально возможное количество полезной информации для привлечения потенциальных клиентов.
В прошедшем году большой популярностью пользовались одностраничные сайты с вертикальной прокруткой. Это было удобно для сайтов небольших и средних компаний, сайтов-визиток.
Теперь всё большую популярность получают комбинированные сайты, объединяющие одностраничную и традиционную структуру с использованием длинных полос прокрутки. Вертикальная прокрутка полезна не только на домашней странице, но и на страницах продукции для изящного отображения большого ассортимента или описания разнообразных функций и опций продукта.
Использование изображений и анимированных элементов в массивных текстовых блоках делает полосу вертикальной прокрутки визуально привлекательной. Часто разработчики используют эффект параллакса (неравномерного смещения одних элементов относительно других) для придания большей выразительности и 3D-эффекта процессу прокрутки.
2. Повествование и интерактивность
Наличие потрясающего и уникального контента всегда крайне важно для вашего веб-сайта, а способность сформулировать его в виде историй с интерактивными элементами является большим преимуществом, т.к. позволяет поддерживать высокий уровень заинтересованности читателей. Интерактивные элементы с использованием анимации помогают презентовать содержание веб-сайта уникальным и привлекательным способом.
Здесь помогает технология поэтапной загрузки изображений lazyload (по мере вертикальной прокрутки), которая привлекательна внешне и не создает дополнительной нагрузки на сервер, что положительно сказывается на сокращении времени загрузки страниц сайта.
3. Отсутствие больших фоновых изображений в шапке сайта
Традиция последних нескольких лет - большие меняющиеся фоновые изображения в шапке сайта в виде слайдера, часто с анонсами главных новостей или акций, рекламными слоганами компании. Это видят большинство посетителей, приходящих на ваш сайт.
Некоторые разработчики/дизайнеры решили воспротивиться этой традиции, оставив большие заголовки, но делая их без сменяющих друг друга фоновых изображений.
Наше предположение - они не хотят следовать за общепринятой структурой с одной стороны, и пытаются увеличить скорость загрузки сайта с другой стороны. Сделанная со вкусом шапка сайта без ярких фоновых картинок, а лишь с использованием крупных шрифтов будет по достоинству оценена вашими потенциальными клиентами, так, как она лишена визуальной агрессии.
4. Анимированные фоновые изображения
Развитие технологий HTML5 и CSS3 позволяет практически полностью отказаться от Flash анимации, так нелюбимой разработчиками iOS, и встраивать анимированные изображения и элементы дизайна (например, всплывающие плашки с текстом, фоновые элементы, раскрывающиеся модули и т.д.) для привлечения внимания посетителей и улучшения юзабилити (удобства использования) сайта. Большую популярность набирает размещение фонового видеоролика на стартовой странице, позволяющее направить посетителей сайта в нужное эмоциональное русло.
5. Отказ от несущественных элементов дизайна в угоду простоте
Ключевая идея дизайна заключается в том, что работа завершена, когда все несущественные элементы макета удалены.
Мы полагаем, что в 2015 году эта идея будет преобладать, лишние элементы утомляют и отвлекают внимание посетителей, ухудшая юзабилити сайта.
К лишним элементам мы относим большое количество «тяжелых» изображений, сложную компоновку/вёрстку контента, многоцветные фоны и т.д.
Вместо этого мы рекомендуем выбирать чистый и простой дизайн сайта, с большим количеством свободного места, придающим легкость восприятия информации.
6. Сайты с контентом фиксированной ширины
Большинство веб-сайтов за последние несколько лет использовали «резиновый» принцип вёрстки, при котором контент заполняет всё окно браузера по ширине. Это оправдано при небольшом размере монитора до 17 дюймов.
На современных мониторах, имеющих значительно больший размер экрана, просмотр таких сайтов становится утомительным.
Поэтому, более привлекательными становятся сайты, у которых основной контент свёрстан по центру и имеет фиксированную ширину не превышающую 900 пикселей.
Боковые полосы вы можете использовать для размещения модулей, несущих второстепенную нагрузку.
При этом не стоит злоупотреблять и делать общее поле сайта шире 1300 пикселей.
7. Использование авторских профессиональных фотографий
Сегодня большинство веб-дизайнеров используют изображения и фотографии из ресурсов открытого доступа, реже из фотобанков.
Это значительно сокращает затраты на разработку, но катастрофически отрицательно влияет на уникальность вашего сайта. Кроме того, в дальнейшем вы можете столкнуться с проблемами авторских прав на изображения.
Согласитесь, что постановочные фото, сделанные профессионалом специально для вас, будут не только удовлетворять ваши пожелания, но и более точно отразят задачи, поставленные перед вашим сайтом.
А фото ваших сотрудников, размещенные на сайте, будут больше похожи на фотогалерею, а не на стенд «Их разыскивает полиция».
8. Трансформирующиеся модули и меню
Отзывчивый (адаптивный) веб-дизайн очень популярен в последнее время. Его основное преимущество – корректное отображение на всех устройствах, имеющих разное разрешение экрана. При этом, от разрешения экрана зависят не только размеры шрифтов, изображений, модулей. На многих сайтах при отображении на мобильных устройствах изменяется и внешний вид некоторых модулей.
На мобильных устройствах они изначально свёрнуты и разворачиваются по клику.
Это позволяет более оптимально использовать поле небольшого экрана для отображения максимального количества элементов сайта, без уменьшения масштаба отображения.
Другой способ – использование так называемого открыточного стиля, когда вся информация располагается в прямоугольных модулях, как это реализовано в Pinterest, и в зависимости от размера экрана, меняется количество этих модулей по ширине.
9. Скрытое главное меню
Уже общепринято на мобильных устройствах сворачивать главное меню сайта под иконку « » или « », а некоторые модули исключать при отображении на экранах маленьких размеров.
Скрытые меню станут видимыми, когда посетитель будет готов к дальнейшей навигации по сайту и кликнет по соответствующей иконке.
Это часто используется в веб-приложениях, приложениях для смартфонов и планшетов, поэтому посетители сайта не испытывают неудобства при навигации.
Это помогает сохранять дизайн сайта лёгким и функциональным.
10. Крупная типографика и прозрачные кнопки
Уже в 2014 году крупные размеры шрифтов стали популярны и мы не видим тенденций к изменению в ближайшее время.
В 2015 году, вероятно, большие заголовки и подзаголовки, станут еще более крупными.
Это помогает разработчику сконцентрировать внимание посетителя на самом важном, используя минимальные средства.
Прозрачные кнопки (не имеющие заливки основного поля, а состоящие только из рамки и надписи) выглядят минималистично, стильно и выигрышно смотрятся при размещении их на фоновых изображениях и видео.
11. Работа и скорость
Некоторые тенденции веб-дизайна 2015 года будут продиктованы потребностью увеличения скорости загрузки страниц и уменьшении нагрузки на сервер за счет снижения трафика (bandwidth).
Небольшая скорость загрузки в мобильных сетях вынудили проектировщиков и разработчиков обратить пристальное внимание на оптимизацию размеров изображений и программного кода, использующихся при проектировании сайтов.
Самый простой способ решения – минимализм интерфейса, отказ от «тяжелых» изображений и фоновых картинок.
К более изящному методу относится алгоритм постепенной загрузки изображений по мере продвижения по странице. Это увлекательный зрелищный процесс, пробуждающий охотничий инстинкт. Аудитория получает эстетическое и авантюристское удовольствие от просмотра.
Помните, что основная задача вашего сайта – не просто привлечение новых посетителей, а их конверсия в потребителей вашей продукции/услуги.