10 трендов веб-дизайна в 2015 году (Перевод)
Заказать обратный звонок
+7 (495) 278-08-54 Москва
+7 (812) 670-07-40 Санкт-Петербург

Новости

10 трендов веб-дизайна в 2015 году (Перевод)

Лера Майорова

Веб-дизайн растет и развивается с каждым годом. С каждым днем появляется все больше интересных дизайнерских решений. Можно только представить, что еще такого придет с течением 2015 года, учитывая тренды, которые были предсказаны в 2014. Многие тренды будут сопровождать нас весь 2015 год (а возможно и 2016), и самое время посмотреть, какие именно.


1.Сайты с длинным скроллингом – Лонгриды   
Screen-Shot-2014-12-17-at-3.32.16-PM-520x289.png
Не прошло незамеченным то, что большинство появляющихся новых сайтов, как правило, довольно длинные при скроллинге вниз страницы. Так как мобильные телефоны становятся все более популярными, выбирать скроллинг в качестве средства просмотра контента, вместо перехода по ссылке, становится привычнее. Особенно это касается главных страниц  
 
В поиске информации пользователю проще скроллить вниз по странице, чем постоянно кликать, чтобы найти интересующее.  
 
Главные страницы это не единственное место, где можно увидеть лонгриды (лендинги, одностраничники). Когда лонгриды становились популярными, польза от скроллинга увеличилась и появилась на других страницах сайта, отличающихся от лендингов, например, на странице «О нас» и даже на карточке товара в качестве средства элегантно показать широкий ассортимент каталога.
 
В качестве примера, страница iPhone 6 компании Apple демонстрирует тренд на сайты с длинным скроллингом вне домашней страницы. Страница сделана в виде лонгрида с Iphone 6 в центре внимания, донося до посетителя все особенности и характеристики продукта.  
 
В дополнение на сайте присутствует мягкая анимация, производящая приятное впечатление от скроллинга.

 

2. Повествование и интерактивность  
Screen-Shot-2014-12-17-at-3.36.20-PM-520x289.png
 
Отличное содержание сайта всегда является решающим моментом, а возможность рассказать историю в этом содержании это еще один большой плюс.  Веб-дизайн 2015 года делает акцент на рассказе и историях как средстве передачи контента сайта. Так, например, сайт Спейс-Нидла Space Needle’s website (самая узнаваемая достопримечательность на северо-западе США, смотровая башня) красиво рассказывает факты о Спейс-Нидле используя рассказ и дизайн, который помогает повествованию (а также идет в соответствии с длинным скроллингом, о котором упоминалось выше). 

Screen-Shot-2014-12-17-at-3.40.32-PM-520x289.png
 
Сайт Space Needle демонстрирует еще один тренд - интерактивность. Веб-дизайн становится все более интерактивным и анимированным, чтобы помочь донести содержание привлекательным и уникальным образом.  
 
Интерактивность, соединенная с анимацией, и использованная в веб-дизайне―если сделано со вкусом―может принести вашему сайту эффект восхищения.  
 
Например,  Impossible Bureau’s website очень интерактивный, он реагирует на ваш скроллинг и нажатия подсвечиванием большого количества различных элементов (в отличие от обычных кликов)
 


3. Большие изображения на фоне
Screen-Shot-2014-12-17-at-3.41.15-PM-520x288.png
 
В последние несколько лет этим трендом являются большие изображения на фоне хедера, часто с большим текстом сверху. И это первая вещь, которую видит большинство посетителей, попадающих на сайт.  
 
И как можно устоять от массы, которая выбрала большие изображения на фоне трендом? Только если сделать наоборот.
 
Некоторые сайты решили выступить против этого тренда. Они сохранили большие хедеры, но избавились от огромного изображения.  Я думаю, дизайнеры не просто не хотели повторять этот тренд, а учитывали производительность и скорость загрузки их сайта (тренд №10 статьи), как причину избежать большие изображения.  
 
The New Wave Company’s site наглядно это демонстрирует. Он имеет огромный хедер, приветствующий посетителей сайта и большой текст, размещенный в центре страницы. Единственное чего в нем нет, это большого изображения на фоне.
Сделано со вкусом и не похоже на другие трендовые сайты с большим изображением на фоне.   



4. Удаление несущественных элементов дизайна для упрощения

Screen-Shot-2014-12-17-at-3.41.56-PM-520x289.png 
Существует мнение в дизайне: дизайн считается завершенным, когда удалены все несущественные элементы дизайна. 2015 год осуществит многие из этих мнений, так как сайты ищут пути упрощения дизайна именно способом удаления несущественных элементов.
Упоминаемый в пункте №3 сайт The New Wave Company’s site пошел по такому принципу, выбрав фон без большого изображения на нем.  
Другой хороший пример тренда на избавление от несущественных элементов дизайна для упрощения сайта это сайт Rareview Digital Agency, который также не имеет огромного приветствующего изображения на фоне хедера.
Дизайнеры практически полностью ликвидировали некоторые решения, которые можно увидеть на большинстве сегодняшних сайтов (фоновые цвета, большое количество картинок, сложную верстку).  
Вместо этого команда Rareview Digital Agency выбрала простой и чистый дизайн сайта, который выделяется среди массы нагроможденных дизайном, картинками и цветом сайтов.  
 


