One of the hallmarks of The Business State printed magazine is its use of photography, and for the online version, the client wanted to keep it that way. The homepage is a list of imagery for users to explore. Each image leads the user to an article page once clicked. This simplified approach matched up perfectly with the magazine aesthetic.
The client wanted a unique design layout whilst also being able to create new issues themselves. By simply updated the imagery to templated homepage took on a new look and feel for each issue.
As the user explore the imagery on site, a hover effect displays the article title and a small description.
For mobile, the images would simply stack on top of each other. The page title would also be visible at all times.
The longer article pages called for an editorial feel for ease of readability. In between the paragraph we used images and quote blocks to break up the copy. This technique worked well on desktop and mobile. The focus on photography was maintained with large intro images to engage the readers.
Mobile screens for the article pages, designed below.
The fold out navigation was split into two categories. The user can explore via category or issue.
The site utilises animation and page transitions to maintain the elegant look and feel. We wanted the site to feel as slick as possible. A number of documents and prototypes were created for the development team, below is an example for page transition.
Some initial sketching was done before moving into design concepts.
Initial concepts which were explored below.
A style guide was created for the front-end team.
