A framework to make design decisions, Laws of UX, DrawKit, 404 pages, button hovers, how DrawKit's landing page builds trust

Edition #004 of Design Insight

Hello and welcome back to the newsletter 👋

Before we start:

Have something you want to recommend?

  • A landing page or no-code product design you'd like me to review

  • A design tool or resource you use often

  • A web article that explains some aspect of design well

DM me over on Twitter and if your recommendation is included I'll mention you in the newsletter.


3 Design Library Items

Article - A framework to make great design decisions

Author: Chris Lee

Source: UX Collective

Here's what I learned from reading this article:

  1. As a UI/UX designer, your value comes from making good design decisions. If design could be automated there would be no designers!

  2. To make critical decisions you need to break the problem down into first principles, then make a decision based on the expected value.

  3. Expected value is a way of making a decision without all the information. To do this you determine the impact of each of the options and multiply that by your guess as to how likely it is to occur.

Link To Article: A framework to make great design decisions

Laws of UX

  • Laws of UX is an excellent resource created by Jon Yablonski.

  • It contains a vault of UX best practices that are helpful to know when designing interfaces.

  • Each Law, Heuristic, and Cognitive Bias is laid out in a visual and easy-to-understand way.

  • I recommend you bookmark this resource and read one entry a day to develop your UX skills.

  • Laws of UX website

DrawKit

  • As someone that's trying to incorporate more illustrations into my designs, I'm always on the lookout for great resources.

  • DrawKit features a repository of excellent hand-drawn illustrations.

  • There are premium illustration packs on offer but the free ones are perfect if you're getting started.

  • DrawKit Free Illustrations - Website

Psst - DrawKit is also the featured design in this week's UI review down below 👇


2 UI/UX Design Tips

Don't leave the user stranded on a 404 page

Don't forget to customize your 404 page. That is the page that's shown when someone tries to access a URL that doesn't exist.

Here's the formula for a good 404 page:

  • Clarity - clearly explain what happened to the user

  • Next step - give an obvious call to action so the user can continue using your site

  • Link to homepage - include a link to the homepage so the user can start over

Style button hovers consistently

Be consistent with how you style button hover colors

If you darken a primary button on hover, do it for all buttons. This creates a sense of consistency.

Don't lighten one button on hover then darken another button.


1 UI/UX Review

How DrawKit's Landing Page Builds Trust With New Visitors

Last week's edition that featured Buy Me A Coffee's landing page was well received so let's continue that momentum with DrawKit!

I'll break down each aspect of the hero section of DrawKit's landing page and show you how this design builds trust with new visitors.

We'll concentrate on these 4 aspects:

  1. Simple headline

  2. Sign up option

  3. Brands build credibility

  4. Sample illustration in action

1 Simple headline

The headline "Beautiful, free illustrations. Updated weekly" is simple but it says a lot:

  • You're getting high-quality illustrations. People want professional quality components for their websites.

  • They're free. People want to know the cost of something upfront.

  • They're updated each week. People want current and up-to-date components, not old and outdated ones.

As you can see we were able to get a lot from 2 very short sentences.

The sub-headline expands further to tell you what you get and how you could use these illustrations:

"Hand-drawn vector illustrations and icon resources, perfect for your next project".

Here's what we learn from this sentence:

  • They're hand-drawn. This will create a unique aesthetic for someone's website.

  • Vector-based illustrations. These are ideal to work with as they scale and resize well.

  • Illustrations and icons. They have multiple uses, not just as accompanying imagery.

  • Perfect for your next project. These resources could be used in any type of project you're working on.

Again, we can tease a lot from a clear, concise sentence like this one.

2 Sign-up option

The sign-up option as I'm calling it is a great idea for a site like this that offers design resources.

It acts like a read-it-later feature where you can have the content sent directly to your inbox.

This can be helpful if you don't have the time to scour the website to find a particular illustration.

With that said, it's not clear how many people are on this mailing list. Including the number here could increase their credibility further.

3 Brands build credibility

Including a list of brands like this that use your product is a great way to build credibility. Having it in the hero section also makes it a prominent feature of the landing page and one of the first things you see.

If companies like Google and Amazon are using these icons, they must be worth using.

I'd also be interested to see where companies like Invision, Toptal, and Google actually use these icons. This could be a dedicated page to further build credibility as well as provide inspiration to new users.

4 Sample illustration in action

This is fast becoming a common theme among the landing pages I review but it is worth repeating.

Show your product in action.

The hero section here features a beautiful illustration that animates and changes every few seconds.

This perfectly showcases how these illustrations can be customized and used.

From a design perspective, it also adds visual interest to the page as my eyes were immediately drawn to it after reading the headline.

TL;DR

To design a landing page that builds trust with your audience:

  • Have a clear, concise headline and sub-headline

  • Give users the option to read it later

  • Include trusted brands that actually use your product to build credibility

  • Showcase your product in action

DrawKit Website


If you would like to support my creative work you can do so over on Buy Me A Coffee. Let me know if you’d also like a shoutout on the newsletter 🥳

You’ve reached the end of this week’s edition of the Design Insight newsletter. Thank you for reading, I truly hope you found value in the insights I shared today.

Til next week 👋

Michelle