What is Web Design?

Web design refers to the design of websites. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.

Play

Showvideo transcript

1. 00:00:00 –> 00:00:30Web design usually refers to the design of the user experience of websites. It’s not just about making a website on brand. It’s about crafting an unforgettable user experience that’s useful, accessible, usable and intuitive. A great web designer ensures that a website is easy to use and esthetically pleasing aligned with the user’s needs and responsive across all kinds of devices.
2. 00:00:30 –> 00:00:41The ultimate goal is to create a website that not only looks amazing, but also builds trust with the audience. It’s not just a digital storefront.

A web designer works on a website’s appearance, layout, and, in some cases, content.

• Appearance relates to the colors, typography, and images used.
• Layout refers to how information is structured and categorized. A good web design is easy to use, aesthetically pleasing, and suits the user group and brand of the website.
• A well-designed website is simple and communicates clearly to avoid confusing users. It wins and fosters the target audience’s trust, removing as many potential points of user frustration as possible.

Responsive and adaptive design are two common ways to design websites that work well on both desktop and mobile.Table of contents

1. What is Web Design?
2. What is Responsive Web Design?
3. Best Practices and Considerations for Responsive Design
4. What is Adaptive Web Design?
5. Accessibility for Web Design
6. Learn More about Web Design
7. Questions related to Web Design

What is Responsive Web Design?

Responsive Web Design (a.k.a. “Responsive” or “Responsive Design“) is an approach to designing web content that appears regardless of the resolution governed by the device. It’s typically accomplished with viewport breakpoints (resolution cut-offs for when content scales to that view). The viewports should adjust logically on tablets, phones, and desktops of any resolution.

Responsive designs respond to changes in browser width by adjusting the placement of design elements to fit in the available space. If you open a responsive site on the desktop and change the browser window’s size, the content will dynamically rearrange itself to fit the browser window. The site checks for the available space on mobile phones and then presents itself in the ideal arrangement.

Best Practices and Considerations for Responsive Design

With responsive design, you design for flexibility in every aspect—images, text and layouts. So, you should:

• Take the mobile-first approach—start the product design process for mobile devices first instead of desktop devices.
• Create fluid grids and images.
• Prioritize the use of Scalable Vector Graphics (SVGs). These are an XML-based file format for 2D graphics, which supports interactivity and animations.
• Include three or more breakpoints (layouts for three or more devices).
• Prioritize and hide content to suit users’ contexts. Check your visual hierarchy and use progressive disclosure and navigation drawers to give users needed items first. Keep nonessential items (nice-to-haves) secondary.
• Aim for minimalism.
• Apply design patterns to maximize ease of use for users in their contexts and quicken their familiarity: e.g., the column drop pattern fits content to many screen types.
• Aim for accessibility.

What is Adaptive Web Design?

Adaptive design is similar to responsive design—both are approaches for designing across a diverse range of devices; the difference lies in how the tailoring of the content takes place.

In the case of responsive design, all content and functionality are the same for every device. Therefore, a large-screen desktop and smartphone browser displays the same content. The only difference is in the layout of the content. 

In this video, CEO of Experience Dynamics, Frank Spillers, explains the advantages of adaptive design through a real-life scenario.

Play

Showvideo transcript

1. 00:00:00 –> 00:00:30All right, so I want to talk a little bit about responsive versus adaptive. But then I also want to touch upon something that’s called context-aware or context-sensitive approach, and that’s where your opportunity is going to be with mobile. Now, just to start off by saying responsive is a default.
2. 00:00:30 –> 00:01:03Responsive is not an option – *do it*. And the reason is because that’s where the world is at. Everyone expects things to be mobile-optimized, and responsive just means that if I switch from my laptop to my tablet to my phone, the site’s going to fit to that resolution; it’s going to kind of follow me. And we know that users do that; that’s the default. So, by doing responsive design, you’re supporting device switching, and that’s why it’s important. You’re also potentially making things a little bit more accessible
3. 00:01:03 –> 00:01:34and SEO-friendly, which is a factor for Google’s algorithm that prioritizes responsive sites. *Adaptive design* in short is really interesting, and not enough people do adaptive design approaches. It’s like people are so busy just meeting the default responsive that they don’t think about what adaptive design can offer. And so, let me talk a little bit about what that is and what’s important for you.
4. 00:01:34 –> 00:02:03So, adaptive design technically is about kind of making sure that things fit nicely, for example, on an iPad and on a phone – for example, the latest phone, a large phone versus maybe an older, smaller phone, and works nicely in that viewport or that buttons are in the place they should be instead of just being pushed by
5. 00:02:03 –> 00:02:35the fluid layout of responsive design. But let me just say that probably in reality there’s like a hybrid really because if you work with your developers and you tell them ‘Hey, those icons that are big on the desktop, I want them to stack,’ for example, is common responsive. So, you’ve got like a bunch of icons and then on mobile you want them to stack. But maybe they aren’t showing up right; maybe they’re too small, so you need to tell your developers, ‘Hey can you make them larger and fill the space, and then make them stack?’
6. 00:02:35 –> 00:03:01So, that’s the role of a UX designer or a UX person is to help with – you know – it’s kind of getting things right, so there is a little touch of adaptiveness there. But what adaptive design does is a little different. And adaptive design is illustrated by the following story. I remember getting off a plane, going to the bag check to get my bag,
7. 00:03:01 –> 00:03:33and the first thing I wanted to do is get on Wi-Fi. I think I was working on a document and I had to upload it immediately, like right there; somebody was waiting for it. So, I flipped open my laptop, kind of set it on one of my bags, waiting for the other bag, whatever, and tried to go on the Wi-Fi. What was funny was that when I first tried on my phone, the link was, the thing that said connect – you know – it’s like ‘Do you agree that this is free Wi-Fi?’ and then ‘connect’ – it was a tiny little link on the mobile phone.
8. 00:03:33 –> 00:04:02And on the desktop it was a huge button. So, desktop – huge button that said, ‘I agree. Connect.’ On the mobile phone – a tiny little link. And what that really should have been is the opposite. It should have been a huge button on the mobile phone, and it could have been – I don’t know – just a reasonable size button on the desktop. But it sort of always reminds me of the adaptive approach, which is to, say, if you know I’m on mobile and you know that there’s this text,
9. 00:04:02 –> 00:04:32instead of making me read all the text, you might say ‘shorten the text on mobile’ and put like an ‘open, view more’, especially because we UX people – well, I guess everybody knows that people don’t read terms and conditions and a bunch of blah-blah text; they go straight to the call to action. So, like a responsive design would say, instead of showing the text, and maybe there’s an image at the top and then the text here and it’s going to size to different viewports responsively;
10. 00:04:32 –> 00:05:05adaptive design is going to say, ‘I know you’re probably not going to read this. You’re on mobile. So, I’m just going to make it really short and put a “read more” and then have a big old button the first thing that you see; so, a little bit of text and a big old button for the call to action.’ So, adaptive design to me is the right thing to do. You’ll see a lot of articles online about or people discussing, discussions about which approach to take and ‘Is one more expensive or more hassle?’ and I really don’t think it’s helpful,
11. 00:05:05 –> 00:05:30because responsive design, in my experience, can be expensive as well because of the QA – you have to do a lot of quality assurance with responsiveness, just like the example I shared. You know – is it right? Is the icon big enough? Is it in the right place? And that’s just in a responsive capacity. Think about how you can use the device, you know, whether it’s geolocation,
12. 00:05:30 –> 00:05:57whether it’s the camera sensing light / dark. I mean you can have dark mode / light mode which you can set to the time of day and that’s a version of adaptiveness. The more of that we get, the better, and it also extends to other products or services like smart watches, Internet of Things. It’s just the future, I think! So, context-adapting, context-sensing and adaptive design in general.

