Найти тему
Дабл Сплэш

#1 - Fast Logo - Начало разработки pet-проекта

Привет мир!
В этой статье я попытаюсь рассказать с чего я стартовал для разработки моего пет-проекта.

Я хочу наполнить свой GitHub интересными штучками и попрактиковаться в разработке проектов(хоть и небольших). Именно поэтому я создаю этот pet-проект.

Напомню, что такое Fast Logo и в чем суть этого проекта. Это страница, на которой пользователь сможет легко и быстро создать свой логотип на быструю руку. Я хочу создать супер-простое веб-приложение, в котором буквально за пару кликов можно скачать готовое простое лого.

Вот что я понимаю под простым логотипом:

То есть это какая-то надпись или просто буква в квадратике или кружочке + иконка какая-нибудь. Что-то супер простое.

В интерфейсе сайта будет 3 основных блока:

  • блок на котором будет просмотр логотипа,
  • блок с элементами (фон, текст, иконка)
  • блок со свойствами элемента
Слева - элементы, снизу - свойства, самый большой - предпросмотр логотипа
Слева - элементы, снизу - свойства, самый большой - предпросмотр логотипа

Это примерный макет сайта:

  • Блок слева - это элементы, которые можно выбрать по категориям (фон, текст, иконка). Например, будет фон "квадрат", ты его выбираешь и фон будет квадратным.
  • Блок снизу - это свойства выбранного элемента: тип элемента, цвет, размер и так далее
  • Центральный большой блок - это предпросмотр логотипа, как он будет выглядеть в финале.

Честно сказать, я не силен в дизайне и как показывает практика, дизайн я переделаю ещё 300 раз в процессе разработки, но макет, что выше, я решил покрасить в паинте, чтобы показать что должно выйти по итогу и получилось, что-то такое:

Вкладки будут другие: фон, текст и строка
Вкладки будут другие: фон, текст и строка

Согласен, выглядит ужасно, но это уже более наглядный пример того, где и что будет лежать.

В блоке слева есть что-то на подобие вкладок, которые расположены вверху. При переключении, список будет обновляться.

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

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

Вроде всё что хотел написать - написал.

В следующих статьях я буду определяться со стеком, нарисую схематично как всё будет работать, а также создам первую верстку и поработаю с данными.

Подписывайтесь на этот канал, чтобы следить за новостями!