Motivationalservice

Educational project for the course of basic programming, created in the form of interactive infographic.

Task: design and code the page.

Tools: Figma, Photoshop, HTML, CSS.

2019

This project is a one-page desktop web-app by design.

Its core is a table made of dots. Each dot is a week, each row is a year. The entire tables shows how many weeks are in 90 years of life. Once a user sets their birthday, the table starts to work.

The biggest challenge of this project was drawing of 4680 dots in Figma. Coding it was not a problem at all: there is a simple script cloning dots.

Once I created a table and placed UI elements on their places I realised that the design looks too serious. I went for tropical greenery and colors to bring some life to it.

The «Programming for Starters» course is built around this project. Students are offered to write lacking JavaScript code.

Source code is availible in my repo, also you can play with the table on repl.it.

Мотивационныйсервис

Учебный проект на курсе основ программирования, выполненный в виде интерактивной инфографики.

Задача: разработать дизайн страницы и сверстать её.

Инструменты: Figma, Photoshop, HTML, CSS.

2019

Этот проект задуман как одностраничный десктопный сервис.

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

На этапе дизайна самым большим челленджем оказалось отрисовать 4680 точек в Figma. (На этапе вёрстки это, наоборот, не вызвало проблем: точки проставляет короткий скрипт, клонирующий узлы).

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

Вокруг этого проекта построен курс «Старт в программировании»: учащимся предлагается написать недостающий JavaScript-код, в результате чего таблица оживает и точки начинают окрашиваться.

Исходный код можно посмотреть в моём репо, поиграть с таблицей можно на repl.it.