Dubrowsky
Хроники одного дупла
Блогово  →  WebDev  → 

Страница в общем виде, рыба для дизайнера

13 Апреля 2011 года

Сегодня с удивлением обнаружил, что задача «накидать макет страницы со стандартными элементами, заголовки 3х уровней, параграфы, списки, картинки, ссылки посещенные-непосещенные, табличка» может вызвать у некоторых дизайнеров проблемы.

Вообще мы такую задачу даем любому дизайнеру по любому проекту. И, надо сказать, периодически забываем то одно, то другое. Чтобы не забывать и не тратить время в будущем, я накидал "рыбу" такой страницы. Соответственно, задача дизайнеру формируется так: "возьми нижеследующий контент, вставь в макет сайта и оформи как следует". Многим может пригодиться, так что пишу в блог.

Страница в общем виде

13 апреля 2011 года, Москва

Этот материал — одновременно, и рыба, которую нужно оформить в красивый PSD (как Lorem Ipsum), и полезный контент, который стоит почитать.

Зачем это нужно

Веб-сайты имеют свойство развиваться со временем, поэтому на этапе разработки дизайна никогда нельзя четко определить, какие страницы на нем появятся в будущем. Чтобы не приходилось в попыхах разыскивать дизайнера, когда понадобится какая-то непредусмотренная мелочь, мы придумали отрисовывать «страницу в общем виде».

На самом деле это придумали не мы, а так вообще много где делают. Например, в студии Корпоративные Решения я наблюдал такую практику еще в 2007 году.

Что должно быть на «странице в общем виде»

Заголовки

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

Параграфы

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

Ссылки

Гиперссылки — основа гипертекста. Важно сделать их удобными и понятными. Надо не забыть показать, как выглядит ссылка, по которой пользователь еще не ходил, и ссылка, где он уже бывал. Для некоторых проектов также важно отделить визуально внешние ссылки (на другие сайты) от внутренних (на тот же сайт).

Маркированный и нумерованный списки

Два преимущества списков:

  1. списки проще для восприятия глазом, что важно для текста в веб-среде — мысли в них четко отделены логически;
  2. пункты списков можно просто перечислять, без лишних связующих конструкций типа "кроме того", "также стоит отметить" и т.д.

О чем важно помнить дизайнеру, оформляя список:

  • если есть возможность оставить элементу внешний вид по умолчанию, лучше так и поступить — за это скажут спасибо и пользователи, и верстальщик;
  • это особенно касается маркеров: черные маркеры ничем не хуже зеленых или розовых;
  • менять внешний вид цифр у нумерованных списков — крайне геморройное занятие;
  • список должен быть визуально отделен от прочего контента;
  • пункты списка не должны слипаться, расстояние между пунктами должно быть больше, чем между двумя строками одного пункта, если встречается пункт, из состоящий из очень длинной строки, как например вот этот конкретный пункт, он на удивление длинный, даже не понятно зачем он такой длинный о Боже мой он никогда не закончится паника паника паника!!!!!1111
  • списки бывают:
    • одноуровневыми
    • вложенными

Табличные данные

Часто необходимо подать некоторую информацию в табличном виде. В этом случае следует обратиться к следующей таблице:

Элементы таблицы
НазваниеНазначениеО чем подуматьКоличество
Заголовок Главное название таблицы должен быть большой и заметный 1
Название колонки Информирует, что за данные показаны в колонке цветной фон, жирный шрифт 4
Ячейка главная самая важная ячейка в строке жирный шрифт, выделение цветом 6
Ячейка обычная например, вот эта продумать рамку, отступы сверху-снизу, шрифт, выравнивание 20
Ячейка с цифрами Например, как крайняя правая в этой строке выравнивание по центру, шрифт 0-1

Текст с иллюстрацией

Ю. Гагарин на Кубе

Просто текст — это довольно скучно. А вот если снабдить это однообразие из букв красивыми картинками, будет совсем другой эффект!

