Checklist Design is a collection of some of the best UI and UX practices. It provides an honest and rewarding experience to users, and as a result, it allows them to take in the knowledge they need to get a solution and understand how they got there.
We will take you through all the important features of Checklist Design so that you can determine whether it is a good option for you.
What Is Checklist Design?
Checklist Design is a product that is designed to help designers, developers, and makers that need help making sure that they do not miss something important when working on a project. It is exactly what the name suggests. It is a checklist of the most important things to keep track of when working on a project.
By using this product, users will be able to ensure that their project is completed the right way. Additionally, it helps developers avoid going back to old sections of a project as they make progress. It essentially makes working on a project more efficient. That being said, there are checklists for all kinds of things.
Checklists for Specific Pages
There are a variety of pages that need to be made when building a website. Here are some of the options from Checklist Design and the checklist items attached to them. Please note that we are only featuring the required elements from each checklist, not the optional checklist. You can follow the links to each page to see the optional options on each checklist.
- Login – A login page should include your logo or a symbol mark, and it should show the user where to login. It should include a unique identifier for the user. It can also be helpful to give the user the ability to see their passcode while they create it. Additionally, you should add a link to reset passwords, and a link to sign up.
- Pricing – A pricing page should immediately show all the pricing plans or one off purchase options. Additionally, it should display the features that the user gets with each plan. If you want to include a free trial, there should be a clear link to claim it, and it should clearly state the length of the trial. Finally, it is important to display the refund or return policy.
- Contact Us – The contact us page does not need to be extravagant, but it should have a visual character and tone that matches your brand. Furthermore, it is important for the contact methods to be clear and easy to find. There is no need to get too fancy with this page. Additionally, it can help to link to your social media on this page.
- FAQ – Make sure that each featured FAQ is providing users with purposeful information. Additionally, it is a good idea to link to your Contact Us page so that users can contact you if the FAQs did not cover their question.
- Careers – Provide information on how your business started and provide all up to date information on the current state of your team. Display employee perks and benefits clearly and try to avoid gimmicks. It can also be a good idea to show a breakdown of the team members and estimated numbers for each area. Finally, list all the job openings and working locations.
- Team – The Team page should have a theme that conveys the personality of your team. Additionally, you should provide an estimation of your team size. If you have a small team, you can display each team member individually. Finally, you should include photos or illustrations of the team to provide a more personal feel.
- Cart – Metadata items should be added to the cart page, and users should have the ability to easily add or remove items. Clearly display the shipping options, and provide users with a clear field to enter discount codes. Additionally, it is important that you display all of the accepted payment methods. You should also have a link to support. Finally, make the link to checkout clear so that there is no confusion.
- Blog – If you have a blog, you should include a clear indicator that it is a blog. You should also include a search function and improve the layout so that there are sections for different topics. Additionally, it can help to have previews of each blog post so that people know what they are getting before they click. Finally, add social sharing tools so that your pages can reach a wider audience.
Elements Checklists from Checklist Design
Checklist Design also provides checklists for elements. These are fundamental building blocks for an interface, and as a result, it is important to make sure that you build them properly. Here are a few of the available checklists.
- Avatar – The first thing that should be added is a visualizer that shows what the avatar looks like before an update. You should add a link to easily upload an avatar. Additionally, it is important to have a placeholder image for users that have not uploaded an avatar. You should note that it is also important to tell the user which file types are accepted.
- Text Field – The text field should include an interactive area where users can enter their data with text size that is readable on all devices. Include labels that easily identify what should be displayed. Placeholder text can be helpful to users that do not know what to write in each section. Finally, set text fields to all the relevant text values.
- Loading – A visual indicator for loading is valuable, and text to explain the loading state can be as well. On longer loading screens include an estimation of time to completion. Make sure that the loading state can be clearly seen. This can be as simple as a loading bar at the bottom of the screen.
- Tooltip – Tooltips should provide clear and concise information, and they should contrast with the background. It is essential for the tooltip to be highly visible.
- Search – The search field should be easy to find and it should include a clear space for users to type. Placeholder text can be a good idea to add. Additionally, autocomplete can be helpful for users that are searching for specific phrases. Finally, there should be a visible link to submit search and view results.
Flow Checklists from Checklist Design
There are several flow checklists that are available from Checklist Design as well. Here are a few of those checklists.
- Submitting a Form – This flow should show the button to submit, followed by the loading state after submitting. A success message should then be displayed, and if it does not work there should be an error message. If there is an error, provide possible explanations such as the user entering information incorrectly.
- Making a Payment – Provide payment methods, request card details, and submit payment. Display the payment processing page and show a confirmation screen once it has been processed. Finally, outline the next steps for the user.
- Entering a Promo Code – It is important to make the promo code input field very visible. Have a status indicator that shows whether the promo code as been accepted or declined. If it is accepted, display the effects of the promo code. Finally, add an option to remove the promo code if the user does not like the effects.
- Saving Changes – Clearly display the action to save changes and have the state change to active once a change is made. Changing the brightness of the Save Changes button brings the action to the user’s attention. Display a loading state once Save Changes is pressed. Finally, notify the user when the changes have been successfully implemented.
- Canceling Subscription – Provide a clear link for users to cancel their subscriptions. Make sure that you include a follow-up page for users to confirm their intent to cancel. Request a reason for canceling so that you can learn how to better retain subscribers. Finally, display a cancellation confirmation page.
Additionally, there are several topic checklists from Checklist Design that can be helpful when building a website. Here are some of the most popular checklists.
- Responsiveness – Have a fluid layout that is accessible on all devices. Identify when to change your structure and adjust the size of your text based on the device size. Additionally, change the selection area based on the size of the device.
- Accessibility – Sizing can establish a hierarchy of importance of information. Determine whether visual items can convey information better than text or colors. Include meta descriptions of images. Add interactions that display what will change when hovering over a link or item. Finally, the size and structure of certain elements may need to be changed for different device sizes.
- Colors – Think about how each color impacts how people think and feel. Take into account how your brand colors incorporate into the experience. Use contrasting colors to emphasize certain areas. Finally, take the time to learn which colors work best together, and which combinations should be avoided.
Brand Checklists from Checklist Design
Finally, there are brand checklists from Checklist Design for users to use. Here are a few of the options.
- Logo – Provide several color variations for your logo so that it can appear on different pages. Make your logo flexible in terms of sizes.
- Social Media – Your company’s social media should have a clear username that identifies it. The avatar should be consistent across all platforms. Do not change colors from your website to social media. Additionally, your tone of voice should be consistent with the one on your website.
- Tone of Voice – Understand your audience and adjust your tone accordingly. Identify your core values and how that is conveyed in your tone. Maintain the same tone of voice in all areas.
How Much Does Checklist Design Cost?
Checklist Design is completely free to use. That being said, the creator does appreciate donations via the Buy Me a Coffee service if you have used his product and found it useful.
What Does the Maker Have to Say?
“The idea came up during my time at Mizko Media, where we made websites and products for (mostly) Australian tech start-ups. No matter how many times I went through the process before, there were always small touches and moments I missed along the way. Having to go back to these after supposedly wrapping up, or having a developer point out the flaws was taking up unnecessary time.” George Hatzis, Creator of Checklist Design
What Do Users Have to Say?
“The designer in me became a student going through the checklist. Mainly I loved the inspiration examples for all the UI/UX scenarios. Thanks for doing this and great job George!” Sharath Kuruganty, Product Hunt User
There are very few free services out there that provide as much value to people as Checklist Design. It is not overly complex, but you would not expect that from a free service. Instead, it provides users with an easy place to make sure that they are not forgetting things when working on a project.
Developers and designers that are working on building websites and other similar UX and UI projects should find Checklist Design very helpful. Even if you do not, it is a free service and easy to use. There are no strings attached, so there is no reason not to give it a try.
Residing in Ontario, Canada, Alex is a full time freelance writer. He’s been in the business for 4 years and is an SEO and WordPress expert.