1. Digital Media SM1001 Digital Media, Semester A School of Creative Media © Week 07, 2010

2. A Brief Review Color ’ s three qualities Color ’ s three qualities Hue (dominant frequency component); Hue (dominant frequency component); Saturation (purity); Saturation (purity); Lightness (luminance). Lightness (luminance).

3. Visible Color Range

4. Color Relativity (illusion)

5. Additive Nature of Color RED + + GREENBLUE = RGB ++

6. Neutral color as reference A neutral color is represented in computer as {128, 128, 128} which is exactly half of 256 (2 8 ). A neutral color is represented in computer as {128, 128, 128} which is exactly half of 256 (2 8 ).

7. SM1001: Week 7, 2010 Designing for the Web SM1001: Week 7, 2010 Designing for the Web A basic introduction to the Web design

8. Designing for Print vs. Web They are different the following two major aspects: Different mediums have different requirements. Different mediums have different requirements. Easier to design for print than for the Web because there are less variables involved. Easier to design for print than for the Web because there are less variables involved.

9. Design for print

10. Design for Print Fixed final product Fixed final product The whole printout is available The whole printout is available

11. Design for Print The product that leaves the creator ’ s hands is the final product itself. The product that leaves the creator ’ s hands is the final product itself. Does not require another transformation of the product for it to be seen by someone. Does not require another transformation of the product for it to be seen by someone. No need to wait for the printout to load because the viewer either has the whole product or nothing at all. No need to wait for the printout to load because the viewer either has the whole product or nothing at all.

12. Design for the web

13. Plethora of Factors Many Variables Many Variables Mix display platforms, e.g., CRT, LCD, projector, iphone, Android, etc. Mix display platforms, e.g., CRT, LCD, projector, iphone, Android, etc. Content must be transformed by a software at the viewing time (e.g., Using a Web browser to display a Website). Content must be transformed by a software at the viewing time (e.g., Using a Web browser to display a Website). These factors cause differences in the final product and challenges in design. These factors cause differences in the final product and challenges in design.

14. Design for the Web Different shades of color! Variable display size

15. Design for the Web Variables include: Variables include: User ’ s display ’ s screen resolution (e.g., 800x600);User ’ s display ’ s screen resolution (e.g., 800x600); Display device ’ s color gamut (color range);Display device ’ s color gamut (color range); Display device ’ s actual size (e.g., 15 ”, 17 ” );Display device ’ s actual size (e.g., 15 ”, 17 ” ); Available fonts (discussed in details later);Available fonts (discussed in details later); Available plug-ins (discussed later);Available plug-ins (discussed later); Internet bandwidth (how fast the user can download content, discussed later);Internet bandwidth (how fast the user can download content, discussed later); Browser version and compatibility (discussed later).Browser version and compatibility (discussed later).

16. Screen resolution of the display changes the way the intended design looks. (Remember that a pixel ’ s actual dimensions are not fixed.) Screen resolution of the display changes the way the intended design looks. (Remember that a pixel ’ s actual dimensions are not fixed.) A 17 ” monitor using 1024 x 768 is different from the same monitor using 800 x 600 for its screen resolution. A 17 ” monitor using 1024 x 768 is different from the same monitor using 800 x 600 for its screen resolution. Variables - Screen Resolution

17. Use different resolutions to compare the site ’ s appearance on the same monitor Use different resolutions to compare the site ’ s appearance on the same monitor If the site at different resolutions looks different – fixed web design. Let’s look at the example in next page: Let’s look at the example in next page:

18. Fixed Web Design – case 1 17 ” monitor at 800 x 600 screen resolution 17 ” monitor at 800 x 600 screen resolution

19. Fixed Web Design – case 1 17 ” monitor at 1024x768 screen resolution 17 ” monitor at 1024x768 screen resolution

20. Fixed Web Design – case 1 17”, 800 x 60017”, 1024 x 768 The site at different resolutions looks different – fixed web design.

