Project Two: Building a Framework for Infographics

After wrapping up the redesign of the NewsMag child site, I knew I needed a break from coding. Especially considering the amount of freelance I’m doing in addition to both part-time jobs.

My next project was to help create infographics similar to the ones that my former co-worker, Michelle Pais, created and rework them for the web. The main goal was to make sure that the presentation of the infographic created a framework so that future multimedia elements could easily be implemented across the site.

Challenges:

I knew that I wanted the infographics to give the illusion that they were interactive. The answer would not be a .swf file because it had to be something that was viewable on most mobile devices and compliant with responsive design.

Separating content from presentation:
Most importantly, it had to be easily editable. This is something that not many designers/developers seem to keep in mind when creating infographics for the web. They’ll make a gorgeous infographic that after a year isn’t meaningful. Nothing is worse than designing a gigantor infographic, and then one tiny detail changes and you have to open the Illustrator file up to even edit it, before reuploading it to the site.

Also, I consistently had to ask myself “Does this help the user understand the information or could it be better stated in a paragraph?” If the answer was the latter, then I knew I had to rework the design.


Above is the most recent version on the redesign site. I’ll post the link and finalized version once it’s complete.

Solutions:

In order to streamline the process of adding multimedia components to the site, Charlie created a framework called “elements” to present video, images, etc… using jQuery Cycle. At its most basic core, it’s a slideshow, just reworked to give the illusion of a presentation viewer similar to something you would build in Flash.

After finalizing sketches of the design of the infographic, I began to lay it out in Illustrator. I calculated the numbers and scaled all of the artwork by percentages, so that essentially the design could To make them easily editable, the design was broken into chunks and then placed on separate Illustrator artboards in one file. It’s a lot easier to export one Illustrator artboard than one huge image. The artwork was designed with minimal text so that additional information was added as a caption in WordPress. Once again, this was to keep everything easy-to-update.

After testing the theory of this, we realized that if the viewer revealed a glimpse of the next slide, then it would give the illusion that the viewer is moving through the infographic. This detail helps differentiate it from a static slideshow.

Looking back at some of my sketches, it’s obvious that the design changed quite a bit from the original plan, but for the best.

Now we have a framework to easily add more multimedia components throughout the site.

— Em

Advertisements

Diving into PHP


For the Mizzou College of Engineering, I was presented with the opportunity to redesign and combine the News + Magazine archives child site, based on the existing WordPress framework Charlie uses for the rest of the site.

Challenges:
I can’t believe I did it. This project was my first time diving into learning PHP. At times it was horribly frustrating and codex.wordpress.org quickly became one of the top visited sites in my browser. Luckily, I had a great framework to reference and mentor to bug which helped me implement my mockups.

The goal of this redesign was to combine the News and Magazine posts into one archive page. Since Mizzou Engineer Magazine is published twice a year, I knew making the page look alive would be challenging.

Another major constraint was accommodating for the lack of visuals per issue. Not every story yields to gorgeous, hi-res images, but I figured that one per issue was a reasonable expectation.

Because of the technical language that coincides with this type of writing, the articles often have lengthy headlines. While wireframing this project, I had to keep this in mind.

As always, I knew making the site easy for the authors and editors to use was key in ensuring site longevity.

Solutions:
This project definitely taught me the value of working quickly and moving forward. If I was stumped on something, I learned the importance of switching tasks, coming back to it later with fresh perspective and giving it another shot. If it still wasn’t working, it was time to consult my resources.

In order for this page to not appear static, I decided the last four issues would be enough to entice the reader without looking dated. Including the magazine covers would solve two problems: it would help add visuals to the site while also providing the user with another way to find a story.

Since news articles are published more frequently than the magazine, the bottom portion of the site pulls in sticky news posts, which give the viewer the illusion that the site is updated more often than not.

To make the new features of the NewsMag archive page easy to use, I created custom post types and meta boxes. This would allow the author/editor to simply input information on the post page and upload the magazine covers into the media editor at the click of a button.

See the live site at www.engineering.missouri.edu/magazine-archives

Pixel Perfect Design.

Last Friday, I spent 2.5 hours staring at this:

Riveting, I know.

Why? Because in web design, pixel perfect (or nearly pixel perfect) design matters.

After implementing a navi for the NewsMag posts, I decided to make little arrows to help the user know to navigate from “Previous” to “Next.” I’d create 4 arrows– two white ones for previous and next and two gold ones for the hover effect. I’d splice the image so that I could create one PSD file. Should be simple, right? Of course making the arrows was easy. But getting them to line up perfectly with the 14pt “Previous” text next to it is easier said than done. Especially when you consider hover, padding and margins.

