Технические требования к дизайну сайта

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

Недавно, помимо 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. Возможность оформления форума в стиле сайта.

Как монетизировать сайт →

Создание сайта: Техническое задание на сайт, Требования к дизайну сайта — Веб-студия рекламного интернет-агентства Волекс (Петебрург)

Создание сайта: II Этап создания сайта.
Разработка Технического задания на создание сайта (подготовка ТЗ на сайт) — Требования к дизайну сайта

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

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

Утвержденные и зафиксированные в Техническом задании на создание сайта, конкретные требования к дизайну сайта, в дальнейшем будут строго выполняться дизайнерами веб-студии рекламного интернет-агентства «Волекс» (Санкт-Петербург) .

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

Составленный специалистами веб-студии рекламного интернет-агентства «Волекс» перечень требований к web-дизайну сайта обсуждается и согласуется с заказчиком. Фиксируется в Техническом задании на создание сайта и в обязательном порядке учитывается при создании web-дизайна сайта :

Требования к созданию сайта

Каким должен быть сайт? Ниже я структуирую информацию и проведу анализ факторов и требований к сайту

Общие требования к сайту

Среди требований к созданию сайта общего характера я бы выделил такие:

корректное отображение

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

структурированная информация

я, например, если зайду на ресурс и не найду быстро искомых данных, время тратить не стану и уйду на другой сайт, среднестатистические пользователи поступят так же, поэтому требования к оформлению сайта и нормальной подаче информации на страницах высоки;

Приятный дизайн

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

Хорошая конверсия

сайт должен превращать посетителя в покупателя

