Презентация Коли Лисова с нашей летней сессии. Из нее вы узнаете о современных тенденциях в web-дизайне, наиболее популярных видах сайтов и самых интересных инструментах, которые применяют дизайнеры. astramg.ru

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

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

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

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

5. Адаптивныйдизайн
Контент
Контент должен максимально быстро подводить человека к
желаемому результату.
Способы достижения:
1. Замена части текстовой информации видео или картинками;
2. Упрощение навигации;
3. Более емкий контент;
4. Краткое описание товаров;
5. Упрощение функционала и т.п.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20. QR-коды
Анимация с использованием CSS 3 и HTML 5

21. Vk: http://vk.com/astramg
Facebook: www.facebook.com/astramg
Twitter: https://twitter.com/AstraMediaGroup
www.astramg.ru
8 812 458-57-78
info@astramg.ru
Контакты