Digital Web Magazine

The web professional's online magazine of choice.

The Principles of Design : Comments

By Joshua David McClurg-Genevese

June 13, 2005

Comments

Harmony

June 13, 2005 11:15 PM

This is great, thank you! I haven’t really touched on this stuff since my years at university and it’s a great refresher. I always try and use these elements in my design anyway, but this has helped me think about them in great depth. Printing out your article and bookmarking it, thank you :)

Mindaugas

June 14, 2005 12:16 AM

Great article! It will never be too much of articles like this :)

Now, regarding typography. Bringhurst in his The Elements of Typographic Style states, that it is pretty ok to use en dash (spaced from both sides) instead of em dash. The use of em dash comes from old times and doesn’t look good visually with modern fonts. I can only agree looking at the text of this article or elsewhere – em dash looks alien.

It is interesting also, what is the next optimal width for content area of the web page. It looks like 760 pixels are becoming too small today. What do you think?

piotr

June 14, 2005 12:49 AM

In the “Related books” list you have to add the bible of Gestalt: “Art and Visual Perception” by Rudolph Arnheim.

Jens Meiert

June 14, 2005 1:44 AM

Bookmarked – you know, there is a queue for seemingly interesting articles ;)

Nonetheless, there’s yet one thing I miss: The Golden Section is very interesting, even (or especially) when it comes to design. I once read some useful assertions of Robert Bringhurst who referred to Golden Section and other popular ratios, which are not only related and important to typography.

Sandy Williams

June 14, 2005 5:07 AM

Excellent article (and well written, too)! Can’t wait to see more. I’m actually a copywriter, and this is one of the most cogent explanation of design principles I’ve encountered. I can use this information to work more effectively with the designers on my team. And I’m also forwarding this to all my web-writing colleagues as well. Thanks so much.

Jeremy Flint

June 14, 2005 5:23 AM

When I went through college, there were no web design classes offered. The closest thing was a multimedia class that taught Director and Maya (what a combination).

So I pursued a degree in Graphic Design (BFA with an emphasis, actually). I find myself today, 5 years later, still pulling from the basic design and color principles I learned as part of my design and art education.

Many times, web design focuses far too much on the code side of things, and not enough on the theory of design, color, etc., especially as it relates to web design.

Excellent article! This should be a promising series.

Matt Livingstone

June 14, 2005 5:41 AM

Excellent and concise.

Every young designer and design student show read this article.

Well done.

alexdesigns.com

June 14, 2005 6:08 AM

Its great to see a professional approach to web design theory. Well done. These concepte are not addressed enough in the appropriate ways and I believe you’ve nailed it. Now I only hope others in the industry can approach design the same way.

G.A. Buchholz

June 14, 2005 6:37 AM

Excellent article – a useful reference tool that gels down the basics of design into a great “cheat sheet”. All Web staff, not just designers, should read this.

David Heller

June 14, 2005 7:15 AM

Hi Joshua,
this is a very nice, concise explanation of the core elements of visual design, but I wouldn’t call your list of design elements, all that is needed for Web Design, in total. The Web, is really a combination of a publishing and software development medium and because it inherits from both, to do it well you need to equally understand the elements of presentation, communication, and graphic design as you outlined them here, and the elements of structure and behavior that make up more interactive systems. I wrote a small article on breaking down the User Experience of a product on my blog here, and I think it highlights these distinctions well—http://synapticburn.com/comments.php?id=11_0_1_0_C
A powerpoint version of this is also available (given at the IA Summit this past March)—http://synapticburn.com/comments.php?id=50_0_1_0_C

The presentation layer is a very compelling piece of web design, but taken without an overall architecture of structure and behavior that is contextualized to the needs of a human user-base, the outcomes will just be unusable yet beautiful irrelevance.

Nick Finck

June 14, 2005 8:16 AM

David, I agree with your points here, however I must remind you that this is a Web Design column. Notice how I used inital caps there. Somewhere over the last four or so years the term Design on the Web started to mean code, markup, CSS... there’s nothing wrong with it, but I think we are going with the traditional understanding of Design here for the Web. We have several other columnists who are writing about web development (CSS/markup/Javascript), web programming (PHP/MySQL/JSP, etc), and things like IA and UX. This is not one of those columns though Joshua may tend to touch on those subjects where needed.

Harry

June 14, 2005 9:10 AM

To the list of related books, I would add Universal Principles of Design. Best book I’ve read on design in the last two years, no matter the medium.

Bruce Hodo

June 14, 2005 9:27 AM

I received a degree in Architectural Design ‘way back in the mid 70’s. I vaguely remember some of this. But not enough to really be able to tie it into Web Design. For years I’ve been asking designers and looking around for a reference book/website that links Visual Design with Web design, with no success. Your series of articles (and the links you provide) seem to be just what I’ve been looking for. Thank you for organizing and presenting this information. (I suspect that this series will grow up to be it’s own website, highly regarded and massively bookmarked!)

