GoCoding IT-мектебі үшін жаңа сайт және брендбук

Міндет

Бруклиндегі GoCoding мектебінің өз стилі бар еді, бірақ сайт пен материалдар бөлек шешімдер жиынтығы сияқты көрінді. Бет, баннер және кәдесый бір мектеп болып көрінуі үшін жаңа сайт және бірыңғай рәсімдеу ережелері қажет болды.

Басты ой: бәрін нөлден сызбау. Мектептің бұрынғы стилін негіз етіп алып, оны жеңілдеттік және жаңа элементтер қостық. Әр элементтің өз міндеті бар жүйе пайда болды.

Не істедік

1. Бірінші экран және ата-ананың жолы

   • Ұсыныс
   • Құрылым

   Тақырып ата-ананың басты сұрағына бірден жауап береді: бұл қандай мектеп және кімге арналған. Жанында күлімдеген бала және Гого айдаһарша, сайт тірі және достық көрінуі үшін. Одан әрі бет жазылуға қадам-қадаммен апарады.

   • Кімге. 4 жастан 15 жасқа дейінгі балалар, 8 адамға дейінгі топтар.
   • Бір әрекет. «Тегін сынақ сабағына жазылыңыз» үлкен түймесі.
   • Сенім. Бірінші экран бұрышындағы STEM.org белгісі.

   Ата-ананың бет бойынша жолы

   1. Бірінші экранне үйретіледі және кімге
   2. Курстарбағыттар мен жас
   3. Сенімоқушылардың жұмыстары және команда
   4. Жазылутегін сынақ сабағы
2. Неге GoCoding

   • Блоктар
   • Мәтіндер

   Одан кейін сайт «сіздердің басқалардан артықшылығыңыз қандай» деген сұраққа жауап береді. Төрт себепті көлемді иконкалары бар карточкаларға жинап, үшіншісін түспен және сәл еңкейтумен бөліп көрсеттік.

   • Икемділік және қамқорлық. 8 адамға дейінгі шағын топтар, жіберілген сабақтарды оңай өтеуге болады.
   • Прогресс назарда. Педагогтерден тұрақты кері байланыс.
   • Практика және нәтиже. Ойын және балалардың өз IT-жобалары арқылы үйретеміз.
   • Түсінікті оқытушылар. Күрделі нәрсені балаларға түсінікті тілмен түсіндіреді.

   

3. Курстар

   • Каталог
   • Слайдер

   Мектеп бағыттары слайдері бар карточкаларға жиналған. Әрқайсысында курстар саны, балалардың жасы және «Барлық курстарды көру» түймесі көрсетілген. Карточкаларда Гого қажетті курстың костюмінде тұр.

   • Таңдау оңай. Робототехника, геймдев, бағдарламалау және басқа бағыттар жеке карточкаларда.
   • Таңдауға көмек. Жанында сынақ сабағына жазылуы бар «Лайықты курсты таңдауға көмектесеміз» баннері.

   

4. Оқушылардың жұмыстары

   • Сенім

   Ата-аналар нәтижеге сенуі үшін балалардың нақты жұмыстарын көрсеттік. Мысалы, 13 жастағы оқушы жасаған Unity 3D-дегі Хэллоуин сахнасы. Жанында жоба сипаттамасы және сабаққа жазылу түймесі.

   • Тірі мысал. Ата-ана баланың курста не жасай алатынын көреді.
   • Жылжытуға оңай. Жұмыстар жоғарыдағы көрсеткілер мен нобайлар арқылы ауысады.

   

5. Команда

   • Сенім
   • Адамдар

   Ата-аналарға баласын кім оқытатынын білу маңызды. Сондықтан сайтта команда блогы бар: әр адамның өз фотосы, аты және рөлі — директор, негізін қалаушы, менеджер, оқытушы.

   • Бет және рөл. Әрқайсысының өз карточкасы фирмалық 3D-сызықтар фонында.

   

6. Іс-шаралар, әлеуметтік желілер және жазылуға шақыру

   • Bento
   • Әлеуметтік желілер

   Төменде Bento стиліндегі блоктар: сол жақта Гого туралы оқиға және мектеп іс-шараларына сілтеме, оң жақта әлеуметтік желілер және IT-шытырман оқиғаны бастауға жарқын шақыру. Әртүрлі биіктіктегі блоктар конструктордағыдай тығыз тұр.

   • Әлеуметтік желілер. Instagram, YouTube және Telegram бір қатар түймелерде.
   • Тағы бір жазылу түймесі. «Қазір жазылу» шақыруы ата-ана шешім қабылдауға дайын жерде қайталанады.

   

