MA Web Design + Content Planning materials for applied art for the web • major project

brief ✶ download deliverables details

Create a single page design for an online profile to introduce yourself to the web :) The aim of this project is to create a personal/professional profile page for yourself as a single page design. Selecting any information you find suitable, create a design which will present your chosen information clearly. The angle or approach is entirely up to you - personable/friendly/fun or polite/formal/professional?

examples from previous years

• Anna
• Yinka
• Crystal
• Peterson
• Nikki
• Umesh
• Shehnaz
• Emma
• Roshini
• Nelly
• Claire
• Noemi
• Caroline
• Rob
• Fabiana
• Anna
• Matteo
• Kirsty
• Kasia
• Vanessa

deliverables

For this project, I'll ask you to submit your project folder which I will upload to this site, it will become the start of this year's gallery, showcasing your work. I will not change your files or file names and use the folder as you send it ~ and link to it by name. This our test run for the project you submit to me :) If anything is wrong, you will spot this and send me an updated version.

Your folder should be named in a meaningful manner, include the HTML file (index.html) and any additional files which are included on your design.

As this is your first project, I'm going to hold your hand a little :) I've planned in specific details to work on, and we'll work in groups to share feedback. This will hopefully make an easy start to your first webpage design on this course. Have fun with it :)

CHECK LIST #1

1. write/edit/collect the information you’d like to feature on your profile
2. work with your given content to plan for effective layout
3. sketch out your ideas in your sketchbook, experiment/iterate/refine
4. produce a digital mockup/wireframe of your design (black/white only)
   you might want to try out Whimsical for digital wireframing :)

26/10/2022 group feedback on part #1

CHECK LIST #2

1. mark up your text in a fitting structure and begin to experiment with typesetting
2. focus on clear hierarchy and put relevant emphasis on each content type
3. put together a fitting font-stack with a minimum of 5 fonts

2/11/2022 group feedback on part #2

CHECK LIST #3

1. work on experimenting with colour schemes
2. post your ideas/progress to your Slack feedback thread - or share in Whimsical
3. share feedback and comments with each other ;)
4. apply your final colour scheme to your profile page

9/11/2022 group feedback on part #3

CHECK LIST #4

1. work on any visuals included in your design / experiment with patterns for background
2. produce the final single webpage
3. prepare a pseudo-PechaKucha presentation as recorded video (saved as MP4)
4. collect all files into a neatly organised project folder for submission

16/11/2022 group feedback on part #4

Submit via Slack or email for addition to our gallery ;)

DEADLINE: 18/11/2022

brief

The purpose and design is entirely up to you – think of any call to action which could benefit from visually engaging design and interaction. This could be ad addition to your profile or course work page, or something that another ongoing project might benefit from? ¯\_(ツ)_/¯

Consider context and layout within surrounding content and design an effective visual. Work on both the hover and the focus states of your link or button. Be creative and have some fun ツ

deliverables

1. single webpage showing one CTA rollover via a single sprite image
2. use SVG with PNG fallbacks
3. optional: background pattern in keeping with design of rollover
4. to be submitted as independent page

examples

As inspiration, here are a few examples of mixed projects from past years - all involving icon design or sprite roll-overs. Some with some motion mixed in ~ all using SVG.

• Sasha
• Duncan
• Kate
• Catia
• Barbara
• Tony
• Kate
• Barbara

DEADLINE: 17/02/2023

brief ✶ download brief

Your task is to produce a small website, comprised of 3 webpages (or more). The design is focused entirely on typesetting and colour (no images or icons allowed). The homepage is to feature the chosen piece of text with at least 2 supplementary pages of content, written by you. Your brief is to create a unique design which will enhance the reading experience, create a clear mood and atmosphere for your selected piece. You will work on selecting a fitting typeface and a refined font stack and create a colour scheme to express your chosen message.

The selection of text is your choice though poems or song lyrcis are not permitted. You are free to choose any written piece you like: part of a chapter of a book, an article or article extract ~ or even text you have read as part of your studies. The choice is yours. The word count is a minimum of 600 words and you could choose to go beyond this if you like.

project stages

The work on this project is split into 3 stages: proposal, approval and the final design/dev work.

1. PROPOSAL to be submitted by 2/11/22
   select your text and write up a summary of your rationale and possible design concept. Create a site plan and rough wireframe for your design (this does not need to be the final design, merely an initial idea for your approach which might change as you continue the project work)
2. APPROVAL
   collect your proposal files into a folder and submit the ZIP for approval (via Slack or email); remember to name the folder (folder name has to include your project title and your name!) and all files within appropriately. I will be in touch via Slack to confirm that your proposal has been approved (or discuss amendments if not).
3. PROJECT WORK + SUBMISSION
   once your proposal is approved, work on the project site — submit the required deliverables by deadline as required

For the design approach, focus on expressing the text’s story or emotion, and choose colours and typefaces accordingly. The website must be a minimum of three pages. The homepage for your featured piece and the two additional pages to present content related to your chosen text (such as background information on the author, context of the writing, interpretations or reviews, your own view ~ or any additional information relating to your selected piece). Use your design to create a balanced presentation of text that is both engaging and unusual. Focus on good legibility and a design that defines an appropriate visual balance between the interface and text display. Make sure to add an appropriate font stack and ensure consistency in presentation for fallback fonts.

