Недавно, помимо wireframes, пришлось написать требования к дизайну сайта по мотивам старого поста «Покупаете дизайн отдельно? Проверьте, всё ли на месте?» Вот что получилось.
- Минимальное поддерживаемое разрешение — 1024х768. На 800х640 может быть горизонтальная прокрутка, но строка основного текста должна умещаться в 800px.
- Если резина, то тянется примерно с 950px до 1200px, чтобы на больших разрешениях строки не становились слишком длинными. Если фиксированная ширина, то примерно 1000px.
- Предусмотреть, как будет выглядеть сайт на 1600х1200 и больше.
- Невысокая шапка, пикселей 200 максимум.
- Боковая колонка может быть фиксированной ширины. Не должна быть слишком узкой. Список ссылок в боковой колонке не должен слишком сильно растягиваться по высоте.
- Предусмотреть дизайн подвала.
- Ссылки подчеркнуты.
- Стили для уже посещенных ссылок.
- Стили для текущих пунктов меню.
- Стили для таблицы, в том числе для шапки таблицы.
- Стили для маркированных списков.
- Стили для трех уровней заголовков.
- Стили для нумерации страниц.
- Придумать, как выделять новинки и специальные предложения в каталоге.
- Фотографии без закругленных уголков.
- Ключевые слова в шапке, контакты, пункты меню должны быть не картинками, а текстом — нужно использовать стандартный шрифт.
- Видео с ютьюба должно более или менее органично смотреться на страницах сайта.
- Стили для лайтбокса.
- Возможность оформления форума в стиле сайта.
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
Вован, 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
http://uggallery.audiopeace.ru/image-replacement
Андрей Лось, 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 По каким критериям обычно оценивается сайт?
- нейтральный цвет фона
- поисковая функция
- разнообразие информации
- легко читаемый шрифт
- удачное расположение рубрик (наверное на примере это будет понятней, это те ячейки, которые вы видите в данном случае вверху сайта)
- возможность высказать свое мнение
Во это основные пункты которые, наверное следует учесть при составлении дизайна сайта ;))
Особо строгих рамок по дизайну придерживаться не стоит, главное. чтобы стиль сайта соответствовал его теме.