0115 786 0420
0115 786 0420
You’ve probably heard me say this before but I’ll say it again, the world of web design never stands still for too long. Technologies advance, standards evolve and new tools are developed on what can seem like a daily basis, and as professional web designers it’s our job to keep up to date with them all. Understandably this can be a difficult task, especially as the lines between designer and developer become increasingly blurred, but to help you out we’ve put together a list of what we feel are the top 6 essential tools for web designers.
Design Software (Photoshop vs Affinity Designer)
Let’s start with the basics, every web designer needs some form of software to design their websites in and the goto software of choice for years has always been Photoshop. However, recently we’ve seen the release of some strong contenders which may have a serious chance of toppling Photoshop off it’s throne. The biggest one right now, which you may have already heard of, is Serif's Affinity Designer. The biggest bane with Photoshop for many designers, especially freelancers, is its price tag which starts from £120 per year, Affinity Designer on the other hand is priced at just £50 and requires no subscription.
From a usability point of view Serif have kept the UI familiar by using a similar layout to Photoshop which means jumping between the two is quick and easy. They’ve also added some subtle improvements such as the 1,000,000% zoom and 8,000+ undo steps which can be surprising useful.
Overall, Affinity is a serious bit of software and if you’re looking for an alternative to Photoshop I’d recommend checking out the free trial.
Code Editor (Sublime Text)
Perhaps another obvious tools is an efficient code editor. Being a web designer often means you can be sat in front of a code editor for over 8 hours at a time, so finding one that is efficient, easy-to-use and lightning fast is a must! Arguably the more popular code editors for web developers and designers at the minute is Sublime Text.
Sublime Text offers a clean, and almost minimalist, UI which is easy to navigate and become familiar with. It also offers an array of useful shortcuts and the ability to make multiple edits simultaneously which can really help towards improving the efficiency of your workflow.
CSS Preprocessor (Sass & Less)
If you’re unfamiliar with preprocessors think CSS on steroids. Preprocessors such as Sass and Less are crucial if you want to write maintainable and scalable code efficiently. They allow you to make use of variables, nestings and mixins which ultimately reduces the amount of CSS you have to write, thus keeping your code “DRY” (don’t repeat yourself). If you are completely new to preprocessors I strongly recommend checking them out, the learning curve isn’t that steep and the rewards certainly pay off.
Version Control Systems (Git)
Remember the days when you and a colleague would be working on the same project at the same time and one of you would overwrite the other’s code? Well enter version control! Version Control Systems such as Git allow multiple developers to work on the same project at the same time. Essentially each developer has a complete copy of the project they’re working on and can commit and merge any changes they have made to a master copy on a central server. The benefits of using a version control system such as Git means there’s an archive of every commit made, so if the worst was to happen you can easily roll back to an earlier version.
Now, there are other version control systems out there, however Git is free and open source which is an obvious benefit. It’s also one of the more popular version control systems which means there’s plenty of documentation available to help you get started.
In-browser Developer Tools (Chrome developer tools)
Wouldn’t it be brilliant to be able to spot, analyse and rectify bugs in real-time? Well this is were in-browser developer tools come into play. Being a top level web designer in this day and age is partly down to how efficient your work-flow is. In-browser developer tools such as Google Chrome’s developer tools allow you to analyse your website and make changes to the HTML & CSS in real-time. This is incredibly useful for debugging or prototyping quick changes. It also allows you to debug Javascript errors and analyse you website’s load profile.
Project Management Tools (Trello)
Being able to effectively manage your web development projects is crucial if you want to maximise your work hours. There are many tools out there to help you achieve this but our personal favourite is Trello.
Trello is a project management tool which strongly resembles a to-do list. The nice thing about Trello is its single user interface and use of cards and lists. We like to use Trello by setting up a new board for each web development project, which we then use as an online scrum board. We effectively create 5 lists (to do, bugs, in process, check & verify and complete) within the board and use cards to represent individual tasks or pieces of work. All cards begin life in either the ‘to do’ or ‘bugs’ list and progressively make their way across to the ‘complete’ list. If we need to break down a task or piece of work even further then we add a checklist to that specific card.
I hope this article has given you some insight into what tools are currently available for web designers. If you have any questions or need any help with any web design projects, please don’t hesitate to get in touch.
