Kick your efficiency up a notch with these design and non-design tools.
Just like having dinner is not just eating, being a designer is not just designing. (As much as we wish it was.)
When a chef prepares a meal, they plan, collect ingredients, prepare, test, and plate their creations. Similarly, a designer must plan, prepare, test, and present their masterpieces. Just as a chef must utilize many tools besides their knives, designers can’t create with Sketch alone.
There’s a lot of work to find the problem, figure out the solution, hack away at the barriers to solving it, and get the solution out the door.
This article features a collection of apps from my Chrome bookmarks that I actually use throughout my entire UX process.
1. Find out what technology any website is built with
When I’m pitching to a new client, I first do my research. I present this to the client with a UX Audit. Knowing what I’m getting into is critical for new apps and redesigns. For a pitch, I will create a few slides that show their current user experience and where I see opportunities.
Wappalyzer is a Chrome plugin that shows the technology stack of any website you open (or upload URL lists on their site). Referencing their technology in a presentation makes it clear to a new or prospective client that your designs will be feasible for their platforms (and makes you sound smart).
2. Research common user flows from popular sites
Have you ever lost a whole afternoon creating throwaway accounts and screenshotting dozens of apps for the standard flows you’re designing for, like onboarding or account creation? UX Archive has done this hard work for you. It is a brilliant collection of designs by task, and you can submit to help grow the content library. I’m not sure if they keep the content up to date, but it’s still a huge help when trying to get ideas.
3. Start with templates
Uplabs has a lot of excellent designs for every design platform, some free and some paid. They also have design “challenges” if you are looking for inspiration to create designs that you can sell on their platform.
I occasionally use templates for personal projects or clients whose timeline or budget means I can’t design from scratch. (In which case, be very clear to the client that you are using a template, and make sure you get the right license for anything you download.)
4. Generate color palettes and gradients
Coolors.co is my favorite color tool of all time. Explore trending palettes, easily browse and tweak shades and tints right in the browser, and play with gradients, the share, copy, and export.
5. Build a reusable, manageable style guide and brand library
Frontify is like WordPress for brand assets. You can build style guides, image libraries, and reusable templates that clients and teams can manage and keep up to date. A tool like this is critical if your designs include new styles that you want to stay organized and consistent after you leave the project.
Frontify is a paid subscription, but there are many alternatives to Frontify, some with free subscription options.
6. Seamlessly export designs to developers
Zeplin lets you export from common design platforms to create a read-only view of all your screens, assets, and elements for developers. A collaboration tool is critical if you are working on a product team, and you don’t want to spend half your days exporting assets and documenting hex colors.
7. Generate page layouts
Are you interested in designing with code? If you are thinking about dipping your toes in the front-end development waters, I fully encourage you to try it. Even if you are playing around on your own projects, it will give you a basic understanding of what’s possible and how your designs can make a developer's life harder or easier.
Layoutit makes getting started with front-end code super easy. Start with a Bootstrap or CSS grid, edit it in your browser in real-time, and download it into your favorite editor to get started.
8. Generate simple HTML and CSS
This site is pretty ugly, but so many easy generators for things like images, gradients, tables, and forms. I haven’t dug into their tutorials yet but would love to hear if you do and find them useful.
9. Visually edit front-end code
Potentially more useful if you are an experienced front-end coder, JSFiddle is a powerful web editor. See your project in real-time as you code, start with common boilerplates, add third-party resources, and best of all, live-collaborate with others.
10. Validate your designs
With all the research tools available, it’s ridiculous not to get feedback before and continuously after you launch your product. I’ve said this many times, but everyone can and must do research to be a good designer.
UsabilityHub is one of many great tools for this. If you don’t have access to potential users or a recruiter to help find and schedule testing participants, I recommend this platform or one like it that comes with its own user panel.
11. Virtually collect user feedback
Loom is an extremely simple tool to record your browser and webcam simultaneously and easily share it with others. It’s great for internal communications or tutorial videos, and I also use it for user research. Whether for prototypes or live sites, it’s an excellent tool for recording in-person moderated testing sessions. Or consider using it for remote, unmoderated testing. Send out a survey, Loom instructions, and get users to complete a few tasks while narrating their thought process. (Here’s another link to that might help you get started on customer research when you don’t know where to start.)
12. Write effective UX copy
Grammarly has been around for a while, and there’s a good chance you’re already using it, but if not, download it today. Writing clear, concise, compelling UX copy is a critical part of building an effective UI, and Grammarly will help (or you can just hire me!)
Key takeaway
Being a great designer means being resourceful, considering every part of the product, and never skipping research!
I hope these tools help you, and I would love to hear about the apps you use in the comments below.
If you want more tools like these, signup for my newsletter, UX Adjacent. I share technology, creativity, productivity, and other mostly non-design ideas for UX professionals like you.