Brief
Following on from our existing print-based editorial work, we had to create a proposal for a digital version of our stories for a web-based version of the magazine.
Research
To begin I started by researching some examples of interactive, digital magazines to use as inspiration and give me ideas for what additional content I wanted to include such as videos, sound, and other interactive elements. I found a few that I liked on Behance and Youtube and they inspired me by how the little animations for swiping and viewing extra content enhanced the users experience.
Addition Content
Due to this digital magazine having more pages, I needed to look for more content to include to bulk it out. I began by researching online for ideas for more relevant information. I knew I wanted to include a 3D whale image to add content around so I looked for more quick and short facts, maps to add animated elements onto, extra images for slideshows, videos, sounds, as well as general body text.
Videos:
Imagery:
Information:
Initial Flat Plan of Sequence of Pages
After curating some additional content, I began thinking about the order of pages, and tried to get an idea on what was going on each page, as well as where the interactive elements could go.
Thumbnails
I then went ahead and drew some thumbnail sketches for layout ideas for my pages, trying to take into account that some areas would be interactive or have some sort of effect added. I also tried to think about layouts for both portrait and landscape and how the article could look if it was a page you scrolled down to see more of it rather than each being an individual page.
Mood Board
I decided to do a quick mood board of how I wanted the style of the magazine to differ from my previous one. I wanted it to be mainly the same but include more fun, handwritten/hand drawn elements that could be subtly animated and add a bit more visual interest.
Initial Concept
After planning out my ideas, I began to implement them on screen. I took my original spreads and edited some of the fonts and layout to fit the new style and incorporated a bunch of new interactive elements. I included animation, roll-over buttons and made gifs using Procreate to use for animated titles and sub-titles. I also included a clickable slide show of images on the articles splash page and edited a video from online to make it fit in more with my theme.
After receiving feedback on what I had done so far, I began reworking my layouts so it looked more like it was intended to be digital, rather than a printed magazine with interactive elements added to it.
I started with the cover page, removing the featured articles so it was just an image and there name of the magazine, as the articles would be clickable on the contents page anyway so didn't need to be on both pages.
Next I started trying to design the contents page. I initially was struggling with the layout of this page but eventually settled for the hover over tiles with a bigger tile on the left with the featured articles as a clickable slideshow.
I then moved onto the article pages, rearranging the layouts to fit what a digital publication might look like. I also experimented here with landscape and portrait layouts to see how the pages might look depending on which way the reader is viewing the magazine.
I continues further making the pages using the same theme and style, rearranging the layouts till they looked visually appealing. I also decided to design a menu bar at the top to give it a more website style look and to add extra navigation.
Final Design
Below are screenshots of the final pages along with the interactive digital publication. I also included a storyboard with mock ups of the screens to show what it looks like on a iPad device.
