Makr Web Builder UI

A reimagined user interface for the Makr builder

Makr Web Builder
Role
  • UI Design
For
  • Makr

The launch of the Makr website featured a similar product selection as the iPad app, including logos, business cards, postcards, product labels, and address labels. Business branding was a key focus of the website, emphasizing logos and they ways you can apply it to other projects.

The website also provided an opportunity to revisit the overall Makr user interface and experience, especially in the builder. I worked with our Lead Product Designer to finalize a design system for the Makr website that would be used across the product. A new blue and black color palette and a new font set was also introduced. I then rolled out the design system across the builder in Sketch, and worked with our UI Engineer to implement the new styling.

I evolved the design of builder to have a modern and minimalist design, as compared to the existing iOS apps. The dark gray is used as a grounding element and contrasts with the white canvas area. I also incorporated the new blue color as an accent throughout the product, where it is used to indicate focused and selected elements. The blue is not overly used and does not distract the user from the project they are editing.

Logo Builder

The logo builder allows the user to create a custom logo using text, lines, and a Makr-created icon library.

Makr Web Builder
Makr Mobile Web Builder
Makr Web Builder Text Editing
Makr Mobile Web Builder Text Editing
Makr Web Builder Icon Categories
Makr Mobile Web Builder Icon Categories

Print Builder

The print builder allows the user to create physical cards and label projects.

Makr Web Print Builder
Makr Mobile Web Print Builder
Makr Web Builder Patterns
Makr Mobile Web Builder Patterns
Makr Web Builder Text Editing
Makr Mobile Web Builder Text Editing
Makr Web Builder Swap Icon
Makr Mobile Web Builder Swap Icon