Сайт курсу Phyton GoITeens

Результатом роботи є створення сторінки онлайн-курсу Phyton для дітей зі зручним інтерфейсом, анімаціями

  • Веб-сайт Гоуайтінс дизайн на десктопі.
  • Веб-сайт Гоуайтінс дизайн на телефоні.

Про проєкт

Сторінка створена із використанням стандартних веб-технологій HTML 5 i CSS 3, Sass(SCSS), збірка Gulp, JS(JQuery). Написано за методологiєю БЕМ, що дало можливiсть робити компоненти інтерфейсу, які розширюються і повторно використовуються. Інтегрованi стороннi бiблiотеки Swiper-slider, GSAP-animation. Back-end написаний на PHP з використанням CMS Wordpress, а також глобальним eCommerce плагiном Woocommerce. Також було застосовано плагiн ACF, для покращеної роботи з адмін-панеллю Wordpress та розробки flexible-content блокiв.

Технології

  • кольорова іконка jquery технології
  • кольорова іконка js технології
  • кольорова іконка php технології
  • кольорова іконка wordpress технології

Проблема

  • 001

    Створення зручної адмін-панелі з метою надання можливості керування сторінкою.

  • 002

    Створення цікавої сторінки онлайн-курсу для дітей та підлітків.

Рішення

  • 001

    Написання Back-end сторінки з використанням CMS Wordpress, а також застосованням плагiна ACF, для покращеної роботи з адмін-панеллю Wordpress та розробки flexible-content блокiв, надає замовнику можливість оперативно вносити зміни в контент сторінки без залучення розробників.

  • 002

    Сторінка розроблена з використанням бiблiотек Swiper-slider, GSAP-animation, що надало більшої інтерактивності та зручності ознайомлення з інформацією.

User Flow

зображення User Flow
Приклад дизайну Гоуайтінс веб-сайту представлений у діагональній рамці
Приклад дизайну Гоуайтінс веб-сайту представлений у багатьох телефонах
Приклад дизайну Гоуайтінс веб-сайту представлений у трьох планшетах
Приклад дизайну Гоуайтінс веб-сайту представлений у малих рамках
Приклад дизайну Гоуайтінс веб-сайту представлений у великих рамках

Типографіка

  • Заголовна і прописна буква а
    назва шрифту IBM Mono
    Абетка шрифтом IBM Mono
  • Заголовна і прописна буква а
    назва шрифту Montserrat
    Абетка шрифтом Montserrat

Color

  • #FEC830
  • #5331B2
  • #1A1A1A
  • #474747
  • фото дизайну сайту
  • фото дизайну сайту
  • фото дизайну сайту
  • фото дизайну сайту