![\"first-wordpress-site-working\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/05\/first-wordpress-site-working.jpg\")
<\/figure>\n\n\n\nHere\u2019s the deal: I\u2019m 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 \u2013 people who are smart enough to figure most things out and willing to put in the time, but who have no real technical background.<\/p>\n\n\n\n
These are some of the best tools and resources for the DIY web designer that I\u2019ve picked up along the way. If you\u2019re similarly inclined, this one\u2019s for you!<\/p>\n\n\n\n
Website Builders and Customizable Themes<\/h2>\n\n\n\n
I personally am not a huge fan of website builders \u2013 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<\/a>. You can also find a huge number of customizable themes for WordPress.<\/p>\n\n\n\n Every designer has their favorite theme \u2013 and this DIY (non)designer\u2019s favorite is GeneratePress<\/a>. 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\u2019ve used this theme for 2 years and couldn\u2019t be happier with it.<\/p>\n\n\n\n These days, even I know that mobile-friendly, responsive design is an absolute must. I\u2019ve visited websites on my phone that weren\u2019t mobile or responsive, and it\u2019s not pretty. These days, most themes have a responsive element \u2013 make sure yours does, too. And then, as you\u2019re in the building process, use a tool like Duo<\/a>, Screenify<\/a>, or Browser Shots<\/a> to make sure that your site design will look good on any device.<\/p>\n\n\n\n Have you ever used a style guide? It\u2019s a reference sheet for all the visual elements of your design \u2013 the fonts, styles, headline formatting, and colors in your website. It\u2019s extremely handy to have and reference as you build and tweak your website, and you can generate your own with Stylify Me<\/a>.<\/p>\n\n\n\n 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<\/a> to come up with the code you want. You can also check out Webflow<\/a>, 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\u2019s a paid service, though, which tends to run counter to DIY.<\/p>\n\n\n\n This is a small potato, but make sure your site has a favicon. You can use this favicon generator<\/a>, 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.)<\/p>\n\n\n\n Fonts are the golden child of web design; it seems like everybody loves typefaces. But if you don\u2019t know what you\u2019re doing, fonts can be kind of intimidating. Buying a font, installing it, even modifying it\u2026yeesh. 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\u2019s also easy to find Google Font combinations that look good together with a simple web search.<\/p>\n\n\n\n Type-Finder<\/a> 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\u2019re well on your way. It makes choosing fonts easier, especially if you\u2019re not well versed in fonts and font theory.<\/p>\n\n\n\n When you\u2019re feeling brave and ready to get the exact font you want for your headers, pins, and more, check out Glyphr<\/a>. It\u2019s a font editor and it\u2019s super cool.<\/p>\n\n\n\n When you\u2019re a DIY designer flying by the seat of your pants, you rarely think about workflow. But I\u2019ve learned (the hard way) that some great design workflow elements can make your DIY web design a lot less of a headache.<\/p>\n\n\n\n The first thing you want to adopt from \u201creal web designers\u201d 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<\/a> (which is a paid service) or Moqups<\/a>.<\/p>\n\n\n\n Another place where I get stuck is where the words will go and how they\u2019ll look \u2013 before I have the copy written. For this, a dummy text generator is great. Having copy on your site as you\u2019re building it makes it easy to evaluate without getting hung up on what the words will actually be (which is my personal downfall).<\/p>\n\n\n\n When it\u2019s time to stop playing with lines and words and start playing with color, you\u2019ve got a few fun options. Color pickers are some of my favorite things \u2013 I pick a color and then the color picker spits out some great color combinations. Adobe<\/a> and Color Wizard<\/a> are two fun options to play with.<\/p>\n\n\n\nTaking Care of Appearances<\/h2>\n\n\n\n
![\"first-wordpress-site-mobile\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/05\/first-wordpress-site-mobile.jpg\")
<\/figure>\n\n\n\nEverybody\u2019s Favorite: Fonts<\/h2>\n\n\n\n
Workflow Tools<\/h2>\n\n\n\n