Новейшие тенденции в web-дизайне

Николай Лисов web-дизайнер Astra Media Group

Цел

ь вы

ступ

лени

я

Цель доклада: познакомить слушателейс новейшими тенденциями web-дизайна, сделать прогноз о дальнейшем развитии web-технологий.

Адаптивный дизайнАд

апти

вны

й ди

зайн

Адаптивный дизайн автоматически подстраивается подлюбое разрешение, обеспечивая максимальное восприятие пользователем , не теряя при этом своей функциональности.

РазрешениеАд

апти

вны

й ди

зайн

Media queries (Медиа запросы) позволяют прописать определенные условия (стили), при которых сайт подстраивается под разрешение монитора используемого устройства или окна браузера (меняя при необходимости ширину макета, число колонок, размеры изображений и текста.)

Адап

тивн

ый

диза

йнКонтент

Контент должен максимально быстро подводить человека к желаемому результату.

Способы достижения:

1. Замена части текстовой информации видео или картинками;2. Упрощение навигации;3. Более емкий контент;4. Краткое описание товаров;5. Упрощение функционала и т.п.

Одн

остр

анич

ные

сайт

ыОдностраничные («слоеные») сайты

1. Сайт без перезагрузки страницы;2. Использование вертикального или горизонтального скроллинга;3. Один экран — один раздел сайта;4. Фиксированные ключевые элементы (шапка, корзина, соц. сети);5. Использование больших шрифтов;6. Крупные тематические иллюстрации;7. Использование картинка в качестве фона;8. Большие кнопки;9. Разделение экранов (разными фоновыми изображениями;

всевозможными линиями, заливками, градиентами, тенями);10. Анимации с помощью технологий CSS 3 и HTML 5.

Сайт

ы –

мод

ульн

ые

сетк

и Сайты–модульные сетки

1. Модульная сетка как элемент дизайна;2. Информационные блоки разного размера;3. Бесконечная подгрузка контента.

МИ

ним

ализ

мМинимализм

1. Простота и понятность;2. Минимум графических элементов;3. Функциональный интерфейс;4. Минимум цветов на сайте;5. Минимальные тени.

Пло

ский

диз

айн

Плоский (flat) дизайн

1. Никаких дополнительных эффектов на объектах (тень, градиент);2. Использование простых фигур;3. Контрастные цветовые решения;4. Акцент на типографике.

В основе плоского дизайна лежит двумерный стильизображения объектов.

Met

ro д

изай

нMetro дизайн

1. Ссылки не подчеркиваются;2. Использование равномерно закрашенных квадратов навигации для

визуализации информации.

Нес

танд

артн

ая ге

омет

рия Нестандартная геометрия.

Наблюдается во всех элементах сайта (фоны, выделения, отдельные элементы)

Самые трендовые геометрические формы элементов: круг, ромб, шестиугольник (соты), реже встречаются треугольники.

Винт

ажВинтаж (ретро) стиль

1. Использование текстур (бумага, текстуры похожие на бумагу, потертости); 2. Декоративные элементы (рамки, узоры, флажки, линии);3. Приглушенная цветовая гамма;4. Характерная типографика (шрифты плакатного типа).

Пар

алла

ксПараллакс

Эффект достигается за счет движения нескольких слоев относительно друг друга с разной скоростью.Создается иллюзия трехмерного пространства

Фик

сиро

ванн

ое м

еню

Фиксированное меню

Кроме меню, иногда фиксируются какие-то ключевые элементы, помогающие пользователю быстрее совершать целевые действия ( корзина, соц. сети, формы заказа)

Фот

о и

виде

о ка

к ф

онФото и видео в качестве фона

Оказывают вау-эффект, привлекающий внимание посетителя.

Круп

ная

типо

граф

ика

Крупная дизайнерская типографика

Шрифтовые сочетания используются как в виде шрифтов, так и в виде красиво нарисованных картинок.

Боль

шие

кно

пки

Большие кнопки интерфейса

Основная функция — привлечение внимания, призыв к действию.

Нен

авяз

чивы

е ф

оны

Ненавязчивые фоны

QR-

коды

QR-коды

Основная функция кода – привлечь внимание посетителя, быстрый доступ.

QR-

коды

Анимация с использованием CSS 3 и HTML 5

Vk: http://vk.com/astramgFacebook: www.facebook.com/astramg

Twitter: https://twitter.com/AstraMediaGroup

www.astramg.ru8 812 458-57-78info@astramg.ru

Конт

акты