ОГЛАВЛЕНИЕ Бренд
Типографика
Кто мы, наша цель...................................................................3 История бренда....................................................................... 4
Основной и второстепенный шрифт..............................15 Стили типографики..............................................................17 Пример оформления текста..............................................18
Аудитория Кого обучаем............................................................................ 5 Признаки ЦА - парень 20-27............................................... 6 Признаки ЦА - девушка 20-25............................................ 7 Общение с клиентом............................................................. 8
Логотип Свободное пространство..................................................... 9 Размеры................................................................................... 10 Вариации лого....................................................................... 11 Запрещенные варианты использования....................... 12
Стиль изображений Примеры использования и размещения....................... 19
Приложения Баннеры в социальных сетях............................................ 20 Посты и реклама в социальных сетях............................22 Пример оформления профиля Instagram...................... 23 Оформление на Youtube.....................................................24 Дизайн фирменных футболок.......................................... 25
Цветовые схемы Основные и второстепенные цвета............................... 13 Рекомендуемые фоны......................................................... 14
2
БРЕНД Кто мы?
Наша цель
Школа веб-разработки Web Hero School в формате онлайн обучения. Обучение в школе разбито на шаги с видео-уроками и заданиями. Каждое задание проверяется ментором. Для прохождения обучения нужен только компьютер и доступ к интернету. По окончанию обучения студент имеет достаточно знаний для того, чтобы успешно пройти собеседование на должность Junior Frontend-developer и устроиться на работу. С трудоустройством мы также помогаем.
Научить пользователей основным навыкам программирования и помочь устроиться на первую работу.
Наши качества Стратегия близости с клиентом Искренность Открытость
Как проходит обучение? Выдаем все необходимые материалы и планы развития для обучения и сопровождаем на всех этапах развития Не даем ненужную информацию, только то, что нужно для устройства на работу Даем возможность приобрести обучение в рассрочку Студенты могут проходить обучение в своем ритме, не спеша за группой Возможность приобрести подписку и задавать свои вопросы в любое время Ментор всегда готов ответить на вопрос, поддержать и помочь разобраться с проблемой Развиваем не только технические компетенции, но и навыки общения, способность работы в команде и другие навыки, на которые смотрят при найме
Бренд 3
ИСТОРИЯ БРЕНДА Как появился этот проект? Я, Дарья Пушкарская, работаю уже более двух лет в крупных ИТ-компаниях (2GIS, Mail.ru, Tinkoff.ru). Со мной в команде ведущие специалисты этой сферы и все они прошли тот же самый путь, который предстоит пройти вам. Но я не всегда могла себе позволить путешествовать по миру, делать дорогие покупки, помогать родителям и жить в Москве. Возможно, многие сейчас узнают в этой истории себя. Я училась на третьем курсе и внезапно осознала, что я еще не знаю, кем буду работать. Тогда я открыла сайт с вакансиями и заметила такую вещь: программисты получают самую высокую зарплату, а в топ-профессий - веб-разработчик. Я решила освоить эту профессию, но что делать и как учиться мне на тот момент было непонятно. Я смотрела видео в интернете и пыталась повторить, читала книги, искала людей. Я двигалась очень медленно и мои результаты меня не удовлетворяли. Я поняла, что мне нужна помощь: Я записалась на курс по программированию и там нашла своего учителя, который мне помог и подсказал, что же я делала неверно предыдущие пол года. После этого моя скорость обучения увеличилась. Я получила в максимально быстрые сроки то, что не могла сделать за целый год! Но после окончания занятий я опять осталась сама с собой и не знала, что делать дальше. Тогда я мечтала о человеке, который всегда будет стоять рядом и помогать: было бы здорово, если бы был такой ресурс, куда можно просто написать свой вопрос и быстро получить ответ.
Мой проект, который я делала во время обучения, заметили в крупной компании и пригласили на работу на должность Junior Developer. По началу я испытывала трудности. Во время самообучения я потратила слишком много времени на изучение технологий, которые не нужны при трудоустройстве. Достаточно лишь базовых подходов. Когда я сделала упор только на основные технологии, мои дела пошли в гору: мой рост кардинально ускорился. Поэтому мы открыли эту школу, в которой нет лишней информации. Не надо спешить за группой, если вы привыкли работать в другом ритме. Обучение разбито на маленькие шаги, которые ведут к большой цели. Постоянно на связи ментор, который проверяет все работы, отвечает на вопросы и не дает опускать руки. Один из коварных моментов - при стремлении устроиться на работу все развивают только технические компетенции, которые, несомненно, важны. Но сейчас при найме смотрят не только на них, но и на навыки общения, способность работы в команде и другие. Мы помогаем развивать и эти качества тоже. Обучение в школе считается оконченным, когда вы устроитесь на работу.
Бренд 4
АУДИТОРИЯ Кого обучаем? Обучение предназначено для людей с нулевым уровнем знаний в веб-разработке, либо с минимальными знаниями. Главная особенность школы по веб-разработке заключается в том, что она дает не только актуальные знания, но и доводит студентов до трудоустройства после окончания обучения.
Целевая аудитория Основная – парень, 20-27 лет Девушка, 20-25 лет Женщина, 25-35 лет (редкий кейс) Мужчина, 27-35 лет (редкий кейс)
Проблемы пользователей Не может устроится на достойную работу Получение диплома не принесло успешного трудоустройства
Инсайт целевой аудитории
Боится, что недостаточно компетентен для устройтсва на работу
“Хочу путешествовать и позволять себе крупные покупки, ни в чем не отказывать и быть уверенным в завтрашнем дне, но не могу, потому что моя текущая работа и уровень дохода этого не позволяют, и я не верю в то, что пройдя обучение в короткие сроки я получу нужные навыки и смогу устроиться на работу, поэтому продолжаю бездействовать, жить от зарплаты до заплаты и довольствоваться тем, что имею.”
Боится, что потратит слишком много времени на обучение Непонимание, что действительно нужно учить Не понятно, с чего начать изучать веб-разработку Высокая цена курсов Попытки самостоятельного обучения не удались Не может найти хорошего наставника. Знакомые, которые уже работают в сфере веб-разработки объясняют сложно, либо неохотно Нехватка денег Страх за свое будущее Страх потратить время на неактуальные знания Не верит в свои силы Боится, что не пройдет собеседование
Аудитория 5
ПРИЗНАКИ ЦА Парень, 20-27 лет Социально-демографические Парень, 20-27 лет, русскоговорящий, учится в университете на технической специальности или только закончил, имеет незначительный и нестабильный доход, студент/сын/не женат; живет в общежитии, с родителями, либо снимает с друзьями;
Психографические Любознательный, рациональный амбициозный; занимает активную жизненную позицию, возможно играет в компьютерные игры; активный пользователь социальных сетей; мечтает о финансовой свободе, хочет купить свою квартиру, машину, отправиться в путешествие; Много времени проводит во вконтакте или на сайтах про технологии/гаджеты; “гугл” бесплатные уроки и смотрит видео-уроки на youtube; покупки совершает онлайн;
Поведенческие Готов купить курс за 20-30 тысяч, если он принесет за собой работу. Но предпочтет бесплатный курс или очень дешевый. Главное для него в курсе – это ценность, сколько принесет пользы. Обращает внимание на отзывы других студентов; Удобство, подойдет ли лично ему и ритм обучения и уровень сложности. Задумывался уже не раз, чтобы освоить новую профессию, но все не может решить как. При выборе курса спрашивает мнение друзей и изучает авторитетные для него ресурсы.
Аудитория 6
ПРИЗНАКИ ЦА Девушка, 20-25 лет Социально-демографические Девушка, 20-25 лет, русскоговорящая, учится в университете или только закончила, получает финансовую поддержку от родителей или парня, студентка/дочь/не замужем; живет в общежитии, с родителями, с парнем, либо снимает с подругой;
Психографические Любознательная, импульсивная, мечтает о красивой жизни; занимает активную жизненную позицию, занимается спортом, следит за собой; активный пользователь социальных сетей; мечтает о финансовом благополучии, хочет иметь возможность тратить на себя и на путешествия; следит за жизнью знаменитостей и блогеров; активный пользователь Instagram; покупки совершает онлайн;
Поведенческие Готова купить курс за 20-30 тысяч, если он принесет за собой работу. При покупке курса будет советоваться с подругой/парнем/родителями. Главное для нее в курсе – это доступность материала и поддержка. Обращает внимание на отзывы других студентов; подойдет ли лично ей и ритм обучения и уровень сложности. О школе узнала случайно, либо от друзей/блогеров.
Аудитория 7
ОБЩЕНИЕ С КЛИЕНТАМИ Проявлять эмпатию к клиенту. Общаться на “ты” является обязательным. Клиенты должны чувствовать дружественную атмосферу и доверять нам. Это позволит им чуствоваться себя комфортно. Всегда стараться ставить себя на место клиента, чтобы лучше его понимать.
Общаясь с клиентом напрямую или через online-каналы, такие как веб-сайты, реклама в интернете, письма и презентации, мы должны быть: Умными
Честными
Уверенными
Открытыми
Обаятельными
Душевными
Гайды по коммуникации Показать свою экспертность
Быть полезным
Дополнить
Посмотри информацию на нашем сайте.
“Не отвечать”
Дополнить
На основании твоих навыков я бы рекомендовал тебе пакет “Стартовый”. Прошу прощения, но на данный момент я занят другой задачей. Сейчас я попрошу коллегу помочь тебе / Я могу перезвонить тебе через 30 минут. Дополнить
Аудитория 8
ЛОГОТИП Свободное пространство Свободное пространство вокруг логотипа отделяет его от таких элементов, как заголовки, текст, иллюстрации и от границ обреза при печати. Значение X эквивалентно размеру буквы “О” в тексте выбранного логотипа. (Х на логотипе “b” эквивалентно букве “О” из логотипа “b”, аналогично для “a” и “c”.) В логотипе “d” переменная X эквивалентна 0,8 размера буквы “H”.
Логотип “b” используется в случаях, когда есть возможность разместить его в больших размерах. Важно, чтобы читалась подпись “Школа веб-разработки и тродоустройство”. Если она не читается, лучше использовать логотип “а”. Логотип “d” используется в группах в соц. сетях, и как фавикон. В случаях, когда нет возможности разместить большие логотипы используется вариант “c”.
Логотип 9
ЛОГОТИП Веб
Печать
Минимальное размер при расположение на сайте - 200px./100px./55px. 72PPI. Оптимальный размер - 250px./180px./65px.
Минимальное размер при печати - 60 мм./40мм./30 мм. Оптимальный размер для печати на а4 - 70мм./50мм./35мм.
Логотипы должны быть всегда читаемы.
Минимальный размер, описанный выше не учитывает свободное пространство. Минимальные размеры описаны для экранов 72PPI. Если дисплеи имеют более высокий показатель PPI (например, Retina), минимальный размер следует изменить пропорционально.
Логотип 10
ЛОГОТИП Комбинации логотипа и цветов: A,H. Черное начертание логотипа и желтая надпись.
Эту версию следует использовать только на светлом контрастном фоне.
B,G. Белый логотип с желтой надписью на темном
фоне. Запрещено использовать с некоторастным или светлым фоном.
C. Желтый логотип с белой надписью на темном
фоне. Запрещено использовать с некоторастным или светлым фоном.
D,I. Бело-черный логотип. Только на определенных
фонах, где другие логотипы не видны. (пример желтый фон)
E. Стандартный, белый цвет логотипа на темном фоне. Запрещено использовать эту версию логотипа на неконтратсном светлом фоне.
F. Черное начертание логотипа. Эту версию следует использовать только на светлом фоне.
Логотип 11
ВАРИАНТЫ ЛОГОТИПА Запрещенные варианты использования логотипа Данные правила относятся ко всем видам логотипов, включая маленький, средний и большой вариант. Правила показаны на примере логотипа среднего размера.
A. Запрещается использовать темный логотип на темном фоне, а также светлый на светлом.
B. Запрещается использовать цвет логотипа, отличный от гайдов.
C. Запрещается поворачивать логотип и менять пропорции.
D. Запрещается использовать логотип на сложном фоне
E. Запрещается обрезать логотип. F. Запрещается использовать градиентную заливку
Логотип 12
ЦВЕТОВЫЕ СХЕМЫ Основная Желтый HEX #FFD748 RGB 255/215/72 CMYK 0/16/72/1
Темно-синий HEX #45446C RGB 69/68/108 CMYK 36/37/0/58
Белый HEX #FFFFFF RGB 100/100/100 CMYK 0/0/0/0
Темно-серый HEX #A2A1B5 RGB 162/161/181 CMYK 10/11/0/29
Черный HEX #000000 RGB 0/0/0 CMYK 0/0/0/100
Второстепенная Оранжевый HEX #F1A32F RGB 241/163/47 CMYK 0/32/80/5
Основная и второстепенная цветовые схемы - базовые цвета, которые используются на всех элементах фирменного стиля, например, на сайте. Для иллюстраций, обложек видео и баннеров можно использовать более яркие цвета и градиентные заливки (примеры на следующей странице “Рекомендуемые фоны”.) Важно использовать чистые цвета. Несколько примеров показано на следующей странице. Больше примеров идеальных для использования градиентов можно найти на сайте https://webgradients.com.
Цветовые схемы 13
ЦВЕТОВЫЕ СХЕМЫ Рекомендованные фоны Можно использовать как одноцветные, так и градиентные заливки для фона. Примеры приведены внизу. Важно учитывать правила размещения логотипа на разных цветовых решениях фона. (см. “Вариации лого” и “Запрещенные варианты использования”).
#45446C #FFA014 #FFD74A
#B741FF #2C27FF #F093FB #F5576C
#8FD3F4 #84FAB0 #667EEA #764BA2
#9795F0 - #FBC8D4
#667EEA - #764BA2
#BFD9FE - #DF89B5
#667EEA - #764BA2
#9795F0 - #FBC8D4
#BFD9FE - #DF89B5
Цветовые схемы 14
ТИПОГРАФИКА
Основной набор: Montserrat Основная гарнитура - Montserrat. Это это элегантный, современный шрифт без засечек. Используется в основном для заголовков.
Аа
Аа
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
Аа
Аа
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
LIGHT
BOLD
MEDIUM
EXTRABOLD
Типографика 15
ТИПОГРАФИКА
Второй набор: Lato Второстепенный набор шрифта - Lato. Это шрифт без засечек, созданный польским дизайнером Лукашем Джедичем. Гарнитура использует классические пропорции для придания буквам гармонии и элегантности. Это свободный шрифт с открытым исходным кодом.
Аа
Аа
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
Аа BOLD
Аа
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
АБВГДУФХЦЧШЩЪЫЬЭЮЯ абвгдуфхцчшщъыьэюя 0123456789-_&`#@?!/+(“)
LIGHT
MEDIUM
EXTRABOLD
Типографика 16
ТИПОГРАФИКА Стили типографики Заголовки H1
Заголовок текста
Заголовки H2
Заголовок текста
Montserrat Bold - 55px
Montserrat Medium - 30px
Заголовки H3 Montserrat Bold - 23px
Заголовок текста
Подзаголовок
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
Список
Lorem ipsum dolor sit amet, consectetur adipiscing
Lato Regular - 23px
Lato Regular - 18px
Elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua.
Текст
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Цитата
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Lato Regular - 18px
Lato Italic - 23px
Типографика 17
ТИПОГРАФИКА Стили типографики (пример оформления)
Обучение веб-разработке За три месяца обучим программированию с нуля и поможем с первым трудоутройством, где гарантированный доход составит от 30 000 ₽.
Немного о нас Web Hero School — это школа веб-разработки, которая включает в себя не только теорию и практику, но и обучает необходимым для трудоустройства навыкам. Автор школы — практикующий веб-разработчик, с опытом работы в таких компаниях, как 2GIS, Mail.ru и Tinkoff.ru – Дарья Пушкарская.
Наша цель Научить пользователей основным навыкам программирования и помочь устроиться на первую работу.
Как появился этот проект? Я, Дарья Пушкарская, работаю уже более двух лет в крупных ИТ-компаниях (2GIS, Mail.ru, Tinkoff.ru). Со мной в команде ведущие специалисты этой сферы и все они прошли тот же самый путь, который предстоит пройти вам. Но я не всегда могла себе позволить путешествовать по миру, делать дорогие покупки, помогать родителям и жить в Москве. Возможно, многие сейчас узнают в этой истории себя. Я училась на третьем курсе и внезапно осознала, что я еще не знаю, кем буду работать.
Типографика 18
СТИЛЬ ИЗОБРАЖЕНИЙ Примеры использования и размещения Современный и яркий стиль. Использование изометрических изображений в контрасте с фирменными цветами. Изображения людей и объектов лучше смотрятся, если их обтравить и использовать в контрасте с ярким фоном. Изометрические иллюстрации Яркие цвета и градиенты Больше иллюстраций и минимум фото
Стиль изображений 19
ПРИЛОЖЕНИЯ Баннеры в социальных сетях Обложка группы в социальной сети “Вконтакте” Градиентный фон с узорами в фирменном стиле, логотип и плашка с информацией о ближайшем вебинаре/видео, а также его дата.
Обложка группы в социальной сети “Вконтакте” #2 Желтый фон с обтравленными объектами, логотип и плашка с информацией о ближайшем вебинаре/видео, а также его дата.
Приложения 20
ПРИЛОЖЕНИЯ Баннеры в социальных сетях Обложка группы в социальной сети “Facebook”
Аватары в социальных сетях
Приложения 21
ПРИЛОЖЕНИЯ Посты и реклама в социальных сетях Пост в ВК
Пост в Instagram
Пост или Promote post в социальной сети Вконтакте. Размеры - 1000x700 px.
Квадратный пост в социальной сети Instagram. Размеры - 1080x1080 px. (или 1000х1000)
Другие размеры (для рекламы) 815x1180 145x165 1 200 x 628
Приложения 22
ПРИЛОЖЕНИЯ Пример оформления профиля Instagram #1 Чередование постов с разным фоном. Варинаты постов: пост-превью вебинара, пост с полезной информацией, с советовм, просто фотография и т.д. Важно, чтобы посты, которые идут один за другим отличались фоном или стилем.
Приложения 23
ПРИЛОЖЕНИЯ Оформление на “Youtube” Обложка ролика на Youtube Градиентный фон с узорами в фирменном стиле, логотип и название ролика.
Возможно разделение по темам. Каждой теме будет соответствовать определенный фон.
Баннер на “Youtube” Желтый фон с обтравленными объектами и логотипом.
Приложения 24
ПРИЛОЖЕНИЯ Дизайн футболок
Приложения 25
t
main@fromzerotowebhero.ru webheroschool.ru