Набор правил оформления веб-страниц

Набор правил оформления веб-страниц

Интерактивное агентство Nimax

B CA

01 Основа

NIMAX

NIMAX

В основе дизайна — сетка из 12 колонок с разделителями в 25 px.

01 Основа Модульная сетка

25 px 967 px

642 px

325 px

NIMAX

Ширина колонки зависит от разрешения монитора. При разрешении меньше 760 px сетка уменьшается до 6 колонок.


967 px

NIMAX

Сетка позволяет строить информационные блоки с разными пропорциями, лучше использовать простые компоновки.

01 Основа Блоки

10 px

NIMAX

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

01 Основа Интерлиньяжная сетка

На сайте две навигационные зоны — основное меню и рубрикатор.

01 Основа Меню

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

HR-раздел о работе у нас и в Digital.

Объединённый блогкомпаний Nimax, Science, Topright.

в СПб Веб-разработка

Основной сайт Nimax.ru

Сайт про интернет-рекламу Topright.ru

Брендинговое агентство Welovescience.ru

Интернет-реклама Брендинг Обучение Среда и работа Блог

Агентство

Процессы

Проекты

Контакты

При построении модульной сетки нужно учитывать основное меню, которое всегда занимает 204 px,если разрешение выше 1200 px.


1200 px

в СПб Веб-разработка Интернет-реклама Брендинг Обучение Среда и работа Блог

1010 px

204 px

Агентство

Процессы

Проекты

Контакты

NIMAX

1600 px

1280 px 1024 px

768 px

320 px

Поведение меню при различных разрешениях

В зависимости от ширины экрана или устройства основное меню и рубрикатор ведут себя по-разному. Если разрешение меньше 1200 px, основное меню становится уже, 1000 px — смещается наверх, меньше 400 px — сворачивается под кнопку.


Состояние меню зависит от разрешения экрана.


Агентство

Процессы

Проекты

Контакты

80 px

25 px

30 px

в Санкт-Петербурге

76 px

в СБб

Агентство

Процессы

Проекты

Контакты

24 px

Внутренние разделы сайта доступны из основного меню.


3 городаДостиженияКлиентыКомандаПрезентация

Агентство

Процессы

Проекты

Контакты

3 городаДостиженияКлиентыКомандаПрезентация

Агентство

Процессы

Проекты

Контакты

Адаптивное поведение рубрикатора.


в Санкт-Петербурге Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.

в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.

02 Построение блоков

NIMAX

ШрифтыОсновопологающая графикаБлоки информацииКомпоновка страницСборки

В новом стиле Nimax используется жирное начертание шрифта, которое создаёт сильный контраст со светлым фоном. Основным и единственным шрифтом является Roboto.

Roboto RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+Roboto BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+

Roboto BlackABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+

02 Построение блоков Шрифты

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

70 px межстрочное / -25 px межбуквенноеRoboto Black 80 px50 px межстрочное / -10 px межбуквенноеRoboto Black 60 px35 px межстрочное / -10 px межбуквенноеRoboto Black 30 px

25 px межстрочное / -25 px межбуквенноеRoboto Black 20 px

25 px межстрочное / -25 px межбуквенноеRoboto Regular 20 px



20 px межстрочное / +10 px межбуквенноеROBOTO BLACK CAPITALISED 18 px

02 Построение блоков Шрифты

NIMAX

Информационный поток сопровождается точками, линиями, стрелками — это основные графические элементы нового фирменного стиля.

Шаг 1 Шаг 2 Шаг 3

02 Построение блоков Графика

1 2 3

NIMAX

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

Для того, чтобы обеспечить комплексное обслуживание наших клиентов у нас есть:


4 px

4 px

2 px

NIMAX

Агентство интернет-рекламы Брендинговое агентство

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

Научный подход к брендингу и само-идентификации бизнеса.

Для комплексного обслуживаниянаших клиентов у нас есть:

Агентство интернет-рекламы

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

ПРОЕКТЫ

Дипломы и сертификаты

Яндекс.ДиректСертифицированныеспециалисты.

BegunАккредитованное агентство.

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


10 px

20 px

70 px

70 px 20 px

20 px

20 px

10 px

Особенностипроизводства

20 px

20 px

Примеры компоновок в блоках


NIMAX

21 декабря

Лекция в школеEpic SkillsПартнёрский семинар Битрикс

ИннокентийНестеренко

Руководительрекламного отдела

Мы применяем самыесовременные практики управления проектами и разработки.

20 px

20 px

20 px

20 px

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

Если такого текста нет, то отступ от основного текста должен быть не менее 50 px.

20 px

70 px 40 px

Заголовок всегда прибивается к линии и вместе с ней отделяется от основного текста. Если линии нет, заголовок и текст идут неразрывно.


NIMAX

Контентные проекты

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

Контентные проекты

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

Кнопки бывают двух видов (основные и стандартные) и двух размеров (большие и маленькие). У основных кнопок чёрный фон и белый шрифт, у стандартных — чёрная обводка и чёрный шрифт. Большие кнопки имеют высоту в 50 px, маленькие — 40 px.

Большие кнопки используются в call-to-action связках и логических цепочках. Маленькие используются в формах (у них та же высота, что и у поля ввода) и внутри таблиц.

02 Построение блоков Графика. Кнопки.

NIMAX

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

02 Построение блоков Списки

NIMAX

02 Построение блоков Ховеры

NIMAX

Ховеры в блоках

Пример компоновки страницы



Агентство

Процессы

Проекты

Контакты

3 ГОРОДА

Офисы компании расположены в трёх городах

Так мы становимся ближе к московским и региональным клиентам — регулярные личные встречи упрощают коммуникации и повышают эффективность проектов.

1 Москва 2 Санкт-Петербург 3 Новосибирск

Мы ведем продажи и обеспечиваем постоянный аккаунтинг проектов в московском офисе.

msk.nimax.ru nimax.ru nsk.nimax.ru

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

Суровые сибирские верстальщики и программисты работают в нашем новосибирском офисе.

Пример компоновки страницы



Агентство

Процессы

Проекты

Контакты

ТРИ ГОРОДА

1

Интерфейсные проекты

Информационные системы и сервисы на веб-основе, которые гораздо ближе к софту, чем к обычным сайтам.

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

Собираем требования от всех заинтересованных сторон и определяем KPI для оценки успешности проекта.

Что изучаем?

Онлайн-сервисы, стартапы.

Системы управления проектами и CRM.

Системы онлайн-бронирования.

Личные кабинеты и бэкофисы сайтов.

Калькуляторы и конфигураторы.

Примеры интерфейсных проектов

Этапы работ над проектом

Собираем требования к проекту

2Продукт.

Бизнес-процессы.

Потребности и поведение пользователей.

Особенности интеграции с внешними системами.

Результат: бриф и документ с выводами исследований

Встреча: обсуждаем с клиентом

выводы

Срок: 1 неделя.

Изучение продуктаи пользователей

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


Дизайн сайта

в Санкт-Петербурге Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.NIMAX

Дизайн сайта

На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики.



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

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

Design

Набор правил оформления веб-страниц