project requirements

This brief's focus is on typesetting and does not allow the use of any images.

1. website of 3 pages including site menu; homepage to present the featured text piece (minimum of 600 words); 2 additional pages to present supplementary text (optional: more pages can be added).
2. design with type and colour only, no images permitted!
3. supplementary pages to include original content (i.e. written by you) with references to original sources stated clearly

deliverables

1. project folder with initial proposal, all planning sketches, drafts, mockups—these might be scans/photos of hand drawn visuals or digitally created images—as well as references and font files
2. standalone website folder; the website must be online as part of your coursework and viewable by the deadline as well as submitted separately.

assessment

Marks for this project will be awarded in a 60/40 ratio for visual design and technical accomplishment. You will be graded on your creative presentation of the text and additional information, with a focus on the typographic approach used in your design, along with the suitability of your use of colour. The technical aspects considered will be semantic and valid code and the included font stack. This project represents 50% of your total course mark.

DEADLINE: 09/12/2022

brief

Select an old film—released before 2000, ie older than 23 years—and create promotional web site (minimum 3 pages). The site's purpose is to announce the opening of the first showing of this film at a local, independent venue with the aim to sell tickets.

optional alternative

If you are not a film buff, you could choose to promote the pilot for a TV series instead. Please feel free to discuss your ideas with me beforehand and make sure that your proposal clearly explains your thinking.

project stages

The work on this project is split into 3 stages: proposal, approval and the final design/dev work.

1. PROPOSAL to be submitted by 15/2/22
   select your film and write up a summary of your rationale for your film choice.
2. APPROVAL
   submit your proposal for approval (via Slack or email); I will be in touch via Slack to confirm that your proposal has been approved (or discuss amendments if not).
3. PROJECT WORK + SUBMISSION
   once your proposal is approved, work on the project site — submit the required deliverables by deadline as required

project requirements

This brief's focus is on promotion, on selling tickets for your chosen film in a small local venue (avoid the big cinema chains!). The website consists of a minimum of 3 pages. The homepage to promote the film itself and the additional pages used for venue, time and ticket details as well as additional promotional content (such as reviews, anecdotes or anything else you feel will support the goal of the site).

1. homepage requirements:
   1. Film title + visuals
   2. Director and Producers
   3. Actors
   4. Venue with details of showings
2. Venue requirements:
   1. Venue details (for your chosen small independent cinema)
   2. details of location and showing times
   3. Ticket info (prices and a demo 'buy now' CTA)
3. Supplementary page, content options:
   1. reviews by critics and papers
   2. anecdotal details of the film, its story or origin
   3. your personal view or interpretation

deliverables

1. project folder with initial proposal, all planning sketches, drafts, mockups—these might be scans/photos of hand drawn visuals or digitally created images—as well as references and font files; it is important for you to explain the rationale behind your design concept and elaborate on your process.
2. standalone website folder; the website must be online as part of your coursework and viewable by the deadline as well as submitted separately.

assessment

Marks for this project will be awarded in a 60/40 ratio for visual design and technical accomplishment. You will be graded on the effectiveness of your promotional mini site.

1. the design criteria
   1. eye-catching layout demonstrating an effective visual balance of content and design elements
   2. consistent use of colour for design and correct contrast for legibility of text
   3. engaging use of visual elements such as photos, illustrations and/or icons
   4. suitable typesetting of all text with appropriate focus on the promotional goal
   5. distinct mood to trigger a fitting emotional response
2. the technical criteria
   1. minimal, semantic and valid code
   2. use of annotations in all code: HTML, CSS and JS (if included)
   3. clear definition of an appropriate font stack, declaring at least 4 fallback fonts
   4. optimisation of all visual assets as fitting the final online presentation
   5. mobile first approach to RWD

This project represents 50% of your total course mark.

DEADLINE: 31/03/2023

context

As part of the publicity team for a new release, your job is to promote your chosen film by designing a promotional website, with the optional addition of a poster, to draw people away from their home screens and back into the cinema to enjoy the big screen. Use this project as a way to make a statement – either to bring back memories (for film classics or an older audience) or to generate curiosity (for newer or alternative films).

Take your chosen film and use its story, mood and genre for inspiration. Working on original and unusual approaches to page layout, create a visually engaging design that catches the attention of the audience and expresses the emotion of the film. Focus on the experience the film will offer. Represent this through your choices of colour, typeface and layout, with a particular focus on using visual balance to express emotion. If you choose to design the poster as well, ensure that the print design and the opening page of the promotional website are complementary to each other and to their respective media.

suggestions, films to trigger your thinking :)

• black&white era
  
  • Nosferatu | 1922 | silent film | horror
  • Modern Times | 1936 | silent film | comedy
  • Way Out West | 1937 | comedy
• cult classics
  
  • The Rocky Horror Picture Show | 1975 | horror/comedy/musical
  • The Shining | 1980 | horror
  • The Shawshank Redemption | 1994 | drama
• animations
  
  • The nightmare before christmas| 1993 | animation/fantasy
  • Who Framed Roger Rabbit | 1998 | adventure/animation/comedy
  • Antz | 1998 | adventure/animation/comedy