Published on | Prototyping: From UX to Front End — Medium Tyler Burgett

The companion posts to the 360iDev talk.

(Note: There was way more I wanted to cover, but I was not able to cram it all in to my talk. Here are some more details and links to resources I mentioned.)

When I was a kid, in addition to his duties as a pastor, my dad installed carpet. I would go with him to play assistant, and it was my job to learn what came next and to keep him in tools. As with any trade there are a lot of specialized tools for all sorts of tasks: stretching the carpet, seaming it together, and tucking it in.

Clockwise from top left: knee kicker, stair tool, seaming iron, seam trimming shears.

There are quite a few tools that do the exact same thing: they cut the rug. You might think that all you need is a really sharp knife, but it is much easier to make a long straight cut along a wall or under a set of cabinets if you have a wall trimmer. To get a clean edge so you can seam up the rug you need a rower or a top cutter, and which one you use will depend on the type of carpet you are cutting.

Clockwise from top left: carpet knife, wall trimmer, rower, top cutter.

Since sketch came along, there is an increasing number of design and prototyping tools hitting the market, many of which serve the same purpose: designing apps (and websites too). Just like that box of carpet tools, there are different situations where one particular tool is more suited to the job at hand. My workflow was drastically improved by Sketch, but what new tricks do these newcomers bring to the table? What further improvements can be made?

Figma, Keynote, Sketch, Invision, and Framer

Figma, Keynote, Sketch, InVision and Framer all offer some interesting features. I want to compare them in a few different ways: what do they cost, do they power up or replace Sketch, ease of use and notable features, and community.

Taking a look at cost. Without making the call to inquire about enterprise pricing, here is how it breaks down for a single user over one year:

After 1 year, Sketch has a $69 annual fee to continue receiving updates. In this chart, the InVision on the far right can create unlimited prototypes.

Sketch and InVision are usually paired together, and at roughly half the cost Framer and Figma come with some interesting opinions about how we should be designing.

To compare the features of these tools I designed the same app in all of them and see how they differ. But what to build? I have a question for you. What is better than one recipe for octopus? Eight recipes for Octopus! Your friend just sold his last app, and now has the chance to build something he has always wanted to: an app with eight ways to make a Chinese recipe octopus.

Jian Yang made bank and will get to build his dream.

The two of you sit down, and you say you are in, with a few conditions. It is popular on food blogs to do one main ingredient several ways, so we can increase the audience for the app by having additional recipes for other main ingredients as well. Also as a revenue stream, we should have the option to ship the ingredients to the user.

Now this might seem like a silly example, but when you look at what apps are made of: bars, views, and controls, it checks all of those boxes.

To flesh out this app, it turns out we need several screens:
• a list of main ingredients
• a list of recipes for the selected main ingredient
• the recipe itself
• Apple Pay action sheet
• favorites
• a list of orders

It is always best to have real data to work with, so I did some research on several octopus recipes, and found some icons and images I could use to plug into my design.

After taking a look at the iOS 11 preview and watching some of the WWDC videos, I sketched out a few screens in a notebook to get an idea of how I wanted to layout the content given the updates to the iOS design language(10:06). Trying to keep the 8 theme going, I started to sketch out an octopus app icon that had the silhouette of a number 8 on my whiteboard. In the end I found a much cuter octopus icon by LSE Designs on the Noun Project and decided to go with that. Over the course of the next few posts, we will take a look at how Framer, Figma, Keynote and Sketch stack up when it comes to building out this design, and how your team could collaborate or share your work with customers with InVision.

Other posts in this series

Intro — you are here
Sketch
InVision
Figma
Keynote
Framer
Which tool(s) should I use?

Note: I have paid for these tools with my own money (or used the trial version), and I was not put up to selecting them by any of the companies that make them.

The right 🛠s for the job was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

The right s for the job

Cool stuff, every week

More Articles