Adaptive design takes responsiveness up a notch. While responsive design focuses on just the device, adaptive design considers both the device and the user’s context. This means that you can design context-aware experiences—a web application’s content and functionality can look and behave very differently from the version served on the desktop.

For example, if an adaptive design detects low bandwidth or the user is on a mobile device instead of a desktop device, it might not load a large image (e.g., an infographic). Instead, it might show a smaller summary version of the infographic.

Another example could be to detect if the device is an older phone with a smaller screen. The website can show larger call-to-action buttons than usual.

Accessibility for Web Design

“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”

—Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Web accessibility means making websites and technology usable for people with varying abilities and disabilities. An accessible website ensures that all users, regardless of their abilities, can perceive, understand, navigate, and interact with the web.

In this video, William Hudson, CEO of Syntagm, discusses the importance of accessibility and provides tips on how to make websites more accessible.

Play

Showvideo transcript

1. 00:00:00 –> 00:00:31There are two main reasons. The first that it’s a legal requirement in almost all countries that you make websites that anyone can use, even if they have reduced abilities. This isn’t the best reason, but for organizations with legal compliance is a priority. It can be a very powerful one. The second issue is that we find that accessibility is closely connected with general usability and search engine optimization (SEO). When we do things to improve accessibility,
2. 00:00:31 –> 00:01:01we end up improving both of these other topics. It turns out that search engine optimization and accessibility have more in common than you might think. They both need to deal with technology that’s trying to understand the pages. In the case of accessibility, assistive technology needs to present it to users with reduced abilities who perhaps cannot see it or hear it. So assistive technologies will attempt to present web pages in an appropriate form for those users. For search engines,
3. 00:01:01 –> 00:01:33the Web crawlers need to understand the contents of the pages so they can be indexed correctly. So the structure of the content needs to make sense in both cases, cascading style sheets can work wonders in making a messy HTML page look brilliant. But style sheets are complex to interpret. Assistive technology and search crawlers may simply ignore them. That means if you’re relying on style sheets to present your content in a meaningful order, those adjustments go away. Here are some general guidelines for implementing accessibility in web design.
4. 00:01:33 –> 00:02:04One of the keys to accessibility is to design for assistive technologies or to at least be aware of assistive technologies. When you’re designing, if you’re looking at visual impairment then the screen readers are the main assistive technology there. Screen readers take the contents of the screen and read it out to you. They are now built into most platforms by default, including smartphones. But if you want to ensure your website works well, the screen is you should try it out. An accessibility specialist may be helpful in that respect.
5. 00:02:04 –> 00:02:31Screen readers deal with written content, but an important issue is that we need to provide non text content in alternative media. This is the dreaded ALTtext that you are frequently prompted for when creating images. This is because screen readers are great for reading out text in HTML, but if it happens to be text embedded in an image, it has little hope. And for meaning pictorial images Despite the rise of AI, users are likely to get a description
6. 00:02:31 –> 00:03:01of what an image shows rather than what it was intended to mean. And just as a quick side note, ALT text with decorative images should always be empty and empty ALT-tag tells assistive technology that is not important and can be ignored. If you’ve got video clips or audio recordings on your site, you need to provide text alternatives for that. Closed captions and transcripts are best and are now provided automatically by many tools. Of course, one of the real usability advantages of text
7. 00:03:01 –> 00:03:24alternatives is that you can search them. So if you were looking on your internet or on a website for something that somebody said, then you could find that in the transcript and have the entire text available to you there. But most changes for accessibility do benefit all users, especially when you start to think about how can we simplify this layout? How can we make the whole thing easier to use?

The World Wide Web Consortium (W3C) lists a few basic considerations for web accessibility:

1. Provide sufficient contrast between foreground and background. For example, black or dark gray text on white is easier to read than gray text on a lighter shade of gray. Use color contrast checkers to test the contrast ratio between your text and background colors to ensure people can easily see your content.
2. Don’t use color alone to convey information. For example, use underlines for hyperlinked text in addition to color so that people with colorblindness can still recognize a link, even if they can’t differentiate between the hyperlink and regular text.
3. Ensure that interactive elements are easy to identify. For example, show different styles for links when the user hovers over them or focuses using the keyboard.
4. Provide clear and consistent navigation options. Use consistent layouts and naming conventions for menu items to prevent confusion. For example, if you use breadcrumbs, ensure they are consistently in the same position across different web pages.
5. Ensure that form elements include clearly associated labels. For example, place form labels to the left of a form field (for left-to-right languages) instead of above or inside the input field to reduce errors.
6. Provide easily identifiable feedback. If feedback (such as error messages) is in fine print or a specific color, people with lower vision or colorblindness will find it harder to use the website. Make sure such feedback is clear and easy to identify. For example, you can offer options to navigate to different errors.
7. Use headings and spacing to group related content. Good visual hierarchy (through typography, whitespace and grid layouts) makes it easy to scan content.
8. Create designs for different viewport sizes. Ensure your content scales up (to larger devices) and down (to fit smaller screens). Design responsive websites and test them thoroughly. 
9. Include image and media alternatives in your design. Provide transcripts for audio and video content and text alternatives for images. Ensure the alternative text on images conveys meaning and doesn’t simply describe the image. If you use PDFs, make sure they, too, are accessible.
10. Provide controls for content that starts automatically. Allow users to pause animations or video content that plays automatically.

These practices not only make a website easier to access for people with disabilities but also for usability in general for everyone.

Learn More about Web Design

Learn how to apply the principles of user-centered design in the course Web Design for Usability. 

