For this assignment, I want you to produce a mockup of an online magazine site. This exercise will have five pages and will be completely responsive, adapting to screen size and device.
The magazine focus is up to you. Make it realistic. If you like bicycles, make it a cycling magazine. If you like soccer or food, make it about that. If you like travel, consider making a travel magazine—this one might be an easier one to get great images for.
You must do all the design and coding of the site. Do not download template files.
The text of the magazine can be written by you, or you can adapt text from wikipedia. No lorem ipsum. No text taken from sources that are not explicitly open source. If using wikipedia text, remove its default formatting, links and footnotes. One way to remove the links quickly is to paste as plain text.
For images, you can use your own photographs, or images that you have acquired from copyright-free sources. These days, there are a great many places you can find open course images: here’s a few sites.
Requirements
The site will have five pages.
Make a consistent header and footer on all pages, so that the user feels that all pages belong to the same site.
Each page must have a search field in the header or footer. It does not need to work, just to be responsive and accessible.
CSS files will be in a css folder. JavaScript files will be in a js folder.
Index Page
The index.html page represents the home page of this magazine website. The header of the site will have a logo and/or the site name in an H1. If the site name is hidden, it must be hidden accessibly.
You will have “teaser” descriptions of articles on this page, possibly or likely accompanied by an image and other possible details such as writer or category.
You can invent this content.
Look at a range of magazine-style sites and observe what sorts of content typically appears on the front page.
Article Page
Name this file story.html and save it on the top level of the site. The article page must have at least five paragraphs of REAL text (no lorem ipsum), at least two headings, and two images.
Visit magazine-style websites and see what kinds of features typically found on pages like this:
- pullquotes,
- galleries,
- images with captions,
- author profiles,
- category or tag links,
- related story teasers,
- popular story teasers,
- recent story teasers,
- “most shared” stories teasers,
- a comments section or a link to a comments section,
- advertisements,
- social sharing links,
- etc.
404 page
Name the page 404.html and save it on the top level of the site. Research good 404 pages to get some ideas of what you should include on that page.
Start your research with this article: A UX Guide for Error Pages
Contact Page
Name the page contact.html and save it at the top level of the site.
This page must obviously use a form.
If you are an Emily Carr student, the form does not have to actually work (ie process the form data), but it must be otherwise usable, accessible, and responsive.
Sources Page
Name the file sources.html and save it in the top level of the site.
This page will list the source of every image on the site, and the source of all the text. Include links for each resource not produced by you, in other words.
You might, for example, have the images shown on the page gallery-style, each coded so that when clicked on, it takes the user to the exact URL the image came from. Be sure to make this page as responsive and as elegant as the rest of the site.
General Requirements
At least one menu. All links can be null links (#), but they must have text that is realistic for the type of magazine you are prototyping.
In other words, you do not need to link between the various pages in the project. You wouldn’t put a link to a 404 page in your menu, for example.
Icon fonts for at least one menu. The links can be testing (#) links: no need to make fake social media accounts.
A single CSS file. Do NOT make separate stylesheets for each page.
Make the site beautiful, accessible, elegant, and responsive.
Be sure to test your work at small sizes: use the Chrome Inspector device toolbar button.
The page MUST work well on any modern browser at any size.
Before handing the assignment in, please review this additional checklist.
MARKING RUBRIC
Validated & Semantic Markup: 2
Responsive Effectiveness: 4
Typography / Readability: 4
Index Page Design: 2
Article Page Design: 2
404 Page Design: 2
Contact Page Design: 2
Image Treatments / Design: 2