Введение Доброго дня, друзья. Я - студент 3 курса колледжа, обучающийся на программиста. Цель данного цикла статей - прокачка skills в веб разработке и обмен опытом. Приятного прочтения guys Что будет использоваться? Никаких фреймворков, только хардкор! Мой стек - HTML + CSS + JS + PHP. Дизайн по классике в Figma + вспомогательные онлайн сервисы Определяю идею проекта Успешный проект - полезный проект. Главная рутина студента-программиста - это обучение. Основная задача моего проекта - заинтересовать и замотивировать пользователя в этом и облегчить сам процесс. Как это сделать? Геймификация! Как и почему это работает, смотрите тут Обучать изначально мы будем именно Web разработке т.к это мое основное симпатизирующее направление) Функционал проекта Итак, я определился, что буду делать, осталось продумать как. Плавность - главный фактор успешного усвоения информации. Основная механика - решение задач. Материал будет разбит на несколько уровней сложности, каждый из которых будет содержать теоретический материал в виде статьи и практический тест в виде задачи с проверкой в реальном времени. Для того чтобы охватить максимальное количество аудитории проект будет оснащен следующими фичами: Уровень пользователя. Чем выше у игрока уровень, тем больше функционала платформы ему открывается и тем более сложный материал доступен для изучения; Форум платформы - место, где пользователи смогут обмениваться опытом. Новички задавать вопросы и делиться своими проектами, а опытные пользователи создавать свой обучающий материал; Очки репутации - внутренняя валюта, которую можно получить за активность на форуме; Маркет платформы. Пользователи смогут обменивать свои программные продукты или предоставлять услуги взамен на очки репутации; Подготовка к созданию дизайна Изначально необходимо визуально представить прототип сайта. Хороший дизайн держится на 3- х китах: Структура, типографика и цвета, будем разбираться. Первое, что будет видеть пользователь - landing page с основной информацией о платформе. Для того, чтобы создать приятную глазу картинку подберу палитру цветов с помощью этого сервиса. Необходимо создать, как светлую, так и темную тему. Начнем с первой. Психология - основа маркетинга всего продукта. Для выбора акцентного и второстепенного цвета я использовал следующие рекомендации В итоге у меня получилась вот такая палитра ( для подбора использовал этот сервис ) Заключительный этап подготовки - типографика (шрифты). Тут всё душно и непонятно, поэтому вот, сразу результат. Было выбрано 2 шрифта с 3 начертаниями: Fira Sans Bold + Montserrat Medium и Regular Дизайн лендинга Ну, тут без лишних слов. На результат смотрите тут или открыть спойлеры с каждым блоком сайта P.S. С названием пока не определился, предлагаю придумать в комментариях) Главный блок Блок о геймификации Блок о форуме Блок о маркете Завершающий блок и подвал Заключение На этом первая часть моего Devlog закончена. Очень бы хотел получить от вас обратную связь в комментариях: советы, критика, ощущения после прочтения. Все чекну, по возможности отвечу. Всем добра)