В какой программе делать гайдлайн

Сегодня я поделюсь опытом разработки графической документации по гайдлайнам. Это оказалось мое второе задание для Viline. И как Вы не помните из первой части, я делал редизайн страницы видео-курса. В данной статье я опишу процесс разработки стилистики всех элементов и различных состояний. Придумаю и сформулирую некоторые правила, чтобы интерфейс получился сбалансированным и доступным с учётом аудитории…

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

В первой главе я забыл упомянуть, что нужно было действовать исходя из утвержденной цветовой схемы. Задача придумать и предложить новые цвета не стояла. Для выбора цвета иногда использую Adobe Color CC (потребуется (!) авторизация) или ColorScheme.ru. Вставляю код основного цвета, а дальше подбираю к нему оттенки в разных режимах: аналоговый, монохромный, триада и т.д.

Разработка гайдлайна. Урок 08

Очень сильные и гармоничные контрасты можно подобрать, например, в режиме триады. Это я к тому, что мне было откуда почерпнуть гамму оптимальнее, но не было таких пожеланий.

К шрифту Open Sans, который использовался в текущей версии сайта, у меня тоже возникали вопросы. Кажется, он всё реже встречается в повседневном мире. Сейчас актуальны: Helvetica, Lato, Source Sans Pro, Roboto и т.п… Но это вопрос, оказывается, был в стадии переосмысления маркетологами.

Сразу оговорюсь: Вы не увидите тут пёстрых и трендовых картинок с дизайнами, которые выскакивают в топ на behance или dribbble. Я немного сомневаюсь, что женщины смогут долго находиться на сайте, дизайн которого выполнен в такой стилистике. Это главная аудитория, и я буду учитывать этот фактор. Но тем не менее, постараюсь улучшить общую картину, насколько мне позволят поставленные клиентом рамки и мой опыт.

Гайдлайны

Гайдлайны — это свод правил и/или рекомендаций для формирования внешнего вида продукта. Их формирует дизайнер и в понятном виде описывает для разработчиков. С одной стороны это приговор для первого, т.к. в будущем новые разделы продукта можно визуализировать и без дизайнера, опираясь на графический документ. С другой стороны, в наши дни дополнение работы дизайнера интерфейсов такой документации уже — is a must, сейчас планка находится достаточно высоко. Итак гайдлайны — это рекомендации по: цветам, шрифтам, элементам, состояниям, иконографике, размерам и отступам.

Напомню, что основная аудитория web-продукта в моему случае — молодые или будущие мамы. Мне нужно придерживаться: утвержденных клиентом цветов; шрифта, который он считает оптимальным для своей аудитории; радиуса скруглений углов элементов. Последнее нужно для того, чтобы элементы в глазах прекрасного пола не выглядели слишком “острыми” или “угловатыми”.

БРЕНДБУК ЗА 5 МИНУТ | ASUS STUDIO

1/15: Шрифт Circe

Важная новость от команды маркетологов на старте: уходим от Open Sans и берём в качестве основного шрифт Circe.

Описание шрифта

Circe — геометрический гротеск с человеческим лицом и многочисленными приятными дополнениями. Гарнитура состоит из 6 начертаний разной насыщенности, от тонкого до сверхжирного. Своим именем шрифт обязан как геометричности форм и процессу создания, превращённому в массовое развлечение, так и своеобразному, несколько опасному характеру.

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

Сверхрасширенный знаковый состав Circe, включающий в себя как знаки для большинства европейских языков на основе латиницы и кириллицы, так и огромное количество альтернативных вариантов и вариантов с росчерками, организован в стилистические сеты, позволяющие быстро, удобно и гибко менять характер набора. Шрифт хорош как в достаточно мелком текстовом наборе, так и в крупных кеглях, например, в журнальных заголовках, плакатах и т.п. Дизайнер — Александра Королькова. Шрифт выпущен компанией ПараТайп в 2011 году.