иметь хорошую целевую посещаемость (в это статье как лучше раместить рекламу в интернете http://likiweb.ru/sozdanie/kak-razmestit-reklamu-v-internete

Это я описал в общем, а теперь подробнее по порядку.

Требования Яндекса к сайту

Существует такое понятие, как требование поисковых систем к сайту. Перед созданием ресурса стоит с ними ознакомиться. Вы можете изучить их, перейдя по ссылке http://help.yandex.ru/catalogue/site-owner/requirements.xml

Основные требования яндекса:

  • на сайте должна быть полезная информация интересная посетителям
  • не стоит писать текст исключительно для роботов (тексты должны быть читабельными и носить экспертные данные)
    рекомендую к прочтени статью — Как правильно разместить текст на сайте
  • не пробуйте воздействовать на поисковую выдачу за счет ссылок (ссылки можно наращивать, но исключительно тематические, качественные и по которым будут переходить люди и задерживаться на вашем сайте)
    читайте статью как продвигаются сайты без ссылок
  • на сайте должны быт заполненные корректно мета теги (тайтл, дескрипшн и др)
  • сайт должен быстро загружаться и быть все время доступен (иметь надежный хотинг)
Смотрите еще:  Госпошлина за депозит нотариуса

Однозначно что не следуя этим рекомендациям хороших позиций и целевых посетителей с яндекса или гугла вам не видать.

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

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

логичность структуры ресурса

нормальное боковое и/или верхнее меню, «хлебные крошки», понятная и удобная навигация при переходах по внутренним страницам − всё то, что помогает мне ориентироваться на незнакомом ресурсе, автоматически попадает в плюс;

адекватность цветовой гаммы

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

Технические требования к сайту

  • нормальная скорость открытия ресурса (не более 3 секунд);
  • кроссбраузерность (видимость во всех браузерах);
  • оптимизация под планшеты и телефоны.

Я могу сказать, что с графикой, как правило, возникает много проблем. Если она не оптимизирована, будут проблемы с загрузкой, и пользователь уйдёт. Поэтому графика должна быть легкой и при этом наглядной и крупной.

Требования к безопасности сайта

К вопросу безопасности сайта я рекомендую подходить комплексно. Нужно обращать внимание на:

CMS (система управления)

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

и общий, и выделенный хостинг должны обеспечивать минимальную свободу действий при сохранении нормальной работы ресурса, защита в этом случае лежит на системном администраторе; обязательно автоматическое сохдание бекапов (архивов)

надёжный пароль

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

резервное копирование и хранение на локальном компьютере или естком диске даёт возможность сохранить информацию сайта, упростит его восстановление в случае хакерской атаки.

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

  • Краткость — чем меньше символов, тем лучше.
  • Простота — имя ресурса должно быть легко произносимым (не должно быть двусмысленных букв — S C или K C).
  • Релевантность — желательно, чтобы адрес отражал суть деятельности.

Я советую следовать этим параметрам не только потому, что вам будет несложно диктовать адрес потенциальным клиентам, но и в силу того, что запоминаемость вашего ресурса станет выше.

Требования к контенту сайта

Я выделил бы такие требования к наполнению ресурса, как:

  • читабельность (нормальное соотношение ключевых слов и остальной лексики);
  • достаточный объём текста;
  • грамотность;
  • уникальность.

Зачем дизайнеру задание от сеошника

Самое важное требование при разработке сайта — предусмотреть индексирование каждого элемента на странице. Именно поэтому разработчики так яростно сопротивляются просьбе «Вот тут поставить флеш ролик». Нужно иметь в виду и корректное отображение ресурса в каждом виде браузера, и технические возможности поисковых роботов, которые не умеют распознавать информацию в таком виде. Кроме устаревшей флеш технологии, есть еще ряд табу при разработке дизайна.

Что нужно знать дизайнеру о search engine optimization?

СЕО требования к дизайну главной страницы. Вопрос, на первый взгляд, не имеющий отношения к собственно дизайну. На самом деле очень важный, так как главная чаще всего является страницей входа для пользователей. При помощи визуальных методов, меню и контента необходимо оптимизировать ее под основные запросы (топовые категории).

По различным данным, это от одного, до десяти ключевых слов. Для главной страницы подбирают высокочастотные запросы, и, кроме главного ключа, используются сопутствующие. Например, «автомобили» и «авто». Это могут быть синонимы слов, сленговые названия, расшифровка аббревиатур или английское написание кириллицей.

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

  • Текстовый контент

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

  • Оформление меню

Существует ряд требований к оформлению меню. Кнопки не могут быть картинками, на которых не распознается текст. Поисковая система индексирует общую структуру сайта, и здесь будет «белое пятно». По той же причине очень плохо, если меню флешевое. Очень непрофессиональная штука для дизайнера. Меню и ссылки должны быть оформлены текстом в отдельных слоях, а не графически.

Если на сайте есть разделы с подразделами, стоит оформить их компактно, с показом второго — третьего уровня по наведению курсора, либо по клику. Отдельную проблему представляет собой многоуровневая система каталога. Здесь желательно разработать дизайн и верстку таким образом, чтобы в нижний уровень можно было попасть максимум за 2-3 клика. Лень пользователя — то, к чему приспосабливаются разработчики и оптимизаторы. Никто не станет затрачивать сверх усилия и продираться сквозь чащу страниц.

Смотрите еще:  Регистрация ип официальный сайт налоговой

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

  • Типографика — форматирование текста

Требования к тексту подразумевают комфорт чтения и борьбу с некоторыми древними манипуляциями оптимизаторов. Например, весь текст на странице не может быть выделен курсивом, или жирным шрифтом, ибо это воспринимается Гуглом и Яндексом, как акцент на всем массиве информации, будто все слова являются ключевыми. За такие вещи легко угодить в бан.

Поисковые роботы также учитывают разбиение текста на абзацы, тем самым угадывая, насколько пользователю будет легко читать статьи. За использование текста без абзацев поисковики наказывают понижением места в выдаче.

Форматирование заголовков на сайте. Очень желательно использовать именно стандартный шрифт, так как он распознается всеми браузерами на всех устройствах. Нужно предусмотреть внешнее оформление и различные эффекты в верстке основных, второстепенных заголовков, ссылок, списков, выделения в тексте. Таблицы, файлы для скачивания, видео — полезный для СЕО контент, который тоже нужно визуально обозначить.

  • Другие требования

Для чего рекомендуется статьи и новости разбавлять картинками? Человеческий это или машинный фактор? Есть данные исследований о том, что картинки делают текст понятнее, и глаза меньше утомляются. Об этом желательно помнить при разработке макета страниц.

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

Требуется отдельно проработать страницу с информацией, новостями. А также страницу контактов, и о компании. Контакты должны находиться быстро, даже пользователем, который впервые находится на сайте. Необходимо предоставить несколько вариантов для связи, это важно не только для оптимизации (поисковые системы учитывают даже это), но и для конверсии. Номера телефонов с вариантами по оператору мобильной связи, Skype, ICQ, e-mail. Также важна открытая информация о расположении магазина или офиса, карта проезда. Это, своего рода сигнал, что вы работаете официально, и не планируете обманывать клиентов.

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

  • Некоторые ошибки

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

Также ошибкой является плохо читаемый текст (белый шрифт на черном фоне; проступающий сквозь текст фон с рисунками). Все это существенно влияет на показатель отказов (пребывание на сайте до 10 секунд без внутренних переходов и кликов). То-есть, связь между удобством пользователя и раскруткой сайта сейчас самая прямая.

Требования к дизайн-макету сайта

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

Жесткие требования

  • Сам макет дизайна должен быть представлен в форматах PSD или TIFF, сохранять строго в RGB.
  • Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
  • Слои ни в коем случае не должны быть склеены, кроме дизайнерских фишек.
  • Выравнивание слоев – строго по Guide. Их не удалять. Оставлять в макете.
  • Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.
  • Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
  • В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта (а то говоришь, что сайт будет фиксированный на 800 пкс, а макет рисуют на 850 пкс – что хошь, то и верстай после этого).
  • При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024px ширина браузера составляет 986px).
  • Важно: ширина макета – 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются. Причина: что бы понять, как будет выглядеть сайт на 100% ширины браузера.
  • В случаях, когда сайт тянется на 100% ширины браузера, необходимо подготовить второй макет, например на ширину 986px, что бы понять как ведут себя элементы на небольших экранах.
  • На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех странц в одном макете приведет к использованию дикого количества оперативной памяти.
  • Макет должен предусматривать резиновую/адаптивную верстку. Таким образом желательно иметь два макета: широукий 1980px по ширине и узкий, например 800px.
  • Отрисовать макет дизайна сайта для мобильных устройств, например 311px по ширине.
  • Недопустимо использовать прозрачность для элементов, содержащих текст. Допустимо, можно использовать rgba.
