Web Standards Representation

Introduction and Rationale

Course code : COMP1652
Course co-ordinator : David Watson
Course tutor : Prisca Schmarsow
Course weighting : 15 Credits
Course details : eyelearn

Digital Designers need a good understanding of contemporary web design practice. Web Standards are an important aspect of modern web design and students must learn to adopt a web standards approach to their online designs in order to mark themselves out as "professional" designers. Students need to understand that the visual layer of web design is only superficial and that concepts such as "findability", "user experience", and "accessibility" are equally important to users of websites. In addition, Digital Designers need to know how to present and promote themselves, whether as a freelance practitioner or when applying for jobs in the public and private sectors. This course encourages students to develop a personal and identifiable style or "branding" and to use this to present their work and to promote themselves, both in print and online.

Aims

  • To enable students to develop and implement a personal style or brand.
  • To help students develop a curriculum vitae.
  • To develop a web standards approach to web design.
  • To understand the importance of the non-visual aspects of web design.
  • To equip students with skills to compile presentation materials for self-promotion online.
  • To guide students in acquiring an online presence in the form of a digital portfolio.
  • To encourage independent learning, investigation and experimentation.

Learning Outcomes

Students will be able to:

  • Present design work in a unique style.
  • Write a targeted CV.
  • Know how to design and implement a promotional website using web standards.
  • Be aware of best practices for social media.

Overview

The course is based around 2 projects and weekly coursework that will lead you towards the production of an online portfolio with wich to promote youself and improve your chances of good employment when you graduate.

Course Schedule

The course schedule gives an overview of the timetable, weekly topics and submission dates for this course. See project details and deadlines for more information.

2014-15 Session
DateRoomTitle
23rd September 20141014Welcome and web standards
30th September 20141014CSS for layout and type
7th October 20141014Considering mobile
14th October 20141014Your online image
21st October 20141014Social media and online activities
28th October 20141014Choosing the right platform
4th November 20141014Work selection *
11th November 20141014Portfolio planning
18th November 20141014Optimising for the web
25th November 20141014Promoting your work
2nd December 20141014Workshop
9th December 20141014Ready & go :) *

* Project deadlines

Details

This course is taught at 3 different times every Tuesday through Term 1:
Morning class - 10am to 12.00pm for Group 1
Early afternoon class - 1pm to 3.00pm for Group 2
Late afternoon class - 3.30pm to 5.30pm for Group 3

Please arrive in good time for the start of your class.

All classes take place in 1014 unless otherwise indicated.

Key Texts

Essential Text Books

  • HTML and CSS Web Standards Solutions by Christopher Murphy & Nicklas Persson ¦ details
  • HTML Dog by Patrick Griffiths ¦ details
  • Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton ¦ details
  • The Principles of Beautiful Web Design by Jason Beaird ¦ details
  • The Web Designer's Idea Book: Vol. 2 by Patrick McNeil ¦ details
  • Letterhead & Logo Design 8 by Top Design Studio ¦ details
  • The Best of Business Card Design: No.7 by Loewy:London ¦ details
  • Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler ¦ details
  • Design Basics Index by Jim Krause ¦ details
  • How to Create a Portfolio & Get Hired by Fig Taylor ¦ details
  • Adobe Photoshop CS6 for Photographers by Martin Evening ¦ details
  • Adobe Illustrator CS5 Classroom in a Book by Adobe Creative Team ¦ details

Further Reading

  • Web Standards Solutions (2nd Ed.) by Dan Cederholm ¦ details
  • CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) by Andy Budd ¦ details
  • Handcrafted CSS by Dan Cederholm ¦ details

Inspiration

  • Web Design Index by Content.05 by Günter Beer ¦ details
  • Information is Beautiful by David McCandless ¦ details
  • The Art of Looking Sideways by Alan Fletcher ¦ details

Online Materials

  • Opera Web Standards Curriculum by various authors
    Opera Web Standards CurriculumThe Opera Web Standards Curriculum is a free online training course in web design, written by some of the brightest minds in the industry. Through a series of over 50 articles, you will learn the correct and modern way to design for the web. Compiled by Chris Mills, the aim of the Curriculum is to bring a web standards approach to the teaching of web design at university level. It is, therefore ideally suited to this course. Read it, digest it and get closer to Standardista nirvana!
  • HTML Dog: Tutorials by Patrick Griffiths
    HTML Dog: TutorialsPatrick Griffiths' tutorials are perfect for the absolute beginner to web design. They are simple, short and written in an easy pace. So, if you're a bit afraid of HTML and CSS and can't quite get your head around that weird code stuff, these tutorials are for you. Work through these tutorials and you'll be coding like a pro in no time.
  • A List Apart edited by Jeffrey Zeldman and Eric Meyer
  • The Elements of Typographic Style Applied to the Web by Richard Rutter
  • Designing for the Web by Mark Boulton