Если говорить своими словами: шрифт нетрадиционный для веба, по начертанию ближе к типографскому, имеет в себе “литературное звучание”. Это чисто мои ассоциации. Если сравнивать Open Sans и Circe, то последний немного выигрывает по плотности

Окей, новый шрифт утверждён. Пожелания по скруглению углов от маркетологов: использовать 6px радиус. Договорились, учту! (кстати, достаточно редкое в моей практике пожелание). Можно начинать проработку всех элементов.

2/15: Цвета

Палитра в центре — это поступившая схема от клиента. Цветовая схема слева: я чуть осветлил зелёный (он пригодится нам для онховеров) и разместил его рядом с белым. Так можно приблизительно представить как будет смотреться типовая карточка в дизайне. Оттенки справа — это пример визуализации зеленого рядом с контрастным чёрным.

Острой необходимости в таком использовании не предвиделось, это скорее сделано для разнообразия. Общий фон как сайта, так и данного ui kit’a остаётся #EFEFEF (светло-серый), это позволит избежать сильной контрастности на мобильных устройствах.

3/15: Типографика

Это рекомендации по использованию размерности текста. Я отрисовал абзац текста, внедрил в него цитату. Сделал несколько типов заголовков. И добавил обычный и пронумерованный списки. Пример scroll bar’a тоже тут, он был добавлен позднее. На самом деле, данные правила текста не обязательно должны быть жёсткими. Если нужно нанести абзац текста мелким 14px шрифтом — да пожалуйста.

Главное — соблюдать пропорциональность текста. Например абзац текста мелким шрифтом смотрелся бы странно с крупным заголовком “Оглавление”.

4/15: Ссылки

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

Это нечто вроде неофициального стандарта и пользователь быстрее смекает, что этот текст кликабелен. Позднее, кстати, цвет ссылок маркетологи заменили на оранжевый. Я не возражал, главное, чтобы ссылки остались подчёркнутыми.

5/15: Кнопки

В данном разделе надо учесть все возможные состояния кнопок и проработать их. Я разделяю типы кнопок на основную “primary” и вторичную “secondary” (или как еще их называют ghost button). По логике основная кнопка ведёт к приоритетному действию, а вторичная кнопка ведёт на экшн, который мы меньше хотим от пользователя. Снова дизайн-манипуляция. Вот пример такого использования:

Сейчас теории Google Material Design активно используются в дизайне, поэтому в наши дни многие кнопки вновь стали выглядеть как кнопки. К дизайну интерфейсов стали применять некоторую физику из реального мира.

Кнопка в обычном состоянии имеет небольшую тень; при наведении мыши тень становится больше и более размытая — кнопка “приподнимается” выше; при клике эта тень исчезает, имитируя “нажатость” кнопки. Вот такая псевдотрёхмерность, которая чуть больше связывает дизайн с реальным миром. Насколько я помню, это пришло из гайдлайнов приложений для smart tv, где пользователи сидят в определенном диапазоне удалённости от телевизора и там жизненно важно использование заметных теней с большим коэффициентом размытия. Это заметно облегчает восприятие происходящего.

6/15: Ввод текста

Если референсировать опять-таки на GMD, то можно заметить, что тенденция использования таких инпутов:

Всё чаще встречается и в web-продуктах. Если Вы предпочитаете Android, разбираетесь или работаете в сфере IT, то с такими инпутами Вы как “рыба в воде”. Но для женской аудитории, которая в основном предпочитает iPhone, такая аскетичная стилистика для элементов ввода текста — скорее боль. Я попытался найти золотую середину и предложил дизайн, когда инпут всё-таки остаётся инпутом, но и имеет некторые корни GMD:

Любая форма ввода снизу имеет тень-подчёркивание 1px без размытия. При наведении мыши она зеленеет; при клике она утолщается и зеленеет, демонстрируя состояние in action. Иконка карандаша справа — это экспериментальные попытки добавить “излишней понятности”. В некоторых случаях эта иконка может усиливать смысл: обычный инпут — карандаш; поисковый инпут — лупа; инпут ввода пароля — иконка замка, например; и так далее. Пример будет ближе к концу этой статьи.

