3 Essential Tools for the Modern Web Designer

Katie Crawford
min read
November 7th, 2017

Coffee cup on table that says "begin"

How many of you feel that you can design a website only using one program? That would be kind of hard, right?

If you can, you are a graphic designing unicorn, my friend. For the rest of us...

There are so many options for designers to use that can make our daily tasks seem overwhelming. Instead of finding a “one size fits all” (or as I prefer, “one size fits well enough”) program, I’m sharing with you the top 3 programs I use, why I use them, and most importantly, why I chose them over others.


Sketch Logo

I taught myself Sketch during my first internship in college. There are several reasons why I chose to learn this program:

  • Almost every job application for web design required Sketch as a skill
  • My mentor said it was the industry standard
  • I absolutely hate designing websites in Photoshop

Sketch is great for:

  • Wireframing
  • Responsive Design
  • Website Design
  • Digital/Social Ads

I learned how to use this program in about a week. It’s much more intuitive than learning Photoshop because it uses a layer-based system that you can click through like you would in Illustrator. This allows you to focus more on what you are designing and less on layering your work.

Sketch was made for digital design. This program has the ability to make “symbols,” meaning that if you place a symbol on 5 different artboards, you can change it in one location, and that change is updated in every instance of that particular symbol across all artboards (talk about a time saver!). They even have a shared symbol library that will change symbols for all team members working with that file.

Sketch also has pre-determined artboard sizes for desktop HD, desktop, tablet, and mobile which can be added at any point during the design. Having these artboard sizes available is awesome because it’s one less thing that I have to worry about setting up.

Sketch is very flexible with its type tool as well; it allows you to play with the width and height of the text container without stretching the actual text.

Another reason I love Sketch is because it has the ability to create layout grids—these let the designer know where the “container” is. What I mean by container is the “breaking point” for responsive design. Once you set up your preferences, every Sketch file will have the same setting to keep your work consistent.

Sketch also factors in vertical and horizontal rhythms by  telling you the pixel distance between objects (this makes my OCD side very happy).

The creators of Sketch also considered the designer-to-developer relationship when building this program. They created a feature that allows you to export every asset of a design without having to individually select all of them.

Sketch also has a lot of plugins that make the workflow more fluid. One of the plugins is a text generator that can be specified by headlines, articles, names, address...you name it. Those categories can be broken down into types of content as well! This to me is so much better than using Lorem Ipsum because it gives your client an idea of how real text would look in a design. Invision has a great (and free!) beginner-to-expert course available to learn more about how Sketch works.

Sketch is bad for:

  • Making icons
  • Print Material
  • Editing photos

Although Sketch is my go-to program for web design, I would never use it to make icons. Sketch has the ability to create vector artwork, but I find it to be very tedious, unlike Illustrator.

Another downside to Sketch is that it cannot make anything for print design. You can export artboards as PDFs, but the colors are RGB while print is CMYK.

Finally, Sketch has the ability to edit photos, but they are very minor changes like desaturating, adjusting contrast, etc. I would not count on Sketch to create an amazing photo graphic—that’s where Photoshop comes in handy.


Adobe Illustrator Opening Screen

Illustrator is my second-most-used program on the job; I use it to create icons and all vector-based images. I chose to learn Illustrator because:

  • It is the industry standard
  • It’s the best program for creating vector-based designs

Illustrator is great for:

  • Vector images
  • Icons
  • Print design (not text-heavy)
  • Logos

Whenever I need to make icons, I always go straight to Illustrator because it was created for vector-based images—these refer to any form of design that doesn’t use pixel-based images. Illustrator makes everything with points and lines, so really, it’s a bunch of shapes that make up the images and not tiny, square pixels.

Illustrator is nice to use because you can easily change stroke weights, sizes, and colors. When I learned that Illustrator had a color selector that would select one color across your entire design, my mind was blown—Sketch only allows you to change one thing at a time unless it’s a symbol. This made designing a lot easier, too: if a company wants to change their brand color from red to green, I could select all that’s red and change it in one instance rather than individually clicking everything.

Illustrator also allows you to have multiple artboards, making it easy to create vector-based images for multiple sizes.

Illustrator pairs well with Sketch because you can copy and paste directly from Illustrator into Sketch, because sketch will save each element of your design as a layer, including every connecting path.

For example, if you have line-based icons that look too skinny or fat, you can adjust the stroke weight in Sketch. This is so much easier than having to worry about exporting 20 icons, bringing them all into Sketch, and then having to repeat the process over and over.

Even so, I would expand your work first and merge the paths in illustrator because it’s easier to edit icons in sketch if they are one piece, they also scale better if they are a solid shape and not layers.

Illustrator is bad for:

  • Web Design
  • Layouts
  • Editing Images

Although Illustrator is my second favorite program, it is not a one-stop shop. Illustrator has the ability to create designs in both CMYK and RGB; however, it’s not as connected as Sketch is. If I change an icon on one artboard, I have to copy and paste that icon in every other instance that it occurs.

Illustrator also has a poor type tool. Instead of being able to adjust the box size, it stretches the text—except for on very rare occasions. This can be frustrating when you just want to get rid of an orphan (one word on a line) or a widow (having a column with one line of text).

Illustrator is also not good for adjusting pixel-based images unless you want to draw on top of something.


Adobe Photoshop Opening Screen

Even though I don’t use Photoshop every day, it is an important tool to learn. Photoshop is by far the best program for editing images and making mockups. I chose this program because:

  • It is the industry standard
  • It’s the best program for editing pixel-based designs

Photoshop is good for:

  • Photo Editing
  • Mockups
  • Digital painting/drawing

I tend to use Photoshop the most when I need to make mockups for my designs—you can find free mockup templates for just about anything.I really enjoy utilizing the smart objects feature in Photoshop because I don’t have to worry about fitting my design to be the right angle. Instead, Photoshop lets me plop in my design and automatically formats it to fit the mockup. Photoshop is excellent for creating crisp images that you can easily bring into Sketch.

I also prefer to use Photoshop to touch up images: I took pictures for an event on my iPhone, but they came out really green, so I used Photoshop to color-correct my photos. The program also has the ability to “copy styles” so you can apply the same changes to multiple images. This is helpful when you need all of your images to look cohesive.

Photoshop is bad for:

  • Vector-based images
  • Multi-screen designs

Although Photoshop has the ability to create vector lines, I feel that it’s much harder to use than the vector tools in Illustrator.

The layering system in Photoshop can also be frustrating. It’s hard to go from a program (like Sketch and Illustrator) that allows you to click on any layer, regardless of what’s above or below, and then go into Photoshop where, if you don’t select the layer from the layer panel, it has no idea what you are trying to click on.

Photoshop also has a bigger learning curve.  


Final Thoughts:

Hand holding pen on digital tablet

I would much rather have multiple programs to complete my tasks the right way than try to use one program to handle everything. This was a hard lesson to learn when I first began my career as a graphic designer, but now I am thankful to find new tools to handle specific tasks.

Being a lone designer, it’s imperative that I find the most efficient way to handle my workload, and knowing the strengths and weaknesses of these programs has helped me to increase my workflow significantly.

It’s every designer's job to keep up-to-date with their field after graduation, so I would suggest signing up for newsletters for your industry (like the one below *wink wink*), and read an article every day about what is going on in the industry. Knowledge is king, after all.