My Tools of Choice for Designing & Developing

As someone who gets to be involved in a project from the beginning all the way through launch, there are a few tools that have become integral to my design and development process. These tools helped make me more efficient by enabling me to quickly iterate on ideas and adapt to changes easily.

Design Tools

Pencil & Paper = Ideation

Pencil and paper is one of the quickest way to sketch out ideas and to quickly be able to see which ideas have the most potential and are worth pursuing.

During every project kickoff meeting, we learn about the direction our client’s want their product to go, who their target audience is, and how they hope to achieve those goals. Getting a sense of the client’s general aesthetic taste is also key and helps me understand the tone and direction for the visual design. At this point in the meeting, my mind is flowing with ideas and I’m ready to start sketching.

Sketch = Wireframes & Mockups

Sketch is a tool used for creating wireframes as well as high fidelity mockups for web and mobile applications. It’s becoming more and more popular with designers—even some of our backend developers bought a copy of Sketch to use when they need to quickly wireframe something out.

I made the switch to Sketch a little over a year ago, and as someone who previously used Illustrator for web design, Sketch has proven to improve my own design process by allowing me to design more quickly. Yes, there are less features in Sketch, but it’s striped down to the essentials. It also lets you think a little more in terms of code by allowing you to create reusable symbols (aka partials or components in code speak) as well as allowing you to easily extract values from your design and apply that to your code. For instance, colors are already in hexadecimal form, font size is listed in pixels instead of points—translating my design into code has become much more seamless. Sketch also autosaves which is just a dream come true, because I no longer have to worry about my project crashing and losing hours of work just because I forgot to save. And best of all, Sketch gets regular updates with improvement to functionality as well as adding new features upon request from their users.

Adobe Photoshop = Photo Editing

Photoshop is the natural go-to for photo editing. It has everything from color correcting and cropping to more advanced features that allow extensive photo manipulation. Once I’m happy with an image, I make sure to export using the “Save for Web” option because it significantly reduces the file size and as a result has less of an effect on page speed.

Aside from typical photo editing, I occasionally use Photoshop to edit my coworkers faces on other people’s bodies. The tools in Photoshop make it easy to turn a LaunchPad Lab developer into famous painter Bob Ross (beard and all).

Adobe Illustrator = Logos, Icons, & Illustrations

Illustrator is used to create vector-based graphics, so when it comes to making icons, logos, and illustrations this is a great tool for the job. This is also the tool I use to design t-shirts, posters, coasters, and other print-based materials. It provides the control and precision to make both simple as well as complex shapes very easily.

Illustrator also includes a lot of saving/exporting file type options. For instance, when I finish designing a logo or icon set and need to use them on a website or application I typically export them as SVGs since that keeps it in a vector image format (which scales really well when resizing). So if you were to scale up a JPG or PNG it would become fuzzy and pixelated, whereas an SVG’s lines and edges would remain clean (just remember to outline fonts and lines in Illustrator to ensure that it doesn’t get distorted).

InVision = Prototyping & Feedback

Invision is a prototyping tool that allows you to create clickable mobile and web mockups, bringing static screens to life. It also makes it easy to share projects with clients and have them provide comments directly on the mockups. A couple newer features that Invision recently added include creating mood boards, managing workflow, and (currently in beta) the ability to do recorded user testing.

Dribbble = Sharing Designs & Inspiration

Dribbble is a “show and tell” for designers all over the world. So basically it’s a place for people in the design community to share what we’re working on with other designers and get feedback on our work. It also serves as a place to get inspiration and to challenge designers to push their designs to a new level. Not everything posted on dribbble is client work, in fact a lot of posts are personal and passion projects that really show off people’s creativity.

Development Tools

Sublime Text= Coding

Code can be beautiful too! Sublime Text is the text editor I use once it’s time to code up my mockups. It has really good language support and syntax highlighting for each of those languages which makes it easy to catch the smaller mistakes by simply looking at the text color. The ability to create code snippets is also pretty clutch, so you no longer have to rewrite or search through old projects to find your reusable pieces of code. Sublime Text also has a pretty extensive package manager which includes color scheme, formatting, language syntax, and many more! There are also support for autocomplete and auto-saving as well as plenty of keyboard shortcuts that help me code more efficiently. And best of all it’s really reliable and hasn’t crashed on me once…which is something I can’t say about some of the text editors I’ve used in the past.

ImageOptim = Optimizing Images

Large images often result in slowing down page speed. ImageOptim helps lessen the weight images bare on page speed performance by “optimizing compression parameters, removes junk metadata and unnecessary color profiles,” in other words it gets rid of all the useless information encoded in images without sacrificing image quality.

SVGOMG = Optimizing SVGs

SVGOMG helps strip out some of the unnecessary code and metadata in SVGs that programs like Illustrator tend to include when exporting your icons or logos. You simply upload your file to SVGOMG and it provides you with a new optimized version with a smaller file size that you can download and then include in your project.

Browserstack = Cross Browser Testing

BrowserStack gives you access to real desktop and mobile browsers instantly, so you can easily perform cross browser testing on both new and old versions of operating systems and browsers of all types.

Cross browser testing is definitely my least favorite part of the development process, but it’s probably one of the most important steps before launching a website or product. BrowserStack makes this step significantly more bearable. I’ve also learned to not leave browser testing to the very end because there’s nothing worse than letting yourself think you’re almost done with a project only to realize the code you were testing in Chrome looking perfect, but looks off in Safari… and don’t get me started on Internet Explorer. This is why now I try to test per page or a small group of pages—not only does this keep me more sane, but also helps me be more proactive with how I write my code so that it will work on all browsers the first time around.

Final Thoughts

So maybe that was more than just a “few tools”, but they each provide a lot of value and help me easily move from one phase to the next in the design and development process. Over this past year I’ve learned to keep an open mind and try out new tools and products, some didn’t work for me and the others I listed above. It’s important to be willing to change and adapt to new technologies, because even if you’re fully proficient in one tool, there might be an even better tool for the job that you’re missing out on.

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*