7/15: Выпадающие списки

Их принципы отклика выполняются в том же ключе, что и инпуты. При наведении мыши меняется цвет иконки и нижнее подчёркивание. При развороте выпадающего списка появляется более объемная тень всё так же “приподнимая” выше элемент в плоскости. Если подходить к делу с должным вниманием, то стоит подумать и о развёрнутом состоянии. Иконка переворачивается, активная строка выделяется bold’ом, а при onhover’e подкрашиваем фон светлым оттенком основного зеленого цвета.

8/15: Слайдеры

С ними всё предельно прозрачно. Ничего нового тут не изобретаю, стандартный компонент по аналогии оформляется в соответствии с гайдами: шрифты, цвета и размерности. Ползунок можно переместить как drag’ом мыши, так и кликнув в числовое значение, например, когда предлагается указать возраст ребёнка “от” и “до”.

9/15: Табы / вкладки

“- Да всё понятно, дальше давай!”

10/15: Элементы выбора

Тут я сгруппировал все оставшиеся элементы: выбор состояний (доп.фильтрация), переключатели, чекбоксы и radio-buttons. Для последних двух — это просто напоминание разработчикам, что заметность выборки усиливаем интенсивным начертанием текста. Ну а с остальным, мне кажется всё очевидно.

11/15: Таблица

Я дополнил kit и примером таблицы тоже. Всё стандартно, использую лишь общую аналогичную стилистику. Безусловно от таблицы больше толка, если приведены спецификации отступов. Подробнее о них, кстати, в конце главы.

12/15: Иконографика

Рекомендации и примеры использования иконок. Я считаю, что интенсивные и заметные иконки GMD поставили эволюцию иконографики в тупик. Когда-то были пиксельные, потом выпуклые, где-то между ними в тренд вошли ios-овские обведенные (outline), рядом ненадолго мелькнул цветной flat-стиль (помните, когда бесконечная псевдо-тень тянулась под углом от объекта?).

А потом пришёл Google и заявил как надо делать. И если не уходить глубоко в лирику, то я использую только иконки GMD последнее время за свою многофункциональность и производительность. Много метафор от независимых дизайнеров иконок можете брать тут (free, отдают все размеры, png/svg/zip, hint: удобно кликнуть правой кнопкой мыши и скачать нужный размер). Считаю, что интенсивные иконки более понятны и заметны (и тут должен быть референс на знаки ПДД).

13/15: Карточки

Это уже переход от отдельных проработанных элементов к их комбинациям. Я составил несколько вариантов карточек для использования на сайте, т.к. это был актуальный способ подачи некоторой информации, да и личное предпочтение клиента.

Но я всегда напоминаю, что перебарщивать с ними в дизайне нежелательно. Лучше всего их смысл понятен в совокупности со спецификациями:

Строгих правил в определении составка карточек — нет. Если соблюдать указанные мной размерности отступов, то практически любая будет смотреться однородно с разработанными гайдлайнами.

14/15: Вход в систему

В виде бонуса я проработал попапы входа/регистрации, сделал макет с примером использования. Это больше нужно для визуализации того, как самостоятельно в будущем без моего участия штатный web-дизайнер проекта смог бы собрать любой раздел для продукта. Всё, что надо делать — это брать готовые элементы из исходника и ровно расставлять их в соответствии со спецификациями.

15/15: Спецификации

Они находятся в отдельной группе в исходнике. Группу можно сделать видимой и спексы отрисуются. Без них данный user interface kit был бы неполноценным. Соблюдения пропорций размерности и отступов ведёт к сбалансированному интерфейсу. Если я не дам инструкций на этот счёт, то появляется риск, что это будет сделано иначе.

