GoF

Керівництво по використанню фірмового стилю

2018, v1.0

Ввідна інформація

GoF — краудфандингова платформа для освітніх проектів. Ми допомагаємо освітянам створювати якісний навчальний досвід для своїх учнів. Підтримуючи ініціативи вчителів, ми разом формуємо спільноту новаторів, що самостійно впроваджують зміни у своєму класі чи школі.

Формування назви

Як для освітян, так і для людей, які фондують проекти, важливо перше враження, образ — бренд платформи. Звичайно ж, в остаточному формуванні цього образу, лежать знання про нашу реальну діяльність, успіхи проектів, яким ми вже допомогли реалізуватися, та позитивний досвід взаємодії. Але для того, щоб ці знання оформилися в образ, необхідно докласти певних зусиль.

Рекламні лафлети, ділова документація, наліпки, оформлення звітів та постів у Фейсбуці — весь візуальний стиль платформи — одна з ключових складових бренду. Його сприйняття. Тому дуже важливо, щоб візуальний стиль платформи був оригінальним, цільним і яскравим.

В цьому дизайнгайді зібрані та максимально докладно описані правила використання символіки платформи та принципи оформлення різних носіїв візуального стилю. Це дозволить створити єдину, легко впізнавану систему графічної ідентифікації платформи.

Крім того, єдині правила і стилістика оформлення, дозволять стандартизувати правила оформлення носіїв фірмового стилю. Що, у свою чергу, дозволить створити яскравий, позитивний образ платформи, стандартизувати розробку рекламних та іміджевих матеріалів, а також зменшити витрати на рекламу і просування бренду GoF.

I. Базові елементи

Логотип

Базовим елементом символіки платформи є логотип GoF — оригінальне накреслення графем назви, з додатковим графічним елементом у вигляді дуги, яка, разом з графемою «О», утворює стилістичне зображення чоловічка — символ людей, кофаундерів платформи.

Логотип у векторі .eps

Символіка в інших форматах

Логотип GoF

Логотип не є елементом дизайну.
Скоріш це авторський підпис.

Дескриптор

Разом з логотипом, в деяких випадках, використовується дескриптор, який розміщується з права від логотипа. В якості дескриптора можна використовувати розшифровку діяльності платформи, слоган, хештеги, адресу сайту і навіть іконки чи імена та прізвища.

Логотип зі слоганом у векторі .eps

Шрифт Roboto Condenced .web

При розміщенні дескриптора в два рядки, відступ зліва другого рядка потрібно робити таким чином, щоб текст другого рядка центрувався по правому краю першого рядка (у випадках, коли символів в другому рядку менше ніж в першому), або вирівнювати лівий край другого рядку по центру тексту першого рядка (у випадках, коли символів в другому рядку більше ніж в першому).

Для відображення дескриптора використовується шрифт Roboto Condenced (Regular).

Слоган

Слоган платформи є варіативним і використовує конструкцію: фондуємо [об’єкт фондування]. В якості об’єкта можна використовувати будь які позначення, тим чи іншим чином зв’язані з освітою. Наприклад: фондуємо освіту, фондуємо проекти, фондуємо мрії, фондуємо майбутнє... Єдина вимога — вибудувана конструкція має нести позитивне емоціональне навантаження.

Кольори

В символіці платформи використовується градієнт з двох кольорів, під кутом в 45°. При наявності дескриптора, він повністю забарвлюється в другий (темний) колір градієнта.

Палітра кольорів .ase

Палітра кольорів з градієнтами .ai

Схема кольорів

Існує сім рекомендованих кольорових схем. Основною є жовто-оранжева схема (не знаєш яку кольорову схему використовувати — використовуй цю), але немає жодних обмежень чи вимог щодо використання тієї чи іншої схеми. Вибір схеми залежить від конкретної ситуації та здійснюється дизайнером на свій розсуд.

0/15/100/0
253/205/16
#FDCD10
0/50/100/0
240/130/18
#F08212
0/90/0/0
226/39/126
#E2277E
0/100/80/10
210/0/34
#D20022
70/0/0/0
57/183/234
#39b7EA
100/30/0/0
0/120/190
#0078BE
50/0/100/0
147/184/36
#93B824
90/0/100/0
0/149/47
#00952F
68/0/25/0
77/180/186
#4DB4BA
100/0/50/12
0/134/122
#00867A
18/0/80/0
225/220/76
#E1DC4C
16/0/80/25
182/176/60
#B6B03C
28/0/0/30
145/170/184
#91AAB8
34/0/0/50
100/122/136
#647A88

Пріоритетним для використання є варіант вивороткою: символіка білого кольору на кольоровому градієнті. При наявності дескриптора, він також фарбується у білий колір.

Охоронне поле

При використанні символіки, її необхідно розміщувати таким чином, що б охоронне поле — вільний простір навколо фірмового блоку (логотипа, чи логотипа з дескриптором), було не менше висоти останнього символу (F).

