Scope

Background

Creating new blog images for social media in a standardized way is often a cumbersome task. It takes a lot of time to come up with a fresh idea every single time when creation starts from scratch. This process can be vastly improved by introducing a UI tool for image content creation.

Purpose

Keitaro wants to make the Marketing team more productive by shortening the time and effort needed for creating images for new blog posts. We want to automate the boring tasks and be able to quickly create new blog post images, that are based on a specific visual template.

Features

The Blog Image Generator needs to provide the following capabilities:

• Set border around canvas
• Manage canvas border width
• Change image headline
• Change background color
• Change background image
• Add one or multiple gradient layers with
  • Rotation in degrees
  • Type:
    • Linear
    • Radial
    • Conic
• Modify blending mode on per gradient basis
• Add one graphical icon next to the title
• Move all elements within the canvas
• Select image aspect ratio based on an initial image width of 1920px
• Export canvas to PNG

Design

Visual design is available on Figma. All relevant input controls (<input>, <select>, <textarea>) should be represented with Floating Labels.

Technology stack

• Node.js v18.16.0
• Bootstrap v5.3
• Bootstrap Icons v.1.10.5 [create-react-app] - v5.0.1
• Context for React state management Color picker from
• Drag and Drop API Local storage for data that needs to be persistent

Back-end

This tool won't use any back-end infrastructure. Images will be created in any web browser through the existing Open Web Platform image APIs.

Inspiration

Imagine the Blog Image Generator working like https://gradient.style/.

Time frame

Initially the project is planned for a period of two weeks.