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

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

Содержание Постановка цели, задач проекта Анализ совместимости имеющегося макета с возможностями Web-технологий и его корректировка для верстки Анализ макета и его разбиение на основные блоки для последующей верстки Подготовка графики Описание технических характеристик объектов для выполнения верстки Создание адаптивного макета

Цели проекта Продемонстрировать уровень владения технологиями HTML и CSS. Реализовать умение рационально совмещать особенности дизайнерской части и технического исполнения проекта. Создать вариант адаптивного макета и описать технические особенности реализации адаптивного дизайна в рамках проекта

Задачи проекта Провести анализ макета в соответствии с возможностями реализации при выполнении верстки При необходимости внести изменения / доработки / коррекцию в имеющийся макет Разбить макет на блоки для последующей верстки Описать технические характеристики элементов макета Оптимизировать графические компоненты для макета Сформировать вариант адаптивного макета Описать технические особенности реализации адаптивного дизайна

Совместимость Провести анализ макета в соответствии с возможностями реализации при выполнении верстки: Форма составных блоков (реализуемо ли при верстке) Шрифтовое решение (читабельность, контрастность, шрифтовой диапазон, шрифтовая вариативность) Цветовое решение (цветовая модель, градиенты, тени, альтернатива фоновых изображений) Изображения и блоки по краям макета (величина отступов, размещение, ориентирование, наложение, фоновые изображения и их оптимизация)

Совместимость Взаимодействие изображений и текстовых блоков (наличие пересечений, читабельность текста на фоновых объектах, изменение рамок в зависимости от количества контента) Практичность при реализации адаптивности (перепланировка, сокрытие блоков, создание альтернативных блоков, стилевые изменения, проблемные точки)

Изменения макета Не обязательный шаг Если при выполнении анализа возникла необходимость изменения / доработки / др. разработанного вами макета, то указываем, какие изменения были внесены в первоначальную версию макета и поясняем причину данного действия. Пример, Два блока – графический и текстовый объект меняют положение на макете, исключая наложение друг на друга, так как выполнять подобную верстку техничнее, а дизайн данное изменение концептуально не меняет

Разбиение на блоки Выделяем блоки, которые будем формировать при верстке – со всей вложенной структурой; Если вложенность достаточно объемная, то рассматриваем разбиение каждого блока по отдельности

Разбиение на блоки Пример

Разбиение на блоки Пример

Элементы макета для ТЗ Должно включать в себя: описание поведения страницы при различной ширине окна описание используемых шрифтов и их размеров описание используемых цветов описание отступов и размеров элементов

Элементы макета для ТЗ Описание поведения страницы при различной ширине окна фиксированная или адаптивная под ширину браузера; наличие параметров min-width/max-width; выполнение центрирования основного блока (при его наличии); описание фонового объекта для подложки (при его наличии).

Элементы макета для ТЗ Описание используемых шрифтов и их размеров, цветовой палитры. Пример Цвет фона #FFFFFF Цвет основного шрифта #000000 Цвет ссылок #0F50A0 Цвет ссылок на синем/красном фоне #FFFFFF Основной шрифт Arial, 10 px Инфоленты, дополнительные тексты Arial, 8 px ... и т.п. Возможно цветовую палитру отобразить наглядно цветовой лентой с указанием кодировок

Элементы макета для ТЗ Описание отступов и размеров элементов, а также других сопроводительных параметров Пример.

Элементы макета для ТЗ Пример

Элементы макета для ТЗ Пример

Элементы макета для ТЗ Пример

Элементы макета для ТЗ Пример

Элементы макета для ТЗ Пример

Элементы макета для ТЗ Пример

Подготовка графики На этой стадии на макете отключаются элементы, которые на готовой странице должны быть текстовыми, и из полученного макета вырезаются графические изображения. Все используемые графические объекты оптимизируются, а составные «нарезаются» на более простые, если того требует задача при верстке

Подготовка графики При подготовке графических элементов следует: Тщательно выбирать формат элемента и его параметры. По возможности минимизировать размер создаваемого элемента. Создавать все вариации графического элемента (например, все необходимые варианты размеров или цветной и черно-белый варианты и т.п.) Для повторяющихся графических мотивов вырезается в отдельный файл повторяющийся фрагмент

Подготовка графики Пример Определяем используемые графические форматы: для объектов с прозрачным фоном – png; для логотипа – gif; объекты фотогалереи – jpeg; и т.п.

Подготовка графики Пример При необходимости изображения разделить на более простые детали

Подготовка графики Пример При необходимости разделяем совмещенные текстовые фрагменты и изображения

Подготовка графики Пример При возможности проводим минимализацию используемых графических элементов; отдаем предпочтение фоновому использованию и применению различных CSS-свойств

Адаптивный макет Определить контрольные точки (позиции) для вариантов адаптивного макета. Прорисовать шаблон (шаблоны) адаптивного макета на основе имеющегося Описать стилевые изменения, требующие внесения в исходный код

Адаптивный макет Пример. Графическое представление макетов

Адаптивный макет Пример. Техническое описание Смещение положения блоков: заголовок и основное меню перемещаем из одной строки в две: отдельно заголовок (прижат к левому краю), отдельно меню (прижато к левому краю) Слайдер заменяем альтернативным блоком – цветовое решение и текстовый контент, ассоциирующийся с фирменным стилем без анимации и рекламных трюков Логотипы партнеров автоматически распределяются с центрированием на несколько строк Несколько колонок основного контента заменяются на одну

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

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