For more on adaptive and responsive design, take the Mobile UX Design: The Beginner’s Guide course. 

See W3C’s Designing for Web Accessibility for practical tips on implementing accessibility.

Questions related to Web Design

How to design a web page?

Designing a web page involves creating a visual layout and aesthetic.

1. Start by defining the purpose and target audience of your page.
2. Understand the type of content and what actions the user will perform on the web page.
3. Sketch ideas and create wireframes or mockups of the layout.
4. Select a color scheme, typography, and imagery that align with your brand identity.
5. Use design software like Figma or Sketch to create the design.
6. Finally, gather feedback and make necessary revisions before handing off the development design.

In each step, remember to keep the user experience and accessibility considerations foremost. Here’s why Accessibility Matters: 

Showvideo transcript

1. 00:00:00 –> 00:00:30For me, having been involved in accessibility for so many years, I’ve realized that yes, you can meet standards and yes, you can get to the level of compliance that guidelines will have. You get to. But how do you actually make your experience so that it actually, you know, is sensible, meaningful and successful? Like really successful for users?
2. 00:00:30 –> 00:01:01So it’s the same issue of just sort of meeting usability standards, but how do you actually go to the level of, you know, creating, wow. Or creating a meaning for a user, you know, helping them with their task, helping them get to the next level. So accessibility has been part of the story of the World Wide Web. And the creator, Tim Berners-Lee, said it best that, you know, it’s really about universal access.
3. 00:01:01 –> 00:01:30So there are there are three cases to be made for accessibility the legal, the moral and the business case. Now, the legal case, close to 20% of the U.S. population has a disability, and that’s one in five people. And that’s both the U.S. and the U.K. In the E.U., it’s like one in seven people. The thing with access and accessibility is it’s moving more towards being seen as a human right internationally
4. 00:01:30 –> 00:02:00as opposed to what’s termed an accommodation. Right. So accommodation is like if you’re in a school situation, your child has a disability, they basically get more time to finish a test. And as opposed to sort of being seen as a bolt on, as an add on to your coding or your design efforts. Accessibility is seen more, is being seen more now by companies as more of a fundamental right and as part of the fabric,
5. 00:02:00 –> 00:02:30the basic foundation of good coding and good UX design. So accessibility is actually required by federal law. And there are, you know, many lawsuits in the period of 2015 to 2017, over 250 different businesses were sued in the U.S. And there are some very famous cases. There are some very big cases, like AOL was sued years ago. You know, Target,
6. 00:02:30 –> 00:03:00which is a very popular store in the US, was sued. Charles Schwab, the financial investment company Netflix, the video company. So many different lawsuits have taken place. And, you know, outside of some the money side of it, the the PR side of it, which is one of the business issues that we’re getting into, is is also at issue. And the legal picture is really important because in the United States, most companies are motivated by lawsuits.
7. 00:03:00 –> 00:03:33That’s the primary motivation. It’s not really empathy, it’s the lawsuits. And so it’s really important to understand the legal side of it. The moral side of it now is that universal access and interoperability are really part of everything we’re doing on the Web, or they should be, you know, and if you have tried to send a calendar from Gmail to your Apple calendar or, you know, for example, to interoperability of, you know, QuickTime and it just doesn’t work on on PCs as well as, you know, works
8. 00:03:33 –> 00:04:00smoothly on the Mac interoperability issues are everywhere. You know, responsive Web design has been a champion for any device, any resolution. So inclusiveness is built into responsive web design. And it turns out that responsive web design is actually a really good opportunity for you to address your accessibility project.
9. 00:04:00 –> 00:04:30So there’s corporate social responsibility. Many companies have a corporate social responsibility policy. The other thing is that many people with disabilities face huge discrimination in employment, but some of the things we heard are the, you know, the common mistakes that you find in the developing world, for example, that users with mobility issues so they’re in a wheelchair, will go to a job interview. And then the the interviews
10. 00:04:30 –> 00:05:02on the seventh story in the there’s no elevator with elevators broken. So this happens all the time. You know, I was in the New York subway and there was a woman in a wheelchair that in a in a push wheelchair. And the elevator was broken. I actually saw these two two guys. So this woman look like a refugee as well. And these two guys came over, these two kind of businessmen just ran over to the to the to the woman and grabbed her wheelchair and and ran her up like three flights of stairs.
11. 00:05:02 –> 00:05:30Just incredible. That’s really what we’re doing with accessibility, is we’re providing that like automatic like access. Don’t even think about it because the discrimination that users people with disabilities face is huge. There’s a 70% unemployment rate, for example, with the blind community in Portland, in the US here, and
12. 00:05:30 –> 00:06:00users with disabilities, according to the latest census, tend to face like 70% less earnings type of issue. You know, So access to services and online content is a huge issue. And the other thing is that many people with disabilities suffer from health issues or multiple disabilities. So you may have somebody that has multiple disabilities as well. So it’s kind of compounded. The access issue is compounded.
13. 00:06:00 –> 00:06:30Now there’s the business case for accessibility, as I mentioned, lawsuits, a big one, but accessibility actually encourages us to do clean coding and to think about the usability of our sites, you know, because you’re thinking about the user. Any time you’re thinking about the user, you’re doing user advocacy. User advocacy gets you to walk in their shoes. Walking in their shoes generates empathy. Empathy helps you think about the website from the person who’s going to use it, not your perspective.
14. 00:06:30 –> 00:07:01Right? So the other thing is that it supports echo and usability. Now, that alone should be enough of a business case, right? So I mean, imagine like, like limiting your site so it’s not findable or limiting your site so users stumble and can’t get through your site. I mean, you just wouldn’t you wouldn’t argue against that, right? So accessibility needs to be the third pillar in our optimization strategies that that that is part of the the the launch strategy of any product.
15. 00:07:01 –> 00:07:30Now accessibility also helps support internationalization and mobile friendly content which are also, you know, critical to SEO and usability and responsive web design, as I mentioned, now makes accessibility easier because you’ve got HTML5 and CSS3. And then of course, the heavy use of ARIA, which is the accessible rich Internet application, you know, formatting that language that Google has put out.
16. 00:07:30 –> 00:08:02So ARIA is is kind of a standard as well with especially web application accessibility. And the the other thing I think that’s key to the business case is that that accessibility just leads to bad PR, you know, it kind of gives your company a bad reputation in, in Norway where there, you know, it’s illegal to have an inaccessible website. It’s a form of discrimination. The the airline SAS
17. 00:08:02 –> 00:08:31versus Norwegian Airlines. So SAS was was cited by the government for having a, you know, their booking engine on their website. You couldn’t you can use it if you’re a blind user. For example and Norwegian Airlines was like is like perfect. It’s like it’s a beautiful example and stuff. So there is this kind of like people are thinking, oh, SAS is like, you know, just hates its users or just is completely,
18. 00:08:31 –> 00:09:02you know, insulting to its to its users with disabilities. And so there’s a little bit of bad PR that was going on with those two airlines. And there’s actually a a supermarket in Norway that is working with disabled users, with the disabled community to improve the online shopping for its website, for purchasing, you know, online. And and they’re promoting that as part of their kind of goodwill.
19. 00:09:02 –> 00:09:17So they’re using that that reverse you know, the good PR as a way to promote the fact that they’re doing inclusive design and that their their web strategy is is inclusive and higher in accessibility.

