Если что, мы используем куки
Понятно
​Согласие на обработку персональных данных для посетителей сайта
Я, посетитель сайта http://grphn.ru/ (далее также - Сайт), заполняя форму обратной связи, размещенную на Сайте, а также отправляя электронные письма на следующие адреса электронной почты: contact@grphn.ru, размещенные на Сайте, даю согласие ООО «Студия Графен» (432001, Ульяновская область, г.о. город Ульяновск,  г. Ульяновск, ул. Федерации, д. 20, этаж 5) на автоматизированную и неавтоматизированную обработку моих персональных данных (далее - ПДн), с совершением следующих действий: сбор, запись, хранение, накопление, систематизация, использование, передачу (предоставление, доступ), уточнение (обновление, изменение), блокирование, удаление и уничтожение, в целях: 
  • обеспечение соблюдения Конституции Российской Федерации, федеральных законов и иных нормативных правовых актов Российской Федерации;
  • привлечение и отбор кандидатов на работу у Оператора;
  • осуществление гражданско-правовых отношений, а также проведению переговоров, предшествующих возникновению гражданско-правовых отношений; 
  • ведения и актуализации клиентской базы;
  • проведения маркетинговых исследований;
  • информирование о проведение Мероприятий Оператором;
  • рекламирования и иного любого продвижения услуг Оператора. 

Персональные данные, в отношении которых дается согласие:
  1. Персональные данные кандидата для приема на работу в ООО “Студия Графен”:
  • фамилия, имя, отчество;
  • пол;
  • гражданство;
  • дата и место рождения;
  • контактные данные;
  • сведения об образовании, опыте работы, квалификации;
  • иные персональные данные, сообщаемые кандидатами в резюме и сопроводительных письмах.

  1. Потенциальные клиенты и контрагенты Оператора (физические лица):
  • фамилия, имя, отчество;
  • дата и место рождения;
  • паспортные данные;
  • адрес регистрации по месту жительства;
  • контактные данные;
  • номер мобильного телефона;
  • адрес электронной почты (e-mail);
  • замещаемая должность;
  • индивидуальный номер налогоплательщика;
  • номер расчетного счета;
  • иные персональные данные, предоставляемые клиентами и контрагентами (физическими лицами), необходимые для заключения и исполнения договоров.

  1. Представители (работники) потенциальных клиентов и контрагентов ООО “Студия Графен” (юридических лиц):
  • фамилия, имя, отчество;
  • паспортные данные;
  • контактные данные;
  • номер мобильного телефона;
  • адрес электронной почты (e-mail);
  • замещаемая должность;
  • иные персональные данные, предоставляемые представителями (работниками) клиентов и контрагентов, необходимые для заключения и исполнения договоров.


Согласие на обработку ПДн кандидата для приема на работу в ООО “Студия Графен” дается на срок, необходимый для рассмотрения моей кандидатуры и принятия решения о приеме меня либо об отказе в приеме меня на работу. Согласие потенциального клиента и контрагента ООО “Студия Графен” выдается на срок с момента заполнения формы обратной связи, отправления электронного письма по указанным на Сайте адресам, до момента отзыва Согласия способом, который указан ниже. Согласие может быть отозвано путем направления письменного обращения в ООО “Студия Графен”, в том числе, путем заполнения формы обратной связи на Сайте или направления письма по адресам электронной почты, указанным на Сайте. 

Кроме того, продолжая работу на сайте я выражаю свое согласие ООО “Студия Графен” на автоматизированную обработку моих персональных данных (файлы cookie, сведения о действиях пользователя на сайте, частичные сведения об оборудовании пользователя, дата и время сессии), в т.ч. с использованием метрических программ Яндекс.Метрика, Google Analytics, Firebas Google, Tune, Amplitude, Сегменто, и других подобных, с совершением действий: сбор, запись, систематизация, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, обезличивание, блокирование, удаление, уничтожение, передача (предоставление, доступ), в том числе трансграничная, партнёрам ООО “Студия Графен”, предоставляющим сервис по указанным метрическим программам. Обработка персональных данных осуществляется в целях улучшения работы сайта, совершенствования продуктов и услуг ООО “Студия Графен”, определения предпочтений пользователя, предоставления целевой информации по продуктам и услугам ООО “Студия Графен” и его партнёров.
Настоящее согласие действует с момента его предоставления и в течение всего периода использования сайта.
В случае отказа от обработки персональных данных метрическими программами я проинформирован о необходимости прекратить использование сайта или отключить файлы cookie в настройках браузера.

