Design review guide
How to compare website designs
A useful reference helps you make a decision. Compare how a design serves its content and audience, then test the relevant principle with your own brand, words, and requirements.
An editorial method from imaginewebcraft. This guide does not claim measured conversion results for the websites in the gallery.
1. Start with the visitor's task
Write down the action your page must support: understand a product, compare plans, read an article, or contact a team. Compare examples that serve that task. A visual portfolio and a complex software pricing page solve different problems, even if both use large type and generous whitespace.
Can a new visitor identify the offer and a useful next step without guessing?
2. Read the hierarchy before the decoration
Look at the first screen, then follow the page in order. Notice where the headline, supporting explanation, evidence, and primary action appear. A dramatic hero can create interest while delaying essential information. A dense layout can help an expert scan, but overwhelm a newcomer. Choose based on your content and audience.
What gets attention first, and is that the information the visitor needs first?
3. Compare typography with realistic content
A short display headline can make almost any typeface look controlled. Test a long heading, a paragraph, navigation labels, and small supporting text. Compare line length, line height, weight, and the difference between heading levels. Check narrow screens and browser zoom rather than relying on one desktop screenshot.
Does the hierarchy remain readable when the words and available width change?
4. Assign a purpose to color
Compare where color appears and how much space it occupies. The same yellow can be a small action accent, a full-page background, or an illustration detail. Those choices create different hierarchies. Test actual text/background pairs, including hover and focus states. A visually harmonious palette is not automatically accessible.
Does color clarify an action or relationship, and can the interface still be understood without color alone?
5. Separate a screenshot from interaction evidence
Screenshots reveal composition, but they cannot establish whether navigation works, a form is usable, or a menu supports a keyboard. Visit the source when assessing interaction. Try its primary task, keyboard focus, narrow layout, and reduced-motion setting. Captured pages may have changed since the gallery reviewed them.
Which observations can you demonstrate, and which still need testing?
6. Give motion a reason
Motion can explain where a panel came from, connect related states, or confirm an action. Large scroll effects and continuous movement also consume attention. Evaluate whether the effect helps the task, whether the interface remains useful without it, and how it behaves with reduced motion. A recorded preview is only a sample of the live experience.
What becomes clearer because this element moves?
Turn the comparison into a decision
Record four things: the visitor's task, an observation you can verify, the tradeoff it creates, and a test for your own page. For example, a compact navigation may leave more room for the offer, while making secondary destinations harder to find. Test whether your visitors can find those destinations before adopting the approach.
Keep source attribution in your notes. Develop your own composition, wording, assets, and interaction details. A reference is evidence for a design decision, not permission to reproduce another site's identity.