7. Сынақ сабағына жазылу

   • Форма
   • Өтінімдер

   Форма қысқа: ата-ананың аты, баланың аты мен жасы, пошта және телефон. Жанында ноутбугі бар және бас бармағын көтерген қыз, жазылу достық көрінуі үшін.

   • Өрістер аз. Форманы тез толтыруға болады, телефоннан да.
   • Түсінікті келісім. Құпиялылық саясаты және баланың деректері үшін жеке құсбелгілер.

   

Брендбук

Сайтпен бірге брендбук құрастырдық — стиль ережелері бар презентация. Онымен кез келген дизайнер мектеп стилінде жаңа бет, баннер немесе кәдесый жасай алады және қандай түс пен қаріп қолдану керегін болжамайды.

1. Концепция: жаңа бастама емес, даму

   • Идея

   Мектептің бұрынғы стилін жеңілдетіп, жаңа элементтермен толықтырдық. Танымалдықты сақтау маңызды болды: ата-аналар мен балалар бұл сол мектеп екенін бірден көруі керек.

   • Сабақтастық. Танымалдық сақталды, ал стиль жеңілірек және ұқыптырақ болды.
   • Жүйе. Әр элемент ортақ стильге жұмыс істейді.

   

2. Bento стилі: конструктор сияқты блоктар

   • Тор
   • Блоктар

   Бет бөлек блоктардан, конструктордан сияқты құралады. Әр блоктың өз міндеті бар, бірақ олардың бәрі бір стильде, сондықтан оларды еркін ауыстырып, біріктіруге болады.

   • Икемділік. Блоктарды сайтқа, жарнамаға және әлеуметтік желілерге оңай бейімдеуге болады.
   • Жұмыста ыңғайлы. Мұндай блоктарды кодта масштабтау және қолдау оңайырақ.

   

3. Түстер

   • Түс

   Бір басты түс және бірнеше көмекші. Негізі — фирмалық индиго, ашық фон бетті жеңіл ұстайды, ал жарқын лайм көзді басты нәрсеге аударады.

   • GoCoding Indigo #39359C. Брендтің негізгі түсі.
   • Cloud White #F7F8FF. Негізгі фон түсі.
   • Electric Lime #B9EB1A. Негізгі контраст және акцент.
   • Графит #222222. Негізгі мәтін және қараңғы блоктар.
   • Қызыл, қызғылт сары, сары. Тек графика үшін.

   

4. Қаріп

   • Қаріп

   Бүкіл бренд үшін бір қаріп — Helvetica Neue. Ол таза, жақсы оқылады және жарқын графикамен таласпайды.

   • Үш жазылым. Regular, Medium және Bold.
   • Тәртіп. Бір қаріп беттерді бірізді етеді және стильді қолдауды жеңілдетеді.

   

5. Графика

   • 3D
   • Графика

   Басты тәсіл — көлемді 3D-сызықтар. Бұрын олар жай фон еді, қазір стильдің маңызды элементі. Оларға 3D-иконкалар қостық: олар оқу бағыттарын түсіндіреді және эмоция қосады.

   • Сызықтардың бес нұсқасы. Лайм, индиго, қызыл, қызғылт сары және қара.
   • Көлемді иконкалар. Олар бағытты түсінуге көмектеседі және бетті жандандырады.

   

6. Бренд кейіпкері

   • Маскот

   Бренд кейіпкері Гого айдаһарша болды. Ол сайтта, иллюстрацияларда, курс карточкаларында және кәдесыйларда. Біз оны қалай ойлап тапқанымыз — «Гого маскоты» жеке жобасында.

   • Курстарға арналған бейнелер. Әр курстың кейіпкерге арналған өз костюмі бар.
   • Тек сайт қана емес. Кейіпкер жарнамаға, кәдесыйларға және ойындарға жарайды.

   

Жарнама және баннерлер

Сол элементтерден сайт пен жарнамаға арналған баннерлер құрастырдық: жарқын фон, 3D-сызықтар, бала немесе Гого және бір түйме.

Нәтиже

• Бірінші экран не үйретілетінін және кімге екенін айтады және бір әрекетке апарады: сынақ сабағына жазылу
• Сайт Bento стиліндегі блоктардан жасалған: оларды өзгерту және қосу оңай
• Брендбук түстерді, қаріпті, графиканы және кейіпкерді бекітеді, стиль тарап кетпеуі үшін
• Кейіпкер Гого сайтты, жарнаманы және кәдесыйларды бір оқиғаға байланыстырады

Жұмысқа не кірді

• Сайт дизайны
• Сайт әзірлеу
• Брендбук
• 3D-графика
• Баннерлер
• Жазылу формасы

Клиент пікірі