Оставьте заявку и мы расскажем подробнее 
о разработке интернет-магазинов на CMS 1С-Bitrix и Laravel
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
о создании корпоративных сайтов на CMS 1C-Bitrix и CMS WordPress
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
Интеграция продуктов со сторонними решениями, такими как: 1С-Предприятиям, маркетплейсами (Ozon, Yandex.Market, WildBerries), CRM (amoCRM, Bitrix24), системами лояльности (MonzanaCRM) и т.д.
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
Разработке и внедрение Систем Дистанционного Образования для бизнеса
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
том, как мы выводим сайты в зеленую зону Google Pagespeed Insights, ускоряем загрузку сайтов на любых CMS
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
о cоздании корпоративной эко-системы
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
об автоматизации бизнес процессов Bitrix24
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
технической поддержке
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
том, как данные ваших клиентов будут под надежной защитой
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
то, как мы сопровождаем проекты, работая над его улучшением и разработкой нового функционала
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
о разработке промо сайтов
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
о разработке посадочных страниц для конкретных товаров или услуг
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
Разработке решений для проведения онлайн промо акций или создание геймификации в компании
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
о разработке NoCode решений
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее 
о разработке мобильных приложений
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее о том
как наши аналитики могут помочь вам сделать функциональные требования, Технические задания, UML, BPMN, CJM
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее о
Проектирование удобных в использование web/gui/mobile пользовательских интерфейсов. От концепции и фирменного стиля, до полноценного решения.
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее о
HTML5/CSS3, семантическая/валидная/адаптивная/респонсивная/кроссбраузерная верстка по БЭМ-технологии (IE11+, по желанию IE9+), MobileFirst/DesktopFirst, Jade/Pug, Gulp/WebPack/Yarn/NPM, LESS/SASS/ Stylus
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
наших Vue.js разработчиках
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
нащих react.js разработчиках
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее о
наших 1С-Bitrix и Bitrix24 разработчиках
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее о
наших laravel разработчиках
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее
о том, чем мы можем помочь в информационном наполнении ваших продуктов
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
том, чем могут помочь наши специалисты по DevOps и SecOps
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
HTML5/CSS3, семантическая/валидная/адаптивная/респонсивная/кроссбраузерная верстка по БЭМ-технологии (IE11+, по желанию IE9+), MobileFirst/DesktopFirst, Jade/Pug, Gulp/WebPack/Yarn/NPM, LESS/SASS/ Stylus
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
верстке почтовых сообщений
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
Проектирование удобных в использование web/gui/mobile пользовательских интерфейсов. От концепции и фирменного стиля, до полноценного решения.
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее об
том, что нужно для того, чтобы провести интеграцию верстки на CMS 1С-Bitrix, CMS WordPress и Laravel
Прикрепите бриф
Оставьте заявку и мы расскажем подробнее о
Перенос сайта на CMS 1С-Bitrix, CMS WordPress и Laravel
Прикрепите бриф

Дизайн-системы с нуля: инструкция по разработке

Систематизация и унификация – важная часть любого бизнес-процесса. В UX/UI-дизайне эти функции воплощает в себе дизайн-система. Обобщенно – это набор правил, стилей, элементов, отступов, на которые опираются разработчики в повседневной работе. О том, кому будет полезен дизайн-системный подход и что он дает бизнесу, мы рассказывали предыдущем материале. Теперь разберемся, как же создать дизайн-систему с нуля.

