The top 101 things to consider when designing visually beautiful interfaces. Use this to self-critique any of your designs whether it's homework from this course or your own projects.

👉 Start

• [ ] Do I have a very solid understanding of the human problem I'm solving with this interface?
• [ ] Is this a low, medium, or high complexity project and have I let that drive my decision for designing a low-fidelity version or not?
• [ ] If I'm using reference material, would I feel comfortable putting my design next to the reference and talking through the areas I used for inspiration, without giving the impression that I copied or created a very close derivative?
• [ ] Have I had the necessary conversations with stakeholders and/or developers about the goal of this project and its ability to be implemented. In other words, am I aware of business and/or technological constraints?

🅰️ Typography

• [ ] Have I chosen font sizes very deliberately (ideally 2-4 per screen or section) and pushed myself to use as few as possible?
• [ ] Am I sure there's not a single straggling font size lying around somewhere that could be matched up with another size?
• [ ] Are there any areas where font weight would be a better change instead of font size?
• [ ] Are there any areas where font case—whether UPPERCASE, Title Case, or Sentence case—would be more affective that a font size change?
• [ ] Does the visual hierarchy of my typography content match my intentions with what is the most important on the screen?
• [ ] Do my titles and body copy feel right together? Am I playing with type scale in a fun and dynamic way?
• [ ] Have I defined the usage of certain sizes and/or colors for my typography, whether in my own head or specifically written documentation?
• [ ] Are my typographic color choices extremely well defined, a specific color for links, actions, buttons versus read-only text, and is there anywhere that can be improved?
• [ ] If applicable, are there any areas where I could add more visual interest to my typography by adding any decorative or informational elements in the surrounding area?
• [ ] Have I intentionally chosen a specific typeface for specific reasons?
• [ ] If I haven't used system or open source fonts (SF Pro, Roboto, Inter, Helvetica, etc.) have I done due diligence on purchasing the appropriate font licensing and/or checked with stakeholders or developers if the font I've chosen is approved and/or can be used during development?
• [ ] Does the typeface I've chosen convey the right personality or feeling that I want to convey?
• [ ] Have I considered adding the ability for a user to choose their own type size based on their preference, and if not have a made sure that the most important content is no smaller than 16px?

📐 Layout

• [ ] Have I used the box model concept while laying out out every element of my designs, or are there a few stragglers here and there that I haven't been intentional about?
• [ ] Have I used a clear grid structure with properly aligned elements that visually balance each other out? (12 column, etc.)
• [ ] Have I used an intentional implicit grid for all of the negative space surrounding the elements in my layout, especially to define intentional relationships with my content?
• [ ] Does my design have enough negative space?
• [ ] Are there elements in my design where the negative space could double to create a much nicer layout?
• [ ] Does anything feel too crammed or too tight and have I considered layering the information where necessary to create more simplicity?
• [ ] Is all of the text left or right aligned and scannable where applicable?
• [ ] Does my eye have to dart around all over the screen to view the content or is there a nice line of continuation I can pay attention to while viewing?
• [ ] Are my interface elements balanced compositionally with layout anchors?
• [ ] Are there any areas where my designs have been mathematically aligned, but still feel off? Have I correct these with optical alignment?
• [ ] Is the density of my design appropriate? Is it tight and condensed because of the high volume of information? Is it a medium density? Are there ways to add more negative space to have a more open and friendly feel with a lower density layout?
• [ ] Are there any areas where I could create more intentional prioritization of content by using scale or visual weight with background color changes, etc.?
• [ ] Is there appropriate affordance given to the interactive objects on the screen? Is it easy to see what's scrollable, swipeable, tappable, etc.? Are there areas where I know that it could be made more clear?
• [ ] Have I fully considered expandable/collapsible or other interactive options for some of the components? Does everything on the screen need to be on the screen or is there a more elegant solution for the content that involves adding another page or another section?

🎨 Color

