Заказать обратный звонок
Написать письмо
+375 (29) 108-04-58 Беларусь

Новости

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

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

05 марта 2015

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


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

 

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

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


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



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

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


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


6. Профессиональные высококачественные фотографии
Сайт Grain and Mortar 

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


7. Всплывающие/скользящие меню, используемые в мобильных приложениях
Сайт 24ways 
Адаптивный веб-дизайн появился сравнительно недавно. Вплоть до недавнего времени акцент в дизайне был сделан на то, чтобы сайт превосходно смотрелся на больших мониторах и всего лишь хорошо на планшетах и мобильных устройствах. Адаптивный дизайн сильно продвинулся вперед, заставив сайт в любом случае смотреться отлично на разных устройствах.
Благодаря этому прогрессу, мы видим такие элементы дизайна, которые используют для того, чтобы они работали на мобильных устройствах и реализовывали ширину сайта.
 
Например, на сайтах 24ways и Rawnet реализована идея использования адаптивного меню и меню из мобильного приложения для всего сайта, а не только для устройств с маленьким экраном.
Что касается этих двух сайтов, для вертикального меню они выбрали либо левую, либо правую сторону сайта (вместо типичного горизонтального меню сверху страницы), которая работает больше как всплывающее/скользящее меню – техника, взятая у мобильных приложений и адаптивного дизайна для маленьких экранов.



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



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


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

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

Остались вопросы по статье?

Оставьте свой контакт и наш менеджер вас проконсультирует.



Решения
Сотбит: Оригами – интернет-магазин
39 900 руб.
31 920 руб.
10 Отзывов
Сотбит: B2B кабинет
179 900 руб.
143 920 руб.
3 Отзыва
Сотбит: B2BShop - Оптово-розничный магазин с B2B кабинетом
199 900 руб.
159 920 руб.
9 Отзывов
Сотбит: Парсер контента – сайты, excel, xml, yml, csv, rss
19 990 руб.
15 992 руб.
129 Отзывов
Сотбит: B2BMobile - мобильное приложение для B2B кабинета
49 990 руб.
Сотбит: SEO умного фильтра – мета-теги, заголовки, карта сайта
14 990 руб.
11 992 руб.
182 Отзыва
Сотбит: SEO умного поиска – мета-теги, заголовки, карта сайта
9 990 руб.
7 992 руб.
3 Отзыва
Сотбит: Мультирегиональность
14 990 руб.
11 992 руб.
37 Отзывов
Сотбит: Комплексные отзывы, комментарии, вопросы
9 990 руб.
7 992 руб.
3 Отзыва
Сотбит: 1С инструменты - расширение стандартного обмена
9 990 руб.
7 992 руб.
8 Отзывов
Сотбит: Похожие товары - как инструмент увеличения среднего чека
4 990 руб.
3 992 руб.
2 Отзыва
Сотбит: Быстрая загрузка картинок в визуальном редакторе
4 990 руб.
3 992 руб.
1 Отзыв
Сотбит: Коммерческие предложения - персональные КП для клиентов
39 990 руб.
31 992 руб.
Сотбит: Мультикорзина — несколько корзин в интернет-магазине
24 990 руб.
19 992 руб.
Сотбит: Рекламации — работа с претензиями
39 900 руб.
31 920 руб.
Сотбит: REST API
Бесплатно
Сотбит: Индивидуальные цены
39 900 руб.
31 920 руб.
Канонические ссылки (canonical)
1 000 руб.
3 Отзыва
Импорт из Excel. Загрузка каталога товаров 1С-Битрикс (admin)
5 000 руб.
29 Отзывов
Сотбит: Микроразметка Schema.org. Увеличение кликабельности в поисковых системах
4 990 руб.
3 992 руб.
Сотбит: Перекрестные продажи – похожие товары, коллекции, аксессуары
9 990 руб.
7 992 руб.
2 Отзыва
Сотбит: OpenGraph. Увеличение кликабельности постов в соц. сетях
4 990 руб.
3 992 руб.
Сотбит: Проверка контрагента
4 990 руб.
3 992 руб.
1 Отзыв
Сотбит: CRM инструменты
4 990 руб.
3 992 руб.
Сотбит: Счет на почту в PDF
4 990 руб.
3 992 руб.
3 Отзыва
Сотбит: Интеграция с Контур.Эльба
9 990 руб.
7 992 руб.
1 Отзыв
Сотбит: Расширенная регистрация и авторизация
9 990 руб.
7 992 руб.
2 Отзыва
Заказ по телефону
Бесплатно
Аспро: Оптимус - интернет-магазин
26 900 руб.
35 Отзывов
Интернет-магазин ЭЛЕКТРОСИЛА
20 900 руб.
16 720 руб.
14 Отзывов
Еще решения


Сотбит
Веб интегратор занимается разработкой сайтов на 1С-Битрикс, разработкой типовых решений, входит в ТОП-10 разработчиков для Маркетплейса 1С-Битрикс.
192029
Россия
Ленинградская область
Санкт-Петербург
м. «Петроградская», пр-т Медиков, д. 3-5, лит. А, оф. 211
+7 (812) 670-07-40
sale@sotbit.ru
,
Обратная связь