For this assignment, I want you to produce a mockup of an online magazine site. This exercise will have four pages and will be completely responsive, adapting to screen size and device.
The magazine focus is up to you: any topic at all is fine. 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.
You must do all the design and coding of the site.
The text of the magazine can be written by you, copied from wikipedia, or generated with AI.
No text taken from sources that are not explicitly open source. If using wikipedia text, remove its default formatting, links and footnotes.
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 source images: here’s a few sites.
Requirements
The site will have four pages. They are described in the sections following this one.
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.
Index Page
The index.html page is 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 as 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
A 404 page is the page the site displays when a page does not exist.
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.
Ideas in this regard could include a search field, links to popular content, links to site categories, etc etc.
It will definitely include more than a bit of text saying page not found.
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.
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 will 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