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 are not mandatory but 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 :)
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?
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, going side-by-side with the topics of our sessions and planning in time for feedback. This will hopefully make an easy start to your first webpage design on this course. Have fun with it :)
CHECK LIST #1
- write/edit/collect the information you’d like to feature on your profile
- work with your given content to plan for effective layout
- sketch out your ideas in your sketchbook, experiment/iterate/refine
produce a digital mockup/wireframe of your design (black/white only)
you might want to try out Whimsical for digital wireframing :)
14/10/2020 group feedback on part #1
CHECK LIST #2
- mark up your text in a fitting structure and begin to experiment with typesetting
- focus on clear hierarchy and put relevant emphasis on each content type
- put together a fitting font-stack with a minimum of 5 fonts
21/10/2020 group feedback on part #2
CHECK LIST #3
- work either in a graphics app, or CSS, to experiment with colour schemes
- produce a digital mockup of your refined final design
- post your ideas to Slack #design channel - or share in Whimsical
- share feedback and comments with each other ;)
- apply your final colour scheme to your profile page
28/10/2020 group feedback on part #3
CHECK LIST #4
- work on any visuals included in your design
- experiment with patterns for background
- produce the final single webpage and submit your complete folder via Slack or email
DEADLINE: 27/11/2020 3 week extension to previous date :-)
After having a look at your wireframes, it seems that a few of you are planning for quite a lot of content, or for more pages than required. Have a look at these examples from previous years - as you can see, all are single pages and everyone is showing as much or as little info as they like ;)
The purpose and design is entirely up to you – think of any call to action which could benefit from visually engaging design and interaction. 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 :)
- single webpage showing one CTA rollover via a single sprite image
- use SVG with PNG fallbacks
- optional: background pattern in keeping with design of rollover
- to be submitted as independent page
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.
Main projects [✶ assessed]
Choosing a suitable piece of literature – focus on presenting the text in a suitable typeface, creating a colour scheme which both aids legibility as well as underpins the context of your chosen piece.
Restriction: use of images is not permitted.
Focus on expressing the text’s story or emotion, and choose colours and typefaces accordingly. The website must be a minimum of three pages and show content related to your chosen text such as background information on the author, context of the writing, interpretations or reviews ~ or additional text related to your selected piece. Use your design to create a balanced presentation of text that is both engaging and unusual, while maintaining good legibility and that defines an appropriate visual balance between the interface and text display. Focus on selecting an appropriate font stack and ensure consistency in presentation for fallback fonts.
The website must consist of a minimum of 3 pages and make use only of typographic settings and colour. No other visual aids are permitted, ie no images to be used within the design of the site at all. Create a design that demonstrates a balanced presentation of your selected text – which is both engaging and unusual, while maintaining good legibility. Define an appropriate visual balance between the interface and text display. Focus on selecting an appropriate font stack and ensure consistency in presentation for fallback fonts.
All planning sketches and drafts to be submitted and all references must include links that are shown on the page. The website must be online and viewable by the deadline as well as submitted via email, alongside the working files.
Your folder should be named in a meaningful manner (and mention your name!), include the HTML file (index.html) and any additional files which are included in your design.
Marks for this project will be awarded in a 60/40 ratio for visual design and technical accomplishment. You will be judged 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 and visual rhythm. This project represents 50% of your total course mark.
Select a film—released before 2005, ie older than 15 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).
If you are not a film buff, you could choose to promote the pilot for a TV series instead. Please do confirm with me beforehand. 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 provide the audience. 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.
The website should consist of at least 3 pages and must contain:
This is your main focus - the promotional feature page - and must include the following details:
- Film title
- Venue, date & time of opening
this is for the showtime information and must include:
- Times the film is showing
- Cinema details, including location
this is for any optional information of your choice, for example:
- The film
- The story
You are required to submit all working files for the final design (as standalone website), including visuals, drafts and plans. It is important for you to explain the rationale behind your design concept and elaborate on your process. The website must be online and viewable by the deadline.
Marks for this project will be awarded in a 60/40 ratio for visual design and technical accomplishment. You will be judged on your creative presentation of the selected film and its promotional effect. Design aspects such as the integration of the menu, as well as your use of visuals in combination with colour and type. This project represents 50% of your total course mark.