14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
Designing user interfaces is no easy task. With countless choices around layout, spacing, typography, and colour, it’s easy to feel overwhelmed. And when you layer in considerations like usability, accessibility, and human psychology, the challenge only grows.
But here’s the good news, UI design doesn’t have to feel so complex. After more than 20 years as a product designer, I’ve found that most of my visual and interaction design decisions are guided by a clear set of logical guidelines. Not by artistic genius or gut instinct, but by straightforward guidelines.
Of course, creative flair comes in handy, but much of what makes an interface intuitive, inclusive, and visually pleasing can absolutely be learned. Having a structured approach allows you to make smart, consistent design choices. Without it, you’re essentially relying on trial and error to make things “look right.”
And the best way to learn? By doing. So let’s start applying some UI design tips. All design tips are from my Practical UI design book and the example interface was created using my Figma design system.
UI design tips to fix an example interface
The following design is for the profile page of a community blogging platform. The first example is the original design. The second is the result of quickly applying some logic-driven UI design tips.
Even if you don’t have much experience with UI design, you can probably tell that the original design just doesn’t feel “right”. That’s because it contains a bunch of design flaws that can negatively impact usability. You might already have spotted some of them.
Now, let’s walk through the process of improving the original design, addressing each issue step by step with these UI design tips:
1. Space elements based on how closely related they are
The amount of spacing between interface elements should depend on how closely related the elements are. More closely related elements should generally be closer together to show that they’re related. Unrelated elements should be separated by placing more space between them.
Using spacing in this way is one of the most powerful methods of breaking up information into smaller groups. If you think of each group as a rectangle, you’ll start to notice that interfaces are made up of many small rectangles within larger ones. Start by applying small spacing to the innermost rectangles and gradually increase the spacing between rectangles as you move outwards.
Deciding on the ideal spacing between interface elements can be a frustrating and time consuming task. There are endless options to choose from. Rather than using trial and error, one pixel at a time, create a simple set of predefined spacing options to make decisions faster.
Set simple t-shirt sized spacing options based on increments of 8 points. This is also known as using an 8 point grid, as all interface elements will end up aligning to a series of vertical and horizontal guidelines separated by 8 points. For more detailed interfaces, you could use 4 point increments for a bit more control.
Much like a typography scale, your spacing options should grow by larger amounts as they get bigger. This ensures that spacing is proportional for larger interface elements.
In our example, only the extra small (8pt) and small (16pt) predefined spacing options are used between rectangles, regardless of how closely related they are. This results in a design that looks cluttered, squashed, and difficult to understand. Increasing the spacing between elements based on how closely related they are helps to clearly separate and group content.
Here’s what our example looks like before and after the predefined spacing options are applied.
2. Ensure interface elements have a 3:1 contrast ratio
Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are lots of tools and Figma plugins to help you measure colour contrast, my favourites are the Web AIM online contrast check tool and the Contrast Figma plugin.
In order to help ensure people with vision impairments can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. This means user interface elements, like form fields and buttons, need to have at least a 3:1 contrast ratio.
In our example, the contrast of the icons and buttons is too low. The risk with the low contrast buttons is that people with low vision might not identify them as buttons, as they can’t see the button shape. Adding a border with sufficient contrast to the buttons makes them accessible. The light grey background fill is also removed from the buttons, so people don’t mistake them for being disabled or inactive. The low contrast of the icons is easily fixed by using a darker shade of grey.
3. Use a single primary button for the most important action
For most website or app projects, you’ll need 3 button weights to indicate the importance of actions: primary, secondary, and tertiary. You may also require smaller and/or larger button sizes depending on the complexity of the interface.
The following button styles are familiar, accessible, and have a clear visual hierarchy that isn’t dependent on colour alone. They’re not the only way to style buttons, but they’re a safe option. Learn more button design tips to avoid common mistakes.
The purpose of a primary button is to highlight the most important action on an interface. This helps people understand what to do next in order to complete their task.
Guidelines for using primary buttons:
If there isn’t a single most important action on an interface, use secondary or tertiary buttons for those actions.
Avoid using multiple primary buttons on a screen. They can compete for attention and cause confusion around what to do next.
In our example, let’s assume that the “follow” action is the most important and make it a primary button.
4. Ensure buttons have a sufficient target size
Small targets are more difficult to click or touch than large ones. This is especially true for those with impaired motor control, or even someone holding their phone with one hand and using their thumb.
Try and stick to the following guidelines to ensure buttons (and other interactive elements) have a sufficient target size:
Make buttons at least 48pt by 48pt in size. This aligns with an 8pt grid and is slightly larger than the WCAG recommendation of 44pt by 44pt.
Make frequently used buttons even larger to improve efficiency and to help avoid them being missed.
Separate buttons by at least 8pt to help prevent people mistakenly pressing the wrong one.
In our example, the target size of the 2 buttons is already sufficient, but there’s plenty of room to make the buttons wider. Since there’s room, you can widen the buttons to increase their target size.
5. Make sure important content is visible
People don’t use what they can’t see. Hiding things behind interactive menus is a convenient way to keep an interface clean and minimal, but it’s risky, as some people might miss those things. If there’s space, try to ensure important content and actions are visible when they’re needed.
In our example, actions are hidden inside an interactive menu to help declutter the design. While it looks clean and minimal, there’s a risk that some might miss the actions. Since there’s space to display the 2 actions, “share” and “bookmark”, make them visible to help ensure they’re not missed.
6. Decrease letter spacing for large text
A small trick to make large headings look better is to decrease their letter spacing (space between letters). How much you decrease letter spacing depends on the typeface and size, but generally, you’ll want to decrease letter spacing more as text gets bigger.
This is because many typefaces were designed to be read at small sizes in long body text. They’re known as “text type” typefaces and have wide letter spacing to make them more legible at small sizes. You probably won’t need to decrease letter spacing for “display type” typefaces, as they were designed to be used at large sizes and generally have closer letter spacing.
In our example, the letter spacing of the person’s name is decreased to improve aesthetics.
7. Don’t rely on colour alone as an indicator
Don’t rely on colour alone to convey meaning or distinguish visual elements, as those with low vision or colour blindness might not be able to see the indicator. Use additional visual cues to differentiate interface elements.
In our example, there are 2 areas that could be confusing. Let’s make them clearer.
If you look at the 3 tabs above the article list, it might not be obvious that “articles” is the selected tab. This is because a very subtle difference in colour is being used to indicate that a tab is selected. Adding an underline to the selected tab helps to make it clearer.
Similarly, in the bottom navigation, a subtle colour change is being used to differentiate the selected icon from others. To make it more obvious, the selected icon is filled.
8. Try to avoid using multiple alignments
The more different types of alignment you use (left, right, or centre), the more complex and messy an interface can look. Our eyes are forced to work harder as they move around to try and follow each alignment. This is highlighted when multiple different alignments are used within a small component or section of an interface.
Sticking with a single alignment (or as few as possible) helps to simplify an interface, making it look neater and tidier.
In our example, the tabs are centre aligned, while most of the other elements on the page are left aligned. The mixture of alignments adds unnecessary complexity, resulting in a slightly increased cognitive load (the amount of brain power required to use an interface). Left aligning the tabs helps to tidy things up.
9. Ensure text has a 4.5:1 contrast ratio
In order to help ensure people with vision impairments can clearly read text, it needs to meet the following WCAG 2.1 level AA contrast requirements:
Small text (18px and under) needs a minimum contrast of 4.5:1.
Large text (above 18px with bold weight or above 24px with regular weight) needs a minimum contrast of 3:1.
In our example, the small text on the unselected tabs has insufficient contrast. Using a darker grey gives us sufficient contrast.
10. Consider removing containers to simplify an interface
Breaking up information into smaller groups of related elements helps to structure and organise an interface. This makes it faster and easier for people to understand and remember.
You can group related elements using the following methods:
Place related elements in the same container
Space related elements close together
Make related elements look similar
Align related elements in a continuous line
Using containers is the strongest visual cue to group interface elements, but it can add unnecessary clutter. Look for opportunities to use other grouping methods, they’re often more subtle and can help simplify designs.
In our example, the containers around each article are unnecessary, as multiple other grouping methods are already being used. Removing the containers also creates more room for the content.
11. Use regular and bold font weights only
Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your UI designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.
Keep your design system simple and concise by using regular and bold font weights only. Some typefaces have a semi-bold font option that you can use instead of bold if bold is too heavy.
Quick usage tips:
Use bold font weight for headings to emphasise them.
Use regular font weight for other smaller text.
If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.
In our example, 3 different font weights are used for the article details. Even though the contrast of the “extra light” and “thin” font weights is above the required 4.5:1 contrast ratio, the characters could still be difficult for some people to read. Increasing the font weight to “regular” helps improve readability and simplifies the design. Using “semi-bold” for the article title helps it stand out.
Using only 2 font weights results in the following design. We’re making good progress applying the UI design tips, but we’ve still got a few more issues to fix.
12. Be consistent
Consistency in UI design means that similar elements look and work in a similar way. This should be true both within your product and when compared with other well-established products. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work.
In our example, the photos for each article have sharp corners, which doesn’t match the soft rounded corners of the buttons and icons. Rounding the corners of the photos helps to create a more consistent visual language. You might not think that tiny details like this make much difference, but they all add up to make a design feel “right”.
13. Don’t confuse minimalism with simplicity
Minimal doesn’t mean simple. Designers have a tendency to favour minimal interfaces, as they can look beautiful and clean. A minimal interface has fewer elements and styles, but isn’t necessarily simple to understand and use.
Minimal interfaces can often be vague or confusing as they lack crucial details needed for good usability. Simplification isn’t just about reduction. Removing or hiding too much can harm usability. You need to make sure that you’re not removing critical information or details.
In our example, the bottom navigation icons look clean and minimal, but is it clear what they mean? It might not be to everyone. Adding text labels to the icons helps ensure people can understand what they mean, especially those using screen readers (software that describes an interface, using speech or braille, to someone who can’t see it).
14. Balance icon and text pairs
When pairing icons with text, try to ensure they have a similar visual prominence for a more balanced and cohesive look.
In our example, the icon and text pairs in the bottom navigation are slightly imbalanced. The icons and text are the same colour, but the icons are thicker and larger, which gives them more prominence. Darkening the text increases its prominence, so it’s balanced with the icons. Increasing the text contrast to at least 4.5:1 also ensures it’s accessible to those with low vision.
We did it!
With just a few straightforward UI design tips, we were able to identify and resolve a range of issues in our example interface. Of course, you could take things further by adapting the visual style to suit a particular brand personality if needed. For this example though, we were focused on getting the fundamentals right.
I hope you’re starting to see that UI design doesn’t need to feel overwhelming. While it can sometimes seem like a mysterious art reserved for the naturally talented, much of great interface design is rooted in clear, logical guidelines like the ones you’ve learned here.
Relying on objective guidelines, rather than subjective opinion, makes it far easier (and faster) to design interfaces that are intuitive, accessible, and visually polished. The more you practise using these UI design tips, the more naturally they’ll become part of your design process. Use them as a foundation and don’t be afraid to explore, experiment, and push your creativity from there.
Want more UI design tips?
These are just a few of the logic-driven UI design tips from my UI design book. You’ll find hundreds more with detailed examples in the book. The example interface was created using my Figma design system. You can also take a behind the scenes look at the making of the book if you’re interested.
PS If you found this article helpful, share it with others and follow me on X and LinkedIn for daily design tips, tools, resources, and inspiration.
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.
Luckily, UI design doesn’t have to be so hard. Over 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical guidelines. Not artistic flair or magical intuition, just simple guidelines.
Sure, artistic talent helps, but a lot of what makes up an intuitive, accessible, and beautiful interface design can be learned. Having a system of logical UI design guidelines helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.
The quickest way to learn is by doing, so let’s get started with the UI design tips. All design tips are from my Practical UI design book and the example interface was created using my Figma design system.
UI design tips to fix an example interface
The following 2 designs are for the property details page of a short-term property rental app. The first one is the original design. The second is the result of applying some quick UI design tips.
Even without much visual or interaction design experience, you’ll probably notice that the original design feels messy, complicated, and difficult to use. This is because it contains many problematic design details that pose a risk to usability. Perhaps you can already spot a few?
Let’s fix the problems with the original design one at a time using the following UI design tips:
Breaking up information into smaller groups of related elements helps to structure and organise an interface. This makes it faster and easier for people to understand and remember.
You can group related elements using the following methods:
Place related elements in the same container
Space related elements close together
Make related elements look similar
Align related elements in a continuous line
Using containers is the strongest visual cue to group interface elements, but it can add unnecessary clutter. Look for opportunities to use other grouping methods, they’re often more subtle and can help simplify designs.
Using space in particular is a very effective and simple UI design tip to group related elements. You can also combine grouping methods to help display groupings more clearly.
In our example, the lack of space between content makes the design look cluttered and difficult to understand. Increasing spacing helps to clearly group content, making it more organised and easier to understand.
2. Be consistent
Consistency in UI design means that similar elements look and work in a similar way. This should be true both within your product and when compared with other well-established products. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work.
In our example, the icon styles are inconsistent, as some are filled and others aren’t. This could confuse some people, as filled icons often indicate that an element is selected. Outlining all icons with a 2pt stroke weight and rounded corners improves consistency and gives each icon a similar visual weight. If you use a quality free icon set you generally won’t need to worry about this issue.
Text labels are also added to the icons to help ensure people can understand what they mean, especially those using screen readers (software that describes an interface, using speech or braille, to someone who can’t see it).
3. Ensure similar looking elements function similarly
If elements look similar, people will expect them to work in a similar way. So try to ensure that you use a consistent visual treatment for elements with the same functionality. Conversely, try to ensure elements with different functionality look different.
In our example, the icon containers have a similar visual style to the “book now” button. This makes them seem interactive, even though they’re not. Removing the blue colour and button styling from the icons helps to avoid them being mistaken for interactive elements.
4. Create a clear visual hierarchy
Not all information in an interface has the same level of importance. Aim to present information in order of importance by making more important elements look more prominent.
A clear order of importance, or visual hierarchy, helps people scan information quickly and focus on areas of interest. It also improves aesthetics by creating a sense of order. You can create a clear visual hierarchy using variations in size, colour, contrast, spacing, position, and depth.
Here’s an example of a website hero banner without a clear visual hierarchy, followed by one with elements clearly presented in order of importance.
A quick and easy UI design tip to test whether your visual hierarchy is clear is to use The Squint Test. Simply squint your eyes and look at your design. Alternatively you can move further away from the screen or blur your design. You should still be able to tell what the most important elements are and recognise what the interface is for.
Let’s apply the Squint Test to our example. We can see that there are multiple elements with similarly strong prominence competing for attention. Meanwhile, the primary action in the bottom left doesn’t stand out at all.
The primary action should generally be the most prominent element on an interface. Giving it a high contrast background colour and bold font weight helps achieve this. This also fixes an accessibility issue with the low contrast button, which we’ll look at later.
Applying the Squint Test to the updated design, the primary action is clearly the most prominent element.
The visual hierarchy is now clearer, but there’s still room for improvement. For example, the block of body text is still too prominent relative to its level of importance. We’ll learn some quick typography guidelines shortly, which will help correct the visual hierarchy.
5. Remove unnecessary styles
Unnecessary information and visual styles can be distracting and can increase cognitive load (the amount of brain power required to use an interface). Avoid unnecessary lines, colours, backgrounds, and animations to create a simpler, more focused interface.
In our example, the white space and borders around the image add unnecessary visual complexity. They’re not needed to convey information or group elements, so we can safely remove them to simplify the design.
6. Use colour purposefully
Use colour sparingly and with purpose. Try to avoid using colour purely for decoration, as it can be confusing and distracting. Start with black and white and introduce colour where it conveys meaning.
A simple and effective approach is to apply the brand colour to interactive elements like text links and buttons. This helps teach people what’s interactive and what’s not. Try to avoid using the brand colour on non-interactive elements.
You don’t need to add colour to all interactive elements, as some already have visual cues that indicate they’re interactive. For example, the cards in the following example still feel interactive, with or without the blue coloured link.
In our original example, the blue heading might look nice, but it makes the text seem interactive. To help avoid confusion, we remove the blue colour from the heading as it’s not interactive.
We also remove the blue colour from other non-interactive elements like the star rating. This makes it much easier to see what’s interactive and what’s not.
7. Ensure interface elements have a 3:1 contrast ratio
Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are lots of tools and Figma plugins to help you measure colour contrast, my favourites are the Web AIM online contrast check tool and the Contrast Figma plugin.
In order to help ensure people with vision impairments can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. This means user interface elements, like form fields, icons, and buttons, need to have at least a 3:1 contrast ratio.
In our example, the contrast of the arrow icon sitting on the photo is too low. Using a grey colour for the icon and adding a solid white background give it sufficient 3:1 contrast, regardless of the photo it sits on. This also reduces the interaction cost, as the tap area of the icon is now larger and clearly visible.
The primary button contrast in the original example was also too low. We fixed it previously when addressing the visual hierarchy, but it’s also worth mentioning here.
The risk with the low contrast button is that people with low vision might not identify it as a button, as they can’t see the button shape. Increasing the button contrast ratio above 3:1 makes the button accessible and also helps correct the visual hierarchy. Learn more button design tips to avoid common mistakes.
Increasing the arrow icon and button contrast to a ratio above 3:1 gives us the following design. We’re getting there bit by bit, but we’ve still got more issues to fix.
8. Ensure text has a 4.5:1 contrast ratio
In order to help ensure people with vision impairments can clearly read text, it needs to meet the following WCAG 2.1 level AA contrast requirements:
Small text (18px and under) needs a minimum contrast of 4.5:1.
Large text (above 18px with bold weight or above 24px with regular weight) needs a minimum contrast of 3:1.
In our example, the small text in the photo count element has insufficient contrast. We increase the contrast ratio above 4.5:1 by increasing the opacity of the grey container and also adding a text shadow.
The contrast of the location text is also too low. The thin font weight makes it even harder to read. Using a darker shade of grey helps make the text more accessible. We’ll make further updates to the text to improve it shortly.
9. Don’t rely on colour alone as an indicator
There are many different types of colour blindness and they mainly affect men. Commonly, people who are colour blind have difficulty distinguishing between red and green, but some aren’t able to see any colour at all.
To ensure an interface is accessible to those who are colour blind, you can’t rely on colour alone to convey meaning or distinguish visual elements. You need to use additional visual cues to differentiate interface elements.
In our example, the colour blue is used on the “reviews” text to indicate that it’s a link. If colour is removed, the link text looks the same as other text, so those who are colour blind won’t be able to tell it’s a link. Underlining the link text clearly differentiates it from other text in the absence of colour.
10. Use a single sans serif typeface
A typeface is a set of related fonts with a similar style or aesthetic. Helvetica is an example of a typeface. Fonts are variations within a typeface, like weights or sizes. For example, Helvetica bold and Helvetica regular are 2 different fonts within the Helvetica typeface.
It’s safest to use a single sans serif typeface for interface design, as they’re generally the most legible, neutral, and simple. Here are my 10 favourite free typefaces for UI design.
In our example, the heading uses a detailed serif typeface that’s a bit difficult to read and could be distracting to some. It also has a personality that might not match some of the photos in this property rental app. Simplifying it to a sans serif typeface, like the one being used for the body text, can help improve usability and aesthetics.
11. Use a typeface with taller lower case letters
Look for typefaces with taller lower case letters and greater letter spacing, as they’re generally more legible at small sizes. The height of lowercase letters in a typeface is known as the x-height.
Our example uses the League Spartan typeface, which has a relatively low x-height. Changing the typeface to one with a larger x-height, like Inter, helps to improve readability.
Here’s what our example looks like after the typeface is updated from League Spartan to Inter. We’re making good progress applying the UI design tips, but we’ve still got a few more issues to fix.
12. Limit the use of uppercase
Unless you’re shouting at people, there aren’t many valid reasons to use uppercase. IT’S LOUD AND DIFFICULT TO READ.
When you read, you look at the shape of a word, rather than looking at each letter. The shape helps you recognise the word more quickly. Uppercase words all have the same rectangular shape. This forces you to read each letter one by one.
In our example, the location text uses uppercase. Changing it to sentence case, where only the first word and proper nouns (names of people, places or things) are capitalised, helps to improve readability.
13. Use regular and bold font weights only
Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your UI designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.
Keep your design system simple and concise by using regular and bold font weights only. Some typefaces have a semi-bold font option that you can use instead of bold if bold is too heavy.
Quick usage tips:
Use bold font weight for headings to emphasise them.
Use regular font weight for other smaller text.
If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.
In our example, the location text uses a light font weight. Even though we’ve increased the contrast above the required 4.5:1 contrast ratio, the thin characters could still be difficult for some people to read. Increasing the font weight to regular helps improve readability and simplifies the design.
14. Avoid pure black text
For UI design, it’s generally safest to avoid pure black, as it has a very high contrast against white. This high contrast can cause eye strain and fatigue when reading text.
Black has 0% colour brightness and white has 100% colour brightness. The large difference in colour brightness causes our eyes to work harder. It’s safest to avoid pure black against white and opt for a dark grey instead.
In our example, pure black is used on multiple elements. Changing it to a dark grey helps to improve readability. Previously when looking at visual hierarchy, we noted that the property description text was too prominent. To make sure interface elements are presented in order of importance, we use a lighter grey for the property description text to decrease its prominence.
15. Left align text
English is read from left to right, downwards in an F-shaped pattern. So it’s best to keep text left aligned for optimal readability. For long body text, it’s safest to avoid centre aligned or justified text. It’s more difficult to read, especially for those with cognitive disabilities.
Centre alignment can work for headings and short text, as it can be quickly read. However, centre alignment makes longer body text harder to read, because the starting point of each line constantly changes. Your eyes need to work harder to find the starting point of each line.
In our example, the property description text is centre aligned. Left aligning the text improves readability and is also consistent with the left aligned text above it.
16. Use at least 1.5 line height for body text
Line height is the vertical distance between two lines of text. The space between lines helps prevent people from rereading the same line of text. It also makes text look and feel more comfortable to read.
For accessibility and readability, especially for long body text, ensure that line height is at least 1.5 (150%). Keeping line height between 1.5 and 2 generally works well.
In our example, the line height of the body text is only 1 (100%). Increasing it to 1.5 (150%) helps to improve readability and looks nicer too.
We fixed it!
With a handful of simple but powerful UI design tips, we quickly found and fixed a whole bunch of problems with our example UI design. You could further customise the decorative visual styles to match a specific brand vibe if needed. For this example though, we were focused on getting the basics right.
I hope you’re starting to see that UI design doesn’t have to be so hard. It might appear to be a magical art form, but a lot of it is made up from logical guidelines like the ones we just learned. Using objective logic, rather than subjective opinion, makes it faster and easier to design intuitive, accessible, and beautiful interfaces.
The more you apply these UI design tips, the more naturally they’ll become part of your design workflow. Think of them as a solid base that you can build on as you explore new ideas, experiment with different approaches, and stretch your creativity.
Want more UI design tips?
These are just a few of the logic-driven UI design tips from my UI design book. You’ll find hundreds more with detailed examples in the book. The example interface was created using my Figma design system. You can also take a behind the scenes look at the making of the book if you’re interested.
PS If you found this article helpful, share it with others and follow me on X and LinkedIn for daily design tips, tools, resources, and inspiration.
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
The UX design process is becoming an increasingly important aspect of creating quality website applications and software products. There are heaps of different UX design books out there with a myriad of techniques and methods that are important for us to know and use as UX designers.
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
Contrary to popular belief, user interface design isn’t just about creating pretty pixels. Of course, making an interface look great is important, but there’s much more to it than that. Learning the how and why behind interface design will ensure that every design detail has a logical purpose behind it. (more…)
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
Having endless design possibilities sounds great in theory, but in practice, it can be frustrating and time consuming. When designing an interface, there are so many options to choose from regarding layout, spacing, typography, and colour, it can quickly get overwhelming. That’s why having a system of predefined options and guidelines to help you efficiently make design decisions is crucial. This is known as a design system and in this guide you’ll learn how to build a design system in 3 steps.
What is a design system?
A design system is like a box of LEGO bricks for digital products. Just as LEGO bricks come in different shapes, sizes, and colours that you can snap together to build anything you can imagine, a design system provides a set of pre-made components, like buttons, icons, and form inputs, that you can combine to create consistent and cohesive user interfaces.
Just like with LEGO, where you have instructions to guide you in building a specific model, a design system comes with guidelines that show you how to use the components. This ensures that the website or application you’re building looks and works consistently.
A design system serves as a single source of truth that ensures that all design and development teams are aligned, enabling them to build unified products more efficiently.
Benefits of a design system
Whether you’re working on a small website or a complex web application, a design system is a must-have for many reasons:
Consistency: Ensures a uniform look and feel across all products, enhancing the user experience.
Efficiency: Speeds up the design and development process by providing ready-to-use components and design guidelines.
Scalability: Makes it easier to scale products by providing a foundation that can grow with the brand or product.
Collaboration: Enhances collaboration between design and development teams by providing a common language and set of tools.
Quality Control: Helps maintain high-quality standards across all designs, reducing the risk of errors and inconsistencies.
How to create a design system
Now that we know what a design system is and what the benefits are, let’s build a design system in 3 steps:
Set predefined style options for colour, typography, and spacing.
Create reusable modules known as a component library.
Define usage guidelines.
1. Set predefined style options
Rather than choosing from unlimited options for things like colour, typography, and spacing, create a small set of predefined options to choose from. Limiting your options in this way helps improve consistency and speeds up decision making. These predefined reusable options are often referred to as “tokens”.
Design system colour options
Create a small set of predefined colour options called a colour palette. The following colour palette is made up of variations of the brand colour. Each colour has a purpose to help you quickly decide how and where to use it.
For example, actions like buttons and text links are often assigned the brand colour from the colour palette. Using a consistent colour for interactive elements helps teach people what’s interactive and what’s not.
Similarly, there’s no need to spend countless hours searching for different shades of grey for form input borders, checkbox borders, and radio button borders. Simply assign a colour variation from the colour palette to use for all interface element borders.
Here’s a simple yet powerful colour palette that works for most websites and apps. It’s made up of 5 variations of the brand colour. Use the main brand colour hue as a base and change the saturation and brightness to create the other variations. You’ll need to use the HSB (Hue, Saturation, Brightness) colour system to do this.
Each colour has a purpose to help you quickly decide how and where to use it:
Brand – used to indicate interactive elements like text links and buttons.
Text strong – used for primary text, like headings, body content, and form labels to ensure they’re prominent and legible.
Text weak – used for supporting text to make it less prominent.
Stroke strong – used for non-decorative borders on interface elements like form input fields. Also used for icons.
Stroke weak – used for decorative borders, like dividing lines, that aren’t critical to identifying interface elements.
Fill – used as a secondary background to help differentiate elements, like tags or badges, that sit on the main white background.
In order to help ensure that people with low vision can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. Make sure that colours used for text (“Brand”, “Text strong”, and “Text weak”) have a 4.5:1 contrast ratio.
Colours used for interface elements, like “Stroke strong”, need at least a 3:1 contrast ratio. There are lots of tools to help you measure colour contrast, my favourites are the Contrast Figma plugin and the Web AIM online contrast check tool.
To learn more about using colour in UI design, check out my UI design book. It contains everything I wish I knew when I started out as a designer 2 decades ago.
Design system typography options
Create a small set of predefined typography options for different text types. Define the font sizes, line-heights and weights once and reuse them throughout an interface. This helps speed up decision making and improve consistency across your product.
Using a type scale is a simple and logical way to create a set of balanced font sizes that work well together. To create your set of font sizes, start with a base font size for body text, then keep multiplying it by a certain scale to create larger font sizes.
Here are some popular type scales, ordered from smallest to largest:
1.067 – Minor Second
1.125 – Major Second
1.200 – Minor Third
1.250 – Major Third
1.333 – Perfect Fourth
1.414 – Augmented Fourth
1.500 – Perfect Fifth
1.618 – Golden Ratio
For example, start with a base font size of 16px and use a “1.200 – Minor Third” scale. Multiply 16px by 1.2 to get the next font size of 19.2px. Round it to 20px for simplicity. Then take 20px and multiply it by 1.2 to get the next font size, and so on. The following is an example set of font sizes using a slightly modified Minor Third type scale.
With most type scales, you’ll notice that the resulting font sizes have messy decimal values. Round font sizes to the nearest whole number for simplicity. It’s not crucial that font sizes are divisible by 4, but try to ensure that their line height is. This will align your text neatly to a 4pt vertical layout grid.
You don’t need to stick strictly to a scale. Once you get more confident with font sizes, you can adjust them to better suit the interface you’re designing.
Design system spacing options
Deciding on the ideal spacing between interface elements can be a frustrating and time consuming process, as there are so many options to choose from. In my early days as a designer, I remember painstakingly pushing interface elements back and forth, a pixel at a time, until they looked perfect.
Creating a limited set of predefined spacing options (as seen below) can speed up your design process significantly, making you a much more efficient designer. Using consistent spacing options will also result in a neater, simpler interface design that’s faster to build.
Create simple t-shirt sized spacing options based on increments of 8 points. Why 8? Many popular screen sizes are divisible by 8 and it provides a bit more spacing flexibility than using 10 points.
This is also known as using an 8 point grid, as all interface elements will end up aligning to a series of vertical and horizontal guidelines separated by 8 points. For more detailed interfaces, you could use 4 point increments for a bit more control.
Much like a typography scale, your spacing options should grow by larger amounts as they get bigger. This ensures that spacing is proportional for larger interface elements.
Predefine other style options
Try to create sets of predefined options for any other styles you use too. You’ll generally need 2 shadow options (raised and overlay) to indicate the depth of interface elements.
Create 3 border radius options (8pt, 16pt, and 32pt) to use on small, medium, and large interface elements respectively.
2. Create reusable modules
Another key part of building a design system is creating reusable parts or modules. Modular design involves breaking things down into smaller, reusable, and replaceable parts called modules or components. Modular design has been used to create cars, machines, buildings, and computers for many years. It’s a great way to improve productivity, efficiency and consistency.
Always aim to design interfaces in a modular way by doing the following:
Start by creating the smallest components such as buttons, avatars, and form input fields. These will be your building blocks.
Combine small components to create larger, more complex ones.
Arrange components in specific layouts to create reusable page templates.
The goal is to create a collection of all components, known as a component library or UI kit. This makes it easy to view, manage, and reuse components.
In the following example, an avatar component is used to create larger components. Firstly, the avatar is paired with text, then placed in a card, which is placed in a list of cards on a landing page template.
In the following examples, the same button component is reused inside multiple larger components. In a similar way, each of the larger components can be reused across multiple interfaces or templates.
3. Define usage guidelines
When you build a design system, don’t forget to include instructions on how to use the components and visual styles in the design system. Without clear usage guidelines, there’s little chance that a team of designers and developers will be able to design a consistent product experience.
Keep guidance concise so that it’s easy to consume and remember. Concise guidelines keep things flexible enough to allow for creative freedom while also maintaining an acceptable level of consistency.
Create specific usage guidelines for the following:
Colours – define how and where colours should be used e.g. indicate interactive elements using the brand colour.
Text – define overarching guidelines for using text e.g. use sentence case, left align text.
Components – define best practices for each component including dos and don’ts e.g. for the button component, ensure buttons are left aligned and avoid disabled buttons.
Templates – define how components should be used in different templates and any limitations.
Copywriting – define guidelines for grammar, punctuation, and writing style e.g. front-load text, be concise, and use plain and simple language.
Include any specific rules, do’s and don’ts, live examples, and code snippets. It’s also helpful to include a change log to record updates as well as a future roadmap.
Design, code, or both?
A design system can exist in a design tool like Figma, where it helps to speed up a design team’s workflow. It can also exist in code, where it helps to speed up development. Ideally, a design system will help both designers and developers build websites and apps faster.
For example, a common approach to build a design system is to create a Figma design system as a library for designers to work from along with a coded version of the design system built in React and documented in Storybook.
Depending on your skillset and resources, you can start off with design or code and gradually build the design system as you go.
Design systems for existing websites and apps
What if you have an existing website or app but don’t yet have a design system? The basic process is the same, but you’ll need to do an initial audit to see what you’ve got, what you need, and what you can get rid of.
Initial audit – identify and document all components and styles present in your website or app. Simply taking screenshots is a quick and easy approach.
Group items into categories – group similar items together into categories including: text styles, colours, icons, buttons, navigation, headers, footers, cards, lists, and forms.
Merge similar items – try to cut down the number of different components and styles in your system. For example, if you have 2 different button styles that are very similar, consider using 1 of them and removing the other. Map unneeded styles or components to new ones.
It can be a large and difficult process to move an existing website or app to a new design system. I find it best to take an iterative approach, where you do it bit by bit. Start with the most impactful items like colours and typography, then move onto components one at a time. The following example of a button audit demonstrates how having too many similar options can greatly increase complexity. If you’re currently working on buttons, here are some common button mistakes you should avoid.
If you’re updating a page or feature that touches certain components, update those components as part of the feature release. Incorporating the cleanup into your general business will take more time initially, but it will save a lot more time in the long run.
Before you know it, you’ll be well on your way to replacing your old website or app with newly built design system components. During the interim period, both the old and new website or app will exist, before the old one is eventually decommissioned.
Design system team structure
The many advantages of a design system are only realised if it’s used and contributed to by everyone working on the website or app. If you’re a solo creator, it’s easy to ensure a design system is used and updated regularly. If you’re part of a team in a larger organisation, it can be more complicated.
An approach that generally works well is to have a dedicated centralised design system team. This team serves other product teams by maintaining and managing the design system on a day to day basis. A centralised design system team doesn’t work well unless there’s collaboration with the product teams that are building product features for customers.
Each product team should have at least one design system ambassador that’s responsible for collaborating with the centralised design system team. Their job is to ensure their team is aligned to the design system guidelines and to contribute customer feedback, insights, and even new components to the design system team. This collaborative approach helps to ensure the design system better services both the team’s and customer’s needs.
If you don’t have the budget for a dedicated centralised team, the ambassadors from each product team could form a team to build and manage the design system on a part time basis. Where there’s a will, there’s a way.
Practical UI Figma Design System
If you’re strapped for time and need a Figma design system that’s ready to go, you should definitely check out my Practical UI Figma Design System. I’ve been pushing pixels since 2005 and have studied hundreds of design systems over the years, even before they were called design systems.
I wanted to share what I’ve learned by building a lean and powerful design system that’s intuitive, accessible, and beautiful. Creating this design system has been a labour of love and I’ve spent thousands of hours crafting it. I’m confident it will help you design better products faster.
I hope this step by step guide has helped you understand how to build a design system for your website or app. Setting predefined styles, creating a component library, and defining usage guidelines is a necessary way to speed up your design and development process and maintain consistency throughout your product. All the best on your journey to create your design system.
PS If you found this article helpful, share it with others and follow me on Twitter and LinkedIn for daily design tips, tools, resources, and inspiration.
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
As a designer, it’s amazing how much you can learn simply by exploring existing design systems. I’ve studied hundreds of design systems over the years, even before they were called design systems, and in this article I’ll be highlighting what I’ve learned from some of the best design system examples I’ve come across so that you can build your own design system.
There are many similarities across design systems, but there are still lots of details that designers can’t seem to agree on. It’s fascinating to see the differences and the rationale behind the designs. Colour systems, component design, and indicating elevation are a few areas of inconsistency across design systems. Luckily, many popular design patterns are similar across design systems, which is great for users, as they won’t need to relearn new patterns.
Let’s go over some design system basics before we start exploring the design system examples.
What is a design system?
A design system is like a box of LEGO bricks for digital products. Just as LEGO bricks come in different shapes, sizes, and colours that you can snap together to build anything you can imagine, a design system provides a set of pre-made components, like buttons, icons, and form inputs, that you can combine to create consistent and cohesive user interfaces.
Just like with LEGO, where you have instructions to guide you in building a specific model, a design system comes with guidelines that show you how to use the components. This ensures that the website or application you’re building looks and works consistently.
A design system serves as a single source of truth that ensures that all design and development teams are aligned, enabling them to build unified products more efficiently.
Benefits of a design system
Having endless design possibilities sounds great in theory, but in practice, it can be frustrating and time consuming. When designing an interface, there are so many options to choose from regarding layout, spacing, typography, and colour, it can quickly get overwhelming. That’s why having a system of predefined options and guidelines to help you efficiently make design decisions is crucial.
Whether you’re working on a small website or a complex web application, a design system is a must-have for many reasons:
Consistency: Ensures a uniform look and feel across all products, enhancing the user experience.
Efficiency: Speeds up the design and development process by providing ready-to-use components and design guidelines.
Scalability: Makes it easier to scale products by providing a foundation that can grow with the brand or product.
Collaboration: Enhances collaboration between design and development teams by providing a common language and set of tools.
Quality control: Helps maintain high-quality standards across all designs, reducing the risk of errors and inconsistencies.
Practical UI Figma design system
I love design systems so much that I actually created my own. I wanted to share what I’ve learned by creating a lean and powerful Figma design system that’s intuitive, accessible, and beautiful. Creating this design system has truly been a labour of love and I’ve spent thousands of hours crafting every detail. It’s based on logic-driven design guidelines from my UI design book, which has helped thousands improve their interface design skills. Feel free to check it out.
Let’s have a look at my top 3 design system examples and I’ll highlight some interesting things I’ve learned from each one.
IBM’s Carbon Design System
IBM’s Carbon Design System is a really well put together design system and it’s often one of my go-to design systems for component research. It’s cleverly designed, practical to use, and has a wealth of detailed and sensible guidance. It’s open-source and has a modular framework designed to create consistent, scalable, and accessible digital experiences across IBM’s diverse product suite.
What I learned
Rather than using shadows to indicate depth or elevation, the Carbon design system uses colour. As expected in dark mode, colours get progressively lighter as the elevation level increases. Light mode is a bit different to most design systems though. Colours simply alternate between white and grey with each level of elevation.
This unconventional system generally works well for most applications, as they only require a few levels of elevation. Here’s an example dashboard design in light and dark mode.
Most design systems only provide usage guidelines for each component, whereas the Carbon design system also covers larger UI patterns such as logins, forms, and filtering. For example, there are many different ways to filter data depending on the context. Carbon design system helps designers and developers decide on a suitable pattern based on their specific situation. The following filtering pattern uses a multi-select dropdown menu.
The next example is of a filtering pattern that’s always on display in the sidenav, for faster and more complex filtering of data.
Documenting design patterns in this way makes it a lot easier for designers and developers to follow and helps to ensure consistency across applications.
The component guidance and colour system is also clever and comprehensive. There’s so much to learn from this design system, even as an experienced designer. That’s what makes it my top design system example.
Looking through the Atlassian Design System, you can very quickly see the meticulous thought and attention to detail that has been put into it. It can initially be a bit overwhelming to digest due to its size and complexity, but when you consider that it’s supporting a whole suite of products, it’s actually relatively concise.
What I learned
Atlassian has treated elevation in a more conventional way that makes a lot of sense. I actually used a similar approach in my Practical UI Figma design system. In light mode they use shadows to indicate depth, while in dark mode they use both shadows and colour.
They have 4 design tokens to indicate elevation, which should be sufficient for most website applications. One of the elevation tokens sits lower than the default surface level for sunken interface elements.
Each elevation colour token has a corresponding shadow token for consistency.
The colour system is also really well designed. I especially like that they use alpha, or transparent, colours alongside more conventional solid colours. Using transparent colours for foreground elements helps to ensure that they look consistent when sitting on different background colours. I’ve also used transparent colours in my own Figma design system and I think transparency will become more prevalent once more design teams realise the advantages.
The design token naming conventions are also quite intuitive. Design tokens are the basic building blocks used to store and apply design decisions consistently across a digital product. In simple terms, they’re like little pieces of information that define things like colours, fonts, spacing, and sizes, so that these elements can be used the same way in different places, keeping the design consistent.
If you’re looking for ideas on how to best name design tokens, it’s worth checking out how Atlassian has done it. They even have a token picker tool to help you find and apply the correct colour token.
Those were just a few of my favourite parts of this beautifully designed design system. Their component and UI pattern guidance is also comprehensive and a great learning resource. Definitely one of my favourite design system examples.
There’s lots of interface design fundamentals to learn from Adobe’s Spectrum Design System. Its comprehensive guidance and clear examples almost make it a crash course in UI design. It covers all the basics like colour, typography, and components, but also includes often forgotten details like motion design, copywriting, and inclusive design.
What I learned
While most design systems use the same sized components across both mobile and desktop, Adobe has chosen to scale up the size of components and typography on mobile devices. This is to account for the fact that our fingers are generally less precise than mouse pointers.
Spectrum uses a 1:1.25 scale ratio. This means that a mobile component is 25% larger than its desktop counterpart. There are also 2 separate typography scales across mobile and desktop. Border widths remain consistent across devices. I’m not sure that the complexity of this scaling system is worth the benefit, but it’s definitely a novel approach.
Words make up the majority of an interface and yet they’re often overlooked in design systems. It’s great to see that Spectrum has a section of their design system guidance dedicated to copyrighting. It’s quite comprehensive and includes guidance on voice and tone, grammar, and inclusivity. There’s even guidance on how to write error messages to ensure consistency across their products.
Spectrum’s colour system is also cleverly designed and often used by designers as inspiration for their own colour system. Check it out in more detail for a free design lesson on how to create a colour palette.
Once you’ve studied the top 3 design system examples, I’d suggest going through some of the following as well. I’ve provided a brief summary for each design system and highlighted what’s unique about it. Let’s get into these other design system examples.
Google’s Material Design System
Google’s Material Design is well-known for its unique “material metaphor,” which mimics physical surfaces to create a natural sense of interaction. Its open-source nature and adaptive design principles, like motion and depth, make it a go-to system for building intuitive and responsive user experiences.
The main downside to this design system is its complexity. Then again, its complexity is what makes it so flexible and adaptable to different app designs. You could easily spend a week learning about it and still only have scratched the surface. I guess that’s why some designers have a specific focus on designing Android apps, as it’s taken them considerable time to learn the ins and outs of Material Design.
The colour and theming system is especially clever and versatile, so I’d suggest checking it out if you’re looking to introduce themes to your design system.
Shopify’s Polaris Design System is one of few design systems focused on e-commerce with tools that streamline product pages, checkout flows, and customer management. If you’re designing an e-commerce website, there’s definitely lots to learn from Polaris.
One of the great things about Polaris is the wealth of visual examples in their guidance material. Rather than simply telling you how to use components or apply colours, it shows you with detailed examples. This makes it much faster and easier to learn.
Polaris’s visual design aesthetics are also top notch, making it a great place to learn not just how to build a functional website but also a beautiful one.
Primer is Github’s developer-first design system that excels in providing a strong foundation for consistency and functionality across code-centric platforms. Its unique focus on open-source collaboration and its extensive CSS framework make it highly customizable and developer-friendly.
Design systems often cater their guidance documentation towards designers, but it’s important to remember that developers also require guidance on how to use the system. It’s great to see that Github provides comprehensive developer documentation. If you’re looking for ideas to beef up your usage guidelines for developers using your design system, Primer is definitely worth a look.
This is probably the most famous of our design system examples, although I wouldn’t say it’s one of the best. Apple’s Human Interface Guidelines (HIG) emphasize intuitive user experiences, refined through years of crafting world-class products. What makes HIG unique is its integration with Apple’s hardware and software ecosystems, allowing for deeply immersive and seamless experiences on devices like the iPhone, iPad, and Mac.
Surprisingly, Apple’s Human Interface Guidelines aren’t very easy to consume, as they’re very text heavy with limited visual examples. They’re also not very detailed, which can leave you wondering if you’re using the design system correctly or not. This is probably one of the reasons why some designers focus specifically on designing for iOS, as there’s quite a high learning curve.
While it’s not the most beautiful design language, the Gov.uk Design System stands out for its strict emphasis on accessibility and inclusion, designed specifically for public services. With a commitment to ensuring that everyone can access government information and services, it offers high standards for usability, focusing on clarity, simplicity, and accessibility for all citizens.
One of the main strengths of this design system is the fact that most of its components and design patterns have been validated by user testing and research. They’ve also been tested to ensure they’re accessible. So if you’re doing component research, the Gov.uk design system is a handy resource.
Because it’s focused on usability and accessibility, you’ll also find that the system is relatively simple and easy to follow. If a design system servicing so many people can be this simple, it makes you wonder why other design systems are so complex. Sure, it may lack the flexibility of some design systems, but simplicity is generally a good thing for both the people using the website and the product teams building it.
Microsoft has come a long way with their design language and are now pushing the boundaries with their modern and colourful aesthetic. Their comprehensive design system covers web, iOS, Android, and Windows platforms. Guidance for each platform is separated to keep things organised, while the foundational design guidelines are consistent across platforms.
While their guidance isn’t super detailed, it’s enough to get by and makes it quick and easy to learn. Microsoft’s Fluent 2 Design System doesn’t excel in any particular area, but it’s a solid design system as a whole. This makes it a great example of all the main elements a good design system needs.
One of the things missing from most design systems is community collaboration. GitLab prides itself in being an open source product with thousands of community contributors. There’s also an issue tracker to allow contributors to submit change requests and monitor their progress. This means the system can grow faster and helps to ensure that it’s focused on user needs.
GitLab’s Pajamas Design System contains all the usual stuff including colour, typography, and component guidelines. It’s well organised and very comprehensive. The component guidelines are especially noteworthy and explain the structure of components along with providing code examples in both Vue.js and Rails.
Twilio’s Paste Design System is tailored specifically for building messaging experiences, ensuring consistency and accessibility across Twilio’s products. What makes it unique is its deep focus on designing interfaces for communication and its commitment to WCAG 2.1 AA accessibility standards.
If you’re building a messaging application, you’ll find a treasure trove of helpful components and UI patterns in this design system.
Salesforce’s Lightning Design System enables product teams to create intuitive, enterprise-grade applications on the Salesforce platform. Its unique focus is on creating components that integrate directly with Salesforce’s powerful CRM capabilities, making it an ideal choice for building scalable business applications.
I like that Salesforce have created a whole section of guidance on motion design, which they refer to as “kinetics”. Motion design can make a big difference in product design and it’s often put in the “too hard” basket for later. Having clear guidance on motion design principles and patterns helps to ensure that it’s implemented frequently and consistently.
Vercel’s Geist Design System is known for its minimalist aesthetic and performance-driven design, catering to web developers who prioritize speed and simplicity. It’s particularly unique for its focus on creating ultra-lightweight, responsive designs that align with Vercel’s mission of building the modern web.
It’s clear from the onset that this design system is focused on aesthetics. Components are beautifully crafted and styles are kept clean and minimal. There aren’t many usage guidelines, which opens up the door to inconsistency. Perhaps they wanted to keep things flexible to encourage innovation? They also didn’t seem to take accessibility into account, as many interface elements have insufficient contrast.
BBC’s GEL (Global Experience Language) Design System ensures a cohesive, accessible experience across the BBC’s vast digital offerings, from news to entertainment. What sets it apart is its focus on ensuring high levels of accessibility and editorial consistency for a global audience, maintaining the integrity of the BBC brand.
This design system is no spring chicken. It was one of the first large scale design systems I remember seeing early on in my career. The way the design guidelines have been structured and presented has clearly influenced many other more recent design systems. You can learn some solid fundamental design principles from this design system example.
Mozilla’s Protocol Design System is an open-source framework optimized for the web, supporting Mozilla’s mission of keeping the internet open and accessible. Its focus on privacy-first design and support for Mozilla’s products like Firefox and MDN Web Docs makes it uniquely aligned with open-source web principles.
Their usage guidelines are very concise and components are limited, so it’s a quick design system to learn. It goes to show that a lean design system can go a long way.
I hope you’ve found these design system examples helpful and inspiring. Each of them is basically a free UI design course that also teaches you how to scale designs across multiple products and platforms. I definitely found them helpful when building my Practical UI design system. If you’re looking to build your own design system and aren’t sure where to start, I’ve also put together a step by step guide on how to build a design system. Best of luck.
PS If you found this article helpful, share it with others and follow me on Twitter and LinkedIn for daily design tips, tools, resources, and inspiration.
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
One of the hardest parts of a web design project is getting started, especially when you’re experiencing creative block. One of the best ways to push through this barrier is to look at other websites for inspiration. I’ve been designing websites for decades and over the years I’ve collected my go-to free web design inspiration sites.
With so many free web design inspiration sites out there, it’s difficult to know which ones to use, so I’ve compared the top sites based on how often they’re updated, their search filter functionality, website previews, newsletters, and social media channels. I’ve also pulled out my top 3 free web design inspiration sites to make it even easier. I hope you find them helpful and inspiring.
3 best free web design inspiration sites
With so many awesome free web design inspiration sites, it was hard to narrow it down to just 3. Each of these 3 sites excels across most of the judging criteria, so I’m sure they’ll help inspire you while working on your next web design project.
Awwwards has been around for longer than I can remember and they’ve always been one of the top free web design inspiration sites. Their site features a curated collection of visually stunning and technically impressive websites, rated by experts on design, usability, creativity, and content.
Awwwards is a bit different to most web design inspiration sites, as designers need to submit their website for consideration by the expert judging panel. Each day, the judging panel will vote for the highly coveted “site of the day”, which is featured on the website homepage. I was lucky enough to win site of the day for my portfolio website back in 2010.
With so many website submissions from top designers around the world and such a rigorous voting process, the result is a highly curated collection of daily web design inspiration from top designers around the world. You can filter websites by category, technology, country, fonts, and colour.
Awwwards also has a vibrant community where designers can participate in discussions, vote on submissions, and learn from detailed case studies. Additionally, they host educational courses, interviews with industry leaders, and events to help you stay on top of your web design game. Basically your one-stop shop for web design inspiration.
Unique features include:
Expert-rated designs: Websites featured on Awwwards are evaluated by a panel of experts based on design, usability, creativity, and content, offering high-quality, curated inspiration.
Community engagement: Designers can actively participate by voting, commenting, and contributing to discussions, making Awwwards a great place to learn from other designers.
Collections: Websites have been organised into helpful categories to help you quickly gain inspiration on specific areas of web design such as: about us pages, 404 pages, footers, animation, and navigation.
Case studies and insights: Detailed case studies and in-depth interviews with top designers provide valuable insights into the creative process and emerging trends.
Educational content: The site offers workshops, courses, and articles to help designers hone their skills and stay updated on the latest design techniques.
Events and conferences: Awwwards organises global conferences and events, bringing together design leaders and providing networking opportunities for professionals.
Daily inspiration: A regularly updated feed of award-winning websites provides a steady stream of fresh and innovative web design ideas.
The FWA (Favourite Website Awards) was founded back in 2000 and is still one of the top platforms for free web design inspiration. It started off showcasing cutting-edge Flash websites that were famous for rich animations and immersive interactions. Now it’s a bit more well rounded and features daily website award winners that push the boundaries of design and user experience.
Like Awwwards, The FWA also relies on an expert judging panel to rate each website submission. Nearly 300 judges can cast their vote over a 1 week period. To win the site of the day award, a website must have a minimum score of 70% and at least 20 judges must have voted. This helps ensure that you see only the highest quality web design inspiration.
Unfortunately, there aren’t many filtering options to narrow down your search, but The FWA is still a great way to get your daily dose of web design inspiration.
Unique features include:
Focus on innovation: The FWA highlights projects that utilise the latest technologies, such as WebGL, AR, and VR, setting it apart from sites that only showcase traditional web design.
Daily awards: Every day, a new standout website is featured, keeping content fresh and inspiring for regular visitors.
Spotlight on immersive experiences: Emphasis on interactive and experiential designs provides unique examples that go beyond standard websites.
Industry recognition: Winning an FWA award is considered a prestigious accolade in the digital design community, adding a level of prestige to the showcased websites.
Educational value: The site often includes details on the technology and techniques used in award-winning projects, offering a learning opportunity for web professionals.
Curated Design is a super fun place to be on the internet and one of my favourite sources of free web design inspiration. It curates and showcases some of the most visually appealing websites on the web. While there’s no public website scoring or rating system, websites are curated by the tasteful team at Craftwork.
Websites are sorted into industry categories, making it easy for you to browse through various styles and find inspiration tailored to your project. There are also some handy filters that allow you to further narrow down your search based on a particular style including: dark, pastel, minimal, and neobrutalist. I also love the video previews of each website, as you don’t even need to leave the site while browsing. You can also subscribe to the weekly email newsletter to get web design inspiration delivered straight to your inbox.
Unique features include:
Carefully selected content: The site handpicks only the best designs, ensuring a consistently high standard of inspiration.
Easy browsing: Projects are organised efficiently, allowing designers to explore different styles and layouts with ease.
Video preview: Each website has a handy video preview, so you don’t even need to leave the site while browsing.
Focus on quality over quantity: Unlike sites that present a large volume of content, Curated Design prioritises showcasing impactful and relevant designs.
Diverse design styles: The platform includes a variety of website designs, appealing to a broad range of tastes and preferences.
Inspiration for specific needs: Whether you’re looking for minimalistic, bold, or innovative design ideas, Curated Design offers a wide range of options to spark creativity.
The top 3 free web design inspiration sites might be sufficient for most, but if you’re keen for more web design inspiration, I’ve got you covered. Here’s a regularly updated list of my other favourite sites for web design inspiration.
SeeSaw
Updated:
Daily
Community submissions:
Yes
Curation:
Owner
Filters:
Search, industry
Website preview:
Desktop video
Newsletter:
Weekly
Social media channels:
X
SeeSaw is a curated web design inspiration site that highlights a diverse range of creative and visually stunning websites. It focuses on showcasing unique, high-quality websites that stand out for their design, innovation, and impact. SeeSaw offers a simple and visually driven interface, making it easy to explore and discover web designs that push boundaries and inspire fresh ideas.
While there aren’t many search filters, websites are sorted into categories to make them easier to browse. Each website is also tagged with the typeface used on the site which is handy. If you’re on X, you can follow SeeSaw to get daily website inspiration in your feed or if you prefer email, you can subscribe to their weekly newsletter.
Unique features include:
Curated selection: SeeSaw handpicks websites that are not only visually appealing but also innovative and impactful.
Diverse range of styles: It features a wide variety of web designs, from minimalistic to bold and experimental, catering to different creative tastes.
Categories: Websites are sorted into categories including AI, Agency, and e-commerce to make them easier to browse.
Tagged typefaces: Each website is tagged with the typefaces used on the site to allow you to search by typeface.
Weekly email newsletter: Stay up to date on the latest web design trends and get the best websites delivered to your email inbox every week.
Launched back in 2016 by Bertrand Bruandet, MaxiBestOf is a vibrant free web design inspiration site that curates a rich variety of stunning websites and creative projects from around the world. It’s actually pretty amazing that a single designer has managed to keep it running and growing for such a long time, as most free web design inspiration sites have a pretty short lifetime.
MaxiBestOf doesn’t just focus on web design inspiration either, it’s also great for typeface inspiration. You can tell that the creator of the site is passionate about typography. Each website is tagged with the typefaces in use, which allows you to browse websites by typeface. Similar typefaces are suggested to help you find new typefaces and improve your typography game.
I love that each website has a full page preview in both desktop and mobile sizes, so you can browse through websites without ever needing to leave the site. Similar websites are listed below each site which is also super helpful.
Unique features include:
Eclectic collection: It brings together a wide range of web design styles, from minimalist to avant-garde, offering something for every creative preference.
Daily updates: The site regularly adds new designs, keeping the inspiration fresh and relevant for frequent visitors.
Community submissions: Designers can submit their own projects for consideration, but there’s a tonne of submissions, so don’t be offended if your site isn’t accepted for a few months or so.
Tagged typefaces: Each website is tagged with the typefaces used on the site to allow you to search by typeface.
Colour palette search: Search websites based on popular colour palettes.
Weekly email newsletter: Stay up to date on the latest web design trends and get the best websites delivered to your email inbox every week.
Active socials: With a bunch of social media channels updated daily, it’s super easy to stay inspired and up to date with the latest website trends.
SiteInspire is a well-known free web design inspiration site that features an extensive and carefully curated collection of beautifully designed websites. Launched back in 2009, it’s always been a staple amongst web designers.
The search filters are more powerful than most free web design inspiration sites, as you can add multiple filters for website style, type, industry, and platform. This makes it much easier to hone in on a certain type of website inspiration. With its clean and straightforward layout, SiteInspire makes it easy to browse and discover innovative web designs.
Unique features include:
Search filters: Search filters for style, industry, website type, and platform allow for precise and efficient browsing.
Extensive collection: Since it’s been around for so long, you can see how web design trends have changed over time. The site showcases a wide variety of design styles and creative approaches, appealing to a diverse audience.
Frequent updates: New content is added regularly, ensuring a constantly evolving library of inspiration.
Community submissions: Designers can submit their own websites for consideration, fostering a dynamic and community-driven collection. Don’t hold your breath though, as lots of websites get submitted daily.
Httpster is a classic free web design inspiration site that showcases a diverse collection of fresh and creative websites. Created back in 2012 by the talented Dominic Whittle as a quick way to save and tag cool websites, Httpster focuses on good typography, and effective, unpretentious design.
You can tell that the site was crafted with love, from the beautiful script logo and clever brand name, to the timeline that runs down the side of the page. The background even changes depending on the website you select, converting the website image thumbnail into a gradient background for a more harmonious vibe.
While there’s no search functionality, the filters are handy enough to provide a powerful browsing experience. You can filter by style including brutalist, dark, illustrative, and minimal websites. You can also filter by industry type to narrow down your focus. The weekly newsletter is another way to keep in the loop and stay inspired.
Unique features include:
Beautiful design: Httpster is a pleasure to browse due to its classic minimalist design and clever visual touches.
Comprehensive previews: Rather than simply showing a single small preview image of each website, Httpster includes multiple large website screenshots.
Handy filters: You can filter by website style and industry type to narrow down your focus.
Timeline navigation: A timeline that runs down the side of the site can be used to quickly jump to different time periods.
Community submissions: Designers can submit their own websites, contributing to a dynamic and diverse collection of work.
Collected is a bit different to most free web design inspiration sites. It shows only eight sites from a pool of over 3,000 breathtaking sites, randomly shuffled on every visit. It’s a pretty cool concept to break things up a bit and allows you to find inspiration where you might not have looked for it.
It focuses on quality over quantity, offering a refined collection of designs that showcase originality and attention to detail. Collected emphasises elegant and creative aesthetics, making it an ideal source of inspiration for designers who are looking for sophisticated and unique ideas.
Unique features include:
Random shuffle: Randomly shows you only 8 websites at a time to minimise distractions and create focus. The random shuffle can also help you break free from your creative block.
Highly curated content: It prioritises quality by showcasing only the most impressive and well-executed designs.
Large collection: Over 3,000 websites are featured.
Best Website Gallery is a long-standing free web design inspiration site that features a wide array of beautifully crafted websites. It’s actually the visual bookmark collection of David Hellman, an experienced designer who also sits on the Awwwards jury. David’s been adding his favourite websites since 2008 and now has an impressive collection of over 2,000 websites.
Each website is tagged by colour, style, CMS, and framework, which makes for a handy filter. I also like how each website has multiple full page screenshots, so you never have to leave the site when browsing. Anyone can vote on websites and rate them out of 10 based on design, creativity, and usability. I’m not sure how the community ratings affect the website listings, as it looks like the site of the day is simply chosen by the curator.
Unique features include:
Comprehensive tagging: Allows for easy filtering and browsing based on colour, style, CMS, and framework, making it simple to find specific inspiration.
High-quality collection: The site features a curated selection of visually stunning websites from an experienced designer.
Long-standing collection: It’s cool to see how web design trends have changed over the years.
Comprehensive previews: Rather than simply showing a single small preview image of each website, Best Website Gallery includes multiple full page screenshots.
Unsection is different from most free web design inspiration sites. Rather than showcasing full websites, it cuts up and sorts websites into sections. I know the feeling of being stuck when you’re designing a specific part of a website. It’s tough when all you can find are full-site designs instead of that one section you really need help with. Definitely my go-to spot for section-specific design inspiration including hero sections, headers, footers, and pricing sections.
Apart from the main categories for different website sections, there are additional filters for website style, type, and industry. I also like that you can subscribe to their newsletter for weekly updates and follow them on X to see the latest featured websites. With over 1,000 website sections it’s a super handy resource.
Unique features include:
Organised by website sections: Rather than showcasing full websites, Unsection cuts up and sorts websites into sections.
Community submissions: Designers can submit their own websites to help keep the collection diverse and interesting.
Comprehensive tagging: Allows for filtering and browsing based on style, type, and industry.
If you’re a fan of minimalist website design, then you’ll love Dead Simple Sites. It’s a web design inspiration site that focuses on showcasing websites with minimalist and straightforward designs. No overly animated content. No scroll jacking. No excessive storytelling. Less, but better.
The site aims to celebrate the beauty of simplicity in web design, highlighting websites that make a strong impact with minimal elements. Inline with their minimalist roots, Dead Simple Sites doesn’t have filters or categories. Instead, it offers a “dead simple” browsing experience, so you can appreciate and draw inspiration from clean, purposeful layouts. That being said, I think it would be handy to have some filters to make it easier to find what you’re after. The weekly newsletter is also a great place to get minimalist web design inspiration in your inbox.
Unique features include:
Focus on minimalism: It exclusively features websites that prioritise simplicity and clarity, making it ideal for fans of clean and simple design.
Uncluttered interface: The browsing experience is distraction-free, reflecting the minimalist ethos of the featured sites.
Community submissions: Designers can submit their own minimalist websites to help the collection grow faster.
Websitevice is a free gallery of of nearly 3,000 web design examples intended for practical use by designers, developers and creators. Rather than showcasing flashy, award-winning layouts, it focuses on real-world, functional websites across a wide variety of industries including business, startups, real estate, Saas, e-commerce, agencies, portfolios, and more.
While more filtering options would be helpful, being able to filter by the website type is enough to help you narrow things down. It’s great to see that Websitevice is updated weekly with fresh website examples. A weekly newsletter would also be handy in the future to help keep you up to date with the latest web design trends.
Unique features include:
Results-oriented curation: It features websites designed to solve real business problems rather than to win design awards.
Human-curated and regularly updated: Every website is hand-picked and the library is kept current, ensuring relevance and quality.
Industry-wide coverage: Examples span numerous use cases from business and real estate to SaaS, agencies, portfolios, healthcare, education and beyond.
I hope you found my top free web design inspiration sites helpful. Once your creative juices are flowing, my UI design book can help you bring your website design to life. It includes everything I wish I knew when I first started out as a designer back in 2005. It’s a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical design guidelines.
It contains the most important things you need to know about interface design, usability, and accessibility. It’s helped thousands around the world and has 5-star reviews, so I’d encourage you to check it out.
If you know of any other great free web design inspiration sites please let me know and I’ll consider adding it to this ever growing list. I’m looking for regularly updated sites containing high quality websites. Search filters and large screenshots are also a big plus along with newsletters and social channels to help designers stay inspired.
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
Starting a landing page design can be challenging, especially when creative block hits. One of the best ways to overcome this hurdle is by exploring other websites for inspiration. After decades of designing landing pages, I’ve compiled a list of my favourite landing page design inspiration sites.
With so many options available, it can be tricky to know where to start. That’s why I’ve compared the top landing page design inspiration sites based on their update frequency, search and filter functionality, website previews, newsletters, and social media presence. To make it even easier, I’ve highlighted my top three picks for landing page inspiration.
All of these landing page design inspiration sites are completely free to use too, which makes them accessible to everyone. Hopefully, these resources will spark your creativity and make your landing page design process faster and smoother.
What is a landing page?
A landing page is a standalone web page designed to guide visitors toward a specific goal or action. Unlike a full website, which typically includes multiple pages and navigation options, a landing page focuses on delivering a clear and targeted message.
It’s often used in marketing campaigns to drive conversions, such as signing up for a newsletter, downloading a resource, or purchasing a product. Here’s an example of a landing page I created for my UI design book.
Key features of a landing page:
Single goal: The entire page is designed around one call-to-action (CTA) that you’re encouraging the user to take.
Minimal navigation: It reduces distractions by limiting or removing external links and navigation menus.
Focused content: The messaging is clear, concise, and aligned with the audience’s intent.
Optimised design: Visual elements and layouts are crafted to highlight the call to action and guide user attention.
Quick landing page design tips
Some practical landing page design tips to help you design effective and high-converting landing pages that deliver results.
Define a clear goal: Focus on a single, specific objective, such as lead generation, sales, or sign-ups. Avoid overwhelming visitors with multiple calls to action.
Create a compelling headline: Use a strong, attention-grabbing headline that clearly communicates the value of your offering within seconds.
Use an impactful hero section: Include high-quality visuals or videos paired with concise messaging to immediately engage visitors.
Design for simplicity: Keep the layout clean and uncluttered, with a logical flow that guides visitors toward the desired action.
Optimise your call to action (CTA): Make your CTA stand out with a prominent button, clear language, and contrasting colours to encourage clicks.
Build trust with social proof: Add testimonials, reviews, trust badges, or client logos to reassure visitors of your credibility and reliability.
Incorporate persuasive copy: Highlight benefits over features, using concise and persuasive language that resonates with your target audience.
Test and optimise: Regularly run A/B tests on elements like headlines, CTAs, and imagery to improve conversion rates.
Minimise distractions: Limit navigation options and unnecessary links to keep the focus on the primary goal of the landing page.
Add contact details or live chat options: Provide clear ways for visitors to get in touch or resolve queries to build confidence in taking action.
3 best landing page design inspiration sites
With so many awesome landing page design inspiration sites, it was hard to narrow it down to just 3. Each of these 3 sites excels across most of the judging criteria, so I’m sure they’ll help inspire you while working on your next landing page design.
One Page Love
Updated:
Daily
Community submissions:
Paid
Curation:
Rob Hope
Filters:
Search, industry, platform, typeface
Website preview:
Desktop image
Newsletter:
Bi-weekly
Social media channels:
X, Pinterest, Instagram, RSS
Price:
Free
Created back in 2008 by the king of landing page design, Rob Hope, One Page Love is my favourite landing page design inspiration site. The site features a comprehensive collection of over 8,000 creative and high-quality one-page websites. I was lucky enough to have my UI design book’s landing page featured on the site.
One of the main things that makes One Page Love such a powerful tool for finding landing page design inspiration is the comprehensive tagging system. Each and every website is meticulously tagged based on its features, industry, typefaces, and platform. The large thumbnails also make it super quick to browse layouts at a glance.
Along with landing page design inspiration, the site also includes templates, tutorials, and helpful resources for crafting impactful single-page websites. You can easily stay in the loop via numerous social media channels and the bi-weekly newsletter is especially helpful. Definitely a handy resource for landing page design inspiration.
Unique features include:
Focus on one-page websites: You’ll only find single-page website designs on this site, which often make the most powerful landing pages due to their laser focus and simplicity.
Huge collection: With over 8,000 curated single page websites, this is one of the largest collections I know of.
Extensive variety: The collection spans multiple industries and styles, from personal portfolios to corporate landing pages.
Additional resources: It offers templates, design tips, and tutorials, making it more than just an inspiration site.
Comprehensive tagging: The website’s categorisation system helps you quickly filter and find landing pages that suit specific design needs or themes.
High-quality curation: Low quality sites simply won’t make the cut. Each featured site is carefully selected, ensuring a consistently inspiring and practical resource.
Showcasing over 6,000 landing page designs, Lapa Ninja is one of the most comprehensive landing page design inspiration sites on the web. It’s a vibrant and well-organised site with a diverse collection of high-quality landing pages. It aims to help designers and developers find ideas for their next project, featuring landing pages from various industries, each selected for its unique and creative approach.
I love the extra tall thumbnails, as they allow you to see a good chunk of the landing page at a glance when browsing. The search filters are also super handy, as you can filter by a large range of categories, typefaces, and colours.
Lapa Ninja are also generous with their website screenshots, displaying multiple full page screenshots of the entire website. You literally never need to leave the site when browsing for inspiration. There’s also lots of social media channels to follow for daily inspiration, and the weekly newsletter is great too.
Unique features include:
Wide variety of landing page designs: It features an extensive selection from different sectors, ensuring inspiration for a range of projects.
Regularly updated content: The site frequently adds new designs, keeping the collection fresh and relevant.
Search filters: Search filters for industry, colour, and typeface allow for precise and efficient browsing.
Large thumbnails: Extra tall thumbnails allow you to see a good chunk of the landing page at a glance when browsing.
Generous screenshots: Multiple full page screenshots of the entire website means you don’t need to leave the site.
Large collection: With over 6,000 curated landing pages, this is one of the largest collections out there.
Launched back in 2013, Landbook has been the go-to landing page design inspiration site for many designers for a while now and it’s easy to see why. It has a huge curated collection of some of the best landing page designs on the web. While it started off as a completely free resource, the team has recently introduced a paid version which unlocks some of the new “pro” features. This small fee helps them pay the bills and keep developing new features, which is very fair if you ask me.
The free version is pretty good and includes a bunch of search filters as well as full page screenshots for both desktop and mobile. It’s not just landing pages either, they’ve also curated collections for other website types including portfolios, blogs, and ecommerce stores. In addition to that, there are collections for different page types too, such as about pages, pricing pages, and sign up pages.
The paid version unlocks access to more categories, components, and search filters. It unlocks mobile screenshot previews and also allows you to save inspiration to folders for better organisation. Another cool thing is that you can see older versions of each website or page to see how they’ve evolved over time. Definitely a handy resource when you’re looking to design a landing page and need some inspiration. If you don’t mind paying a small fee, the pro version is my pick of the bunch.
Unique features include:
Huge variety of landing pages: Showcases hundreds of landing page designs across different industries and styles, giving you plenty of ideas to explore.
Powerful filtering: Lets you filter pages by component, colour, style, industry, type, desktop, and mobile, ensuring you find designs that match your goals quickly.
Daily updates: Frequently adds new designs to keep the inspiration flowing and up-to-date with the latest trends.
Desktop and mobile screenshots: Displays full-page screenshots of designs in both desktop and mobile orientation, so you don’t need to leave the site.
Bookmarking feature: Allows you to save your favourite designs for easy access later.
The top 3 landing page design inspiration sites might be sufficient for most, but if you’re keen for more, I’ve got you covered. Here’s a regularly updated list of my other favourite sites for landing page design inspiration.
Landing Gallery
Updated:
Daily
Community submissions:
Yes
Curation:
Chris Jayden and Tim Skou
Filters:
Page type, platform
Website preview:
Full screen desktop and mobile image
Newsletter:
Weekly
Social media channels:
X
Price:
Free
Landing Gallery is a sleek and straightforward landing page design inspiration site dedicated to showcasing high-quality landing pages. It’s one of my favourite places to go on the web for landing page design inspiration for many reasons.
What’s unique about Landing Gallery is that it contains full page screenshots for both the desktop and mobile versions of each landing page. If the website has multiple pages, the other pages are captured too. So, you never need to leave the site. You can also subscribe to the weekly newsletter if you prefer to get your fix of landing page design inspiration in your inbox.
The filters are pretty simple and only allow you to filter by website type and platform, but that’s often all you need. Most of the time you’re looking for inspiration for a specific page you’re working on like a pricing page, contact page, or about page.
Unique features include:
High-quality curation: The site focuses on showcasing well-crafted landing pages that stand out for their design and functionality.
Desktop and mobile screenshots: It’s really handy to be able to view both desktop and mobile views of each landing page. They’re full page screenshots too.
Wide range of styles and industries: It offers diverse examples from different sectors, making it suitable for inspiration across various projects.
Constantly refreshed content: New landing pages are added regularly, ensuring the gallery stays up-to-date with current design trends.
OG image: The OG (Open Graph) or social media image for each website is also showcased.
SaaS Landing Page is a landing page design inspiration site that focuses exclusively on SaaS (Software as a Service) products. It curates a collection of sleek, high-performing designs aimed at maximising conversions, making it a valuable resource for SaaS founders, marketers, and designers.
I love the clean and simple design of the site, as it brings focus to the content. With over 700 landing page examples, it’s not the largest collection, but the quality is high. The filters are also limited, but I like that you can filter by page type and typeface. It’s also nice to have a full page screenshot, so you don’t need to leave the site. It would be great to have some social channels to follow or a newsletter to stay up to date.
Unique features include:
Exclusive focus on SaaS landing pages: It provides inspiration tailored specifically for SaaS products, addressing the unique challenges of this market.
High-conversion designs: The collection emphasises landing pages optimised for user engagement and conversion, offering practical ideas for effective design.
Category-based browsing: You can navigate and filter designs by page type such as pricing pages, testimonials pages, or about pages.
Full page screenshots: Most landing page design inspiration sites only contain short screenshots, so you need to leave the site to view the landing page. SaaS Landing Page contains full page screenshots.
Landings is a landing page design inspiration site dedicated to providing a comprehensive collection of modern landing page designs. It features landing page examples that showcase effective visual design and modern design trends. There aren’t a large amount of filters, but you can filter by popular colours or web development platform. This makes it a handy resource for those seeking practical and visually appealing landing pages that align with modern web design standards.
Unique features include:
Modern and relevant inspiration: It stays up-to-date with the latest design trends, catering to the evolving needs of web designers.
Full page screenshots: Most landing page design inspiration sites only contain short screenshots, so you need to leave the site to view the landing page. This one contains full page screenshots.
Platform-based browsing: You can navigate and filter landing page designs by platform including React, Next.js, Webflow, WordPress, Tailwind, and Framer.
Landdding is a curated landing page design inspiration site showcasing high-quality landing page designs. Rather than being driven by a judging panel, landing pages are submitted and voted on by a community of landing page enthusiasts. This makes it one of the more democratic landing page design inspiration sites. The top 3 landing pages each day are awarded a badge.
The search and category filter are just enough to allow you to hone in on a specific type of landing page for inspiration. While there isn’t an email newsletter or social channels to follow, you’ll find a unique selection of landing pages here that you might not see on other landing page design inspiration sites.
Unique features include:
Unique landing page inspiration: Offers a curated collection of unique and high-quality landing page designs that you might not see elsewhere.
Category-based browsing: You can navigate and filter designs by page type such as pricing pages, testimonials pages, or about pages.
Constantly refreshed content: New landing pages are added daily, ensuring the gallery stays up-to-date with current design trends.
Single Serving Sites is a unique landing page design inspiration site that showcases simple, single-purpose websites. The landing pages featured here are generally composed of a single page with a dedicated domain name.
It celebrates the creativity and functionality of minimalist web design, highlighting sites that excel in solving one specific problem or delivering a focused message. This resource is perfect for designers and developers seeking inspiration for concise and impactful landing pages.
Unique features include:
Focus on single-purpose landing pages: Highlights single-purpose websites generally with a single page and a dedicated domain name.
Inspires minimalist design thinking: highlights landing pages that excel in solving one specific problem or delivering a focused message.
I hope you found my top landing page design inspiration sites helpful. Once your creative juices are flowing, my UI design book can help you bring your website design to life. It includes everything I wish I knew when I first started out as a designer back in 2005. It’s a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical design guidelines.
It contains the most important things you need to know about interface design, usability, and accessibility. It’s helped thousands around the world and has 5-star reviews, so I’d encourage you to check it out.
What’s your go-to landing page design inspiration site?
If you know of any other great landing page design inspiration sites please let me know and I’ll consider adding it to this ever growing list. I’m looking for regularly updated sites containing high quality websites. Search filters and large screenshots are also a big plus along with newsletters and social channels to help designers stay inspired.
Archive for the ‘Blog’ Category:
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
As a designer I’ve always loved icon design. There’s something magical about being constrained to a tiny canvas of 24 by 24 pixels. Obviously, many other designers feel the same, as they’re spending hundreds of hours crafting beautiful free icon sets for us to use in our website and app projects.
We’re really lucky to have so many icon sets to choose from, but it can be tricky and time consuming to find a high quality icon set that meets your needs. I’ve searched through hundreds of icon sets over the years and picked out the best free icon sets for UI design. They’re all completely free to use in both personal and commercial projects, which is pretty amazing if you ask me. This means that you can use them in your design system too.
I’ve also summarised the features of each icon set to make them faster and easier to compare. At a glance you can see the number of icons, icon styles, file formats, development libraries, and customisation options. Let’s learn a little bit about icons before comparing my top free icon sets.
What is an icon set?
An icon is a small, simple visual representation of an idea, action, or object. In UI design, icons are used to help users quickly find and recognise elements. For example, a trash can icon generally represents “delete,” and a magnifying glass icon represents “search.”
An icon set is a collection of icons designed in a consistent style. Icon sets help maintain design consistency across digital products by providing a unified visual language. They are often used in design systems across web and app design to simplify navigation and make interfaces more intuitive and user-friendly. Designers can select icons from the set to match their needs, ensuring the visual style and meaning remain cohesive throughout the project.
What makes a high quality free icon set?
Here’s a quick breakdown of what to look for when choosing an icon set for your project.
Clarity and simplicity
Effective icons communicate their meaning instantly and clearly. Simplicity is key, each icon should represent its function or concept without unnecessary detail. Each icon in the set should use universally recognized symbols or follow familiar visual conventions. This helps ensure that users can quickly understand the icons’ meanings even without a text label.
Some icon sets will reduce visual complexity as the size of the icon decreases. This means they’ll have separate sets of icon designs for different sized icons.
Sufficient number of icons
Most icons sets contain a few hundred of the most common universal icons, so they should meet your needs for most projects. There’s generally no need for huge icon sets with thousands of icons, as recognition of most of the icons would be low anyway. If you’re creating a specific type of app, like a music or travel app, look for icon sets that contain those types of icons. Top icon sets often organise icons into categories to make it easy to check what’s on offer. You can always modify existing icons to meet your needs too, or even create your own to add to the set.
Icons should look consistent
A strong icon set maintains a consistent style throughout, including uniform line thickness, shapes, curves, and proportions. Consistency ensures that the icons look cohesive together, creating a polished and professional design. Whether the style is flat, outlined, or filled, it should remain the same across all icons.
Icons should come in a range of file formats
Look for icon sets that come in a range of file formats. SVG and Figma formats are best. PNG files are less flexible, as they’re not vector images and can’t be resized without pixelation.
Some icon sets also support development libraries like React, Vue, and other JavaScript frameworks. These libraries allow you to quickly import and use icons in your code, making them easy to manage and customise within your app. Free icon sets don’t often support many development libraries, but luckily I’ve found some amazing ones that do.
Other icon sets are also available as icon fonts. Icon fonts turn icons into font characters, allowing you to use them in websites similarly to text. This makes them easy to customise with CSS and simple to integrate in your website code.
Icons should be easy to find
With so many icons it can be hard to find the one you’re after. Some free icon sets have a website with search functionality which makes it a lot faster to find what you need. Some also provide a Figma plugin where you can quickly search for the icon you’re after and insert it into Figma in seconds.
Icons should be easily customisable
Icon sets that allow customization, such as changing colours, stroke width, or fills, offer more flexibility. Designers often need to tailor icons to match their brand or style, so having an adaptable set can be a major advantage. Most free icon sets come in both a line and a fill style.
Additional extras to look out for
There are a few extra things that make an icon set faster and easier to use. Being able to copy an icon from the icon set’s website to your clipboard makes it faster to paste it into your design in Figma. Being able to filter by categories is also handy. A Figma plugin where you can search for the icon you’re after and insert it into your design is even better. These are big asks for free icon sets, but many of the icon sets in this list have these features.
UX design guidelines for using icons
Before we start comparing free icon sets, let’s go through some quick UX design guidelines to help ensure that we’re using icons correctly. If you’re looking to learn more about UI design, check out 16 little UI design tips that make a big impact.
Use common symbols to help ensure recognition
Icons should be instantly recognisable and convey a clear meaning. Avoid using overly abstract or complex icons that might confuse users. It’s safest to use common icons that most people are familiar with. These are sometimes called “universal icons”, as they’re universally understood by most people.
If an icon’s meaning isn’t obvious, don’t use it, or consider pairing it with a text label to improve clarity. If you’re unsure, conduct usability testing with your target audience. Even commonly used icons can have different interpretations across cultures.
Maintain consistency across icons
Use a consistent style for icons throughout the interface. This includes matching line thickness, colour, border radius, and size. A uniform icon style helps create a cohesive visual language and improves user familiarity. If you choose a high quality icon set, you won’t need to worry about maintaining consistency.
Try to pair icons with text
No matter how common a particular icon is, there’s a risk that its meaning may not be immediately clear. Adding a text label can help ensure the meaning of an icon is clear. This is particularly important for complex actions or less common icons. If there are space constraints on the interface, it’s ok to use an icon without text, as long as the icon’s meaning is commonly understood by users.
Use icons purposefully
Like I say in my Practical UI design book, every detail on an interface should earn its place by having a logical purpose behind it. Icons are no different. Not every action on an interface needs an icon. Too many icons can overwhelm users or make it difficult to focus on key actions.
Ensure icons have sufficient contrast
Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are many online tools to help you measure contrast ratios between different colours.
In order to help ensure that people with low vision can clearly see interface details, like icons, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. User interface elements that convey information, like icons, require a minimum contrast ratio of 3:1.
Avoid visually complex icons
Since icons are generally very small in size, typically 24px by 24px, it’s important to keep them simple and minimal to improve legibility. For very small icons, like 16px by 16px, reduce their visual complexity even further. Well designed icons sets will automatically reduce visual complexity as the size of the icon decreases. Only one of the free icon sets in this article offers this level of detail, Heroicons by the Tailwind CSS team.
Ensure icon touch targets are sufficient
Small targets are more difficult to click or touch than large ones. This is especially true for those with impaired motor control, or even someone holding their phone with one hand and using their thumb.
If you’re using icons as interactive buttons, try to stick to the following guidelines to ensure they have a sufficient target size:
Make buttons at least 48pt by 48pt in size. This aligns with an 8pt grid and is slightly larger than the WCAG recommendation of 44pt by 44pt.
Make frequently used buttons even larger to improve efficiency and to help avoid them being missed.
Separate buttons by at least 8pt to help prevent people mistakenly pressing the wrong one.
Ensure icons match your brand
Icons come in a range of styles to suit different aesthetics. Some have rounded corners for a relaxed and friendly vibe, while others are sharper for a more serious feel. Depending on your brand vibe, make sure you choose an icon set that suits your brand. The free icon sets in this article come in a range of different aesthetic styles, from soft and round to sharp and angular.
Some icon sets allow you to alter the corner radius and border thickness, making them especially suitable for a range of different brands. Other icon sets have a neutral look and feel which should also work well for most brands.
3 best free icon sets
With so many icon sets to choose from, it’s hard to find the best icon set for your web or app project. I’ve searched through hundreds of icon sets over the years and picked out the best free icon sets for UI design. The top 3 icon sets are all beautifully crafted, have a large number of icons, many file formats, support popular front end development libraries, and offer flexible customisation options.
Phosphor icon set
Number of icons:
1,248
Styles:
Line, fill, duotone
File formats:
SVG, Figma
Code libraries:
Web, React, Vue, Flutter, Elm, Swift
Figma plugin:
Yes
Search functionality:
Yes
Customisation options:
Size, stroke width, colour
Phosphor is my favourite free icon set for many reasons. As soon as you land on the website, you can clearly see the high quality and attention to detail. The creators, Helena Zhang and Tobias Fried, did an amazing job crafting each and every icon.
Because they designed the icons at 16px by 16px, rather than the conventional 24px by 24px, the icons are highly legible at small sizes. With over a thousand icons to choose from, you’re sure to have everything you need for most website and app projects. There are lots of handy customisation options too, including size, stroke width, and colour, which makes this free icon set especially flexible for different brand aesthetics.
Along with the usual SVG format, there’s also a Figma file that you can add to your design system. By the way, if you’re having trouble building your design system, I’ve written a free guide on how to build a design system. Phosphor also has a Figma plugin that allows you to quickly search and pull in icons into your Figma files as needed. Last but not least, this amazing icon set comes in a bunch of different code libraries, including web, React, Vue, Flutter, Elm, and Swift. All in all, a beautifully crafted, easy to use, and feature rich icon set. Honestly, it’s crazy that it’s completely free.
Most paid icon sets don’t provide nearly as much value as the Tabler icon set. Created and maintained by Pawel Kuna along with a bunch of keen contributors, this huge open source icon set of over 5,000 icons is beautifully crafted and full of handy features.
Icons are designed on a 24px by 24px grid with a 2px stroke weight. The icon style is neutral and modern with curved corners and sharp ends. They come in both a line and fill style and can be customised by size, stroke width, and colour. This makes them super flexible for just about any website or app project you’re working on.
Developers will also love this icon set, as there are libraries for most front end frameworks. This makes it really quick and easy to install the icon library and use them in your code immediately. There’s also a Figma plugin to help speed up designer’s workflows. I’ve put together a list of my top Figma plugins for web design if you’re interested. We’re so lucky to have access to such great free icon sets.
While the Lucide icon set isn’t the biggest, what they lack in size is made up for with their focus on quality. One of the main reasons behind the quality of this beautiful minimal icon set is the fact that it was based on the father of all free icon sets, Feather icons, created by Cole Bemis.
Since the Feather icon set is no longer actively maintained, the Lucide team, along with their community of contributors, is actively building on and improving this beautiful minimalist icon set. They’ve cleverly created icon design guidelines based on the original Feather icons style, to help ensure quality and consistency across the community of contributors.
While this open source icon set only comes in a line icon style, you can still create filled versions of most icons if needed. There’s also a handy style customiser that allows you to adjust colour, stroke width, and size. There’s even an option to fix the stroke width regardless of the icon size. The search and category filter are also super handy to help find the icons you’re looking for.
Heaps of development library packages are available to make it quick and easy to integrate Lucide icons into your development project. They include Web, React, React Native, Vue, Vue 3, Svelte, Preact, Solid, Angular, NodeJS, and Flutter. I love that the Lucide community is driven to expand the Feather icon set while remaining true to the original minimalist design language. Looking forward to seeing this classic icon set grow further.
Perhaps you don’t need all the bells and whistles of the top 3 icon sets? Or maybe you’re looking for a different aesthetic? I’ve put together a list of some of my other favourite icon sets. They may not be as big or feature rich as the top 3, but if you’re looking for quality, not quantity, it’s definitely worth checking out the following high quality free icon sets.
Iconoir icon set
Number of icons:
1,597
Styles:
Line, fill
File formats:
SVG, Figma
Code libraries:
Icon font, React, Flutter, Framer
Figma plugin:
No
Search functionality:
Yes
Customisation options:
Size, stroke width, colour
When you look at this beautiful open source icon set, you can tell that Luca Burgio put lots of love into crafting each and every detail. The icon style is minimal and modern with slightly curved edges. Both line and fill styles are available and you can customise size, stroke width, and colour easily. Available in SVG and Figma formats along with a range of development libraries, this is one of the best icon sets out there.
Most icon sets these days have curved corners, but Jimmy Cheung and Wendy Gao have chosen to give their Remix icon set a sharper aesthetic. With close to 3,000 icons, it’s hard to believe that this pixel perfect icon set is 100% free to use for both personal and commercial use.
Super popular and regularly maintained, this icon set was designed on a 24 by 24 pixel grid in both line and fill styles. There’s a handy Figma plugin to speed up your design workflow and you can customise icon size and colour too. Remix is also super easy for developers to use, as it supports a range of development libraries.
Feather icons are often regarded as the origin of modern icon sets. Their beautiful minimal aesthetic has made them one of the most popular icon sets of all time, so there’s a good chance you’ve already seen them in multiple websites and apps. While it’s not a particularly large icon set, it has been the inspiration for many other icons sets. The creator, Cole Bemis, should be really proud of his creation.
While Feather icons only come in a line style, you can customise their size, stroke width, and colour. There’s also a Figma file and Figma plugin available. The project itself doesn’t support many development libraries, but there are many related spin off projects that have you covered. If you’re looking for a beautiful minimal line icon set, then Feather could be for you. I liked them so much that I used them in my Practical UI Figma design system.
Heroicons were created by the super talented Steve Schoger and the Tailwind CSS team. As with all of Steve’s products, this icon set is really high quality. Rather than simply allowing you to scale the icons to any size, like most icons sets, Heroicons have been created at specific sizes to ensure maximum clarity and legibility. If we look at the following example, you can see that the level of visual detail in the icon decreases as it gets smaller. This level of detail is rarely seen in paid icon sets, let alone free icon sets.
It’s not a very large icon set, but what it lacks in size it makes up for in quality. Icons come in SVG and Figma format and React and Vue development libraries are also supported.
Glyphs is a bit different to most icon sets. Not only do they offer the usual line and fill icon styles, they also offer coloured and duotone styles, which generally only come with paid icon sets. They’ve also been designed on a larger 80 by 80 pixel grid. This makes them more suitable for use at a larger size as decorative illustrative elements on landing pages and marketing websites. If you’re experiencing creative block designing your website, check out my top free web design inspiration sites.
You can tell that the creator, Goran Spasojevic, is very organised and has spent a lot of time creating the Figma file for this icon set. Icons have been created as components with variants and meticulously sorted into categories to make them easier to find. Glyphs icons are also easy to customise and support a range of development libraries. The style is on the fun and funky side, so if that’s your brand vibe, this could be the icon set for you.
If your brand vibe is fun and friendly, Mage could be the icon set for you. Their heavily rounded aesthetic gives them a much softer vibe than most other icon sets. They come in line and fill styles and also come with a handy bunch of popular brand icons. There’s currently a React library for developers and the creators, Nischal Kharel and Prayush Bijukchhe, are planning on expanding this offering in the future.
This free, modern icon set features over 700 open-source, CSS-friendly icons perfect for web and app design. The icons are lightweight and fully customizable with CSS, making them easy to style and animate. Created by Astrit Malsija, this icon set includes a variety of popular icons organised across multiple categories. The set mostly consists of line icons, although some include solid elements too.
Ionicons is an open-source icon set developed by the Ionic team, featuring 1,300 icons designed to complement modern web and mobile interfaces. Originally created for Ionic Framework apps, Ionicons has grown into a versatile icon library compatible with any project. It offers icons in the usual line and fill styles, but also offers a sharp variant for those looking to move away from curved corners.
Iconsax is a particularly versatile free icon set, as it comes in a range of different styles. This makes it easy to adapt to various design aesthetics. The icon design is soft and round giving the icons a fun and friendly vibe. While originally built for the Vuesax Vue framework, this free icon set can be used for personal and commercial use in any project. While there’s no search functionality on the website, the Figma file is neatly organised into sections and icons are labelled to make them easy to find.
Boxicons is a lightweight and versatile icon set offering over 1,500 icons, perfect for modern web and mobile design. If their sharp, bold design reminds you of the icons from Google Material Design, it’s because they follow their official guidelines. Available in various styles, including line and fill, and logo-specific icons, this open source icon set provides flexibility to suit a range of aesthetics. The icons come in SVG and web font formats, making them easy to integrate into projects and customise with CSS for size, colour, and animations.
If you’re looking for a minimal retro vibe, this could be the icon set you’re looking for. Designed on a 24 by 24 pixel grid, Sargam icons work really well at a small size. Along with the usual line and fill styles, they also have a duotone style which can be a nice way to differentiate them from other icon sets. SVG’s have been optimised for better web performance and there’s also a React library and a Figma file.
I hope you found my top free icon sets helpful. While icons are important, they’re just a small part of UI design. I recently wrote my own UI design book that includes everything I wish I knew when I first started out as a designer back in 2005. It’s a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical design guidelines.
It contains the most important things you need to know about interface design, usability, and accessibility. It’s helped thousands around the world and has 5-star reviews, so I’d encourage you to check it out.
14 logic-driven UI design tips to improve any interface
By Adham Dannaway on January 1, 2026
Whether you’re a UX designer, product designer, illustrator, brand designer, or web designer, creating your design portfolio will likely be the most fun and most challenging project you’ll work on in your design career. Getting started can feel overwhelming, especially when you’re unsure where to begin or struggling with creative block. One of the best ways to get inspired is by exploring portfolios from other designers. After decades working as a product designer, I’ve compiled a list of my favourite design portfolio inspiration sites.
While you can often filter general web design inspiration sites by “portfolio” type, there aren’t many dedicated to showcasing portfolio websites only. In this article, I’ve evaluated the top design portfolio inspiration sites based on their update frequency, search and filter functionality, variety of examples, newsletters, and social media presence.
To simplify things, I’ve also highlighted my 3 favourites. These design portfolio inspiration sites are sure to spark your creativity and help you craft a portfolio that truly stands out.
What is a design portfolio website?
A design portfolio website is an online platform where designers showcase their work, skills, and expertise. It acts as a digital résumé and gallery, allowing potential clients or employers to view a designer’s design projects and understand their skills, style, and experience.
Your portfolio website gives you a chance to freely express yourself without meddling clients or hovering art directors getting in the way. That’s why portfolio websites are often the most unique and interesting websites out there on the internet.
Here’s my own portfolio site that I created back in 2008. My goal was to create something unique to help me stand out from the crowd. It turned out that lots of designers liked the concept and were “heavily inspired” by it.
A design portfolio website typically includes:
Examples of past projects or case studies.
An “about” section detailing the designer’s background and approach.
Contact information to allow others to get in touch via email or follow the designer on social media.
Additional features like testimonials, blog posts, or downloadable résumés.
A well-crafted design portfolio website not only highlights technical and creative skills but also reflects the designer’s personal brand, making it a critical tool for career growth in the UX, product, and web design industry.
Quick portfolio website design tips
Follow these tips to create a portfolio website that effectively showcases your work and skills, tells your story, and lands you the clients or design jobs you’re after.
Define your purpose: Decide whether your portfolio will focus on attracting clients, showcasing skills for jobs, or sharing personal projects, and design accordingly.
Focus on your best work: Feature only your strongest projects to leave a lasting impression. Quality generally beats quantity in a portfolio website.
Show your personality: Infuse your site with unique design elements, colour schemes, or typography that reflect your personal brand and creativity. This is actually what helped my portfolio website get featured in blog posts and galleries, as it was so different to others out there at the time.
Include an “About” page: People connect with people. Share your background, skills, and design philosophy to add a personal touch and connect with your audience.
Provide detailed case studies: Go beyond images by explaining your design process, challenges, and solutions to demonstrate your expertise. Be sure to highlight how your solution achieved the goal using metrics or customer feedback.
Build trust with social proof: Add testimonials, reviews, trust badges, or client logos to reassure visitors of your credibility and reliability.
Highlight your role: Clearly specify your contributions in collaborative projects to give visitors a clear understanding of your skills and involvement.
Use high-quality visuals: Ensure your work is presented with large, high-resolution images or mockups to showcase your designs in the best light. Demonstration videos can also work well to show animations and interactions.
Add a clear call-to-action: Make it easy for potential clients or employers to contact you by including a prominent call to action. Contact forms work well and help ensure you collect the information you need to provide a quote for client projects.
Keep it updated: Regularly add new projects, update your skills, and remove outdated work to ensure your portfolio remains relevant. This is the one that many of us, including myself, struggle with.
3 best design portfolio inspiration sites
One of the things that sets portfolio websites apart from others is that you can run wild with your creativity. I love to see the many different ways creative people present themselves and their work. The following design portfolio inspiration sites are my favourite of the bunch. Each of them excels across most of the judging criteria, so I’m sure they’ll help inspire you while creating or updating your portfolio website design. I’ve focussed on showcasing free sites to ensure they’re accessible to all.
Killer Portfolio
Updated:
Ad-hoc
Community submissions:
Yes
Curation:
Mike Harmer
Filters:
Type
Website preview:
Multiple large desktop screenshots
Newsletter:
Monthly
Social media channels:
X
Price:
Free
Killer Portfolio is my favourite free design portfolio inspiration site because it’s different from the others. Every portfolio featured on the site comes with commentary and numerous screenshots to help you understand what makes each portfolio design special.
There’s basically a small case study for each portfolio to unlock the secrets of what makes a killer portfolio. Curated by Mike Harmer, you can really tell that they have a passion for portfolio website design and know how to find particularly beautiful and unique portfolios. The extra effort Mike puts into each of the featured portfolio sites sets this resource ahead of the rest.
The site highlights diverse portfolio styles, providing a wealth of inspiration for designers looking to create their own standout online presence. Its clean layout and well-organised structure make browsing seamless and enjoyable. I find myself just sitting at my desk with my cup of tea browsing through each portfolio one at a time. It’s fun to see the weird and wonderful things designers create when they have full creative freedom.
Unique features include:
Case studies for each portfolio: Rather than simply displaying a screenshot of the portfolio website, each portfolio comes with commentary and numerous screenshots to help you understand what makes it a killer portfolio.
Beautifully curated selection: The curator, Mike Harmer, has particularly good taste and selects only the most impressive portfolio designs to showcase.
Clean, distraction-free interface: The site itself is designed beautifully with some clever visual details, making it a pleasure to browse. You can easily focus on the portfolios themselves without any unnecessary clutter.
Foleo showcases a wide variety of creative design portfolios. It highlights the best work from designers across multiple disciplines, offering a rich source of inspiration for creating your own portfolio. The website focuses on high-quality, visually striking portfolios to help you stand out in the crowd.
I like the taller than usual preview thumbnails that allow you to quickly browse portfolio designs. I’d love to see more search filters added in the future though, as they’re currently limited to a handful based on the portfolio website style. Each portfolio site comes with a large desktop screenshot along with details regarding the platform used to build the site and the fonts used. The screenshot isn’t full screen, so you’ll need to leave the site to view the full page.
This is one of the only dedicated design portfolio inspiration sites I could find with a newsletter. I like newsletters, as they keep you up to date with the latest designs without you needing to remember to visit the site. This is also one of the only regularly updated free portfolio inspiration sites out there, as many of the others unfortunately no longer seem to be maintained.
Unique features include:
Diverse portfolio collection: Features work from various creative fields including UX, product design, and brand design ensuring broad inspiration.
Modern design examples: Updated regularly, it showcases portfolios with innovative layouts, bold typography, and interactive elements.
Category filter: Filter portfolios based on portfolio style including minimal, dark, and clean.
Regular updates: Continuously adds fresh content to keep the collection relevant and inspiring.
Monthly newsletter: Get portfolio inspiration emailed to you monthly.
Bestfolios is a comprehensive design portfolio inspiration site showcasing some of the most impressive design portfolios from designers in a range of creative fields. It features portfolios across UX design, graphic design, motion design, industrial design, and UX research. The site doesn’t just feature portfolio designs either, it also includes resumes and specific examples of impressive design case studies.
This curated collection of portfolios is a great place to gain valuable insights into different design styles, techniques, and trends. Each portfolio site comes with a full page screenshot along with similar portfolios you may also like. There’s even an email newsletter to make sure you get your weekly dose of portfolio design inspiration.
Bestfolios is an awesome resource for designers looking to create a standout portfolio or even if you simply want to see what cool and crazy things other designers are doing to present themselves and their work.
Unique features include:
Wide variety of design disciplines: Features portfolios across UX design, graphic design, motion design, industrial design, and UX research, catering to different creative fields.
Curated collection: Focuses on high-quality portfolios, ensuring the featured work represents industry-leading talent.
Features case studies and resumes: Bestfolios also showcases specific case studies from portfolios as well as resumes.
Frequent updates: Regularly adds fresh portfolios, keeping the collection relevant and up to date.
The top 3 design portfolio inspiration sites might be sufficient for most, but if you’re keen for more design portfolio inspiration, I’ve got you covered. Here’s a regularly updated list of my other favourite sites for portfolio inspiration.
Wall of Portfolios
Updated:
Ad hoc
Community submissions:
Yes
Curation:
Praneeth Jonnala
Filters:
Style, company
Website preview:
Full interactive website
Newsletter:
No
Social media channels:
X, Instagram
Price:
Free
Wall of Portfolios stands out from most design portfolio inspiration sites, as it includes a full interactive website preview of each portfolio site. Most sites only provide a screenshot preview. This means you can browse hundreds of portfolios without ever leaving the site, which is pretty handy.
The quality of portfolio designs featured on the site is varied, as the collection includes many junior designers eager to get their name out there and be featured on the homepage for the portfolio of the month award. There are still lots of creative designs being showcased which is great to see.
A short profile is created for each designer who submits their portfolio. The profile includes a little bit about them, where they’re located, how many years work experience they have, as well as the companies they’ve worked for. Many of the portfolios featured on the site were created by designers from India, but submissions are open to anyone.
Unique features include:
Diverse portfolio collection: Features portfolios from designers in various disciplines, including UX/UI, product design, graphic design, and branding.
Quick portfolio previews: Displays full interactive website previews of portfolios, enabling you to browse and explore without leaving the site.
X social feed: The X social channel is especially good to stay up to date with the latest designs, as it’s updated regularly and features video previews.
Community focus: Celebrates individual designers and their work, creating a platform for recognition and inspiration.
Pafolios is a great design portfolio inspiration site that showcases outstanding design portfolios from across the web. One thing that sets it apart from other portfolio collections is its super tall thumbnails, which allow you to quickly browse through portfolio designs. If you need a bit more detail than the thumbnail provides, there’s also a full page screenshot for each portfolio.
The quality of featured portfolios is high and you can filter them based on the type of designer that created them. Filters include UX & product design, brand design, writers, illustrators, artists, and photographers. There’s also a weekly email newsletter to keep you inspired. Definitely an excellent resource for discovering exceptional design talent and improving your own portfolio standards.
Unique features include:
High-quality curation: Showcases only the most creative and polished design portfolios, ensuring every entry is worth exploring.
Wide range of design fields: Includes portfolios from various disciplines, such as UX/UI design, graphic design, and illustration.
Minimalist interface: Features a clean and straightforward layout, allowing you to browse portfolios without distractions.
Tall thumbnail previews: Extra tall thumbnail images allow you to quickly browse through portfolio designs before seeing the full page screenshot in more detail.
Case studies: Top design case studies are also featured and include some inspiring case studies from Lonely Planet, Apple Music, and Uber.
Prettyfolio is all about showcasing beautiful and creative design portfolios from top designers around the world. While the site hasn’t been updated recently, it celebrates unique and eye-catching designs, making it a great place to find inspiration for your own portfolio. The search filters are limited, but the full page screenshots speed up the browsing experience.
Unique features include:
Beautiful designs: Focuses on high quality, visually stunning portfolios that grab attention and inspire creativity.
Varied styles: Features a mix of designs, from sleek and simple to bold and artistic.
Full page screenshots: Full page screenshots of each portfolio website speed up the browsing experience.
Personal Sites is a thoughtfully curated collection of unique portfolio websites, offering a treasure trove of inspiration for designers looking to craft portfolios with personality and flair. It was originally built and curated by well known designer, Andy Bell, but judging by the style of the featured portfolios, the collection hasn’t been updated in a while. Luckily, there’s still much on offer, as a well designed website can last the test of time, especially if its design fundamentals are solid.
The design of this portfolio inspiration site is super minimal. It’s basically just a feed of small thumbnails that link off to the portfolio website itself. No search filters, detailed screenshots, or newsletters. I guess that’s all you really need in the end.
Unique features include:
Curated selection: Originally built and curated by well known designer, Andy Bell, every featured site is handpicked to ensure only the most creative and interesting personal websites make the cut.
Minimalist design: The clean and distraction-free layout makes for a simple browsing experience, although some filters and large screenshots would be helpful.
When it comes to design portfolio inspiration sites, Portfolio Project is quite an enigma. I’m not sure who created it and whether or not it’s still maintained, but it’s still worth mentioning, as it features some unique portfolio websites from professionals across a range of creative fields. Whether you’re starting from scratch or refining an existing portfolio, this site offers plenty of ideas to make your work shine.
Unique features include:
Diverse portfolio styles: Features a wide range of portfolio designs, from minimal and modern to bold and experimental, offering inspiration for all tastes.
Clean browsing experience: The simple and intuitive design ensures you can quickly browse and find inspiration without clutter or distractions.
With all that inspiration, I hope you feel more confident about designing your portfolio website. If you’re still having trouble bringing your website to life, my UI design book will help. It includes everything I wish I knew when I first started out as a designer back in 2005. It’s a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical design guidelines.
It contains the most important things you need to know about interface design, usability, and accessibility. It’s helped thousands around the world and has 5-star reviews, so I’d encourage you to check it out.
Looking for more design portfolio inspiration?
All of the websites featured in this article are dedicated to showcasing design portfolio inspiration only. There are lots of other more general web design inspiration sites that can be filtered to show portfolio sites. Hope you find them helpful.
What’s your go-to design portfolio inspiration site?
If you know of any other great design portfolio inspiration sites please let me know and I’ll consider adding them to this ever growing list. I’m looking for regularly updated sites containing high quality websites. Search filters and large screenshots are also a big plus along with newsletters and social channels to help designers stay inspired.