How much do web designers make?

The salary of web designers varies widely based on experience, location, and skill set. As of our last update, the average salary for a Web Designer in the United States is reported to be approximately $52,691 per year, according to Glassdoor. However, this figure can range from around $37,000 for entry-level positions to over $73,000 for experienced designers. It is crucial to mention that salaries may differ significantly by region, company size, and individual qualifications. For the most up-to-date and region-specific salary information, visit Glassdoor.

How to become a web designer?

To become a web designer, you should start by understanding design principles, usability best practices, color theory, and typography. Next, learn the essential tools like Adobe Photoshop, Illustrator, and Sketch. Familiarize yourself with web design languages such as HTML, CSS, and JavaScript. It’s important to create a portfolio of your top work to impress potential employers. Additionally, consider taking online courses to enhance your knowledge and skills. 

Interaction Design Foundation offers a comprehensive UI Designer Learning Path that can help you become proficient in user interface design, a key component of web design. Lastly, continuously practice web design, seek feedback, and stay up-to-date with the latest trends and technologies.

What does a web designer do?

The role of a web designer entails the task of designing a website’s visual design and layout of a website, which includes the site’s appearance, structure, navigation, and accessibility. They select color palettes, create graphics, choose fonts, and layout content to create an aesthetically pleasing, user-friendly, and accessible design. Web designers also work closely with web developers to verify that the design is technically feasible and implemented correctly. They may be involved in user experience design, ensuring the website is intuitive, accessible, and easy to use. Additionally, web designers must be aware of designer bias, as discussed in this video. 

Showvideo transcript

1. 00:00:00 –> 00:00:32For you, one of your biggest biases and issues as a designer if you’re a visual designer or if you’re working on a website or app that – you know – you’re a stakeholder on the team, it’s going to be the fact that you can actually see what’s on a screen, assuming that you’re not blind, that you’re actually reviewing visual designs.
2. 00:00:32 –> 00:01:01And the things that I found that are the biggest challenges for visual design are the *semantics*. So, words make sense when you look at them or descriptions are aided with a visual cue; you know – confirmation messages visually colored or it flashes up and there’s something that gives you a visual cue there, error messages the same thing. So, these kind of semantics of – you know –
3. 00:01:01 –> 00:01:35that you understood an error message or you understood something are one of the things we just get used to. And then we forget what it might be like if you don’t have the visual crutch. So, this example here is a quiz, and this is where we saw this, when we were optimizing this quiz, that when we were looking at the accessibility of it, the problem with it – so we went through and we made it accessible, so you could
4. 00:01:35 –> 00:02:03keyboard and tab through the the different choices – and then we tested it with a user. And we were like, oh – we totally didn’t realize this. What was happening is that the correct answer was appearing to the left of the answer choice. And the problem was that when it announced the correct choice, even though it was accessible, it didn’t say which one it was.
5. 00:02:03 –> 00:02:35So, say Choice B was circled and then the correct answer was displayed over there, but it just didn’t have this semantic of saying, “The correct answer is Choice B (blah blah blah blah blah).” So, very simple, but a good reminder of like, oh yeah – you know – reinforcing the fact that your visual bias adds context; that might not be there when it’s read aloud or when it’s navigated through an audible experience like a screen reader.
6. 00:02:35 –> 00:03:06The second bucket for visual bias is the interaction; it’s the little animations or little micro-interactions that are occurring on a screen are another source of – you know – it’s like, “Well, I saw that, but a screen reader didn’t.” You know. So, being aware of that, as well as the third one, which is *place*. So, like the location on a screen or movement that occurs – some meaning from a state change.
7. 00:03:06 –> 00:03:34Like a hover is a classic one – you hover on and off and it kind of tells you that it’s a clickable element or it tells you that nothing’s happening. Sometimes you click on stuff, play buttons or you click on elements on a screen that are loading like a button or something like that – nothing happens. And then you can kind of tell nothing’s happening because if you have a little technical proficiency as a user, you can look down and see if the page is loading on your browser in the lower-left corner
8. 00:03:34 –> 00:04:03or you can see that nothing happened – you push the button and nothing happens. Well, if you don’t have that visual cue or if something is placed in an area of a screen that you have to kind of navigate back up to the top if you’re using assistive technology, that’s going to be a blocker. Right? So, visual bias I think is our worst enemy because we’re so familiar with it, we’re so used to it that we’ve forgotten that we are, so we have that crutch.
9. 00:04:03 –> 00:04:30There’s more than one bias, though. There’s *mouse-heavy bias*. So, we’ve gotten used to the fact that we use mice all the time and as designers we require point and click a lot. So, it took me a while to realize how important this was. Many years ago when I was doing lots of usability – you know – kind of user studies and going out and talking to users, then when you’re doing B2B studies (business-to-business studies), you usually run across
10. 00:04:30 –> 00:05:03that one user who is the keyboard user, and it’s like “I don’t use the mouse.” Like, this woman is using this very important software for the company and sometimes she’s the only user. And she’s going through and just because of the speed that she needs to input, it’s keyboard-driven. Now, we found this with many types of applications like that, so designing for keyboard accessibility for the heavy input user is just something that you end up supporting.
11. 00:05:03 –> 00:05:33It’s one of these universal type of design approaches. And so, with accessibility, we’re blocking users if we make things too mouse-dominant because then they’re not able to use the keyboard. And without the keyboard, there’s usually not a focus state related to that. So, we’ll talk more about focus states just like we’ve been talking about since they’re so important. Now, the other bias is the *color bias* – so we’ve talked about color blindness.
12. 00:05:33 –> 00:06:02And for example, putting error messages only in red text. And if you recall the guideline there is to add a supporting element like another visual element to reinforce the color. Don’t just use color alone basically. So, watch out for those three biases: *visual bias, color bias and mouse bias* because as a sighted designer or business person or developer you’re probably
13. 00:06:02 –> 00:06:35going to be biased by those things. Now, in the design phase, some of the very basic accessibility things you should be nipping in the bud, in other words, stopping them before the train goes down the track are things like *typography*, so the size of your font; designing and defining that up front or making sure that that’s documented in a style guide is really important. If it’s not, then that’s where a developer needs to be familiar with accessibility so they can stop it
14. 00:06:35 –> 00:07:08at their stage of coding or a front-end web developer who’s putting together a style sheet that will call those styles. So, *color contrast* is the other big classic, and I think if there’s one skill that any good designer – and I’m talking visual designer – needs to learn, it’s *high contrast* because that seems to be the big one from the dozens of designers that I’ve worked with over the years. It seems like they give me designs all the time that are low contrast. It’s the gray on gray, as I like to joke.
15. 00:07:08 –> 00:07:34Then *link visibility and target size* is the other one. This is all up front. So, before you even get to thinking about accessibility, you should be thinking about that. And then *labeling or label proximity* – so how close the label is to the element that you’re trying to get the call to action on. Once you have those basics, then you can add *predictability and consistent navigation*;
16. 00:07:34 –> 00:07:43things like the focus, focusability, and then the blocks of content being separated and distinct from each other.