Essential Text Books

The books in this section form a core of texts that cover all the topics addressed during the Web Standards Representation course. All of them are available from the library but you should probably aim to own a copy of at least 2 or 3 of them, especially those of you who intend to take web design to the next level.

HTML and CSS Web Standards Solutions by Christopher Murphy & Nicklas Persson

HTML and CSS Web Standards Solutions

This book is specifically aimed at undergraduate students, learning web design from the ground up. The authors, Christopher Murphy and Nicklas Persson (the Web Standardistas), teach web design at the University of Ulster and this book was intended as a "how to" guide in one package for final year degree students and contains everything the web design beginner needs to know about getting a well-structured, standards-compliant website online.

One of the things I like about it most is that it covers the stuff left out of other books. Specifically, web hosting and domain names, in a chapter entitled Getting your site online. Where most books teach the basics of HTML and CSS, leaving it at that, the Standardistas know that what students really want is to see their stuff up there, online.

The book is also realistic. It doesn't try to pack too much in, it's well paced, focussing on the important stuff and making sure the reader is comfortable with this. The book is intended as a first step and encourages readers to continue their journey towards web design expertise by recommending follow-up reading and citing additional topic areas that should be explored in a final chapter entitled Where to from here?

Finally, the authors have not have not been content with simply writing a book. Naturally, there's an accompanying website at www.webstandardistas.com where you will find links to all the content referred to in the book and links to lots of useful stuff.

See more information about HTML and CSS Web Standards Solutions

HTML and CSS Web Standards Solutions is available at Amazon.co.uk

Preview HTML and CSS Web Standards Solutions at Google Books

Greenwich library: 4 copies ~ view catalogue entry

HTML Dog by Patrick Griffiths

HTML Dog

This book is a clear, modern and straightforward approach to current best-practice in web design and is an ideal primer for those who are new to the discipline. It covers all the basics and assumes no prior knowledge. The book is a good mixture of theory and practice with plenty of illustrations. It begins with a good introductory section that gives the reader a general overview of the basic principles, followed by a chapter on HTML and CSS syntax. Subsequent chapters include Text, Links, Images and Layout and the book finishes with a comprehensive appendix which forms a very good reference for XHTML and CSS. This is probably the best beginners' book for those who have never done any web coding before. Those with at least a little experience might consider Craig Grannell's "Essential Guide to CSS and HTML Web Design" as a more substantial introduction to modern web design.

