FeLion Magazine: Re–Designed
A look at why a Re-design can make you a better designer
As I go through the learning process of becoming a better designer, I wanted to take a second look at something that I had designed a few years ago for a digital publication class. Mind you, my original publication was created with a touch of humor and I was uncertain that it would look all that professional to re-design something that was a bit more of a joke than anything useful. However, I figured, somewhere out there, some cat lovers would appreciate this content, and I have a lot I can learn from it in the process.
First Step
Step one was to go through my old publication and get some feedback from other designers and peers. I actually had a lot of positive feedback on my original design, but I did receive some great feedback on things that I had overlooked in the design process.
Some of the things that were mentioned by other designers were: Inconsistent typography, use of icon placement, size and lack of affordance with the icon. As I watched others interact with my publication, I found other things that I knew I would like to change as well.
With a little hesitation about re-designing fashionable cats, I knew I was headed in the right direction by taking a closer look at my old designs and getting that feedback.
Before (Original Publication):
The Design Process:
MY PLAN:
- Think about who my target audience is and create a look and feel that fits that stereotype.
- Find a font family with an elegant, High fashion feel.
- Create consistency throughout my publication with use of Hierarchy in Headers, sub–headers and body text.
- Study the proper use of way–finding Icons and use them throughout, consistently.
TARGET AUDIENCE/LOOK AND FEEL: Fe–Lion Magazine was intended to be a joke, however, if it were serious, I had to think about what the goal was for the type of audience that would be viewing this magazine. Using Personas, I was able to find my number one target audience, which would be Gloria, a middle aged, wealthy single woman who adored her cat more than life itself. Her main interests are High Fashion and of course, Cats.
With Gloria in mind, For inspiration, I started looking at high fashion magazines like Vogue and Red Book, etc. I then looked at images of stereotypical cat ladies that loved to bling up their cats. I was able to create a color palette that fit both categories for cats and fashion. I used Black, white, and very light pinks and purple.
FONT FAMILY AND HIERARCHY: When finding a font family that would fit the look and feel I was going for, I discovered that Vogue uses the Font-Family similar to Didot. I started plugging Didot Regular, Italic and Bold throughout my publication.
Below is the formula I used as a guideline for all my text throughout the publication.
– Extra Large Headline: Didot Regular 72 pt.
– H1: Didot Regular (Small Caps) 36 Pt
– H2: Didot Italic 24 Pt.
– P1 : Didot Regular Drop Cap 16 Pt.
– P2: Didot Regular 14 Pt.
– Quote Block: Didot Italic 16 Pt.
ICONS: I didn’t change a lot as far as placement of the icons, however, I re-sized them to be 1/3 less their original size. During user testing, in places when the navigation was uncertain, I used progressive disclosure so that the icons would come into view at the appropriate times. Having too many icons on the page at the same time, I found, was confusing and often users would miss scrolling to view additional content.
I also studied the proper affordance of the direction of an arrow icon; the visual cue to see content below the fold. I originally used my icon arrows pointing down, as to indicate there was additional content below. What I found was icons should tell the user the direction the finger should drag. With that in mind, I changed all direction of my icons to help the viewer navigate as a gesture movement in the direction the arrow pointed. If the arrow pointed left, the user should drag the page to the left, etc.
One last change to the icons was to reduce the size to help it feel like it belonged. My first design, you can see that the icons were obnoxiously large. I reduced the size to make sure they could be seen, but that they weren’t the main focus of the design.
The 2 examples above show aspects of the re-design. On the left article, you can see that the text is squished to the top of the page. The new design has much more padding to give it some much needed breathing room.
Next you can see how the Didot Font–Family was used to create a much more elegant feel. The colors used also feel more fashionable and feminine in the new design. Whereas, the old design had more of a GQ type of feel with the colors and text style.
Last, in the right example above, you can see how the weight and size of the icons feel like they belong there. They aren’t competing with the design, but they serve the purpose of helping the reader know what they need to do. Also, by separating the text on the right of the image and placing the scroll arrows within the paragraph, that helped separate those icons from the arrow icon at the bottom of the page, which is indicating more content is below. The left image above, the icons are in–line with each other and because the scroll down icon was larger, many people scrolled down before they knew there was additional text in the scroll box.
After: See the Full Publication Re-Design:
What I learned:
Taking a second look at old designs is a great way to see where you are at in your design process. Critiquing your own work helps you to know if you are stuck in the same old design habits or if you have made improvements. By taking a closer look at something old, that at the time you thought was great work, really helps you to see if you can pick out things that you would now do differently.
As a UX designer, the design process will always be in the best interest of the user, not just how pretty something looks visually. Trying to re-create a design to meet a target audience and using user-testing on how to best navigate through the experience really helped me in re-thinking how to design a High Fashion Cat Magazine for Gloria and all her wealthy Cat-Loving friends.