Коротко о главном

Проектирование интерфейса – невероятно трудоемкий процесс. Чтобы продуктом было легко пользоваться, дизайнер должен отлично разбираться в UX и UI, особенностях человеческой психологии, работать с архитектурой проекта и доводить до совершенства множество мельчайших деталей. Эту работу отчасти помогает оптимизировать дизайн-системный подход.

Дизайн-система – это не библиотека шаблонов или гид по стилю. Это сборник компонентов, которые структурируют и придают digital-продукту смысл. Это то, благодаря чему пользователи узнают продукты компании, а дизайнеры и разработчики не тратят время на создание одинаковых элементов. За счет хорошей дизайн-системы компания может сэкономить время и финансовые расходы. Использование единых элементов делает проект чище и проще в разработке новых элементов дизайна.

Первые инструкции по визуальной идентификации бренда стали появляться еще в середине 1950-х годов. С приходом диджитал-продуктов формат статичного, написанного руководства устарел. Система отражает подвижный, меняющийся характер проектов. Это и база сгруппированных элементов оформления, и одновременно руководство – как они должны выглядеть, взаимодействовать между собой. Дизайн-система стала нужна, когда требуется оптимально масштабировать продукт.

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

Дизайн-системы есть у Apple, IBM, Airbnb, Atlassian, Microsoft, Trello, BuzzFeed и многих других крупных зарубежных игроков. Яркий пример дизайн-системы в России — Яндекс с его огромным количеством проектов: музыка, блоги, афиша, почта и другие. Дизайн-системы используют такие крупные компании, как Тинькофф Банк, Mail.Ru Group, Сбербанк и другие.

Как создать дизайн-систему?

Когда компания приходит к пониманию того, что она готова к созданию дизайн-системы, возникает логичный вопрос: “С чего начать?”. Чтобы ответить на него, мы подготовили пошаговое руководство разработки дизайн-системы, включающего в себя 4 основных этапа. Сразу хотим сказать, что речь пойдет не о создании масштабной дизайн-системы для корпорации. Мы расскажем про разработку дизайн-системы для среднего или крупного бизнеса, который только начал делать первый шаги к цифровой трансформации.

ШАГ №1 Проведите совещание
Перед тем, как приступать к разработке собственной дизайн-системы, вам нужно провести внутреннюю встречу всей команды и четко распределить роли среди специалистов. Казалось бы, очевидный шаг, но многие его почему-то пропускают. На совещание должны быть приглашены не только дизайнеры. Мы привели список тех, кто будет принимать непосредственное участие в дальнейшей работе и кого следует позвать:

  • Дизайнеры
Желательно сразу определить лид-дизайнера и тех, кто будет работать над созданием дизайн-системы. Например, в нашей команде над разработкой одной дизайн-системы обычно работают не более трех дизайнеров, включая лида. Такой команды вполне хватает для создания дизайн-системы для крупного или среднего бизнеса.

  • Фронтендеры
Специалистов по фронтенд- разработке следует сразу ввести в курс дела, обозначить задачи клиента и собрать требования по передаче макетов, чтобы на этапе реализации не было сюрпризов. Они смогут подсказать дополнительные параметры, которые им потребуются при реализации, например набор различных отступов. Синхронизация на старте позволит избежать ненужных исправлений и оптимизировать загрузку специалистов в компании.

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

ШАГ №2 Аудит существующего дизайна – сбор требований, целей
Этот этап станет переломным для компании, когда подход к разработке визуала разделится на “до” и “после”.

Выделите все элементы дизайна продукта: шрифты, значки, цвета, макеты, компоненты, карточки, – все, что нужно унифицировать. Определите нужные стили. Вы даже можете создать своего рода каталог UI компонентов и различных визуальных элементов, которые в дальнейшем и лягут в основу вашей дизайн системы. На данном этапе следует глубоко погрузить в процесс проверки, чтобы не захватить с собой большое количество артефактов. По наблюдениям Graphene, многие компании, которые начинают только вставать на путь цифровой трансформации, зачастую почти полностью пропускают аудит существующего дизайна. Это ведет к дополнительным финансовым и временным затратам компании, т.к. в работу над созданием дизайн-системы приходится брать только базовые принципы фирстиля или и вовсе создавать его с нуля.