И тогда я не смогу гарантировать качественную реализацию.

Если Вы предпочитаете 8px сетку, то стоит учитывать, что все отступы кратные 8; если используете 10px сетку, как в моём случае, то Вы не найдёте в этом дизайне расстояний между элементами в 13 или 27px, все отступы будут кратны 10-ти.

Правила существуют и для количества цветов и их оттенков: я не использовал слишком много оттенков серого, например — их вышло не более трёх в данном наборе. Я уверен, с такими собственными правилами интерфейса проще и дизайнерам, и разработчикам. Хотя тут бывают исключения, если система выдаёт обратную связь разными состояниями, то могут потребоваться и красный, и голубой, и т.п. для усиления смыслового различия (например для попап-уведомлений).

Заключение главы

• Графическая документация по гайдлайнам — это визуальный язык для разработчиков, чтобы продолжать развитие продукта и не привлекать дизайнера лишний раз.
• Набор гайдлайнов может разрабатываться с учётом целей будущего продукта. Шрифты, цвета и общая стилистика могут учитывать специфику будущих пользователей ресурса/приложения.
• Для оптимизации взаимодействия гайдлайны должны содержать рекомендации по размерностям элементов и отступам.
• Желательно, но не обязательно, чтобы набор также включал в себя примеры готовых решений. Это может быть корзина покупателя, страница товара, френдлента, карточки, лендинг и т.п.
• Современный подход — это возвращать клиенту не sketch/psd файл, а отдавать html/css код. Я некоторое время назад полностью перешёл в Axure, и он справляется с этой задачей достаточно эффективно.

1. Jan Losert очень крутой, его UI overview для Tapdaq просто идеален
2. Mateusz Dembek хоть и мельчит немного, но всё равно классно оформил Deskmetrics Ui Style Guide
3. Greg Dlubacz взял и сделал сильную dark-выворотку с элементами dashboard | и оформил в светлой гамме Retail Banking Service
4. Cupi Wong не так обширно, но стильно оформил гайды AfterShip
5. Jeremy Sallée всё очень подробно описывает о дизайне в Nutanix Product Guideline

Источник: habr.com

Гайдлайн: 14 модулей + 4 шаблона

Гайдлайн — это нечто большее, чем просто описание элементов фирменного стиля. Он помогает каждому сотруднику компании понять, как выглядит лицо бренда и как бизнес презентует себя клиенту. Но даже при таком простом объяснение, не сразу очевидна полная суть и отличие гайдлайна и брендбука.

Что это такое

Многие сталкивались с такой проблемой: нужно изготовить рекламный баннер, а Ваш дизайнер (возможно, еще и фрилансер) видит его по-своему.

В конце концов, возникает смешение стилей. А готовые дизайны за последние несколько лет отличаются так же, как творчество Айвазовского и Малевича.

Так вот, решить эту проблему поможет гайдлайн. У Вас наверняка назрел вопрос «Так что это за зверь такой?» И давайте начнем с определения, что такое гайдлайн.

Гайдлайн — это документ, подробно описывающий использование фирменного стиля бренда при создании рекламных баннеров, веб-сайтов, визиток.

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

Видя хороший продукт в плохой (читаем: безвкусной, некрасивой) упаковке, клиент неверно оценивает его и значит делает ноги.

По сути, именно гайдлайн отвечает за первоначальную упаковку продукта, соединяя ее с остальными уровнями брендинга — его идеологией, миссией, ценностями.

Поэтому к разработке гайдлайна переходят уже после создания брендбука, ища “форму” для реализации идей маркетологов.

И теперь несколько примеров. Кстати, при создании собственного гайдлайна, Вы можете воспользоваться данными примерами как шаблонами.

1) Банк «Открытие». Компания сообщает: логотип является уникальным и его нельзя имитировать или копировать при помощи других шрифтов. Нужно использовать оригинальный исходный файл.

