You can’t have a designer on every job, and sometimes as a developer you’ll be tasked with thinking about the layout and design. We’ve talked about development tools for designers, now lets look at a set of tools my developer friends use frequently to help when they’re tasked with design decisions.
1. FontBook(Mac) or Suitcase
If you’re on a Mac, there’s a decent built in font manager that can help visualize and manage fonts. You can test and compare all your computer’s typefaces. A font family typically has variations, or typefaces, that make up weight, style, condensed vs wide, etc. This can make for a lot of choices when picking a font or even a weight. Visualizing, comparing, and seeing the fonts with your own sample text is a great way of learning about and choosing a font. If you’re looking for a more robust option that works on mac and windows, and can even be used with teams for font management, Suitcase is worth the money.
2. Google Fonts
Sticking with Fonts, Google has a great resource for web safe fonts. The hidden gem of Google Fonts is the ‘pop out’ button, which will let you see the font character set, stats, and a tab with pairings. The pairings tab will help guide decisions when choosing a header font and a body font that work well together. Micah and I discuss Google Fonts in more depth on our Design Vs Dev podcast.
3. Balsamiq
No matter how many times you tell a client this is only a comp or a wireframe, they take it as the final design. To help avoid this, when going back and forth on a wireframe, you most likely don’t want to show them a sketched view (paper and pencil is still my go to start though) or a close to final design. A quick prototyping tool that is obviously a concept to be edited is the best method of conveying your early ideas to a client. Balsamiq mockups is a great, easy to use, and fast online resource (now with a desktop app as well), to get you moving quickly. Simply drag, drop, and you can start visualizing your app or website in seconds.
4. ThimbleCSS – or any framework
Foundation and Bootstrap are great tools, especially for developers. They have built in visual styles and guides. I prefer a light-weight modern framework using flexbox and has zero bloat. The Agile League uses our own ThimbleCSS, coming in under 15kb, it has a complete flexbox framework, cards, buttons, and is open so you don’t have to worry about conflicting js and css. Often times, due to the proliferation of frameworks, I skip the wireframe step and prototype in browser.
5. Pictonic
Every website needs a good set of ui/ux elements, but choosing icon sets can be tricky. A good custom icon set can be expensive and time consuming to produce. If you’re looking for a massive set of icons, with multiple options and styles to match your project, Pictonic is a good choice. Much like Typkit and other services, you can create, update and push to your website through an online manager. This will save you time (and money!) by eliminating the need to keep searching for that perfect ui element.
6. SplitShire – and other free image sources
The anti-stock photo movement is great. You can now find a wide range of great quality photos for free. They’re perfect when looking for backgrounds, featured images, or just inspiration. A few of my favorites are:
Pro tip, always site your sources. I try to make it a habit to have a discrete source modal prompt in the footer that lists a page’s photo author, fonts used, and other free resources.
7. Dribbble
Inspiration, feedback, and more. A visual twitter for designers, this site has endless potential to inspire. If you’re stuck on a design, search their robust tag system or browse by color for inspiration. Pro tip: Check out the ‘Free’ tag for free downloadable resources.
Honorable Mentions:
Most of these tools are free or inexpensive to help you get started with design. Some other great Adobe alternatives that I love for more robust work are:
Pixelmator – a great PS alternative.
Sketch – A great tool for layout, design, and prototyping. This app is on the rise in the design community and for good reason. The Agile League has fully shifted to Sketch for all projects.
Affinity Designer & Photo – Another good set of Adobe alternatives. Great news too, they’re working on a Windows port! No more mac-centric only great alternatives!