To make the arrows I used Photoshop, not Illustrator. This is because Photoshop handles pixels better than Illustrator. As always, Charlie showed me the importance of using a grid. Even though the arrows were the same height as the 14pt “Previous/Next” they looked smaller next to them on screen. Charlie taught me that for this it was important to rely on intuition and to make the arrows look optically perfect.

This is an extra step that a lot of designers would opt out of because clients would never notice. But it’s this attention to detail, obsessiveness for perfection and craftsmanship, that makes the difference between mediocre and great design.

Although it was definitely frustrating at first, I began to oddly enjoy the process. And at some point…It finally clicked. These details may seem meticulous– in fact, most people will never notice– but knowing everything was created with incredible preciseness is assurance that the designer cares and didn’t just slop it together.

And that level of high standards is something that I’ve found often gets left behind on the web.

– Em

Realish World: Day Two

After graduating this past weekend, I’ve faced the “what are you doing with your life?” question enough to drive me insane. Now, I can direct people to this blog to better explain what my plans are for the future.

Learning + Volume of work + Reflection:

I’ve decided that the best route for acquiring skills to become an interactive designer is to spend a few months intensively working at my part-time job at Mizzou Engineering. My awesome boss, Charlie, is allowing me to work on specific projects to help me fine tune these skills. I’m extremely excited at this opportunity, as it seems the work schedule is more like an apprenticeship. One of the requirements he has implemented is to record my thoughts as I go through this process. So, here goes.

First Reflection:

After sketching up some mock-ups of the first web design project I’m doing, I realized some of my inadequacies and some strengths.

Inadequacies:

I found it hard to sketch freely and quickly. I moved at a slower pace than I would have liked, but hope to get faster. At first, I definitely wasn’t confident in my designs and found them to look sloppy. I constantly questioned whether or not something was “convention in design” or if it was bad design. I need to work harder on selling the design, but I’m sure that will come with confidence. I also found that it was surprisingly helpful to let my mind wander as it naturally does instead of fighting to stay focused.

Strengths:

My enthusiasm for the project forced me to keep mocking up designs when I felt I was stuck. I also believe I do well when bouncing ideas around with other people.

Other lessons:

– thinking through some of the mechanics while creating wireframes  (how to implement it)

– importance of sketching a ton of mockups; a lot of designs won’t work

– setting a personal deadline to keep me accountable and on track

 

 

 

 

NYLON iPhone App: 3/5 Stars

Excellent job designing the iPhone app, NYLON and Mozine. It’s easy to navigate and consistent. The headlines are web/mobile friendly instead of being overly clever. It loads pretty quickly for containing a large amount of content. I also really enjoy the fact that I receive “free year digital subscription,” that anyone can have without registering. 🙂

There are definitely a number of development bugs, though. A few links will take me to blank pages and I have to exit the app completely to get back to the home screen. That’s something that not a lot of users are willing to put up with. It also requires an internet connection, so that’s kind of a bummer, but not really a big deal.

The articles are an appropriate length for reading on a mobile device and the design is simple. They make it easy to share content via social media. I like that the design is definitely consistent with the other platforms of NYLON. The designer/developer was careful to give enough room for links (as we all seem to have fat fingers, haha).

I especially like the photos page. NYLON handles pictures in portrait mode better than any other iPhone app I’ve ever seen, especially considering it’s a magazine. They could improve it, though, by adding a caption that appears when you tap the navigation.

I’d also like to see the photos center themselves (or another similar solution) when in landscape mode to get rid of the awkward white space on the side. They also need to fix the top navi, since it’s not accessible in landscape or when I go from landscape to portrait.

It’d be nice to be able to comment on an article, also.

Right now I give the NYLON iPhone app overall 3 out of 5 stars. The good thing is that the app serves a purpose since the NYLONmag website isn’t mobile friendly at all. Working out the kinks/bugs in the app would definitely bring it up to a 5.

 

– EPS

NYLON Magazine: November design critique

November Overall Design Rating: 4.8 / 5

The America issue, Rachel Bilson cover

Alright, officially my favorite issue. It just seemed like everything was planned to a tee. I loved all of the “hand drawn” elements throughout the issue. The content was original and didn’t seem repetitive of the past two issues I’ve read (which tends to happen with other magazines).

What worked:

Illustrations in this issue were awesome.

Seriously. I can’t say enough good things about them! You can tell a lot of thought was put into each illustration and that the artist went the extra step to put the finishing details on it. I especially enjoyed the ‘Merica bald eagle wearing the sunglasses.

      

– The overall layout of the must have (“mass appeal”) sections really improved from the last issue; they’re so much easier to read and don’t overwhelm me. The “face value” page was really well designed- especially liked the illustration of Dr. Brandt!

Page 72 “Shop America”

The photo clippings were a great choice to help style the page. It shows the extra effort of the designer to not just slap photo and copy on the page and call it done.

Page 78 – 79 “Free Style”

