Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

08a. web design

342 visualizaciones

Publicado el

Web design course

Publicado en: Diseño
  • Sé el primero en comentar

08a. web design

  1. 1. Веб Дизайн Лекция 8 Структурирование содержания, Отзывчивый Дизайн, Прогрессивное улучшение Vladimir Tomberg, PhD Эстонский Университет Прикладных Наук по Предпринимательству Майнор Февраль 2016 Picturesource:http://usercenteredcontent.com 1
  2. 2. ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ Сегодня самостоятельно! 2
  3. 3. Информационная Архитектура • Навигация отражается в карте сайта; • Иерархия информации, • В раскладке страницы, • Организация страницы в структуру, ориентированную на пользователя, • Создание карты пути пользования (Customer Journey Map) 3
  4. 4. Сначала надо структурировать содержание 4Picture Source http://blog.braintraffic.com
  5. 5. Основа качественной страницы – последовательно структурированное содержание Readability убирает со страницы все, кроме содержания. Остальное пользователь не видит 5 Источник: https://www.readability.com/
  6. 6. Плохо визуально структурированное содержание 6http://www.telegraaf.nl/
  7. 7. Планирование структуры и заголовков • Страницы должны быть структурированы в иерархии; 7
  8. 8. Планирование структуры и заголовков • Заголовки младшего уровня должны заключаться в заголовки следующего старшего уровня; 8
  9. 9. Правильное использование заголовков • Не используйте такое форматирование шрифта, как font size или bold чтобы придать заголовку вид — используйте оригинальные теги (<h1> - <h6>) для всех заголовков; • Также не используйте теги заголовков чтобы придать визуальное отличие тексту; • Используйте элемент <strong> вместо <bold> и элемент <em> вместо <i> 9
  10. 10. Правильное использование списков • HTML списки - <ul>, <ol>, и <dl> - также передают иерархическую систему содержания <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 10
  11. 11. ОТЗЫВЧИВЫЙ И АДАПТИВНЫЙ ВЕБ-ДИЗАЙН 11
  12. 12. Дизайн отзывчивой страницы 12
  13. 13. Гибкие медиа 13
  14. 14. Flexible Media img {max-width: 100%;} • Это правило устанавливает размер изображения на максимально возможный, или по ширине содержащего элемента, который находится выше по иерархии 14
  15. 15. Media Query Media Queries это модуль CSS3 который реализует визуализацию содержания адаптируя к условиям, например ─ к разным разрешениям экрана 15Source http://www.downgraf.com
  16. 16. Media Query Operators 16 @media (min-width: 700px) { ... } @media (min-width: 700px) and (orientation: landscape) { ... } @media (min-width: 700px), handheld and (orientation: landscape) { ... } Source https://developer.mozilla.org
  17. 17. Примеры отзывчивых сайтов http://mediaqueri.es 17
  18. 18. Инструменты тестирования адаптивных страниц Viewport Resizer и Responsive Design Bookmarklet http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/ 18
  19. 19. Задание. Тестирование сайтов на отзывчивость • Протестируйте сайты конкурентов на отзывчивость; • Напишите краткий отчет и включите в него скриншоты:  Каковы результаты тестирования?  Что реализовано хорошо?  Что не работает? • Разместите пост в Google Drive 19
  20. 20. Адаптивный и Отзывчивый веб- дизайн 20
  21. 21. Сначала Мобильные! Если вы можете удовлетворить пользователей мобильных систем, вы сможете удовлетворить всех 21
  22. 22. 4.12.2014 – Google предсказал увеличение мобильных запросов до 50% 22Source http://www.themobilewebtrends.com
  23. 23. Сначала Мобильные! (Mobile First) 23Source http://bradfrostweb.com
  24. 24. Три главных принципа прогрессивного улучшения 1. Начинайте с чистого содержания и хорошо структурированной разметки; 2. Поддерживайте строгое разделение раскладки, представления и содержания; 3. Ненавязчиво добавляйте дополнительное поведение и презентацию, постоянно учитывая доступность содержания 24
  25. 25. Заготовка с раскладкой: каждый блок имеет имя (ID) и роль 25
  26. 26. Пример сложного интерфейса • Как реализовать этот интерфейс при помощи чистого HTML, не используя JavaScript и CSS? 26
  27. 27. Задание: создайте мокапы для разных устройств • Используя метод прогрессивного улучшения и Мобильные сначала! – создайте в Axure Lo-Fi прототипы вашего сайта для трёх разных резолюций • Используйте три режима редактирования Axure. В качестве шаблона используйте файл из Google Drive 27

×