Projects 2015/16

WARNING: it will be my aim to give you plenty of project work! :)
I firmly believe that you will only learn by doing.
While only 2 of the projects will be assessed – I would recommend that you aim to work on as many of the projects as you can. You will end up with a strong portfolio of work ~ ready to take on the web :)

 

Drupal Camp London

client brief: design a new logo, brand and website for the Drupal Camp London 2017

full brief

Drupal Camp London is run by a small group of volunteers who organise the conference, create the website, brochure and promotional material in their spare time. In previous years, the design for a logo and the site was done shortly before the event, usually put together with little time.

For next year’s event, the team are hoping for a head start.

client

The organisers of the event, our main contact: Gary Pigott
↓ download brief

deadline

open / flexible
(before end of teaching)

teams

This project is pro bono and we’re working in teams. All work to be done in collaboration. Each will work on all elements of the brief, we will share our progress (via our #drupal-camp-project channel in slack, via comments or in class) and exchange feedback.

TEAM #

  • Hannnah
  • Pete
  • Smita
  • Inder
TEAM ##

  • Theresa
  • Aisha
  • Claudia
  • Sasha
TEAM ###

  • Lung
  • Alana
  • Lauren
  • Karima

book promotion

Design and produce a single webpage as promotion for the sale of a web related book of your choice.

full brief

Choosing any web design or development related book, work with graphic design principles to create an informative and effective single page design. Focus on layout and clarity of information and keep in mind that your brief is to promote the sale of the book.

✔ check list

  1. choose your book and brainstorm possible design approaches
  2. plan your design, via sketches and mockups
  3. implement your design as a single webpage
  4. submit your final project folder as ZIP (including your development work) via email with subject title: “book promo – [your name]”)

deadline

16/12/2015

 

RWD pen

Reproduce the given layout, using the files provided. Time for a practise run for adaptive design.

full brief

This is an execise of code and detail, one of the typical interview/application tasks to test your skills. Given the mockups of a page design, including different layouts according to screen size – produce the CSS to present the content accordingly, working your way up from the smallest to the largest layout.

↓ download source files (includes mockups)

✔ check list

  1. complete the CSS to reflect all layouts given
  2. submit your final project folder as ZIP via email with subject title: “RWD pen – [your name]”)

deadline

2/12/2015

new typesetting for Seed Conference

Using the HTML only (you’re free to edit markup for better code if you wish) – write a new CSS to present and style the text of the page for the Seed Conference.

full brief

You are restricted to one typeface alone – giving you the challenge to create a beautifully typeset page, just like the original webpage.
Happy coding ;)

✔ check list

  1. copy the original HTML source code into a new file
  2. study / edit markup to suit
  3. work on typesetting the full content with a new typeface of your choice
  4. experiment with grid layout, add #grid tool to the page
  5. upload your final page and share the link (via Slack/Twitter/site comments)
  6. submit the project folder for inclusion in the gallery :)

deadline

18/11/2015

introduce yourself

Create a single page design for an online profile for yourself, to introduce yourself to the web :)

full brief

The aim of this project is to create a professional profile page for yourself, a single page design. Selecting any information you find suitable, create a design which will present your chosen information in a clear and meaningful manner.

✔ check list

  1. select/create/collect suitable profile information
  2. create a single webpage to introduce yourself
  3. upload your profile page and share the link (via Slack/Twitter/site comments)
  4. submit the project folder for inclusion in the gallery :)

deadline

4/11/2015

Typesetting literature

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.

full brief

 project brief

This project focuses on typography and colour. Choose any text by any author. It could be a passage from your favourite novel, a poem or a song lyric. Think carefully when choosing the text, as no images are allowed in this project and so the text should allow for detailed styling and typesetting.

The creative use of the numerous CSS rules available will enable you to present your chosen text with expression and meaning. You must use only text and colour for your design. 
Absolutely no images are allowed.

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.

deliverables

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.

submission requirements

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.

assessment

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.

deadline

20/1/2016

film promotion

Select a film which was released before 2006, ie older than 10 years, and create promotional web campaign to announce the opening of the first showing at a local venue.

full brief

project brief

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

OPTION: 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.

deliverables

The website must contain:

  • Opening page
    this is for the film itself and must include:

    • Film title
    • Director
    • Producers
    • Actors
    • Date and time of opening
  • Info page
    this is for the showtime information and must include:

    • Times the film is showing
    • Cinema details, including location
  • Supplementary page
    this is for any optional information of your choice, for example:

    • The film
    • The story
    • Reviews
    • Recognition
    • Genre

submission requirements

You are required to submit all working files for the final design, 
including visuals, drafts and plans.
The website must be online and viewable by the deadline.

assessment

Marks for this project will be awarded in a 60/40 ratio for visual design and technical accomplishment. Your work will be examined for appropriate implementation of colour, type and aesthetic design as well as implementation.

Your mark will depend on the success of the visual impact of the final design, taking into particular consideration the concept, visual balance and expression and interpretation of the subject matter.

This essay represents 50% of your total course mark.

deadline

6/4/2016