principles of wd

Category: Education

Presentation Description

No description available.


Presentation Transcript

Web Design Principles:

Web Design Principles

Chapter Objectives:

Chapter Objectives After completing this chapter, students should be able to:   State the design principles for the computer medium Develop a standard look and feel for a Web site Properly utilize white space Understand the importance of active white space Focus design on the user Evaluate Web sites using screen-oriented design principles Find an appropriate balance of information for a Web site Understand the difference print media and information displayed on a computer screen

Craft the Look and Feel :

Craft the Look and Feel The look and feel is the way the Web site works and the personality that it conveys to the user. The web designer should test the design of a site in order to ensure that the greatest number of users can easily and reliably navigate within the site.

Problems in the web design:

Problems in the web design The loud colors and the text style used in the site are hurting to the eyes and do not imply what the site is all about. It will cause the users to navigate away from the website.

Portability in design:

Portability in design Web site should be consistently displayed as it was intended across different browsers, operating systems, and computer platforms. many designers make the mistake of testing their Web pages in only one environment, assuming that their pages will look the same to all of their users. It is a grave mistake, as different Web browsers decode the underlying HTML of a Web site differently, often with very noticeable changes. The way to avoid the problem is to make the Web site design portable. This can be done by viewing Web pages in the browsers that user are likely to have, using popular operating systems, and checking the site on more than one computer platform to ensure accessibility to the greatest number of potential users.

Scope for portability:

Scope for portability The user is watching serial on their new Internet TV and in addition decides to check his email which the user opens in a sidebar and views simultaneously with the program. The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed.

portable Web :

portable Web The website should be available to as wide an audience as possible; The website should contain the same content wherever it is viewed, where feasible; The website’s structure should be the same wherever it is viewed; The content should be displayed in a manner that is appropriate to its environment.

PowerPoint Presentation:

YouTube’s standard home page.

Youtube’s mobile home page:

Youtube’s mobile home page

Content For The Portable Web:

Content For The Portable Web Understand What’s Important There may not be room for complex navigation, especially on smaller screens, so keep it simple. Create a Solid Information Hierarchy Structuring our content is important, for readability. Keep Content Available Provide as much content as is feasible. Remove Superfluous images Remove Unsupported file formats Remove Unnecessary text Make Your Content Search-Engine Friendly search engines are still a massive source of traffic. Keeping your content formatted for easy retrieval is a must.

Design for Low Bandwidth:

Design for Low Bandwidth Web pages need to be accessible to users with a variety of different connection speeds. The most important point to make in this subsection is that if a Web page is overloaded with graphics or contains large files or animations that need to load, users are likely to leave the site before they ever get to the content. Always design a site with consideration for users with lower bandwidth. The easiest way around this issue is to design pages that are less graphic intensive, containing graphics that will download quickly for all users regardless of connection speeds.

PowerPoint Presentation:


Problems Slow load time Users are impatient Not all the images are available

Clear Presentation and Easy Access to Your Information:

Clear Presentation and Easy Access to Your Information An important point to make is that the presentation and organization of information in a Web site is the single most important factor determining the success. It is also important to point out that every visitor to a Web site is different. Some visitors will be randomly browsing while others are seeking specific information. A good designer must anticipate and plan for the actions of both types of visitor. Information must be easy to read and easy to find. The use of too many fonts, colors, and lengthy passages of text should be avoided at all costs since they are very distracting and confusing. Text should be broken into reasonable segments. A good suggestion from this subsection is that a viable alternative to providing endlessly scrolling pages is to break up information into smaller chunks and link them with bookmarks (hyperlinks within a Web page).


Problems Overloading of information.

Design for the whole site:

Design for the whole site

PowerPoint Presentation:

This section discusses the importance of consistency between Web pages within a Web site. A designer’s choice of colors, fonts, graphics, and page layout should create a visual theme to the user that gives them a general idea of the content of the site. The theme should be indicative of the impression that the designer or organization wants to portray. As the whole site is being designed, each individual page within the site must be considered.

Create Smooth Transitions:

Create Smooth Transitions illustrates the importance of having a unified look within a site and creating smooth transitions between pages. This will prevent the user from becoming “lost” in the site, wondering if they are still in the original site or accidentally clicked somewhere and left it. The company logos should remain in the same place on all pages for consistency.

Use a Grid to Provide Visual Structure:

Use a Grid to Provide Visual Structure using a grid , which is a conceptual layout device that organizes the page into columns and rows. In HTML, the best way to create a grid and a columnar format is to use tables. By using tables and turning the borders off, the visitor to a Web site will not see a table, but only a coherent, well-structured page.

Use of White space in design:

