Sketch App and InVision is a perfect web design combo
Sketch App together with InVision really is an unbeatable combo when you want to create renderings for web pages or apps. Together, they make for an extremely fast and smooth work experience while yielding a product that is organized, scalable and (most importantly) presentable to your stakeholders. I will explain why this combo is so good, but in order to do this I must also explain why there is a need for the possibilities that they present.
Sketch App
If you have ever used Sketch App you know that designing with it is great. It is very easy and quick to learn how everything works and you find yourself creating stuff in no time. In Sketch App, everything seems to be geared towards creating design concepts for web pages and apps. The artboards come pre-sized for different devices and you are able to create a sort of library (Symbols) for all your components that you make, such as buttons, inputs and navbars. This makes it easy to create new pages; you just get a new artboard and fill in all the components that you need for that page. Faster than you know it you’ve mapped out your entire app in a way that makes sense.
These features which ensure the ease and flexibility of what is the Sketch App experience is, in my opinion, why Sketch App is the superior software for quickly creating your app and page designs. Although it might not be as detailed as Photoshop or Illustrator, it really doesn’t need to be. What is important when you create designs for an app or web page is that you come up with a concept that is organized and makes sense intuitively. This is built into the core of what Sketch App is about.
When you are creating your designs you must remember that you are essentially explaining an idea or concept with the help of visual cues. Explaining something in words to another person can sometimes be tedious and frustrating. People have a hard time understanding abstract concepts. Hence, we try to peal away layers of abstractions in order to show people what we want to explain.
Have you ever tried to explain to someone the functionality of a new app that you just found and really like? After a some confusion and the person still not realizing how freakin’ cool the new app is, you probably just ended up showing it to them — upon which they probably went: “Oh, I totally get it, this is cool!”
Ultimately, this is what you want to do whenever you’re creating something, and you want that reaction. This is where InVision comes into the picture.
InVision
At this point you’ve already mapped out your app into a bunch of pages in Sketch App. InVision will now let you import your designs straight from Sketch App and animate them in different ways to create the page flow of the app. You get an almost “functioning” prototype of your app that you can swipe and click through. This is HUGE!
Instead of having to send a set of PDF’s to the stakeholder (whether it be a developer, client or just a friend) you can now send them a link to your prototype on the InVision platform and let them check out your work for themselves — without you having to write even one single line of code. All you do is mark what areas should respond to user interactions like swipes or clicks and then tell InVision what event should occur, such as a transition to another page. Its super simple.
To me, this is a total game changer. This allows you to peal away the last layer of abstraction. Although you can’t actually use the app’s functionality you are able to animate all the buttons on your designs and make transitions so that someone can “walk through” the app and understand how everything will work together.
Some might not think that the step between flat PDF’s and a prototype with animated transitions is that great, but in real life it does make a difference. It truly is easier for someone to understand what the project is about and how everything will come together if you allow them to use the product before they accept it. The saying still stands true: “People don’t know what they want until you show it to them.”
Sketch App + InVision
Together, these two platforms amount to the easiest way from abstract idea to comprehensible concept. And the best part about it is that it is easily scalable.
Sketch App allows you to create your designs in the fastest and most streamlined way possible. Whenever you want to expand your project and add new pages to the app you can easily do so using your Symbols library that you’ve build up. Or if you want to hand over the project to someone else, they can easily make sense of your designs and continue to evolve the content by adding their own Symbols and pages.
InVision allows you to “complete the job” and present to the stakeholders a prototype that feels and looks pretty much like the finished product. You will barely have to write any text explaining each page or functionality since it will be easier for the person to just experience it themselves through the prototype. And frankly, if the person can’t understand the concept without any explanatory text while simply using the prototype then chances are that your design really doesn’t make sense and you probably should get back to the drawing board.
The benefits brought by this combo may be many, but he most prominent one that comes to mind is that it will save a lot of time. It is no news that developers aren’t cheap to hire — so instead of leaving it up to them to interpret your design renderings it is both faster and cheaper to show them what they should build. This way you will avoid having to reiterate over and over on a design, wasting everyone's time and money.
For reasons already mentioned it is also great to be able to send a stakeholder a link to your prototype and know that there is almost no chance of them misinterpreting your design renderings. You are able to instill a feeling of completeness in such an early stage of a project, and that helps keep it on track and convey what should be the next step in the process.
Lastly I would like to tell anyone who hasn’t at least looked into this combo to do so. Whether you are seasoned or a beginner, you wont regret it!
Would be fun to hear other peoples experiences with Sketch App and InVision, leave a response!
