BlogAdSlim

Introduction

These days we have a so many options for creating app designs and prototyping them. I am always looking for different ways to improve my workflow and productivity. This is a little experiment/comparison of 2 workflows.

It will be split over 2 posts.

  1. Sketch App and InVision.
  2. Adobe Experience Design. 

Experience Design is still in beta at the moment but they have been making awesome progress and rapidly updating the app with new features all the time. So things may change in the future.

Quick Brief // Challenge

Design up a quick UI for a cafe finding app and prototype it using each work flow. I will spend around 1.5 hours on each, although I will account for a little bit of extra learning time with Adobe XD because I haven’t had as much experience with it.

I’ll design each from scratch based on my sketch below. They will probably be different because, well, why not.

Here’s a totally awesome sketch of what I am going to thinking.

quicksketch

Just for the record, I didn’t any time working out if this is a good design or not.  Just a 5 second sketch for the purpose of this comparison.

Sketch app + Invision

Sketch with InVision is currently my preferred method for creating designs and quick prototypes. This is what I use in my day to day designing.

Sketch is a flat fee of about $100.

InVision gives you a free account which only allows for 1 prototype at a time. It’s $15 a month after that for the basic package (3 prototypes).

Sketch App (1 hour)

Get Sketch app.

Sketch is built with app/web design in mind. It does a great job of the 80/20 rule. 20% of the tools you use 80% of the time. Thats not to say it’s missing things. It’s just better focused for ui design. Plus you can get plugins that will do just about anything else you could ever need.

Here is what I came up with in the hour that I set for design.

Screen Shot 2016-12-03 at 17.01.13.png

The smart guides in Sketch are just spectacular. Always just seem to know what you are trying to achieve. And the ability to hold down Alt/Option to see how far it is from any other object is great.

Symbols allow you to create an object and then reuse the object throughout the app, changing the text fields and images for each item as you go. This is awesome when you want to change the layout of a list item you have used 25 times in your designs.

Screen Shot 2016-12-03 at 17.42.12.png

Exporting is awesome, especially when needing to export assets at multiple sizes or different formats.

Screen Shot 2016-12-03 at 17.43.54.png

Craft Manager by InVision  (Works for both sketch and Photoshop)

This is an add-on for Sketch or Photoshop that allows you to sync directly with InVision. It comes with a few other cool tools as well.

I love the sync tool for InVision. No more exporting and dragging new images into the browser. Just click a button and jump back to InVision to see the updates reflected.

Screen Shot 2016-12-03 at 17.47.27.png

There are some other cool tools in Craft as well. The ability to generate random dummy data is super handy. This connects directly to UpSplash/local folder/cloud so you don’t have to go hunting for random images. You can also generate text like names, address, country, city and even custom lists. There are also options for web and JSON but I haven’t had a change to get into these yet.

Screen Shot 2016-12-03 at 16.52.58.png

Duplicate is on the right track but it feels a little clumsy. It essentially will duplicate an object and vertically or horizontally space them for you. If you duplicate and then make a mistake, it seems easier to just remove the duplicates and start again.

I feel it’s easier to just use the built in tools in Sketch. Copy something 5 times, move one of the items to the end and then hit space evenly. Done.

Live prototype (InVision) 20 minutes with some tweaking of designs to work better. 

After I synced my designs into InVision, I quickly threw in a few hot spots. I saw a few issues with my current designs. Missing back buttons for example (oops). So, I quickly jumped back into Sketch, added the buttons and synced again. Fixed! Cool.

Screen Shot 2016-12-03 at 17.06.58.png

One feature I really like in InVision is the header/footer matching.
If you set them to the same height on pages that are connected, they will maintain the header or footer position and just move the content section. This is handy for when you have a tabbed navigation on your page. The tabs are static but the content animates. You can see this in action when going between the results and burger view, the top heading fades to new image but content slides, although it’s not very refined.

Inspection mode

Another great new feature from InVision is Inspection Mode. It digs apart your designs and generates colour palettes, fonts, measurements and even CSS code.

screen-shot-2016-12-03-at-17-24-12

Sharing/Embedding

InVision has a few different ways to get your prototypes into everyones hands. Share via Email or SMS. If a user is officially invited to a project they are able to leave comments on your project.

Using a simple link to the prototype does not offer these extra options.

Live share sets up an actual live chat room with your prototype at the centre to allow for live collaboration which is pretty cool.

The other option being to embed the code directly into your site or download the prototype directly.

You can check out the final prototype here.

//invis.io/Z69L5R0BX

Conclusion

Sketch is crazy cheap ($100!!!). It has a fantastic work environment for outputting quality designs, super fast. It’s export tools are fantastic when developing apps. It really has been designed with UI design in mind.

InVision is a little bit more expensive ($15 a month for basic) but still pretty reasonable. It does have a free option but I get the feeling you will probably need more than 1 prototype sooner or later.

Sketch and InVision work pretty seamlessly together with Craft manage by InVision Labs hooked up.

I haven’t found to many issues to complain about.

Next!

Next post I will walk though a similar process using Adobes new Experience Design software. Check back soon!

P.S. Quick shout out to icons8.com, who make seriously awesome icons, which I used in the designs.

 

BLogAdd

 

Advertisements