1 / 32

The Principles of Beautiful Web Design

The Principles of Beautiful Web Design . Monica Glover Internet Marketing 450 11-3-09. Whose this guy? . Jason Beaird . Preparation . Understand The Task No direction Figure out what the client does. Lets get STARTED!. Start with a blank sheet of paper

rafal
Télécharger la présentation

The Principles of Beautiful Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related