Web design is the creation and visual design of documents displayed on the World Wide Web. It is important to create engaging and visually appealing websites to attract and retain customers. Many factors must be considered when designing a website. This video will explore the steps in Web design and the programming languages needed to create a dynamic and interactive website.

Jill has taught college-level business and IT. She has a Doctorate in Business Administration and an M.S. in Information Technology & Leadership.

Web design is the creation and visual design of documents displayed on the World Wide Web. It is important to create engaging and visually appealing websites to attract and retain customers. Many factors must be considered when designing a website. This video will explore the steps in Web design and the programming languages needed to create a dynamic and interactive website.

Website Design Defined

How many websites do you visit daily? Have you ever thought about creating your own website? Many people and organizations create websites to share information, educate, and buy and sell products and services.

Web design is the creation and visual design of documents displayed on the World Wide Web. Organizations rely on websites with engaging and visually stimulating content to attract and retain consumers. The quality of the Web design is a key factor when creating or revising a website. Anyone preparing to develop a website must consider several factors to plan for success. What factors do you think would be important? Consider some of the websites you have visited recently. Were there things that you really liked or disliked about those websites?

Planning Your Website

Building a website is like building a house. The first step requires proper planning. With a house, you will need an architect to design the home, a contractor to build the home and an interior designer to decorate the home. While you can build a website on your own, many organizations hire professionals who have the skills and talent to make an appealing and well-functioning website. To build a website, you will need a creative director who acts as an architect, a Web director who acts as a contractor, and a content director who acts as the interior designer.

When planning a website, you must know your audience and design a website that will suit their needs, interests, and viewing preferences. When designing websites, it is important to keep in mind that they will be viewed on a computer screen. They should be designed appropriately for that medium. Content should be organized in such a way that it is meaningful and easy to navigate. It is important to leverage the power of hypertext. One way to accomplish this is by providing links within the content of webpages for users to create their own paths to information.

Website designers must consider users with different Web browsers, operating systems, and computer platforms to ensure accessibility. Pages should also be planned with connection speeds in mind. It's beneficial to design for low bandwidth. Bandwidth is the amount of data that can be transmitted in a set period of time. No one wants to wait for a page to slowly download due to large graphics or complicated animations. In fact, the average user will only wait 10-20 seconds for a page to load before navigating away. That could be a potential customer lost to a competitor!

Building Your Website's Foundation

Once the planning is complete and the architectural plans are finalized, building can begin. Whether working on a new home or a new website, we start with the foundation. Web programming languages like HTML, XML, and XHTML provide the tools to build the foundation just as framing provides the basic yet essential structure in which to build and design the entire house.

An example of the HTML code for a website.

Hypertext Markup Language (HTML) is a programming tool that uses hypertext to establish dynamic links to other documents. It is known as the Web's programming language and provides a general structure for creating webpages. All webpages are actually HTML files. HTML documents are simply text documents that contain the content of your webpage as well as special instructions called tags. Tags provide instructions on how to display text or graphics and control user inputs. Tags are enclosed in brackets: < >. Typically, there is a starting and ending tag around text. For example, if we wanted to bold a heading, our starting tag is a 'b' in brackets followed by the heading and concluding with the end tag '/b' in brackets: <b>'Heading'</b>. All HTML documents begin with HTML in brackets and end with the forward slash and HTML in brackets: <html> and </html>. These tags tell the Web browser that the content between the tags should be assembled into an HTML document. There are programs such as Dreamweaver designed to help you create HTML code for a webpage. The application provides a graphical user interface that enables one to click, drag and copy parts of the webpage. The application generates the HTML code for the user. But if you're interested in actually learning HTML, it is probably better to open a simple text editor program, like Notepad, and type the HTML code yourself.

Extensible Markup Language (XML) is a markup programming language like HTML without predefined elements. It cannot replace HTML but complements it. Whereas HTML governs the appearance of information in a Web browser, XML complements HTML by adding tags to describe data. XML is what we call a metalanguage. Metalanguage means about a language, or in other words, XML allows a user to describe a markup language to meet specific needs. XML allows you to create or invent customized tags and attributes that suit your needs for the type of document you are writing. XML provides greater flexibility for adding new elements and attributes that will extend HTML capabilities. It also provides the ability to design new browsers or applications.

HTML was first introduced in 1993 as the Internet standard. Over the years, many versions have been released with added features. Today, Extensible Hypertext Markup Language (XHTML) is replacing HTML as the Internet standard. XHTML is a markup programming language that is similar to HTML but written using XML. Essentially, by using XHTML, you are writing XML code with restrictions based on a set of predetermined elements. It combines the best parts of HTML and XML to create a powerful and flexible programming language. XHTML is basically a reformulation of HTML using XML syntax. The main difference between these programming languages is XHTML documents must be well formed or developed according to specific rules in order for them to be considered XHTML documents. XHTML is case sensitive, whereas HTML is not. XHTML works smoothly with database and workflow applications. XHTML makes it easier for designers to be creative and add new elements. It provides a more structured and conceptual way of thinking about content.

