Resources and tools to help your next website

Launching a new website can be daunting, especially if you’re doing it on your own, or you’re working with a designer for the first time. So, I’ve compiled a list of helpful resources and tools that have helped me in the past.

To set the scene, I’m not a web developer, I’m a marketer. So the recommendations below are great for someone who might be using a WordPress theme (or similar) or working with a designer to update an existing website.

Start with why

When working on a website project, whether it’s updating an existing site or creating a new one, there is the temptation to jump straight in and edit on-the-fly. I’ve always found that whilst it can give instant gratification, like a fresh headline or swapping out a tired image, it can often lead to inconsistencies across your website.

Some time ago, a book was recommended to me called “Start with Why” by Simon Sinek. In a nutshell, the book explains the importance of starting with why you do something, instead of leading with what you do. Or to quote a phrase from the book:

“People don’t buy what you do, they buy why you do it”

Essentially, this approach helps you differentiate yourself from competitors because so many businesses fall into the trap of just saying what they sell. Simon gives a great example of this in his popular Ted Talk, where he talks about Apple and how they set themselves apart.

Armed with your new way of thinking, you can begin to write new content for your website,  and check that your story flows nicely across all pages.

Plan out the tasks

Any website project, big or small, requires a number of tasks to be completed. Some tasks live on their own, like updating opening hours or a phone number. Others have dependencies, such as launching a new product page; product images must be ready and copywritten before you can proceed.

A tool that I love using for planning tasks is Trello. I’ve used it for personal todo lists, right up to projects involving large teams. It doesn’t need to be complicated, a few lists to keep track of where task progress is all you need.

As you complete tasks, they flow through the board, giving you an instant view of project status. To each task card, you can add text, attachments, dates, checklists, and comments. You even tag and assign other people. Here is a beautifully simple template on Trello’s website. Why not try it out for your next project? It’s free to sign up.

Wireframing for the win

Armed with your killer copy, shiny product images, and ambitious launch deadline, it’s time to think about how your website might look and feel. Wireframing is a great way for taking ideas from your head or other websites and translating them into a visual form.

A tool I’ve used extensively for this is called Miro. Think of it as a big desk with loads of plain paper, pens, sticky notes, and more! It’s great for someone like me (who isn’t a designer) to quickly put together ideas and share them with someone who knows what they’re doing!

Wireframing isn’t always about how the website will look when it’s finished, it’s more about how pages will flow, what sections you might have, where the call to action buttons live, and so on. Here is a great example of a website wireframe from Miro’s template library. Just like Trello, Miro is free to sign up.

This approach might not appeal to everyone, but trust me, doing this sort of preparation speeds up the latter processes of actually putting your website together. “Enter text here” is replaced with blocks of text from the start. Build time is smoother because you’ve listed down all the tasks. And your web developer will have something visual they can work from at the beginning.

What tools do you like using for web development? Let us know on Twitter, Facebook, or LinkedIn.

(Featured image by Aryan Dhiman on Unsplash)