I attended my second hackathon this weekend, and my teammates were noticing all my keystroke magic tricks
that help me quickly prototype professional-looking app mockups with remarkable speed. A teammate asked me what my secrets are, and so I decided to share it as a post.
My keystroke magic is all built around AlfredApp, the smart app launcher for Mac. The core tool is free, but for $25 you get the PowerPack, allowing you to load workflows
that streamline common tasks on your Mac. Workflows are usually community-sourced solutions to common computing tasks, and can add speedy superpowers to your design, development, and productivity habits.
You’ll need to install Alfred and purchase the PowerPack on your Mac to follow these instructions.
FontAwesome Icons in your Prototyping App
Nothing makes a design look realistic like using the same kind of high quality app icons we’re all accustomed to seeing in real professional apps. FontAwesome icons are a complete set of professional icon fonts that are used all over the web and in smartphone apps to communicate standard app features. I have a trick that lets me insert these icons into my design mockups as fast as I can think.
First, you’ll need to download the FontAwesome font from GitHub and install it on your Mac in the .otf font format.
Second, download the FontAwesome Alfred Workflow in .alfredworkflow format, double click it to install.
Once it’s installed, you can invoke Alfred using its default keystroke, and type fa to start browsing between all of the available FontAwesome icons. You can keep typing the name of the individual icon (CheatSheet) to narrow the search possibilities.
Once you’ve found the icon you want, hold down the Control key and press Enter. This will paste a character reference
into your prototyping app (I use Apple Keynote and Sketch App). From there, just change the font of the character reference to FontAwesome
and your icon will appear. Then you can change the color and size like any other font.
It feels like a lot of steps to get it set up, but once you do it a few times you’ll get very fast at finding the icons you need.
FlatUIColors in Alfred
When I was rapid prototyping the app at the hackathon, we realized we needed a limited set of complementary colors that we could quickly add to the project and be sure they’d look good together.
I’ve been a fan of FlatUIColors.com for some time as a quick way to get a nice palette of vibrant, complementary colors that work well together.
The FlatUIColors for Alfred workflow takes this simple, powerful tool and adds it to your Alfred Quickbar.
Just type flat and you’ll instantly be presented with the FlatUIColors palette, and selecting one will automatically paste the CSS hex color code into your frontmost app.
I use an app called HexColor for Mac to catch those hex codes and translate them into the Mac’s native color picker. Then I can just drag and drop the color to an element. (It’s also very handy for picking up colors and getting back hex codes to include in your CSS code.)
When you’re racing against the clock in a hackathon, it’s so nice to have a simple choice of colors that you know will look good together. This is the fastest way I know to do that.
DuckDuckGo !Bang Searches from Alfred
DuckDuckGo is an amazing search tool that (among other things) lets you search hundreds of other sites anonymously by using quick keystrokes called !Bang Commands.
I made DuckDuckGo my default web search in Alfred, so I can invoke any !Bang command right as I start typing, allowing me to search any website without actually having to navigate there first. I know, first world problems,right? But this saves valuable seconds as you’re getting images to use in your app mockup.
I start my search query with !gi and then type what I want an image of. This tells DuckDuckGo to search Google Images search and return my search results in Google Images. BANG! Then I type !unsplash and get results from the UnSplash open-licensed image library. I can quickly search a variety of image sites like !flickr or !bi(Bing Images) all from the Alfred Quickbar BANG BANG BANG!
There are hundreds of useful bang commands that, even if you only memorize the 5-10 sites you search the most (Wikipedia, eBay, Amazon, Google, GitHub, Lifehacker, etc.) you will find that your search results are that much closer at hand when you’re quickly prototyping a design. When in doubt, try writing out the whole site name like !wikipedia, or assume that the most popular sites have the most obvious shortcuts !w for Wikipedia, !a for Amazon, !gh for GitHub, etc.
What Tricks Do You Use?
So those are some of the ways I have learned to quickly mockup app designs from idea to prototype. There are way more creative ways to use Alfred to streamline your development workflows, but these are the ones I use most when I’m prototyping against the clock. What tricks do you use? Please share in the comments….
Liked this post? Follow this blog to get more.
