Гайдлайн для обновлённого сайта Nimax.

1. Набор правил
оформления
веб-страниц
Интерактивное агентство Nimax
B CA

2. 01 Основа
NIMAX

3. NIMAX
В основе дизайна — сетка из 12 колонок
с разделителями в 25 px.
01 Основа Модульная сетка
25 px 967 px

4. 642 px
325 px
NIMAX
Ширина колонки зависит от разрешения монитора.
При разрешении меньше 760 px сетка уменьшается
до 6 колонок.
01 Основа Модульная сетка
967 px

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

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

7. На сайте две навигационные зоны —
основное меню и рубрикатор.
01 Основа Меню
Отдельный сайт
о корпоративном обучении,
с видеороликами,
презентациями и отчётами
о мероприятиях.
HR-раздел
о работе у нас
и в Digital.
Объединённый блог
компаний Nimax,
Science, Topright.
в СПб Веб-разработка
Основной сайт
Nimax.ru
Сайт про
интернет-рекламу
Topright.ru
Брендинговое
агентство
Welovescience.ru
Интернет-реклама Брендинг Обучение Среда и работа Блог
Агентство
Процессы
Проекты
Контакты

8. При построении модульной сетки нужно учитывать
основное меню, которое всегда занимает 204 px,
если разрешение выше 1200 px.
01 Основа Модульная сетка
1200 px
в СПб Веб-разработка Интернет-реклама Брендинг Обучение Среда и работа Блог
1010 px
204 px
Агентство
Процессы
Проекты
Контакты

9. NIMAX
1600 px
1280 px
1024 px
768 px
320 px
Поведение меню при
различных разрешениях
В зависимости от ширины экрана или устройства
основное меню и рубрикатор ведут себя
по-разному. Если разрешение меньше 1200 px,
основное меню становится уже, 1000 px —
смещается наверх, меньше 400 px —
сворачивается под кнопку.
01 Основа Модульная сетка

10. Состояние меню зависит от разрешения экрана.
01 Основа Модульная сетка
Агентство
Процессы
Проекты
Контакты
80 px
25 px
30 px
в Санкт-Петербурге
76 px
в СБб
Агентство
Процессы
Проекты
Контакты

11. 24 px
Внутренние разделы сайта доступны
из основного меню.
01 Основа Модульная сетка
3 города
Достижения
Клиенты
Команда
Презентация
Агентство
Процессы
Проекты
Контакты
3 города
Достижения
Клиенты
Команда
Презентация
Агентство
Процессы
Проекты
Контакты

12. Адаптивное поведение рубрикатора.
01 Основа Модульная сетка
в Санкт-Петербурге Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.
в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.

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

14. В новом стиле Nimax используется жирное начертание
шрифта, которое создаёт сильный контраст со светлым
фоном. Основным и единственным шрифтом
является Roboto.
Roboto Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
Roboto Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
Roboto Black
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
02 Построение блоков Шрифты

15. Для заголовков и вступительных фраз всегда
используются большой кегль и жирное начертание.
Основные размеры:
70 px межстрочное / -25 px межбуквенное
Roboto Black 80 px
50 px межстрочное / -10 px межбуквенное
Roboto Black 60 px
35 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 Regular 16 px
20 px межстрочное / -10 px межбуквенное
Roboto Regular 16 px
20 px межстрочное / +10 px межбуквенное
ROBOTO BLACK CAPITALISED 18 px
02 Построение блоков Шрифты
NIMAX

16. Информационный поток сопровождается точками,
линиями, стрелками — это основные графические
элементы нового фирменного стиля.
Шаг 1 Шаг 2 Шаг 3
02 Построение блоков Графика
1 2 3
NIMAX

17. Чтобы поддержать основополагающую концепцию,
информационные блоки дробятся линиями в 4 и 2 px
шириной. Чёрные линии используются на всех
страницах, независимо от их структуры.
Для того, чтобы обеспечить комплексное
обслуживание наших клиентов у нас есть:
02 Построение блоков Графика
4 px
4 px
2 px
NIMAX
Агентство интернет-рекламы Брендинговое агентство
Одно из лучших агентств
Петербурга предложит вам
стратегию и сделает вашу
рекламу эффективной.
Научный подход к брендингу
и само-идентификации
бизнеса.

18. Для комплексного обслуживания
наших клиентов у нас есть:
Агентство интернет-рекламы
Одно из лучших агентств
Петербурга предложит вам
стратегию и сделает вашу
рекламу эффективной.
ПРОЕКТЫ
Дипломы и сертификаты
Яндекс.Директ
Сертифицированные
специалисты.
Begun
Аккредитованное
агентство.
При таких жирных начертаниях, контрастных заголовках
и плотном трекинге важно строго соблюдать
пропорциональные расстояния и отступы.
02 Построение блоков Графика
10 px
20 px
70 px
70 px
20 px
20 px
20 px
10 px

19. Особенности
производства
20 px
20 px
Примеры компоновок
в блоках
02 Построение блоков Графика
NIMAX
21 декабря
Лекция в школе
Epic Skills
Партнёрский семинар Битрикс
Иннокентий
Нестеренко
Руководитель
рекламного отдела
Мы применяем самые
современные практики
управления проектами
и разработки.
20 px
20 px
20 px
20 px
Важно: Если в блоке присутствуют
подписи, дата, имена, ссылки
или любая другая сопроводительная
информация, этот текст отбивается
большим отступом от основного
и прибивается к нижней части блока.
Если такого текста нет, то отступ
от основного текста должен быть
не менее 50 px.

