Анализ макета, его разбиение на основные блоки для последующей верстки, установка требований для верстки

1. Верстка web-страниц

КСР №1
Тема: Анализ макета, его разбиение на основные блоки для
последующей верстки, установка требований для верстки
Мигачева Марина Евгеньевна
Минск, 2014
1
© Программа «Web-дизайн» ИБМТ БГУ

2. Содержание

1.
Постановка цели, задач проекта
2.
Анализ совместимости имеющегося макета с возможностями
Web-технологий и его корректировка для верстки
Анализ макета и его разбиение на основные блоки для
3.
последующей верстки
4.
Подготовка графики
5.
Описание технических характеристик объектов для выполнения
верстки
Создание адаптивного макета
6.
2
© Программа «Web-дизайн» ИБМТ БГУ

3. Цели проекта

• Продемонстрировать уровень владения технологиями HTML и
CSS.
• Реализовать
умение
рационально
совмещать
особенности
дизайнерской части и технического исполнения проекта.
• Создать вариант адаптивного макета и описать технические
особенности реализации адаптивного дизайна в рамках проекта
3
© Программа «Web-дизайн» ИБМТ БГУ

4. Задачи проекта

• Провести анализ макета в соответствии с возможностями реализации при
выполнении верстки
• При необходимости внести изменения / доработки / коррекцию в
имеющийся макет
• Разбить макет на блоки для последующей верстки
• Описать технические характеристики элементов макета
• Оптимизировать графические компоненты для макета
• Сформировать вариант адаптивного макета
• Описать технические особенности реализации адаптивного дизайна
4
© Программа «Web-дизайн» ИБМТ БГУ

5. Совместимость

Провести
анализ
макета
в
соответствии
с
возможностями
реализации при выполнении верстки:
1.
Форма составных блоков (реализуемо ли при верстке)
2.
Шрифтовое решение (читабельность, контрастность, шрифтовой
диапазон, шрифтовая вариативность)
3.
Цветовое
решение
(цветовая
модель,
градиенты,
тени,
альтернатива фоновых изображений)
4.
Изображения и блоки по краям макета (величина отступов,
размещение, ориентирование, наложение, фоновые изображения
и их оптимизация)
5
© Программа «Web-дизайн» ИБМТ БГУ

6. Совместимость

5.
Взаимодействие изображений и текстовых блоков (наличие
пересечений,
читабельность
текста
на
фоновых
объектах,
изменение рамок в зависимости от количества контента)
6.
Практичность при реализации адаптивности (перепланировка,
сокрытие блоков, создание альтернативных блоков, стилевые
изменения, проблемные точки)
6
© Программа «Web-дизайн» ИБМТ БГУ

7. Изменения макета

Не обязательный шаг
Если
при
выполнении
анализа
возникла
необходимость
изменения / доработки / др. разработанного вами макета, то
указываем, какие изменения были внесены в первоначальную
версию макета и поясняем причину данного действия.
Пример,
Два блока – графический и текстовый объект меняют положение
на макете, исключая наложение друг на друга, так как выполнять
подобную верстку техничнее, а дизайн данное изменение
концептуально не меняет
7
© Программа «Web-дизайн» ИБМТ БГУ

8. Разбиение на блоки

Выделяем блоки, которые будем формировать при верстке – со
всей вложенной структурой;
Если
вложенность
достаточно
объемная,
то
рассматриваем
разбиение каждого блока по отдельности
8
© Программа «Web-дизайн» ИБМТ БГУ

9. Разбиение на блоки

Пример
Шапка
Декоративный
блок
Блок основного
содержимого
9
Футер
© Программа «Web-дизайн» ИБМТ БГУ

10. Разбиение на блоки

Пример
10
© Программа «Web-дизайн» ИБМТ БГУ

11. Элементы макета для ТЗ

Должно включать в себя:
описание поведения страницы при различной ширине окна
описание используемых шрифтов и их размеров
описание используемых цветов
описание отступов и размеров элементов
11
© Программа «Web-дизайн» ИБМТ БГУ

12. Элементы макета для ТЗ

Описание поведения страницы при различной ширине окна
-
фиксированная или адаптивная под ширину браузера;
-
наличие параметров min-width/max-width;
-
выполнение центрирования основного блока (при его наличии);
-
описание фонового объекта для подложки (при его наличии).
12
© Программа «Web-дизайн» ИБМТ БГУ

13. Элементы макета для ТЗ

Описание используемых шрифтов и их размеров, цветовой
палитры. Пример
Цвет фона #FFFFFF
Цвет основного шрифта #000000
Цвет ссылок #0F50A0
Цвет ссылок на синем/красном фоне #FFFFFF
Основной шрифт Arial, 10 px
Инфоленты, дополнительные тексты Arial, 8 px
... и т.п.
Возможно цветовую палитру отобразить наглядно цветовой лентой
с указанием кодировок
13
© Программа «Web-дизайн» ИБМТ БГУ

14. Элементы макета для ТЗ

Описание отступов и
размеров элементов,
а также других
сопроводительных
параметров
Пример.
14
© Программа «Web-дизайн» ИБМТ БГУ

15. Элементы макета для ТЗ

Пример
Расстояние от края
фиксированное 32
px
Высота шапки 123 px
15
Расстояние
резиновое, но
не менее 30 px
Верхняя точки
букв на одном
уровне с
верхним краем
логотипа (20px)
Расстояние
резиновое, но не
менее 5 px
Расстояние
от края
фиксированн
ое 20 px
Нижняя линия
поля поиска на
одном уровне с
нижним краем
логотипа (19 px)
© Программа «Web-дизайн» ИБМТ БГУ

