Understanding Web Design & User Experience

Name: Understanding Web Design & User Experience
Author: Matthew Brown

In this chapter you’ll learn about input control design elements to include buttons, drop down menus, radio buttons, and sliders. This chapter will also cover…

Preview the first lesson free — get full access to all 6 lessons.

Request a demo Sign in

Course: On-Demand

Hello. In this chapter, we will be looking at web design from the perspective of user experience and design elements. User interface elements will be grouped into four categories. Input controls. These allow users to input information into the system. Navigational components, these allow users to move around your application or website. Informational components will allow the developer to share any information that is pertinent with the users. Containers allows you to hold related content together. We will start by looking at some of the more common input controls that all designers and developers should be aware of. The first of these are buttons. These are the most common form of user input that often are displayed as shapes with a label on them. This allows users to perform actions, such as save or submit. We then have check boxes, which allows users to make selections based on available options. Dropdown menus allow users to make selections from a list of items. Input fields, a place where users enter the text or content, like attachments into the system. And we also have radio buttons. These are circular elements that allow users to select among the options. And finally, we have slider controls used to allow the user to select a value out of a range of values. As we can see here, we have a simple page open in Notepad++ with some examples of just a few of the input controls that are possible. First, we have the text input, and this is just a text input for first name and last name. We're using the input type of text. If we have the ID first name or fname. And then the name is fname. All right? And then we have a label for last name and then we have an input for last name. And then we have also an input type of submit, which is my button. The next control we have on this page is the radio button. We have a simple paragraph that states what is your favorite programming language. We have an input type of radio. ID, HTML. Name, favorite language and value, HTML. We have another label for HTML. And we have another input radio button for CSS. And another input radio button for JavaScript. So when we run this, we'll see how that looks. The next control we have called out here is a checkbox with a question what mode of transportation do you have? A simple paragraph. But the type being used this time is checkbox and we have three values for the checkbox. We have vehicle one, which is I have a bike. I have vehicle two, I have a car. And vehicle three, I have a boat. And you can see the syntax with it. Then we have the dropdown list, which is label for cars. Choose a car is the label and then the options, we use the option tag. We have a Volvo, Saab, Fiat and Audi. And then the final control we have is a slider control. My input type is a range. ID's points and name is points. The minimum value is zero, the maximum value is 10. So now we will have run this and see what it actually looks like. Again, this is just a simple page where we have the input field for first name, an input field for last name, and then we have the Submit button. Because there's no code behind that submit button, it doesn't actually do anything. And then we have the radio buttons. What is your favorite programming language? And then we can see we can choose any of the buttons. And then we have the checkbox. What is your mode of transportation? I have a bike, I have a car, I have a boat? And I can choose any one of these check boxes or all of them. And then we have our dropdown, choose your car. Volvo, Saab, Fiat. And then we have our slider control. Minimum value of zero, maximum value of 10. Thanks for joining. In the next lesson, we will look at navigational components for design.

Beginner Provider : Matthew Brown 6 Lessons · 21m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In this chapter you’ll learn about input control design elements to include buttons, drop down menus, radio buttons, and sliders. This chapter will also cover the use of HTML containers to organize web page content as well as the elements of intuitive user interface design.

What You'll Learn

Create input control items on a website, including buttons, drop-down menus, radio buttons, and sliders
Control color, text, and styles for better web design
Implement navigational elements into a website
Use HTML containers to organize web page content
Design CTA buttons, primary action buttons, icons, image overlays, gradients, and error messages
Apply intuitive user interface design principles such as familiarity, consistency, and learnability

Key Takeaways

The chapter covers input control design elements including buttons, drop-down menus, radio buttons, and sliders.
HTML containers are used to organize web page content.
Intuitive user interface design draws on familiarity, consistency, and learnable, invisible design.
Design elements for user experience include colors, gradients, error messages, text styles, fonts, and image overlays.

Frequently Asked Questions

What will I learn in this chapter?

You will learn how to create input control items on a website, how to control color, text, and styles for better web design, and how to implement navigational elements into a website.

What design elements does this chapter cover?

It covers CTA buttons, primary action buttons, icons, image overlays, radio buttons, dropdown menus, colors, gradients, error messages, text styles, and fonts.

Does this chapter address user experience and interface design?

Yes. It covers the elements of intuitive user interface design, including familiarity, consistency, and learnable, invisible design.

What skills does this chapter help build?

It builds skills in HTML Components, HTML Controls, Interaction Design, Interface Design, User Interface (UI) Design, and Web UI Design.