Страница в общем виде
13 апреля 2011 года, Москва
Этот материал — одновременно, и рыба, которую нужно оформить в красивый PSD (как Lorem Ipsum), и полезный контент, который стоит почитать.
Зачем это нужно
Веб-сайты имеют свойство развиваться со временем, поэтому на этапе разработки дизайна никогда нельзя четко определить, какие страницы на нем появятся в будущем. Чтобы не приходилось в попыхах разыскивать дизайнера, когда понадобится какая-то непредусмотренная мелочь, мы придумали отрисовывать «страницу в общем виде».
На самом деле это придумали не мы, а так вообще много где делают. Например, в студии Корпоративные Решения я наблюдал такую практику еще в 2007 году.
Что должно быть на «странице в общем виде»
Заголовки
Как вы уже заметили, на такой странице мы перечисляем заголовки нескольких уровней (трех хватает). Первый уровень — самый главный заголовок, один на весь документ. Дизайнеру нужно придумать, каким цветом оформлять каждый уровень, какие отступы делать сверху и снизу. Для заголовка первого уровня дизайнеры иногда применяют дизайнерское решение, например кладут под него прикольную подложку-бэкграунд.
Параграфы
Кроме того, обязательно нужно показать несколько параграфов с текстом, чтобы было видно, какой шрифт используется, какое выравнивание, какое расстояние между двумя параграфами, и между параграфом и заголовком.
Ссылки
Гиперссылки — основа гипертекста. Важно сделать их удобными и понятными. Надо не забыть показать, как выглядит ссылка, по которой пользователь еще не ходил, и ссылка, где он уже бывал. Для некоторых проектов также важно отделить визуально внешние ссылки (на другие сайты) от внутренних (на тот же сайт).
Маркированный и нумерованный списки
Два преимущества списков:
- списки проще для восприятия глазом, что важно для текста в веб-среде — мысли в них четко отделены логически;
- пункты списков можно просто перечислять, без лишних связующих конструкций типа "кроме того", "также стоит отметить" и т.д.
О чем важно помнить дизайнеру, оформляя список:
- если есть возможность оставить элементу внешний вид по умолчанию, лучше так и поступить — за это скажут спасибо и пользователи, и верстальщик;
- это особенно касается маркеров: черные маркеры ничем не хуже зеленых или розовых;
- менять внешний вид цифр у нумерованных списков — крайне геморройное занятие;
- список должен быть визуально отделен от прочего контента;
- пункты списка не должны слипаться, расстояние между пунктами должно быть больше, чем между двумя строками одного пункта, если встречается пункт, из состоящий из очень длинной строки, как например вот этот конкретный пункт, он на удивление длинный, даже не понятно зачем он такой длинный о Боже мой он никогда не закончится паника паника паника!!!!!1111
- списки бывают:
- одноуровневыми
- вложенными
Табличные данные
Часто необходимо подать некоторую информацию в табличном виде. В этом случае следует обратиться к следующей таблице:
| Элементы таблицы |
| Название | Назначение | О чем подумать | Количество |
| Заголовок |
Главное название таблицы |
должен быть большой и заметный |
1 |
| Название колонки |
Информирует, что за данные показаны в колонке |
цветной фон, жирный шрифт |
4 |
| Ячейка главная |
самая важная ячейка в строке |
жирный шрифт, выделение цветом |
6 |
| Ячейка обычная |
например, вот эта |
продумать рамку, отступы сверху-снизу, шрифт, выравнивание |
20 |
| Ячейка с цифрами |
Например, как крайняя правая в этой строке |
выравнивание по центру, шрифт |
0-1 |
Текст с иллюстрацией
Ю. Гагарин на Кубе
Просто текст — это довольно скучно. А вот если снабдить это однообразие из букв красивыми картинками, будет совсем другой эффект!
Оформить картинку, чтобы она выглядела красиво — задача дизайнера. Необходимо предусмотреть подпись под картинкой, поясняющую смысл картинки. Придумать размер отступов по разным направлениям. Часто дизайнеры берут картинку в рамочку — можно даже вместе с подписью.
Необходимо добиться, чтобы было понятно, что именно иллюстрирует включенное изображение. Оно не должно убегать слишком далеко от того текста, где упомянут объект, изображенный на картинке.
В некоторых случаях при клике на изображение можно увидеть его увеличенную копию. Дизайнер может нарисовать какую-нибудь иконку, позволяющую пользователю догадаться о такой возможности — например, лупу с плюсиком.
Форма в общем виде
Заранее сказать, какие формы будут на сайте, тоже не всегда возможно. Но с большой вероятностью можно понять, из каких элементов формы будут собраны, и отрисовать все сразу. За основу можно взять следующую форму:
Стоит заметить, что вывод табличкой вида "названия полей слева, сами поля справа" хоть и вполне распространен, но далеко не единственный возможный. Дизайнер всегда может придумать свое расположение элементов. Главное, чтобы все указанные элементы были отрисованы.
Заключение
Пожалуй, список элементов на этой странице едва ли можно назвать исчерпывающим. Но для начала его вполне можно использовать. Кто вспомнит еще что-нибудь — пишите в комменты, добавлю.
Илья Мясин, J-Vista, 2011 г.
