The 9 Most Useful Tools for Web Design
Web design is a difficult and complicated process. Creating an intuitive UX and a beautiful UI requires asset creation, wireframing, prototyping and more. To work efficiently and effectively, you need the right set of tools to get the job done. The following programs, services, and techniques are the ones that I’ve found to be the most useful in UX and UI design for web.
Design Applications
- Perhaps the most critical tool in web design, Sketch 3 is made by Bohemian Coding and is a Mac-only professional digital design application. It provides by far the best toolset in the industry for UI design, whether your project is destined for mobile or web. There are tons of official Plugins available on Sketch’s website, as well as user-generated ones on Github, that make a designer’s life substantially more efficient and productive. Sketch 3 also provides easy asset export, the ability to copy CSS attributes for elements, a mirroring application, a wonderfully simple artboard organization and the ability to sync with InVision (later discussed in this article). In my opinion, Sketch is completely necessary for web design in 2016. Fortunately, it won’t hurt your wallet much to get it. The program has a downloadable 30 day free trial, after which you only have to pay $99 to own it for life. Unlike the subscription model of Adobe’s Creative Cloud software, once you buy the license, you own it forever.
2. The second most useful application for effective web design is Adobe Illustrator CC. While Sketch 3 excels at making beautiful interfaces, Illustrator is best used as its helping hand for asset creation such as vector illustrations, logos, and iconography. Unlike image files (like .jpegs or .pngs), vector art scales indefinitely without losing quality or becoming blurry, making it ideal for design work. Having both Illustrator and Sketch 3 operate with vector objects allows for easy communication between the two programs, so you can drop your newly-created assets from Illustrator right into your designs in Sketch. If you plan on making your own assets, Adobe Illustrator is a must. This is a monthly subscription-based software that’ll run you $19.99/ mo for Illustrator only, or $49.99 for All Creative Cloud Apps. Adobe also has a student discount, offering the whole Creative Cloud suite for just $19.99/mo.
3. I have to mention good ol’ Photoshop CC, another entry from the Adobe Creative Cloud suite. Photoshop has been around for ages, and in that time, its popular use cases have multiplied. People now are using it for animation, website design, application design, print material creation, and various other uses. However, I think that we ought to remember that Photoshop was originally created for the sole purpose of editing photos (the word “photo” in the program name being a bit of a hint here). I strongly believe that Photoshop should only be used to edit and manipulate photos for your website, but that’s a topic for another post. If you want to adjust the hue, contrast, brightness, or saturations of an image or crop out the exact piece of an image you plan to use, Photoshop’s your tool. Regardless of where you obtain your photography, you are going to need to edit it to some extent, and the venerable Photoshop is still your best bet. It is still the industry leader for a reason. It’s priced the same as Illustrator; $19.99/mo for Photoshop only, and $49.99/month for the Creative Cloud suite (or $19.99/mo with Adobe’s student discount).
Inspiration & Networking
4. What is design without inspiration? Whether you want to keep up to date on the latest design trends or just need some ideas to get your creative juices flowing, all you need to do is check out Behance, Dribbble, and my personal favorite, Pinterest. These websites all have one thing in common: they have endless posts of inspiration for any design medium. If you need to see how people are treating inputs on their forms, or what a new fresh landing page looks like, these websites will provide you with piles of creative content to fuel your muse with just a simple keyword search. On top of that, these platforms help you to build out your professional network with other fabulous designers. To that end, it’s important to not just passively consume all of the great content on these sites, but to actively post your own work on a frequent, regular basis and build your own online presence. I personally love using Pinterest to pin various pieces of inspiration. I am super organized with my boards, and if I need to look for anything design related I know which board to look at. Take a look for yourself by viewing my Pinterest Profile here!
Resources
5. So now you have your tools and you have your inspiration, but you just don’t have that right imagery needed to convey the right mood on your webpage. Most of us designers don’t have the privilege of accessing the massive libraries of expensive photography websites like Shutterstock.com, Gettyimages.com, or even Stock.Adobe.com. These websites have fantastic and endless high quality professional photography, and if you ever have the chance to utilize these platforms then enjoy it! For everyone else, I recommend the following free Stock Photography websites that allow use of the photos in personal and commercial work: Pexels, Unsplash, Magdeleine, Gratisography, Startup Stock Photos, Flickr Creative Commons, Subtle Patterns (for patterns and textures) and of course Labeled for Reuse Google Image Search. You might have to spend some time digging for the perfect photo, but you more than likely will be able to find something suitable for any section of your website from these free resources above. NOTE: Always ensure you are using proper licensing when designing! You don’t want to have to deal with the legal consequences of improperly using copyrighted images.
6. Iconography in Web Design is a crucial part of today’s standards. Virtually every site uses some amount of it, ranging from subtle, sparing use of icons to an abundant application of them. However, creating icons yourself can be lengthy, and frankly, a bit of a waste of time. Most of the icons you could want have probably already been created in most of the styles you could imagine, and Flaticon.com is a fantastic resource for finding them. Whether you want a jpg, png, svg, or eps, Flaticon has you covered for all your line, fill, and color icons. This is a free resource, but you need to include a line of code in your HTML to credit the author of each icon that you use. Not a terribly burdensome request, but if you get tired of doing that for every icon you can purchase the monthly subscription of $9.99/ mo (or $7.50/mo if you buy for the year). Check out more pricing info here.
7. A typeface choice can make or break a design. There are thousands out there, so picking the right one for every situation isn’t as easy as it may seem. These resources should help you out there. You can check out FontReach to search for any given font, or view the top fonts used by other websites. To make the process of loading in a typeface to your website simpler, I highly encourage the use of Google Fonts due to their ability to be inserted easily into your website by adding a simple line of code. They are light and they display the load time, and they are trendy. To help you even further, check out Font Pair. This website takes Google Fonts and matches them together in various combinations (Sans-serif/ Serif, Serif/ Serif, etc.). You can see how the main header and body copy look together, so you can assess if each pairing would work for the kind of theme you are going for.
8. Another one of my favorite and most used tools is called InVision App. InVision App is used for making interactive prototypes from the designs you’ve created in Sketch. With InVision, you take any mockups you have made, place them in an appropriate device layout (like a smartphone or a desktop browser), and add interactive “hotspots” over specific assets to link to different pages throughout the design. This makes a clickable prototype to simulate the application or website, which you and your client can share with anyone to gather feedback. You can add comments to specific spots on any page, prioritize and categorize your screens, and add collaborators to your team to help with the project.
InVision also comes with some powerful utilities that will make your life easier. To facilitate the creation of prototypes, Invision includes an application called Invision Sync. Once you’ve placed your Sketch mockups into the Sync folder, InVision automatically creates a prototype, using each of your artboards as a new page. There’s another utility called Craft, an additional plugin for Sketch from InVision App that helps make your prototypes more functional. For instance, it gives you the option to upload a .csv file to populate the content in your Sketch document, instead of just using static text.
9. Last but not least, you need devices to test your websites on. In the era of responsive web, your designs need to scale correctly and provide the same quality of experience on every device. The best way to make sure that you’ve achieved that goal is to test your Invision prototype on several different devices. You won’t know how well your design works until you experience it for yourself.
There is a lot that goes into great Web Design. It’s about understanding the demographic through UX research and user testing. It’s about understanding front end development, and how great web design needs to have a technical approach as well. It’s about understanding the current trends, and of course having an artistic eye. This list includes the tools are the ones that I have found to be most helpful in making all of that happen, but they’re certainly not the only options. What’s on your list? What do you think I should add to mine?
Read this article and more web design tips on Checkmate Creations’ website.
