The Principles of Beautiful Web Design

1. The Principles of Beautiful Web Design Monica Glover Internet Marketing 450 11-3-09

2. Whose this guy? Jason Beaird

3. Preparation • Understand The Task • No direction • Figure out what the client does

4. Lets get STARTED! • Start with a blank sheet of paper • Allows you to ignore the technical limitations • Create a few different designs Before taking your masterpiece to Photoshop…

5. What is a Good Design? The website should be functional, beautiful, simple to use and consistent with theme. • Usability – forces on the functionality, the presentation of information & efficiency. The most important • Aesthetics- Presentation, animation & graphics

6. 3 Ways to Good Design • Users are please by the design, but drawn to the content. • Users can move about easily via navigation • Users recognize each page as belonging to the site.

7. Web page Anatomy • Containing Block • Logo • Navigation • CONTENT • Footer • White space

8. Balance • Symmetrical- occurs when the elements of a composition are the same on either side of an axis line. • Asymmetrical- a little more abstract and visually interesting. Different sizes, shapes tone and placement.

9. Jazz it up and Personalize! • Unity • Proximity • Repetition

10. Ok… For Real Now, Lets GET STARTED! • After speaking with the client again, you must find out…. • How much content do you need • What kinds of content do you want to provide on the website • Is the logo on the business card used consistently across all collateral to brand the company

11. Color Red Orange Yellow Green Blue Purple White Black

12. Color Temperature

13. Color Scheme • Monochromatic • Analogous • Complementary • Split complementary • Triadic • Tatradic (double complementary)

14. Monochromatic Monochromatic- consisting of the same color with various shades.

15. Analogous Analogous- colors that accent each other that are adjacent of the color wheel.

16. Complementary Complementary- colors located opposite the color wheel.

17. Split Complementary Split Complementary- color scheme, using two adjacent colors to your base colors complement

18. Triadic Triadic- using colors that are not next in the color wheel.

19. Tetradic Tetradic- involves 4 colors, generally two sets of complementary colors.

20. Texture Texture is anything that give a distinctive appearance or feel to the surface, design or object. http://fishmarketing.net/

21. Line • Horizontal- as a background can create texture and design. • Diagonal- can make the page more exciting and create more eye movement around the page. • Thickness of line can also create a sense of expression

22. Shape • Shape- Any time two points met you have created a shape. Shapes

23. Light and Shadow • Light and shadow can give an illusion that an image is 3D, just by adding lighting and highlighting colors along with shadows. It can make and image pop! See the difference…

24. Pattern • Can really help the visual appeal and create a lot of texture in your website. http://veerle.duoh.com/

25. Typography • Typography- Making impressions with writing Safe Font list Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana

26. Text Spacing • Horizontal spacing- a process called Kerning shows how far and close letter should be to each other. • Vertical Spacing- space between the lines of text is knowing as leading. Makes it easy to read.

27. Font Types • Serif fonts- Type face strokes with accents at the top and bottom. Ex Times New Roman font AT • Sans Serif Font- Doesn’t have the accent marks at the top and bottom (just like this font) • Handwritten- can be difficult to read, but show personality exHey Monte • Novelty fonts- very off the wall, but if used in the correct way can show great personality. • Ex Hey Monte

28. Choosing the Right Font Lets say we are creating a website for “Clyde’s Turtle Rising,” which font would you pick? Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing Clyde’s Turtle Racing

29. Imagery- what to look for? • Relevance- can add an interesting value to your website • Is it interesting? • Does it catch your eye and make you understand the theme? • Is it appealing? • Because everyone has different style and taste on what is appealing its best just to find out who your audience is and direct the site to them.

30. Photography • Do it your self- Its generally best if you do it your self because, its your vision you are the only one that can get it right. • Illustration- can also be good to… this shows the client that you have a real interest in there company. • Stock- if you don’t have the time or talent you can also purchase stock images that you many need to pay a fee for • Buyout all rights if you can. • Can be difficult

31. What not to do! • Google Jacking- finding an object on Google, possibly photoshopping or cropping the image. We all do it, but its not ok especially for a professional website. • Hot linking- linking your site to the image • Clip art- need I say more

32. One Love