Смотрите еще:  Сыктывкарский лесной институт методические пособия

Графические фишки

  • Фоны должны быть повторяющимися, текстурированые без логики повтора не принимаются.
  • Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком».
  • Минимум элементов, которые потребуют создания графических файлов png-24 (полупрозрачность etc).
  • Обязательно должна присутствовать favicon.ico для сайта.
  • В связи с поплярностью продукции компании Apple, необходимо также отрисовать иконки в формате PNG с размером 57х57, 72х72, 114х114, 144х144 и 152х152 пикселей.

Текстовое содержимое

  • Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов – всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.
  • Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.
  • Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
  • Лучше всего шрифты выбирать на сайте www.google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем более использовать.
  • Минимум изменений стандартных контролов форм.
  • Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
  • Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).
  • Обязательно должно быть указано оформление следуюших HTML-тегов: параграф, абзац (

), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список ( ), нумерованный список ( ).

В последнее время включили в требования к дизайну разарботку обязательный макета с UI Kit. В этом макеты должно быть отрисовано поведение элементов и форм на сайте. Список элементов для отрисовки:

  • Ссылки, в том числе основная навигация, постраничная навигация.
  • Текстовые поля: обычное состояние, в фокусе.
  • Кнопки: обычное состояние, наведение курсора, клик/тап.

Легкие пожелания

  • И самое главное – дизайнер должен быть верстальщиком, чтобы он мог сам сверстать то, что нарисовал (пусть не быстро и не на 100% валидно, но уметь).
  • Элементы навигации типа стрелок, иконок хорошо бы получать в отдельном PSD или TIFF формате на прозрачном фоне.

Минимальный комплект материала для передачи верстальщику

  • Макет в формате PSD или TIFF.
  • Шрифты.
  • Иконки.
  • favicon.ico (если нет возможности в ICO, то можно в PNG-24).
  • Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.

Спасибо beliyadm, poizon и Mitrich за дополнения.

Технические требования по дизайну сайта

Подскажите какие требования к дизайну надо соблюдать, чтобы не создавать проблем верстальщикам?

Что есть смысл почитать, чтобы понимать это глубже.

Есть ли стандартные шаблоны используя которые можно создавать удобный для верстки дизайн?

vertikal-nik, в профиле littlewd есть ссылка на его блог. Там много статей как раз по вашему вопросу.
Также есть хорошая статья на Хабре:
http://habrahabr.ru/post/220681/

Ma_Rgo, зря вы так. Поверьте, даже от дизайнеров с большим портфолио и отзывами 100+ приходят макеты с размерами блоков 499px, шрифтов 14.4567px и неправильно расставленными направляющими. А отсутствие на макете всех состояний кнопок — это вообще, как здрасьте.
Но далеко не все из них заботятся этой темой.

vovka-morkovka, вот и я о том же. Сперва «лепим», а потом теорию изучаем.

Кстати, направляющие, дизайнер чаще всего ставит так, как ему удобно, например отмеряя расстояние. Верстальщик вправе их переустановить. Тем боле дизайнер только предполагает, как будет верстать (резать) верстальщик, но на практике сделать он это может по другому.

Похожие статьи:

  • Штраф продавца за продажу алкоголя несовершеннолетним Как не получить штраф за продажу алкоголя несовершеннолетним? В Российской Федерации продажа алкоголя является особым видом деятельности. Под «особенностью» подразумевается обязательное […]
  • Расчитать госпошлина в арбитражный суд Калькулятор госпошлины в арбитражный суд Калькулятор госпошлины в арбитражный суд — надежный помощник в ваших расчетах. Госпошлина за подачу искового заявления в арбитражный суд […]
  • Протокол принятия устного заявления образец Протокол принятия устного заявления о преступлении, поступившего в органы дознания Вооруженных Сил Российской Федерации Тип документа: Протокол Для того, чтобы сохранить образец этого […]
  • Можно ли вернуть дарственную обратно Можно ли и как вернуть подаренную квартиру обратно дарителю Иногда может появиться необходимость вернуть квартиру обратно дарителю. Как это сделать, зависит от нюансов и особенностей […]
  • Разорвать брачный договор Как расторгнуть брачный договор? Брачный договор возможно расторгнуть по соглашению его сторон или в судебном порядке. Отметим также, что действие брачного договора прекращается с момента […]
  • Транспортный налог в топливе Налог на транспорт: в каждой капле топлива? Налог на автомобиль будет существенно реконструирован в текущем году. Налогообложение автомобилей планируется приблизить к европейскому образцу, […]
Перспектива. 2019. Все права защищены.