5. Сайты с фиксированной шириной
Screen-Shot-2014-12-17-at-3.42.34-PM-520x289.png
Многие сайты за последние несколько лет стали использовать "диапазон ширины" или фиксированную ширину: 100% элементы дизайна, так чтобы такие объекты, как картинки и блоки визуально занимали весь экран браузера. До того, как этот тренд стал популярным, многие сайты имели фиксированную ширину и центрировались на странице. С обеих сторон можно было сказать, где заканчивается сайт.  
Похоже, тренд на фиксированную ширину пытается вернуться, правда уже в современном обличии. Вместо сайтов с контентными блоками, уходящими далеко за пределы экрана, выбирают сайты с фиксированной шириной, которые, в свою очередь, сохраняют контентную часть в центре экрана.  
Сайт Michele Mazzucco демонстрирует этот тренд. Если просматривать сайт на мониторах шириной больше 1350 пикселей, можно заметить, что контент (и фоновые цвета на соответствующих блоках) заканчивается с левой и правой стороны каждого раздела.
Это обеспечивает акцент внимания на контент сайта и выступает против нефиксированной ширины.  
 


6. Профессиональные высококачественные фотографии
Screen-Shot-2014-12-17-at-3.43.10-PM-520x289.png 

Стоковые изображения все еще имеют место в дизайне, но для большинства новых сайтов, они отошли на второй план из-за использования профессиональных фотографий высокого качества, и производятся для других сайтов и других целей. Использование профессиональных фотографий ставит ваш дизайн на ступеньку выше, чем простое использование стоковых изображений, и делает сайт уникальнее, просто потому, что таких фотографий нет больше ни у кого, кроме вас.
В качестве примера Grain and Mortar. Особенностью сайта является профессиональная фотография, использованная в хедере. Это придает особый привлекательный эффект, потому что вы видите реальных людей на фоне сайта.
 
Речь идет о таких страницах, которые смогли очень ярко выделиться благодаря профессиональным фотографиям на фоне.
 


7. Всплывающие/скользящие меню, используемые в мобильных приложениях
Screen-Shot-2014-12-17-at-3.43.53-PM-520x288.png 
Адаптивный веб-дизайн появился сравнительно недавно. Вплоть до недавнего времени акцент в дизайне был сделан на то, чтобы сайт превосходно смотрелся на больших мониторах и всего лишь хорошо на планшетах и мобильных устройствах. Адаптивный дизайн сильно продвинулся вперед, заставив сайт в любом случае смотреться отлично на разных устройствах.
Благодаря этому прогрессу, мы видим такие элементы дизайна, которые используют для того, чтобы они работали на мобильных устройствах и реализовывали ширину сайта.
 
Например, на сайтах 24ways и Rawnet реализована идея использования адаптивного меню и меню из мобильного приложения для всего сайта, а не только для устройств с маленьким экраном.
Что касается этих двух сайтов, для вертикального меню они выбрали либо левую, либо правую сторону сайта (вместо типичного горизонтального меню сверху страницы), которая работает больше как всплывающее/скользящее меню – техника, взятая у мобильных приложений и адаптивного дизайна для маленьких экранов.



8. Скрытое главное меню
Screen-Shot-2014-12-17-at-3.45.01-PM-520x289.png
Так же, как и всплывающие/скользящие меню, в этом году распространены сайты, которые скрывают главное меню, когда пользователь впервые заходит на сайт. Эти скрытые меню становятся видимыми только тогда, когда пользователь начинает движение по сайту и кликает по соответствующей иконке.
Это также техника адаптивного дизайна, которая появилась для того, чтобы перенести дизайн сайта с большого экрана на маленький, и чтобы смотреть и пользоваться этим сайтом было приятно в дальнейшем.  
Отличный пример это новый сайт Brian Hoff Design.  На нем используется иконка «гамбургер» в правом верхнем углу сайта для того, чтобы спрятать главную навигацию, пока посетитель не кликнет по ней. Такое свойство сформировалось за последних пару лет посетителями, использующим веб-приложения и приложения на своих телефонах и планшетах, так как многие из этих приложений используют похожий режим.
Brian Hoff взял и использовал этот метод на своем сайте, не обращая внимания на ширину экрана для того, чтобы сохранить дизайн сайта чистым и функциональным.