Andrew

June 14, 2005 2:44 PM

Well done. A nice companion is Luke Wroblewski’s Visible Narratives article at BoxesandArrows.com.

Joshua David McClurg-Genevese

June 15, 2005 7:15 AM

Wow! Thanks for all of the great feedback, and additional recommendations of books and articles. I will try and address any and all questions or concerns about the articles in the Design in Theory and Practice Column here in the comment postings. You can also feel free to E-mail me at any time.

- Mindaugas: I believe 1024 × 768 is becoming the dominant screen resolution, and as such have been designing a bit larger. I usually aim for somewhere around 950-ish. I also find that I am doing a lot more percentage of screen designs that stretch to fill the available space. In these instances I tend to choose a smaller size, and build in stretch points to see how the content shifts and then make changes from there.

- Jens Meiert: I agree about the Golden Section, and considered putting it in the article for awhile. Thanks for bringing it back into the discussion.

- David Heller: I agree that any good Web designer should have at least a basic understanding of the technology behind the interface. I also think that there are additional constraints inherent to the medium of the Web that can affect many of the principles and elements of design, especially when looking at the cognitive and ergonomic factors in human-computer interaction. Eventually, I think, we may get to some of this. But I thought a primer of design tenets that did not relate specifically to any one medium might be a good place to start to establish a foundation upon which more medium-specific discussions could be had.

Again, thank you everyone for your comments and questions. I look forward to this continued discussion.

Joshua David McClurg-Genevese

Joan M. Mas

June 15, 2005 4:02 PM

Excellent article indeed.

I would like to suggest another excellent, if simple, online presentation of the principles of design, at Mundidesign.

Burton

June 18, 2005 4:30 AM

Very nice primer! For those of us schooled in other disciplines/fields, I found your treatment very helpful. I’m looking forward to your next pieces. Thank you.

Darren

June 19, 2005 2:47 AM

Brilliant.

As a dabbler looking to learn web design as a whole I’m often struggling to find help with visual theory. This will I’m sure be something I’ll pick up and read again and again.

As some comments above say a much uncovered aspect and I hope to read more of the same following on.

Thanks

Jens Meiert

June 19, 2005 3:47 AM

Short but important screen resolution throw-in: About 28% still use an 800×600 resolution – so do not stop to support it!

Cam

June 20, 2005 3:14 PM

Jens: It really does depend on your audience. My stats show something like 92% of my visitors use 1024×768 or larger.

(Having said that, my personal site is still built for 800×600, mainly because I like the whitespace.)

While I agree that for a mass-market commercial site, you should still support the widest range of screen resolutions, it’s also important to consider who the target of your site is. For example, I’d imagine that there aren’t too many people working in the web industry that use less than 1024×768, so for a site targeted at that demographic, it might make sense to design for a larger screen.

I always tend to take statistics like those presented by The Counter and W3 Schools and the like with a moderately large grain of salt (lies, damn lies, etc).

Engelbert

June 22, 2005 2:53 PM

Thank you so much for your great tutorial. I was looking for that kind of basic information clearly explained for hours! Greetings from Salzburg (Austria – no kangoroos here)

Mary

July 1, 2005 9:52 AM

Brilliant aricle. Thank you very much for it.

Jake McGraw

July 6, 2005 7:48 AM

I very much enjoyed the article. Currently, I’m studying computer science but my first love has always been art and design. The guide you provided here has certainly whetted my desire for a mroe formal background in design theory. Keep up the good work.

um

July 16, 2005 11:02 PM

I’d like to reiterate Harry’s comment about the Universal Principles of Design. This book isn’t just a ‘good design’ fill-up-the shelf type book, this is THE BOOK. It takes one hundred awesome principles, like those listed in the article, and explains them completely in about 2 paragraphs each, providing a brilliant illustration of every one that actually makes you understand & remember the design principle. It’s multidisciplinary, applying the essential truths of design to a wide field of user-centered design experiences, as this article does. Buy this book, absolutely. You will learn something on every page.

Brion

August 3, 2005 5:11 PM

This article is absolutely GREAT!

As someone who studied Interactive Media Design, graphic design priciples were not apart of my curriculum. Therefore I learned simply by looking at and studying for hours other designs that caught my attention.

Now I can go about designing comps with a foundation of what’s required.

Short of purchasing any of a variety of books, this is somehting I personally have been longing for.

Thank you.

Brion

Tony

August 10, 2005 9:15 AM

Excellent article, although I design website for affiliate user this is tremendous information that needs to be reviewed every time I put pen to paper.

Thank you.

Chris Jennings

September 6, 2005 1:01 AM

This is a good article and I will certainly point my students to this URL. I have written a few bits and pieces on design on my site but this article is very comprehensive and a valuable contribution to the field of design.

Sorry, comments are closed.

Media Temple

via Ad Packs