Webpage Design Basics for Non-Designers

2,181 views

Published on

Published in: Business, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,181
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
96
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Webpage Design Basics for Non-Designers

    1. 1. WEBPAGE DESIGN BASICS FOR NON-DESIGNERSMike Wilcox - July 2011Tweets: @clubajaxBlog: clubajax.org
    2. 2. OMG! GARY IS HERE!!!
    3. 3. THE LOGO
    4. 4. The LogoThe Logo should be done first. It determineswhat the website will look like.
    5. 5. The LogoThe Logo should be done first. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!!
    6. 6. The LogoThe Logo should be done first. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company
    7. 7. The LogoThe Logo should be done first. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message
    8. 8. The LogoThe Logo should be done first. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message Ideally, you should interview founders to get the personality of the company
    9. 9. The LogoThe Logo should be done first. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message Ideally, you should interview founders to get the personality of the company What mood does it invoke?
    10. 10. The LogoThe Logo should be done first. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message Ideally, you should interview founders to get the personality of the company What mood does it invoke? Professional, whimsical, emotional, corporate, edgy, artistic
    11. 11. ColorColors are meaningful. You’ll need at least aprimary and secondary.Red PROS: fire, power, passion, importance, energy, excitement CONS: rage, emergency, anger, (and death in China, we know)Orange PROS: happiness, joy, sunshine, cheerfulness, childlike exuberance CONS: ignorance, deceitYellow PROS: joy, intelligence, brightness, energy, optimism, happiness CONS: caution, criticism, laziness, jealousyGreen PROS: nature, healing, growth, harmony, safety CONS: money, greed, jealousy, beginnerBlue PROS: peaceful, calming, stability, trust, dependability CONS: depression, coldness, passivenessPurple PROS: royalty, sophistication, wealth, luxury, spirituality, creativity, magic CONS: gloominess, sadnessBlack PROS: power, elegance, sophistication, depth CONS: death, mystery, the unknown, grief, mourning, sorrowWhite PROS: purity, innocence, cleanliness, safety CONS: cold, distant, winter http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/
    12. 12. Color - cont’dUse Kuler, or another color-selection app http://www.techiemania.com/5-awesome-free-tools-to-help-you-choose-your-website-color-scheme.html http://kuler.adobe.com/#create/fromacolor
    13. 13. ThumbnailsYou must use a pencil and paper. Ideas forlogos cannot be done directly in Photoshop (Iknow - Ive tried)
    14. 14. Logo Design Tips
    15. 15. Logo Design Tips Needs to read well and purposefully
    16. 16. Logo Design Tips Needs to read well and purposefully Needs to hold up to being very small
    17. 17. Logo Design Tips Needs to read well and purposefully Needs to hold up to being very small Should have a version in back and white
    18. 18. Logo Design Tips Needs to read well and purposefully Needs to hold up to being very small Should have a version in back and white Should have a CMYK version for printing
    19. 19. LOGO EXAMPLES
    20. 20. Logo Examples
    21. 21. Logo Redesign
    22. 22. Logo Redesign
    23. 23. Logo Redesign
    24. 24. DESIGN REFERENCES
    25. 25. Website Galleries
    26. 26. Website Galleries This is where those webpage galleries come in handy
    27. 27. Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it!
    28. 28. Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it! A quick way to learn what is the current trend in design
    29. 29. Website Galleries This is where those webpage galleries come in handy
    30. 30. Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it!
    31. 31. Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it! A quick way to learn what is the current trend in design
    32. 32. Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do.
    33. 33. Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/
    34. 34. Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/
    35. 35. Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/ http://art.yale.edu/
    36. 36. Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/ http://art.yale.edu/ http://www.yvettesbridalformal.com/
    37. 37. Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/ http://art.yale.edu/ http://www.yvettesbridalformal.com/ http://richardwiseman.wordpress.com/2011/01/06/the-worst-websites- ever/
    38. 38. DESIGN BASICS
    39. 39. LayoutThere are many layout variations, but here arethe most common: http://skyje.com/2011/01/web-layouts/
    40. 40. LayoutThere are many layout variations, but here arethe most common: One column http://skyje.com/2011/01/web-layouts/
    41. 41. LayoutThere are many layout variations, but here arethe most common: One column Two column http://skyje.com/2011/01/web-layouts/
    42. 42. LayoutThere are many layout variations, but here arethe most common: One column Two column Three column http://skyje.com/2011/01/web-layouts/
    43. 43. LayoutThere are many layout variations, but here arethe most common: One column Two column Three column Fixed width (centered) http://skyje.com/2011/01/web-layouts/
    44. 44. LayoutThere are many layout variations, but here arethe most common: One column Two column Three column Fixed width (centered) Fluid / Stretchy http://skyje.com/2011/01/web-layouts/
    45. 45. Color
    46. 46. Color Same rules as the logo applies
    47. 47. Color Same rules as the logo applies Don’t use simple, saturated colors. Looks like your kid did it!
    48. 48. Color Same rules as the logo applies Don’t use simple, saturated colors. Looks like your kid did it! Also be careful of overly muted designs. They may
    49. 49. Design Tips
    50. 50. Design Tips Dont be afraid of whitespace
    51. 51. Design Tips Dont be afraid of whitespace Vary sizes and colors, break up monotony
    52. 52. Design Tips Dont be afraid of whitespace Vary sizes and colors, break up monotony Make the eye "dance" on the page from one element to another
    53. 53. TYPOGRAPHY
    54. 54. Serif vs Sans Serif http://www.alistapart.com/articles/on-web-typography/
    55. 55. Serif vs Sans Serif A serif is a structural detail on the elements of the font. http://www.alistapart.com/articles/on-web-typography/
    56. 56. Serif vs Sans Serif A serif is a structural detail on the elements of the font. The purpose is to give the font and word more of a horizontal flow, and therefore make a block of text easier to read. http://www.alistapart.com/articles/on-web-typography/
    57. 57. Serif vs Sans Serif A serif is a structural detail on the elements of the font. The purpose is to give the font and word more of a horizontal flow, and therefore make a block of text easier to read. Some studies show that a sans serif is easier to read on monitors, possibly because of the lack of resolution. http://www.alistapart.com/articles/on-web-typography/
    58. 58. Serif vs Sans Serif A serif is a structural detail on the elements of the font. The purpose is to give the font and word more of a horizontal flow, and therefore make a block of text easier to read. Some studies show that a sans serif is easier to read on monitors, possibly because of the lack of resolution. A recent study suggested that neither serif nor sans serif matter as much as the familiarity of the http://www.alistapart.com/articles/on-web-typography/
    59. 59. Font Weight http://www.alistapart.com/articles/on-web-typography/
    60. 60. Font Weight Bolder text is considered “heavier” or “darker” because it allows less white space to show. http://www.alistapart.com/articles/on-web-typography/
    61. 61. Font Weight Bolder text is considered “heavier” or “darker” because it allows less white space to show. Bold text is harder to read in copy, but easier to read in headlines. http://www.alistapart.com/articles/on-web-typography/
    62. 62. Font Weight Bolder text is considered “heavier” or “darker” because it allows less white space to show. Bold text is harder to read in copy, but easier to read in headlines. Use different weights to draw attention to different areas of interest. http://www.alistapart.com/articles/on-web-typography/
    63. 63. Headlines http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
    64. 64. Headlines Go bold, go heavy http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
    65. 65. Headlines Go bold, go heavy Grab attention http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
    66. 66. Headlines Go bold, go heavy Grab attention Use fancy, unordinary fonts http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
    67. 67. Type - Content http://www.alistapart.com/articles/on-web-typography/
    68. 68. Type - Content Must be lighter http://www.alistapart.com/articles/on-web-typography/
    69. 69. Type - Content Must be lighter Avoid “reversed”colors, like white on black http://www.alistapart.com/articles/on-web-typography/
    70. 70. Type - Content Must be lighter Avoid “reversed”colors, like white on black Must be standard font faces http://www.alistapart.com/articles/on-web-typography/
    71. 71. Type - Content Must be lighter Avoid “reversed”colors, like white on black Must be standard font faces Times, Arial and Helvetica are the most common font not because of their design, but because people are used to reading them http://www.alistapart.com/articles/on-web-typography/
    72. 72. Web Fonts List
    73. 73. Web Fonts List It’s more than just Arial and Times now.
    74. 74. Web Fonts List It’s more than just Arial and Times now. HTML5 fonts take a while to load, but helps differentiate the site.
    75. 75. Web Fonts List It’s more than just Arial and Times now. HTML5 fonts take a while to load, but helps differentiate the site. Recommended that a non-expert stick with the standard fonts list.

    ×