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.

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.

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