15 Web Design Tools Must Haves. Let's just face it you can't make it in the design industry with just design skills alone, well you can, however, the job pool might be a very small one for you. Our industry is ever changing and if you want to remain employed well you have to be as versatile as you possibly can as a graphic artist.

With that being said, I have compiled a list of 15 Web Design Tools you can't live without. These design tools will make transitioning to the Darkside of the web much easier.

And when I say Darkside I'm referring to web design and or development, which the rebels now refer to it as UI and or UX design.  Yes, even our occupational names have changed in the graphic design industry.  8-O

15 Web Design Tools Must Haves

GUIDE GUIDE

This nifty Photoshop plugin takes the guess work out of creating a  multi-column grid. I was never any good at math, and you probably aren't either. let's just face it we think with our right brain most designers suck at math, :roll:  so guideguide is heaven sent and takes the guess work out of creating pesky columns and grids.

You will need adobe photoshop cc 2017 or greater it doesn't work on older photoshop versions.

Don't know how to use guideguide? Here's a free video tutorial on how to use the extension.

THE 960 GRID SYSTEM

This grid helps you to layout websites easily with a grid that's 960 pixels wide. This helps to create 12 and 16 digit columns a lot easier for web design layouts. Once again taking the guess work out of math.

See a trend here, designers positively hate math. Basically, in a nutshell, the 960 grid system will fit best on a users monitor and is most versatile for your web browser.

If you are looking for the  RESPONSIVE GRID FRAMEWORK you can download it here. DOWNLOAD RESPONSIVE GRID This grid is the successor to the 960 grid system and is highly recommended.

For an in-depth explanation and an in-depth tutorial on the 960grid system
click here.

BRACKETS

let's just face the truth Dreamweaver in its current state just sucks for designers. I don't know anyone who uses Dreamweaver to build websites do you? if you're looking for A modern, open source text editor that understands web design.

Then you should really try brackets and why not? it's absolutely free. What I have learned about site builders is they suck. Things like Muse, Dreamweaver or any kind of page builder are horrid for scalability, versatility, and ease of use.

How to use brackets watch the video tutorial click here

BOOTSTRAP

Bootstrap is 100% free & is the most powerful framework to create a responsive design using CSS, HTML 5 and javascript. If you want to land more jobs as a graphic designer, I suggest downloading bootstrap & watching the bootstrap crash tutorial course.

 Click here to watch the youtube video on how to use bootstrap and why it's an essential skill to have under your design tool belt.

SASS USING FREE KOALA COMPILER

Sass with compass using the koala compiler which is free and allows you to streamline complex code into easily manageable code.  In a nutshell its style sheets on steroids. Sass helps keep things tidy & allows you to create stylesheets quickly.

Click Here to watch a video tutorial on sass using the free koala compiler

Silex -Free visual UI web design tool

SILEX

Silex is a designers dream come true, you can visually create responsive design for web or mobile right in the web browser and view how they will look instantly you can save your work when you are done to your own computer for free!

Click here to see silex in action you won't be sorry that you did.

PERSONAPP

personapp is a UX-based website that allows you to narrow target audience, their behaviors in a nutshell it completely maps users personally so that way you can create a customized experience on the web or individually for marketing purposes.

There is no youtube tutorials on this unique app but it's pretty much self-explanatory. This app has been discontinued as of 12/4/2022

UX CHECKLIST

Sometimes you just don't know where to start at all. have no fear UX checklist are here. I want to say that this is by far if not the most useful web design resource, I have come across in a long time oh and its free! Even better. This checklist will help you be a better UX designer even if you have no formal training.

No tutorial needed its a checklist of UX design you probably should be integrating into your next web development project.



FRAMEBOX

In a hurry? create fast wireframing UI mockups on the fly directly on the web using frame box. On the downside,  it does not have a lot app rich features but on the flipside, you can create mockups on the fly and the best part it's 100% free and easy to use for creating quick and dirty UI design.

Click Here to see framebox in action.

PENCIL PROJECT

Easy GUI Prototyping across multiple platforms. This is a free and useful wireframing software for UI designers.
Click here to see a video tutorial on how to use the Pencil project. 

Slack

Need to collaborate with your clients and share design projects with them? slack does just that. There is a free version and a paid, as long as your using it as a single user it remains free. Lucky for us, most graphic designers are one man show anyways.

There are no video tutorials as of yet, but its so simple it really isn't necessary.

 list of other useful web design tools worth mentioning that cost $$$ or are free

Sketch a UX design app for mac cost is $99
Affinity Designer- word on the street "it's the new photoshop killer" cost is $49
Webflow is a visual web design tool you can create websites without coding, however, in my opinion, cost too much cheapest plan is $16 a month and can't export CSS.
Ux map  primarily for Ux Designers Document and map the user experience $29
GitHub is an online code hosting platform for version control and collaboration. Free & paid versions available
Caseium Free Image compression software