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

Slides:



Advertisements
Similar presentations
Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.
Advertisements

2.02F Publishing Animated Videos 2.02 Develop Computer Animations.
PBA Front-End Programming Responsive Design. Is there such a thing as a ”typical user” of our website…? With regards to – Screen resolution – Bandwidth.
Principles of Web Design 5th Edition
1 Introduction to Computer Science بسم الله الرحمن الرحيم MULTIMEDIA LEVEL -9 King Khalid University Kingdom of Saudi Arabia Ministry of Higher Education.
 Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more.  Multimedia comes.
Website design basics QUME Learning objectives Understand the basic elements of a Web page and how it is produced Be aware of different approaches.
XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
The Power of Tables They aren't just for sitting stuff on anymore...
HTML Introduction HTML
Chapter 1 Understanding the Web Design Environment
Create a Web Site with Frames
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.
Lesson 46: Using Information From the Web copy and paste information from a Web site print a Web page download information from a Web site customize Web.
Lesson 46: Using Information From the Web copy and paste information from a Web site print a Web page download information from a Web site customize Web.
Introduction to Graphic Arts Technology PRINT Versus WEB.
Chapter 1 Variables in the Web Design Environment.
Chapter 1 Variables in the Web Design Environment
Principles of Web Design 6 th Edition Chapter 2 – Web Site Design Principles.
Basic Web Design. Technology is a tool  FIRST, understand how people actually interact with each other and with the information in their lives, in all.
Introduction to Interactive Media 06: Text: Static Interactive Media Component.
Digital Media SM1001 Digital Media, Semester A School of Creative Media © Week 08, 2010.
T9-1 Announcements Assignments will be submitted in a group of two students Talk to your fellow students and make a group with another student (by Sept.
Web Site Design Principles
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
2.02G Publishing Animated Videos 2.02 Develop Computer Animations.
Using Dreamweaver Web Page Design. Introduction to Web Page Design Developing a New Site Building a web site involves creating individual pages and linking.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Understanding the Web Design Environment. External factors that affect Web design Many variables affect how Web pages appear New screen resolutions Wide-screen.
An Introduction To Websites With a little of help from “WebPages That Suck.
Web Page Design Principles
Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers.
Microsoft FrontPage 2003 Illustrated Complete Finalizing a Web Site.
Web Design School Website Best Practices A Balance Between Professionalism and Creativity Professiona l.
Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.
Introduction to Interactive Media Interactive Media Components: Text.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Digital Media Exam Review SM1001 Digital Media, Semester A, 2011 School of Creative Media © Week 13, 2011.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Greendale Carpets Ad. Generator: A Friendly Guide Version 0.2.
Building an Effective Website. Start with a plan  Have clear goal and design your entire site with those goals in mind.  Research and develop a sketch.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
Adobe Photoshop CS5 – Illustrated Unit A: Getting Started with Photoshop CS5.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Fonts. Choosing Fonts How text looks on our web pages is a major component of the overall appearance of our site. We need to choose our text fonts carefully,
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
Thực hiện: D3 GVLT: BROWERS. Browser Compatibility I Check the compatibility II Tools III.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Learning Aim B.  In this section, you will consider the resources necessary for designing your website.  You will also think about any constraints that.
Adobe Photoshop CS4 – Illustrated Unit A: Getting Started with Photoshop CS4.
Adobe Flash Professional CS5 – Illustrated Unit E: Optimizing and Publishing a Movie.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
Digital Media Exam Review SM1001 Digital Media, Semester A, 2009 School of Creative Media © Week 13, 2010.
A gentle introduction to Bootstrap TDAP Jeremy Shafer Department of MIS Fox School of Business Temple University Spring
Photoshop CS6 – Nelson Unit 3: Photoshop CS6. Objectives Define photo editing software Start Photoshop and view the workspace Use the Zoom tool and the.
Fonts.
Getting Started with Adobe Photoshop CS6
Introduction to Layouts
Getting Started with unitedstreaming
2.02G Publishing Animated Videos
2.02F Publishing Animated Videos
Fonts.
WEB DESIGN FOR MULTIPLE SCREENS
Introduction to Layouts
Presentation transcript:

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

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).

Visible Color Range

Color Relativity (illusion)

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

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 ).

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

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.

Design for print

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

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.

Design for the web

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.

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

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).

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

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:

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

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

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

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.

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.

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

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

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

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

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

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

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 /easing/preview.html /easing/preview.html /easing/preview.html

Take a look at Using a 19 ” monitor at 1024 x 768 : Using a 19 ” monitor at 1024 x 768 :

Using a 19 ” monitor at 1280 x 1024: Using a 19 ” monitor at 1280 x 1024: Dynamic design for the Web

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.

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

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!

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

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.

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

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

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

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.

iphone don’t support Flash

iPad don’t support Flash

Suddenly, Apple announced

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 ? What if the full website is made in Flash like ?

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

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

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 website requires the user to have version 6 (or above) of the Flash Player. For example, the website requires the user to have version 6 (or above) of the Flash Player.

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

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

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.

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

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.