Introduction to Elements of Web Design: WYSIWYG WYSIWYG. What You See Is What You Get

Transcription

1 Introduction to Elements of Web Design: WYSIWYG WYSIWYG What You See Is What You Get There are many WYSIWYG Web design programs available, including Dreamweaver and WIX. These programs generate the HTML code in the background while you create the web page graphically.

2 Introduction to Elements of Web Design: HTML HTML HyperText Markup Language is the standard language utilized for the creation of web pages. WIX and other WYSIWYG editors create the HTML code in the background. Here is some HTML code from the Coe.edu web page:

3 Introduction to Elements of Web Design: URL URL URL is an acronym for Uniform Resource Locator and is a reference (or address) to a resource on the Internet. It has two components: Protocol Identifier, the first part and Resource Name, the second part etc. In a sentence: Can you me the URL of your new website?

4 Introduction to Elements of Web Design: Above the Fold Above the Fold Above the Fold This is the area of the web page that is visible when the page loads before any scrolling by the user. When the user scrolls down, he/she is viewing content below-the-fold, or outside-the-fold. The most important information must be above the fold.

5 Introduction to Elements of Web Design: Masthead Masthead (Sometimes known as Header ) The masthead is the top area of a web page that contains important identification information, like the business name, slogan, navigation buttons, and the shopping cart button. You have a chance to establish a sense of brand in this area viewers should be able to get a strong idea of what the business is about. Building the masthead with WIX is going to be fun! WIX has a great interface. The Apple Masthead Area

6 Introduction to Elements of Web Design: Font Faces Sans-Serif versus Serif Font Faces Sans-Serif font faces are plain and do not have decorations. These may be easier to read on a computer screen. W E B Serif font faces have decorations. These may be used to draw attention to certain areas of the Web page, like the business name and slogan. W E B WEB

7 ( One-To-One ) It is typically beneficial to all parties involved in e-commerce if the end-user is treated as a unique individual as opposed to treating customers as part of a group of similar people. Try to establish a one-to-one relationship with your customers. One way you can do this is by providing special modifications to products, like the inseam and hemming options the B2C Lands End website provides to customers (this is actually quite rare online):

8 Site Structure, Sitemap Site Structure, Sitemap Organizing the link structure of the website is very important. Begin this by making sketches or by using Microsoft Word SmartArt. This is also called the Sitemap.

9 Wireframes Wireframes Wireframes are blueprints for the design of your website. It helps you visualize the layout of the page before it is made, and decide where to put important content. A hand-drawn sketch is usually completed, or Microsoft Word can be used. Let s try creating a Wireframe for ESPN.com with Word

10 Research Research The most common form research takes is asking the client to name web sites that he or she likes and dislikes. Questioning the client further, asking why they like or dislike those web sites or elements of those sites is even more helpful. - Elliot Jay Stocks, Sexy Web Design (Book)

11 In Class Group Activity: Research Directions In groups of 2 or 3 look online for wonderfully designed websites. After a brief discussion, select one to share with the class. Tell us why do you like the website? Pick someone in the group to tell us about the website. Use details in your response. Sharing will be done seated at your computer. I will bring your computer screen up on the front screen, and you can use the cursor to point to specific aspects of the website.