Оформить картинку, чтобы она выглядела красиво — задача дизайнера. Необходимо предусмотреть подпись под картинкой, поясняющую смысл картинки. Придумать размер отступов по разным направлениям. Часто дизайнеры берут картинку в рамочку — можно даже вместе с подписью.

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

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

Форма в общем виде

Заранее сказать, какие формы будут на сайте, тоже не всегда возможно. Но с большой вероятностью можно понять, из каких элементов формы будут собраны, и отрисовать все сразу. За основу можно взять следующую форму:

Ошибка: Пользователь с таким е-мейлом уже зарегистрирован!
Ошибка: Ошибок может быть несколько!

Поля, отмеченные «*», обязательны для заполнения
*
*
Пожалуйста, указывайте правильнный адрес, иначе мы не сможет доставить заказ!
Список радио-баттонов и/или чекбоксов, очень важная штука
— только при доставке курьером!
Введите текст с картинки, чтоб доказать, что вы не робот

показать другие цифры

Стоит заметить, что вывод табличкой вида "названия полей слева, сами поля справа" хоть и вполне распространен, но далеко не единственный возможный. Дизайнер всегда может придумать свое расположение элементов. Главное, чтобы все указанные элементы были отрисованы.

Заключение

Пожалуй, список элементов на этой странице едва ли можно назвать исчерпывающим. Но для начала его вполне можно использовать. Кто вспомнит еще что-нибудь — пишите в комменты, добавлю.


Илья Мясин, J-Vista, 2011 г.

Камменты

Klauss13.04.2011, 18:34#
еще можно добавить цитату и врезку как в крутых сми.
а вообще полезно, спасибо
Николай Дубровскийон самый13.04.2011, 18:40#
Klauss, не буду добавлять - слишком специфично, имхо.
На крайний случай есть "анонс", который в самом начале, его стилями можно оформлять все нестандартное :)
Klauss13.04.2011, 18:46#
как хочешь
Ilya Arhipkin13.04.2011, 21:45#
Теперь знаю какая работа дизайнеров, так то лучше сделать готовые шаблоны сайты пустышки и какими-нибудь словами набрасать информационное наполнение, можно сделать шаблон блог+галерея+форум+контакты для компаний, персональный сайт, сайт знакомств, интернет-магазин и шаблоны на разные тематики это медецина, страхование, авто и т.д. по всем аспектам и сидеть спокойна на готовом заранее
+1 :)
Денис Иванов14.04.2011, 02:04#
Крутая страничка. Только, пожалуй, ты забыл чекбоксы и календари в формах.
Alexander14.04.2011, 12:09#
Хорошая статья, скинул своим дизайнерам ссылки. Еще хлебные крошки, думаю, нужно включить.
ежила14.04.2011, 12:31#
звёздочки на форме комментирования ("имя", "мыло") съехали на несколько строк вверх. Хром 10.0.648.133 (77742) Ubuntu 10.10.
Ян14.04.2011, 12:54#
да, цитаты я бы тоже сюда добавил. а так идея хорошая.

Написать коммент: памятка постеру

 

Крутые посты wtf??? →

02.10.2012 · 90 камментов · рейтинг 19.75
27.06.2012 · 37 камментов · рейтинг 12.31
28.04.2008 · 44 каммента · рейтинг 9.84
23.01.2013 · 19 камментов · рейтинг 9.4
28.03.2008 · 23 каммента · рейтинг 7.08

Поисковый спам

Последне камменты

18.04.2017  ДубрОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Вячеслав, блин, я там скобку потерял =) Обновил, ...
17.04.2017  Вячеславтам же: вот http://www.totalat.ru/service/remont-akpp-bmw/
17.04.2017  Вячеславтам же: Вашу версию вставил. Даже alert проверочный вывод...
17.04.2017  Вячеславтам же: То что вы там запостили это вместо последнего куск...
17.04.2017  Дубртам же: Привет! 1) код лучше запостить куда-нибудь на ht...

Статсы