Этапы проектирования HTML5-страниц

Введение

Быстрая, качественная и адаптивная веб-страница — это мечта каждого frontend-разработчика. Для достижения такого результата необходимо выполнить ряд действий до того как начинать наполнять контентом HTML-файл и создавать стили для него.

Тщательная подготовка к созданию веб-страницы уменьшит время вёрстки и избавит от необходимости переделывать страницу с нуля на конечных этапах разработки.

Анализ PSD — макета

Взаимодействие дизайнера и frontend-разработчика

Основой работы для frontend-разработчика зачастую является PSD-макет, который предоставляет ему дизайнер. Здесь возможны два варианта — либо макет изначально разделён на слои и объекты, либо макет представлен однослойным изображением высокого разрешения.

В первом случае, проблем с выделением отдельных изображений, иконок и логотипов не возникает — достаточно импортировать слои по отдельности. Также следует уделить внимание адаптации цвета и размеров изображений к публикации в веб-пространстве.

Подготовка изображений из макета

В первом случае, когда макет разделён на слои, для подготовки изображений необходимо выполнить несколько шагов:

  1. Выделить слой с нужным изображением. Для удобства, лучше отключить отображение всех остальных слоёв — пункт Show/Hide all others layers.
  2. Возможна ситуация, когда изображение на слое является объектом SmartObject с наложенными на него эффектами.
  3. В этом случае необходимо предварительно растрировать изображение с эффектами — пункт Rasterize Layer Style.
  4. К полученному слою нужно применить инструмент Обрезка (Crop tool), чтобы привести размер иконки к заданному. Для удобства позиционирования, во время вёрстки желательно использовать иконки стандартного формата и размера, например — 24*24 пикселя.
  5. После обрезки изображения его необходимо сохранить с качеством и цветовой палитрой, адаптированными для веб-публикаций (Ctrl + Shift + Alt + S). Сохраняйте изображения в формате PNG, это позволит сохранить прозрачность фона. В таких форматах как JPEG или GIF прозрачный фон будет заменён белым. Конвертация цветовой палитры изображения в Internet Standart RGB позволит одинаково отображать цвета изображения на мониторах различных конструкций и фирм.

Во втором случае, когда макет является однослойным, для подготовки изображений необходимо повторить шаги 4-5 из вышеуказанной инструкции. В этом случае стили изображений уже растрированы, и остаётся их только разрезать и сохранить.

Правила именования изображений

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

  • для хранения фонов страниц или их отдельных элементов:
    ../img/bkg/background-name.gif
  • для хранения логотипов сайта:
    ../img/lgo/logotype-name.png
  • для хранения кнопок, которые применяются на сайте:
    ../img/btn/button-name.png
  • для хранения изображений, которые используются в контенте страницы:
    ../img/con/article-img-name.png

Это позволит лучше ориентироваться в HTML-разметке и понимать где применяется то или иное изображение.

Выбор блоков HTML5

Разметка изображения макета

Перед созданием HTML разметки, желательно создать графическую схему распределения блоков на макете. Вот один из реальных примеров такой разметки:

Такая разметка позволяет определить (возможно — удобно отобразить) вложенность и взаимное расположение основных блоков HTML5 — header, main, section, article, aside, nav, footer и др. При более детальной разметке можно указать относительное расположение и вложенность других мелких элементов — иконок, кнопок, элементов меню и др.

Для этого можно использовать инструмент Прямоугольник (Rectangle) в программе Photoshop. Однако это довольно тяжеловесная и ресурсоёмкая программа, для которой есть более лёгкая замена — FastStone Capture.

Описание программы FastStone Capture

Основное назначение программы FastStone Capture — создание снимков экрана. Однако, разработчики пошли гораздо дальше и их программа выполняет широкий набор задач:

  • создание снимков экрана;
  • захват видео с экрана;
  • линейка и пипетка (для взятия проб цвета);
  • создание снимков областей экрана произвольной формы и многое другое.

Однако для выполнения разбивки изображения на смысловые блоки, нам необходимо использовать только небольшую часть возможностей данной программы:

  1. Снять снимок экрана нашего макета при помощи инструмента Capture Rectangular Region (выделение прямоугольной области).
  2. После открытия полученной области изображения в программе, перейти в редактор Draw. В левой части редактора, при помощи кнопки Rectangle (Прямоугольник) можно разместить блоки на шаблоне. Также, при необходимости, можно указать их имена прямо на изображении — кнопка Text.

Вывод

Вёрстка HTML страниц — процесс отнимающий значительную часть времени. При этом многие действия являются шаблонными или выполняются с небольшими различиями. Использование таких шаблонных действий позволяет ускорить процесс вёрстки. Но при этом важно, чтобы вся необходимая информация (набор изображений, структура HTML, имена блоков и классов) были доступны frontend-разработчику до начала применения стилей. В противном случае нужно будет искать решение этих проблем в процессе вёрстки. Это может снизить гибкость и семантичность разметки, а также увеличит время вёрстки страницы.

Поэтому руководствуйтесь золотым правилом: “Семь раз отмерь, один — отрежь”.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.