I may use some affiliate links here and there from time to time. That means that I get a percentage of any sale for referring you at no extra cost to you. I do this instead of advertising to keep my page speed decent. And all my affiliate choices are hand-picked and are services / products I use.
Websites, like people, enjoy a good makeover. You’re like huh? Websites are in binary code. There’s no emotion. Whatever you naysayers. I swear I can see in my own websites and other people’s sites after a good makeover, the website looks more confident, stronger, and ready to walk into court and take everything from its ex. I’m actually more apt to buy after someone tweaks their site just because I get caught up in their high. Well, that, and it’s a sign that if their site is being updated, their products are as well. Nobody wants an outdated product.
Now I love to website window shop. It’s just like real window shopping but without burning any actual calories. I see a lot of websites this way. And it’s like if I think back to all the store window displays I’ve seen in my day, and I try to think about which ones I liked and which ones I was like, eh, I can find some common things that seem to happen. Except this isn’t window displays, well not real window displays though I am looking at websites from Microsoft Windows.
So basically, I narrowed it down to 5 big things that make big improvements without that much effort and easy enough for people without Photoshop to do.
And these are small quick things to help improve the visual aesthetics, or make your website prettier. There are things you can also do to improve function that are a little more time consuming like make it mobile / responsive, improve load speed, have clear calls to action, reduce the amount of options, improve SEO…
Adjust your Font Size and Contrast
Reading on the screen is much more difficult than reading off screen like on paper. There’s a reason many people prefer to read a paper book than one on their computer or tablet, and most of that is because of their monitor settings. It’s just not something you think about too much. You read a long blog post and suddenly you feel nauseous and depressed, and it never dawns on you that it’s because that slight discomfort went on too long.
Ideally, you kind of want to aim for…
- Size 18 Font
- Dark Text on a Light Background
- Low Contrast (light gray on white, or dark gray on light gray)
You want a bigger font because it’s easier to read. On paper, 12 pts is comfortable. On screen, 18 px.
You also want the bulk of your writing to be a dark font on a light background. Did you ever do one of those things that’s “stare at the white dot for 30 seconds, then look at the wall, and you see Jesus?” Well, that’s a controlled setting of this phenomenon that occurs with our eyes when we stare at a white thing on a black background for 30 to 45 seconds. When your blog is primarily a white font on a black background for things that take longer than 30 seconds to read through, you are creating that same phenomenon but uncontrolled meaning they might see any old thing when they look away. Either way, it’s definitely an eye strain. White text on a dark background works best for titles, quotes, and anything that takes less than 30 seconds to read.
Black text on white is a pretty solid evergreen, but on screen, it’s much more comfortable to reduce the contrast if at all possible. I’ve seen some sites successfully do a light gray on white, and some do a dark gray on a light gray.
Adjust the Font Pairing
I’ve found the longer I do the internet with design in mind (whether I’m designing things or just appreciating other people’s designs), I find my font pairing preferences mature over time. And now, I think back to fonts I would have paired together 10 years ago, and I cringe.
A lot of it is just that Typography has trends just like fashion. Some things are staples like a good serif or sans serif, but when it comes to more decorative things, we have bandwagons and trends.
With that in mind, you can always spruce up your font pairings (and probably spend hours trying to decide from Google’s wide assortment of fonts). I wouldn’t change any fonts within your brand, and if you’re using branded fonts on your site, you probably could leave it alone. But many of us use different fonts within the site for embed reasons than we use in our logo.
First the Headings. Here you can kind of do whatever you want (except Comic Sans, you probably should NEVER do that <laugh, snort, graphic design joke>). You can go with something simple and easy to read, or you can jump on a trendy bandwagon and do a signature font, or a handwritten script, or a bold pop like Anton, or fall in love with Elizabeth Arden’s Logo and find a font similar to it. But you just want ONE crazy font, and it should be the one with the least amount of actual reading involved.
Second, the body. Functionality trumps Pretty sometimes, and this is one of those times where it’s also usually. The smaller font should be easy to read. Also it should compliment the heading font. My favorite fonts for consideration here are Sans Serifs: Roboto, Montserrat, Open Sans, and Serifs: Merriweather, Baskervville, Lora, and lesser known, Vidaloka.
Google fonts are usually what I recommend most for websites simply because installing them is pretty easy if your theme doesn’t already have them installed (most now a days are making Google fonts accessible), and they are easy to read.
And Google also makes it easier to pair them. As you look through Google, you can choose at the top how all the results are going to look, such as sentence, paragraph or special text and font size. Then once you click on a font, it pairs the font with 5 potential body fonts and displays previews for you to decide which one is more your look. Of course, it also gives codes to copy and paste to embed the font(s).
Of course, you can check out Creative Fabrica and Creative Market for fonts — both of those are affiliate links. I am not an affiliate, but I love Set Sail Studios. His fonts are always perfection and trend-friendly. But these fonts are more used in graphics and most wouldn’t be ideal to embed in a website.
Powered by Creative Market
Filter Featured Images
Most bloggers and websites utilize the power and magic behind stock photos, but it can look kind of clunky quick if you are basing your stock photo searches on topics of that blog post as opposed to a color scheme. Some of the prettiest websites have random photos that match a color scheme and style and has nothing to do with the actual blog post itself. But it’s pretty because it matches.
But you can find a happy medium without taking custom photos every time by using a filter.
It’s kind of the idea of Instagram. If you take a photo of your dog every day for a month, as long as you put them all in the same filter, your instagram is going to be consistent looking, no matter where the dog is, the lighting, or the primary colors being used.
Now you could wash all your photos through Instagram, but there are many apps that provide filters. Some of my favorites…
- Flickr (free)
- LightRoom + Presets like Here and Here (both are affiliate links)
- Nik Collection by DxO for Photoshop and Lightroom
- Beauty Plus for Google or Apple (freemium)
If you can’t find a filter you like, but you have Photoshop, you can almost create a photo template with adjustment layers. Basically, you play with Levels, Curves, Brightness, Contrast, Saturation, Color, but also you can play with the blend modes, and even better, create a paintbrush layer where you blob a color in the center or a vignette (or multiple colors) and play with opacity and blends.
Make Sure you have Visual Hierarchy
The idea is ideally, a person goes to your website, and within 8 seconds, they have a good idea of who you are and what you can do for them. Nobody wants to spend longer than 8 to 10 seconds with anyone working hard to figure out exactly what you’re trying to sell them.
Of course, once they figure you out and decide they are about your life, they’ll stick around and read fine print and small details.
Just like real life conversations. Sometimes you get as far as Hi before the person decides they don’t like you enough to hang out with you, and sometimes you go from hi and before you know it, you are into a deep conversation about the meaning of life found in the gum on the bottom of a stranger’s shoe.
Visual Hierarchy is how we make it easy to peruse without effort.
There are many ways to visually heirarch…
- Big Text and Little Text
- Heavy Text and Light Text
- Dark Text and Light Text
- Dominant Color Text and Lesser Used Color Text
- Script Font and Print Font
- Serif and Sans Serif
- Extra Wide Letter Spacing and Narrow Letter Spacing
Then the other important component is clustering the text, or grouping the text, sometimes known as Proximity.
- Paragraphs
- Content Blocks
- Headings / Subheadings
- Bullet Lists
And all this requires
effective use of white space.
Anywhere you have text on your site, it should be visually organized.
The pages, like your home page, landing page… The easiest template for that is a Heading, an optional Subheading, and 1-3 paragraphs for every concept or thing you throw at people. Use bullets on lists.
For posts, like blog posts, articles, and longer sales copy pages, the easiest template for that is 50-100 word intro, 3 to 5 headings with 50-75 words under each one, and a 50 word conclusion. But the point is to use headings. Break up text when possible. Also use short paragraphs.
On Pinterest Pins, keep the title together, highlight one summary word with a different font or a splash of color, and the rest an easy to read font.
Now this is very focused on text and words. Visual Hierarchy goes further to consider all the visual elements including graphics, and it’s where you make decisions to blur a photo, or elements in a photo, and adjust the size of photos, etc.
Purchase a Branding Kit
If you already have a brand and all your ducks in a row with that, this probably isn’t for you, but if you haven’t really figured out your brand, whether as an individual human being or a business entity, one super-easy way to get a cohesive branded look for website prettiness is to purchase a brand kit and incorporate that into your site design.
Most branding kits offer some variations of a logo, a color scheme, and visual elements like social media icons, buttons for your sidebar, blog header options, etc. Some include social media templates as well.
It rather kind of feels like people are veering away from these, as well as veering away from super ultra feminine sites, but I still see the value in branding kits and templates because there are many reasons to have a website that doesn’t entail needing a few thousand to invest into its design. The prices of most templates are about as much as a woman would spend on a good purse. Well actually, it’s like if you can’t afford Coach, but you want something nicer looking than dollar store and walmart, you hit up a Kohls or Belk. Web kits are the Kohls of Web Design.
Tasha at Lady Boss Studio is one of my favorites who does these kind of products because all of her things can be edited in Canva.
I also recommend this Web Design Kit for Bloggers (it’s an affiliate link), and they have more like it on Creative Market.
If you’re not ready to commit any monetary investments into a branding kit, you can peruse what’s out there to get ideas for the type of things designers do to create a coherent look for a site. Then you can kind of do that with your own in your own way. And if you’re perusing for ideas, Pinterest is a great place to find ideas and save them for later.
These are just some minor tweaks that makes a major difference overall. You can always rebrand, or find a designer to redo your website at any given time, but in between those big investment moments, these things are good places to look for opportunities to freshen your web-face.
What’s your to-do list after this? I mean if I was awesome enough to inspire adding to your to-do list, now’s probably a good time to write it down because if you’re anything like me, you’ll forget you wanted to do this stuff.