I wanted this brand to be a way to explore how to translate layout designs across multiple platforms without losing the strong graphic and typographic qualities of the work. By focusing on breaking some of the ingrained norms of mobile design, I was able to create a layout that is both functional and representative of the brand.

Article by Maya Salam. Can be found here.

I created the print layout for this article first and used it to start building up some visual motifs that I could carry out through the other platforms. I focused primarily on creating a strong contrast between thick and thin. The thin lines on the left part of the page as well as across the picture on the right were a delicate way to frame their respective areas. To contrast this, the type is set in two columns and justified to mimic larger rectangles. This is also reflected in the type choices; a bolder, modern sans-serif is used in the header to contrast the thin sans-serif for the pull quote.

When translating the layout to a mobile platform, I wanted to make sure to carry across the visual motifs I described above. So, this meant pulling in the vertical lines and continuing to build on the primary focus: contrast. With less visual real estate, I had to approach this in a different way, one of which is through my usage of black and white. Switching between black text on a white background to white text on a black background was one of the best ways I visualized this in a way meant to build interst.

Translating content from phone to tablet seems simple in theory, but the change in width creates an interesting question: what is the best way to handle body copy? Using more than one column is difficult due to the intuituve scrolling action of reading on a tablet, which makes a singular column nicer in the context of an article. With just one column, it needs to be paced in a way so that the sentences don’t seem to long and the eye doesn’t have to travel too far across the screen. This is why I introduced a column on white space on the right. This also allows for pictures and quotes to break out of the grid and create visual interest.

// 03

Store Walkthrough

Finally, I created a quick video to showcase how one would use the online store. It’s referenced heavily off of major retail brands, to build on the already intuitive language mobile retail stores have created.