2) Компания «Лукойл». На первых страницах гайдлайна мы видим правила по использованию словесного товарного знака, контурному и чёрно-белому изображению, а также правила касательно начертаний.

3) MTC. Компания говорит, что главный символ (белое яйцо) означает саму жизнь, созидание, начало всего нового. Логотип является цельным, использование его элементов по отдельности не допускается. Исключение составляет сувенирная продукция, где допускается использование только квадрата с символом.

1. Отличие от брендбука

И тут возникает очевидный вопрос «Чем отличается гайдлайнд об брендубка?». И я объясню всё максимально простыми словами. Настолько, что больше у Вас никогда не будет возникать этого вопроса.

Итак, когда бренд осознал себя и маркетологи четко понимают, какие ценности и продукт они хотят передать потребителю — появляется брендбук. Это документ, в котором умещается платформа бренда.

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

Отметим, что гайдлайн и брендбук — два разных документа, которые не нужно путать между собой. Первый отвечает за визуальную сторону бренда, второй — за концептуальную сторону.

2. Зачем и кому нужен

Рассмотрим, кому и для чего нужен гайдлайн. И сразу спойлер — он нужен не всем. Но давайте рассмотрим на примерах, когда он может пригодиться.

• Создание концепция бренда.Позиционирование бренда на рынке и формирование определенного образа;
• Формирование единого стиля. Отстройка от конкурентов и поддержка концепции бренда;
• Создание рекламных материалов. Экономия времени и нервов при создании новых креативов;
• Формирование узнаваемости. Возможность создания армии приверженников бренда;
• Передача франчайзи. Открытие новых филиалов, согласно единой концепции компании;
• Использование в ребрендинге. Помощь в сохранении основной концепции бренда при его изменении.

Делаем вывод: гайдлайн нужен любому бизнесу среднего и крупного размеров. Но! Исключения все же есть:

• Фрилансеры. Люди у которых нет бренда, гайдлайн им тоже не нужен;
• Личный бренд. Предприниматели, развивающие себя как бренд, могут обойтись без гайдлайна;
• Непубличные компании. Компании, которым не нужна и даже противопоказана реклама.

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

3. Форматы / носители

Существует несколько общепринятых видов гайдлайна о которых я Вам расскажу ниже. Иногда бизнес использует их все сразу, но чаще — только один.

1. Печатные “Гайд-буки”

Как правило, печатные гайдлайны создаются для размещения в офисе компании или в качестве имиджевых средств — показать клиенту за чашечкой кофе, какой у бизнеса четкий и выверенный стиль.

Также их можно использовать для презентации бренда на деловых мероприятиях, раскладывая на специальном стенде.

2. PDF-документы

Наиболее популярный вариант, который удобно использовать. К тому же, pdf-документ не требует дополнительных затрат на печать. Его легко можно отправить по электронной почте или мессенджеру в нужный момент дизайнеру или маркетологу.

3. Документы powerpoint или keynote

Представляют собой презентацию, удобную для редактирования. Как правило, могут идти вместе с другими формами документа. Такой вариант подходит, если Вы презентуете гайдлайн на мероприятии.

Структура

Итак, что включает в себя гайдлайн? В мировой практике нет четко устоявшейся структуры гайдлайна, так как почти каждое агентство стремится добавить к общему “скелету” что-то свое.

Иногда — для того, чтобы решить уникальные задачи клиента. А порой — чтобы просто выделить себя среди конкурентов. Но, так или иначе, есть несколько ключевых элементов, которые просто обязаны быть.

1. Не визуальное описание

Хоть гайдлайне в основном это визуальное описание бренда, но обычно при создании этого бука в первой части описывают концепцию бренда. Теперь кратко о том, что же входит в гайдлайн.

1.1 Общая информация

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

1.2 Ключевые ценности

Список из 5-10 главных ценностей, которые передает бренд. Например: креативный подход к делу, ответственность, искренность. Но лучше использовать не шаблонные фразы.

1.3 Индивидуальность бренда

