Skip to main content

Hello there!

In today’s post I thought I’d go over some of the tools that I personally use in the majority of my web design projects. Now this isn’t an exhaustive list by any means, merely a “peek behind the curtain” at the kinds of software I use where others out there might take a wildly different approach to creating websites in terms of the tools they use. Also, I’ll try to include some alternatives where I can – variety is the spice of life after all!

CODE EDITOR/IDE: MICROSOFT VS CODE

First up comes my code editor/IDE (Integrated Developer Environment) of choice: Microsoft VS Code. Back when I first start writing web pages, I used the humble Notepad on whatever Windows OS version I was using at the time. Fast forward to the present and I’d be lost without a solid IDE when it comes to tackling a project. VS Code is a fantastic editor, allowing for extension plugins to be added to make your coding experience better. Need to add divs to a page with only a few key presses? It’s got you covered. How about intelligently highlighting different bits of code to make it easier to read? It does that too. How about a Live Server that will render your most recently-saved page in a browser? Not a problem. VS Code is not only a powerhouse, it’s also free making it a fantastic choice for your code editor.

That being said, other great IDEs exist such as Sublime Text, Atom & Brackets. Have a go with them and see what feels right for you.

GRAPHIC DESIGN SOFTWARE: ADOBE PHOTOSHOP

If you’ve not heard of Photoshop by now you most definitely have been hiding under a rock for quite some time. Photoshop’s been around for years in many different iterations, with the most recent (at time of writing) being Photoshop CC (Creative Cloud). I use Photoshop mainly for editing and optimising images, usually provided by my clients, in order to make sure that they render quickly and look great. Photoshop packs a lot of design and editing tools under its hood and is a great choice for beginners and professionals alike. I won’t go into too much more detail regarding Photoshop – its effectiveness has been extensively documented already – but I will say that given that the program name is itself synonymous with photo-editing, it truly is the king.

One of the downsides to Photoshop, however, is its price point. So, if you’re looking for something a little more cost-effective, then my secondary recommendation would be GIMP (GNU Image Manipulation Program) which comes in at the handsome price of: Free! GIMP offers many of the same tools as Photoshop so it’s a fantastic contender for the throne.

WIREFRAMING: PENCIL PROJECT

Before committing code to editor, I like to wire frame a website to show clients the rough outline of the design. Not only is this a great way to get a head start on the layout design, it can also help clients provide feedback before you’ve started building the website and so it’s great practice to include this step in amongst your design process. For this, I use Pencil Project which, again, is a wonderful free, open-source piece of software that’s incredibly easy to use.

If you’re looking for something a little more robust and that has a lot more features under the bonnet, you might consider investing in Balsamiq, which is also a great bit of kit purely made for producing great wire frames.

FRONT-END FRAMEWORK: BOOTSTRAP

I could write volumes on Bootstrap, and how it’s an easy to use (and learn) front-end framework, but since its first release way back in 2011 better writers than I have managed to do that job quite effectively already! Bootstrap, made by Twitter, has been my go-to front-end framework for a few years now and I love just how easy it is to get to grips with and build a beautiful-looking website in a relatively short amount of time. It’s grid-based system is intuitive and it really shines as a mobile-first website design tool. Honestly, go check it out. It’s amazing.

VERSION CONTROL: GITHUB

Github is a widely-known version control repository hosting service that is incredibly user-friendly and an absolute must when collaborating on a project with others. It fully documents changes to projects, allowing multiple users to amend a single document at the same time and merging the changes whenever they are saved and committed.

Whilst there is a desktop version of GitHub available, many others, myself included prefer a command-line interface for pushing projects to a GitHub repository and luckily VS Code allows you to operate a terminal inside of it, so once I’ve made all the day’s changes to the project I’m working on, I can add the files, commit and then push them to the appropriate repository in a matter of seconds.

WEB BROWSER: GOOGLE CHROME

Possibly a controversial opinion due to its resource-hungry nature, but I really like using Chrome especially for its Developer Console. This is an exceptionally handy way to peer behind the curtain of a web page, and see what’s going on back there. It’s also really useful during development because of it’s handy “responsive” mode, switching between a desktop render to a mobile one (where you can specify the size of the screen or type of device you’d be viewing the webpage on).

It does go without saying, however, that any good web developer tests their websites in multiple browsers for compatibility purposes, so a shout out to some of the more popular browsers: Microsoft Edge, Safari, Mozilla Firefox & Opera.

CONTENT MANAGEMENT SYSTEM: WORDPRESS

If you know web design, you know WordPress. The CMS is responsible for running 1/3 of all websites on the Internet, it’s that popular. Why is it so popular? Well, it’s free, open-source, widely supported and incredibly extensible – you can customise your install and the plugins to your (or more importantly your client) heart’s content. It’s the well-oiled machine that will keep your website looking and running smoothly. I really enjoy working in WordPress and many of my clients like the hands-on approach to website management it gives them, so definitely check it out if you haven’t already.

So those are just a few of the tools I regularly use for web design. Sure, there’s other things like notebooks, pens/pencils etc. and quite possibly a few other little programs I use in order to design, build and deploy websites but these form the bulk of them. Before I finish this post, however, I will emphasise that the best tool of all that a web designer can have in their arsenal isn’t even listed here; it’s Knowledge. There’s no point in having “all the gear and no idea” when it comes to web design and the best thing to do before deciding if Sublime Text or VS Code will be your editor of choice, or that you’d much rather work with Joomla over WordPress, is to make sure you know what you’re doing in the first place. With that in mind, I’ll link to a previous post detailing my favourite web development courses which is indeed worth checking out. In the meantime, I hope this post has been informative for you and I wish you the best of luck for your digital future!