Responsive Digital Typography
You are now required to create a proposal for a digital version of your magazine that works across desktop, tablet and mobile. You will need to consider the viewing area of each medium and you can ensure that viewers get a consistent experience across each screen size.
You must consider how your print-based grid will adapt for each screen to flow the content across and down the screen. How will your headline, subhead and content look on each device? How will ensure your typefaces remain consistent within the constraints of web typography. How will hyperlinks guide readers to associated content?
You must develop a focused rationale for your design thinking through careful evaluation and reasoning for your choice of typefaces and other style cues; typographic hierarchy and the design and use of grids all still apply.
You will also need to consider colour as you will be working with RGB and HEX colour codes rather than CMYK and working pixels rather than millimetres.
Deadline: 9 December 1pm
You must consider how your print-based grid will adapt for each screen to flow the content across and down the screen. How will your headline, subhead and content look on each device? How will ensure your typefaces remain consistent within the constraints of web typography. How will hyperlinks guide readers to associated content?
You must develop a focused rationale for your design thinking through careful evaluation and reasoning for your choice of typefaces and other style cues; typographic hierarchy and the design and use of grids all still apply.
You will also need to consider colour as you will be working with RGB and HEX colour codes rather than CMYK and working pixels rather than millimetres.
Deadline: 9 December 1pm
Technical details
Develop your design through layout visuals by hand then on a screen. You should make a story board to explain how your article is viewed on a tablet, phone or screen and how any clickthroughs and sub-pages may work.
The number of webpages you present will be determined by your design but must amount to a minimum of 8 and demonstrate how the content adapts for each device and is viewed by the reader.
Screen sizes:
Mobile: 360x800px
Tablet: 768x1024px
Laptop: 1366x768px
Desktop: 1920x1080px
The number of webpages you present will be determined by your design but must amount to a minimum of 8 and demonstrate how the content adapts for each device and is viewed by the reader.
Screen sizes:
Mobile: 360x800px
Tablet: 768x1024px
Laptop: 1366x768px
Desktop: 1920x1080px
A bit of extra research on magazine websites:
Vogue
Time
Rolling Stone
Popular Mechanics
Closer look (mock-up)