jkdmarks/arcus-frontend

A color palette and mockup generator web-app built with React and Redux

A web-app that enables designers to quickly cycle through generated color palettes and make better design decisions.

Hosted on Heroku

Demo Video

Design Ideas

I wanted the UI to be clean and not distract from the colors in the palettes.

Color palettes are generated as the user manipulates diffrent sliders. All palettes have 5 diffrent colors. The first color in the pallet is the "key color" AKA the direct output of the sliders. Only 1-3 colors in each palette have a diffrent hue, the other colors only vary in saturation and lightness. The hue variations are based in color theory relationships(analogus, complementary, split complementary).

Recoloring mockups on a click is quick and easy solution for testing out diffrent color ideas.

All of the mockups are SVGs and the fill color of their parts are changed through state in Arcus's Redux store. I've made five diffrent mockups that embody common graphic design visuals(a website, logo, buisness card, etc.).

Bulit With

• React - web library used for building the interface
• Redux - used to declaratively pass and manipulate reusable state to all components
• react-router - for page navigation
• react-responsive - for media queries / responsive design
• JSS - to manipulate CSS attributes based on state
• React Circular Color - used this hue slider
• Scalable Vector Graphics (SVGs) - for mockup images created in Adobe Illustrator
• Ruby on Rails - to save palettes for reuse in different mockups, in a has_many :through domain model
• postgreSQL - as the database
• bcrypt - to hash user passwords for real auth
• JSON Web Token (JWT) - for secure login storage

Additional Notes

I'm planning on creating a native app and user uploaded mockups in the future. Named after the Roman goddess of rainbows.

Backend repo