Технические требования к макетам (дизайну сайта)
Главная → Просто о сложном → Для веб-дизайнеров → Технические требования к макетам (дизайну сайта)
Требования к макету:
-
Макет предоставляется в формате PSD и JPG (для сравнения, возможно наш фотошоп или гимп откроет по другому)
-
Размер макета 1920 x 1080 px
-
На макете должно быть ясно показано, как будет выглядеть сайт при разрешении 1024x768, либо прикрепить еще один файл с размером 1024x768 (особенно для резинового макета)
-
Макет должен просматриваться без горизонтальной прокрутки при разрешении 1024x768 (то есть ширину сайта делать 960-1000px)
-
Если не был предоставлен текст и названия элементов меню, то вставить стандартные названия в меню «Главная», «Наши услуги», «Контакты», «Карта проезда», «Каталог продукции», «Форум» и текст который выложен ниже (приложение 1). Приложение 1 можно разместить на свое усмотрение, главное чтобы в нем было несколько абзацев с красной строкой, между абзацами интервал, между строк свой интервал, маркированный и нумерованный списки, таблица, картинка в тексте с полями (отсупами), заголовки от 1 до 6 уровня (h1-h6).
-
В теме письма указать «Название сайта Вариант 1 версия 1.0, вариант 2 версия 1.5» и т д, ну и собственно прикрепленный архив (файл) также, не нужно абстрактных имен, типа сайт, мой сайт и т д., также называть и сам файл макета PSD.
-
При разработке использовать стандартные шрифты: Verdana, Arial, Times new Roman, Georgia, Trebuchet MS, Sans, Comic Sans, Courier New, Garamond, Helvetica. (полный список: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html ) Tahoma как ни странно нестандартный. В редких случаях допускается использовать нестандартные (в логотипе, слогане, иногда в адресном блоке, на баннере, то есть в тех местах, где изменения будут проходить очень редко или вообще не происходить). В основном тексте, названии страницы, в меню – настоятельно рекомендуется использовать стандартные. При использовании нестандартных шрифтов – приложить их к макету PSD, нестандартные шрифты должны быть бесплатными, бесплатные шрифты можно скачать отсюда: http://www.google.com/webfonts?
-
В футере сайта Вставить ссылку «Создание и продвижение сайтов: Unibix»
-
Показать, как будут выглядеть элементы меню при наведении мышкой (для этого добавляется «ладонь»)
-
Все слои в PSD рассортировать по общепринятым группам (папкам) – Фон сайта, Шапка, подвал, Контент (можно центральный блок + правый блок, левый блок), верхнее меню, главное меню, левое меню, правое меню для удобства поиска верстальщику.
-
На макете должно быть ясно показан тип макета: резиновый или фиксированный.
-
При разработке макетов для страниц с группой элементов (список товаров в каталоге, список новостей, список отзывов, список фотографий (фотогалерея), требуется данные элементы выполнить разными. Например в каталоге с товарами: первый товар с названием "Молоток", краткое описание из 100 символов и фото вертикальное допустим размером 100х200, за ним разместить "Супер Мега Дупер Молоток с резиновой ручкой" (т. е с более длинным названием, с фотографией с другими пропорциями например 200х100, с более длинным описанием, то есть предусмотреть различные варианты либо утвердить с менеджером что фотографии надо в строгой пропорции, название до 40 символов и т д.
-
Старайтесь не использовать большие картинки, особенно для фона более 80% которого никто не видит, для фона лучше использоваться повторящиеся элементы (как на обоях), примеры можно взять на сайте www.subtlepatterns.com
-
Выпадающие списки изначально рисуем стандартные, поскольку их не нужно верстать и управлять с помощью javascript легче. пример стандартных можно посмотреть на перспективе
-
Когда макет будет окончательно утвержден название файла (или архива) должно содержать "final". Например medcentr_v2.3_final.zip
Приложение 1:
Lorem ipsum dolor sit amet- это заголовок 1 уровня
Текст на русском языке. Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Lorem ipsum dolor sit amet- это заголовок 2 уровня
Lorem ipsum dolor sit amet- это заголовок 3 уровня
СЮДА ВСТАВИТЬ ИЗОБРАЖЕНИЕ Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Маркированнный список
- Еще один элемент
- Еще один элемент списка
- Нумерованный список
- элемент списка
- еще один
- и еще один
№ | Заголовок таблицы | Примечание |
---|---|---|
1 | Выравнивание | Желательно показать горизонтальное и вертикальное выравнивание |
2 | Заголовок | Заголовок таблицы должен отличаться, обычно достаточно сделать другой фон и жирный текст |
3 | Отступы | От текста до краев, чтобы текст не налипал |
4 | Шрифт | Гарнитуру можно сделать другой чем в абзацах |
Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Все техтребования обсуждаются и постоянно дополняются. Ждем комментариев.