Decorating Your Website

Presentation is important since there is only one chance to make a good and lasting impression. Consumers will make assumptions about the business and its products or services based on the website. Think about buying a house. Not only is it important to have structural soundness, but you are also concerned about the outward appearance and the visual appeal. The way in which the house is laid out, the type of floors, the color on the walls, and even the shrubs outside can make a difference in how you feel about the house and its worth.

Two tools used in website design that can assist in decorating a website are cascading style sheets and JavaScript.

Cascading style sheets (CSS) use a simple style language that provides users with familiar desktop publishing terminology to alter the appearance of websites. CSS describes how webpages should look in a browser. You can think of CSS as the decorations for your house. Without any decorations, it is pretty bland and boring, but when you add décor it really spices up the environment and makes it more inviting. CSS was developed by the World Wide Web Consortium (W3C). It can control typography, colors, backgrounds and other design characteristics.

CSS uses syntax that is easy to read and write. It is composed of two parts: a selector and a declaration. The selector decides upon the element to which a rule is applied, while the declaration specifies exactly what should be done to that element. If you wanted to set your heading to purple, your style rule would look like: h1 {color: purple;}. 'H1' is the selector, and 'color: purple' is the declaration. The declaration may be broken down into two sections: the property and the value. The property is the quality or characteristic, such as color; the value is the precise specification of the property, such as purple. The style rules are housed in a style sheet. The style sheet is an external, stand-alone document, shared by several webpages. It conveniently controls styles throughout the website. An alternative is to contain a style sheet in a single webpage for that page's use only. CSS rules can be combined with HTML code. CSS must be used to render presentation information in XHTML.

JavaScript is a programming language designed to provide interactive Web content. It is an important component of webpage design. JavaScript is integrated within the HTML code and makes webpages dynamic. JavaScript contained within HTML code is often called script. JavaScript can take static HTML documents and make them interactive, thus improving the user experience. It enables the Web content to be changed once a page is loaded into a browser. This makes it possible for the webpage to interact with a user through forms and controls. JavaScript also provides animation and visual effects. JavaScript makes things happen on your webpage. JavaScript is to a webpage what hinges that allow doors to open and close or light switches that allow one to turn on and off the lights are to a house.

To create a visually appealing website, one must consider the layouts, fonts and colors that will appear on the screen. When designing your website, use unifying themes and structures that hold the pages together. Visitors will like the consistency and familiarity that the unified theme provides. Consider using a grid or conceptual layout device to organize the webpage into columns and rows for a polished look. The way text is presented is another important component to website design. You will want to limit the number of fonts used, adequately size your font, leave enough white space and use contrasting colors such as a light background with dark text. White space makes up the blank areas on your page. White space can be used deliberately to guide readers and define areas of the page.

Finalizing Your Website

JavaScript can bring a website alive with animation and interactive forms.

After planning, building, and decorating, a final inspection is required. Just as a house is inspected to ensure it is up to code and completed according to the specifications, a website must be inspected and reviewed. It should meet the specifications created during the planning phase. It must be accurate in terms of content. It must be visually appealing, engaging and easy to navigate. The website should be tested on multiple Web browsers, such as Internet Explorer, Mozilla Firefox, Google Chrome, or Safari, to ensure it looks and functions as intended. The Website should be checked for functionality on multiple platforms, such as Windows and Mac. The client will review the website and ensure it meets his or her satisfaction. Any changes or corrections that need to be made will be done at this point. Once the website is approved, it is launched on the World Wide Web.

Lesson Summary

To summarize, Web design is the creation and visual design of documents displayed on the World Wide Web. The first step requires proper planning. This includes the layout, viewing medium, ease of navigation, use of hypertext, and bandwidth considerations.

Next is the building phase. Websites are constructed with HTML, XML, and XHTML. Hypertext Markup Language (HTML) is a programming tool that uses hypertext to establish dynamic links to other documents. Extensible Markup Language (XML) is a markup programming language like HTML without predefined elements. XHTML is a markup programming language that is similar to HTML but written using XML.

Once the structure of the website is complete, it is time for the design and decorating portion. This includes the information design, unifying themes, use of white space, and overall appearance and appeal. We rely upon CSS and JavaScript to decorate webpages. Cascading Style Sheets (CSS) use a simple style language that provides users with familiar desktop publishing terminology to alter the appearance of a webpage. JavaScript is a programming language designed to provide interactive Web content. Lastly, testing and review occur to ensure accuracy. Then, the website is launched.

Lesson Objectives

After watching this lesson, you should be able to:

Define web design

Identify the steps needed to design a website

Distinguish between the different programming languages used to create a website

Become a Study.com member and start learning now.

Summary:

Earning College Credit

Did you know… We have over 95 college
courses that prepare you to earn
credit by exam that is accepted by over 2,000 colleges and universities. You can test out of the
first two years of college and save thousands off your degree. Anyone can earn
credit-by-exam regardless of age or education level.