Набор правил оформления веб-страниц - Интерактивное агентство Nimax
←
→
Транскрипция содержимого страницы
Если ваш браузер не отображает страницу правильно, пожалуйста, читайте содержимое страницы ниже
A B C Набор правил оформления веб-страниц Интерактивное агентство Nimax
01 Основа NI M A X
01 Основа Модульная сетка
В основе дизайна лежит 12-ти
колонная модульная сетка с
разделителями в 25 пикселей
25 px 967 px
NI M A X01 Основа Модульная сетка
Сетка принимает разную ширину колонки,
в зависимости от разрешения монитора.
При разрешении меньше 760 пикселей сетка
уменьшается до 6-ти колонок
967 px
642 px
325 px
NI M A X01 Основа Блоки Сетка позволяет строить информационные блоки с разными пропорциями, однако предпочтительнее использовать простые компоновки NI M A X
01 Основа Интерлиньяжная сетка
Для вертикального выравнивания всех блоков
используется интерлиньяжная сетка в 10 px. Нет
необходимости строго привязывать всю типографику
к этой сетке, однако её использование помогает
поддержать вертикальный ритм на странице.
10 px
NI M A X01 Основа Меню
На сайте существует две
основные навигационные зоны —
основное меню и рубрикатор. Отдельный сайт
про корпоративное
обучение, видеоролики, Общий HR-раздел
резентации и лекцион- о работе у нас и
ную активность. в Digital вообще. Общий блог.
в СПб Веб-разработка Интернет-реклама Брендинг Обучение Среда и работа Блог
Агентство
Основной сайт Сайт про Брендинговое
Nimax.ru интернет-рекламу агентство
Процессы Topright.ru Welovescience.ru
Проекты
Контакты01 Основа Модульная сетка
При построении модульной сетки нужно учитывать
основное меню, которое всегда занимает 204 px при
разрешении свыше 1200 px
1200 px
204 px
в СПб Веб-разработка Интернет-реклама Брендинг Обучение Среда и работа Блог
Агентство
1010 px
Процессы
Проекты
Контакты01 Основа Модульная сетка
Поведение меню при В зависимости от ширины экрана или устройства
основное меню и рубрикатор ведут себя по
различных разрешениях разному. При разрешении меньше 1200 основное
меню становится уже, при 1000 смещается наверх,
а при менее 400 сворачивается под кнопку.
1024 px
1280 px
1600 px
320 px
768 px
NI M A X01 Основа Модульная сетка
Меню отображается по разному в
зависимости от разрешения экрана
30 px
76 px
в Санкт-Петербурге 80 px в СБб
Агентство Агентство
25 px
Процессы Процессы
Проекты Проекты
Контакты Контакты01 Основа Модульная сетка
В основном меню предусмотрен второй
уровень для внутренних разделов сайта.
24 px
Агентство Агентство
3 города 3 города
Достижения Достижения
Клиенты Клиенты
Команда Команда
Презентация Презентация
Процессы Процессы
Проекты Проекты
Контакты Контакты01 Основа Модульная сетка Адаптивное поведение рубрикатора в Санкт-Петербурге N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог в СПб N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог
02 Построение блоков
Шрифты
Основопологающая графика
Блоки информации
Компоновка страниц
Сборки
NI M A X02 Построение блоков Шрифты В новом стиле Nimax используется жирное начертание шрифта, которое создаёт большой контраст со светлым фоном. Основным и единственным шрифтом является Roboto Roboto Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+ Roboto Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+ Roboto Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+
02 Построение блоков Шрифты
Для заголовков и вступительных фраз всегда
используются большие начертания шрифта.
Вот основные размеры:
Roboto Black 80px
70px межстрочное / -25px межбуквенное
Roboto Black 20px
25px межстрочное / -25px межбуквенное
Roboto Regular 20px
25px межстрочное / -25px межбуквенное
Roboto Black 60px
50px межстрочное / -10px межбуквенное
Roboto Regular 16px
20px межстрочное / -10px межбуквенное
Roboto Regular 16px
Roboto Black 30px 20px межстрочное / -10px межбуквенное
35px межстрочное / -10px межбуквенное
ROBOTO BLACK CAPITALISED 18px
20px межстрочное / +10px межбуквенное
NI M A X02 Построение блоков Графика Эта простая схема показывает всю суть нового фирменного стиля. Основная концепция заключается в сопровождении информационного потока ключевыми точками, линиями и стрелками. 1 2 3 Шаг 1 Шаг 2 Шаг 3 NI M A X
02 Построение блоков Графика
Чтобы поддержать основопологающую концепцию,
информационные блоки дробятся линиями в 4 и 2px.
Независимо от структуры страницы чёрные линиии
должны быть частью графики.
4px
Для того, чтобы обеспечить комплексное
обслуживание наших клиентов у нас есть:
Агентство интернет-рекламы Брендинговое агентство
2px
Одно из лучших агентств Научный подход к брендингу
Петербурга предложит вам и само-идентификации
стратегию и сделает вашу бизнеса.
рекламу эффективной.
4px
NI M A X02 Построение блоков Графика
Так как весь стиль типографики основан на больших
заголовках, жирных шрифтах и плотном трекинге, все
расстояния и отступы должны быть пропорциональными.
ПРОЕКТЫ
10 px
20 px 20 px
Дипломы и сертификаты Для комплексного обслуживания
70 px
наших клиентов у нас есть:
70 px
20 px
Яндекс.Директ Begun
20 px 10 px
Агентство интернет-рекламы
Сертифицированные Аккредитованное
специалисты. агентство.
Одно из лучших агентств
Петербурга предложит вам
стратегию и сделает вашу
рекламу эффективной.02 Построение блоков Графика
Пример компоновок Важно: Если в блоке присутствуют
подписи, дата, имена, ссылки или
Если такого текста нет, то отступ от
основного текста должен быть как
внутри блоков любая другая сопроводительная
информация, этот текст отбивается
минимум в 50px
большим отступом от основного и
прибивается к нижней части блока.
20 px 20 px
20 px 20 px
21 декабря Особенности Мы применяем самые
современные практики
производства управления проектами
Лекция в школе и разработки.
20 px
Epic Skills
Партнёрский семинар Битрикс
Иннокентий Руководитель
Нестеренко рекламного отдела
20 px
NI M A X02 Построение блоков Графика
Заголовок всегда прибивается к линии и вместе
с ней отделяется от основного текста. Если линии нет,
заголовок и текст идут неразрывно.
20 px
Контентные проекты Контентные проекты
40 px
70 px
Это все те проекты, для которых важно
Это все те проекты, для которых важно продумать и создать контент: тексты,
продумать и создать контент: тексты, графику, видео и другие материалы, а
графику, видео и другие материалы, а затем скомпоновать их в убедительные
затем скомпоновать их в убедительные страницы. Такие проекты требуют
страницы. Такие проекты требуют подробного изучения вашего бизнеса,
подробного изучения вашего бизнеса, рынка и конкурентной среды, а также
рынка и конкурентной среды, а также разработки информационной
разработки информационной архитектуры.
архитектуры.
NI M A X02 Построение блоков Графика. Кнопки. Кнопки бывают двух видов (основные и стандартные) и двух размеров (большие и маленькие). У основных кнопок чёрный фон и белый шрифт, у стандартных — чёрная обводка и чёрный шрифт. Большие кнопки имеют высоту в 50px, маленькие — 40px. Большие кнопки используются в call-to-action связках и логических цепочках. Маленькие используются в формах (у них та же высота, что и у поля ввода) и внутри таблиц. NI M A X
02 Построение блоков Списки Поле у ниспадающего списка может быть двух видов: с чёрной обводкой и чёрным шрифтом, и на чёрном фоне без обводки с белым шрифтом. NI M A X
02 Построение блоков Ховеры Ховеры в блоках NI M A X
02 Построение блоков Графика
Пример компоновки страницы
в СПб N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог
ТРИ ГОРОДА
Агентство
Процессы
Мы оптимизируем процессы, Размещая своих сотрудников
там, где можем найти лучших
а вместе с ними затраты специалистов, но удержать
расходы на разумном уровне
Проекты наших клиентов
Контакты
1 Москва 2 Санкт-Петербург 3 Новосибирск
В Москве мы ближе всего к Лучшие дизайнеры и Современный и наукоемкий
клиентам — это очень удобно проектировщики живут конечно Новосибирск — идеальное место
для них и для нас. в Петербурге. Руководство и для офиса разработки.
рекламный отдел агенттсва
тоже расположены здесь.
msk.nimax.ru nimax.ru nsk.nimax.ru02 Построение блоков Графика
Пример компоновки страницы
в СПб N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог
ТРИ ГОРОДА
Агентство
Процессы
Интерфейсные
Проекты проекты
Контакты
Информационные системы Для таких проектов мы подготовили Примеры интерфейсных проектов
и сервисы на веб-основе, отдельный процесс, влючающий в
Онлайн-сервисы, стартапы.
которые гораздо ближе себя проектирование интерфейсов и
их тестирование. Работа над такими Системы управления проектами
к софту, чем к обычным проектами ведется итерациями, и CRM.
сайтам. разработка может быть выполнена Системы онлайн-бронирования.
как нашими силами, так и заменена
на контроль внедрения если у вас Личные кабинеты и бэкофисы
есть своя команда программистов. сайтов.
Калькуляторы и конфигураторы.
Этапы работ над проектом
1 Собираем требования
к проекту
Собираем требования от всех
заинтересованных сторон и
определяем KPI для оценки
успешности проекта.
2 Изучение продукта
и пользователей
Что изучаем?
Результат: бриф и документ
Продукт. с выводами исследований
Бизнес-процессы. Встреча: обсуждаем с клиентом
Потребности и поведение
выводы
пользователей.
Особенности интеграции Срок: 1 неделя.
с внешними системами.02 Построение блоков Графика
Для представления кейсов в портфолио используются
максимально простые блочные структуры.
NIMAX в Санкт-Петербурге N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог
Дизайн сайта
В зависимости от этапа проведения чемпионата, на главную
страницу добавляются анонсы, ссылки на форму регистрации
или подтверждения участия и счетчики.
На главную страницу мы предлагаем вынести основную
информацию о Russian Code Cup со ссылками на страницы с
более подробным содержанием. В зависимости от этапа
проведения чемпионата, на главную страницу добавляются
анонсы, ссылки на форму регистрации или подтверждения
участия и счетчики.
Дизайн сайта
На главную страницу мы предлагаем вынести основную
информацию о Russian Code Cup со ссылками на страницы с
более подробным содержанием. В зависимости от этапа
проведения чемпионата, на главную страницу добавляются
анонсы, ссылки на форму регистрации или подтверждения
участия и счетчики.
В зависимости от этапа проведения чемпионата, на главную
страницу добавляются анонсы, ссылки на форму регистрации
или подтверждения участия и счетчики.
На главную страницу мы предлагаем вынести основную
информацию о Russian Code Cup со ссылками на страницы с
более подробным содержанием. В зависимости от этапа
проведения чемпионата, на главную страницу добавляются
анонсы, ссылки на форму регистрации или подтверждения
участия и счетчики.Вы также можете почитать
