General Layout
General layout is (almost) content-agnostic. It includes things like padding, margins, font sizes, button placement, text alignment, and responsiveness.
It is important to understand that layout on the web is basically just a bunch of boxes grouped together and fit together in unique ways. If you understand this, you can start looking at layout from a web designer’s perspective pretty quickly.
Some questions you should ask about layout:
- Does this grouping look bad?
- Does this box look squished or too close to another box?
- Is the layout consistent from page to page?
- If there are changes are these changes intentional?
Here is an example showing how boxes can be grouped in a page. We clearly colored the boxes to make the groupings obvious here, but typically the groups aren’t clearly drawn:
You also have to look at how layout changes on different screen sizes. If layout looks good in one place, it might look bad in another and you have to ask yourself – what about my box groupings make the layout seem weird? For example, here is a weird layout:
Here I fixed the layout a bit, but I made another layout change that makes this page seem weird:
There are actually only two major things wrong with the button above. Yes, I agree it is an ugly button, but ignore that for a second. A few reasons it could be weird if these are not intentional decisions by the designer:
- The button is inconsistent from all other buttons – border radius changes, there is a new shadow, there is a new border
- The text within the button wraps
- The button is much larger than the ‘I’m a button’ button
2. User Experience and User Interface Design
User experience and user interface design commonly known as UX/UI evaluates how well an interface can actually be used by a user. It addresses all sorts of things from – how do we get them to scroll further down? How do I make it abundantly clear where the user is at? Does the user get the information they need quickly?
There really are all sorts of different things that go into your user’s experience and every website has unique goals, but some questions to help identify UX/UI opportunities include:
- Do I clearly understand where I am at on the website?
- Is the intention of this page intuitive?
- When I click a button does it bring me to the place I expected?
- Does this page have all the content that I’m looking for or do I have to dig deeper?
- Are choices and offerings made abundantly clear?
If you are lucky enough to have existing analytics data on a page you can start asking. How well do pages convert? How long are users staying on the page? Are there certain things I can do to drive more user engagement? What can I do in design to get the behavior I want from my user?
3. Copy as A User Experience and Design Element
User experience design is all about designing the user experience and helping them intuitively understand where they are at in a page. Writing for UX is essential for that! We can ask things like:
- Are Things Consistently Named?
- Do Calls To Action Actually Make Sense?
- If I changed something in copy would it help users to better understand what is happening on the site?
- Does the copy hurt the design?
- Will changing copy further improve engagement with a certain button?
For example, check this very contrived example:
Notice how copy helps you recognize exactly what is happening? It seems to fit into the design, it is consistent, it helps the user very clearly understand that there is a product 1 and a product 2.
But look at this example, unless you pay close attention and keep track of which comb is which you really wouldn’t know what comb you’re actually looking at.
One more example with a Call to Action: The copy might be very similar, but the placement of the copy can change and where this copy goes influences design.
4. Copy as a Marketing Element
Copy as a user experience element and a marketing element are closely linked, but copywriting is more geared towards selling a particular thing.
- Check the basics: spelling, grammar, punctuation
- Could you build a sheet from the product that looks like this:
- Product Name:
- Problem/Solution or Value Proposition:
- Benefit/Feature List:
- How the Product Works:
- Product Pricing:
- Call to Action
- FAQs
- Is there consistency in the tone?
- Does the copy emotionally engage you?
5. SEO:
Your next step is to do some basic SEO analysis or to look deeper at Meta descriptions for sure. Meta descriptions are essentially going to be what appears in your Google search results or on shares to social media networks. You want to make sure that people see what you want them to see.
In our case, most of our meta-information is controlled with plugins like RankMath. You can dive into the plugin and check some basic configurations to ensure meta info is set up correctly:
- Meta descriptions custom: did you customize any? Are these customizations good for every page?
- Meta descriptions template: when you don’t customize do you have meta descriptions appearing for every page and are those meta descriptions actually complete?
Next, you can start to check internal and external linking. Linking provides more context for the article, post, or page and can help boost credibility and Google’s ability to crawl your site.
- – FAQs are an especially good place to link to specific articles, services employment pages, and more.
- Do your links point to things that are actually relevant to your customer and are they expected?
- Make sure you don’t overdo it, and only link to things that actually make sense for the user. Sure, internal linking is good for Google, but ultimately we don’t want to send our users to random locations inside of our site.
Did the copywriter make decisions that clearly articulate your product while adding keywords that are relevant to your content?
- If you’re selling combs and your comb helps with thin as in light and wispy hair, was it clearly expressed somewhere that this is for thin hair and not thinning hair or might google confuse this as a comb for thinning hair?
Other basic things you can do:
- Run an SEO audit with a free tool online
- Download and run an analysis with Screaming Frog
- Ensure all relevant analytics accounts are connected
6. Visual Design:
We save this for last because it does matter, but it is a much more general concept that is the union of many different aspects of design. Ultimately design can work great sometimes and horribly in others. Here are some things to check with design:
- Does it look somewhat similar to other websites your users typically use?
- Are the photos clearly stock images or do they express the brand and the purpose of the page?
- Are the brand colors consistent across the entire site?
- Are fonts consistent across the entire site?
- Is there white space in the design or are things very closely grouped together?
- Does my eye just flow through the design, meaning do I know where to look at any particular point?
- Do calls to action jump out at me or are they hidden?
- Is the text a good size? Can I read it or can someone with poor vision read it?
- How do I generally feel when I look at the design, does it feel good?
- Can I clearly articulate the web page’s goal?
7. General Aspects:
- Links
- Do all links work properly?
- Technical Aspects
- Does the Site have a good load speed? google page speed insights
- How is Google Crawling it?
- Compliance and Legal:
- Cookie policy?
- Cookie acceptance?
- Terms and conditions?
- Accessibility
- Color contrast?
- Navigable by a screen reader?