London-based studio She Was Only has designed a new online magazine that aims to give readers a user experience that feels as close to print as possible.
The website, designed for music magazine Middle 8, features big images and subtle animations within a linear navigation system that imitates real-life page-turning in a smooth and satisfying style.
It's responsive, and works with gestures on iPad, too, enabling readers to swipe back and forth through the pages of the magazine.
We caught up with She Was Only's Cai Griffith to find out how the studio landed the project, and how they went about designing the experience, both for the reader and the content producer.
DA: Tell us a bit about She Was Only
CG: She Was Only is a small design studio based in East London, specialising in Graphic Design & Art Direction. I've been working with my two partners, Chris Vickers and Craig Scott, since graduating and we have been an official studio since we set up the company in October 2012.
We started out pitching ourselves as a traditional print designers, which is still the work we enjoy the most, but now purposefully call ourselves a general 'design studio' as we have enjoyed the variety of work we've done for magazine and book design, web design, apps, packaging and exhibitions.
No matter the format or medium, the work we produce is fuelled by a collective obsession with the practices of modernism. We strive to deliver concise and bespoke responses to client briefs, filtering out distraction to do more with less.
DA: How did you get the gig on Middle 8?
CG: Middle 8 is the sister company of soundhalo, a new live music platform which is a client of Boat Studio, run by Davey and Erin Spens. We collaborate regularly with Boat on web projects.
Erin is the editor of Middle 8 and we jumped at the opportunity to be the guys to put it together. The relationship we already had with Erin played a big role in how the back end of the website was developed. We were able to work with her from early on in the process to make sure that the adding and publishing content was as smooth as possible.
The design of Middle 8 magazine allows readers to click left or right to change page. Each page features a scrollable article, a gallery or a video. DA: What's the ethos behind the online magazine?
CG: We are still big believers in print, because somehow online magazines don't have that certain feel and continuous flow of content you get from printed magazines.
This was what we were trying to achieve with Middle 8, presenting great content on the subject of live music, whilst maintaining an experience as close as possible to the printed magazine.
DA: Tell us about how you've designed the UX and user journey for the site
CG: First, we thought about the journey of the, turning pages right to explore through the content, left to go back etc. It is this linear journey, navigating from page one through to the end, that we tried to maintain and develop in to the online reading experience, whilst keeping it aesthetically pleasing and easy to navigate.
We didn't want the site to feel too 'gimmicky', with unnecessary page turn animations etc., just simple left/right navigation and clean transitions.
This was also carried through to the iPad, allowing users to ditch tedious tapping and enjoy the magazine with easy swipes and gestures to navigate.
The goal was to not over crowd the site with fiddly menus and unneeded elements, but to really let the content speak for itself and allow users to put as little thought as possible in to exploring the stories.
DA: There are some really nice touches to the design, such as the word count and reading time. What was the thinking behind these?
CG: These little flourishes are mainly down to our developer Jonny Thaw, who we gave some freedom to explore the site after we had nailed the general build and layout of the magazine. He tested the site and added any extra touches that he thought might be helpful.
This process of testing and meant that Jonny could really get his head into the site from a users point of view, removing any unnecessary hang-overs from the build and adding in little tricks that would dramatically reduce loading times.
The reading time is a neat little feature that uses the average adult word-per-minute reading speed to calculate a time based on the article's content. We've had some great feedback to say that this small feature was a welcome addition to people reading on iPad on the tube, for example.
DA: How do you design a CMS that allows editors to create stories like these? How do you give them the freedom to design without letting them break away from the overall design of the site?
CG: Magazines are all about the content. So giving the editors the freedom to layout the articles themselves was an essential feature, although breaking the design was a worry.
She Was Only designed the website's CMS to give editors the freedom to lay out articles without breaking the design.We have put certain limitations in to place to try and minimise this as much as possible, including 'safe zones' and minimum/maximum text sizes.
We wanted to make the overall experience of putting together an article like starting with a blank canvas, then getting a suite of tools that can be used to construct an article based on the content of the story.
I suppose instead of providing templates for the users to populate, we are giving them the freedom to create their own, enabling the editors to lay out and build an article whilst viewing it as if it were live.
This way of building the content also forces each user to actively consider the visual side of the website and how the content will look to the consumer, in real time as the article is put together.
DA: What are you working on next?
CG: We are currently working on the launch of Intern Magazine, issue one of which will be available in the coming months, along with a couple of branding projects for start-ups and an existing architectural/interior design company. We're also working on an exciting project for UAL. Check the site soon!
And of course, we're working on the next issue of Middle8, which has some great stories lined up and a few new features that we will be launching to make the reading experience even better.
No comments:
Post a Comment