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

NOTE: session panels are greyed out and will be active on the day.
For the complete timetable of all sessions, check maweb.design.

  1. Oct 12th 2022 week 5

    Presentations of our completing students, links to slides and final project websites will be published soon :)

  2. Oct 19th 2022 week 6

    Typography for the web

    type annnoations on the word typography
  3. Oct 26th 2022 week 7

    Colour

    word: colour in many colours
  4. Nov 2nd 2022 week 8

    Images for the web

    illustration of balloon over landscape
  5. Nov 9th 2022 week 9

    Layout design

    Fibnacci spiral over grid columns
  6. Dec 7th 2022 week 13

    Adaptive design planning

    cogs and 3 devices showing adapted layouts
  7. Jan 18th 2023 week 19

    Vector Graphics

    illustration showin pen and arrow tool with bezier curves
  8. Feb 1st 2023 week 21

    Icon design

    early sun/light icon with ISOTYPE icon
  9. Feb 8th 2023 week 22

    Interface design

    illustration with disability icons, devices and people icons over UK map
  10. Feb 15th 2023 week 23

    Design for UX & accessibility

    illustration people icons over UK map and 3 devices, showing cycle with words: accessibility and user experience

WARNING: it will be my aim to give you plenty of project work! :)
I firmly believe that you will only learn by doing. I will set you a few mini projects, 'tiny tasks' as I call them, to work on. They'll be for practice and fun. And then there are the 2 main projects of this module which are assessed. This page will receive its updates in due course - for now, here's your first project.

The tiny tasks will hopefully be fun and serve you well in learning new skills, too. You will end up with a strong portfolio of work ~ ready to take on the web :)

Tiny tasks

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

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

Main projects [✶ assessed]

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 propoals 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 a film—released before 2000, ie older than 22 years—and create promotional web campaign to announce the opening of the first showing at a local venue.

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.

option

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 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 propoals 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. The design will be assessed on its unique approach of layout, colour, use of images and typesetting and on how well it promotes your chosen film. The technical aspects considered will be semantic and valid code, the included font stack and optimisation of visual assets. This project represents 50% of your total course mark.

DEADLINE: 31/03/2023