Visual design, prototyping, and front-end development for a startup editorial platform built for makers and entrepreneurs of maker companies. Tight project turnaround and small team didn’t take away from the client’s willingness to explore and experiement visually — bold patterns and colors — and technically, with React and styled-components.
We scoured print magazines and other editorials for inspiration and ideas. Mixing and matching elements, the first concepts for look-and-feel were presented.
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.
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.
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.
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.
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.
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.
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.