Inverse Paradox has reached another milestone. Our largest site to date has recently launched. After a quick four months, Inked Magazines brand new website is up and running! This project is a big accomplishment for everyone in our office.
When Quadra Media came to us with this project we knew it would be something awesome and everyone at IP was excited to start working on it. Starting off, we had some major questions to answer, like how do we make a site with this much content responsive, how do we display information from 3 different publications in one site, and how do we make the site work practically?
To begin answering these questions, Melissa, our creative director, started by looking at what Inked Magazine’s website originally looked like (see comparison below).
When you first look at the old site you can see a main image slide, but no information telling you what that image is about. Next you have some “of the day” categories, which again contain no information. On the right hand sidebar you see all of the subscription information, which is important information and placed well but it could use some cleaning up. Then below you see some content from the magazine which has a minimal amount information. The overall organization of the information is rather confusing and seems like there are mainly just images all over the page. After looking over the old site as well as some inspiration sites, and lots of wireframing of basically every page, we had a clear idea of how to answer our biggest questions.
How Do We Make a Site with This Much Content Responsive?
With responsive design being fairly new, there were a lot of different opinions within our office of what the best practices would be to approach starting this project. After breaking down the magazine into “sections,” we were able to solidify multiple page designs and then rearrange them to fit for tablet and mobile devices. For example, we designed a page for the blog, and the videos and article page contained similar information so they followed suit. This happened with multiple pages which gave the look and feel of the site some further consistency. Compressing all of this information down to fit on a mobile device was a bit tricky, but with gestures (like sliding) we were able to make it all work.
How Do We Display Information from Three Different Publications in One Website?
Displaying this amount of information and making sure it doesn’t just look cluttered was a bit of a challenge, but we made some basic design decisions that allowed for a good design and a functional website. Having a rotating main image was a way we knew we could feature an article from each publication. The rotating image is laid out in a way that you are able to see an image from that particular article, what publication it came from, and a one line description of what the article is about. Another way we differentiated the publications was to use a color coding system. Inked Magazine is blue, Inked Girls is pink, and Freshly Inked is yellow. This system is used consistently throughout the website and is a quick way you can tell exactly which publication what you are viewing came from.
How Do We Make the Site Work Practically?
Anyone who has ever looked at any Inked publication or their old website knows that imagery is powerful. It was important for us to keep the photography strong on the site but also to give reasons for it being there. The most practical way we could think to break down the information was to categorize it into sections. Each section had its own boxed-in area which helped the site keep from looking cluttered. These sections contained images (for all three publications) as well as accompanying text for each image.
After taking all this information into consideration (plus a lot more!), we moved forward with the design process and came out with a complete custom designed WordPress website for Inked Magazine. During the development process, the site was brought to life and is now one of our biggest accomplishments to date.