By John Eberhard
(Because Good Web Design Shouldn’t Feel Like Alphabet Soup)
Welcome to your crash course in web design, brought to you by the first 13 letters of the alphabet! Whether you’re a pixel-pushing pro or someone who just Googled “how to make a website,” this guide will walk you through the A-to-M of making your site less tragic and more traffic.
A – Above the Fold
The term “above the fold” comes from newspapers and refers to everything that appeared on the font page above the fold. It’s the most important stuff. On a website, this is what appears on the home page before you start scrolling down. It’s the most important real estate on the site. Plan this part of the content so it makes an impact and keeps your visitor there.
B – Branding
Your website should not look like it has an identity crisis. Use consistent colors (an actual color scheme, not 65 colors), fonts, and tone. Often your color scheme will be based on the colors in your logo. If your homepage says “corporate accountant” and your blog says “Death metal, dude!”—we need to talk.
C – Content
Design is the wrapper, content is the candy. If your site looks great but says nothing, users will leave faster than a cat at bath time. Write clearly, provide value, and yes—spellcheck is your friend.
D – Design Hierarchy
Not everything on your site can be the star of the show. Headlines should yell louder than body text, and buttons should shout, “CLICK ME!” but not in Comic Sans font. That brings us to…
E – Engagement
Is your site engaging or about as exciting as watching grass grow? Use images, videos, animations, clever copy, or even a strategically placed cat GIF to keep users interested (just kidding, unless your site is about cats).
F – Fonts
Please don’t use seven different fonts to make a point. Pick two (three if you’re feeling wild), and keep it readable. You usually use one font for all your headlines and another for your body copy. Think of fonts like outfits: you want stylish, not chaotic fashion crime. And bear in mind that some fonts might look really hip, but you can’t read them easily. Readability is king.
G – Grid Systems
Want your layout to look clean, aligned, and not like it was built in MS Paint? Use a grid. Grids bring order. Grids are your friend. Embrace the grid, and it shall embrace you.
H – Hosting
Your fancy site is only as good as the server it lives on. Don’t cheap out here. A bad host means slow loading, downtime, and maybe your website just vanishes for fun on Tuesdays. And some of the most well known hosting companies have terribly slow load time. And a slow loading site, caused by a slow hosting company, will get penalized by Google.
I – Images
Images are great—until they tank your loading speed or scream “stock photo sadness.” Use original visuals when possible, resize them to be only as big as you need, compress your files, and avoid anything that looks like it belongs in a 2008 PowerPoint.
J – JavaScript
JavaScript adds spice: sliders, dropdowns, popups that don’t make people scream. But like hot sauce, a little goes a long way. Too much, and your site becomes a confusing mess of broken buttons and regret.
K – Keywords
Not just for bloggers or search engine nerds—keywords help your site get found. Use them thoughtfully. “Best artisanal dog sweater site in Boise” might just be someone’s dream search term.
L – Loading Speed
If your site takes longer to load than it does to microwave a burrito, you’ve got a problem. Compress images and resize them so they are only as big as you need, lose or shorten the 60 second background video, ditch unnecessary scripts, and don’t autoplay five videos at once. Ever.
M – Mobile Responsiveness
If your site only looks good on a 27” monitor but turns into a digital Jenga tower on a phone, it’s time to rethink things. Mobile-first isn’t a trend. It’s a lifestyle.
And there you have it—Web Design A to M. It’s not just about pretty pixels, but about thoughtful choices, a little restraint, and a dash of humor. Stay tuned for N through Z, because the alphabet isn’t done designing yet.
If you need a high impact website designed, contact Real Web Marketing at 661-441-2429 or fill out a form here.
