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
| Date | Room | Title |
|---|---|---|
| 28th Sep 2011 | Lab C | Webpage Design |
| 5th Oct 2011 | T301 | Final Presentation for completing students |
| 12th Oct 2011 | Lab C | Introduction and brief issued |
| 19th Oct 2011 | Lab C | Photoshop, core skills |
| 26th Oct 2011 | Lab C | Photoshop for the Web |
| 2nd Nov 2011 | Lab C | Research and critical analysis 1 |
| 9th Nov 2011 | Lab C | Research and critical analysis 2 |
| 16th Nov 2011 | Lab C | Personal brief and research proposals. |
| 23rd Nov 2011 | Lab C | Photographic composition |
| 30th Nov 2011 | Lab C | Graphic Design, core principles 1 |
| 7th Dec 2011 | Lab C | Graphic Design, core principles 2 * |
| 14th Dec 2011 | Lab C | Website Criticism |
| Christmas Break (3 weeks) | ||
| 11th Jan 2012 | D105 | Web Design Event |
| 18th Jan 2012 | Lab C | Crit 1 on draft design (Business) |
| 25th Jan 2012 | Lab C | Typography - history and theory ** |
| 1st Feb 2012 | Typography for the web | |
| 8th Feb 2012 | Lab C | Grid systems for web design |
| 15th Feb 2011 | Lab C | Crit 2 on draft design (Commodity) |
| 22nd Feb 2012 | Lab B (am) Lab A (pm) | Working with web fonts |
| 29th Feb 2012 | Lab C (am) Lab A (pm) | Interface Design |
| 7th Mar 2012 | Lab C (am) Lab A (pm) | Crit 3 on draft design (Firmness) |
| 14th Mar 2012 | Lab B (am) Lab A (pm) | Colour theory for the web |
| 21st Mar 2012 | Lab B (am) Lab A (pm) | Information design |
| 28th Mar 2012 | Lab C (am) Lab A (pm) | Crit 4 on draft design (Delight) |
| Easter Break (3 weeks) | ||
| 25th Apr 2012 | Lab C (am) Lab A (pm) | Branding |
| 2th May 2012 | Lab C (am) Lab A (pm) | Multimedia for the web |
| 9th May 2012 | Lab C | Crit on final design and implementation |
All sessions will take place 10am to 1pm for Group A and 2pm to 5pm for Group B unless otherwise indicated.
Attendance is not required for "Online" events.
* Introduction to Website Criticism seminar and essay.
** Website Criticism essay submission 25th January 2012 as a blog post.
See the programme teaching schedule for an overview of all courses.
Course Documents
There are currently 9 files in this section
| Filename | Size (KB) | Date Modified | |
|---|---|---|---|
 |
A Critique of your competitors.pdf | 39.9 | 2nd Mar 2011 |
|
Flash tutorials.pdf | 8,354.9 | 2nd Mar 2011 |
|
Graphic Design Fundamentals.pdf | 6,772.1 | 2nd Mar 2011 |
|
Photographic composition.pdf | 3,836.5 | 2nd Mar 2011 |
|
Photoshop Creating Buttons (sample chapter).pdf | 4,117.5 | 2nd Mar 2011 |
|
Web Typography 1.pdf | 920.9 | 16th Feb 2012 |
 |
Web Typography 1.ppsx | 1,585.9 | 16th Feb 2012 |
|
Web Typography 2.pdf | 830.2 | 16th Feb 2012 |
|
Web Typography 2.ppsx | 1,590.8 | 16th Feb 2012 |
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 ¦ details
- The Zen of CSS design: visual enlightenment for the web by ¦ details
- The Elements of Typographic Style by ¦ details
- A Practical Guide to Designing for the Web by ¦ details
- Adaptive Web Design by ¦ details
- Ordering disorder: grid principles for web design by ¦ details
- Design Basics Index by ¦ details
- Design Elements: A Graphic Style Manual by ¦ details
- Basics Photography: Composition by ¦ details
- Distinctive Design by ¦ details
Further Reading
- The Icon Handbook by ¦ details
- Information is Beautiful by ¦ details
- MTIV: process, inspiration and practice for the new media designer by ¦ details
- Hardboiled Web Design by ¦ details
- Sexy Web Design by ¦ details
Essential Text Books
Designing with Web Standards (3rd Ed.) by Jeffrey Zeldman
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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