21. Actual Size for web Notice how the same monitor using different screen resolutions shows the same product in a different size. Notice how the same monitor using different screen resolutions shows the same product in a different size. The site just fits within a screen resolution of 800 x 600. The site just fits within a screen resolution of 800 x 600. This site was designed with users who have a minimum resolution of 800 x 600 in mind. This site was designed with users who have a minimum resolution of 800 x 600 in mind.

22. Actual Size for web In fact the Website is has 760 x 420 resolution (targeted for an audience who uses 800 x 600 ). In fact the Website is has 760 x 420 resolution (targeted for an audience who uses 800 x 600 ). The reason for this is because when people look at Websites, they need to use an interpreter – a Web browser. The reason for this is because when people look at Websites, they need to use an interpreter – a Web browser. This leaves room for the browser ’ s own menus, scroll bars, etc. This leaves room for the browser ’ s own menus, scroll bars, etc.

23. Actual Size for web Actual available height for the site before the user needs to scroll This is known as Screen Estate 800 pixels

24. Actual Size for web Since the displayable space is not fixed, this means a lot of space might be wasted on fixed-size designs (static design) Since the displayable space is not fixed, this means a lot of space might be wasted on fixed-size designs (static design) Wasted Screen Estate

25. Actual Size for web Iphone 4 vs Galaxy S Iphone 4 vs Galaxy S Wasted Space

26. Fixed Web Design – case 2 17 ” monitor at 800 x 600 screen resolution 17 ” monitor at 800 x 600 screen resolution

27. Fixed Web Design – case 2 17 ” monitor at 1280x1024 screen resolution 17 ” monitor at 1280x1024 screen resolution

28. Fixed Web Design – case 2 17”, 800 x 60017”, 1280 x 1024 The site at different resolutions looks different – fixed web design.

29. Dynamic design for the Web Designers create fluid (dynamic) web designs that expand and contract according to the size of the browser. Designers create fluid (dynamic) web designs that expand and contract according to the size of the browser. This allows for optimized use of the available screen estate on any monitor at any resolution. This allows for optimized use of the available screen estate on any monitor at any resolution. Websites which use a fluid layout design include : Websites which use a fluid layout design include : 1. Amazon. Amazon 2. http://css-tricks.com/examples/PerfectFluidWidthLayout http://css-tricks.com/examples/PerfectFluidWidthLayout 3. http://flashtuts.s3.amazonaws.com/054_FluidWebDesign /easing/preview.html http://flashtuts.s3.amazonaws.com/054_FluidWebDesign /easing/preview.html http://flashtuts.s3.amazonaws.com/054_FluidWebDesign /easing/preview.html

30. Take a look at http://www.amazon.com http://www.amazon.comhttp://www.amazon.com Using a 19 ” monitor at 1024 x 768 : Using a 19 ” monitor at 1024 x 768 :

31. Using a 19 ” monitor at 1280 x 1024: Using a 19 ” monitor at 1280 x 1024: Dynamic design for the Web http://www.amazon.com http://www.amazon.comhttp://www.amazon.com

32. Dynamic design for the Web 19”, 1024 x 76819”, 1280 x 1024 The site at different resolutions looks and feels almost the same. This is an example of fluid web design.

33. Essential tools for optimizing the website appearance If you care about your readers and want them to be always able to read your site or blog conveniently in any monitor resolution, then you’ll be probably interested in this one. ViewLikeUs is a site that enables you to take a look on how your site’s appearance on different monitor resolutions.. ViewLikeUs

36. Variables - Monitor Imagine how many more variables in display sizes there are when we compare different monitor sizes! (15 ”, 19 ”, 21 ”, etc.). Imagine how many more variables in display sizes there are when we compare different monitor sizes! (15 ”, 19 ”, 21 ”, etc.). Fact: a 15 ” CRT (measured by the diagonal length of the screen and the border) is not the same size as a 15 ” LCD (measured by the diagonal length of the screen only) monitor! Fact: a 15 ” CRT (measured by the diagonal length of the screen and the border) is not the same size as a 15 ” LCD (measured by the diagonal length of the screen only) monitor!

37. Variables - Monitor A 15” CRT monitor A 15” LCD monitor

