Web Design Rules, Basics to Boost Your Brand: An Infographic Guide

Web Design Rules: All of the basics you need to increase traffic and boost your brand awareness online with an infographic guide

An Overview of Basic Web Design Rules

1. The Rule of Thirds
2. Hick’s Law
3. Page Speed
4. Negative Space
5. Color
6. Focus on the Faces
7. “F” Website Layout

The Rule of Thirds

The Rule of Thirds is a design technique focusing on 4 specific “sweet spots” visible using a grid overlay divided into thirds, or 9 equal parts. Where each line intersects is the “sweet spot.”

Our eyes naturally gravitate toward those four spots. When thinking about your UX design and website, consider focusing on those areas, whether it be with text format, images, or even specifically placing a call-to-action (CTA) within the box or near one of the lines.

Golden Ratio

The Rule of Thirds is often associated with the golden ratio, a mathematical ratio that is pleasing to the eye and often found in nature. Using both the rule of thirds and the golden ratio in tandem can help you make your website pop- driving visitors to important content and CTAs.

Hick’s Law

Page Speed

• A slow website is frustrating.

• Users click off of a slow website, leading to a high bounce rate.

• Slow page speed = overall poor user experience.

In this brief introduction to page speed as a basic tip for web design, I’d like to touch on a few things.

1. No website will ever have a perfect page speed score
2. Page Speed is still one of Google’s 200+ ranking factors that we know of, but its not the end all be all of SEO, website optimization, and improved UX. It’s simply better to focus on a good quality website that your users enjoy and review real-time feedback. Minor to even moderate issues can cause little to no effect on rankings.
3. Don’t have enough website traffic data to see your real-time page speed for your users? Try one of these two options.
   1. Use the lab data from Page Speed Insights
   2. Use Google’s Lighthouse Plugin 
   3. Estimate the effect of your page speed changes by using the Lighthouse Scoring Calculator
   4. If applicable, utilize both real-time and simulated page speed insights to help drive your Page Speed Strategy

Negative Space

Where do your eyes take you when you first look at this “screenshot”? Likely, they’re drawn to the laptop. In our case, the photo on that “blog” backlinks to one of our blogs! [Not really.] Leaving the “white” or “negative” space around the call-to-action (CTA) or important content draws visitors to action. Now, visitors who notice our “laptop image backlink” will be redirected to our blog. And why? Not because the laptop is super interesting (although, maybe), but because of the negative space surrounding it. Our eyes search for contrast. 

From a strict design perspective, our eyes search for the nearest “object,” whether words, photos, buttons, etc., on a webpage. Take, for example, this “screenshot” once again. Those lines technically don’t make a rectangle. However, our eyes “complete” the picture, leaving us to see the text within a box.

Color

How can you play with color in website design? Here are some basics on color and its effects in advertising & marketing. Colors can be used together to create different effects and are a large aspect of emotional marketing, using color, tones, and hues to elicit a particular emotion to get a certain response (i.e., make a sale).

• Focus on the Faces
• ”F” Website Layout

Website Design Agency in Scranton, PA, Philadelphia, and New York

RiZen Metrics is a full-service digital marketing and website design agency in Scranton, PA, with hubs in Philadelphia (Fishtown) and New York City (SoHo). Contact us today to discuss your website goals- we look forward to collaborating with you soon.