Subscribe to Our Newsletter

On the Web:

  • FaceBook
  • Google Plus
  • Twitter
  • YouTube
  • RSS
  • Pinterest
Select your country
Country: United States

Join TechSoup

TechSoup.org The place for nonprofits, charities, and libraries

Search section

Search
Search
Home » Community » Design and Web Building » Principles to design by?

Principles to design by?

New here?

  • If you'd like to participate, join us.
  • If you're already a member, log in.
  • Subscribe to RSS
  • New Post
Details
Rate This
  • 7 Replies
  • 1 Subscriber
  • Postedover 7 years ago

Principles to design by?

  • wcook
    Posted by
    on 8 Aug 2007 11:15 AM
    What design principles should you follow when planning or evaluating projects for your nonprofit? Should you prioritize function over form? Simplicity over complexity?

    In the article Five Principles to Design By, Joshua Porter shares his thoughts on what makes a design work. Share your feedback here.
    senior editor, TechSoup
  • MeganKeane
    Posted by
    on 10 Aug 2007 12:56 PM
    I enjoyed many of the points made in this article. In particular I love art and colorful designs, but when I'm going to a website, I care more about functionality and simplicity. I really agree that the best designs are transparent--the ones that work so well that you don't even think about them. The best websites I can think of have a clean interface and are intuitive to use. I've heard the maxim "2 clicks" used often when talking about web design--meaning that for most functions, a user should only have to click a maximum of two clicks to get what they're looking for.

    Anyone have any examples of websites that illustrate these design principles (or others) that work well?

    --Megan

    Megan Keane

    Follow me on Twitter: @penguinasana or connect with me on my website.
  • jazgal
    Posted by
    on 14 Aug 2007 4:06 PM
    I thought this article made relevant points. (and one of my favorite rants)
    It seems that on a daily basis I find myself asking if the person who designed the web site, appliance, tool, or other object, ever actually used the object themselves, or ever tried to clean or maintain it, etc. before it went to market - there are so many bad designs out there! Just looking cool isn't enough, by a long shot, and just because you can make something, doesn't mean that you should.
    Especially in web sites, so many are so flashy that they take forever to load, don't navigate easily, or don't have enough of the right information to get you where you need, and can be very confusing or frustrating to use.
    Anything that has been well designed is an obvious pleasure to use after battling the bad. And that being said, it's hat's off to the well designed, because I know that a lot of thought and care has gone into it.
  • spayneuterallpets
    Posted by
    on 14 Aug 2007 4:58 PM
    I would like to recommend two books that could make an IMMENSE difference in how you design, especially if you haven’t thought much about it before.

    They are both by Robin Williams (no, not the one you think).

    The first book is called “The Non-Designer’s Design Book” and the author makes the claim that if you recognize and apply four simple design principles “you’ll be amazed”; and I think she is right. When I started to apply these principles to newsletters and flyers and brochures, I started to get comments, lots of them, about how great everything looked. Some people have even wanted to hire the pro I used.

    The other book is called “The Non-Designer’s Web Book”. This is a meatier book with a lot of detail about how to build a web site, fonts, graphics, the difference between print and the web and how it affects design, and more. The four simple design principles are also included in a chapter of their own and applied to web page design. I do not create web pages or sites, but I have been able to help others make a visible and immediate improvement just by applying the basic design principles here also.

    Best of all, the books are an easy read, and fun, to boot. Complex material is broken down into digestible chunks, and presented in a light-hearted, but never condescending tone. Even though these books are not intended to be high-level, exhaustive studies of design, what they do present is so useful and accessible that it is hard not to get some benefit from them.

  • wcook
    Posted by
    on 14 Aug 2007 5:38 PM
    Thanks for these suggestions! If you have time, it might be interesting if you outlined the four principles Williams recommends here.
    senior editor, TechSoup
  • spayneuterallpets
    Posted by
    on 18 Aug 2007 6:08 AM
    Before I reveal the four principles, let me encourage you once again to look at the books. They are packed with before and after examples, accompanied by clear explanations of why the after is better. You will also find thoughtful quizzes to help you see if you have gotten the concepts. And they are just plain fun.

    I don’t think I could do a better job than Robin herself of summarizing the four basic principles, so in her own words:


    “The four basic principles … are alignment, proximity, repetition, and contrast. These principles are the underlying factors in every printed piece you see anywhere, on screen or elsewhere. If you just remember these four principles, your web (or printed) pages will look clean, neat, and professional. They will communicate more clearly, people will enjoy them more, and you will be proud.”

    “The … basic principles of design … appear in every well-designed piece of work. … Keep in mind they are really interconnected. … Rarely will you apply only one principle.”

    Contrast
    The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc) are not the same, then make them very different. Contrast is often the most important visual attraction on a page – it’s what makes a reader look at the page in the first place.

    Repetition
    Repeat visual elements of the design throughout the piece. You can repeat colors shapes, textures, spatial relationships, line thicknesses, font sizes, graphic concepts, etc. This develops the organization and strengthens the unity.

    Alignment
    Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.

    Proximity
    Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

    Excerpts taken from:
    Williams, NON DESIGNERS WEB BOOK, p 13 and 105, (c) 2006, 2000, 1998 by Robin Williams & John Tollett
    Reproduced by permission of Pearson Education, Inc publishing as Peach Pit Press. All right reserved.
    The Non-Designer's Design Book, 2nd Edition (ISBN 0-321-19385-7)
  • wcook
    Posted by
    on 20 Aug 2007 9:41 AM
    Thanks for posting these; they are great points.
    senior editor, TechSoup
  • elliotharmon
    Posted by
    on 10 Dec 2009 9:45 AM

    Hi everyone,

    Since we featured this article again in By the Cup this week, I thought I'd do a follow-post on the blog.

    One thing I mention in the post is this pretty great piece by Mark at Ideas: Where do you hide the good stuff? That's a question I find myself asking a lot when I look at many nonprofits' websites.

    What principle do you design by?

    Cheers,
    Elliot

    PS: Ha, I guess our forums censor the name of Mark's blog.

    Elliot Harmon
    Staff Writer, TechSoup