Checklist Design

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

Checklist Design Helps You Build Your Website Correctly

 

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.
  • FAQMake 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.
  • LoadingA 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.
  • TooltipTooltips 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

Checklist Design Helps You Build Your Website Correctly

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 PaymentProvide 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 SubscriptionProvide 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.

Topic Checklists

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.

  • ResponsivenessHave 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 VoiceUnderstand 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

Final Thoughts

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.

Top 7 eReaders in the Market Right Now

If you are a book enthusiast, it does not take long for a small library to develop in your home. While a large book collection can be visually pleasing, it can quickly get out of hand and lead to a lot of clutter. However, if you purchase an eReader you are able to contain all of the books you are planning on reading. Even if you prefer physical books, not...

Resume Builder: How Young Developers Can Build Their Resumes

Everyone needs a resume, but it can be difficult getting started, and it can be even more challenging editing a pre-existing one. Resume Builder is a great tool for developers that need to optimize their resumes. Resume Builder allows users to upload their existing resume and have it optimized. Alternatively, they can build a new one from scratch. They can then easily showcase their skills and experience to recruiters so...

Use Stepsize to Track, Prioritize, and Eliminate Tech Debt

Stepsize is one of the best issue trackers for engineers on the market. With this tool, engineers will be able to track, prioritize, and fix code easier than ever before. Keep reading to learn everything you need to know about this high-end tool! We will walk you through the key features of the product and why it is a popular option amongst engineers. What is Stepsize? Stepsize is the only...

5 Free Online Tools to Grow Your Business

Whether you are building a new startup or have already founded a company, you need to learn and do a lot of things to grow your business. If you have limited resources and time, you should consider using free online tools. Luckily, there are a ton of free online tools that can help you stay within your budget and scale your company. By simplifying your marketing and management processes, they...

10 Useful Free Online Courses

Learning is a lifelong key to success. With the rapid development of science and technology, there’s an obvious pressure to constantly learn new skills. Although it can be challenging, if you want to make your career progression or dive into a new field, you should improve your skills. You can use podcasts or blog posts to explore a certain topic. However, if you want to be pretty good at it,...

What’s New in Canva: Latest Features in 2021

Canva brings a handful of new features and capabilities to your app, including new game templates, integration with Google Sheets and image style match. This is not all. We are excited to write about their latest launch of Canva Video Suite. We’ll walk you through all the new improvements, but first, let’s dive deeper into what Canva is. About Canva Launched in 2013, Canva is a graphic design and publishing...

MacBook Pro 14-inch vs MacBook Pro 16-inch: which is better?

During the Unleashed event, Apple formally unveiled the new 14-inch and 16-inch MacBook Pro notebooks that are the best laptops for creative professionals I have ever reviewed. The MacBook Pro lineup has been updated with considerably increased battery life and new powerful processor that is far faster than last year’s M1. There are two next-generation chips to choose from: M1 Max with up to 32GB and M1 Pro with up...

Improve Team Morale and Employee Recognition with Assembly

Assembly is a tool that allows users to set up their business’s workplaces. With Assembly, users are able to give team members context and understanding so that they can work together more effectively. With Assembly, users will be able to build and automate their workflows so that they can save time, and reflect on their processes, priorities, and goals. While there are many tools out there that aim to optimize...
Scroll to top of page