20. 20 px
70 px
40 px
Заголовок всегда прибивается к линии и вместе
с ней отделяется от основного текста. Если линии нет,
заголовок и текст идут неразрывно.
02 Построение блоков Графика
NIMAX
Контентные проекты
Это все те проекты, для которых важно
продумать и создать контент: тексты,
графику, видео и другие материалы,
а затем скомпоновать их
в убедительные страницы. Такие
проекты требуют подробного изучения
вашего бизнеса, рынка и конкурентной
среды, а также разработки
информационной архитектуры.
Контентные проекты
Это все те проекты, для которых важно
продумать и создать контент: тексты,
графику, видео и другие материалы,
а затем скомпоновать их
в убедительные страницы. Такие
проекты требуют подробного изучения
вашего бизнеса, рынка и конкурентной
среды, а также разработки
информационной архитектуры.

21. Кнопки бывают двух видов (основные и стандартные) и двух
размеров (большие и маленькие). У основных кнопок чёрный фон
и белый шрифт, у стандартных — чёрная обводка и чёрный шрифт.
Большие кнопки имеют высоту в 50 px, маленькие — 40 px.
Большие кнопки используются в call-to-action связках и логических
цепочках. Маленькие используются в формах (у них та же высота,
что и у поля ввода) и внутри таблиц.
02 Построение блоков Графика. Кнопки.
NIMAX

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

23. 02 Построение блоков Ховеры
NIMAX
Ховеры в блоках

24. Пример компоновки страницы
02 Построение блоков Графика
в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.
Агентство
Процессы
Проекты
Контакты
3 ГОРОДА
Офисы компании расположены
в трёх городах
Так мы становимся ближе
к московским и региональным
клиентам — регулярные личные
встречи упрощают
коммуникации и повышают
эффективность проектов.
1 Москва 2 Санкт-Петербург 3 Новосибирск
Мы ведем продажи
и обеспечиваем постоянный
аккаунтинг проектов
в московском офисе.
msk.nimax.ru nimax.ru nsk.nimax.ru
Отличные дизайнеры,
проектировщики, рекламный
отдел и руководство находятся
в Петербурге.
Суровые сибирские
верстальщики и программисты
работают в нашем
новосибирском офисе.

25. Пример компоновки страницы
02 Построение блоков Графика
в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.
Агентство
Процессы
Проекты
Контакты
ТРИ ГОРОДА
1
Интерфейсные
проекты
Информационные системы
и сервисы на веб-основе,
которые гораздо ближе
к софту, чем к обычным
сайтам.
Для таких проектов мы подготовили
отдельный процесс, вrлючающий
в себя проектирование интерфейсов
и их тестирование. Работа над
такими проектами ведется
итерациями, разработка может быть
выполнена как нашими силами, так
и заменена на контроль внедрения
если у вас есть своя команда.
Собираем требования от всех
заинтересованных сторон
и определяем KPI для оценки
успешности проекта.
Что изучаем?
Онлайн-сервисы, стартапы.
Системы управления проектами
и CRM.
Системы онлайн-бронирования.
Личные кабинеты и бэкофисы
сайтов.
Калькуляторы и конфигураторы.
Примеры интерфейсных проектов
Этапы работ над проектом
Собираем требования
к проекту
2
Продукт.
Бизнес-процессы.
Потребности и поведение
пользователей.
Особенности интеграции
с внешними системами.
Результат: бриф и документ
с выводами исследований
Встреча: обсуждаем с клиентом
выводы
Срок: 1 неделя.
Изучение продукта
и пользователей

26. Для представления кейсов в портфолио используются
максимально простые блочные структуры.
02 Построение блоков Графика
Дизайн сайта
в Санкт-Петербурге Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.NIMAX
Дизайн сайта
На главную страницу мы предлагаем вынести основную
информацию о Russian Code Cup со ссылками на страницы
с более подробным содержанием. В зависимости от этапа
проведения чемпионата, на главную страницу добавляются
анонсы, ссылки на форму регистрации или подтверждения
участия и счетчики.
На главную страницу мы предлагаем вынести основную
информацию о Russian Code Cup со ссылками на страницы
с более подробным содержанием. В зависимости от этапа
проведения чемпионата, на главную страницу добавляются
анонсы, ссылки на форму регистрации или подтверждения
участия и счетчики.
На главную страницу мы предлагаем вынести основную
информацию о Russian Code Cup со ссылками на страницы
с более подробным содержанием. В зависимости от этапа
проведения чемпионата, на главную страницу добавляются
анонсы, ссылки на форму регистрации или подтверждения
участия и счетчики.
В зависимости от этапа проведения чемпионата, на главную
страницу добавляются анонсы, ссылки на форму регистрации
или подтверждения участия и счетчики.
В зависимости от этапа проведения чемпионата, на главную
страницу добавляются анонсы, ссылки на форму регистрации
или подтверждения участия и счетчики.