Applied Art for the Web

Introduction

Course code : DESI1182
Course co-ordinator : David Watson
Course tutor : Prisca Schmarsow
Course weighting : 40 credits
Course details : eyelearn

In order to deliver a good user experience ~ any web site needs to meet a number of criteria, be visually engaging, work flawlessy and intuitively and remain accessible to the widest audience possible. While the technical aspects will need careful consideration and be executed well ~ the design itself also needs to deliver. Only when all components come together to form the end product will it succeed.

This course’s focus is on the design aspect of this process. Information design, graphic design, interaction design, branding, typography, photography and incorporation of other media (such as audio and video) all play a part in the creation of the website’s design and production. You will study aspects of good design and analyse and apply the concepts involved to your own projects. It’s all about learning to look, to really see and recognise good design. Critical analysis of your own as well as others’ work will improve your design skills.

Aims

The course develops a framework for critical and analytical thinking and working practice. It aims to introduce and evaluate the search for balance between the aesthetic aspects and the functional considerations of online projects. Discussing core principles of graphic design and considering how they apply to the web – the course will focus on principal topics such as composition, colour theory, typography and grids systems, developing creative thinking and problem solving skills.

You will be encouraged you to research and study good online design and apply your findings and conclusions to your own work. You will explore creative solutions to design problems and begin your collection of references and sources of inspiration.

Learning Outcomes

On completing this course, students will:

  • be able to work effectively with imagery for use within websites
  • have a good understanding of composition and presentation techniques for visual information on the web
  • be able to work with image-editing software to create and optimise visual assets for online use
  • be able to apply graphic design principles to web projects
  • understand the history of typography and how to apply contemporary typographic principles to websites
  • develop an approach and language for the critical appraisal of websites
  • be aware of the principles of grid systems and be able to work with grids for page layout and content presentation
  • be able to apply the principles of good interface design to website design
  • have a good understanding of colour theory and be able to implement appropriate colour schemes for visually engaging as well as accessible design solutions for the web
  • understand the principles of information design and how they relate to websites
  • have a good understanding of the concepts of branding and brand building
  • understand the implications and considerations for embedding audio and video to webpages and be able to find creative solutions in their presentation

Indicative Content

Each session focuses on a specific, relevant area of the applied arts and provides an understanding of the general principles and how these may be applied to the web. At each stage, a critical appraisal of appropriateness, quality of implementation and aesthetics is made. Topics covered in the course include Typography, Animation, Photography, Interaction Design and various aspects of Graphic Design.

The face-to-face sessions are designed to expose students to a range of creative graphic design topics and to give critical feedback on project work.

Course Schedule

The course schedule gives an overview of the timetable, weekly topics and submission dates for this course. There may be occasional changes, so check back frequently.

Full-time & part-time, second year students

2013-14 Session
DateRoomTitle
9th Oct 2013 (am & pm)T101 (Lab B)Photoshop, core skills
16th Oct 2013 (am & pm)T101 (Lab B)Photoshop for the Web
23rd Oct 2013 (am & pm)T101 (Lab B)Web Thesis Project
30th Oct 2013 (am & pm)T301Typography for the Web #1
6th Nov 2013 (am & pm)T101 (Lab B)Layout design (grids)
13th Nov 2013 (am & pm)T101 (Lab B)Web Thesis Project
20th Nov 2013 (am & pm)T101 (Lab B)Illustrator core skills
27th Nov 2013 (am & pm)T101 (Lab B)Adaptive design planning
4th Dec 2013 (am & pm)T101 (Lab B)Typography for the Web #2
11th Dec 2013 (am & pm)T101 (Lab B)Web Thesis Project
18th Dec 2013 Self Study
Winter Vacation (2 weeks)
8th Jan 2014 Self Study
15th Jan 2014 (am & pm)T101 (Lab B)Icon design
22nd Jan 2014 (am & pm)T101 (Lab B)Branding design
29th Jan 2014 (am & pm)T101 (Lab B)Web Thesis Project
5th Feb 2014 (am & pm)T101 (Lab B)Web Thesis Project
12th Feb 2014 (am & pm)T101 (Lab B)Interface design
19th Feb 2014 (am & pm)T101 (Lab B)Colour
26th Feb 2014 (am & pm)T101 (Lab B)Web Thesis Project
5th Mar 2014 (am & pm)T101 (Lab B)Web Thesis Project
12th Mar 2014 (am & pm)T101 (Lab B)Principles of graphic design #1
19th Mar 2014 (am & pm)T101 (Lab B)Principles of graphic design #2
26th Mar 2014 (am & pm)T101 (Lab B)Web Thesis Project
2nd Apr 2014 (am & pm)T101 (Lab B)Web design for UX and accessibility
9th Apr 2014 Self Study
16th Apr 2014 Self Study