Love the illustrations throughout this spread. Adding just a touch of color helps keep the reader interested without overwhelming them. Also, the choice to make each illustration size different helps balance the design.

Page 85 “Keep Sake”

What a cool craft! Seriously can’t wait to make this. At first I was going to comment that the photos weren’t large enough for the reader to see step-by-step, but I revoked that thought after realizing they were perfectly fine.

Page 96 “Greatest Hits”

Thank you, NYLON, for finally understanding that when showcasing watches readers want three things: designer, price and an up-close view of the face. No one else seems to understand this simple request. Simple, but great job designing this article.  Also, a sidenote, the model’s facial expression made me laugh every time I turned the page.

Page 107 – 111 “Beauty Blender”

Love that I can compare the looks all at once (page 107) or look at the up-close photo (makes it easier to see the details and imitate it).

Radar section (115-129)

Radar had it together this issue. Every page entertained me and I loved the “Bands Across America” feature. Separating bands by location was a great idea. Engaging content and well-executed design. My only complaint is that after reading that I spent 3 hours downloading music. Thanks for providing the excuse to procrastinate, NYLON.

What didn’t:

 Page 80-81 “Apple of my eye”

Each page individually looks awesome, but as a spread…eek. The vibrant colors on the right completely clash with the musk, fall design on the left. Neither page is an advertisement so maybe there was miscommunication or a tight deadline?

America issue: wait, why?

I love America just as much as the next gal, but why denote November 2011 as the America issue? Why not July  or November 2012 (when there’s a presidential election)? Hmm, still thinking this one over.

Also, it should be noted that I enjoyed the Bare Minimum and Rachel Bilson articles. Just sayin’.

– Emily Paige

NYLON Magazine: Comparing the design of Sept, Oct issues

I apologize for this review coming in later than I had hoped. Unfortunately it took 9 weeks to receive my subscription of NYLON in the mail from when I placed the order (arghhh).

When reading NYLON, it appears there are a few style choices that readers can always count on: faux highlighted headlines, a handful of typefaces and great, original content. The design remains fairly consistent in typeface choices from issue to issue. I believe they use Berthold Akzidenz Grotesk for headlines and Akkurat for the typewritten.

Below is a comparison of the two covers. As you can see the covers are almost identical in their colors, layout and type sizes.

Even throughout the magazine headlines are always lowercase. Sprinkled on a few pages is hand drawn type. I love this- it makes the magazine seem so much more personal. The department and section have clever, cutesy names. This works well in print but you’d never be able to do this on the web. Same for the headlines. Various articles, such as “drink of the month,” include sketched illustrations. This works well and contrasts the gritty images used throughout the magazine. Every issue seems very raw without being brash.

The TOC is the same in both issues which is the standard for most magazines. The layouts of recurring pages is pretty consistent in both magazines. One thing I noticed is NYLON’s ability to section off content without using borders or boxes. The magazine uses headlines and decks to frame each article. This is easier said than done and I think they’re doing a great job. Of course, they do reserve artsy borders for a few pages, but not many.

September Overall Design Rating: 4.2/5

What worked:
Wow, this is a gigantic issue. The feature of Christina Ricci was well done. The post-production treatment of the photos in addition to the typeface choices gave it an awesome “vintage feel.” I love how they handled the page numbers for this feature. Little decisions like that really help to bring the spread to another level. The fashionista department did an excellent job laying out their spreads as well.

What didn’t work:
Although the fashionista department overall did a great job (especially News) the design of “Ticket to Ride” article bothered me. It was too messy and difficult for the reader to enjoy. The writing was fabulous, but the position of the headline in the lower right threw me off. I know NYLON has done this before and it has worked well. However this story, which was describes a model who’s also an equestrian, didn’t. Too harsh and unorganized.

October Overall Design Rating 4.5/5

What worked:
Loved, loved, loved this issue! Great work! Although considerably smaller in content than September, the October issue did a fabulous job experimenting with layout/typography without confusing their readers. The “Culture Club” section is much more organized in this issue, giving it a cleaner feel. Normally, I don’t like typefaces that look like someone smeared paint, but the staff chose a happy medium in the “Just a Girl” article. Definitely creates an “edgy, yet playful” feel. Also really enjoyed the “Black Magic” illustration on page 116-17. What a clever idea instead of just using photographs!

What didn’t work:
The “Hey, baby” makeup article was a little too cluttered for my taste. My eye was overwhelmed and didn’t know where to look first. By eliminating two of these “must-haves,” the reader would be able to focus on the individual product (like the Night Shade article). Also, a nit-picky suggestion: the article “Sweet Talk” in the supercute! (which is supercute that you call it that) section looks like “Sweet Tall” at first. Fixing the headline so it stands out more prominently would be ideal.

Keep up the great work, NYLON designers. I’m excited to receive my November issue!

Emily Stewart