For this brief we were asked to create a digital version of the magazine in which we had previously created. To start with I had done plenty of research into existing digital magazines and microsites, looking at the function, rationale and reasoning behind why and how they make their decisions. We must a minimum of 8 pages and demonstrate how the content would be accessed and viewed by the reader.
I had started with some thumbnails to help decide how I wanted to layout the site, making sure to stick to the established roots that I had created in the print magazine, but just making sure I'm adapting it to the digital medium.
I had started with some thumbnails to help decide how I wanted to layout the site, making sure to stick to the established roots that I had created in the print magazine, but just making sure I'm adapting it to the digital medium.
|
|
I had decided that I wanted to make mine as a microsite as I felt this would fit better with my article and its audience in giving It a more established and professional look to it, so I started off by creating some rough pages on InDesign before moving onto Adobe XD to add in the movement, pages and show the storyboard.
Then I had done some still shots of what the design would look like when the user clicked or hovered over the selected image.
|
|
Left - Text scrolls down, Image set in place. Right - Full page scrolls revealing the full piece of artwork.
|
|
Here I felt that Helvetica and Editorial New didn't feel like the right typeface choice for the title, so I changed it to Bodoni and this felt like it fit in.
|
|
|
|
I wanted to create multiple versions of each design in different dimensions, one for a laptop, one for a phone and one for a tablet, to see how the different dimensions and capabilities of the devices can cope with the site. So below I had taken this design but adapted it for a phone.
If the site was accessed on a phone that would allow a new way for the user to experience the site, touch. This allows me to have more elements that can be touched, scrolled and dragged.
For this design on the Phone below, I wanted to bring some practicality into it, 90% of the world population are Right Handed, so I pushed the text to sit on the left in the grid system which gave me this white space along the right hand side in which the user would be able to scroll down without their thumb obstructing the article, and in an accessibility tab this would be able to be changed to the left side for left handed users if they wished.
If the site was accessed on a phone that would allow a new way for the user to experience the site, touch. This allows me to have more elements that can be touched, scrolled and dragged.
For this design on the Phone below, I wanted to bring some practicality into it, 90% of the world population are Right Handed, so I pushed the text to sit on the left in the grid system which gave me this white space along the right hand side in which the user would be able to scroll down without their thumb obstructing the article, and in an accessibility tab this would be able to be changed to the left side for left handed users if they wished.
|
|
|
|
|
|
|
|
|
Left - I thought about having a dual scroll feature on the phone version, allowing the user to scroll one side of the screen to allow them to navigate different information on either side.
|
I thought this image would be a good front for a video talking and exploring the hidden works that my article is based on, so when the user loads up the MicroSite it would start the video giving an into to what the article is about, then allowing the user to watch it, or scroll past it and stop the video.
Once I had got a few ideas for the digital design of the publication I moved onto Adobe XD to create the movement of it.
Below is the Phone version.
Below is the Phone version.
https://xd.adobe.com/view/cec54074-adbd-4fc2-8d7b-73845ae84089-9b96/?fullscreen
Below is the Laptop version.
Below is the Laptop version.
https://xd.adobe.com/view/18f4ba50-8cca-44bb-8fd4-8bf653e10e13-4da7/?fullscreen
Below I had done some more variations of layout for the laptop version, trying out different layouts and typefaces.
|
|
|
|
Following on from this I had added the page down so It could scroll and added another image and caption.
|
|
I had then worked on including some video which I have embedded to both versions of the design. I wanted the video to be played when clicked for the mobile version, but to also grey out the background when clicked on an enlarge icon.
Following this I wanted to play around with some Parallax's, as this would enrich the users experience and give them a Unique way of looking at the information which is exclusive to the digital version.
This was very simple in design but once I got more comfortable using it and figuring out what I can do with it I made a more complex site with it.
The whole point of a Parallax is to have states of the site move and interact when the website is scrolled down.
The whole point of a Parallax is to have states of the site move and interact when the website is scrolled down.
Below are 2 videos showing what the sites look like when being used.
Following a feedback session It was suggested that I have a sort of landing page to my site for the magazine in which the user could then select the feature article which would then take them to the article I have created.
I wanted to have a gallery of images of different artists work, for the user to then click on the one they wanted.
I wanted to have a gallery of images of different artists work, for the user to then click on the one they wanted.
|
|
Following some feedback it was suggested that I add some colour into some of the pages which relied heavily on just black and white.
|
|
I had then played with some hover states for the contents to allow a better UX. I had done this for multiple images to show how they all act together.
|
|
https://xd.adobe.com/view/eb3752ad-2f55-451c-b2d3-a481c88e98c4-be64/?fullscreen&hints=off