Blogging DIY Website Web Design

6 Ways to Make Your DIY Website Look That Much More Professional

I am not saying that any of the tips below are better than (or just as good as) making the investment to hire a professional. 

But sometimes, you just have to do it yourself until you get to the point where you can hire a pro. If that’s where you are right now, the tips below are for you! Let’s dive right in.

Use Fonts Wisely

I have many thoughts and recommendations for choosing and using fonts. Here they are in a nutshell:

Choose only two fonts: One website font should be used for headings and subheadings, one should be used for body text. The fonts should match what is already in your logo if possible.

Avoid script/cursive for headings: They are way too easy to mis-use and often comes across looking childish and unprofessional. Not to mention readability. Script or cursive fonts never scale well, so on smaller screens, they tend to be hard to read.

Find a font combo balance: Try to use fonts that look good together, but don’t look too similar. Test this out by creating a Word document where you can type some text in the fonts side by side. Here is a great tool for finding common/attractive combinations of free Google fonts. The safest route in my opinion is to use a Serif font for headings (serif fonts have little tabs on the edges of the letters – think Times New Roman) and a Sans-Serif font for body (think Arial). This is because sans-serif fonts tend to be easier to read at smaller sizes (think mobile view).

Be smart about color: Body text should always be black or dark gray, but your headers/sub-headers and linked text (what someone can click on to go to another page) should be your branded colors. Be careful with links – they should be a different color from your paragraph text and from your headers, but they should be as high-contrast as possible with your background.

Align text with a purpose: Feel free to center-align your headings and subheadings (up to 2 lines), but never center-align body text. If the text wraps to more than 3 lines, it’s a paragraph and it should be left-aligned. When we read, our eyes go from side to side; at the end of a line, they want to zip back to the start.  If your paragraph text is centered, the eye cannot go back to where it began, but has to find where the next line starts. You may not notice, but over time, this puts extra strain on the eye and just doesn’t feel as natural.

Don’t overlap: Do not place text over an image unless the text is at least 20px and is extremely high contrast from the image. (Black and white are high contrast, pink and red or blue and purple are not.)

Struggling with fonts for your website? Stick with two, avoid script, use with high contrast colors, and never center-align body text. Click To Tweet

Notice how this headline is serif and the body is sans-serif. They look very different. You can use the heading image to create subheadings, just by styling them a little differently. This example uses italics, but you can use all caps or a different color and size in order to differentiate.

Use a Color Palette Builder

A good starter palette should have a color for your accents (things like your navigation menu or other sections), a color for headings/subheadings, and a color for buttons and links. Your buttons and links should be the same color and no other elements should be that color. (More on that later.)

Your colors should be in line with the emotional tone of the site. Avoid neon or super-bright colors, but don’t be afraid of colors that are nice and rich. Look at other sites in your industry to see what colors are being used. Paletton and Adobe Color Wheel are some great examples of color palette builders.

If you’re unsure of what colors to use, draw inspiration from other sites – so long as they are in your same industry or have a similar goal. Here is a great post that breaks down color psychology and what emotions are evoked by different colors.

Be consistent with elements

Consistency is a key element of professionalism – think about the site of any large company that you may visit regularly. Their fonts, imagery, shapes, and other elements will tend to be the same no matter where you look. This is one of the easiest yet most overlooked concepts when it comes to DIY branding. Just pick a look and stick with it!

Choose one look for all your buttons and stick with it. Same with things like page titles, forms, or any other piece of content that will appear on more than one page of your site. If you center your page titles on one page, all page titles should be centered. Many designers will create a short document which shows examples of their headings, buttons, forms, etc. so they can have a reference.

If you’re looking to learn more about how to use consistency, check out this podcast episode featuring Michelle Schulp. She has some great things to say on the topic.

Create symmetry and balance

Make sure that every single element is spaced properly. All elements should either be left aligned or centered. Some designers include right-aligned images or elements that are stacked on top of one another asymmetrically, but it’s tough to get right so it’s safer to stick with left-align and center if you’re doing it for the first time. If you used a certain amount of padding for one section, again, be consistent with that choice. If you’re using a website builder, make sure that your sections are the same width every time, even if you’re using a different number of columns.

While I have a few problems with some of the choices in this design, it achieves balance wonderfully. The title and navigation are centered. All the content below is the same width, but elements are different sizes, which creates cohesion without making everything identical and boring. If there was less padding between the large image and centered text, there would be equal spacing between all the main elements which would make it perfectly balanced.

Use High-Quality Images

Photos will always make a connection before text does and so it’s important to have imagery on your site that is powerful, purposeful, and visually appealing. Swapping in photos of real people for icons or other imagery can increase your conversion rate by up to 95%!

Photos with watermarks or photos that are blurry will not help you accomplish this. If you have photos that you want to use but find they are too small or too blurry when uploaded, see if your builder allows you to create a gallery.

Stock photos are a great way to use high-quality images on your site. You can use free libraries like Unsplash and Pexels to find ones that fit what you need. If you can’t find what you need on a free site, it is worth it to invest in a professional photographer or a paid stock photo subscription site. Most subscription sites charge monthly, so if you save this step for last, you won’t be roped into a lengthy, expensive agreement. Do not resort to pulling photos from Google images – you may very well find yourself in trouble for breaching an usage agreement.

Pro tip: If you have photos that you want to use on your site, but find they are too small or blurry when uploaded, see if your builder allows you to create a gallery. Click To Tweet

Don’t be afraid of negative space

One of the biggest identifiers of a DIY website is when things are spaced too closely or squished together. I hear a lot of people say that they don’t want to make the user scroll too much. If the user needs what you’re offering and feels compelled by your content, an extra scroll or two will not make or break the experience.

Take a moment to visit some of your favorite sites. Notice that between elements, it’s common for there to be a good amount of blank or negative space. Mirror the contextual separation of the content with visual separation. It is tough to know how much space is too much, but a good rule of thumb is to start with 80px of padding between sections and 40px of padding on the left and right of sections. Adjust in increments of 20px until you like what you see.

Look at all the empty space around the text on the right. The two big blank areas above and below the text actually force our attention inwards onto the text itself. It feels balanced but is very uncluttered. Our eyes know exactly where to go and what to look at.
I have no idea where to look first! There is content literally everywhere and my eyes sort of smush it all together into one big mass. Showing more information faster is useless if your users cannot absorb it.

By Allie

Allie is a tech support team member at GiveWP, the leading WordPress donation plugin and travels to WordCamps as a GoDaddy Pro speaker ambassador. She owns Pixel Glow Maintenance, where she provides WordPress maintenance services to growing businesses.

Leave a Reply

Your email address will not be published.