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.

Looka: Generate a Brand You Love, Fast

One of the biggest stumbling blocks for any new business is designing brand assets. Few new contacts will take you seriously without a logo in your email signature or an avatar for your social media channels. Looka is an incredibly helpful site that enables you to employ the power of AI to generate a custom logo for your new business and, with it, the brand assets you need. You don’t...

Canva Review: Designing Tool For Beginners and Professionals

The world of graphics design has seen phenomenal growth over the last few years. Designs unimaginable in the past are easy to create today. Designing tools and suites have discovered crazy, creative geniuses from all over the world. One of these high-performing design tools is Canva. It opens up a wide array of easy, attractive designs that fulfill personal as well as professional interests. If you are a budding designer,...

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

6 Top UI/UX Design Software Solutions

Entrepreneurs and marketers focus on the visual appeal of their websites to make customers stay there. Showing extra creativity, businesses draw their attention, though users visit hundreds of websites every day. From planning to launching, each step of the product development process is implemented by a whole range of tools. It is essential to keep an eye on the latest UI/UX design solutions to stay in the game. Using the...

Create Millions of Designs with the Noto Illustrations Pack

Noto is an illustrations pack for people that love Notion-style avatars. It lets users build their own custom Notion-style avatars with 120 mix and match items. With this tool, users are able to customize hairstyles, beards, face shapes, and all other aspects of their avatars. It is also completely compatible with Sketch, Figma, SVG, and PNG. Who Made It? The Noto illustrations pack was made by Felix Wong, an entrepreneur,...

The Ultimate Review of the Wix Website Builder for 2021

When I first used Wix to set up my website, I was surprised how much easier it was as compared to coding a website or even using an open-source content management system (CMS) platform like WordPress to create a website. After just an hour of playing around with the drag-and-drop interface of the website builder, I was comfortable enough with its use as it is very intuitive and user-friendly. However,...

ProApp Learn Design: Learn over 50 design disciplines in a bite-sized way

ProApp Learn Design is an app that lets you learn design principles in a bite-sized way. The app has over 50 design disciplines that you can learn on the go, without having to dedicate too much time to it. It calls itself a digital design college. ProApp Learn Design has launched with over 30 courses in UI/UX design, HCI, Mobile & Web Design, Typography, Microcopy, and more. Who made it?...

3D Characters & Illustrations Set from ByPeople: Get High-Res 3D Characters and Illustrations

3D Characters & Illustrations Set from ByPeople is a collection of detailed and high-resolution 3D illustrations and characters for any and all purposes. Not only are they high-quality, but they’re also available with different ethnicities and professions. They’re available for download as individual files with transparent backgrounds and a 4000px square resolution. Who made it? 3D Characters & Illustrations Set is from ByPeople, a marketplace that sells graphical elements like...