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 ;)
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.