Supermaker

Prototyping, visual design, and front-end development for a new editorial platform built for makers and entrepreneurs of maker companies. Tight project turnaround and small team didnt take away from the clients willingness to explore and experiement visually bold patterns and colors and technically, with React and styled-components.

Live website

Early experiments

We scoured print magazines and other editorials for inspiration and ideas. Mixing and matching elements, the first concepts for look-and-feel were presented.

Style tiles

Style tiles

Style tiles

Style tiles

Style tiles

Prototyping

One of the ways we were able to experiement was through UX interactions; I designed and prototyped several different visual styles and user interactions in Figma (top). Eventually, we mapped out the website (bottom) to help present our vision to the client before proceeding, we then built those experiments out using libraries such as React, Craft CMS, and styled-components.

Screenshot

Screenshot

Design system

To start the project, our team worked with a brand designer which delivered basic branding elements: colors, patterns, and logo variations. Based around that we created colorways and typography options that would make each section of the website highly customizable by content editors, adhering to the visual language we helped build.

Colors graphic

Typography graphic

Typography graphic

Bold heroes

Being the standout component of both the homepage and on every article post, we knew we had to get the hero layout just right. To do this, we created dozens of variations in layout, typeface, and color, and eventually narrowed it down to four or five standouts.

Hero image

Hero image

Hero image

Hero image

Topics and collections

Collections articles grouped by particular type help create an experience so that the user can discover content and help develop a stronger connection from regular readers of the website.

Collection

Collection

The homepage

With so many options for content, layout, color, image placement, and typography, it was super important to build every component so that they could be assembled (even in ways unknown to us) in a way that was highly flexible.

Homepage designs

Homepage designs

Discovery

I designed, prototyped, and helped build the components that would help the user drill down into the content they are most interested in.

In addition, as this is an interactive community, we were tasked with building the ability for the client to appeal to their readership in creative, direct ways.

Discovery graphic

Discovery graphic

Discovery graphic

Art-directed articles

Similar to many other components mentioned above, each article layout was able to be fully customized. To help keep the writing as the central focus, it was decided the article body's text and background would remain black on white.

Article layout

Article layout

Next project:

Changelog

© Eric Rowan
Oakland, Calif.
About
Email