Readers of this book should also visit the accompanying HTML Dog website (in truth, it's the book that accompanies the website) because it is full of excellent tutorials and additional information. In fact, you should use the website even if you don't own the book - it's that good.

See more information about HTML Dog

HTML Dog is available at Amazon.co.uk

Greenwich library: 4 copies ~ view catalogue entry

Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton

Web Style Guide (3rd Ed.)

The Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton is a relatively slim volume but it packs a lot in. The book is concise and clear and covers all the basic considerations of site and page design. In fact, this is the book you should read first if you are considering building a web site. It covers topics such as site hierarchy, page layout, typography and web graphics to name but a few. The book contains lots of example sites and explanatory diagrams, illustrated in full colour. This book is a perfect compliment to coding texts by covering the non-technical areas of web design.

Despite the fact that this book is now a few years old, it is not out-of-date because the authors have been careful not to focus on the technologies used for building websites nor the browsers used for displaying them. Rather, they consider the generic design elements of webpage and website design. These basic design principles hold true, irrespective of the technological context and in this 3rd edition, they bring the book up-to-date by considering the disign of contemporary webpages.

This book is excellent and it's even available free on the web in a HTML version at www.webstyleguide.com.

Web Style Guide (3rd Ed.) is available at Amazon.co.uk

Greenwich library: 16 copies ~ view catalogue entry

The Principles of Beautiful Web Design by Jason Beaird

The Principles of Beautiful Web Design

This book could be subtitled "Graphic Design for Websites" because that's exactly what it is. In 5 chapters, entitled "Layout and Composition", "Color", "Texture", "Typography" and "Imagery", Beaird discusses all the various graphic components and concepts relevant to building websites. This is not a code book but it is a valuable reference for the early stages of web design. Get these principles right and you'll make great looking websites.

Although this book is relatively slim at just 168 pages, it is chock full of useful information. In particular, almost every page has a footnote containing one or more links that take the reader to even more information on the topic in question. "What's the point of a link in a book?" I hear you asking. Well, this book (like all Sitepoint books) is available as a PDF and in the PDF book, all the links are live. Again, as with all Sitepoint books, there is a sample PDF containing a few chapters that you can download for free.

The Principles of Beautiful Web Design is available at Amazon.co.uk

Greenwich library: 9 copies ~ view catalogue entry

The Web Designer's Idea Book: Vol. 2 by Patrick McNeil

The Web Designer's Idea Book: Vol. 2

No review has been written for this book.

See more information about The Web Designer's Idea Book: Vol. 2

The Web Designer's Idea Book: Vol. 2 is available at Amazon.co.uk

Greenwich library: 1 copies ~ view catalogue entry

Letterhead & Logo Design 8

There are dozens of design source books out there but this one is better than most. This, the 8th volume in the series, showcases a wide range of letterheads, business cards and logos in a variety of styles, all selected by Los Angeles based Top Design Studio. Naturally, there's a North American bias to the selected designs but there's just enough European design to give the book some edge.

The book is a great resource and contains lots of useful and interesting ideas for composition, colour choice and typography. Whether you're looking for something classic, modern, playful or just cool, there's an example in this book.

Letterhead & Logo Design 8 is available at Amazon.co.uk

Preview Letterhead & Logo Design 8 at Google Books

Greenwich library: 2 copies ~ view catalogue entry

The Best of Business Card Design: No.7 by Loewy:London

The Best of Business Card Design: No.7

This is an excellent book, full of interesting and innovative takes on the business card. Since the examples are chosen by a London based design firm, the designs have a more European flavour than other volumes in this series. There are a wide variety of business card types illustrated here, using a range of different techniques and styles. There are great examples of die cutting, typography, graphic illustration, photography, mimicry, humour and great use of colour to get you inspired.

The Best of Business Card Design: No.7 is available at Amazon.co.uk

Preview The Best of Business Card Design: No.7 at Google Books

Greenwich library: 2 copies ~ view catalogue entry

Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler

Universal Principles of Design

Universal Principles of Design, subtitled “100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design” is essentially a directory of all those design terms and “buzz phrases” that you know you ought to know the meaning of. The authors have chosen 100 design ideas and concepts and devote a double-page spread to each. Concepts such as Ockhams Razor, Fibonacci Sequence, Iteration and Legibility (the basics that all designers must understand) are beautifully described and illustrated with excellent examples to illustrate each point.

This is a general design reference although website examples are used where appropriate. All students of design should read this book and all designers should at least consider it a check list for their own knowledge and understanding.

Universal Principles of Design is available at Amazon.co.uk

Preview Universal Principles of Design at Google Books

Greenwich library: 5 copies ~ 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

Greenwich library: 9 copies ~ view catalogue entry

How to Create a Portfolio & Get Hired by Fig Taylor

How to Create a Portfolio & Get Hired

No review has been written for this book.

How to Create a Portfolio & Get Hired is available at Amazon.co.uk

Greenwich library: 8 copies ~ view catalogue entry

Adobe Photoshop CS6 for Photographers by Martin Evening

Adobe Photoshop CS6 for Photographers

The title of this book is now rather misleading because it seems to imply that this is a book for photographers only. Admittedly, the original concept for the book was to introduce photographers to the digital world of Photoshop and there is still a great deal for the digital photographer. However, over the years, the book has expanded and matured into what is now probably the best single-volume text book on Adobe Photoshop for both photographers and non-photographers. This book is not just about tweaking images to make them look better (although that is included), it covers a wide range of Photoshop skills. In fact, one of the best chapters in the book, “Layers, Selections and Masking”, takes the reader beyond the confines of traditional photography and into Photomontage. The accompanying DVD includes project images from the book and video tutorials. As a comprehensive introduction to Photoshop, Martin Evening's book is hard to fault but if you prefer a more technique-based book, take a look at the “Essential Skills” book by Mark Galer and Philip Andrews.

Adobe Photoshop CS6 for Photographers is available at Amazon.co.uk

Preview Adobe Photoshop CS6 for Photographers at Google Books

Greenwich library: 3 copies ~ view catalogue entry

Adobe Illustrator CS5 Classroom in a Book by Adobe Creative Team

Adobe Illustrator CS5 Classroom in a Book

No review has been written for this book.

Adobe Illustrator CS5 Classroom in a Book is available at Amazon.co.uk

This title is not currently available from the Greenwich library

Further Reading

The books below all fill in gaps, overlap and expand upon the "Essential Text Books" listed above. You do not need to own them but they may be used as good alternatives or simply to explore a bit more of the subject.

Web Standards Solutions (2nd Ed.) by Dan Cederholm

Web Standards Solutions (2nd Ed.)

OK, so you learned about XHTML and you learned about CSS and you even learned about how they can work together. But what about technique and method? What is the best practice for creating navigation bars? Never fear, Dan Cederholm is here to show you how.

In truth, many of the methods described in this book are now standard practice for the seasoned web designer but for the beginner who has just got to grips with XHTML and CSS, this book is invaluable. The book focuses on best practice coding for the most common page elements such as headings, navigation, forms, page layout, styling text and, of course, image replacement. The book is well written and although it deals with some complicated issues, it does so in an easy and engaging way.

Web Standards Solutions (2nd Ed.) is available at Amazon.co.uk

Preview Web Standards Solutions (2nd Ed.) at Google Books

Greenwich library: 13 copies ~ view catalogue entry

CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) by Andy Budd

