The Best Tips and Tools for Building Your First WordPress Site
I have a confession to make today: I’m not a very good web designer. I’ve never had any formal training – I’m completely self-taught. My craft is writing, and I’ve picked up web design as a necessary element of being a freelance writer and not having the budget for a proper website. I decided from Day 1 that I’d rather have a decent DIY website that I liked (but with a few possible “mistakes”) than to pay for a low-budget website that I hated and couldn’t adjust over time. We all know how low-budget service providers can be, after all.
Thus began my entry into amateur DIY web design. Pretty quickly, the DIY website process sparked my interest in web design. I’m still not a “true designer,” but I know enough of the fundamentals to maximize my workflow, make my way around a theme I like, and implement the specific tweaks I want.
Here’s the deal: I’m not (and probably never will be) a professional web designer. And it can be difficult to find resources out there for DIY folks like me – people who are smart enough to figure most things out and willing to put in the time, but who have no real technical background.
These are some of the best tools and resources for the DIY web designer that I’ve picked up along the way. If you’re similarly inclined, this one’s for you!
Website Builders and Customizable Themes
I personally am not a huge fan of website builders – I love WordPress, and I like having a lot more control than most website builders offer. If you like the idea of drag-and-drop to get the exact site that you want without all the agony, take a look at the Divi theme for WordPress. You can also find a huge number of customizable themes for WordPress.
Every designer has their favorite theme – and this DIY (non)designer’s favorite is GeneratePress. It can do pretty much anything I envision, the add-ons are 100% worth it and so affordable, the video tutorials answer 98% of my questions, and the developer (Tom) is very active and responsive in the support forums. I’ve used this theme for 2 years and couldn’t be happier with it.
Taking Care of Appearances
These days, even I know that mobile-friendly, responsive design is an absolute must. I’ve visited websites on my phone that weren’t mobile or responsive, and it’s not pretty. These days, most themes have a responsive element – make sure yours does, too. And then, as you’re in the building process, use a tool like Duo, Screenify, or Browser Shots to make sure that your site design will look good on any device.
Have you ever used a style guide? It’s a reference sheet for all the visual elements of your design – the fonts, styles, headline formatting, and colors in your website. It’s extremely handy to have and reference as you build and tweak your website, and you can generate your own with Stylify Me.
This might seem unfathomable at this point in your DIY design career — or maybe not — but the day will come when you want to make some modifications in the CSS to tweak the appearance of some specific elements. When the time comes, you can wallow in tutorials, look for support from your theme, or turn to a CSS generator to come up with the code you want. You can also check out Webflow, a drag-and-drop editor that lets you build what you want to see on the page and then generates the CSS code for you. It’s a paid service, though, which tends to run counter to DIY.
This is a small potato, but make sure your site has a favicon. You can use this favicon generator, or get a simple favicon plugin for your WordPress site to make the process super simple. (I much prefer the plugin route, in my unprofessional opinion.)
Everybody’s Favorite: Fonts
Fonts are the golden child of web design; it seems like everybody loves typefaces. But if you don’t know what you’re doing, fonts can be kind of intimidating. Buying a font, installing it, even modifying it…yeesh. If you just want your site to look good, you can install Google Fonts and make use of a pretty robust database of web-friendly typefaces. It’s also easy to find Google Font combinations that look good together with a simple web search.
Type-Finder is a site that asks you a short series of questions and then offers you font suggestions. Pick and choose the ones you like, and you’re well on your way. It makes choosing fonts easier, especially if you’re not well versed in fonts and font theory.
When you’re feeling brave and ready to get the exact font you want for your headers, pins, and more, check out Glyphr. It’s a font editor and it’s super cool.
Workflow Tools
When you’re a DIY designer flying by the seat of your pants, you rarely think about workflow. But I’ve learned (the hard way) that some great design workflow elements can make your DIY web design a lot less of a headache.
The first thing you want to adopt from “real web designers” is the concept of wireframes. Wireframes can be as simple as sketching out each page on paper or as complex as grids in Adobe Photoshop. For my purposes, usually sketches on paper are sufficient (I never get super-technical with my designs, after all), but if you prefer to see things more formally on a digital grid, check out Mockflow (which is a paid service) or Moqups.
Another place where I get stuck is where the words will go and how they’ll look – before I have the copy written. For this, a dummy text generator is great. Having copy on your site as you’re building it makes it easy to evaluate without getting hung up on what the words will actually be (which is my personal downfall).
When it’s time to stop playing with lines and words and start playing with color, you’ve got a few fun options. Color pickers are some of my favorite things – I pick a color and then the color picker spits out some great color combinations. Adobe and Color Wizard are two fun options to play with.
If your color pickers aren’t cutting it for you, you can use something like Pictaculous. Upload an image you like, and it will spit out a color theme drawn from the image. It’s pretty cool!
