Tools of a Hacky Startup Designer
As the only designer in an early-stage startup, the time I get for most tasks is dramatically shorter. To compete with bigger, more well-resourced companies we need to do things fast, much faster.
I won’t lie, it can be a stressful environment — A new competitor pops up, and while we try to ignore it, the urgency to get to market and grow your audience increases. Or you’re reporting to investors and it’s a constant reminder of how little time there is until you need to be profitable, raise more funds or go out of business. To survive, I need to keep pushing myself to be faster.
A lot of it is about mindset, but more practically I’m always finding new tools that help me to be more efficient, force me to drop my natural detail-orientation, or enable others to design more self-sufficiently.
So if you’re a designer in a similar position or a startup founder/employee without much design support, here’s a collection of tools that will help you move at the speed that you need to survive.
- UI Design / Wireframing
- Prototyping
- Chatbot Prototyping
- Visual Collaboration
- Website / Landing Page Builders
- Graphic Design
- Icons
- Color Palettes
- Illustrations
- Logos
- Free Stock Photos
- Product Mockups
- Image Editing / Manipulation
- Video
- Browser Extensions
- Inspiration
1. UI Design / Wireframing
Balsamiq
Create simple black and white wireframes in minutes using a library of drag and drop components. Balsamiq’s constraints force you to focus on structure and content, and avoid getting lost in the details that don’t matter in early sketching.
Whimsical
Similar in functionality to Balsamiq except with higher visual fidelity. When you want to present something a little more polished but still don’t have much time, Whimsical is great! It has an inbuilt icon library as well, which saves a lot of time.
2. Prototyping
Figma
The first and only tool I’ve used that has managed to crack 3 major parts of the design process — design, prototyping and developer handoff. In one day of trying Figma, it successfully killed 4 separate products I was using before — Sketch, Invision, Craft and Zeplin.
It runs in the browser which means you can share your work with anyone for free with just a simple web link. But more than that it allows anyone in the team to jump straight into your designs and collaborate in real-time just like google docs. They have tons of videos and documentation to get you up to speed, but it’s pretty intuitive — two of my non-designer colleagues (product manager and Founder/CEO) have jumped straight in and started editing and designing without having to learn anything beforehand.
Google Slides
Made for presentations but you can also use it to create simple prototypes using the basic shape tools and animations. Not the fanciest but it’s easy to use and of course you can collaborate in real-time on it.
Marvel User testing — coming soon
Marvel has been around for a while, but why it’s still relevant and worthy competition for Figma is because they do all of what they do but also cover one more essential part of the process — user testing. It’s still in beta, but here’s what they’re offering:
- Real-time feedback on exactly how people are using your prototype and video and voice reactions too.
- Automatic tracking of how the prototypes perform
- Automatic voice transcription and;
- Recruiting test participants
3. Chatbot prototyping
Botsociety
Want to create a conversational experience like a chatbot or a new skill for Alexa? Botsociety allows you to design conversations for most platforms: WhatsApp, Facebook Messenger, Google Assistant, Alexa and Slack. It’s all made pretty easy with the simple approach of “Bot Says, User Says”
Google Hangouts / Slack / WhatsApp
With any instant messaging product, you can easily fake a chatbot experience by setting up testers to interact with what they think is an automated conversation, when in fact it is a real person on the other side.
4. Visual collaboration
Miro
What was once before only an in-person activity or an annoying process of sketching something on paper or a whiteboard, taking pictures and uploading somewhere, has now been transformed into seamless visual collaboration. For brainstorming, creating mood boards, mapping out journeys and visualising processes, Miro is the perfect tool for the remote era. But I also use it a lot to document ideas a save a few post-its in the process.
What I like about this tool is that it holds a lot of power and advanced functionality for those that want it, but it doesn’t get in the way for those that just want to get an idea on paper (or in this case a digital whiteboard).
Mural
The alternative to Miro. According to this article, Mural has an easier learning curve — less functionality means more simplicity. However it does suffer from a few performance issues, but unless you’re planning to hold big workshops using the tool, it shouldn’t be an issue.
5. Website / landing page builders
Carrd
Simple, free, fully responsive one-page sites. It will take you about 1 hour to go from signing up to a live webpage. They’ve been careful to not to add too many functions, and therein lies the value because you don’t get distracted with all of the possibilities.
Instapage
Quickly create responsive landing pages without code, set up A/B tests and gather data. Once you’ve got it set up you can publish whole new landing pages within half a day or less.
6. Graphic Design
Canva
No need for InDesign or Powerpoint, Canva aims to make design accessible for everyone — despite a few usability issues, they do a pretty good job of that. You can create for web and print, from posters to social media graphics, presentations to packaging with a simple drag and drop interface. Either start from scratch or choose from their 1000s of customizable templates. This tool has definitely freed me up from some of the tasks I was doing before because my non-designer colleagues were limited to design tools with steeper learning curves.
Piktochart
Very similar to Canva, but superior for infographics, icons and chart heavy presentations. You can import data straight from google sheets or excel to create charts with real data.
7. Icons
Noun Project
Simple searchable, drag & drop icons — ideal for quick mockups and presentations. They have a great mac app that allows you to pull in icons to whatever tool you’re using, plus plugins for google slides / docs
Flaticon
When you’re struggling to think of the right icon to visualize an idea, their themed packs are a great source of inspiration.
Emojipedia
Sometimes I find emojis a much quicker way to communicate an idea or feeling and you don’t have to worry about inconsistency as they’re all part of the same pack. Emojipedia is the place to find them all.
Dribbble / Behance
Sometimes you need more consistency, so for a pack of icons that are all in the same style, I still use Dribbble or Behance. You can often get great free icon sets in return for tweeting about them. Just search “free icon set / pack”
8. Color palettes
Coolors
For generating color palettes with a tap of your spacebar. You can adjust the hue and shade easily and they even have a mode to simulate what your color scheme will look like for the different types of color blindness. While 5 colors won’t be enough for a whole product, it’s enough to get started, and once you lock some colors down, you can just hit the space bar for more that complement them.
Site pallet
Want a similar look and feel to Dropbox? How about Nike? Use this tool to download the color scheme of any website you’re inspired by.
Stark
For checking your designs for color contrast and accessibility for color blind people. If you decided to use Figma — it has a great plugin, as well as for other design tools.
9. Illustrations
Humaans
Adjustable illustrations of diverse humans. You can create all different variations thanks to each body part and and accessory split into parts. Thanks to Pablo Stanley you’ve made illustrations accessible to all.
Perfect for quick storyboards, or testing out whether illustrations work for your brand. I’d advise customising them a little yourself though using Figma or another vector tool, as more and more companies are starting to use them. Soon it will become much like seeing the same stock photos on every site.
Openpeeps
Another illustration library from Pablo Stanley. In this one you can change facial expressions, clothing, hairdos, poses etc. Apparently there are over 584,688 possible combinations — perfect for storyboarding, personas or bringing your ideas to life.
10. Logos
Brandfetch
Download the extension for Chrome or Firefox to get the logo of any brand simply by going to their website and launching the extension. They also have a Figma plugin for placing logos straight into your UI designs.
11. Free Stock Photos
Unsplash
A growing library of 1.5 million free high-resolution photos. These are high-quality and far from the obviously stock images you see elsewhere, because they’re created by a community of 11,000+ photographers. The quality and variability is getting better and better, but go beyond the first 10 if you want something unique.
They also have plugins for Google slides, Medium, Typeform, Figma, Notion, Trello and more, so you can drop in beautiful images straight into the tools you’re using.
Pexels
A great alternative to Unsplash. They also do stock video too.
12. Product Mockups
Cleanmocks
Create mockups for mobile and website designs. Simply upload images of the interface and you can place them inside the mobile devices, laptops, app store images.
Smart Mockups
Imagining how your ad would look on the subway or a billboard or how your app would look in someone’s hand during their commute? Just upload an image and place in any of the 3000+ mockup templates for digital, print, packaging and clothing, and see how it would look in a realistic environment.
They also just released an integration with Canva so you can get a live preview of how your design would look in the real world without having to leave Canva.
13. Image Editing / Manipulation
Remove.bg
Remove the background of any image 100% automatically. Cut out people, products, whatever really…This is basically magic. 🧙🔮
Quick shout out to all those designers who remember using the lasso tool in photoshop to painstakingly cut images by hand. Finally an AI that actually works!
Stickpng
Create quick collages using this catalogue of free transparent PNGs — from animals to landmarks, objects to memes. Thanks to Jeffrey Humble for helping me discover this.
Unscreen
Apologies if you’re still cleaning up the mess from having your mind blown by remove.bg. Unscreen allows you to remove the background of videos and gifs! 🤯🤯🤯
14. Video
Loom
A super simple video and screen recording tool. It’s great for creating quick walkthroughs of your product to onboard new users and also to reproduce and record bugs you’ve noticed in your product. But I mainly use it to collaborate asynchronously with the team , creating quick screen recordings to show what I’ve been working on and share knowledge with people in different timezones.
InVideo
A video creation platform to create video ads, promo videos, social media videos and more. It comes with loads of templates and an easy drag and drop video components. If you’re trying to up your instagram game or add some flair to your website, this is pretty powerful.
15. Browser Extensions
Full page screen capture
Want to download an image of a whole website at once, instead of taking multiple screenshots of whatever can fit on your screen? Use this.
ColorZilla
Want to know the color of something you’ve seen online? Install this extension, launch it and hover over any element to identify the color.
WhatFont
Looking at a website, see a font you like and want to know what it is? Install this extension, launch it and simply click on the text of any website to reveal the font and all it’s properties — like weight, size etc.
Page Ruler
Want to know the size of an element? Install this extension, launch it, click on “enable element mode” at the top left and you’ll get the dimensions of any element of a webpage.
Window Resizer
Testing to see how responsive your website is, or looking how other sites work at different screen sizes? This tool allows you to resize your browser window to see how it looks on any device.
An honorable mention — Anchor Links
Somehow Medium doesn’t have a built-in feature to add anchor links. This extension enabled me to quickly create links for the contents section that jump to other sections in this article. Just launch the extension and simply click on a heading in your article and it generates a link you can add to somewhere else in the article.
16. Inspiration
UI Sources
Ever spend time downloading apps to learn how the onboarding works, or how a certain interaction looks like, and then taking a million screenshots to store for later? Well, no more! This site curates most of the UI patterns you could think of in a single searchable library. The best thing is that there are not just screenshots but also loads of video screen recordings so you don’t miss out on all of the important animations and interactions that don’t come through in static visuals.
SaaS Landing Page
A collection of the best landing pages to inspire you. It also covers pricing, about us, features, blog, testimonials, contact us and FAQ pages.
Really Good Emails
If you want inspiration for email templates, this site curates really good emails of all kinds. Want to know what a good onboarding email looks like? What about an email to reactivate a user? Got a new product launching soon? There’s inspiration for that and pretty much any type of email you can think of here.
Dribbble / Behance
The classics. These sites cover everything when it comes to design inspiration. Just don’t always take them too seriously though, as a lot of the design here is just concepts.
Product Hunt 😍
Finally, last but not least, this is the source of many new tools that that have given me super powers as a designer. Thank you Product Hunt and all the makers on there. You’re awesome!
There you have it! I hope that this helps you to move faster, with less stress and more focus.
This is intended to be a living resource, so I’ll keep adding to it whenever a new hacky tool pops up that helps to speed up a part of the design process or enables non-designers to pick it up themselves.
If you have any other tools that you love please share!
