Savage

Savage was a concept project aimed at creating an online responsive platform for a magazine , newspaper, or blog. The project consisted of choosing a user persona to target, establishing a brand, and going through the visual design process
to create the UI for the online platform.

Client
Savage
Date
09.01.2019
Based In
US

Role

UI Designer
Scroll Down

The Challenge

The challenge for this project was to understand the user persona given to us too successfully create a brand that would resonate with the user. Once the brand direction was decided the next challenge would be to undergo the visual design process to bring the platform to life.

User Persona

For our user persona we have Paula, she is a laid back creative with a passion for art. She is a curious and extroverted young woman who is pursuing being an artist. She loves to read old books, enjoys online blogs, and likes going to art galleries in her free time. Her ultimate motivation is to get into art school for college, begin exhibiting her work publicly, and connect with the artist community. She feels like she sometimes struggles to find creative inspiration and so frequently turns to the internet and online blogs & magazines for inspiration. Recently she has been trying to find a few go to sources where she can go to for creative inspiration and knowledge.

Visual Design Process

Brand Attributes

I wanted to create a brand that would appeal to our user persona. I wanted SAVAGE to be her go to resource for artistic inspiration and creative knowledge. Savage has four main brand attributes artsy, empowering, weird, and going against the grain. Savage encourages everyone to explore their inner artist, empowers our readers with knowledge and creativity, is not afraid to be weird and go off the rails, and most importantly isn't shy about going against the grain and asking powerful questions. These qualities are the heart and soul of Savage.

Brand Voice

After the attributes had been decided I then wanted to dive into the brand voice. How would Savage communicate with its users across its digital platforms? Savage has a modern tone, a inclusive philosophy about people and animals,  minimalist in nature, and values experimental attitudes towards art, life, and work. Everything in our messaging and website should have these seeds planted in its foundation.

Visual Competitive Analysis

Once the soul searching for the brands attributes & voice had been done it was now time to explore the competitors. Man Repellant, Vice, and Rolling Stone were the three competitors that Savage would be competing with. To better understand the competitor brands I did a visual competitive analysis. I dived into the three competitors and took a visual inventory of how they each captured their own look & feel and resonated with our user persona. I then created a styles cape using photoshop to have the visual directions of each brand on paper. The idea was by capturing them visually on paper I could figure out how to innovate upon them and decide the visual design direction for SAVAGE that would entice and appeal to our user persona.

Mood Board

Finally, the mood board for SAVAGE was born. The mood board acts as a lighthouse for the design direction we would take once we starting sketching, concepting, and designing the digital platform. The mood board reflects the qualities of the brand attributes and voice. It's clean, modern, experimental, and feels like something you'd see in a modern art museum. The colors are bright and play off white nicely while the typefaces provide subtle contrast and give it a modern look & feel.

Concept Sketching

I began sketching concepts for what Savage would become. I had been really inspired by newspaper articles, vintage art magazines, and  artist pieces I had seen at art basel and wanted to incorporate that inspiration into the digital magazine. I wanted the layout of SAVAGE itself to feel like a art piece. I wanted each article to be a unique visual experiment yet still be readable to users. I tested the designs and explained the concepts to five users all of which were really appreciative and excited about the idea.

Style Guide

I then began creating my style guide. In terms of colors I wanted to contrast strong bright colors with lots of white space. I chose red, yellow, and Black. I settled on the type faces Futura and Montserrat. Montserrat gave me a really clean feel while Futura allowed me to be experimental, bold, and in your face. The two typefaces also contrasted well and provided me with a lot of options to play with. For imagery I knew I wanted really vibrant, bright, and beautiful pictures to call attention to the articles. I also began to build out some of the components I knew I would be needing with their various overrides. Things like buttons, states, and navigation elements would help me to design efficiently.

High Fidelity

Using the brand attributes, brand voice, and mood board were essential into figuring out how SAVAGE could innovate and separate itself from its competitors to attract our user persona. Its important Paula thinks of us as her go to source for her creative inspiration and knowledge. I was able to create a clean, interesting, and experimental design by incorporating elements like bold typography, lots of white space, beautiful imagery, funky print inspired layouts, and incorporating our brand voice to create something truly unique.