9. Крупный текст
Screen-Shot-2014-12-17-at-3.45.34-PM-520x288.png 
В 2014 типографика была очень важным элементов в дизайне сайта. 2015 год эту тенденцию продолжает. Мы продолжаем видеть большие хедеры и кегль становится еще больше. Я имею ввиду настолько больше, что буквы увидел бы даже самолет, пролетающий над землей (не настолько большой, конечно, но вы поняли к чему я).
На Tiny Giant’s website вы видите очень крупный текст сразу, когда открываете страницу. Это производит особое зрительное впечатление, которое вряд ли будет пропущено.
Большой текст в 2015 году это, скорее всего, ключ к способу усилить зрительную иерерхию страницы, гарантировав чтение большого текста на странице в первую очередь, потому что это именно то, что захватывает наше внимание первым. Сайт Tiny Giant сделал это на отлично.


10. Эффективность и скорость
Некоторые тренды в дизайне были вызваны необходимостью заставить сайты загружаться быстрее и потреблять меньше трафика. Большинство трендов, обсуждаемых в этой статье, более, чем вероятно появились из-за необходимости уменьшить размер сайта и найти способы его быстрой загрузки для тех, кто использует мобильные телефоны или планшеты, или для тех, у кого небольшая скорость интернета.
Дизайнеры сайтов и разработчики начинают все более остро осознавать важность ширины сайта и того, как посетители взаимодействуют с ним. Адаптивный веб-дизайн помог выявить эти проблемы. Такие случаи, как медленное интернет-соединение (мобильный, либо домашний интернет) и тип устройства вынуждают дизайнеров и разработчиков уделять большое внимание своим файлам и сайтам, насколько быстро эти сайты загружаются при разной скорости интеренет-соединения, и помнить о пользователях и их ситуациях с ограниченным количеством скачиваемых данных.
Не будет сюрпризом и то, что необходимость становиться быстрее и функционировать безупречно без задержек во времени будет управлять дизайн-решениями на многих сайтах, выпущенных в 2015 году.

Оригинал статьи: 10 Web design trends you can expect to see in 2015
 



Написать комментарий

Ваш комментарий

Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Отправить Отменить

Комментариев никто не оставлял. Вы можете стать первыми!

Решения
MissShop - магазин женской одежды. Опт + Розница. b2b кабинет.
199 900 руб.
3 Отзыва
MisterShop - магазин мужской одежды. Опт + Розница. b2b кабинет.
199 900 руб.
1 Отзыв
Парсер контента: сайты, excel, xml, yml, csv, rss
19 990 руб.
32 Отзыва
SEO умного фильтра: мета-теги, заголовки, карта сайта
14 990 руб.
18 Отзывов
Маркетинговые рассылки - персонализация сообщений
9 990 руб.
6 Отзывов
Комплексные отзывы, комментарии, вопросы
9 990 руб.
1 Отзыв
1С инструменты - расширение стандартного обмена
8 490 руб.
7 Отзывов
Ценовой маркетинг. A/B тестирование цен
7 490 руб.
Контентное API Яндекс.Маркет: Загрузка товаров, характеристик и обновление цен
9 990 руб.
5 Отзывов
Мой Бухгалтер - для частных бухгалтеров и бухгалтерских компаний. Адаптивный. Композитный
9 990 руб.
1 Отзыв
БыстроРемонт - ремонт квартир под ключ. Адаптивный. Композитный
9 990 руб.
Почта России/EMS - расчет и отслеживание
7 990 руб.
4 Отзыва
Похожие товары - как инструмент увеличения среднего чека
2 990 руб.
2 Отзыва
Вакансии HeadHunter
6 990 руб.
Заказы Wikimart
4 990 руб.
Быстрая загрузка картинок в визуальном редакторе
2 990 руб.
1 Отзыв
Мотивируем на регистрацию - повышаем продажи
2 490 руб.
Расчет DPD доставки
2 490 руб.
3 Отзыва
Интеграция с Контур.Эльба
9 990 руб.
Расширенная авторизация
2 990 руб.
С этим товаром просматривают
Бесплатно
Сейчас покупают
Бесплатно
Этот товар был заказан
Бесплатно
Товар сейчас просматривают
Бесплатно
Удобный mp3 player
Бесплатно
Подписка на группы vkontakte и facebook
Бесплатно
1 Отзыв
Настраиваемый Ajax Preloader
Бесплатно
4 Отзыва
Умные хлебные крошки
Бесплатно
Заказ по телефону
Бесплатно
Еще решения
Сотбит
Веб студия занимается разработкой сайтов на 1С-Битрикс, разработкой типовых решений, входит в ТОП-10 разработчиков для Маркетплейса 1С-Битрикс.
192029
Россия
Ленинградская область
Санкт-Петербург
м. «Петроградская», пр-т Медиков, д. 3-5, лит. А, оф. 211
+7 (812) 670-07-40
info@sotbit.ru
,
обратная связь