applied art for the web

Project briefs

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 :)

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 :)


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.


  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 :)

14/10/2020 group feedback on part #1


  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

21/10/2020 group feedback on part #2


  1. work either in a graphics app, or CSS, to experiment with colour schemes
  2. produce a digital mockup of your refined final design
  3. post your ideas to Slack #design channel - or share in Whimsical
  4. share feedback and comments with each other ;)
  5. apply your final colour scheme to your profile page

28/10/2020 group feedback on part #3


  1. work on any visuals included in your design
  2. experiment with patterns for background
  3. produce the final single webpage and submit your complete folder via Slack or email by the 4th November


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