Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,199 views

Published on

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

Published in: Design
  • Login to see the comments

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

  1. 1. Набор правил оформления веб-страниц Интерактивное агентство Nimax B CA
  2. 2. 01 Основа NIMAX
  3. 3. NIMAX В основе дизайна — сетка из 12 колонок с разделителями в 25 px. 01 Основа Модульная сетка 25 px 967 px
  4. 4. 642 px 325 px NIMAX Ширина колонки зависит от разрешения монитора. При разрешении меньше 760 px сетка уменьшается до 6 колонок. 01 Основа Модульная сетка 967 px
  5. 5. NIMAX Сетка позволяет строить информационные блоки с разными пропорциями, лучше использовать простые компоновки. 01 Основа Блоки
  6. 6. 10 px NIMAX Для вертикального выравнивания всех блоков используется интерлиньяжная сетка в 10 px. Нет необходимости строго привязывать всю типографику к этой сетке, однако, её использование помогает поддержать вертикальный ритм на странице. 01 Основа Интерлиньяжная сетка
  7. 7. На сайте две навигационные зоны — основное меню и рубрикатор. 01 Основа Меню Отдельный сайт о корпоративном обучении, с видеороликами, презентациями и отчётами о мероприятиях. HR-раздел о работе у нас и в Digital. Объединённый блог компаний Nimax, Science, Topright. в СПб Веб-разработка Основной сайт Nimax.ru Сайт про интернет-рекламу Topright.ru Брендинговое агентство Welovescience.ru Интернет-реклама Брендинг Обучение Среда и работа Блог Агентство Процессы Проекты Контакты
  8. 8. При построении модульной сетки нужно учитывать основное меню, которое всегда занимает 204 px, если разрешение выше 1200 px. 01 Основа Модульная сетка 1200 px в СПб Веб-разработка Интернет-реклама Брендинг Обучение Среда и работа Блог 1010 px 204 px Агентство Процессы Проекты Контакты
  9. 9. NIMAX 1600 px 1280 px 1024 px 768 px 320 px Поведение меню при различных разрешениях В зависимости от ширины экрана или устройства основное меню и рубрикатор ведут себя по-разному. Если разрешение меньше 1200 px, основное меню становится уже, 1000 px — смещается наверх, меньше 400 px — сворачивается под кнопку. 01 Основа Модульная сетка
  10. 10. Состояние меню зависит от разрешения экрана. 01 Основа Модульная сетка Агентство Процессы Проекты Контакты 80 px 25 px 30 px в Санкт-Петербурге 76 px в СБб Агентство Процессы Проекты Контакты
  11. 11. 24 px Внутренние разделы сайта доступны из основного меню. 01 Основа Модульная сетка 3 города Достижения Клиенты Команда Презентация Агентство Процессы Проекты Контакты 3 города Достижения Клиенты Команда Презентация Агентство Процессы Проекты Контакты
  12. 12. Адаптивное поведение рубрикатора. 01 Основа Модульная сетка в Санкт-Петербурге Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s. в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.
  13. 13. 02 Построение блоков NIMAX Шрифты Основопологающая графика Блоки информации Компоновка страниц Сборки
  14. 14. В новом стиле Nimax используется жирное начертание шрифта, которое создаёт сильный контраст со светлым фоном. Основным и единственным шрифтом является Roboto. Roboto Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+ Roboto Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+ Roboto Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()_+ 02 Построение блоков Шрифты
  15. 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. 16. Информационный поток сопровождается точками, линиями, стрелками — это основные графические элементы нового фирменного стиля. Шаг 1 Шаг 2 Шаг 3 02 Построение блоков Графика 1 2 3 NIMAX
  17. 17. Чтобы поддержать основополагающую концепцию, информационные блоки дробятся линиями в 4 и 2 px шириной. Чёрные линии используются на всех страницах, независимо от их структуры. Для того, чтобы обеспечить комплексное обслуживание наших клиентов у нас есть: 02 Построение блоков Графика 4 px 4 px 2 px NIMAX Агентство интернет-рекламы Брендинговое агентство Одно из лучших агентств Петербурга предложит вам стратегию и сделает вашу рекламу эффективной. Научный подход к брендингу и само-идентификации бизнеса.
  18. 18. Для комплексного обслуживания наших клиентов у нас есть: Агентство интернет-рекламы Одно из лучших агентств Петербурга предложит вам стратегию и сделает вашу рекламу эффективной. ПРОЕКТЫ Дипломы и сертификаты Яндекс.Директ Сертифицированные специалисты. Begun Аккредитованное агентство. При таких жирных начертаниях, контрастных заголовках и плотном трекинге важно строго соблюдать пропорциональные расстояния и отступы. 02 Построение блоков Графика 10 px 20 px 70 px 70 px 20 px 20 px 20 px 10 px
  19. 19. Особенности производства 20 px 20 px Примеры компоновок в блоках 02 Построение блоков Графика NIMAX 21 декабря Лекция в школе Epic Skills Партнёрский семинар Битрикс Иннокентий Нестеренко Руководитель рекламного отдела Мы применяем самые современные практики управления проектами и разработки. 20 px 20 px 20 px 20 px Важно: Если в блоке присутствуют подписи, дата, имена, ссылки или любая другая сопроводительная информация, этот текст отбивается большим отступом от основного и прибивается к нижней части блока. Если такого текста нет, то отступ от основного текста должен быть не менее 50 px.
  20. 20. 20 px 70 px 40 px Заголовок всегда прибивается к линии и вместе с ней отделяется от основного текста. Если линии нет, заголовок и текст идут неразрывно. 02 Построение блоков Графика NIMAX Контентные проекты Это все те проекты, для которых важно продумать и создать контент: тексты, графику, видео и другие материалы, а затем скомпоновать их в убедительные страницы. Такие проекты требуют подробного изучения вашего бизнеса, рынка и конкурентной среды, а также разработки информационной архитектуры. Контентные проекты Это все те проекты, для которых важно продумать и создать контент: тексты, графику, видео и другие материалы, а затем скомпоновать их в убедительные страницы. Такие проекты требуют подробного изучения вашего бизнеса, рынка и конкурентной среды, а также разработки информационной архитектуры.
  21. 21. Кнопки бывают двух видов (основные и стандартные) и двух размеров (большие и маленькие). У основных кнопок чёрный фон и белый шрифт, у стандартных — чёрная обводка и чёрный шрифт. Большие кнопки имеют высоту в 50 px, маленькие — 40 px. Большие кнопки используются в call-to-action связках и логических цепочках. Маленькие используются в формах (у них та же высота, что и у поля ввода) и внутри таблиц. 02 Построение блоков Графика. Кнопки. NIMAX
  22. 22. Поле у ниспадающего списка может быть двух видов: с чёрной обводкой и чёрным шрифтом, и на чёрном фоне без обводки с белым шрифтом. 02 Построение блоков Списки NIMAX
  23. 23. 02 Построение блоков Ховеры NIMAX Ховеры в блоках
  24. 24. Пример компоновки страницы 02 Построение блоков Графика в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s. Агентство Процессы Проекты Контакты 3 ГОРОДА Офисы компании расположены в трёх городах Так мы становимся ближе к московским и региональным клиентам — регулярные личные встречи упрощают коммуникации и повышают эффективность проектов. 1 Москва 2 Санкт-Петербург 3 Новосибирск Мы ведем продажи и обеспечиваем постоянный аккаунтинг проектов в московском офисе. msk.nimax.ru nimax.ru nsk.nimax.ru Отличные дизайнеры, проектировщики, рекламный отдел и руководство находятся в Петербурге. Суровые сибирские верстальщики и программисты работают в нашем новосибирском офисе.
  25. 25. Пример компоновки страницы 02 Построение блоков Графика в СПб Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s. Агентство Процессы Проекты Контакты ТРИ ГОРОДА 1 Интерфейсные проекты Информационные системы и сервисы на веб-основе, которые гораздо ближе к софту, чем к обычным сайтам. Для таких проектов мы подготовили отдельный процесс, вrлючающий в себя проектирование интерфейсов и их тестирование. Работа над такими проектами ведется итерациями, разработка может быть выполнена как нашими силами, так и заменена на контроль внедрения если у вас есть своя команда. Собираем требования от всех заинтересованных сторон и определяем KPI для оценки успешности проекта. Что изучаем? Онлайн-сервисы, стартапы. Системы управления проектами и CRM. Системы онлайн-бронирования. Личные кабинеты и бэкофисы сайтов. Калькуляторы и конфигураторы. Примеры интерфейсных проектов Этапы работ над проектом Собираем требования к проекту 2 Продукт. Бизнес-процессы. Потребности и поведение пользователей. Особенности интеграции с внешними системами. Результат: бриф и документ с выводами исследований Встреча: обсуждаем с клиентом выводы Срок: 1 неделя. Изучение продукта и пользователей
  26. 26. Для представления кейсов в портфолио используются максимально простые блочные структуры. 02 Построение блоков Графика Дизайн сайта в Санкт-Петербурге Интернет-рекламаВеб-разработка Брендинг Обучение Среда и работа БлогN s.NIMAX Дизайн сайта На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. На главную страницу мы предлагаем вынести основную информацию о Russian Code Cup со ссылками на страницы с более подробным содержанием. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики. В зависимости от этапа проведения чемпионата, на главную страницу добавляются анонсы, ссылки на форму регистрации или подтверждения участия и счетчики.

×