Сбор требований при создании дизайн-системы поможет точно сформулировать цели ее создания, тогда весь процесс перестанет быть “трендом современности” и станет понятным для каждого участника команды. Например, у дизайнеров не будет путаницы при работе над разными проектами одной компании. Дизайн-язык станет четким и при создании новых продуктов у них не возникнет лишних вопросов. Фронтендеры смогут так же создать свою собственную дизайн-систему и упростить процесс разработки, избавившись от лишнего кода. Основная радость менеджеров будет заключаться в сокращении сроков и упрощении разработки новых продуктов. Очевидно, что этот шаг значительно упростит жизнь всем участникам процесса.
ШАГ №3 Создайте стили дизайн-системы
В большинстве случаев часть стилей уже определена и присутствует в бренд-буке. Их остается только скопировать и дополнить. Под основными стилями дизайн-системы понимаются: цвета, типографика (шрифт, размер, интервалы, иконки, форма (для блоков, кнопок). Разберем чуть подробнее каждый из пунктов:

  • Цвет
Как правило компания выбирает 1-3 основных цвета и ряд вспомогательных цветов, которые будут использоваться для разделителей, текста, неактивных блоков, также для визуализации статуса действий. Например, когда пользователь в мобильном приложений успешно произвел операцию, чаще всего появляется иконка зеленого цвета с соответствующим текстом. Если допущена ошибка – красная. Но для удобства пользователей, мы рекомендуем выбрать какой-то один цвет для кнопок и ссылок, чтобы не создавать лишний визуальный шум.
  • Типографика
Многие забывают про данный параметр и используют везде разные. Задав интервалы для отступов между блоками, вы сильно упростите разработку продуктов. Зачастую выбирается кратная система отступов. Конечно, интервалы могут периодически отличаться от заданных параметров. Все будет зависеть от того, для чего этот проект: web, ios или android.
  • Интервалы
Многие забывают про данный параметр и используют везде разные. Задав интервалы для отступов между блоками, вы сильно упростите разработку продуктов. Зачастую выбирается кратная система отступов. Конечно, интервалы могут периодически отличаться от заданных параметров. Все будет зависеть от того, для чего этот проект: web, ios или android.

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

ШАГ №4 Организуйте библиотеки компонентов

На предыдущем этапе мы создавали основной дизайн-код, сейчас же нам предстоит на их основе собрать основные элементы, которые будут постоянно использоваться: кнопки, формы, поп-апы и тд. Если у элементов есть несколько состояний, например, активная кнопка, не активная кнопка, ошибка, то стоит уже сейчас заняться их проработкой.
Вывод

Дизайн-системы – глобальный шаг вперед в мире дизайна. Компании, которые их применяют, несомненно, занимают ведущие позиции. Команды экономят рабочие время, а бизнес – деньги. Совместная работа дизайнеров и разработчиков становится эффективнее, а сам продукт – “роднее” для клиента. Это только то, что на поверхности. Плюсов гораздо больше.

Но перед созданием дизайн-системы важно взвесить все за и против, оценить затраты времени и сил. А после, главное – суметь правильно разработать дизайн-систему. Теоретические принципы не всегда легко и так, как хотелось бы, даются на практике. К тому же, хорошие дизайн системы постоянно должны развиваться и адаптироваться под пользователя. Если у компании недостаточно ресурсов или нет необходимой экспертизы, лучше обратиться к внешней команде и воспользоваться экспертным опытом дизайн-студии. Если ресурсы есть, то не стоит пренебрегать внешними консультациями. Свежий взгляд извне поможет сфокусироваться на главном и создать максимально эффективный продукт.