All face-to-face sessions are 3 hours long and take place on Wednesday mornings (am); beginning at 10.00am or afternoons (pm); beginning at 2.00pm in Lab B unless otherwise indicated.

See the programme teaching schedule for an overview of all courses.

Course Documents

There are currently 9 files in this section

File Listing
  Filename Size (KB) Date Modified
A Critique of your competitors.pdf 39.9 28th Mar 2013
Flash tutorials.pdf 8,354.9 28th Mar 2013
Graphic Design Fundamentals.pdf 6,772.1 28th Mar 2013
Photographic composition.pdf 3,836.5 28th Mar 2013
Photoshop Creating Buttons (sample chapter).pdf 4,117.5 28th Mar 2013
Web Typography 1.pdf 920.9 28th Mar 2013
Web Typography 1.ppsx 1,585.9 28th Mar 2013
Web Typography 2.pdf 830.2 28th Mar 2013
Web Typography 2.ppsx 1,590.8 28th Mar 2013

Key Texts

There are now many good books available that cover the topics within this course but the ones below are those that we think work best.

Essential Text Books

  • Designing with Web Standards (3rd Ed.) by Jeffrey Zeldman ¦ details
  • The Zen of CSS design: visual enlightenment for the web by Dave Shea and Molly Holzschlag ¦ details
  • The Elements of Typographic Style by Robert Bringhurst ¦ details
  • A Practical Guide to Designing for the Web by Mark Boulton ¦ details
  • Adaptive Web Design by Aaron Gustafson ¦ details
  • Ordering disorder: grid principles for web design by Khoi Vinh ¦ details
  • Design Basics Index by Jim Krause ¦ details
  • Design Elements: A Graphic Style Manual by Timothy Samara ¦ details
  • Basics Photography: Composition by David Präkel ¦ details
  • Distinctive Design by Alexander Dawson ¦ details

Further Reading

  • The Icon Handbook by ¦ details
  • Information is Beautiful by David McCandless ¦ details
  • MTIV: process, inspiration and practice for the new media designer by Hillman Curtis ¦ details
  • Hardboiled Web Design by Andy Clarke ¦ details
  • Sexy Web Design by Elliot Jay Stocks ¦ details

Essential Text Books

Designing with Web Standards (3rd Ed.) by Jeffrey Zeldman

Designing with Web Standards (3rd Ed.)

This is a very important book. In Designing with Web Standards, Jeffrey Zeldman describes the way websites were coded in the twentieth century, clearly explains why this is now wrong and demonstrates how twenty-first century websites should be coded. The common perception is that designing websites to web standards is onerous for the designer and transparent to the user - naturally, many designers choose to ignore web standards. Zeldman demonstrates that working with standards, creating semantically correct XHTML in conjunction with structural CSS is, in fact, liberating rather than oppressive.

Some may fear that this book will give them a hard time and that Zeldman (standards guru) will push web standards for the sake of web standards. Nothing could be further from the truth. Zeldman is himself a website designer and as such, he delivers a very pragmatic approach to coding. The examples in the book are mainly based upon XHTML 1.0 Transitional (not Strict). Zeldman even covers the use of tables for page structure, heresy to most hard-line standards coders. The truth is that Zeldman is the best sort of evangelist. One who tells you it's OK not to go by the book if that seems impractical and you won't burn in hell as a consequence.

The book is also very instructive in the way it describes the development of web browsers and helps the reader to make sense of the many peculiarities that some browsers exhibit.

This may all sound rather dull but Zeldman has a very personable approach to technical writing. He is aware of the arcane nature of much of his subject matter and does a very good job of making it accessible and occasionally humorous.

This book has changed the way many web designers think and design. Whether you are a web design beginner or a seasoned professional, this book must be read; it will help you form opinions on web coding and will certainly help you to create better sites.

Designing with Web Standards (3rd Ed.) is available at Amazon.co.uk

Preview Designing with Web Standards (3rd Ed.) at Google Books

Avery Hill Library copies: 10 ~ view catalogue entry

The Zen of CSS design: visual enlightenment for the web by Dave Shea and Molly Holzschlag

The Zen of CSS design: visual enlightenment for the web

No review has been written for this book.

The Zen of CSS design: visual enlightenment for the web is available at Amazon.co.uk

Preview The Zen of CSS design: visual enlightenment for the web at Google Books

