Website Design Audit: Comparing Against a Reference

You've got a website that works, not bad, but it's kind of dim next to the good sites in your sector. When you ask where it hangs, no one can answer clearly, including you. In this article, I'm telling you a method that translates that difference into concrete materials: to compare your site with a reference that you choose to a measurable differential report.

Why can't you see the problem with your own site?

It's not the sight, it's the saying, "Don't talk." You understand that a design is good, but you can't say why. You have sentences like "It's more spacious" and "It's more professional."

This becomes a direct obstacle when working with artificial intelligence: "The model cannot fix what you cannot describe. " You receive random changes in exchange for "Do Better," because there is no target.

That's exactly what the comparative control solves. It converts your intuition into numbers.

Five axes that determine where the difference is.

In my experience, the "unexplainable" difference between the two sites almost always appears in one of the five:

• Tipography typeface selection, letter range, line height, head-to-head ratio.
• ** Visual language** photo or illustration, manufactured or stocked, consistent or disorganized.
• ** Where does the eye go first, where does the second go first? It's not a coincidence on good sites.
• ** Renk** , pallet width, contrast, accent color, how often it's used.
• ** Spacing** between elements, sectional intervals, margins.

The job of control is to put two sites side by side on these five axes.

How do you do a cross-check?

Four steps:

1. Choose the correct reference. Find a truly well-designed site from your own sector or from a similar user population. The prized website galleries and design system archives are ideal for this. Some archives analyze the site and provide color palette, typography scale and design variables together.

2. Give me both sides. Give me the address and address of your own website. Just don't say "heal the site" and ask for a comparison.

3. Ask him to be ruthless. Models are supposed to be kind. If you don't simply say, "Be cruel, don't be polite," you're getting mixed up with general praise.

What you want is not the list of "you can fix this"; what's your letter range, what's your reference? Your corner radius is how many pixels, how many pixels, how many pixels. It makes it easier to want the report as a short and read HTML page.

How do you write an audit request?

The structure of the request directly determines the quality of the result. The skeleton I use consists of five pieces:

1. "Look like a design director and be ruthless." Without that sentence, you get a nice, useless printout.
2. ** The address of your own address and reference is clearly specified which is which.
3. Xen list: typography, visual language, hierarchy, color, space. If you release it, the model gets caught in random things.
4. Drop format: "For every find: my axis, my value, the value of reference, the effect." You get comments if you don't want measured value.
5. ** The capacitor limit:** "The maximum eight findings are in order according to impact." If you don't limit them, a list of 40 items comes up with no priors.

The fourth article is the most critical. The question, "How can I improve the website," gives you general advice: "Set the letter range values of the two sites and write them next to each other," which brings you a valid number.

Consistent values to compare

Here are the values you want the control to measure. You can put this list directly into your request:

Axis	Value to measure
Typeography	Punto ratio in title/göv, row height, letter range, number of fonts used
Space	Intersection space, base scale value, edge space
Color	Palette width, text-back plan contrast ratio, use frequency of accent color
Depth	Different shadow value number, corner radius number
Hierarchy	The number of competing elements in the upper section, the number of main actions called

When you fill out this painting, you don't have anything to discuss, you have a list to fix.

The things that control typically finds

When I run this method on my own projects and on my students' websites, the findings have been repeated over and over again:

• ** The range of letters is too wide.** Especially in large headlines. A small change of value significantly increases the quality perceived.
• There are no ladders.** Shadows and layers are random; they come from a defined scale on good sites.
• He's competing with the main visual product. He's getting big visual attention in the upper section, but he's suppressing the real message.
• "Short height is narrow. " The hull text is cramped, reading is tiring.
• The accent is too common. The accent is everywhere. There's no emphasis anywhere.
• The gap scale is inconsistencies between 40, 56, 72.

None of this requires "remake the design," all of which have amazingly high levels of corrections and total impacts.

How do you prioritize findings?

The report is usually long, and it's wrong to try to apply it all at once.

1. Tipography. Here's the highest rate of impact/budget. When the font, scale and line height improves, the site already looks different.
2. The gap scale. The transition to a consistent scale alone is picking up most of the mess.
3. Simplify until one main message is left on one screen.
4. "Color and shadow. " These are the last. These waxes don't work when the bottom layer is broken.

And remember: you don't have to apply every item in the report. Some differences are conscious brand decisions. His decision is not always right for you because the reference is better.

One variable at a time

It's a common mistake to use the findings collectively, and even if you change eight things at once, you don't know which one works, and which one you'll get back if it gets worse.

My way: change an axis, take a screenshot, side by side with the previous one, decide. It looks slow, but it looks slower in total, because the retake tours are going away.

And let me add: "After the change, look at the site a few hours later. " Right after an arrangement, everything looks good; the real assessment is done after the eye is adjusted.

They will be careful when choosing references

• ** Don't lock on to one reference. ** Compare it to two or three sources, or the audit will drag you towards the copy of that site.
• "Let the scale be similar. " It may be misleading to compare the site of a newly established business with the site of a huge product; the problems they solve are different.
• ** Take the principle, not its existence.** Taking the rhythm of space and contrast approach is legitimate; taking the palette, typography and visual identity together is copying.

What the controls can't catch

This method is good at measuring visual difference, but it doesn't evaluate your entire site. Four areas are out of range, and you also have to look at these:

• "Performance.** The reference site may be using heavier visuals. You don't want to copy the upload time when copying the design.
• ** Contrast ratio checks out, but no keyboard navigation, focal indicators, and screen reader compatibility.
• Mobil. Comparison is usually done in a desktop view. If most of your traffic is mobile, repeat control on a narrow screen.
• The content strategy is not a question of design which parts should be on the page. The audit tells you what the existing parts look like, not which ones are missing.

In short, the audit answers the question, "How does it look?" It doesn't answer the question, "Is it the right thing?" The second one is still your job.

Questions that are often asked

How often do I have to do this inspection?

A big update before and after is enough -- constant control means constant change; consistency is what you're trying to build.

Should I just check the front page?

Start with the front page, but add the pricing and product pages, and the discrepancies usually occur on the inside pages, not the front page.

Can I apply the values in the report directly?

You can apply it, but not bluntly. The height of the reference can be different in your font. Take the value, verify it with the eye in your own typography.

Who's going to apply the readings from the inspection?

The application is often simple because the values are concrete: changing the font scale, row height and space values is a few lines in the style file. The only place that is complex is the hierarchy findings. You may need to change the section order there, which requires design decision.

Will the designer take over?

No, that's a very good way to make a difference, but not in making a brand decision, and you decide what you want to look like, and the audit just measures how far away you are.

In a nutshell

The feeling that "something is missing but I don't know what" is the thing that slows progress in design. Comparative control converts this feeling into measurable materials, and every problem that turns into matter becomes manageable. Start with typography, continue with space; look at color last.