![](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/November30_pod1_1800x700_header_image_preview-2-e1513613312313.jpg\")
<\/p>\n<\/p>\n
Web design is tricky. One has to take a lot of things into account when designing a website, from visual appearance (how the website looks) to functional design (how the website works). To simplify the task, we\u2019ve prepared this guide.<\/p>\n
In this article, we\u2019ll focus on the main principles, heuristics, and approaches that will help you to create a great user experience for your website. We\u2019ll start with global things, like the user journey (how to define the \u201cskeleton\u201d of the website) and then work down to the individual page (what should be considered during web page design). We\u2019ll also cover other essential aspects of design, such as mobile<\/a> considerations and testing.<\/p>\n Information architecture<\/p>\n People often use the term \u201cinformation architecture\u201d (IA) to mean the menus on a website. But that\u2019s not correct. While menus are a part of IA, they are only one aspect of it.<\/p>\n IA is all about the organization of information in a clear and logical way. Such organization follows a clear purpose: helping users to navigate a complex set of information. Good IA creates a hierarchy<\/a> that aligns with user\u2019s expectations. But good hierarchy and intuitive navigation don\u2019t happen by chance. They are a result of proper user research and testing.<\/p>\n There are a number of ways to research user needs. Often, an information architect will take an active part in user interviews or card sorting, where the architect would hear of user expectations directly or see how prospective users would categorize a variety of information groups. Information architects also need access to the results of usability tests to see whether users are able to navigate efficiently.<\/p>\n A menu structure would be created based on the results of user interviews, and card sorting would be tested for whether it satisfies the user\u2019s mental model. UX researchers use a technique called \u201ctree testing\u201d to prove that it will work. This happens before designing the actual interface.<\/p>\n Global navigation<\/p>\n Navigation is a cornerstone of usability. It doesn\u2019t matter how good your website is if users can\u2019t find their way around it. That\u2019s why navigation on your website should adhere to a few principles:<\/p>\n Consider a few things when designing navigation:<\/p>\n Links and navigation options<\/p>\n Links and navigation options are key factors in the navigation process and have a direct effect on the user journey. Follow a few rules with these interactive elements:<\/p>\n \u201cBack\u201d button in browser<\/p>\n The \u201cBack\u201d button is perhaps the second-most popular UI control in the browser (after the URL input field). Make sure the \u201cback\u201d button works according to user expectations. When a user follows a link on a page and then clicks the \u201cback\u201d button, they expect to return to the same spot on the original page. Avoid situations in which clicking \u201cback\u201d brings the user to the top of the initial page, instead of where they left off, especially on pages. Losing their spot forces the user to scroll through content they have already seen. It\u2019s no surprise that users get frustrated quickly with no proper \u201cback-to-position\u201d functionality.<\/p>\n Breadcrumbs<\/p>\n Breadcrumbs are a set of contextual links that function as a navigation aid on websites. It\u2019s a secondary navigation scheme that usually shows the user\u2019s location on a website.<\/p>\n While this element doesn\u2019t require a lot of explanation, a few things are worth mentioning:<\/p>\n Search<\/p>\n Some users come to a website looking for one particular item. They don\u2019t want to use the navigation options. They want to type text in a search box, submit their search query, and find the page they\u2019re looking for.<\/p>\n Take these few basic rules into account when designing the search box:<\/p>\n Content strategy<\/p>\n Perhaps the most important thing about content strategy is to focus the design on page objectives. Understand the goal of the page and write content according to the goal.<\/p>\n Here are a few practical tips to improve content comprehension:<\/p>\n Page structure<\/p>\n A properly-structured page makes it clear where each user interface element is located in the layout. While there are no one-size-fits-all rules, there are a few guidelines that will help you create a solid structure:<\/p>\n Visual hierarchy<\/p>\n People are more likely to quickly scan a web page than to read everything there. Therefore, if a visitor wants to find content or complete a task, they are going to scan until they find where they need to go. You, as a designer, can help them with that by designing a good visual hierarchy. Visual hierarchy refers to the arrangement or presentation of elements in a way that indicates importance (that is, where visitor\u2019s eyes should focus first, second, etc.). A proper visual hierarchy makes it easy to scan the page.<\/p>\n Scrolling behavior<\/p>\n A persistent myth among web designers is that people don\u2019t scroll. To be clear: Today, everybody scrolls<\/a>!<\/p>\n Improving scrolling behavior is possible with a few tips:<\/p>\n Provide visual feedback when loading new content. This is especially important for web pages where content loads dynamically (such as news feeds). Because content-loading during scrolling is supposed to be fast (it shouldn\u2019t take longer than 2 to 10 seconds), you can use looped animation<\/a> to indicate that the system is working.<\/p>\n Content loading<\/p>\n Content loading is worth additional clarification. While an instant response is best, there are occasions when your website will need more time to deliver content to visitors. A bad internet connection could cause a slow reaction, or an operation could take a bit more time to complete. But no matter the cause of such behavior, your website should appear fast and responsive.<\/p>\n Buttons<\/p>\n Buttons are vital to creating a smooth conversational flow. It\u2019s worth paying attention to these basic best practices for buttons:<\/p>\n ociate a particular element\u2019s shape with button functionality. Therefore, consistency will not only contribute to a great-looking design, but will also make the experience more familiar to users. The image below illustrates this point perfectly. Using three different shapes in one part of a website (such as the system toolbar) is not only confusing, but sloppy.<\/li>\n<\/ul>\n Imagery<\/p>\n As the saying goes, a picture is worth a thousand words. Human beings are highly visual creatures, able to process visual information almost instantly; 90 percen<\/a>t of all information that we perceive and that gets transmitted to our brains is visual. Images are a powerful way to capture the user\u2019s attention and to differentiate a product. A single image can convey more to the viewer than an elaborately-designed block of text. Furthermore, images cross language barriers in a way that text simply can\u2019t.<\/p>\n The following principles will help you integrate imagery in your web design:<\/p>\n Video<\/p>\n With increasing internet speeds, videos are becoming more popular, especially considering that they extend time<\/a> spent on site. Today, video is everywhere. We\u2019re watching it on our desktops, tablets, and phones. When used effectively, video is one of the most powerful tools available for engaging an audience \u200a\u2014\u200a it conveys more emotion and really gives people a feel for a product or service.<\/p>\n Call-to-Action Buttons<\/p>\n Calls to action (CTA) are buttons that guide users towards your conversion goal. The whole point of a CTA is to direct visitors to a desired course of action. Some common examples of CTAs are:<\/p>\n Take a few things into account when designing CTA buttons:<\/p>\n Tip: You can quickly test a CTA using a blur effect. A blur test is a quick technique to determine whether the user\u2019s eye will go where you want it to go. Take a screenshot of your page and apply a blur effect<\/a> in Adobe XD (see the example on charity: water<\/a> below). Looking at the blurred version of your page, which elements stand out? If you don\u2019t like what\u2019s being projected, revise.<\/p>\n Web Forms<\/p>\n Filling a form remains one of the most important types of interaction for users on the web. In fact, a form is often considered the final step in the completion of a goal. Users should be able to complete forms quickly and without confusion.<\/p>\n Animation<\/p>\n More and more designers are incorporating animation as a functional element<\/a> to enhance the user experience. Animation is no longer just for delight \u2014 it is one of the most important tools for effective interaction. However, animation in design can enhance the user experience only if it\u2019s incorporated at the right time and place. Good UI animation<\/a> has a purpose \u2014 it is meaningful and functional.<\/p>\n Here are a few cases in which animation can enhance the experience:<\/p>\n Today, almost 50 percent of users<\/a> access the web from mobile devices. What does this mean for us web designers? It means that we must have a mobile strategy for every website we design.<\/p>\n Practice responsive web design<\/p>\n It\u2019s essential to optimize your website for the vast landscape of desktop and mobile browsers, each of which has a different screen resolution, set of supported technologies, and user base.<\/p>\n Going from \u201cclickable\u201d to \u201ctappable\u201d<\/p>\n On the mobile web, interaction is done via finger taps, not mouse clicks. This means that different rules apply when you\u2019re designing touch targets and interactions.<\/p>\n s larger buttons that can be easily pressed with a thumb. When a tap is used as a primary input method for your website, refer to the MIT Touch Lab\u2019s study<\/a> to choose a proper size for your buttons. The study found that the average size of finger pads are between 10 and 14 millimeters and that fingertips range from 8 to 10, making 10 \u00d7 10 millimeters a good minimum-touch target size.<\/li>\n<\/ul>\n Today\u2019s products must be accessible to everyone, regardless of a person\u2019s abilities. Designing for users with impairments is one way that designers can practice empathy and learn to experience the world from someone else\u2019s perspective.<\/p>\n Users with poor eyesight<\/p>\n A lot of websites use low contrast for text copy. While low-contrast text may be trendy, it\u2019s also illegible and inaccessible. Low contrast is especially problematic for users with low vision and who struggle with contrast sensitivity.<\/p>\n Low-contrast text is hard to read on a desktop, but it becomes even more difficult on mobile. Imagine trying to read low-contrast text on a mobile device while walking in bright sunlight. This is a good reminder that accessible visual design is better visual design for all users.<\/p>\n Never sacrifice usability for beauty. The most important characteristic of text and other vital elements on a website is readability. Readability requires sufficient contrast between text and background. To ensure that text is readable by people with visual impairments, the W3C\u2019s Web Content Accessibility Guidelines (WCAG) has a contrast-ratio recommendation<\/a>. The following contrast ratios are recommended for body text and image text:<\/p>\n You can use WebAIM\u2019s Color Contrast Checker<\/a> to quickly find out whether you\u2019re within the optimal range.<\/p>\n Color blind users<\/p>\n It\u2019s estimated that 4.5 percent of the global population<\/a> experience color blindness (that\u2019s 1 in 12 men and 1 in 200 women), 4 percent% suffer from low vision (1 in 30 people), and 0.6 percent% are blind (1 in 188 people). It\u2019s easy to forget that we must also design for this group of users, because most designers don\u2019t experience such problems.<\/p>\n To make design accessible for these users, avoid using color alone to convey meaning. As the W3C states<\/a>, color shouldn\u2019t be used as \u201cthe only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.\u201d<\/p>\n One common example where color is used as the sole means of conveying information is alerts in forms. Success and error messages are often colored green and red, respectively. But red and green are the colors most affected by color-vision deficiency \u2014 these colors can be difficult to distinguish for people with deuteranopia or protanopia. Most probably, you\u2019ve seen error messages like, \u201cThe fields marked in red are required.\u201d While it might not seem like a big deal, this error message appearing in a form like the one below can be extremely frustrating for people with a color-vision deficiency. Designers should use color to highlight or complement what is already visible.<\/p>\n In the form above, the designer should give more specific instruction, like, \u201cThe email address you entered is not valid.\u201d or at least display an icon near the field that requires attention.<\/p>\n Blind users<\/p>\n Images and illustrations are a significant part of the web experience. Blind people use assistive technologies such as screen readers to interpret websites. Screen readers \u201cread\u201d images by relying on alternative text attributed to the image. If that text is not present or is not descriptive enough, blind users won\u2019t be able to get the information as intended.<\/p>\n Consider two examples \u2014 first, Threadless<\/a>, a popular t-shirt store. This page doesn\u2019t say much about the item being sold. The only text information available is a combination of price and size.<\/p>\n The second example is from ASOS<\/a>. This page, selling a similar shirt, provides accurate alternative text for the item. This helps people who use screen readers to envision what the item looks like.<\/p>\n When creating text alternatives for images, follow this guideline:<\/p>\n Keyboard-friendly experience<\/p>\n Certain users navigate the internet using their keyboard, rather than a mouse. For example, people with motor impairments have difficulty with the fine motor movements required for using a mouse. Make the interactive and navigation elements easily accessible to this group of users by enabling interactive elements to be focused with the Tab key and by displaying a keyboard-focus indicator.<\/p>\n Here are the most basic rules for keyb<\/p>\n oard navigation:<\/p>\n You can find detailed requirements for keyboard interaction in the \u201cDesign Patterns and Widgets\u201d<\/a> section of the W3C\u2019s \u201cWAI-ARIA Authoring Practices\u201d document.<\/p>\n Iterative testing<\/p>\n Testing is an essential part of the UX design process<\/a>. And like any other part of the design cycle, it is an iterative process. Gather feedback early on in the design process, and iterate throughout.<\/p>\n Test page-loading time<\/p>\n Users hate slow-loading web pages. That\u2019s why response time is a critical factor on modern websites. According to Nielsen Norman Group, there are three response-time limits:<\/a><\/p>\n Obviously, we shouldn\u2019t make users wait 10 seconds for anything on our websites. But even a few seconds of delay \u2014 which happens regularly \u2014 makes an experience unpleasant. Users will be annoyed with having to wait for the operation.<\/p>\n What usually causes slow loading time?<\/p>\n Tools like PageSpeed Insights<\/a> will help you to find the causes of slow times.<\/p>\n A\/B testing<\/a><\/p>\n An A\/B test is ideal when you\u2019re struggling to choose between two versions of a design (such as an existing version and a redesigned version of a page). This testing method consists of showing one of two versions randomly to an equal number of users and then reviewing analytics to see which version accomplished your goal more effectively.<\/p>\n UX design process<\/a> has two important steps: prototyping the design and developing a working solution. The step that connects the two is called a handoff. As soon as the design is finalized and ready to be moved to development, designers prepare a specification, which is a document that describes how the design should be coded. A specification ensures that the design will be implemented according to the original intention. Precision in the specification is critical, because with an inaccurate specification, the developers will have to either rely on guesswork when building the website or go back to the designer to get answers to their questions. But assembling a specification manually can be a headache and usually takes significant time, depending on the complexity of the design.<\/p>\nDesigning the user journey<\/h2>\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/card-sorting-e1511279350372.jpg\")
Card sorting is a simple way to figure out how best to group and organize content based on user input. One of the reasons why information architects like card sorting is because of the clarity of patterns that typically emerges. Image Source: FosterMilo)<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Tree-Structure-e1511279432361.jpg\")
Tree testing is a reliable method of finding whether users can work with the proposed menu structure. Image Source: Nielsen Norman Group<\/p>\n\n
\n
\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image40-e1511279492958.jpg\")
Knowing which pages they\u2019ve visited keeps the user from unintentionally revisiting the same pages.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/404-e1511279543734.jpg\")
<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image54-e1511279591904.png\")
Distinguishing between different levels of this breadcrumb trail is hard.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image68.jpg\")
<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/search-example-e1511279716956.jpg\")
<\/p>\n\n
Designing individual pages<\/h2>\n
\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/form-3-example-e1511279758544.jpg\")
Image Source: Witteia<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image58-e1511279814919.jpg\")
Image Source: The Daily Rind<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image48-e1511279909170.jpg\")
Text in all caps is hard for users to read.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Layout-grids-example-e1511279953411.jpg\")
Grids and layout systems are part of the heritage of design and are still relevant in a multi-screen world. Adobe XD\u2019s layout grids enable designers to achieve consistent, organized designs for different screen sizes and to manage the proportionsbetween elements by customizing the grids.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image14-e1511280011183.jpg\")
A low-fidelity wireframe created in Adobe XD. Image Source: Tim Hykes<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/201\n\n7\/11\/CNN-F-example-e1511280073807.jpg\")
An F-shaped pattern is used by CNN.![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Basecamp-Z-example-e1511280120898.jpg\")
A Z-scanning pattern is used by Basecamp.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Mailchimp-example-e1511280162677.jpg\")
The \u201cLearn More About Brains\u201d call to action stands out.<\/p>\n\n
\n
\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/14-A-Comprehensive-Guide-To-Web-Design.gif\")
Scroll-activated sticky navigation. Image Source: Zenman<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Tumblr-example-e1511280355964.jpg\")
Subtle animation (such as Tumblr\u2019s loading indicator) tells the user that more content is being loaded.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Tumblr-image-e1511280404483.jpg\")
Tumbler\u2019s signup page uses scroll hijacking.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Facebook-example-e1511280450281.jpg\")
Facebook uses skeleton screens to fill out the UI as content is loaded incrementally.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image16-e1511280513785.jpg\")
Is the orange box in the top-left corner of the screen a button? No, but the shape and label make the element look like one.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image24-e1511280560844.png\")
Don\u2019t make people wonder what an interface element does. Source Image: UX Matters<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image62-e1511280608558.jpg\")
Strive for consistency.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Lloyds-Bank-example-e1511280650685.jpg\")
Images that aren\u2019t related to the topic will cause confusion.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/stock-image-example-e1511280692438.jpg\")
Inauthentic images leave the user with a sense of shallow, false pretense.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Adobe-image-e1511280731247.png\")
A degraded image versus a properly sized image. Image Source: Adobe<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image46-e1511280781472.jpg\")
Facebook videos play automatically as soon as the user reaches them, but no sound plays unless the user enables it.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/video-data-e1511280825641.jpg\")
Image Source: Dmakproductions<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Ted-Talk-example-e1511280873762.jpg\")
Subtitles and transcript will make video content more accessible. Image Source: TED<\/p>\n\n
\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Firefox-example-e1511280945483.png\")
The green of the CTA on Firefox\u2019s page jumps off the page and immediately gets the user\u2019s attention.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Dropbox-example-e1511280996535.jpg\")
The previous version of Dropbox\u2019s home page has a good example of using negative space to make the primary CTA pop. The blue \u201cSign up for free\u201d CTA stands out against the light blue of the background.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Evernote-example-e1511281042685.jpg\")
Evernote has one of the most common yet still effective action-oriented texts for its CTA.<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Charity-wa\n\nter-example-e1511281087893.jpg\")
A blur test is a technique to reveal a design\u2019s focal point and visual hierarchy.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Forms.png\")
Group related fields together. Image Source: Nielsen Norman Group<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image88.gif\")
Users will see this animation and immediately understand the problem. Image Source: The Kinetic UI<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image80-e1511282081926.gif\")
Image Source: xjw<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Visa-example-e1511281277236.gif\")
Image Source: Ramotion<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/HECO-website-example-e1511281329414.gif\")
Image Source: Heco<\/p>\nMobile considerations<\/h2>\n
\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Guardian-e1511281420908.gif\")
The Guardian employs the Priority+ pattern for its section navigation. Image Source: Brad Frost<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/responsive-breakpoint-generator-e1511281469431.jpg\")
Responsive Image Breakpoints Generator helps you to manage multiple sizes of images, enabling you to generate responsive image breakpoints interactively.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/button-padding-e1511281517418.jpg\")
Smaller touch targets are harder for users to tap than larger ones. Image Source: Apple<\/p>\n\n
Accessibility<\/h2>\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image82-e1511281567766.jpg\")
Gray text on a light-gray background is hard to read. The experience will be far from good, and the design simply won\u2019t work.<\/p>\n\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image99-e1511281651786.png\")
Bad: These lines of text do not meet the color-contrast ratio recommendations and are difficult to read against their background.![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image6-2-e1511281602130.jpg\")
Good: These lines of text follow the color-contrast ratio recommendations and are legible against their background.<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Color-checker-e1511281696984.jpg\")
<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/form-2-e1511281746931.png\")
Bad: This form relies only on red and green to indicate fields with and without errors. Color blind users wouldn\u2019t be able to identify the fields in red.<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/form-4-e1511281785224.jpg\")
Good: Icons and labels show which fields are invalid, better communicating the information to a color-blind user.<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/Threadless-example-e1511281823769.jpg\")
<\/p>\n![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/ASOS-e1511281855339.jpg\")
<\/p>\n\n
\n
Testing<\/h2>\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image36-e1511281894713.jpg\")
Image Source: Extreme Uncertainty<\/p>\n\n
\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/image34-e1511281954368.png\")
Image Source: VWO<\/p>\nDeveloper handoff<\/h2>\n
![\"\"](\"https:\/\/theblogimages.adobe.com\/wp-content\/uploads\/2017\/11\/design_specs_image-1-e1513613421437.png\")
Adobe XD\u2019s design specs feature (in beta).<\/p>\n