UI Checklist | Notion

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.

<aside> ⚠️ You can create your own copy of this list by clicking Duplicate in the top right. Please don't share this list public, it's for Shift Nudge subscribers only. 🙏

</aside>

👉 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?
[ ] If my project has user profiles, have I considered what it will look like the first time it's used, after information has been added? Are the mechanisms for editing information abundantly clear or is there room for improvement?
[ ] Have I carefully considered the implications of a settings screen?
[ ] Have I done the hardwork of creating smart defaults for the user and not used the settings screen as a dumping ground for all possible changes?
[ ] Have I carefully chosen lists and/or card-based layouts in my designs based on the volume of information?
[ ] Are the any missing components to my designs that might not be needed now, but could be very useful in the future, eg. table designs, etc.?
[ ] Have I considered the states and function of all of my components and created a well-organized file system?
[ ] Is there a need to turn my clean and organized file-system into an actual design system to be used for other projects?
[ ] Are there more people on my team (stakeholders, developers, etc.) who need visibility into the choices I'm making for naming components, etc. and should they have an opinion or a say into what things are called as well?

💪 Tactics

[ ] Have I explored LOTS of alternative versions of what I'm trying to design and by process of elimination decided on what works best?
[ ] If my project is slightly more complex than the average project, whether because of features or team size, have I spent enough time getting everyone on board with how the app should function by using low-fidelity designs?
[ ] If my project is a web-based project, have I fully considered the mobile version and used that as a way to force prioritization of features and layout?
[ ] If my project is an application, have a used a mobile-first approach to create simplicity up front?
[ ] If my project is more of a marketing site, have I designed and explored really nice and impactful desktop versions before confining myself too much with mobile versions?
[ ] If my project is an iOS app, have I made intentional decisions about where to follow the Apple HIG (human interface guidelines) or where to deviate from it? If I've deviated, do I have a VERY good reason to do so and are the stakeholders and developers OK with this?
[ ] If my project is an Android app, have I made the decision to exclusively use a material design system, or do I have strong reasons for not doing that?
[ ] Have I used very intentional placeholder copy and/or images in my designs that could support specific users, etc.?
[ ] Have I told a story with my designs (based on features) and could I effectively present my designs using what I've created?
[ ] Are my designs organized in a clear way to showcase specific features and flows?