Ultimately, a web designer’s goal is to create a visually appealing, functional, accessible, and positive user experience.

Is web design coding?

Web design and coding are closely related, but they are not the same. Web design involves creating the visual elements and layout of a website, while coding involves translating these designs into a functional website using programming languages like HTML, CSS, and JavaScript. Typically, dedicated web developers translate the designs to code. Several design tools can also export code directly.

Although some web designers also have coding skills, it is not a requirement for all web design roles. However, having a basic understanding of coding can be beneficial for a web designer as it helps in creating designs that are both aesthetically pleasing and technically feasible.

What is responsive web design?

Responsive web design guarantees that a website adapts its format to fit any screen size across different devices and screen sizes, from desktops to tablets to mobile phones. It includes the site to the device’s resolution, supports device switching and increases accessibility and SEO-friendliness.

Showvideo transcript

1. 00:00:00 –> 00:00:30Now, just to start off by saying responsive is a default. Responsive is not an option – *do it*. And the reason is because that’s where the world is at. Everyone expects things to be mobile-optimized, and responsive just means that if I switch from my laptop to my tablet to my phone, the site’s going to fit to that resolution; it’s going to kind of follow me.
2. 00:00:30 –> 00:00:52And we know that users do that; that’s the default. So, by doing responsive design, you’re supporting device switching, and that’s why it’s important. You’re also potentially making things a little bit more accessible and SEO-friendly, which is a factor for Google’s algorithm that prioritizes responsive sites.

As Frank Spillers, CEO of Experience Dynamics mentions in this video, responsive design is a default, and not an optional feature because everyone expects mobile optimization. This approach is vital for Google’s algorithm, which prioritizes responsive sites.

How to learn web design?

To learn web design, start by understanding its fundamental principles, such as color theory, typography, and layout. Practice designing websites, get feedback, and iterate on your designs. Enhance your skills by taking online courses, attending workshops, and reading articles. 

Consider the Interaction Design Foundation’s comprehensive UI Designer learning path for essential skills and knowledge. If you’re interested in expanding your skill set, consider exploring UX design as an alternative. The article “How to Change Your Career from Web Design to UX Design” on the IxDF Blog offers insightful guidance. Start your journey today!

Is web design a good career?

Absolutely, web design is a rewarding career choice. It offers creative freedom, a chance to solve real-world problems, and a growing demand for skilled professionals. With the digital world expanding, businesses seek qualified web designers to create user-friendly and visually appealing websites. Additionally, web design offers diverse job opportunities, competitive salaries, and the option to work freelance or in-house. Continuously evolving technology ensures that web design remains a dynamic and future-proof career.

Is web design the same as front-end?

Web design and front-end development are related but distinct disciplines. Web design involves creating the visual layout and aesthetics of a website, focusing on user experience, graphics, and overall look. Front-end development, on the other hand, involves implementing the design into a functional website using coding languages like HTML, CSS, and JavaScript. While there is overlap, and many professionals have skills in both areas, web design is more creative, and front-end development is more technical.

In this Master Class webinar, Szymon Adamiak of Hype4 shares his top tips for smooth designer-developer relationships, based on years of working as a front-end developer with teams of designers on various projects.

Is UI different from web design?

Yes and no! A web page is a type of user interface—it is the touchpoint between a business and the user. People interact with web pages. They may fill out a form, or simply navigate from one page to another. A web designer must also be familiar with UI design best practices to ensure the website is usable.

That said, in practice, the term UI is most often associated with applications. Unlike web pages, which tend to be more static and are closely related to branding and communication, applications (on both web and mobile) allow users to manipulate data and perform tasks.. 

Showvideo transcript

1. 00:00:00 –> 00:00:31A lot of the users have now become very tech-savvy. A lot of the people using apps and using websites have been using them for 15 or 20 years now. And they are pretty skilled, so they understand the typical patterns. They know that a checkout icon should be in the top-right corner. They know how a good login and registration works; so, all things like that
2. 00:00:31 –> 00:01:00are kind of predetermined and there’s pretty little innovation here. So, you can do research to test the viability of the product. But in a couple of really, really like pattern cases there isn’t really much way to innovate and user interface – the *visuals can be the differentiator*, and of course, we can use a design system like Material Design, but that would be a horrible world to live in because those apps would be all looking boring and soulless.
3. 00:01:00 –> 00:01:31And people want that design – that’s why people buy Apple products among other things, because they look good and they are different than everything else, at least sometimes. So, *people buy with their eyes* and we really need to remember that. And also, there is something called *aesthetic usability effect*, which means that if something looks good, it’s naturally perceived by people as being more usable even if it’s not. So, those visuals are important and we really, really need to keep that in mind.
4. 00:01:31 –> 00:02:00Okay, so let’s get to the actual UI after that lengthy intro. Let’s start with *visualizing* because we need to visualize what we’re going to make and of course, if we don’t have a lot of experience, we need to kind of use what we have. So, the *less experience we have, the harder it is to visualize* the things that we want to design. And I have a very good example of how it often ends up and how it actually discourages people that comes from ‘The Simpsons’.
5. 00:02:00 –> 00:02:32So, you see an image in your head and you try to recreate it and you end up with something like this and you say to yourself, ‘Why doesn’t mine look like that?’ And this is because we often think that it’s really easy to just recreate something that we have in our head without the foundational elements that are making up a good design, and we think that those Dribbble shots – you know – with like semi-transparent buttons are what is good design, so we kind of skip the whole grid, skip the typography,
6. 00:02:32 –> 00:03:01just add a nice gradient and we think that’s going to be fine. Well, it’s not the case. So, what is UI design? In general, what you really, really need to learn first, because everything else comes with practice, is *grid typography*, *hierarchy*, *readability* and *some basic aesthetics*, but you don’t really need to be an artist, and design is definitely not art. It’s not art because you have a very limited kind of scope of what you can do,
7. 00:03:01 –> 00:03:35and you can’t be “too creative” because that’s going to make it unusable. So, a lot of those Dribbble shots are basically artworks and they’re just not able to become a real product because they are done in a way to just kind of have like a flashy visual. So, we need to understand that, but what I think is the most important thing is *the grid and the layout*. But I often tell the junior designers what I think a UI design really is because this whole design thing is really like created to feel difficult to people.
8. 00:03:35 –> 00:04:02Like, you know, we have those super genius UX designers talking about lengthy processes, and as a junior we get discouraged – we get like, ‘Oh, I’m not going to learn that ever because I’m not a super genius like they are.’ But in reality, a lot of the design is basically moving rectangles around. So, you take a rectangle and based on some research and some knowledge you move it to a different position, change the color, change the size and that’s it.
9. 00:04:02 –> 00:04:13And it’s all rectangles, even if you’re moving ovals because the bounding boxes are rectangular as well. So, if you learn *how and why and where to move those rectangles to*, you’re set to go.

