Más contenido relacionado


Beautiful Web Design

  1. Beautiful Web Design The principles of Abdel Moneim Emad 16 August 2014
  2. Introduction Principles Layout Color Typography Imagery 2
  3. Removing wallpaper is a tough job, but it’s even more difficult when there are multiple layers of the stuff There are strong parallels between designing a room’s decor and designing a good website Good design is about the relationships between the elements involved, and creating a balance between them 3
  4. Fads come and go, but good design is timeless Internet Wayback Machine No flashy Photoshop filters No trendy image treatments Good Design transcends Technology Fine tuning the details made a world of differences 4
  5. Design Process Steps Discovery (Requirement Gathering) Exploration (Analysis) Implementation 5
  6. Discovery – First time Website Design 1. What does your company do? 2. Does your company have an existing logo or brand? 3. What is your goal in developing a website? 4. What information do you wish to provide online? 5. Who is your target audience? Do its members share any common demographics, like age, gender, or a physical location? 6. Who are your competitors and do they have websites? 7. Do you have examples of websites you like or dislike? 8. Timeline vs. Budget 6
  7. Discovery – Existing Website Re-Design 1. What are your visitors usually looking for when they come to your site? (Service Usage Report) 2. What are the problems with your current website? (Content) 3. What do you hope to achieve with a redesign? 4. Are there any elements of the current site that you want to keep? 5. How do you think your visitors will react to a new site design? (Online Survey) 7
  8. Exploration 1. Put yourself in the shoes of the website visitors 2. What is the clearest title possible for page X? 3. How many steps does it take to reach page Y? 4. Information Architecture (Whiteboard + Sticky Notes) 5. Avoid overwhelming the visitors with too many options 6. Avoid too deeply nesting, too many clicks away from the home page 8
  9. Information Architecture 9
  10. Implementation Users are pleased by the design but drawn to the content 10
  11. Implementation Users can move about easily via intuitive navigation 11
  12. Implementation Users recognize each page as belonging to the site 12
  13. Principles - Unity 13
  14. Principles - Balance 14
  15. Principles - Proximity 15
  16. Principles - Contrast 16
  17. Web Page Anatomy 17
  18. Grid Theory – The Golden Ratio 18
  19. Grid Theory – The Rule of Thirds 19
  20. Grid Theory – 960 Grid Systems 1. Derived from 960px (which found to be the typical web page width for a screen resolution of 1024px wide 2. Can be divided into: 2, 3, 4, 5, 6, 8, 10, 12, 15 and 16 20
  21. Resizing – Fixed vs. Fluid Layout 21
  22. Resizing – Fixed vs. Fluid Layout 22
  23. Resizing Alternative – Responsive Layout 23
  24. Screen Resolutions 1% of visitors are 800 x 600 or lower 99% are 1024 x 768 or higher Visitors 800 x 600 or lower 1024 x 768 1366 x 768 1280 x 800 1280 x 1024 1920 x 1080 Higher 24
  25. The Psychology of Color Most modern displays can render more than 16 million colors E-commerce website owners want to know which color will make their website visitors spend more money Fast-food restaurant owners are dying to know which color combinations will make you want to super-size your meal 25
  26. Color Association - RED Stimulate adrenaline and blood pressure Stimulate Metabolism Promote Passion Exciting, Dramatic Color of Love Used for Error signs 26
  27. Color Association - ORANGE Very Active & Energetic Promote Happiness Represent Sunshine & Creativity More informal and less corporate-feeling color than red Doesn’t show up often in nature, so it jumps out Used for Life Jackets, Road Cones and WARNING signs Stimulate Metabolism & Appetite Ideal for promoting Food & Cooking products 27
  28. Color Association - Active & Highly Visible Used for Taxi Cabs & CAUTION signs The signature color of Smileys Energetic 28
  29. Color Association - GREEN Associated with nature and environmental protection Much easier on eyes, and far less dynamic than yellow and red Used with black background for monochromic console displays Can represent wealth, stability and education Promote Growth, freshness and hope 29
  30. Color Association - BLUE Has universal appeal because of its association with the sky and the sea Associated with intelligence and openness Has calming effect Promote cold and silence Reduce appetite, due to rarity of blue in real food Not ideal for promoting food products Ideal for Airlines, Air Conditioning and marines The primary color in the logos of IBM, HP, Microsoft and DELL 30
  31. 31
  32. Color Association - PURPLE Associated with Royalty & Power Prestige & Wealth Has universal appeal because of its association with flowers Balances the stimulation of RED and the calming effect of BLUE One of the least used color in web design If you’re trying to create a website design that stands out from the crowd, think about using a rich shade of purple 32
  33. Color Association - Promotes the idea of Clean Power (Wind Turbines) Color of perfection, light, cleanness, and purity Used in detergent commercials In Chinese culture, white is a color traditionally associated with death You can put white background block on an off-white canvas 33
  34. Color Association - BLACK Associated with Elegance, Strength & Power Associated with Death, Fear and Evil James Bond, Batman, Tuxedos and Mobile Phones 34
  35. Color Temperature 35
  36. Chromatic Value 36 The measure of the lightness or darkness of a color is known as its chromatic value. Adding white to a color creates a tint of that color. Adding black to a color creates a shade of that color.
  37. Saturation 37 The strength or purity of the color. Even though cool colors tend to recede, a vivid blue will draw more attention to itself than a dull orange.
  38. RGB vs. CMYK 38 RGB is an additive color model designed for web Colors are displayed in percentage of RED, GREEN and BLUE 100% (RED + GREEN + BLUE) = 100% WHITE Found in all electronic devices’ displays CMYK is an subtractive color model designed for print 100% ( CYAN + MAGENTA+ YELLOW) = GRAYISH BLACK This is why they are always supplemented with BLACK Found in Ink-jet, Laser jet and industrial four-colors printers
  39. RGB vs. CMYK
  40. Traditional vs. CMYK Color Wheel
  41. Color Schemes 41 Monochromatic Analogous Complementary split complementary Triadic Tetradic (also called double complementary)
  42. Color Schemes 42 Monochromatic
  43. Color Schemes 43 Analogous Single Pizza slice
  44. Color Schemes 44 Complementary Opposite colors
  45. Common Complementary Pitfalls 45 Can be horribly painful Foreground / Background Not directly opposite
  46. Reading your customer’s mind 46 What we offered our customer
  47. Reading your customer’s mind 47 What our customer chose
  48. Reading your customer’s mind 48 What our customer chose And the resulted color schema is:
  49. Typography 49 After studying typography for some time, you’ll never look at a billboard, brochure, book, or even a restaurant menu the same way again. The study of typography is one that draws many people in ... and never lets them go.
  50. Anatomy of a Letterform 50 1. Baseline 2. Cap height 3. Crossbar 4. Serif 5. Mean line 6. Bowl 7. Descender The Old-style numerals in the Georgia font on the left, and standard numerals in Helvetica on the right.
  51. Font Typefaces 51 1. Serif Fonts 2. Sans-serif Fonts 3. Handwritten Fonts 4. Fixed-width Fonts (Console, ASCII arts) 5. Novelty Fonts 6. Dingbat Fonts (Dingbat Fonts)
  52. Typography in the web 52 If you have five, or 5,000 fonts installed; you have to think in terms of the lowest common denominator. The number of font families that are supported, by default, across both major operating systems is very small. This list of nine font families is commonly known as the safe list.
  53. Typography in the web 53 Web fonts with @font-face Problems: - Residence from font foundries - Inconsistencies in supported font formats across browsers (TTF, OTF, SVG, EOT and WOFF) Solution: - Commercial web fonts services: like Typekit, Fontdeck, WebINK - Free web fonts services: like Google Font Directory (Creative Commons Licensed Fonts) So, its completely free
  54. Imagery 54 How to impress: - Take It! (Use your camera) - Make It! (Use your Photoshop) - Stock Images (Commercial) - Royalty-Free Images - Free Images
  55. Imagery 55 How not to impress: - Google Ganking (Google Images Search engine) - Hot Linking <img src="" alt="Image Description " /> - Clipart - Bad Cropping
  56. File Formats & Resolution 56 JPEG / JPG: - Unlike GIF and PNG images, JPEGs can provide fairly small file sizes at 24-bit color - It’s a lossy format that can create visual artifacts depending on how much you compress the file
  57. File Formats & Resolution 57 GIF: - An 8-bit format that compresses files on the basis of the number of colors in the image - It supports a maximum of only 256 colors - Transparency - Animation - Although the GIF format is still widely used on the Web, using PNG instead is strongly encouraged
  58. File Formats & Resolution 58 PNG: - Can be saved in either 8-bit or 24-bit format - The lossless compression style of the PNG algorithm works similarly to that of GIF - Transparency (with 256 alpha levels of opacity) - Each pixel in a PNG image can have up to 256 different levels of opacity
  59. Before saying Goodbye, remember that: 59 - The most important attributes you can bring to the design table are your own personality, experiences, and interests. These three resources should form the foundations of your design work. - Spend less time trying to emulate the latest design trends and more time defining your own style. - I hope you’ve found this session to be both helpful and encouraging as you kick off a career - or hobby - in web design.