16. Элементы макета для ТЗ

Пример
sbmt_logo_high
slogan
(потом заменится на файл swf)
16
© Программа «Web-дизайн» ИБМТ БГУ

17. Элементы макета для ТЗ

Расстояния между пунктами
меню фиксированные,
шириной в 2-3 обычных
буквенных пробела.
Пример
Arial, 8 px
#0F50A0
#C52436
Размер подложки 23х20
Высота текстового поля,
как и кнопки – 21 px
button_search
Длина поля 170-180 px
17
© Программа «Web-дизайн» ИБМТ БГУ

18. Элементы макета для ТЗ

По краям активного пункта
исчезают линииразделители
Пример
main_menu_background
dot_lightblue
Или #5F91D2
шрифт Arial, 10 px
main_menu_background_active
#FFFFFF
Расстояния от краев фиксированные: по 70 px.
Если разрешение больше, то увеличивается расстояние между пунктами.
Если разрешение меньше, то расстояние сжимается.
Расстояния между всеми пунктами равны.
18
© Программа «Web-дизайн» ИБМТ БГУ

19. Элементы макета для ТЗ

Пример
Поля снизу и
сверху 15 px.
Аналогично
для меню
третьего
уровня.
Верхний край третьего
уровня меню
совпадает с верхним
краем красной плашки.
Третий уровень меню
накладывается на
второй на 6 px.
Поля слева и справа одинаковые 20px
Ширина самого меню определяется по самому
длинному пункту.
Аналогично для меню третьего уровня.
19
Правая точка стрелки –
на 7px от правого края.
© Программа «Web-дизайн» ИБМТ БГУ

20. Элементы макета для ТЗ

Пример
Подложка под кнопку
button_ok_background
Полезно, если текст
на кнопке будет не
картинкой,
но если с этим есть
сложности, сделаю
картинку.
Расстояние
резиновое, но не
менее 30 px.
Блок подписки
всегда прижат книзу
колонки.
Расстояние до
нижнего края 20 px
20
Общая ширина
текстового поля и
кнопки 200 px
© Программа «Web-дизайн» ИБМТ БГУ

21. Подготовка графики

На этой стадии на макете отключаются элементы, которые на
готовой странице должны быть текстовыми, и из полученного
макета вырезаются графические изображения.
Все используемые графические объекты оптимизируются, а
составные «нарезаются» на более простые, если того требует
задача при верстке
21
© Программа «Web-дизайн» ИБМТ БГУ

22. Подготовка графики

При подготовке графических элементов следует:
1.
Тщательно выбирать формат элемента и его параметры.
2.
По возможности минимизировать размер создаваемого элемента.
3.
Создавать все вариации графического элемента (например, все
необходимые варианты размеров или цветной и черно-белый
варианты и т.п.)
4.
Для
повторяющихся
графических
мотивов
вырезается
в
отдельный файл повторяющийся фрагмент
22
© Программа «Web-дизайн» ИБМТ БГУ

23. Подготовка графики

Пример
Определяем используемые графические форматы:
-
для объектов с прозрачным фоном – png;
-
для логотипа – gif;
-
объекты фотогалереи – jpeg;
-
и т.п.
23
© Программа «Web-дизайн» ИБМТ БГУ

24. Подготовка графики

Пример
При необходимости изображения разделить на более простые
детали
Background-color +
24
+
© Программа «Web-дизайн» ИБМТ БГУ

25. Подготовка графики

Пример
При необходимости разделяем совмещенные текстовые фрагменты
и изображения
Background-image + текст
25
© Программа «Web-дизайн» ИБМТ БГУ

26. Подготовка графики

Пример
При возможности проводим минимализацию используемых
графических элементов; отдаем предпочтение фоновому
использованию и применению различных CSS-свойств
Вырезаем повторяющийся
фрагмент в отдельный файл
и применяем CSS
background-image + repeat
26
© Программа «Web-дизайн» ИБМТ БГУ

27. Адаптивный макет

Определить
контрольные
точки
(позиции)
для
вариантов
адаптивного макета.
Прорисовать шаблон (шаблоны) адаптивного макета на основе
имеющегося
Описать стилевые изменения, требующие внесения в исходный
код
27
© Программа «Web-дизайн» ИБМТ БГУ

28. Адаптивный макет

Пример. Графическое представление макетов
28
© Программа «Web-дизайн» ИБМТ БГУ

29. Адаптивный макет

Пример. Техническое описание
1.
Смещение положения блоков: заголовок и основное меню
перемещаем из одной строки в две: отдельно заголовок
(прижат к левому краю), отдельно меню (прижато к левому
краю)
2.
Слайдер заменяем альтернативным блоком – цветовое решение
и текстовый контент, ассоциирующийся с фирменным стилем
без анимации и рекламных трюков
3.
Логотипы
партнеров
автоматически
распределяются
с
центрированием на несколько строк
4.
Несколько колонок основного контента заменяются на одну
29
© Программа «Web-дизайн» ИБМТ БГУ

30. ИТОГ

В
конечном
варианте
формируется
презентация,
которая
содержит отображение перечисленных выше вопросов в рамках
выполняемого проекта.
Данная
презентация
является
1-й
частью
зачетного
(экзаменационного) проекта в рамках учебного курса
30
© Программа «Web-дизайн» ИБМТ БГУ

31. Спасибо за внимание

[email protected]
31
© Программа «Web-дизайн» ИБМТ БГУ