UI design, as explained in this video above, involves visualizing and creating the interface of an application, focusing on aesthetics, user experience, and overall look. To learn more, check our UI Design Learning Path.

What is a modal in web design?

A modal in web design is a secondary window that appears above the primary webpage, focusing on specific content and pausing interaction with the main page. It’s a common user interface design pattern used to solve interface problems by showing contextual information when they matter. 

Showvideo transcript

1. 00:00:00 –> 00:00:33User Interface Design Patterns are recurring components which designers use to solve common problems in interfaces. like, for example, when we think about those regular things that often are repeating themselves to kind of appear in, you know, in complex environments We need to show things that matter to people when they matter and nothing else. Right. it’s just really sad what we see. Like, for example, if you look at Sears, right? Sears is just one of the many e-commerce sites, you know, nothing groundbreaking here. So you click on one of the filters and then the entire interface freezes
2. 00:00:33 –> 00:01:00and then there is a refresh and you’re being scrolled up. And I always ask myself, is this really the best we can do? Is really the best kind of interface for filtering that we can come up with, or can we do it a bit better? Because we can do it a bit better. So this is a great example where you have galaxies and then galaxies, you have all this filters which are in rows. Sometimes they take three rows, sometimes four or sometimes five rows. That’s okay. Show people filters, show people buttons if they important show them.
3. 00:01:00 –> 00:01:32Right. But what’s important here, what I really like is we do not automatically refresh. Instead, we go ahead and say, “Hey, choose asmany filters as you like”, right? And then whenever you click on show results, it’s only then when you actually get an update coming up in the back. Which I think is perfectly fine. You don’t need to auto update all the time. And that’s especially critical when you’re actually talking about the mobile view. The filter. Sure, why not? Slide in, slide out, although I probably prefer accordions instead.
4. 00:01:32 –> 00:02:01And you just click on show products and it’s only then when you return back to the other selection of filters and only when you click okay, show all products, then you actually get to load all the products, right? Designing good UI patterns is important because it leads to a better user experience, reduces usability issues, and ultimately contributes to the success of a product or application. It’s a critical aspect of user centered design and product development.

The video above explains the importance of designing good UI patterns to enhance user experience and reduce usability issues. Modals are crucial for successful user-centered design and product development like other UI patterns.

What does CMS stand for in web design?

In web design, CMS refers to a Content Management System. It is software used to create and manage digital content. 

Showvideo transcript

1. 00:00:00 –> 00:00:31In the investigative tract, we’re using ads, we’re using social media. And this is just examples of the content; this is not an exhaustive list. Then, in the *verifying and committing*, they might be looking at content like endorsements or reviews; they might be looking at the sales collateral. And then, really the UX starts. This is the setup, the getting-started guides, the first-run experience in an experience. Even the how-to – that how-to content for some people and some experiences
2. 00:00:31 –> 00:01:04continues into the engagement. And here’s where those titles, buttons, descriptions, any alerts that pop up and the just game and experience content; you’ve also got troubleshooting, error messages, alerts if things break. And then we’ve got the sticky content, the profile ratings and the badges. And then there might be forums where people, customers can get engaged with other people. There might be training and conferences. So, if we take a look at—holy mackerel! That’s an awful lot of types of content.
3. 00:01:04 –> 00:01:35And the important thing here is *this content isn’t interchangeable*. Stuff that you make for sales collateral is not useful in your first-run experience. They need to be similar, they need to be part of the same body, but they are materially different because they’re serving a *different purpose*. So, the kinds of content we’re looking at is really this lower half. This is the UX content… the content that is *spinning the wheel from setup into preferring*.

The video above implies that the content, including those managed by a CMS, is crucial in every stage of the user experience, from setup to engagement. The top 10 CMS in 2023 are the following:

1. WordPress
2. Joomla
3. Drupal
4. Magento (more focused on e-commerce)
5. Squarespace
6. Wix
7. Shopify (more focused on e-commerce)
8. TYPO3
9. Concrete5
10. Umbraco

The popularity and usage of CMS platforms can vary over time, and there may be new players in the market since our last update. 

Accessibility: How to Design for All

Accessibility: How to Design for All

Closes in

8

days

booked

View Course

Get Weekly Design Insights

Join 321,290 designers who get useful UX / UI Design tips from our newsletter.Go

Earn a Gift, Answer a Short Quiz!

1. Question 1
2. Question 2
3. Question 3
4. Get Your Gift

Question 1

What is primarily the responsibility of a web designer?

1 point towards your gift

• They design the visual layout and user experience of a website.
• They implement server-side functionalities.
• They program the website using coding languages.

Submit my answer

Literature on Web Design

Here’s the entire UX literature on Web Design by the Interaction Design Foundation, collated in one place:Featured article

How to Change Your Career from Web Design to UX Design

Changing careers isn’t as hard as it’s often made out to be, especially if you’ve got the right resources to help you make the change. For many web designers, now is the perfect time to make the switch into UX design. To start with, there’s the monetary boost that comes with the change in career. According to PayScale, web designers in the US earn an average of $46,000 annually(1), while UX designers on the other hand earn a sizeable $74,000(2). Secondly, job opportunities for UX designers are booming: CNN reports that a total of 3,426,000 UX design jobs will be created in the US alone within the next 10 years(3). Furthermore, UX design is a meaningful job, not only because you get to work on a product from the inside out, but also because—as DMI has shown—UX design makes a significant impact on businesses, with UX design-driven businesses outperforming the S&P index by 228%(4). So, where do you find the right resources to help you make your career change? Why, you’re reading one right now.