Use of White space in design white space is the spacing between different elements, whether it be between the actual sections of the page, or right down to the space between letters. In most cases, we use white space (also referred to as negative space) to space out content for easier, and ultimately faster, scanning of a page without the need to put in specific separating elements.

PowerPoint Presentation:

Google, as you can see, is a big advocate of white space in their designs. The search engine is widely regarded to have a clean design since the focus is on the main aim of the page, without massive dedication to other areas 

Use of Active White Space:

Use of Active White Space A lack of active white space creates the impression of information overload and confuses content presentation. Too much white space, on the other hand, gives the impression that the site lacks content. It is also noted that the important, most current information should be presented in the center of a viewer’s attention.

Improved readability:

Improved readability The most obvious benefit of whitespace is that it increases legibility.

Higher comprehension :

Higher comprehension Believe it or not whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%.

Increased attention:

Increased attention Whitespace can also be a powerful way of drawing the users attention to a particular screen element. To a non designer the most obvious way to make something stand out is to make it bigger. However often surrounding the item with whitespace can be just as effective.

Sophistication and Luxury :

Sophistication and Luxury Finally the use of whitespace can be a powerful way to communicate elegance, openness and freshness. Obviously this isn’t always the design look and feel you wish to communicate. However when it is, you cannot do better than having loads of whitespace.


Design for the user:

Design for the user

PowerPoint Presentation:

Keep in mind the user Why has the user come to your Web site? What type of information does the user want? Is the site for information, entertainment, ..?

Design for Interaction :

Design for Interaction Think about how the user will interact with the Web page If the page is a collection of links, interaction will be clicking on the content and scrolling Pointing to graphics and clicking on images to reach another page. Design page into separate groups, e.g., links for pages of physics, maths, comp sc., …

Animation effects:

Animation effects One great way to do interaction with user is with animation. The human eye can  notice movement  fairly well, especially if the rest of the page is static. Animations can be implemented with JavaScript and are a nice way to provide visual feedback. adding too many animations could cause interface friction because the speed with which the user performs each action will be slowed down by the duration of the animation.

Enable keyboard shortcuts in your Web application:

Enable keyboard shortcuts in your Web application One of the techniques used to achieve this is the integration of keyboard shortcuts or navigation .

Upgrade options from the account page :

Upgrade options from the account page Most users like to try the basic version of an application first to get a better sense of what it offers and how it works. It’s the designer’s task to make sure this transition is as simple as possible.

Use color-coded lists :

Use color-coded lists Many applications use color coding to help  visually distinguish between different types of entries . This way, the list becomes easily scannable.

 Offer personalization options :

 Offer personalization options Many applications provide custom workspaces for people and businesses. Personalization can help make your users  feel more at home . This can be done by giving users options to customize the look and feel of the application interface. Let them select the color theme, the link colors, the background and so on. Even a small amount of customization will allow your users to make their pages their own.

Display help messages that attract the eye :

Display help messages that attract the eye you can provide short  help messages to get people started . One important thing to note is that you need to attract their attention  to this message.

Design feedback messages carefully :

Design feedback messages carefully Pretty much every application has some form of feedback messages. These are little messages that pop out when there is an error or warning or perhaps when an action is completed successfully. Designing these messages correctly is important because you don’t want to confuse your users. A good practice here is to do a couple of things. First, color code the different types of messages. Messages that notify users of successful actions are usually colored green. These employ the traffic-light analogy of green meaning “Go.” Warning and error messages are colored yellow. Same traffic-light analogy here: yellow means slow down and wait. You can also distinguish between warning messages and error messages by coloring errors red and warnings yellow.

Short sign-up forms :

Short sign-up forms The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To minimize the barrier, we’ve got to speed up the process. This means  removing all optional elements  from the form and leaving only the core essentials. The optional stuff can be filled in later.

Design for Location :

Design for Location talks about the relative areas of screen importance. The center of the screen is prime property and is the most important viewing area. The next most important area is the top of the screen, then the right edge of the screen, followed by the bottom of the screen and finally, the left edge of the screen .

PowerPoint Presentation:

Guide the User’s Eye A user may scan a page in many ways. One of the ways is to scan a page from left to right, and then down to next line

Grids for Web page layouts :

Grids for Web page layouts Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables for Web-page presentation. However, other fields of layout design work with grids, and these form the basis for the structure of page designs .

Grid layouts:

Grid layouts Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components.

Advantages of having grid layout:

Advantages of having grid layout Instead of arbitrarily picking column sizes, grids enable you to create a common visual language throughout an entire Web site, rather than deciding things on a page-by-page basis. Components relate to each other, which makes it easier for users to scan content and develop familiarity with it,

authorStream Live Help