Мінімальні відступи

У випадках, коли на носіях символіки відсутня будь-яка інша графічна інформація крім фірмового блоку, охоронне поле може бути рівним радіусу внутрішнього кола букви О.

Мінімальні відступи, другий варіант

При використанні дескриптора, правила, описані вище, також дійсні.

Мінімальні відступи, логотип з дескриптором

Мінімальні розміри

При використанні символіки, для якісного відтворення фірмового блоку, рекомендується робити його розміри по вертикалі, не менш 20 пікселів (для цифрових носіїв) і 3,5 мм (для фізичних носіїв).

Мінімальні розміри

h min = 20 px / 3,5 mm

При використанні дескриптора, розміри по вертикалі, повинні бути не менш 30 пікселів (для цифрових носіїв) і 4,5 мм (для фізичних носіїв).

Мінімальні розміри

h min = 30 px / 4,5 mm

Розміщуючи фірмовий блок на фізичних носіях, потрібно намагатися щоб його розміри були «оптимальними» (не дуже великим і не дуже маленьким) стосовно формату самого носія.

Мінімальні розміри на форматах

Лінії прив'язки (направляючі)

Лінії прив’язки є допоміжною координатною сіткою для розміщення графічних і текстових блоків, щодо логотипу.

Лінії прив'язки

Приклади побудови з використанням направляючих:

Неправильне використання символіки

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

Змінювати накреслення елементів

Змінювати пропорції елементів

Змінювати розміщення елементів

Трансформувати елементи блоку

Змінювати горизонтальне положення блоку

Додавати чужорідні елементи

Застосовувати різноманітні ефекти

Растеризувати елементи блоку

Змінювати положення дескриптора

Змінювати шрифт дескриптора

Використовувати ненормативний колір

Розміщувати повноколірний блок на неоднорідних зображеннях

Розміщувати повноколірний блок на кольорових, контрастних фонах

Розміщувати білий блок на світлих фонах

II. Додаткові елементи

Корпоративний інтегратор

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

В якості корпоративного інтегратора використовуються різноманітні геометричні фігури (в основному — багатокутники), пофарбовані у фірмові кольори.

Корпоративний інтегратор може складатися як з одної, так і з декілька фігур. Якщо геометричних фігур в інтеграторі дві і більше, існує два варіанти взаємодії між ними: повне перекриття нижніх фігур верхніми, і перекриття в режимі накладення кольорів. Для накладання кольорів, в залежності від використовуємих кольорів, застосовується один з трьох режимів змішування: overlay, hard light або soft light.

Повне перекриття

Overlay

Hard light

Soft light

При розміщенні корпоративного інтегратора на фотографіях, ілюстраціях або інших зображеннях, рекомендується задавати один з режимів змішування, всім елементам інтегратора. Який саме режим змішування використовувати для кожного елемента, залежить від кольорів фонового зображення і кольорів, використовуємих в інтеграторі.

Декілька прикладів використання корпоративного інтегратора:

При розміщенні фірмового блоку на корпоративному інтеграторі, потрібно розташовувати його таким чином, щоб під ним не було перетинів і кордонів фігур інтегратора.

Бекграунд

Фірмові бекграунди створюються на основі градієнтів і корпоративного інтегратора.

Існує два типи бекграундів: монохромний і багатокольоровий. Монохромний бекграунд може складатися або з одного, простого градієнта (див. розділ кольори), або з декількох градієнтів, які накладаються один на одного, в режимі змішування soft light. При створенні монохромних бекграундів з використанням декількох градієнтів, слід додержуватись двох правил: в малюнку бекграунду уникати горизонтальних ліній (кратних 90°) і загальний тон бекграунда має бути відносно рівномірним. Багатокольоровий бекграунд може складатись з двох і більше градієнтів різного кольору, які накладаються один на одного, в режимі змішування overlay, hard light або soft light.

Як монохромні, так і багатокольорові бекграунди можна використовувати з фотографіями. У випадках монохромних версій, вся поверхня фото повинна перекрита градіентами. У випадках багатокольорових бекграундів частина фото може бути не перекрита градієнтами.

Символіка на бекграундах застосовується виключно в білому кольорі.

Фірмовий шрифт

В оформленні матеріалів платформи використовується дві шрифтові гарнітури — Робото (Roboto) і Паратайп Серіф (PT Serif).

Шрифт Roboto .web

Шрифт Roboto Condenced .web

Шрифт PT Serif .web

Сімейство «Робото» використовується для набору основного масиву тексту, ділової документації, оформленні елементів стилю і т. і. Гарнітура Паратайп Серіф використовується для набору великих обсягів тексту і, іноді, в рекламних і презентаційних матеріалах платформи.

Якщо у вас виникли питання щодо використання символіки, або окремих елементів стилю, незрозумілі якісь моменти і потрібна допомога — обов’язково напишіть нам.

Дякуємо за уважне та акуратне ставлення до візуального стилю платформи!