Это — “душа” Вашего бренда. Здесь мы тезисно описываем все то, что отличает Ваш бренд от других. Это может быть как подход к клиентам, так и идеологические аспекты компании.

2. Визуально описание

Здесь уже переходим к описанию визуальной стороны бренда. То есть, как компания “показывает” то, о чем написано в первой части руководства.

2.1 Логотип

Визуальное изображение логотипа компании, а также подробное и понятное описание его составных элементов.

2.2 Размер логотипа

Представлены возможные варианты размера логотипа: от максимального до минимального с указанием точных параметров.

2.3 Свободное поле

Подробное описание размещения логотипа, с указанием необходимого свободного пространства вокруг.

2.4 Использование логотипа

Допустимые варианты использования логотипа в различных вариациях или совместно с другими логотипами.

Создать отличительный знак компании можно самостоятельно, в конструкторе логотипов

2.5 Цветовая палитра

Перечень фирменных цветов компании, а также их название и правила использования.

2.6 Шрифт

Описание возможного фирменного шрифта компании в разных вариантах. Также можно привести примеры текста.

2.7 Неправильное использование логотипа

На этой страницы приводятся варианты того, как недопустимо использовать логотип компании в нескольких вариантах.

2.8 Логотип на фоне

Представлены самые распространенные варианты фона с использованием фирменных цветов и логотипом, а также ошибки.

2.9 Дополнительные элементы

Возможные варианты использования дополнительных элементов. Например, правильное размещение слогана, фирменного узора и т.д.

2.10 Продукция

На странице показывается правильное оформление рекламной и прочей продукции с использованием логотипа и фирменных цветов.

2.11 Интерьер

Тут уже раскрывается использование элементов в интерьере, начиная от вывески компании и заканчивая оформлением офиса.

Отдаём в цех

На самом деле сделать гайдланд — не сложно. Это лишь страшно в начале, когда не очень понятно что стоит за ним.

К тому же, такой продукт не делают сами компании, его всегда отдают на аутсорс, а это, как Вы понимаете, сильно упрощает всю задачу. Поэтому и шагов далее будет не так много.

ВКЛЮЧАЙТЕСЬ В СОЦСЕТИ УЖЕ 40 000+ С НАМИ

Екатерина

Сергей

Иван

Елена

Екатерина

Шаг 1. Составляем бриф

Здесь важно правильно прописать цели и задачи для дизайнера, а также сроки и другие условия работы, которые Вы считаете важными (качество изображения, структурированность материала, количество знаков в тексте, креативность подхода и многое другое).

Бриф является документом, который наряду с юридическим договором определяет спорные моменты между двумя сторонами. Поэтому помните, что неграмотно составленный бриф часто становится причиной «Я хочу так, а не вот так».

Пример брифа Вы можете просто скачать по ссылке: gajdlajn-brif.odt

Шаг 2. Выбираем подрядчика

Конечно, Вы можете рискнуть и сделать всё самостоятельно. Но! Я таких случаев ещё не видел. Поэтому сразу приступаем к выбору подрядчика. Как обычно, есть вариант «долго и дёшево» и «быстро, но дорого».

1. Профессиональные компании (от 12 000 до 100 000 р.). Если нужно качество работы и надежность, то есть большое количество компаний, которые занимаются брендингом “под ключ”, а также отдельными его элементами;
2. Фрилансеры (от 1 000 до 30 000 р.). Если Вас устроит дешевый и “и так сойдет” вариант, то можете обратиться к фрилансеру. Самые известные площадки для поиска специалистов — KWork, Work-zilla. Будьте готовы к рискам, Вы можете столкнуться с непрофессионалами или начинающими специалистами. Хотя иногда попадаются и изумруды.

Я не могу принять за Вас решение. Так как всё зависит от Вашего бюджета. Но я могу сказать так: «Если Вы компания серьёзная и давно на рынке, то стоит вложиться и не экономить на этом денег. К тому же, делает это на долгие времена.».

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

