Набор правил оформления веб-страниц - Интерактивное агентство Nimax
←
→
Транскрипция содержимого страницы
Если ваш браузер не отображает страницу правильно, пожалуйста, читайте содержимое страницы ниже
01 Основа NI M A X
01 Основа Модульная сетка В основе дизайна лежит 12-ти колонная модульная сетка с разделителями в 25 пикселей 25 px 967 px NI M A X
01 Основа Модульная сетка Сетка принимает разную ширину колонки, в зависимости от разрешения монитора. При разрешении меньше 760 пикселей сетка уменьшается до 6-ти колонок 967 px 642 px 325 px NI M A X
01 Основа Блоки Сетка позволяет строить информационные блоки с разными пропорциями, однако предпочтительнее использовать простые компоновки NI M A X
01 Основа Интерлиньяжная сетка Для вертикального выравнивания всех блоков используется интерлиньяжная сетка в 10 px. Нет необходимости строго привязывать всю типографику к этой сетке, однако её использование помогает поддержать вертикальный ритм на странице. 10 px NI M A X
01 Основа Меню На сайте существует две основные навигационные зоны — основное меню и рубрикатор. Отдельный сайт про корпоративное обучение, видеоролики, Общий 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 X
01 Основа Модульная сетка Меню отображается по разному в зависимости от разрешения экрана 30 px 76 px в Санкт-Петербурге 80 px в СБб Агентство Агентство 25 px Процессы Процессы Проекты Проекты Контакты Контакты
01 Основа Модульная сетка В основном меню предусмотрен второй уровень для внутренних разделов сайта. 24 px Агентство Агентство 3 города 3 города Достижения Достижения Клиенты Клиенты Команда Команда Презентация Презентация Процессы Процессы Проекты Проекты Контакты Контакты
01 Основа Модульная сетка Адаптивное поведение рубрикатора в Санкт-Петербурге N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог в СПб N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог
02 Построение блоков Шрифты Основопологающая графика Блоки информации Компоновка страниц Сборки NI M A X
02 Построение блоков Шрифты В новом стиле 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 X
02 Построение блоков Графика Эта простая схема показывает всю суть нового фирменного стиля. Основная концепция заключается в сопровождении информационного потока ключевыми точками, линиями и стрелками. 1 2 3 Шаг 1 Шаг 2 Шаг 3 NI M A X
02 Построение блоков Графика Чтобы поддержать основопологающую концепцию, информационные блоки дробятся линиями в 4 и 2px. Независимо от структуры страницы чёрные линиии должны быть частью графики. 4px Для того, чтобы обеспечить комплексное обслуживание наших клиентов у нас есть: Агентство интернет-рекламы Брендинговое агентство 2px Одно из лучших агентств Научный подход к брендингу Петербурга предложит вам и само-идентификации стратегию и сделает вашу бизнеса. рекламу эффективной. 4px NI M A X
02 Построение блоков Графика Так как весь стиль типографики основан на больших заголовках, жирных шрифтах и плотном трекинге, все расстояния и отступы должны быть пропорциональными. ПРОЕКТЫ 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 X
02 Построение блоков Графика Заголовок всегда прибивается к линии и вместе с ней отделяется от основного текста. Если линии нет, заголовок и текст идут неразрывно. 20 px Контентные проекты Контентные проекты 40 px 70 px Это все те проекты, для которых важно Это все те проекты, для которых важно продумать и создать контент: тексты, продумать и создать контент: тексты, графику, видео и другие материалы, а графику, видео и другие материалы, а затем скомпоновать их в убедительные затем скомпоновать их в убедительные страницы. Такие проекты требуют страницы. Такие проекты требуют подробного изучения вашего бизнеса, подробного изучения вашего бизнеса, рынка и конкурентной среды, а также рынка и конкурентной среды, а также разработки информационной разработки информационной архитектуры. архитектуры. NI M A X
02 Построение блоков Графика. Кнопки. Кнопки бывают двух видов (основные и стандартные) и двух размеров (большие и маленькие). У основных кнопок чёрный фон и белый шрифт, у стандартных — чёрная обводка и чёрный шрифт. Большие кнопки имеют высоту в 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.ru
02 Построение блоков Графика Пример компоновки страницы в СПб N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог ТРИ ГОРОДА Агентство Процессы Интерфейсные Проекты проекты Контакты Информационные системы Для таких проектов мы подготовили Примеры интерфейсных проектов и сервисы на веб-основе, отдельный процесс, влючающий в Онлайн-сервисы, стартапы. которые гораздо ближе себя проектирование интерфейсов и их тестирование. Работа над такими Системы управления проектами к софту, чем к обычным проектами ведется итерациями, и CRM. сайтам. разработка может быть выполнена Системы онлайн-бронирования. как нашими силами, так и заменена на контроль внедрения если у вас Личные кабинеты и бэкофисы есть своя команда программистов. сайтов. Калькуляторы и конфигураторы. Этапы работ над проектом 1 Собираем требования к проекту Собираем требования от всех заинтересованных сторон и определяем KPI для оценки успешности проекта. 2 Изучение продукта и пользователей Что изучаем? Результат: бриф и документ Продукт. с выводами исследований Бизнес-процессы. Встреча: обсуждаем с клиентом Потребности и поведение выводы пользователей. Особенности интеграции Срок: 1 неделя. с внешними системами.
02 Построение блоков Графика Для представления кейсов в портфолио используются максимально простые блочные структуры. NIMAX в Санкт-Петербурге N Веб-разработка Интернет-реклама s. Брендинг Обучение Среда и работа Блог Дизайн сайта В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. Дизайн сайта На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики.
Вы также можете почитать