Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Interactive Elements

Let’s talk about how to create ways for users to identify interactive elements.

We should provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming for interactive elements are used consistently throughout the website.

For example, links should always look different from the rest of the text that is not a clickable link. There should also be several different states of interaction that look visually different. In this example, when the mouse hovers over the link, it has a light yellow background tint; when this link is activated using the keyboard, the background color changes to a brighter yellow; when tis link is clicked on a desktop or touched on a mobile device, the background changes to purple.

This is just an example of how designers can use their power to differentiate interactive states clearly so that users are not confused at any point. One might argue that the style shown in this example is a little outdated but once you understand the theory, you’ll have the ability to use your creativity to come up with more beautiful interactive state designs.

Scroll to Top