Давайте подытожим: гайдлайн нужен тем, кто хочет позиционировать себя на рынке и опередить конкурентов. Если Вы регулярно используете печатную продукцию, создаёте рекламные листовки, визитки, то гайдлайн — необходимый инструмент. С ним Вы повысите лояльность целевой аудитории и улучшите узнаваемость бренда.

Если, после прочтения статьи Вы “загорелись” идеей создания гайдлайна, то смею Вам напомнить — гайдлайн не поможет Вам увеличить продажи в короткие сроки и даже не создаст мгновенно позитивный имидж.

Это инструмент для среднего и крупного бизнеса, который заботится о своем “лице”. Так что несколько раз подумайте, прежде чем вкидывать крупную сумму в его создание. А то, может, Вам лучше начать с увеличения продаж?!

Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter

Источник: in-scale.ru

Гайдлайн в Power BI

Устали угадывать, что понравится заказчику?

Вас раз за разом просят поменять
диаграммы и цвета?
Нужно то добавить, то убрать подписи?
А ведь вы не дизайнер, и не знаете
«как правильно»
Часами стараетесь, но выходит «не солидно»

Гайдлайн упростит вашу работу

Начинающим аналитикам
Вы избегаете ошибок и экономите время. Используете заготовки: вносите свои данные и меняете текст.
Опытным разработчикам
Вы делаете свою техническую часть и добавляете профессиональный дизайн.

Бизнес ценит вашу работу.

Гайдлайн — это набор диаграмм, подложек и элементов навигации в единой цветовой схеме и наборе шрифтов.

Они созданы на основе международных стандартов и книг Алексея Колоколова. Теперь у вас есть аргумент, как делать «правильно».

Кейсы использования гайдлайна

Из чего состоит гайдлайн

На основе 13 лет опыта внедрения BI-систем мы сделали выжимку лучших практик: 20% материала, которые дадут вам 80% результата.

7 самых популярных диаграмм

Корпоративная отчетность на 90% состоит именно из них. Визуалы уже оформлены — копируйте и вставляйте на свой лист.

8 подложек для быстрой верстки
Вам не нужно выравнивать по пикселям, просто берете нужную модульную сетку
и наполняете диаграммами.
3 образца дашбордов

Попробуйте уже сейчас: демо

Кликайте по страничкам дашборда, для того чтобы погрузиться в гайдлайн

Как это работает

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

Добавляете карточки с ключевыми показателями

Собираете все это в готовый дашборд: функциональный, стильный, точный

Начните делать красивые и умные отчеты

Стоимость 100 $

● 7 шаблонов самых популярных диаграмм
● 8 подложек для быстрой верстки
● 3 образца дашбордов по продажам
● Инструкции по работе с гайдлайном
● Профессиональный дашборд за 15 минут

Гайдлайн в Power BI

До конца акции осталось:

Отзывы клиентов

Аника Пушкарева
Project manager

Спасибо вам! Теперь делаю все в два раза быстрее и сдаю отчеты не то что в срок, а много раньше. Отличный продукт!

Ольга Портаскина

Ваш гайдлайн мне порекомендовал руководитель. Да, ему не очень нравились мои отчеты.
Цитирую «очень у тебя все хаотично, разбросано невпопад. Диаграммы твои я ВООБЩЕ не понимаю».

Приобрели гайдлайн, я была настроена скептически.

И, внимание, я взяла СВОЙ отчет и прогнала через гайдлайн) Теперь довольны все, я так вообще в восторге!

Елизавета Мелько
Ассистент руководителя АСУТП

Когда узнал про гайдлайн — не сразу понял в чем фишка, но после вебинара без раздумий купил.

Теперь в буквально два клика настраиваю диаграммы — восторг! Коллеги немного даже бесятся когда видят скорость работы) Все благодаря вашему гайдлайну)

Источник: alexkolokolov.com