CSS Mastery - Advanced Web Standards Solutions (2nd Ed.)

As its title suggests, this book picks up where Dan Cederholm's book (Web Standards Solutions) leaves off. Essentially, Andy Budd gives us more of the same. More methods, more power, and being a more recent publication, more “now”. The book covers many of the same topics as Designing with Web Standards but just takes them to the next level. The two books, though, are not interchangeable. Beginners are strongly advised to work with Dan Cederholm's book first and then move on to this one. There is lots of really nice stuff in this book but if I were pressed to pick one section over the others, it would be the two chapters on Styling Links and Creating Nav Bars. They contain some lovely methods with beautiful results.

CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) is available at Amazon.co.uk

Preview CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) at Google Books

Greenwich library: 4 copies ~ view catalogue entry

Handcrafted CSS by Dan Cederholm

Handcrafted CSS

This is an inspirational book. It's full of useful techniques that produce excellent and beautiful results. Most importantly, it demonstrates how CSS3 can be implemented now by adopting what Dan Cederholm describes as “progressive enrichment”, a philosophy that says it's OK that websites can look different in different browsers - in fact, that they should look different because some browsers are more capable than others and we should allow those browsers to provide a better user experience.

This is a full-colour book so that you can easily see the graphic results of the accompanying code - a really good way to learn. Read this book, cover-to-cover (it's not that long) and start working with CSS3 now. Also, if you can afford a little extra, the DVD edition is excellent too.

Handcrafted CSS is available at Amazon.co.uk

Preview Handcrafted CSS at Google Books

Greenwich library: 3 copies ~ view catalogue entry

Inspiration

These books should all be looked at for design ideas, they are all inspirational.

Web Design Index by Content.05 by Günter Beer

Web Design Index by Content.05

If you need a little inspiration for the design and layout of your website, this is a great place to start. The book is organised by website type, so there are sections such as “Architecture & Interior Design”, “Design & Illustration”, “Food & Drink”, “Internet”, “Photography” etc. The variety of sites is good, ranging from graphic-strong to text based and in all cases, the design is exemplary. Such indexes are often stuffed with Flash-based site designs because they are often the most graphically rich. To its credit, this book also features a high proportion of XHTML/CSS sites that clearly demonstrate how such techniques can be used to create beautiful, sites.

This is the 5th volume of this excellent series and it's worth checking out the previous volumes also available in the library.

Web Design Index by Content.05 is available at Amazon.co.uk

Greenwich library: 3 copies ~ view catalogue entry

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

Greenwich library: 4 copies ~ view catalogue entry

The Art of Looking Sideways by Alan Fletcher

The Art of Looking Sideways

A wonderful book. Every designer should own a copy. This book is a golden treasury of design ideas, anecdotes, interesting facts and fantastic images. This is a book to reach for when you're short on inspiration. A few minutes (or hours - it's difficult to put down) later, you will feel refreshed and ready for any design challenge.

The book is best described by its author: "This book attempts to open windows to glimpse views rather than dissect the pictures on the wall. To look at things from unlikely angles. References to sources are occasionally provided to keep you going. The book has no thesis, is neither a whodunnit nor a how-to-do-it, has no beginning, middle or end. It's a journey without a destination."

The Art of Looking Sideways is available at Amazon.co.uk

Greenwich library: 9 copies ~ view catalogue entry

Copyright David Watson 2005–2017
XHTML, CSS