5 websites for better web design

The blank page is the hardest moment of any project.

The client wants a website that is "modern, clean and stands out". Three adjectives that can mean a hundred different things.

Before opening a design tool, it pays to do what anyone who designs things does: look at how others solved the same problem. Not to copy, but to understand what works and why.

This guide covers 5 reference websites, each useful at a different stage of the work.

01. Curated: find the style before you start

Curated is a collection of real websites, picked one by one: today there are almost 3,000. Each entry shows a screenshot and links straight to the live site, so you can see animations, loading and mobile behavior.

Its strength is filtering. You can search by industry (agencies, e-commerce, education, finance, portfolios) and by style, and see in a few minutes how others present themselves in your client's industry.

There is also an area dedicated to individual page parts, such as heroes, pricing and footers. Browsing is free; advanced filters and saved searches are part of the Pro plan, at 9 dollars a month.

When to use it: at the start, to agree on a visual direction with your client before you design anything.

02. Hoverstates: when everything looks the same

After some time on website galleries, the feeling is always the same: centered hero, three columns of benefits, orange button. Everything tidy, everything identical.

Hoverstates goes the other way. It describes itself as the home of alternative design, code and content on the web, and collects experimental websites: unusual navigation, animated typography, grids that break the rules. Each entry has a short note on what makes that site interesting.

These are not templates to replicate for a restaurant website. They are ideas to borrow one detail from: a different way to show a portfolio, a cursor that changes with the content, a bold use of type.

When to use it: when the project is correct but anonymous, and it needs one element that makes it recognizable.

03. Unsection: when one section is not working

Sometimes the problem is not the whole website. It is one part: the hero does not convince, the pricing table confuses, the footer is a list of links with no order.

Unsection collects exactly that: individual website sections, grouped by type, such as headers, footers and calls to action. You can filter them by style and by tag, and there is also a collection of hover effects and a library of SVG shapes.

Comparing ten different heroes of the same kind is the fastest way to see what yours is missing.

When to use it: when the website exists and you need to fix one specific block.

04. Page Flows: when the problem is the user flow

A page can be beautiful and still lose customers. It happens when the flow is wrong: too many steps to sign up, a checkout asking for useless data, a registration that stops halfway.

Page Flows collects the user flows of widely used apps and services, with recordings and step-by-step screens: sign-up, onboarding, login, checkout, subscription pages. You see not only what the screens look like, but in which order they come and how many steps it takes.

It is a paid service with a free trial: the individual plan starts at around 8 dollars a month, billed yearly.

When to use it: when you design an app, a booking or an online purchase, and want to count the steps before you draw them.

05. Cosmos: when your references are everywhere

Screenshots on your phone, links in your bookmarks, images saved on Pinterest, photos taken on the street. References pile up in ten different places and, when you need them, you cannot find them.

Cosmos keeps them in one place. You save images and pages with a browser extension, organize them into collections and find them again by keyword, color code or visual similarity. You can import what you already have on Pinterest.

It has no ads and no likes, works on the web, iOS and Android, and the free plan covers saving, searching and shared collections. The Premium plan costs 8 dollars a month.

When to use it: always, as a personal archive to start every new project from.

From reference to project

The five websites cover different moments of the same work:

Cosmos
  collect your references
  ↓
Curated
  choose the visual direction
  ↓
Unsection
  study the sections
  ↓
Page Flows
  count the steps
  ↓
Hoverstates
  add one standout detail
  ↓
Project

Study, do not copy

A reference is only useful if you understand why it works. In front of a website you like, ask yourself:

• how the hierarchy is built: what do I see first, and what second;
• how much space there is between elements, and how consistent it is;
• how many typefaces and text sizes it uses;
• how many colors, and where it uses the strongest one.

If a color catches your eye, you can get its exact code with the Hash42 Tools Color Picker and check its contrast right away: a beautiful color that cannot be read is no use.

Checklist before you design

Before opening the design file, check at least these five points:

• Your references are collected in one place, not ten.
• You have shared two or three visual directions with the client, not just one.
• For every important section you have looked at several examples of the same kind.
• You have counted the steps of the main flows: contact, booking, purchase.
• For every reference you can say what you like about it and why.

Good design starts with good references

Nobody designs from scratch. Even the most original websites come from something the designer saw, took apart and understood.

The difference is method: collecting with order, looking with attention, taking one idea and making it your own. The right references do not replace the project. They make it faster and more confident.

Sources

• Curated
• Hoverstates
• Unsection
• UI UX Showcase, Unsection
• Toolradar, Page Flows pricing
• Cosmos, llms.txt
• Creative Bloq, What is Cosmos, the Pinterest alternative for creatives?