Основные тренды в современном веб дизайне

Они как самый смелый менеджер, встречают наших клиентов и из-за всех сил стараются показать только самые положительные стороны Вашего бизнеса.


Однако, как и хороший менеджер, хороший сайт должен выглядеть современно и соответствовать требованиям своего времени. К сожалению, так бывает далеко не всегда.

Я решил разобраться: что именно сейчас в тренде и какие новые приемы в разработке интерфейсов стоит ожидать в ближайшее время.

1. Призрачные кнопки. (http://outdatedbrowser.com/ru)

Впервые о «призрачных» кнопках я услышал еще в начале 2014 года. С того времени кнопки с прозрачным фоном прочно вошли в современный дизайн и используются многими дизайнерами интерфейсов по всему миру.
Обычно такая кнопка имеет достаточно крупный размер, несколько скругленные уголки и прозрачный фон. Преимуществом такого решения является то, что такая кнопка отлично вписывается практически в любой дизайн. Стоит отметить, что большинство «призрачных» кнопок, которые видел я, так или иначе имелись в шапке сайта. Не кривя душой отмечу, что и на моем сайте есть такие кнопки.

2. Крупные шрифты и минимизация интерфейса (http://premia.1plus1.ua/).

Безусловно, к одному из современных приемов стоит отнести крупные шрифты на странице. Шапка сайта теперь все чаще имеет крупный заголовок на красочном фоне. И если в 2014 таким фоном выступало изображение, то сейчас все больше можно встретить сайты с постельными цветами в качестве фона. Количество элементов на таком сайте сведено к минимуму.

3. Меню – «гамбургер» (http://www.world-of-swiss.com/en)

Очень много споров среди дизайнеров по поводу того, стоит ли использовать такую кнопочку в своем дизайне. Но все больше людей хотят узнать откуда вообще появилась идея такой кнопки.
Придумал её Норм Кокс для Xerox Star – первого в мире компьютера с графическим интерфейсом.
Сам норм поделился своими воспоминаниями по поводу создания этой кнопки:
Изображение должно было быть простым как дорожный знак, функционально запоминаться и быть похожим на список, который в результате отображался. Пикселей для работы было мало, но иконка должна была быть простой и чёткой. Для отрисовки изображения у нас было всего 16×16 пикселей или даже 13×13, уже не помню точно.
Позже о кнопке призабыли. Теперь трудно сказать, когда именно «гамбургер» вернулся в строй, но по информации из сети можно сказать, что главными реаниматорами кнопки являются Apple, Facebook, и Path. Последний, кстати, был первопроходцем среди тех, кто стал использовать эту кнопку для перехода к навигации.
Сейчас такая кнопка стала стандартом в веб дизайне и, видимо, обосновалась здесь надолго. Скрытые меню хорошо работают в минималистичном дизайне и потому очень популярны на сайтах дизайнеров. Многие утверждают, что такая кнопка не удобна и ее нужно везде заменить на простое меню, но я считаю, что дело не в кнопке, а в том, как её используют.

4. Большие профессиональные фото или видео фон (http://themissingbulb.com/).

Хотя многие эксперты сейчас поговаривают, что очень скоро в дизайне сайтов практически не будет фото, я успел заметить, что на смену простым фото стали приходить профессиональные фотографии, сделанные специально для сайта. Кроме того, HTML5 подарил возможность использовать видео в качестве фона. Это выглядит очень эффектно.

5. Лонгриды (http://www.kennedyandoswald.com/).

Как же часто сейчас можно встретить предложения по созданию Landing Page. Страницы с «длинным» вертикальным скролом уже не первый год остаются одним из ведущих трендов. Думаю, что теперь самое время добавить к «длинным» главным страницам сайта – такие же «длинные» страницы «Контакты», «О компании» и т.д.
Кроме того, лонгриды стали использовать при разработке промо сайтов, персональных сайтов и сайтов посвященных событиям или известным личностям.

6. Креативная графика (http://caavadesign.com/).

Думаю, что еще одним трендом можно назвать использование креативной графики в дизайне. Нечитабельные и маленькие шрифты – главный враг современного дизайна. Креативная графика и шрифт позволяют не только передать суть информации, но и создать сайту настроение.
Гротескные, с различными узорами, текстурами и бэкграундами шрифты, разные иногда в пределах одного слова вызывают у читающего правильные ассоциации, помогая в этом остальным элементам дизайна.

7. Нестандартная геометрия и параллакс (http://brightmedia.pl).

Раньше в дизайне использовали в основном прямоугольники и круги. Сейчас все чаще используются нестандартные фигуры, например, треугольники, ромбы и даже шестигранники. На ряду с этим, применяется техника расположения блоков по диагонали. Диагонали также можно увидеть даже в оформлении фона сайта, кнопок или любого другого элемента дизайна.
Вместе с тем, набирает популярность 2D эффект - параллакс. Возникает он при пролистывании страницы сайта, когда фон и объект двигаются с разной скоростью, создавая при этом чувство трехмерности и глубины дизайна. Простые эффекты дополняют элементами, которые заставляют дизайн ожить. Это может быть и пролетающий самолёт, и падающая комета, и летящий снег на фоне сайта вовремя скролла.

8. Навигация по скроллу (http://www.apple.com/mac-pro/).
С приходом в наш мир одностраничных, но очень «длинных» сайтов, актуальным стало сделать навигационное меню, которое позволит перемещаться по смысловым блокам страницы. Зачастую эта навигация появляется сразу, как только посетитель сайта начинает его прокручивать. Её задача сопровождать пользователя по странице и исчезать, как только исчезает в ней надобность.
Напоследок стоит отметить, что это далеко не весь перечень современных приемов, которые используют в построении интерфейса. Вы легко сможете найти десятки примеров других трендов, которые стали неотъемлемой частью любого современного проекта.  

Обнаружив в тексте ошибку, выделите её и нажмите Ctrl + Enter

Вам необходимо создать сайт?

Давайте обсудим все подробности Вашего проекта и сделаем его!


+38(066)60-70-400

chekiley@mail.ru

Напишите нам с сайта