What is User Experience and User Experience Design?

To start with, let’s have a brief introduction to what we mean by “User Experience”. Products have users, and the user experience (UX) is simply the experience a user has from using that particular product. So far, so good?

UX design is the art of designing products so that they provide the optimum possible user experience. If this description sounds broad, it’s because the nature of UX design is pretty broad. Building the optimum UX encompasses an understanding of psychology, interaction design, user research, and many other disciplines, but on top of it all is an iterative problem solving process (but more on that later).

Broadly speaking, user experience can be broken down into 3 components: the look, feel, and usability.

The look of a product is about using visuals to create a sense of harmony with the user’s values, and that creates credibility and trust with the user. It’s about creating a product that not only looks nice, but looks right too.

The feel, then, involves making the experience of using a product as pleasant and enjoyable as possible. It’s built by crafting the interactions between the user and the product, as well as the reactions they have when (and after) using the product.

Lastly, usability underpins the user experience. Quite simply, if a product isn’t usable, no amount of good looks can salvage it, and the only feeling users are going to have is anger and frustration. Ideally, products should be personalized to user’s needs, and deliver functionality in a predictable way.

If you’re still not sure whether UX design appeals to you, we’ve got some articles that help introduce some of the important parts of UX as a career:

An Introduction to Usability

Usability vs Desirability

What is Interaction Design?

What Do Web Design and UX Design Have in Common?

The job title “Web Designer” has many definitions, and indeed, what a web designer does is largely dependent on what the client or project requires. Some web designers simply create visual designs and/or high fidelity interactive prototypes of the website, and leave the coding of the website to front-end and back-end developers. The majority of web designers, however, do get involved with both the designing and (front-end) development of the website. Some web designers even regularly do user research and testing as part of their jobs (and if you’re one of them, you’re already almost ready for a job in UX design).

But no matter what your job as a web designer entails, here are some aspects of web design that can also be found in UX design.

Problem solving

Web designers look to solve problems for their clients; UX designers look to solve problems for their users. Web designers work with a problem solving process: first, they find out the problems their clients have, then design a web solution for them, and then proceed to develop and test the website before releasing it. And after a website is launched, web designers often are involved with further testing the site, collecting feedback from users, and then reiterating on the design.

This iterative problem solving process is similar to the UX design process (shown in the image below). UX designers begin with user research; it’s essential to get to know the potential users of a product and find out what their problems are, how to solve them and how to make users want and/or need that solution. User research is often done via user interviews, observations, demographic studies, drafting user stories and personas, etc. Thereafter, UX designers would create a design solution that solves the user’s key needs, and often bring the prototype back to users to test its validity or usability. After the product is launched, UX designers collect more user feedback, which feeds into a new round of user research, thereby starting the process again.

If you’ve done user research before as part of your web designer job, you will find it a great advantage when making the switch to UX design. If not, don’t worry—you’ll have many opportunities to learn the best ways to conduct user research (read on to find out more).

Emotional design

When designing websites, web designers often make use of typography, color and layout to shape the emotions of users. A sense of credibility could be established, for instance, by using darker colors and serif fonts; similarly, a sense of fun could be created using colorful imagery and playful typography. Web designers are familiar with emotional design; that is, creating designs that elicit emotions from users. UX designers are also concerned with emotional design, but on a larger scale—they are concerned with eliciting emotions from users throughout their entire experience of using a product.

To do that, UX designers work with not only typography and color, but also psychology, motion design, content curation and information architecture. Web designers making the change would innately understand what emotional design in UX entails; they simply need to pick up new knowledge in other areas to augment their ability to do so on a bigger picture.

Multi-disciplinary

Web design is a multi-disciplinary job, where you’d need not only knowledge in design (typography, color theory) but also skills in developing a website (HTML, CSS, JavaScript). Some web designers are also involved in interaction design when they code for animations and interactions using CSS and/or JavaScript. UX design is also a multi-disciplinary field, but perhaps supercharged in that sense. UX designers need to make use of knowledge from the areas of psychology, user research, visual design, and even business to create the best UX for their products.

The Differences between Web Design and UX Design

User-focused vs technology-focused

A large part of your job as a web designer is spent on catching up on the latest developments in HTML, CSS and other coding languages—all of which change and improve at a dizzying pace. Which browsers support what versions of CSS? Would CSS animations work in Safari on a Mac? Don’t even get me started on Internet Explorer! These might be a few questions (and frustrations) that are constantly on your mind as a web designer.But UX design isn’t concerned with technology. Instead, its focus is centered squarely on users—technology is only a means for users to get what they need. Only by focusing on users can UX designers create solutions that cater to the specific needs they have, and ultimately, that users will be willing to pay for. UX designers do extensive user research to find out the most they can about their users, most of which the majority of web designers wouldn’t have had the chance to perform.

UX is more than the web

UX design is platform independent. Its principles and processes are applied to many diverse areas outside of web browsers: on mobile apps, desktop software, and even hardware products and retail spaces. On the other hand, the domain of web design is strictly tied to web browsers. This means that UX designers are able to find job opportunities not only in up-and-rising fields like tech startups, but also in mature and stable industries like car manufacturers. As long as there’s a product, there’s a need for UX—and this really opens up your world of opportunities.

The Big Benefit of Web Design Experience when Moving to UX Design

Relevance of web design background

The biggest benefit of moving from web design to UX design is the amount of overlap between the two fields of design. While it’s true that UX design covers more platforms than the web browser, a sizeable portion of UX design work is still done on products that are at least partially web-based (think of social media websites like Facebook and Twitter, web apps like Dropbox, and services like Google). The overlap between web design and UX design is greater if you’ve done some form of user research or iterative process of continually improving a website with user data.

Being fluent in design and website coding terminologies will also give you a boost that cannot be ignored; after all, UX design is a collaborative process where communication is crucial. Being able to use industry terms while talking to your colleagues will definitely put you in a better place than someone who came from a non-design background.

Aesthetics

Your ability to create beautiful aesthetics as a web designer will also come in handy when making the switch to UX design. Firstly, aesthetics is a great tool to augment your communications with internal stakeholders. As a UX designer, you have to constantly present your findings and recommendations to internal stakeholders (such as the CEO or product manager), and your ability to create visually pleasing reports and presentations will maximize the absorption of your key points.