Avery Hill Library copies: 6 ~ view catalogue entry

The Elements of Typographic Style by Robert Bringhurst

The Elements of Typographic Style

No review has been written for this book.

The Elements of Typographic Style is available at Amazon.co.uk

Avery Hill Library copies: 1 ~ view catalogue entry

A Practical Guide to Designing for the Web by Mark Boulton

A Practical Guide to Designing for the Web

No review has been written for this book.

See more information about A Practical Guide to Designing for the Web

A Practical Guide to Designing for the Web is available at Amazon.co.uk

Avery Hill Library copies: 6 ~ view catalogue entry

Adaptive Web Design by Aaron Gustafson

Adaptive Web Design

No review has been written for this book.

See more information about Adaptive Web Design

This title is not currently available from the Avery Hill Library.

Ordering disorder: grid principles for web design by Khoi Vinh

Ordering disorder: grid principles for web design

No review has been written for this book.

Ordering disorder: grid principles for web design is available at Amazon.co.uk

Avery Hill Library copies: 8 ~ view catalogue entry

Design Basics Index by Jim Krause

Design Basics Index

This book is the perfect graphic design primer for those who have never previously had to think about where and how objects should be placed on a page. The book is designed as a quick reference but can easily be read through from start to finish (recommended). It covers all of the basic components of graphic design such as colour, image, typography, and the grid but it also takes a detailed look at various concepts such as hierarchy, flow, grouping and proportion.

This is a comprehensive but compact and accessible book. It is written in a clear and informal style and along the way there are numerous exercises for the reader that help to create a better understanding of the topics being discussed. Needless to say, the book itself is beautifully designed. All design students should read this book.

Design Basics Index is available at Amazon.co.uk

Preview Design Basics Index at Google Books

Avery Hill Library copies: 9 ~ view catalogue entry

Design Elements: A Graphic Style Manual by Timothy Samara

Design Elements: A Graphic Style Manual

Timothy Samara's book is a primer that illustrates and discusses all the basic principles of graphic design in a direct and easily digestible format. The book consists of 5 chapters; “Form and Space”, “Color Fundamentals”, “Choosing and Using Type”, “The World of Image” and “Putting it All Together”. Each one is lavishly illustrated with excellent examples that clearly illustrate the topic under consideration. Although the book is not specifically targeted at web designers, it covers the universal principles of graphic design that are as applicable to web design as they are to traditional analogue media design.

In addition to the 5 chapters, the reader will learn the author's “Twenty Rules for Making Good Design”, a very good checklist of what to do and what to avoid. Although a book of this nature cannot contain everything that may be relevant, this book comes close and is the best one-volume introduction to graphic design I have seen.

Design Elements: A Graphic Style Manual is available at Amazon.co.uk

Preview Design Elements: A Graphic Style Manual at Google Books

Avery Hill Library copies: 12 ~ view catalogue entry

Basics Photography: Composition by David Präkel

Basics Photography: Composition

No review has been written for this book.

Basics Photography: Composition is available at Amazon.co.uk

Avery Hill Library copies: 8 ~ view catalogue entry

Distinctive Design by Alexander Dawson

Distinctive Design

No review has been written for this book.

Distinctive Design is available at Amazon.co.uk

Preview Distinctive Design at Google Books

Avery Hill Library copies: 5 ~ view catalogue entry

Further Reading

The Icon Handbook by

The Icon Handbook

No review has been written for this book.

See more information about The Icon Handbook

This title is not currently available from the Avery Hill Library.

Information is Beautiful by David McCandless

Information is Beautiful

No review has been written for this book.

See more information about Information is Beautiful

Information is Beautiful is available at Amazon.co.uk

Avery Hill Library copies: 4 ~ view catalogue entry

MTIV: process, inspiration and practice for the new media designer by Hillman Curtis

MTIV: process, inspiration and practice for the new media designer

No review has been written for this book.

MTIV: process, inspiration and practice for the new media designer is available at Amazon.co.uk

Avery Hill Library copies: 9 ~ view catalogue entry

Hardboiled Web Design by Andy Clarke

Hardboiled Web Design

No review has been written for this book.

See more information about Hardboiled Web Design

Hardboiled Web Design is available at Amazon.co.uk

Avery Hill Library copies: 6 ~ view catalogue entry

Sexy Web Design by Elliot Jay Stocks

Sexy Web Design

No review has been written for this book.

See more information about Sexy Web Design

Sexy Web Design is available at Amazon.co.uk

Avery Hill Library copies: 8 ~ view catalogue entry

Copyright David Watson 2005–2014
XHTML, CSS