My Website Designing Toolbox - RD298

In episode 89 of Resourceful Designer, I discussed checklists and your design business. As a bonus to that episode, I offered my WordPress Website Setup Checklist. That was five years ago, and things have changed. In that time, I've grown and expanded as a web designer. The tools I use to create websites have also grown and expanded. Here is an up-to-date list of the tools I regularly use to design and build WordPress websites. Don't build in WordPress? Don't worry. I share a few things that may help you regardless of the platform where you design websites.

Conceptualizing the website.

Before I get down to designing and building a website, I want to know what I'm building. These are the tools that help me in the conceptual stage.

Dynalist:

Dynalist is a great outlining app that helps you get work done. I use Dynalist to outline the structure of every website I build. I like to know what pages a site will have and where they sit in the hierarchy. Dynalist helps me do this.

Coolors.co

Coolors.co is a super fast colour palette generator. I use it to choose colours for a website before the build starts. It's also convenient for finding great colours to go along with a client's existing brand colours.

Setting up the website.

SiteGround

SiteGround I host all my and my client's websites at SiteGround. They're inexpensive, reliable, easy to work with and score well in web host comparisons. What more could a web designer ask for in a web host?

Siteground has a very convenient one-click WordPress install feature that gets me up and designing quickly. Their installation registers me as the site admin using my email address instead of the default "Admin," usually generated by WordPress. If your web host doesn't have this feature, then I suggest the first thing you do upon installing WordPress is create a new Admin user and delete the default one named "Admin."

During installations, Siteground installs two of its own plugins, SiteGround Optimizer and SiteGround Security. These are great plugins; however, I disable them until I finish building the site.

Assets and tools I use on just about every website.

Envato Elements

Envato Elements is the first place I look for any stock images, icons or graphics I may need during a website build. Their low monthly subscription allows unlimited downloads, which comes in handy while experimenting.

Depositphotos

Depositphotos is another excellent resource for stock images and vector graphics. They're inexpensive, and their quality matches higher price stock image sites.

Grammarly

Grammarly ensures my website copy is error-free and written most effectively. I've been using it for years and won't compose anything without running it through Grammarly.

Squoosh

Squoosh.app is a handy website that does one thing very well, it optimizes images. Every image I upload to a website passes through Squoosh first.

Screenflow

Screenflow is only available on Mac (sorry, windows users). It's a screen recorder that makes it very easy to create tutorial videos explaining to clients how to use their new website. Screenflow is also a powerful video editor which I use any time I need to do minor edits to a video before uploading it to a website.

Handbrake

Handbrake is a free video conversion tool. It allows you to change the format of a video which is very useful in reducing a video's file size.

Building the website.

Divi Theme

Divi by Elegant Themes is the world's most popular WordPress page builder and is trusted by hundreds of thousands of website creators. Divi takes WordPress to a new level by allowing you to build a website visually. With Divi, there's practically nothing you cannot create.

Divi Marketplace

The .css-j9qmi7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-weight:700;margin-bottom:1rem;margin-top:2.8rem;width:100%;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;padding-left:5rem;}@media only screen and (max-width: 599px){.css-j9qmi7{padding-left:0;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}}.css-j9qmi7 svg{fill:#27292D;}.css-j9qmi7 .eagfbvw0{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#27292D;}