Secondly, aesthetics plays a vital role in UX design. A common myth of UX design is that great usability trumps aesthetics—but that is far from true. In fact, a study of more than 2,500 participants by the Stanford Credibility Project showed that nearly half of them assessed the credibility of websites based on their visual appeal(5). This goes to show how aesthetics works hand in hand with other factors like usability to bring about the optimum user experience of using a product.

How to Enhance Your Skills to Make the Jump from Web Design to UX Design

Moving from web design to UX design can sometimes be quite straightforward, especially if you’ve done some aspects of user research in your job as a web designer. For other web designers, however, there is no cause for concern. You’ll be able to make the leap if you’ve spent some time studying UX, practicing some UX skills during your web design work, and constructing a CV which shows your understanding of UX design. If you’re wondering where to learn, there are plenty of options available to you, and we’ve highlighted some of the best below.

Online Courses

Online courses are the key to the enterprise of obtaining a solid design education, which goes a long way to sharpening the skills and mindset you’ll need as a successful designer.

Interaction Design Foundation

Don Norman, the cognitive scientist who coined the term “User Experience”, called the Interaction Design Foundation (yes, that’s us) a “goldmine of information on interaction design.” Forbes Magazine says that we offer “Ivy League level education in UX, Product Design or Human-Computer Interaction.” Fortunately, that education isn’t at an Ivy League level of pricing. We charge a low annual fee and you get access not just to all of our online learning, but also to the largest specialist design community in the world. We also offer a free library of academic texts from the design industry’s top researchers.

We have three courses (among our current offering of 32) that are specifically designed to help people enter the world of UX design. You’ll learn all areas of UX work and basic skills to practice UX work in Become a UX Designer from Scratch. In Get Your First Job as a UX (or Interaction) Designer, you’ll be able to learn what kinds of experience in UX do employers seek the most, as well as craft a winning cover letter, CV and portfolio that will help you get an interview for a UX design job. Finally, in User Research – Methods and Best Practices, learn the industry best practices of how to conduct proper user research and turn the results of your research into useful action on your product.

You can find all of our other UX courses here.

Coursera

You might also want to check out Coursera which is a great source of online learning. Their courses, like ours, are developed by leading experts in their field. Unlike us, however, they don’t specialize in UX and their courses aren’t always available, but when they are, they can either be accessed usually for a fee (on a per course basis).

Udemy

Udemy offers a huge selection of courses in nearly every subject area you can imagine. Udemy isn’t really a training provider, but rather a broker of training created by people from around the world. As such, there’s not much in the way of quality control applied to their courses—while some are absolutely brilliant, many are not.

Classroom Courses

Nielsen Norman Group

If you want to examine classroom courses; we recommend sticking with the “big names” of the industry who provide reliable and high-quality learning experiences. One of those big names is the Nielsen Norman Group who are also one of the best known UX consultancies; they offer a range of classroom based training at various locations around the world. They’re not inexpensive, but if you prefer not to have online training, they’re a good alternative.

You can find the Nielsen Norman Group’s training here.

General Assembly

General Assembly is another option for bootcamp-styled campus learning. They have relatively short and intense courses that repeat regularly. However, they are at a high price point and are available only at select locations.

You can find out more about General Assembly here.

University Courses

If you’ve got plenty of money and time, you could go ahead and get a Bachelor’s degree or a Master’s degree at a university. There isn’t, as of yet, a “UX-only” degree course, and the majority of related degrees tend to focus on Human Computer Interaction.

Two examples of this kind of program are:

Carnegie Mellon – HCI Programs

York University – MSc in HCI Technologies

University is not a low cost option, both in the sense of your time and money you’ll be spending on it. You’ll want to weigh up the pros and cons of a university course very carefully before you decide to go this route.

For instance, here’s how we break down the total costs of a 4-year university degree:

HSBC, as reported by Top Universities, found that the average US-based university education costs $36,564 a year(6). That includes tuition fees as well as living expenses. For a 4-year degree, this adds up to $146,256—and that’s not counting the costs (such as interest) of getting a loan for your studies.

Then there’s the opportunity cost of quitting work and spending four years at university. That is, the income you’ll forgo when studying full-time at a university. According to the United States Census, a non-graduate earns an average of $27,351 per year(7). Over 4 years, that amounts to $109,404 that could have been earned if you had been working.

Summing up the actual cost and opportunity cost gives you the total cost: a whopping $255,660!

If you think that all the options are confusing, you might want start by examining the return on investment from each type of learning. We’ve got an article here that examines the return on investment from each of the learning types mentioned above.

Networking

The best way to find work in any field is to use a little inside knowledge and get some help from those people already doing what you want to do. This used to be hard work, but today you can simply get online and get networking.

We’d recommend LinkedIn to anyone looking to do some professional networking; join UX groups and join the conversation. Don’t just jump in and ask for work—demonstrate your value first and help people, and look for work only after you’ve built relationships.

The Interaction Design Foundation also offers networking opportunities to both members and non-members. Our members are able to carry out highly specific networking through pre-designed forums that allow for collaboration between large groups of designers. Both members and non-members can also attend our local groups’ community events, which are completely free to attend. You can find out more about the local groups here.

You could also think about getting involved with the design community’s leadership by interacting with them on social media. We’ve provided a list of twenty great designers here that you can interact with online; you can expand that list as much as you like with a little Google work.

Mentoring and Feedback

We’ve found that you can make a career change more easily if you can find someone to mentor you and provide feedback on your efforts. You can, of course, source a mentor from your existing professional network if you know someone who is happy to take the role on. If you think that’s not going to work for you, members of the Interaction Design Foundation’s Design League have access our network of UX design experts and see a mentor from that network.

The Take Away

It isn’t difficult to move from web design to UX design. You can build on your existing skills through a process of education and choose the kind of education that suits you best. Thereafter, you can put that learning into practice as a web designer. The good news is you already speak the language of design so once you have a little practice in UX, you’re going to be ready to transition your career into UX design and join the fastest growing part of the design profession in the world today.

References & Where to Learn More

1. Course: Web Design for Usability
2. Payscale’s research on Web Design salaries
3. Payscale’s research on UX Design salaries
4. CNN reports 3.4 million UX designer job growth in the next 10 years
5. DMI’s analysis of design investment
6. UX Myths: Aesthetics are not important if you have good usability
7. How much does it cost to study in the US?
8. Earnings by education: US Bureau Of Labor Statistics

Show full article

Learn more about Web Design

Take a deep dive into Web Design with our course Accessibility: How to Design for All .

It’s Easy to Fast-Track Your Career with the World’s Best Experts

Master complex skills effortlessly with proven best practices and toolkits directly from the world’s top design experts. Meet your expert for this course:

• Frank Spillers: Service Designer and Founder and CEO of Experience Dynamics.