• [ ] Have a made a conscious choice between using HEX codes, RGB values, or HSB/HSL section methods? Have I leveraged the power of HSB to create a full color scheme?
• [ ] Have I double checked to make sure that all of my interface elements have appropriate color contrast and meet at least WCAG 2.1 AA accessibility standards?
• [ ] Have I made a very conscious decision about my structural colors versus my interactive colors?
• [ ] Have I clearly defined a primary, secondary, and possibly tertiary CTA (call to action) color and used it accordingly?
• [ ] Could my secondary styles and colors be tweaked slightly to better complement the primary CTA?
• [ ] Have I very strategically defined all of my color usages to create an understandable framework for future color usage? Is there room for improvement?
• [ ] Does my color palette follow a systematic and intentional method for color selection based on a base HUE?
• [ ] Is there room to provide a secondary HUE for structural or interactive colors or is the one I've chosen adequate?
• [ ] Is there any opportunity for using a well-placed gradient? If I'm using a gradient have I double checked that any text used in combination with it is accessible?
• [ ] Have I specifically chosen a very strict set of greys, if applicable, for my entire project across every screen?
• [ ] Are there any greys that are very close in color that could be combined and simplified?
• [ ] Have I revised and/or adjusted my overall color palette to include all colors and usages of those colors for every single element?
• [ ] Have I considered the Z-axis of my layout and how white, grey, and darker colors create a natural depth? Are the objects closest to my foreground the lightest in color?
• [ ] If my UI is dark in color, have I been extremely conscious with the overall contrast and meticulously chosen each color?
• [ ] If my UI is dark in color, have I reserved absolute white and absolute black for specific pieces of the interface? Is there any room for almost black or almost white, with subtle changes in color?

💅 Style

• [ ] Have I consciously decided on a specific design direction?
• [ ] Can I intentionally describe my designs with specific adjectives?
• [ ] Have I considered the constraints of the medium I'm designing for and how that should and will affect my designs?
• [ ] Have I very consciously chosen specific corner radius styles? Should they be hard edge, slightly rounded, very rounded, pill-shaped?
• [ ] If I have chosen specific corner radius styles for modules, buttons, etc. have I explored other options to see if there are better alternatives that specifically map to the type of style I'm trying to achieve?
• [ ] Have I very specifically chosen a certain type of border or divider for my content?
• [ ] Have I considered using only negative space to create a separation of content rather than relying on a line or separate modules?
• [ ] Have I made sure my borders or dividers don't overpower the actual content? Could they be toned down to shift focus on the most important areas of the designs?
• [ ] Have I considered depth, lighting, and shadow to the best of its potential? If I'm using any type of depth as a metaphor, are my darkest elements going back into the design and my brightest elements coming forward intentionally?
• [ ] Have I strongly considered how my buttons are interacted with? Hover states, tapped states, etc. Are there any fun animations that I could add to double-down on the direction I'm trying to achieve?
• [ ] Are my buttons working as hard as they should be to create laser-like focus on the most important actions on the screen when applicable?

🌆 Imagery

• [ ] Knowing that great imagery will make my designs 10X better than subpar imagery, have I intentionally chosen, selected, sourced, or created the absolute best possible imagery for my designs (if applicable)?
• [ ] Does the imagery I'm using make my designs better or is it distracting?
• [ ] Am I intentionally using a static image in my designs that will never be changed, or is there an opportunity to create something more dynamic based on events or user action?
• [ ] Are there places in my design where I can leverage emoji (like on these checklist titles) to create a more unique design?
• [ ] Am I using a rasterized bitmap image when I could be using CSS or an SVG in place of it?
• [ ] If I'm using dynamic imagery in my designs, have I stress tested for all black or all white images to make sure the design still works?
• [ ] If my designs contain user-generated content, have I carefully considered empty states, the ability to change the imagery, the ability to create and/or upload the imagery?
• [ ] Are there smart defaults that look nice when no user generate content has been added?
• [ ] Am I using any imagery that is only "so-so" and not adding great value to the design?
• [ ] Have I paid special attention to any icons used in my project?
• [ ] Are my icons following a strong pattern of size, color, stroke, fill, etc.?
• [ ] Are my icons decorating or interactive and have I made that extremely clear with the designs?
• [ ] Are there any opportunities to create a simple custom illustration (line, shape, pattern, etc.) to add more visual interest to the design?
• [ ] Have I considered how the products marketing site or branding should or will impact the interface?
• [ ] Is there an app store icon that needs to be designed? Are there opportunies to create a fun branded experience between the app icon, the loading screen, and the default view of the first time a user launches the app?
• [ ] If I'm designing a website have I designed a custom favicon that shows up in the browser tab as an extra little detail for my project?

🖥 Elements

• [ ] Does my project have a clear navigation structure and ideally prioritize the top 5 or fewer links or sections?
• [ ] Have I strongly considered how my input fields function (default, hover, focused, disabled, error, etc.) and created a very clear state design for all possibilities?
• [ ] Do my input fields match the overall style and direction of the project?
• [ ] Are the forms I've designed absolutey necessary and require the most critical information?
• [ ] Have I very clearly communicated the reasons for requiring certain information?
• [ ] If applicable, have I made it clear that certain pieces of information are required for the progress of the user through the app or site?
• [ ] Have I considered all the variables and/or error states if some information is not gathered properly?