2. СИСТЕМА ПРЕДСТАВЛЕНИЯ Д АННЫХ В ГИПЕРТЕКСТЕ
В этом руководстве • Типографика. • Оформление списков: людей, событий,
описываются основные компаний, новостей. Пагинаторы.
• Виды ссылок и правила их оформления.
элементы веб страниц и • Буллиты.
способы их использования. • Оформление списков.
• Примеры верстки текстовых • Фичуред элементы.
Основано на twitter/bootstrap. материалов • Правила оформления пользовательских
карточек.
• Кнопки и формы
• Выносные комментарии • Чекбоксы и радиокнопки и правила
представления экранов настройки.
• Выносные данные для аггрегации Хлебные крошки и навигация в
Оформление различных типов данных: близлежащих элементах.
блоги, статьи, отчеты, события и
подобные. • Правила по созданию новых разделов и
места их интеграции.
• Таблицы
• Правила связи выносных элементов
• Галереи и иллюстрации контента с главной страницы. Правила
• Рыбные стилеобразующие оформления текущих соц.аккаунтов
иллюстрации. и инструкции + элементы для
оформления последующих.
• Диалоги ожидания загрузки.
• Инструментарий редактирования
• 404 страница для сообщества и для и представление элементов
головного сайта с входом и выходами. администрирования.
( Должна понимать опечатки в URL и
предлагать переходы) • Правила использования иконок и
пиктограмм.
• Структуры навигации для нескольких
уровней вложенности (Верхний • Наборы иконок и пиктограмм для
уровень, внутри разделов и тд) типовых задач. (Аналог helveticons
подготовленный для использования
• Правила адаптивной реструктуризации любой структурой в векторе +
представления в условиях маленьких растровые)
экранов и мобильных устройств
3. ТИПОГРАФИК А
Как верстать текст?
Обычный текстовый блок состоит из
h1. Размер 1 (42пикс.)
двух сущностей: заголовка и текста.
Размер шрифта, кегль для текстового
h2. Размер 2 (24 пикс.)
блока: 14, в редких случаях 13 или 12.
h3. Размер 3 (18 пикс.)
Подсказки и тизеры допустимо
набирать 10, 11 или 18 кеглем. h4. Размер 4 (14 пикс.)
Рабочие шрифты: pt sans, helvetica или h5. Размер 5 (12 пикс.)
arial. H6. РА ЗМЕР 6 (10 ПИКС.)
Большие новости достойны БОЛЬШИХ
ЗАГОЛОВКОВ в несколько строк.
Можно набирать и очень большие заголовки когда это нужно. Главное учитывать то, что вес заголовка всегда должен
составлять не более 25% от веса текстового блока. Поэтому дальнеший текст не имеет особого смысла и написан только
для того, чтобы уравновесить пропорции текстового блока к заголовку.
Междустрочное расстояние 16,8 пикслей. Кернинг оптический. После абзаца необходимо делать дополнительный отступ
в 10 пикселей.
4. ВИДЫ ССЫЛОК И ПРАВИЛА ИХ ОФОРМЛЕНИЯ.
« Ссылки всегда должны быть подчеркнуты, даже
если это кажется кому-то некрасивым. Заголовок ссылка
Нельзя подчеркивать на вебе текст, который не
является ссылкой.
Подсвеченный заголовок
Убирание подчеркивания у ссылки при
подведении курсора — глупость. Заголовок ссылка
Активные ссылки всегда должны быть синего Подсвеченный заголовок
цвета (как исключение — черные или темно-
серые). Посещенные ссылки должны быть
сиреневого цвета. Ссылки других цветов Активный заголовок ссылка
гарантированно сбивают с толка читателя.
Цвет, отведенный для ссылок, не должен
использоваться для других элементов.
Хорошо и правильно подсвечивать ссылку
Активный заголовок ссылка
красным или оранжевым при подведении к ней
курсора. Как вариант — подсвечивать фон или
рамку вокруг.
Обычная ссылка
Пунктирная ссылка означает, что нажатие на
текст произведет некое действие (откроется
Посещенная ссылка
калькулятор, приедет подсказка, раскроется Подсвеченная ссылка, наведена мышь
подробность), а повторное нажатие вернет все в
исходное состояние.
Пунктирные ссылки не должны переносить Техническая ссылка — якорь или переключатель контентного поля
читателя на другую страницу. А сплошное Техническая ссылка — подсвеченная
подчеркивание, в свою очередь, нельзя
использовать для временно вызываемых Техническая ссылка — включенная
элементов.
Проверка дизайна на правильность проста: если Альтернативная техническая ссылка
зритель, не притрагиваясь к мыши, может угадать,
где ссылка, а где нет, — перед нами хороший сайт.
Это правило перевешивает все остальные. » Альтернативная активная техническая ссылка
Ководство § 171. Правила оформления ссылок
Альтернативная недоступная техническая ссылка
Артемий Лебедев
5. ОФОРМЛЕНИЕ СПИСКОВ
Многоуровневые списки В остальных случая списки Если в списке подразумеваются Списки могут состять из ссылок.
с иерархией крайне не можно использовать как удобный фаилы необходимо вместо Лучше всего к ссылкам давать
рекомендуется использовать инструмент показа глубины буллитов ставить иконки комментарии, как в блочном
в формах фильтрации и как вложенности данных. формата вложений. списке.
элемент навигации если уровней
вложенности более 2.
Заголовки примеров — h2. Размер 2 (24 пикс.)
Обычный текст набора и жирный (14 пикс.)
Средний шаг отступа от левого края (10 пикс.)
Цвет выносных элементов списка #666666
