23
WEB DESIGN Basic Elements

Web Design

  • Upload
    karim

  • View
    23

  • Download
    0

Embed Size (px)

DESCRIPTION

Basic Elements. Web Design. - PowerPoint PPT Presentation

Citation preview

Page 1: Web Design

WEB DESIGNBasic Elements

Page 2: Web Design

WHAT IS WEB DESIGN Design is the process of collecting

ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific purpose. Web design is a similar process of creation, with the intention of presenting the content on electronic web pages, which the end-users can access through the internet with the help of a web browser.

Page 3: Web Design

ELEMENTS OF WEB DESIGN Web design uses many of the same key visual

elements as all types of design such as: Layout: This is the way the graphics, ads and text are

arranged. In the web world, a key goal is to help the view find the information they seek at a glance. This includes maintaining the balance, consistency, and integrity of the design.

Color: The choice of colors depends on the purpose and clientele; it could be simple black-and-white to multi-colored design, conveying the personality of a person or the brand of an organization, using web-safe colors.

Page 4: Web Design

ELEMENTS OF WEB DESIGN CONTINUED Graphics: Graphics can include logos, photos,

clipart or icons, all of which enhance the web design. For user friendliness, these need to be placed appropriately, working with the color and content of the web page, while not making it too congested or slow to load.

Fonts: The use of various fonts can enhance a website design. Most web browsers can only read a select number of fonts, known as "web-safe fonts", so your designer will generally work within this widely accepted group.

Page 5: Web Design

ELEMENTS OF WEB DESIGN CONTINUED Content: Content and design can work

together to enhance the message of the site through visuals and text. Written text should always be relevant and useful, so as not to confuse the reader and to give them what they want so they will remain on the site. Content should be optimized for search engines and be of a suitable length, incorporating relevant keywords.

Page 6: Web Design

CREATING USER FRIENDLY WEB-DESIGN Besides the basic elements of web

design that make a site beautiful and visually compelling, a website must also always consider the end user. User-friendliness can be achieved by paying attention to the following factors.

Page 7: Web Design

FACTORS THAT INFLUENCE USER-FRIENDLINESS

Navigation: Site architecture, menus and other navigation tools in the web design must be created with consideration of how users browse and search. The goal is to help the user to move around the site with ease, efficiently finding the information they require.

Page 8: Web Design

FACTORS THAT INFLUENCE USER-FRIENDLINESS

Multimedia: Relevant video and audio stimuli in the design can help users to grasp the information, developing understanding in an easy and quick manner. This can encourage visitors to spend more time on the webpage.

Page 9: Web Design

FACTORS THAT INFLUENCE USER-FRIENDLINESS

Compatibility: Design the webpage, to perform equally well on different browsers and operating systems, to increase its viewing.

Page 10: Web Design

FACTORS THAT INFLUENCE USER-FRIENDLINESS

Technology: Advancements in technology give designers the freedom to add movement and innovation, allowing for web design that is always fresh, dynamic and professional.

Page 11: Web Design

FACTORS THAT INFLUENCE USER-FRIENDLINESS

Interactive: Increase active user participation and involvement, by adding comment boxes and opinion polls in the design. Convert users from visitors to clients with email forms and newsletter sign-ups.

Page 12: Web Design

10 USABILITY HEURISTICS FOR USER INTERFACE DESIGN

Page 13: Web Design

HEURISTICS The 10 most general principles for

interaction design are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.

Page 14: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 1

Visibility of system status The system should always keep users

informed about what is going on, through appropriate feedback within reasonable time.

Page 15: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 2

Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Page 16: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 3

User control and freedom Users often choose system functions by

mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Page 17: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 4

Consistency and standards Users should not have to wonder

whether different words, situations, or actions mean the same thing. Follow platform conventions.

Page 18: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 5

Error prevention Even better than good error messages

is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Page 19: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 6

Recognition rather than recall Minimize the user's memory load by

making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Page 20: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 7

Flexibility and efficiency of use Accelerators -- unseen by the novice

user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Page 21: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 8

Aesthetic and minimalist design Dialogues should not contain

information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Page 22: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 9

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Page 23: Web Design

USABILITY HEURISTICS FOR USER INTERFACE DESIGN # 10

Help and documentation Even though it is better if the system

can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.