Требования к дизайну сайта v. 2

22.12.2008

Недавно, помимо wireframes, пришлось написать требования к дизайну сайта по мотивам старого поста «Покупаете дизайн отдельно? Проверьте, всё ли на месте?» Вот что получилось.

  1. Минимальное поддерживаемое разрешение — 1024х768. На 800х640 может быть горизонтальная прокрутка, но строка основного текста должна умещаться в 800px.
  2. Если резина, то тянется примерно с 950px до 1200px, чтобы на больших разрешениях строки не становились слишком длинными. Если фиксированная ширина, то примерно 1000px.
  3. Предусмотреть, как будет выглядеть сайт на 1600х1200 и больше.
  4. Невысокая шапка, пикселей 200 максимум.
  5. Боковая колонка может быть фиксированной ширины. Не должна быть слишком узкой. Список ссылок в боковой колонке не должен слишком сильно растягиваться по высоте.
  6. Предусмотреть дизайн подвала.
  7. Ссылки подчеркнуты.
  8. Стили для уже посещенных ссылок.
  9. Стили для текущих пунктов меню.
  10. Стили для таблицы, в том числе для шапки таблицы.
  11. Стили для маркированных списков.
  12. Стили для трех уровней заголовков.
  13. Стили для нумерации страниц.
  14. Придумать, как выделять новинки и специальные предложения в каталоге.
  15. Фотографии без закругленных уголков.
  16. Ключевые слова в шапке, контакты, пункты меню должны быть не картинками, а текстом — нужно использовать стандартный шрифт.
  17. Видео с ютьюба должно более или менее органично смотреться на страницах сайта.
  18. Стили для лайтбокса.
  19. Возможность оформления форума в стиле сайта.

Комментарии

Вован, 23.12.2008 03:52

Размер страницы с картинками < 50 Кб

Все тексты и навигационные элементы должны быть видны с отключенными картинками

Гость, 23.12.2008 11:35

Ну... даже не знаю. Вот эта вот страница 96КБ (если верить FireBug'у). Куда ж уже меньше то?

Дмитрий Сергеев, 23.12.2008 13:06

Вован, это уже не к дизайну требования. Надо было мне уточнить, что результат работы дизайнера в данном случае -- картинки в psd.

Cuprum, 23.12.2008 10:27

По поводу 16 пункта - можно сделать чтобы и овцы целы и волки сыты - использовать метод CSS подмены
Ну и 1 пункт - если предполагается поддержка коммуникаторов (типа iPhone, модели от HTC) - там свои требования

Дмитрий Сергеев, 23.12.2008 13:20

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

Этот список не рассчитан на «high end». В некоторых случаях его можно показать дизайнеру, иногда по нему можно проверить завершенность работы.

Про «незаточенную» мобильную версию верно подмечено, спасибо.

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

Илья, 23.12.2008 13:21

Простите, что за метод?

Дмитрий Сергеев, 23.12.2008 13:25

Андрей Лось, 23.12.2008 12:54

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

Могут ведь найтись те, кто будет подходить к проверке слишком формально, и этот список может навредить хорошему дизайну.

А вот перечень технических требований действительно полезен. И стандартизация элементов навигации (подчеркивание ссылок) — тоже нужна.

Дмитрий Сергеев, 23.12.2008 13:22

Наверное вы правы. Но список делался под конкретный сайт, превращать его в слишком универсальный не хотелось.

rotor, 24.12.2008 00:55

Трудно сориентироваться, что за сайт послужил примером для создания этого списка и какова была его информационная структура, но от себя, я бы еще добавил отображение breadcrumbs и favicon.

Дмитрий Сергеев, 24.12.2008 01:15

Не в бровь, а в глаз. Спасибо.

podarok, 31.12.2008 19:55

ИМХО - список получился не совсем универсальным - более унифицировано - 1-13 пункты - действительно универсальны.
Хотя это не все.
Для совместимости с будущими развитиями
- обнулить стили ( тот же yahoo reset-css )
- обязательно включить базовые размеры шрифтов для разметки, чтоб потом пользователь не увидел h6 больше h3 (только пример - тут тоже можно взять какой-либо base css пакет )
- желательно перехватить максимум популярных тегов HTML языка - тогда практически любой форум либо внешний плагин будет выглядеть гармонично при отключеном оригинальном стиле.
- в случае того-же друпала - взять соответствующий шаблон, в котором представлены все стили с популярных модулей и "перехватить" их стилем будущего проэкта.

А вообще - универсальность практически недостижима, но приближение к ней - возможно!

Эстере, 23.01.2009 02:25

Вот пример одного из удачных дизайнов сайта www.mixnews.lv По каким критериям обычно оценивается сайт?
- нейтральный цвет фона
- поисковая функция
- разнообразие информации
- легко читаемый шрифт
- удачное расположение рубрик (наверное на примере это будет понятней, это те ячейки, которые вы видите в данном случае вверху сайта)
- возможность высказать свое мнение
Во это основные пункты которые, наверное следует учесть при составлении дизайна сайта ;))
Особо строгих рамок по дизайну придерживаться не стоит, главное. чтобы стиль сайта соответствовал его теме.