Brief
Following on from our previous magazine project, create a proposal for a digital version on our magazine that works across desktop, tablet and mobile. Ensure that the viewers get a consistent experience across each screen size. Final designs should be made using Figma.
Deadline - 9th December, 1pm
- consistent typeface
- typographic hierarchy
- hyperlinks
- style cues
- colour - RGB and HEX
- pixels not millimetres
- may include found content
Deadline - 9th December, 1pm
|
1920x1080px
|
1366x768px
|
768x1024px
|
360x800px
|
|
Desktop
|
Tablet
|
Mobile
|
Visual Research
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To start, I designed the text element for the background I wanted in InDesign as it is easier to change the type exactly how I wanted. I could also use the masthead from my magazine.
|
|
|
|
I adjusted the pattern I made for different devices with different colour backgrounds.
|
|
Figma
|
|
|
Before starting this project I had begun another project designing a website for a brand called 'Cyano', this meant I had some experience with Figma and could design a product website. This helped beginning this design process as I had most of the assets as well as from the previous project for this module.
|
|
|
|
|
For my website I used the same assets and ideas from my magazine and layered the people above text and out of the boxes they are in. I believe this makes my website more interesting and the separation between them makes it more clear there are separate articles to read.
|
|
|
|
|
|
|
|
|
For the article page I knew I wanted the main image of the magazine to be at the top of the page. I used all of the article and pulled out quotes to separate the text. I also used the same images in the magazine and will have an option to go to another page at the bottom of the page.
|
|
|
|
Before our final hand in date, and some feedback, I added a blur background to the white text on the article images to help with legibility. I also changed smaller things like the weight of the social icons across the different platforms.
Final Website
|
|
|
|
|
|
|
|