38. Variables - Fonts Another variable in web design is fonts. Another variable in web design is fonts. A website does not normally embed fonts. A website does not normally embed fonts. This means that if you design your site using a very rare font (e.g., Barrakuda), if the viewers ’ computer does not have the same font installed, they will not see the site the same way it was designed. This means that if you design your site using a very rare font (e.g., Barrakuda), if the viewers ’ computer does not have the same font installed, they will not see the site the same way it was designed.

39. Variables - Fonts The site was originally designed to look like this: The site was originally designed to look like this: Barrakuda font

40. Variables - Fonts If the viewer ’ s device does not have the Barrakuda font: If the viewer ’ s device does not have the Barrakuda font: Auto-replaced with an available font

41. Variables - Fonts There are two possible solutions to this: There are two possible solutions to this: Use commonly available fonts (e.g., Arial, Courier, Times, etc.)Use commonly available fonts (e.g., Arial, Courier, Times, etc.) Use a graphic to display the textUse a graphic to display the text

42. Variables – Plug-ins Another variable factor on the web is the availability of a plug-in on a viewer ’ s device. Another variable factor on the web is the availability of a plug-in on a viewer ’ s device. A plug-in is like a self-contained modification or enhancement to the browser that gives the browser the ability to load certain programs. A plug-in is like a self-contained modification or enhancement to the browser that gives the browser the ability to load certain programs. You may think of a plug-in like the tools for a carpenter. You may think of a plug-in like the tools for a carpenter.

43. iphone don’t support Flash

44. iPad don’t support Flash

45. Suddenly, Apple announced

46. Variables – Plug-ins One of the most common plug-ins is the Adobe Flash Player. One of the most common plug-ins is the Adobe Flash Player. A lot of Websites have Flash animations. A lot of Websites have Flash animations. Only if a user ’ s browser has the Flash plug-in installed on their devices can they see these animations. Only if a user ’ s browser has the Flash plug-in installed on their devices can they see these animations. What if the full website is made in Flash like http://www.2advanced.com ? What if the full website is made in Flash like http://www.2advanced.com ?http://www.2advanced.com

47. Variables – Plug-ins If the user has the Flash plug-in: If the user has the Flash plug-in:

48. Variables – Plug-ins If the user does not have the plug-in: If the user does not have the plug-in:

49. Versions of Plug-ins Another factor that affects plug-ins is the version of the plug-in. Another factor that affects plug-ins is the version of the plug-in. For example, the www.2advanced.com website requires the user to have version 6 (or above) of the Flash Player. For example, the www.2advanced.com website requires the user to have version 6 (or above) of the Flash Player.www.2advanced.com

50. Versions of Plug-ins If the user has the Flash 10 Player plug-in: If the user has the Flash 10 Player plug-in:

51. Versions of Plug-ins If the user has the Flash 5 Player plug-in: If the user has the Flash 5 Player plug-in:

52. Versions of Plug-ins Not every user immediately updates their plug-ins when a newer version comes out. Not every user immediately updates their plug-ins when a newer version comes out. It is important to make a decision: It is important to make a decision: Design using the latest technology and risk losing potential viewers because they can ’ t see the site (if they do not install the newer plug- in).Design using the latest technology and risk losing potential viewers because they can ’ t see the site (if they do not install the newer plug- in). Design using older but more common technology so most visitors will have no problem seeing the site.Design using older but more common technology so most visitors will have no problem seeing the site.

53. Other common plug-ins that a lot of Websites take advantage of are: Other common plug-ins that a lot of Websites take advantage of are: Apple QuicktimeApple Quicktime RealplayerRealplayer Windows Media PlayerWindows Media Player Adobe Acrobat ReaderAdobe Acrobat Reader Since the user might not have the plug-in required, it is common for Websites to have a link to the plug-in download page. Since the user might not have the plug-in required, it is common for Websites to have a link to the plug-in download page. Plug-ins

54. Get Plug-ins The Website below not only tells you what plug-in is required, but also gives you a link to where you can download it. The Website below not only tells you what plug-in is required, but also gives you a link to where you can download it.