Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)

Transcription

1 Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD)

2 323.1 Design and Plan a Web site (7 hrs) Web Authoring Tool List and Use various features to make a Website Web content and structure of site Apply the principles of Web Design

3 Text Element features of a web design Background does not interrupt the text Text is big enough to read, but not too big The hierarchy of information is perfectly clear Columns of text are narrower than in a book to make reading easier on the screen

4 Element features of a web Navigation design (cont) Navigation buttons and bars are easy to understand and use Navigation is consistent throughout web site Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on Frames, if used, are not obtrusive A large site has an index or site map

5 Element features of a web design (cont) Links Link colors coordinate with page colors Links are underlined so they are instantly clear to the visitor Graphics Buttons are not big and dorky Every graphic has an alt label Every graphic link has a matching text link Graphics and backgrounds use browser-safe colors Animated graphics turn off by themselves

6 Element features of a web design (cont) General Design Pages download quickly First page and home page fit into 800 x 600 pixel space All of the other pages have the immediate visual impact within 800 x 600 pixels Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

7 Principles of WebDesign Easy to read Easy to navigate Loading speed (is website quick to load?) User friendly Consistency Good, original content Simplicity

8 Easy to read If background colors or images are used, the text on top of the background should be in a color that can easily be seen. Use a color scheme that contrasts and complements and is pleasing to the eye. White space between images and sections of text make a page easier to view. Use a font that is large and easy to read.

9 Easy to navigate User should be able to find the information they are looking for without hassle and frustration The site's navigation buttons should be grouped together If image links are used, text links should also be provided for those people who have images turned off on their browser or are using an older browser that doesn't support images.

10 Loading speed Graphics and sounds add download time to a Web page. Use them sparingly. Don't make users wait too long for your site to load or they will click away and probably won't return. Use CSS styles in place of graphics where possible.

11 User-friendly Make sure website is easy to navigate by user. To make your site user friendly, make sure the resolutions and file sizes of images are not too large and make sure your site is easy to get around. An experienced Web designer should be able to help you settle on a design that is not only compelling, but easy to use.

12 Consistency Site layout is important for usability. Use a consistent layout and repeat certain elements throughout the site. Keep your design consistent from page to page to avoid confusion.

13 Good, original content Content is king in the web world. People visit websites for the primary purpose of finding information, so make sure you deliver. Website content should be unique and up to date. Fresh content will keep users and search engines coming back for more.

14 Simplicity The best way to attract users to keep exploring your site is through valuable content, good organization and attractive design. Keep your site simple and well organized. Too much of a good design is a bad design

15 Simplicity (cont) Keep it simple and allow for adequate white space. Uncluttered layouts allow users to focus on your message. Don't overload your site with overly complex design, animation, or other effects just to impress your viewers.

16 Simplicity (cont) Be sure your colors contrast well and your text doesn t require a magnifying glass to read. Breaking up text into subheads and bullet points will improve the layout of the page and make the text more readable. Remember simple, professional design is much more effective than flashy, overcrowded design.

17

18 Organizing Content After brainstorming the kinds of elements you want on the web site, you must organize them into categories or logical groupings of information. There are several ways to accomplish this: Cards on the floor. Write each element on a piece of paper or index card. Then move the cards around until you have created categories. White board with colored markers. If you have a large white board available, you can use colored markers to set up categories and group elements using different colors.

19 Organizing Content (cont) Concept mapping software. You can also organize elements using concept mapping software such as Inspiration. The software will allow you to easily move elements around on the screen as you brainstorm and experiment with various arrangements of site content.

20 Set Up Your Navigation To help avoid frustration on the part of your users by putting thought and good design principles into effect in your navigation interface. The navigational structure is the means by which the user moves through the site. Examples of navigation aids you may want to consider are breadcrumbs, tabs, and sidebar menus. Breadcrumbs. Breadcrumbs are a series of keywords that progressively link broad categories to more specific ones. If users want to move up several categories, all they have to do is click on the keyword they want. Example: Home > Students > Clubs > Chess

21 Set Up Your Navigation (cont) Tabs. Some sites use tabs that look like the tabs on a file folder to identify major sections of the site. Typically, a tabbed interface indicates parallel categories, such as six different grade levels. Sidebar menus. Sidebar menus are usually placed on the left of the screen and have a listing of the site topics. Such menus are popular because they are easy to use and can be as detailed as necessary.

22 Set Up Your Navigation (cont) Tips for Navigational Structure: 1. Avoid orphan pages, which have no links back to other places in the site. 2. Place the navigation in a consistent place on each page so the user does not become confused. 3. Have others evaluate your proposed navigational interface during the development process.

23 Navigation Types Sidebar Menu

24 Navigation Types (cont) Tabs Breadcrumbs

25 Summary Text, navigation, links, graphics and design are elements that makes up a website Principles of web design include: easy to read, easy to navigate, loading speed, user friendly, consistency, good, original content, & simplicity. Ways to organize content: Cards on the floor, White board with colored markers, Concept mapping software. Navigation types: tabs, breadcrumbs & sidebar menu

26 References ics-of-a-good-website/

27