Web Design principles


Published on

A presentation to discuss the design principles Whytespace's team of professional graphic designers stick to.

Tuesday, November 30, 2010

Published in: Design, Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • It's a percentage game, and it's the designer's job to optimize the percentages to get more people through to satisfactory outcomes.
  • Lots of clients have that purpose and never stop redesigning their sites, because they simply get what they ask for, “ doing”.
  • As an example, it's more realistic for your website to show that your company is the best at creating widgets A, B, & C for manufactures of blah in western Canada than it is to be the most sought-after widget maker in all of Canada.
  • How much “X” should you have in your web site? “Enough, and no more!” Any “things” designers use to make visitors think their clever are “things” we are not using to guide them directly to what they want.
  • When visitors arrive at a new web page, there is usually one big hairy question at the top of their mind. We have to provide a means to answer the big questions on every page, because someone could come in at any point, by following deep links from search engines or other sites. Good branding isn't an afterthought or something added on. It's essential to the experience. There's no avoiding it. Everything has a brand, it's just that some are unconscious, some are consciously crafted, some are weak and some are strong.
  • Who are they, What is their brand? What do they do? Who do they serve? How do I contact them? Bad photos, poor colors, text is hard to read
  • Colors, logo, layout, photos Segmenting users Concise & simple content Contact info
  • Web Design principles

    1. 1. Whytespace Ltd <ul><li>Simple Online Solutions </li></ul><ul><li>BNI Park Rangers </li></ul><ul><li>Tuesday, November 30, 2010 </li></ul>
    2. 2. How to be a good client <ul><li>An education in the design principles of an effective website </li></ul>
    3. 3. Web design principles <ul><li>Design isn’t Art! </li></ul><ul><ul><ul><li>Know your goal </li></ul></ul></ul><ul><li>Enough, and no more </li></ul><ul><ul><ul><li>The Simple shall inherit the World Wide Web </li></ul></ul></ul><ul><li>Websites are for their visitors </li></ul><ul><ul><ul><li>Getability and the Brand </li></ul></ul></ul>Getting it right!
    4. 4. Design isn’t art <ul><li>Art is </li></ul><ul><ul><ul><li>creating beautiful or thought-provoking things for the sake of it. </li></ul></ul></ul><ul><li>Design is </li></ul><ul><ul><ul><li>a discipline... creating communication with a purpose </li></ul></ul></ul><ul><ul><ul><li>the conscious creation of a new solution to a problem or need. </li></ul></ul></ul><ul><li>Focus on designing the content, not the box it comes in </li></ul>Know Your Goal
    5. 5. Design isn’t art <ul><li>What is a goal </li></ul><ul><ul><li>A goal is a state of being, not a state of doing. </li></ul></ul><ul><ul><li>It isn’t something you do, it’s somewhere you arrive. So “designing a cool web site” isn’t a goal. </li></ul></ul><ul><li>If you aren't clear on the problem, you can't design your way forward. </li></ul><ul><li>A website is a means to an end, not an end in itself. </li></ul>Know Your Goal
    6. 6. Design isn’t art <ul><li>Simple </li></ul><ul><ul><li>Reduce and simplify goals, seeking to recognize the core intention, motivation, or foundations that underlie a tactical goal </li></ul></ul><ul><li>Realistic </li></ul><ul><ul><li>It's better to choose modest goals and practice achieving them, than to be too ambitious and practice failure. </li></ul></ul><ul><li>Specific </li></ul><ul><ul><li>Attaching specific success criteria to your goals help focus the mind and intent much more. </li></ul></ul>Know Your Goal
    7. 7. Enough, and no more! <ul><li>How many: </li></ul><ul><ul><li>pages does the site need </li></ul></ul><ul><ul><li>paragraphs to describe something important </li></ul></ul><ul><ul><li>colors, logos, icons, pictures </li></ul></ul><ul><ul><li>headings, lines, drop-downs </li></ul></ul><ul><ul><li>fancy things </li></ul></ul><ul><li>One thing too many may overload your visitor's attention span. </li></ul>The Simple shall inherit the World Wide Web
    8. 8. Enough, and no more! <ul><li>Important questions to ask: </li></ul><ul><ul><li>Does it convey important information? </li></ul></ul><ul><ul><li>Does it contribute significantly to the brand? </li></ul></ul><ul><ul><li>Does it help your visitor know “I'm in the right place” or “This is the way to get what I want”? </li></ul></ul><ul><li>Occam's Razor… “Given any two solutions to the same problem, all other things being equal, the simplest solution is the best .” </li></ul>The Simple shall inherit the World Wide Web
    9. 9. Enough, and no more! <ul><li>The simple core </li></ul><ul><ul><li>It's always a good idea to look for the simple core within a complex situation. </li></ul></ul><ul><li>Be smart, not clever </li></ul><ul><ul><li>Keeping it simple is hard. One reason it’s hard is because we so often feel compelled to be doing something “more”, to be different in order to keep the visitor interested. That’s how cleverness creeps in. </li></ul></ul><ul><li>The purpose of design is not to draw attention to itself. It's to facilitate communication </li></ul>The Simple shall inherit the World Wide Web
    10. 10. Enough, and no more! <ul><li>Conventions are our friends </li></ul><ul><ul><ul><li>There are thousands of common design patterns that have become conventions, for good reason. </li></ul></ul></ul><ul><ul><ul><li>Familiar, conventional solutions make life easier because it takes less thought to understand something that looks and feels familiar and behaves just how you expect. </li></ul></ul></ul><ul><li>Web pages should be no more complex than they need to be to fulfill their various objectives. </li></ul><ul><li>Success = Attention / Stuff </li></ul>The Simple shall inherit the World Wide Web
    11. 11. Websites are for their visitors <ul><li>Two key questions: </li></ul><ul><ul><li>who’s really going to visit your web site </li></ul></ul><ul><ul><li>what’s necessary to get your message to those people and help them to take the next step </li></ul></ul><ul><li>You need to know who your real visitors are, so that you can design a site for them. </li></ul>Getability and the Brand
    12. 12. Websites are for their visitors <ul><li>Questions visitors are implicitly asking </li></ul><ul><ul><li>Is this for me? </li></ul></ul><ul><ul><li>Does it fit my expectations and budget? </li></ul></ul><ul><ul><li>What are my options </li></ul></ul><ul><ul><li>What are others using </li></ul></ul><ul><ul><li>Why you and not them </li></ul></ul><ul><li>People don’t come to your website unless they want your website to be the right one. </li></ul>Getability and the Brand
    13. 13. Websites are for their visitors <ul><li>Getability: </li></ul><ul><ul><li>Am I in the right place? </li></ul></ul><ul><ul><li>A page's getability simply means how easy it is for everyone to “get” what's going on </li></ul></ul><ul><li>Brand: </li></ul><ul><ul><li>The sum of everything people perceive when they experience the product, company, website etc. </li></ul></ul><ul><ul><li>A brand is both a statement and a promise. “This is who we are, and what we'll do for you”. </li></ul></ul>Getability and the Brand
    14. 14. Case study BGS Enterprises Inc. Before Before
    15. 15. Case study BGS Enterprises Inc. After After
    16. 16. Summary <ul><li>Design isn’t Art! </li></ul><ul><li>Enough, and no more! </li></ul><ul><li>Websites are for their visitors </li></ul>Sub Title Text
    17. 17. Whytespace Ltd <ul><li>Simple Online Solutions </li></ul><ul><li>BNI Park Rangers </li></ul><ul><li>Tuesday, November 30, 2010 </li></ul>