There is still the debate running through the design, and development community of “Have we hit a saturation point? When is enough?”. I personally think there is no problem with having all this choice. Do we complain about another Puzzle Based game being added to the App Store? Not really, and at my last count there were 15,489 in that genre (I made that figure up, but I know there’s a lot. Double points to anyone who has the specific figure).

Just choose one that eases into your workflow, and feels the most comfortable fit for the project at hand. Some folks (myself being one of them) have a preference for desktop based tools, others side more with a cloud-based platform (which are gaining in popularity).

I will be covering just a handful of prototyping tools that I use on a regular basis, and have spent a great deal of time with, as well as those that I’ve at least given a good run-out when looking for that suitable companion tool for Sketch.

Flinto

Flinto for Mac allows you to create small interactions, and animations, all the way through to building comprehensive flows for multi-screen apps. It follows a similar aesthetic to Sketch, and even offers up similar tools to what you can find in the aforementioned tool. Heck it even has some of the same keyboard shortcuts. It’s as though they were cast from the same mould, and that’s always a bonus.

It’s intuitive for beginners, and a breeze to use when you’ve become accustomed to it, with menus, tools, and options kept to a minimum. Enough to enable you to create impressive prototypes, and avoid venturing into the world of ‘feature-overload’ which becomes an unwelcome distraction.

The key feature with Flinto is the Transition Designer. If you’re the kind of designer who has an aversion to timelines, and programming, the Transition Designer will bring a very big smile to your face. It’s powerful beast, and the precise control you have over each layer enables you to create some very complex transitions, which are then reusable throughout your project. Interested? Well, in a later chapter I’ll be showing you how to put this tool to the test.

Principle

Principle shares many similarities to Flinto. The first, and most obvious of those is the Sketch aesthetic that it mirrors. Even more so than Flinto. That’s always a plus in my book, and just enables the transition between Sketch, and a tool like this a little less daunting.

Principle is one of a few prototyping tools that have focused more on the ‘timeline’ route of creating transitions, and interactions between your Sketch screens. Some folks enjoy that method of working, others prefer to use a more visual approach with something like the Transition Designer in Flinto, or the Auto-Code approach inside of Framer, either way, out of the ‘timeline’ focused tools I’ve tested, Principle makes it the most intuitive.

The tool allows you to easily create flows for multi-screen apps, or just focus on micro-interactions, and it is very competent at both. It lacks a little polish compared to some over the other tools in this list, but it’s a much newer member to the prototyping family, and these things take time.

Framer

Framer is a little different from the tools that came before it. The key reason being that you’re going to have to get your coding hat on (to a point) to achieve results inside of it. But even if your role is solely as a designer, don’t go running for the hills right away, as Framer is an approachable prototyping tool even for the uninitiated.

With Framer, designers can create, and manipulate objects with ease, while still retaining the power and flexibility of what hand-coding can bring you. It truly excels is in its ability to allow you to create the most detailed of interactions for designs that you’ve created in Sketch. The depth of the interactions you create inside of Framer are only limited by what you can imagine, and puts it a few rungs up the ladder compared to prototyping tools that are more linear in their nature. And with the inclusion of the recent ‘Auto-Code’ feature, the entry level to Framer has been lowered considerably.

The thing I love about Framer is that it can actually help teach designers how to code, or at least give a much better insight on how your manipulations affect the code, and vice-versa. This I feel, allows a designer to have a much stronger affinity to their work, when they can control their project to a much later stage in the development process.

Now they have the Framer for iOS app available, the workflow between iterating, and testing has just become a whole lot more enjoyable.

Marvel

Marvel was one tool that I skirted around the fringes of for quite some time. I had heard about them many times via the usual channels, and had viewed their site, and promo video countless times (there site is just so gorgeous, I couldn’t help myself).

The thing that drew me to Marvel initially, was not a client project, not working alongside a developer to bring my designs to fruition. No, it was working on a tutorial series, where I was looking for something a little more lightweight, and beginner friendly to squeeze into my short tutorial series, and Marvel was there to greet me with open arms.

It’s not the most ‘feature-rich’ of the tools out there, but what it does, it does very well, and probably one of the easiest tools in this list to just pick up and run with from the off. Like Atomic (which I touch on below), you also have the ability to create screens directly in Marvel, with it’s simple, but intuitive editor called Canvas. Is this feature of Marvel a Sketch contender? No it’s not, but having the option there can prove extremely useful if you want to iterate even faster.

Proto.io

Unlike the prototyping apps I mentioned earlier, Proto.io is completely browser-based, which is not to everyone’s liking. I’m more of a Desktop based application kind of guy, but that’s not to say that I didn’t find Proto.io to be robust for being a ‘browser-based’ solution. If you’ve a solid, speedy internet connection this could be very much the app that floats your prototyping boat.

It’s a very powerful tool, and probably the most feature-rich tool in this list, but it can also seem a little overwhelming at first compared to those other tools.

The UI is not the prettiest thing in the world (although this has been improved in Version 6), and a little on the cluttered side, which I feel has the potential to distract when working on a project. Keep it stripped back. Leave the extraneous features at home. Let people focus on their designs, and the transitions, or interactions happening in the editor.

Atomic

Atomic is another prototyping application that is purely browser-based. At this current time, Sketch importing is not the most streamlined of features available, but that is changing with a dedicated Sketch plugin coming to an update near you very soon. It has arrived, and it rocks!

Of the ‘Cloud-Based’ tools I’ve had the pleasure of using, Atomic is the most polished out of the bunch, and feels like a ‘pro’ tool from the get-go. From the ability to not just prototype, but design your application in Atomic through to something a simple as the History slider, which allows you to scrub back through iterations of a project with ease (think Undo on steroids).

The UI is very slick, and a pleasure to navigate around. Think Sketch in ‘dark mode’! Which as I’ve mentioned before always makes the transition from design, to prototyping feel much more fluid.

The collaborative aspect of Atomic is very strong, and allows you, and the rest of your team to seamlessly work on the same project, and share design files with ease. This is an invaluable feature for when you’re working on prototypes for your app, and Atomic absolutely nails it.

Finished!

As well as the tools I’ve touched on in this article, there’s many more out there such as InVision (which I really need to spend more time with), Pixate, and UXPin, and that’s not forgetting Origami Studio by the team at Facebook, which is putting in an appearance later in the year, as well as the Craft Prototype plugin from those awesome folks at InVisionLabs.

Find something that fits your workflow, and run with it. You can switch between them, depending on the project at hand. They all have their pros, and cons, and one size never fits all, remember that.

Looking for the fastest, most practical way to learn Sketch?

My new guide ‘Sketch App Essentials’ is the perfect resource to help you realise the full potential of this amazing application.

Use the Offer code MEDIUMESSENTIALS25 to receive 25% OFF any of the Packages.

Grab the guide here.

The post Why Sketch is More Powerful with a Prototyping Buddy appeared first on Speckyboy Design Magazine.

Quick Note: We will be keeping things relatively simple. Not everything is going to be clickable in this tutorial. But, honestly, once you’ve had a play around with Flinto and discovered how user-friendly it is, you’ll be ready to make the app interactive in every spot imaginable.

Installing & Setting up Flinto

If you haven’t already, go ahead and grab the Free Trial of Flinto (for Mac) and don’t forget to download the Sketch plugin too.

Install Flinto, and the Sketch plugin, and then we’ll be ready to create some proto-goodness.

Firing up Flinto

After opening up Flinto, you’ll be presented with the splash screen, where you can go ahead and click on New Document. This, in turn opens up the New Document window (Yes, I know, the obvious has well, and truly been stated).

From there, set the Device Type to iPhone 6, and click Create.

Once you have your New Screen displayed, you can use the same Keyboard Shortcuts as Sketch…

• Zoom In Cmd + (+)
• Zoom Out Cmd + (-)

…to easily zoom in, and out on your screen until it’s displayed suitably for your setup.

Quick Note: Again, the same as Sketch, you can move around the canvas by holding Space, and clicking and dragging.

We of course, won’t be needing the screen that has just been created, as we’re importing the screens from Sketch. So delete that screen either by pressing Delete, or right-clicking on the screen, and choosing Delete.

Remember to quickly save the new document, and give it a name, for the Sketch plugin to reference very shortly.

Jump back to Sketch, and with all your Artboards (screens) selected, choose Plugins > Send to Flinto from the Menu bar, or use the Keyboard Shortcut Shift + Ctrl + Cmd + F.

From the popup window, the plugin knows to scale the artwork up (to 2x) for the iPhone 6 Retina screen, so you can leave all the settings as they are, and click Send.

In the next window, check that the Flinto file you saved earlier is selected, and click Merge.

Back in Flinto, you will see all your screens have been imported into the application. From the Layers Panel you will see that all your Layers/Groups have been imported, just as they were in Sketch, and that any Vectors have been converted to Bitmaps to increase the speed of your prototypes. Awesome!

Quick Note: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly.

You will find there is a lot of similar actions, and keyboard shortcuts to those that you use in Sketch. Flinto does make the transition between the two applications feel very familiar, which I love!

Welcome Screen

With the Welcome screen being, of course, our Home screen, we need to let Flinto know that. So with that screen selected, select the Home Screen option from Screen Properties in the Inspector Panel.

You will now see a little Home icon appear on both your screen, and in the Layers Panel.

Now, we’re going to add a timed transition from the Welcome screen, to the Viewfinder screen. So select Timer Link in the Inspector, and enter the following settings (or whatever you choose):

• Timeout: 1000ms
• Target: Viewfinder
• Transition: Fade In

Now would be a good time to fire up the Preview window. I know there’s not much to see just yet, but from here on in you have the ability to view your changes as they happen. Click on the Preview icon in the Toolbar, or use the simple shortcut Cmd + P.

Quick Note: If you haven’t already, you can also grab the Flinto App from the iOS App Store.

Viewfinder Screen

From the Viewfinder screen, we’re going to do a simple transition (via the folder icon) to our Image Gallery screen. We’ll be sticking with the default transitions, but please feel free to go wild, and click on New Transition to add one of your own if you so desire.

So, select the folder icon, and click F to create a new link. Drag out the orange thread across to the Image Gallery screen, and click to bring up the Gesture/Transition window.

From here choose the Gesture that you require. Tap would be the sensible option for this type of link. Then choose a Transition. I’m going with Slide Up. Then click Done. Transition all set. Test it out in Preview, or on your iOS device!

Decide a certain transition is not really rocking your kasbah? No problem, just jump over to the Inspector Panel, and edit the transition from there.

Image Gallery Screen

So, firstly, we have the Navigation Bar at the top of the screen with the Back button that we created in Sketch, and we want to easily navigate back to our Viewfinder screen. Let me show you how to do that:

Firstly click D to draw out a Link Hotspot around the back button, and then simply drag the Link Thread back across to the Viewfinder screen, and choose a Gesture, and Transition.

Quick Note: In this instance we wanted the back button to go back to the Viewfinder screen, and that screen only. Later in this tutorial I’ll show you how to set a back link that will take into account that you may have entered a certain screen from different access points.

Now remember, in the first part of the tutorial, when I mentioned about our image thumbnails sitting outside of our Artboard? You do, cool. This was so we could test out the Scroll Group functionality of Flinto, which is pretty awesome! Let’s set that up on this screen:

So firstly select the image thumbnails layer (which you will see has been converted into a simple Bitmap layer for us to use inside of Flinto).

You will see that once it has been selected, that it will show the overlap outside of the Artboard, making it easy for us to reference in the next step.

Choose Scroll Group from the Toolbar, or use the shortcut Alt + Cmd + G to turn this layer into a scrollable area. If you look at the Layers Panel, you will see our thumbnails layer is now inside of a scroll group folder.

Go ahead, and test this out in Preview, or on your device, and you will see the thumbnails scroll on the screen, and up underneath the navigation bar. Nice!

We’ll keep our Scroll Group with the default settings, but please feel free to have a play around with the many options available to you in the Group Options section in the Inspector Panel.

For our first thumbnail, we want this to link through to our next screen (Choose Filter), so again, draw a link hotspot (D) around the thumbnail and then set a link to the next screen.

The first thing you may notice about Choose Filter screen is that we don’t have a back button!! The horror! But how do we get back to the previous screen if we need to?

Let me show you:

Click (D) to draw a link hotspot, and have it the full height of the screen, and about 220 in width, and place this at the left side of the screen. Then simply link this back to the previous screen, and for the Gesture choose a Right Swipe, and for the Transition choose Pop Right. Now you can easily navigate back to the previous screen with a Swipe Gesture. Problem solved!

Go ahead and do this for the Filter Applied screen too.

Transition Designer

One of the best features (amongst many others), is the Transition Designer. Up until now I’ve just shown you the default Transitions that are available. But once you decide on trying a transition of your own, that is where the Transition Designer comes into play.

Hopefully you can see from our Choose Filter, and Filter Applied screens we want to have a transition where one of the filter options is chosen at the bottom of the screen, and in turn the large image is changed to reflect this.

We’ll keep it pretty simple. The far right image thumbnail is clicked on to change the large image to one with the gradient applied (as shown on the Filter Applied screen), and then to switch back to the default image when the thumbnail on the far left is clicked. Let’s get this type of interaction up, and running with the Transition Designer.

On the Choose Filter screen draw out a link hotspot (D) on the last thumbnail, and connect it to the Filter Applied screen. Then click on New Transition…

…and, boom! We’re into the Transition Designer.

You will see the 2 screens that we want to transition between, and you will see these marked accordingly in the Layers Panel (Start Screen, and End Screen)

To achieve the effect that we require, go ahead and drag the End Screen (Filter Applied) on top of the Start Screen (Choose Filter).

Quick Note: You can select the whole screen by clicking on the red border around the screen, and then dragging it on top of the other screen. Take note of the red guidelines to align it perfectly.

Of course, you may now be thinking ‘hang on, I don’t want to show the filter applied at the start of the transition‘. Of course you don’t. So select the gradient layer (on the End Screen) in the Layers Panel:

And then from the Inspector Panel, reduce the Opacity of that layer down to 0%. And that’s it.

You can click the Play controls at the top of the Canvas area to see the transition in action, then, once you’re happy click on Save & Exit to go back to the main window.

We want to have the ability to also go back to the image with no gradient applied. So similar to before, draw out a link hotspot (D) on the far left thumbnail of the Filter Applied screen, linking back to the Choose Filter screen, and choose New Transition from the popup window.

Back in the Transition Designer, drag the Start Screen (Filter Applied) on top of the End Screen (Choose Filter). We want to be still showing the gradient at the start of our transition, so select the background image layer of the End Screen (Choose Filter) and reduce the Opacity down to 0%.

Click Save & Exit, and why not give it a quick test with Preview Cmd + P.

Now in this part of the tutorial, I’ve only skimmed the surface of what the Transition Designer can do. It’s a powerful tool, and bags of fun to play around with, so for the last screen in this tutorial we’ll push it a little further. ‘Push it real good’ as Salt-N-Pepa once sang!

Information Screen

With this screen we have 2 points of access (via the shutter link), one from the Choose Filter screen, and the Filter Applied screen.

Let’s deal with the Choose Filter screen first.

Draw a hotspot link (D) on the Choose Filter screen, and choose New Transition, which will bring you back into the Transition Designer.

From the following image, you can see that on the End Screen (Information) I have pulled out the logo, and buttons from the screen in a staggered manner, so when this Transition is used those elements will slide in one at a time. That’s the great thing about Flinto. You can try so many different transitions and Flinto will fill in the animation for you (all without the aid of a timeline).

I also tweaked the Timing settings for those layers (logo, and buttons). Changed it to Classic, and increased the Duration to 700ms.

Give your Transition a name. I called this one Stagger Slide. And then Save & Exit.

You can now go ahead and create another Link Hotspot (D) on the Filter Applied screen, and choose the Transition you just created from the available options.

To finish up, we want the back link on the Information screen to take into account that we have entered this screen from different access points. So draw out a Link Hotspot (D), and drag the Link Thread to the orange arrow which appears at the top of the Information screen. This will create a Back Link which is not set to a specific screen.

And I think we’re all done here!

I’ve only touched on a small portion of what is possible with the Transition Designer, but I’ll leave you to have fun with it, and explore some more.

I hope with this tutorial you can see how Flinto is such a great companion application to Sketch, and one that deserves some attention on your next project.

You may also like to take a look at my previous Sketch tutorials:

• Designing an iOS App in Sketch
• Prototyping with Marvel and Sketch

Looking for the fastest, most practical way to learn Sketch?

Sketch App Essentials is the perfect guide to help you realise the full potential of this amazing application. Take a look here.

Use the offer code MEDIUMESSENTIALS to receive 20% OFF any of the Packages.

The post How to Prototype an iOS App with Sketch and Flinto (Part 2) appeared first on Speckyboy Design Magazine.

Ok. Fire up Sketch! Don’t have a copy to hand? You can download the free trial here.

There are a few things that you may want to grab for this tutorial (if you haven’t already) first:

• Iconjar: I have raved about this app before. It’s perfect for storing, and referencing your icons. A must have, and one that we can put to good use with the icon set below.
• Craft Plugin by InVision LABS: The perfect plugin to enable the use of real-data in your projects, and more. One of the now, essential plugins for using with Sketch.
• Google Fonts: Download Raleway and Open Sans.
• Zeiss (Lite) Icon Set: Feel free to download the icon set.

All cool? Everything installed? Sweet! Let’s get to it!

Designing our Screens in Sketch

In the 1st part of this tutorial we’ll be creating the screens for our application. Nothing too testing. We’ll keep it simple, with 6 screens for a fictional Photo Editor iOS App called ‘Zeiss‘. Carl Zeiss invented the modern day camera lens. He deserves an iOS photo app named after him, don’t you think?

As I mentioned, we’ll be creating just 6 screens (It’s the ‘Lite’ version after all) for various parts of the app:

• Welcome Screen
• Viewfinder
• Image Gallery
• Choose Filter
• Filter Applied
• Information

Let’s make a start on the first of those screens:

Welcome Screen

Create a new Artboard (A), and choose the iPhone 6 option from the Inspector panel on the right.

Draw out a Rectangle (R) to cover the Artboard (375×667), and then from the Craft panel on the right choose the Photos tool.

Select the Unsplash option, and click the Place Photos button.

Quick Note: You can toggle the Craft panel on/off with Cmd + P, and if you want to quickly cycle through (random) Unsplash images use Shift + Ctrl + 3.

Let’s add a gradient overlay to sit over our image. Draw out a Rectangle (R) the same dimensions as the image, and then choose a Gradient Fill from the Inspector panel.

Make the Gradient go from Top Left, to Bottom Right. And add the following colour values:

• Top Left: #348AC7
• Bottom Right: #7474BF

And select Smooth Opacity in the Fills panel.

Quick Note: As we will be using this gradient again on other screens in this tutorial, it would make sense to add it to the Document Gradients in the Fills panel. So do that now. Click on the Gradient in the Inspector Panel, and then click the plus (+) icon in the Document Gradients section to add it.

Now time to drop in our shutter icon. If you haven’t downloaded the icon set yet, you can grab it here.

Open up IconJar, and click the plus (+) icon at the top of the app to add a new set. Give the set a name, and then browse to the (unzipped) folder where the icons are.

You will now see your icon set inside of IconJar, from where you can easily select an icon, and simply drag & drop it into your Sketch project. Boom!

Drag the shutter icon into Sketch, keep it at the same size, but change the colour of the icon to #FFFFFF. Make sure you have the shape layers selected, and not the actual folder.

Add in a couple of Text Layers (T). One for the app title, and the other for the subtitle.

For the title, I used the following settings:

• Typeface: Raleway
• Weight: Bold
• Color: #FFFFFF
• Size: 48
• Alignment: Center

And for the subtitle:

• Typeface: Open Sans
• Weight: Light Italic
• Color: #FFFFFF
• Size: 14
• Alignment: Center

Group the icon, and text layers together (Cmd + G), and then use the Alignment Tools to center this new group on the Artboard.

Nice work. One screen down, five to go!

Viewfinder

Create a new Artboard (A), and again, choose the iPhone 6 option from the Inspector panel on the right.

Like we did with the Welcome screen, draw out a Rectangle (R) to cover the Artboard, and then from the Craft panel on the right choose the Photos tool.

Select the Unsplash option, and click the Place Photos button.

Quick Note: You can pull in any random photo from the Unsplash site, but for the next few screens, and just to keep a little uniformity, you will see I have chosen one of the categories (‘Nature’) this time.

Now onto the Control Bar for our Viewfinder screen.

Draw a Rectangle (R) 375 x 120px and place this at the bottom of the screen. Give it a Fill Color of #303030 and reduce the Opacity to 95%.

Onto the controls:

Firstly, drop in the folder icon from IconJar, and give it the colour #FFFFFF.

Then, for the shutter button, select the Oval tool (O), draw out a circle 58 x 58px, change the Fill Color to#FFFFFF, and remove the border.

Duplicate that shape by holding down Alt, and dragging it to duplicate. Then increase it’s size to 70 x 70px, add a 2px white border, and remove the Fill Color.

Quick Note: Remember to hold the Shift key when drawing out the circle, to keep proportions.

With both layers selected, use Align Horizontally, and Align Vertically to align them correctly to each other.

Then finally, for the small image thumbnail, select the large background image we inserted previously, right-click and choose Copy Style. Then draw out a small Rectangle (R) 60 x 60px with a Radius of 1, and right-click on this layer and choose Paste Style.

Group all 3 elements (folder icon, shutter button, and image thumbnail) together, and then use the Alignment Tools to line everything up correctly.

Image Gallery

Let’s add in a Navigation Bar for our Image Gallery screen.

Draw out a Rectangle (R) 375 x 50px and give it a Fill Color of #303030, and place this at the top of the screen.

Drag in the arrow icon from IconJar, and colour this #FFFFFF.

Insert a Text Layer (T), change the wording to ‘Back‘ and then give it the following settings:

• Typeface: Open Sans
• Weight: Regular
• Color: #FFFFFF
• Size: 12
• Alignment: Left

Align the icon, and text layer together, and then group the two elements. Holding Alt (to show the measure guides) align this new group with the background layer you created before.

As we will be using this element again we’ll convert it to a Symbol. So with our Navigation Bar selected, choose Create Symbol from the Toolbar.

Now to put the Craft plugin back into action! Where, again we will be using the Photos tool (combined with the Unsplash images), and also the Duplicate tool. Good times!

Draw a Rectangle (R) 125 x 125px and place this to the left edge of your screen, and directly under the Navigation Bar.

Then, with the shape layer still selected, choose the Duplicate tool from the Craft panel, and select the Specific Count option.

Check both the Vertical, and Horizontal options, and then for the Vertical Item count, enter 7, and for the Horizontal Item count, enter 3. Leave both Gutters at 0, and then click Duplicate Content.

Then select all those shape layers (there will be 21 in total) from the Layers List, and choose the Photos tool in Craft to propagate each of the layers with images from Unsplash (please bear in mind it may take a little while to fill each layer).

Before we finish up this screen, replace the first thumbnail with the image from the previous screen, just so the flow is not broken.

Now you may be asking ‘But why are two rows of thumbnails sat outside of the screen?’. When we move onto the 2nd part of this tutorial all will be revealed! Mwah, ha ha!! (A bit too much? Less ha, more mwah, yeah?)

Choose Filter

Firstly, draw out a Rectangle (R) to cover the whole screen, and then using right-click, copy/paste style (like I showed you before), paste in the image from the Viewfinder screen.

Now, let’s add in a Navigation Bar for our Choose Filter screen (a little different from the one we created previously, so don’t use that Symbol just yet).

Draw out a Rectangle (R) 375 x 50px and give it a Fill Color of #303030, and place this at the top of the screen.

Then, from IconJar, drag in the shutter, camera, and share icons.

Change their colour to #FFFFFF, and then use the Alignment Tools to space them out correctly, with the shutter, and share icons sat 20px from the Artboard edge. Group the 3 icons together, and then align them correctly against the background you created before.

As you may use this element again, go ahead and convert it to a Symbol. So with the Navigation Bar selected (icons, and background), choose Create Symbol from the Toolbar.

Now onto the Control Bar for our Choose Filter screen.

Draw a Rectangle (R) 375 x 120px, give it a Fill Color of #303030 and place this at the bottom of the screen.

Add a Text Layer (T), change the wording to ‘Choose a Filter:’, and apply the following settings:

• Typeface: Open Sans
• Weight: Light Italic
• Color: #FFFFFF
• Size: 12
• Alignment: Center

Then align this correctly inside of the background layer.

Draw a Rectangle (R) 60 x 60px with a Radius of 1, and then copy/paste the style across from the background image you inserted at the start of this section.

Duplicate this layer 4 times, either holding Alt and then dragging to duplicate, or using the Duplicate option from the Craft panel. I’ll leave that one up to you! (You can even use the Make Grid feature inside of Sketch, but that may be a little overkill for this part of the tutorial).

Then, and following similar steps to above, create four more squares using the Rectangle (R) tool (using the same dimensions, and radius as the image thumbnails), and place these over images 2, 3, 4, and 5.

Remember that Document Gradient that we saved before? Cool. Let’s put this to good use again (but tweak it slightly as we go along).

So, starting with the thumb 5, add the Document Gradient to our new shape layer, and then do the same for thumbs 4, 3, and 2, reducing the opacity by 20% as you move along.

Filter Applied

This section will not take up too much of our time I promise you. Just a quick Duplication of the previous screen, colour tweak, and name change. Yup that simple!

So, on your Canvas area, click on the name of the previous screen, ‘Choose Filter’ (or whatever you named it) to select the whole Artboard, and then holding Alt, click and drag to duplicate it.

Change the name in the Inspector Panel. Something like ‘Filter Applied’ would be tip-top.

Then, create a Rectangle (R) to cover the new Artboard, apply the Document Gradient that we saved previously, and then place the layer correctly using the following keyboard shortcuts:

• Bring Forward Alt + Cmd + ↑
• Send Backward Alt + Cmd + ↓

And then, to finish up, quickly change the wording of the Text Layer to something like ‘Gradient Filter’.

And that’s that screen all sown up!

Information

Onto our final screen.

Like we did with the previous screens, draw out a Rectangle (R) to cover the Artboard, and then from the Craft panel on the right choose the Photos tool.

Select the Unsplash option, and click the Place Photos button.

Draw another Rectangle (R) to place over the image, and apply the Document Gradient that we saved previously.

Then, from the Symbol icon in the Toolbar, choose the Navigation Bar Symbol that you created earlier, and place this at the top of the Artboard.

From the Welcome Screen Artboard, copy, and paste across the logo that you created there, and then align this correctly on the Information Artboard.

Now, let’s add 3 buttons to appear on this screen:

• Take the tour
• Settings
• About

Draw out a Rectangle (R) 180 x 50px with a Radius of 100. Remove the Fill Colour, and give it a Border of 1 with the colour #FFFFFF.

Insert a Text Layer (T), change the wording to ‘Take the tour’, and then apply the following settings to that layer:

• Typeface: Open Sans
• Weight: Light Italic
• Color: #FFFFFF
• Size: 20
• Alignment: Center

Then, with both the shape and text layer selected, use the Alignment tools to align them together.

Quick Note: Remember you can use Alt to check that everything is lining up nicely.

Duplicate this button twice, and change the wording accordingly.

Time for a few Social Icons to put in an appearance, yeah?

From IconJar, drag across the instagram, pinterest, twitter, and facebook icons. Change their colour to #FFFFFF, and align them correctly on the Artboard.

Quick Note: Always remember, when working with elements like this, to put those Alignment Tools to good use!

To finish up this screen, we’ll add in a Feedback bar/button to appear at the very bottom.

Draw out a Rectangle (R) 375 x 45 px with a colour of #303030. Add in a Text Layer (T), change the wording to ‘Send Feedback’, and apply the following settings:

• Typeface: Open Sans
• Weight: Regular
• Color: #FFFFFF
• Size: 12
• Alignment: Center

Then, from the Menu bar, choose Type > Uppercase.

Align the shape, and text layer:

And that’s a wrap for this screen, and the first part of this tutorial.

In the second part of this tutorial, we’ll be exporting our Artboards from Sketch (using their nifty plugin) and into Flinto to breathe a little life into them!

You may also like to take a look at my previous Sketch tutorials:

• Designing an iOS App in Sketch
• Prototyping with Marvel and Sketch

Looking for the fastest, most practical way to learn Sketch?

Sketch App Essentials is the perfect guide to help you realise the full potential of this amazing application. Take a look here.

Use the offer code MEDIUMESSENTIALS to receive 20% OFF any of the Packages.

The post How to Prototype an iOS App with Sketch and Flinto appeared first on Speckyboy Design Magazine.

With this version, the awesome folks behind Framer have married the relationship between design and code perfectly. If you’re a seasoned user and want to stick to the original format of Framer, and hand-code all your interactions? Go for it. If you’re coming from a more design-orientated background and prefer to use the application from a more visual standpoint, do it that way. Want to walk a line between the two? Framer is going to make you very happy indeed.

In this tutorial, I’ll show you how to take a couple of screens from Sketch, and then import them into the latest version of Framer, with some handy little tips along the way. This is a perfect introduction to Framer for all newcomers. Hopefully, you’ll come out the other end of this tutorial with more of a ‘this Framer Tool ain’t that scary no more’ attitude. Well that’s the plan anyway.

First of all, go ahead and download all three of these essential apps and files:

• Sketch.
• Framer.
• Sketch file (you’ll need this for importing into Framer).

All cool? Installed? Sweet! Let’s get to it!

Fire up Sketch, and open up the design ZIP file you just downloaded. You need this file opened so that Framer can locate it when it’s ready to import.

Take a Peek at the Screens in Sketch

If you take a look at the Sketch file, you will see two simple screens. One for the Checkout, and the other for the Confirmation screen that fires once the Buy Now button has been pressed. Simple, but will allow you not to get over-faced if this is your first journey into the magical world of Framer (cue some dramatic music, Hans Zimmer style).

Quick Note: Let me jump in and advise on some good practices to use when creating your Sketch files:

• Group each layer that you want to import into Framer. Otherwise, they will be ignored. Yup, even if you have a single image layer that you would like to animate in Framer, you still need to group it Cmd + G.
• Use CamelCase for your group names (example, thisIsMyGroup). This is consistent with the naming conventions used in CoffeeScript, which is the programming language that powers Framer. Remember that your group names in Sketch will become variables in Framer, so start as you mean to go on.
• If you have a layer group in Sketch that you don’t intend on adding any interaction/animation to in Framer, then you can flatten this simply by adding an asterisk (*) to the end of the group name (example, thisIsMyGroup*).
• Try to give each of your groups a unique name. This just means they will be easier to reference inside of Framer, and also avoids Framer using names such as myGroup, myGroup1, myGroup2, etc. When it’s done properly, it’s import magic. Now, this may not always be practical, and if you’re using Symbols in Sketch there will be times when Framer’s naming conventions will have to come into play, whether you like it not.

Let’s Jump On Over To Framer

Over to Framer now for the really cool stuff.

When you open the application, you’ll be presented with four main areas. The Toolbar across the top (clean, uncluttered, and fat-free) contains just the minimum of buttons, and for this tutorial, we’ll only need to be using a handful of those. Namely:

• Insert – Where all the Auto-Code awesomeness lives!.
• Import – Or, use the shortcut Cmd + I, and Shift + Cmd + I to import again.
• Reload – Or, use the shortcut Cmd + R.

On the left-hand side you have the code editor, where in this short tutorial, we’ll be doing a mixture of hand-coding, and also putting the awesome new feature Auto-Code to good use.

In the centre column you have a section that has two functions. The majority of the time it will display the screens, and layers you have imported from Sketch, and on occasion, when using Auto-Code, it will display the properties for the layer you are working on, so you can tweak to your hearts content.

On the right-hand side is the preview area, where you can see your prototype brought to life inside of a varied assortment of device mocks. If you’re a fan of the iPhone 6s in Rose Gold, go for it!

Quick Note: The design that was created in Sketch was for the iPhone 6s, so you can leave the device as the default for now.

Importing Our Sketch File

Ok, so click on the Import button in the Toolbar, or use the shortcut Cmd + I to bring up the Import window.

You will see that Framer has taken note of the Sketch file we currently have open. Now, just go ahead and select 2x from the select menu, as the Sketch files we are using was created at 1x, then go ahead and click Import.

You’ll now see our two screens imported into Framer, with the layer hierarchy preserved from our Sketch file. Framer will show the first screen (Checkout) with it’s x and y properties set to 0,0. The second screen (Confirmation) is positioned relative to this, out of the view of the device screen.

In the code editor you will see the following:

Order_ConfirmationA = Framer.Importer.load("imported/Order Confirmation@2x")

Change the variable to:

sketch = Framer.Importer.load("imported/Order Confirmation@2x")

This just makes it much easier to reference in your Framer project.

I also like to set a global variable at the top of my Framer files. So I can keep the code a little more manageable, and means less typing (always a good thing, right).

Go ahead and pop this into the Framer file:

{item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch

That references all of the Sketch layers that we’ll be creating some kind of interaction or event for inside of Framer.

Now, instead of typing something like:

sketch.buyNowBar.onClick (event, layer) ->
 sketch.Confirmation.states.switch("fadeIn")

We can simply use:

buyNowBar.onClick (event, layer) ->
 Confirmation.states.switch("fadeIn")

Ok. Let me show you the prototype to demonstrate what we’re wanting to achieve in this tutorial here.

Just a couple of animations on the Checkout screen, and then a few more that are fired on the Confirmation screen after a click event. Boom!

Set Some Defaults

From viewing the example video you will see that there a few elements that are set off-canvas to begin with, and then animated into view, as well as a transition from one screen to the other. So we need to make some adjustments to how those layers are set initially, so we can create the animations you see in the example video.

Let’s go ahead and do that.

Use these (default) layer settings for each of the layers that we’ll be working with:

# Item
item.scale = 0
item.opacity = 0

# Buy Now Bar
buyNowBar.y = 1334
buyNowBar.opacity = 0

# Confirmation Screen
Confirmation.x = 0
Confirmation.opacity = 0

# Background Image
backgroundImage.scale = 1.5
backgroundImage.blur = 20

# Success Badge
successBadge.y = -900
successBadge.opacity = 0

# Message
message.scale = 0
message.opacity = 0

To give you an overview of what’s going on (for example with the item layer), you can see that we’ve assigned the variable name item and then added the dot notation, which is a connector to the property that we want to use, scale, and then assigned the value of 0.

‘But I can’t see my t-shirt image now?’ Yup. And that’s where the awesome new feature of Auto-Code comes into play.

Setting States With Auto-Code

Before we move on, let me mention that as awesome as the new Auto-Code feature is, there is still a bit of hand-coding that is required on occasion. Much less than there was in previous versions of Framer, but still enough to keep you on your toes.

Believe me, even if you just went in all code-blazing, Framer with its Auto-Complete, and insanely detailed documentation is still much easier to pick up than you might think. I’m sure that in future updates, Auto-Code will become even more feature-rich than it is now, so bear that in mind.

Item States

Ok. Let’s set up some states for our item layer, and bring it back into the picture.

From the Insert button in the Toolbar, choose State > item.

You will then see a small snippet of code appear in the editor, and the Properties panel appears in the centre column.

And this is where Auto-Code truly comes into play. Bring it on!

So using the Properties panel, make the following adjustments:

• Opacity: 1.00.
• Scale: 1.00.

And what do you know, we’ve brought our t-shirt back to life. Well it’s appeared on the device screen again, which is handy.

But wait! Once you’ve made the property adjustments, and then click back to the code editor, the layer vanishes into the ether?!

Not a problem. Your layer is still there with the state you just added. Just click on the Edit icon to the left of your code, and boom! You can see the item layer again on the device screen.

Quick Note: Any time you want to manipulate a layer on the device screen, or change its settings via the Properties panel, remember to click on the Edit icon to jump back into edit mode.

You’ll see our state is currently set with the default name stateA. Let’s change that to something more relevant to the animation that we’re creating. Change it to the following:

item.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00

Quick Note: Indentation is used to define the structure of the language used in Framer (which is CoffeeScript), so make sure you indent correctly, or your code won’t work.

And to quickly bring the animation to life on our item (t-shirt) layer, drop in the following code below the states code block:

item.states.next()

And praise be to the prototyping gods, our layer has come to life!

Use Cmd + R to see it in action a few times.

You can use an alternative syntax, like:

item.states.switch("scaleUp")

But next() keeps things a little cleaner here.

So, you should have the following snippet of code in place:

item.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00
 
item.states.next()

Like I mentioned earlier, the majority of that code is created by the Auto-Code capabilities of Framer (which is a massive timesaver from the previous versions), and a small part is where you have to put your coding digits to work.

Now for the next animation on the screen (take a look at the video for reference if you need), which is the buyNowBar layer appearing from the bottom of the screen.

Like we did for the previous layer, click on the Insert button in the Toolbar, and choose State > buyNowBar.

From the Properties panel, enter the following settings:

• Y: 990 (to bring the item back onto the canvas).
• Opacity: 1.00 (to create a nice fade in).

Change the state name to something more relevant, and add in the .next() call.

buyNowBar.states.add
    slideUp:
        y: 990
        opacity: 1.00
 
buyNowBar.states.next()

Let’s give our button a little bounce shall we? We’ll put the animation Curves to good use here, specifically the Spring Curve.

Add the following between the states.add, and states.next() blocks of code:

buyNowBar.states.animationOptions =
    curve: "spring(400, 30, 0)"
    delay: .3

This will set an animation specific to our layer state, and override the Framer global defaults.

You should end up with the following:

buyNowBar.states.add
    slideUp:
        y: 990
        opacity: 1.00
 
buyNowBar.states.animationOptions =
    curve: "spring(400, 30, 0)"
    delay: .3
 
buyNowBar.states.next()

Now we need to transition to the 2nd screen (Confirmation), which is a simple case of Insert > State > Confirmation, and then bringing the Opacity back up to 1.00 in the Properties panel.

Confirmation.states.add
    fadeIn:
        opacity: 1.00

Quick Note: Yes, the background image is blurred, and scaled, but we’ll be seeing to that with the next layer state.

Now, we also need to add in a Click Event, where the user clicks on the Buy Now button, and transitions through to the Confirmation screen.

So navigate to Insert > Event > buyNowBar > Click > Click. And you’ll end up with the following in the code editor:

buyNowBar.onClick (event, layer) ->

The we need to add in the next() call, so it will reference the fadeIn state we created earlier.

buyNowBar.onClick (event, layer) ->
    Confirmation.states.next()

Click on the Buy Now button, and you will see it transition through to the Confirmation screen. Awesome!

Now for the backgroundImage layer. Let’s add in a new state for it shall we: Insert > State > backgroundImage.

From the Properties panel, enter the following settings:

• Scale: 1.00.
• Blur: 0.

And tweak the state name to something more relevant:

backgroundImage.states.add
    zoomBlur:
        scale: 1.00
        blur: 0

Again, we need to add a Click Event for the Buy Now button, that once clicked, will activate this transition on the Confirmation screen.

So navigate to Insert > Event > buyNowBar > Click > Click.

buyNowBar.onClick (event, layer) ->

And then add in the next() call to reference the zoomBlur state we just created:

buyNowBar.onClick (event, layer) ->
    backgroundImage.states.next()

Click away on the Buy Now button to see the transition in action. Super duper!

To finish up the Confirmation screen, we’ll add a couple more events. One for the successBadge layer, and the other for the message layer.

For the successBadge layer, add a state via the Insert menu. And tweak the properties so you have:

successBadge.states.add
    fadeDown:
        y: 0
        opacity: 1.00

Like we did for the buyNowBar layer, we’ll add a Curve animation to give it a little bounce:

successBadge.states.animationOptions =
    curve: "spring(400, 30, 20)"
    delay: .3

And then we’ll assign a Click Event to the Buy Now button again, via Insert > Event > buyNowBar > Click > Click.

buyNowBar.onClick (event, layer) ->
    successBadge.states.next()

Click on the Buy Now button to see the animation in action.

For the message layer, go ahead and follow similar steps to what I’ve shown you above. Just take the the Scale up to 1.00, and the Opacity to 1.00.

Don’t forget to add a Click Event for the Buy Now button.

Quickly, before we wrap things up, and to tidy up the code a little. Take all the Click Events you inserted before, and group them at the bottom of the code editor like so:

buyNowBar.onClick (event, layer) ->
    Confirmation.states.next()
    backgroundImage.states.next()
    successBadge.states.next()
    message.states.next()

If you’re feeling a little lazy today, here is all the code you should have inside of your Framer project (I’ve popped some comments in there too):

# Import file "Order Confirmation" (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load("imported/Order Confirmation@2x")
{item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch
########### Adjust Defaults
# Item
item.scale = 0
item.opacity = 0
# Buy Now Bar
buyNowBar.y = 1334
buyNowBar.opacity = 0
# Confirmation Screen
Confirmation.x = 0
Confirmation.opacity = 0
# Background Image
backgroundImage.scale = 1.5
backgroundImage.blur = 20
# Success Badge
successBadge.y = -900
successBadge.opacity = 0
# Message
message.scale = 0
message.opacity = 0
########### States
# Item
item.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00
 
item.states.next()
# Buy Now Bar
buyNowBar.states.add
    slideUp:
        y: 990
        opacity: 1.00
 
buyNowBar.states.animationOptions =
    curve: "spring(400, 30, 0)"
    delay: .3
 
buyNowBar.states.next()
# Confirmation Screen
Confirmation.states.add
    fadeIn:
        opacity: 1.00
# Background Image
backgroundImage.states.add
    zoomBlur:
        scale: 1.00
        blur: 0
 
# Success Badge
successBadge.states.add
    fadeDown:
        y: 0
        opacity: 1.00
 
successBadge.states.animationOptions =
    curve: "spring(400, 30, 20)"
    delay: .3
# Message
message.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00
########### Events
buyNowBar.onClick (event, layer) ->
    Confirmation.states.next()
    backgroundImage.states.next()
    successBadge.states.next()
    message.states.next()

Finished!

So hopefully this little teaser tutorial to Sketch and Framer has got your prototyping juices flowing a little. Dive on in with your next project. Framer, more than ever, will leave you pleasantly surprised!

Looking for the fastest, most practical way to learn Sketch?

Sketch App Essentials is the perfect guide to help you realise the full potential of this amazing application. Take a look here.

Use the offer code MEDIUMESSENTIALS to receive 20% OFF any of the Packages.

The post Prototyping Just Went to the Next Level With Framer appeared first on Speckyboy Design Magazine.

Oh no. After just a couple of minutes, it put a huge ‘Cheshire Cat’ style grin across my face, and that’s the correct response to the frequently asked question ‘but, is it any good’? Damn right it is.

Even at this stage, everything about Silver feels as though it has been a part of Sketch from the beginning. That was the first thing that struck me on my initial venture into the application, was how native it feels. It has Sketch DNA running through it’s prototyping veins.

“The easier it is to make a prototype, the less attached I am to it, making it that much easier to discard if I realize it isn’t the best approach”.

Which is the great thing about how Sketch and Silver work together. Your design and your prototyping are all walled into one application, enabling you to make those design decisions instantly. No back and forth. No need for time-consuming application switching. You design, you prototype, without leaving the comfortable surroundings of Sketch. Hi-Ho Silver!

Enough Small Talk, Let’s See Silver in Action…

Either connect your iOS device via USB or WiFi, where you can choose to preview changes to your current Artboard (goodbye Sketch Mirror, not that I’ve had anything against Mirror, always seemed to work fine for me, but Silver does render it surplus to requirements now). Or preview any Screen Flows you’ve created (and the reason you installed Silver in the first place).

From playing around with the Beta, I can say the response time with both USB and WiFi was pretty darn quick. With there, of course, being a slightly faster response time via USB. It’s quick, it’s stable, it just works, and works well.

Another great feature is the ability to preview your Flows from the Xcode iOS Simulator. Yes you should always test on a real-world device, but for those times that you don’t have your device to hand (that does sometimes happen, doesn’t it?) it’s a handy little feature to have.

Please Note: There are limitations on what the iOS Simulator can do, for example composing SMS, or Email. But as I mentioned before, you should always be testing on an actual device anyway.

The moment it dawned on me about the power of Silver used in conjunction with Sketch was when I was zipping through screens on my iOS device (via the Silver iOS app). Screens that I had just created in Sketch, and had added Flows to. I had not had to jump to another application. I had quickly made a change to my design inside of Sketch, added a quick transition between screens, and instantly tested that out on my mobile device.

The feeling of making that quick edit in Sketch, and then testing it out on my device felt so good. Wait until you have Silver (the public Beta is coming soon) working inside of Sketch, and the iOS app installed on your device, and I guarantee it will have you high-fiving fellow Sketch users in your office (shades of Anchorman there, I admit. But why not!).

Silver is a real pleasure to use. Easy to become familiar with, and as I touched on before, it feels as though it ahs always been a part of Sketch, which is a win-win in my book. Hey, it’s not even out of Beta yet, and already I’m looking forward to what Aby and Andrey bring to Silver in 2016. This is just the beginning folks.

Quick Note: Silver is currently for prototyping iOS apps. Speaking to Aby and Andrey, they are working on Android and Desktop versions for a future update. So be patient folks!

I’ve only touched on a portion of what is available with Silver (I’ll cover it in greater detail once the public beta is available), but I hope you can get an understanding of how much of a game changer Silver has the potential to be.

If you still haven’t had chance, you can sign up to the Public Beta here.

You might also like to read: Sketch.app & Craft: A Match Made in Real Data Heaven.

The post Ready to Prototype from within Sketch? Then Say Hello to Silver! appeared first on Speckyboy Design Magazine.

But with Craft, having those features wrapped up in a tidy little bundle is something else. Let me give you a quick overview of this excellent tool…

Grab a Copy of Craft

Firstly hop on over to InVision Labs and download a copy of Craft. Install it, and then let the (real-data) party begin. Woohoo!

Back in Sketch you will now see a new panel appear next to the Inspector Panel, and also a new item in the Menu bar.

Quick Note: The dropdown menu does not seem to have the Type option yet, and limited with some other features. Stick to the panel for now. I’m sure those missing options will be featured in an update. No deal breaker!

Shortcuts to Use For Your Photos

• Insert photo from folder Shift + Ctrl + 1
• Insert photo from Dropbox Shift + Ctrl + 2
• Insert (random) photo from Unsplash Shift + Ctrl + 3

Quick Note: For the folder, and Dropbox options you will, of course, need to specify a folder from the main panel before you start using those shortcuts.

I’ve created a simple News Feed screen for iPhone 6, which you can download here, and it gives you a quick chance to kick the tyres on Craft. They are worth kicking (in a nice way of course).

Now let’s hop on through the great features that Craft brings to the table…

Type

Bye, bye to Lorum Ipsum. And hello to placeholder text for just about everything inside of your design. Titles, article copy, dates, etc… You can even add your custom action to the Type option. You want your blog titles to appear as the names of every Bill Murray movie (who doesn’t love the Big M)? Go for it!

A keyboard shortcut to easily cycle through different snippets of text would be a requested feature in a future update.

Photos

You can import photos from Dropbox, a private folder, or the web, right into your design.

With Craft you can quickly add in placeholder images to your Sketch screens. Craft gives a variety of options to choose from. My personal favourite being able to grab a random image from Unsplash. But you can also, quite easily grab images from a Dropbox folder of your own, or even an image from the web. For example, I have used images from UIFaces in the past for my Avatars.

Quick Note: Currently it seems that images chosen from the Web option in Craft won’t alter when used with the Duplicate feature, the same image is duplicated, just not replaced like the Unsplash option. But I’m sure there’s an update coming for that.

Duplicate

This is another truly handy, and time-saving feature. I’ve used the Grid tool in the past to quickly make duplicates of an element, with the required number of copies, spacing etc… or even a simple Alt + Drag.

The great thing about the Duplicate feature in Craft, is that it will do all of the above, but automatically replace images, and text in the copies you’ve just made. No need to go through and replace the images, and text manually. Winner!

Conclusion

I’m impressed with what InVision LABS have brought to the table with Craft. A few niggles need ironing out. More keyboard shortcuts would be great, and a few UI tweaks to make it look 100% native to Sketch would be awesome. (Oh I’m a stickler for those minuscule touches).

Separate plugins that came before did an amazing job in their own right, but having all these features inside of that one panel is a dream. With Craft, and the upcoming launch of Silver, that ‘Project Comet Adobe Thingy Project Thing’ needs to be looking over it’s shoulder.

The s*** just got real!

The post Sketch.app & Craft: A Match Made in Real Data Heaven appeared first on Speckyboy Design Magazine.

Just in case you missed them, you can view Part 1 here and Part 2 here. Ok, lets make a start on last part of the tutorial…

If you haven’t already, grab these required elements to follow along with this tutorial…

• Sketch (Stating the obvious here).
• Iconjar.
• San Francisco Fonts.
• Icon Set.
• Unsplash It Sketch (Plugin).
• Content Generator for Sketch (Plugin) (Plugin).

Let’s make a start on the final part of this tutorial…

Monthly Planner

We’ll be using a new background image for our Monthly Planner screen, so go ahead and draw out a Rectangle (R), 375px wide, and 667px high (remember to remove the border), which covers the Artboard. Run the Unsplash It plugin to choose a suitable image.

Draw out another Rectangle (R), with the same dimensions as the one you just created, and then choose your gradient Shared Style from the Inspector Panel.

Insert the Menu + Search Symbol you created before, and align this correctly on the Artboard.

Drop in your Text Style, and change the wording to something like ‘December, 2015’, then align this on the Artboard.

From Iconjar, grab both the arrow left, and arrow right icons. Then, using the Scale tool, reduce the height of these icons to 20px, and the color to #FFFFFF.

With the arrow icons, and text layer selected, use Align Vertically to tighten the elements up.

Hold Alt so you can measure the correct distance between your title, and control bar.

Now, let’s get our circular graph chart into place shall we?

Firstly, draw out a circle with the Oval Tool (O), 200px x 200px. Remove the Fill Color, change the Border Color to #FFFFFF, and increase the Border Thickness to 6px.

Then, using the Scissors tool, click on a section of the circle to remove it…

With the circle still selected, right click, and choose Duplicate. Give the circle a color value of #8C72E3, and then place that layer behind your white circle.

Using the Transform option, enter 180 into the Rotate field.

Quick Note: There are various ways to create circular graphs inside of Sketch. For this tutorial I’ve shown you one, quick, and easy way.

Insert a new Text Layer (T), adjust the wording to something like ’25’, and give it the following settings…

• Typeface: SF UI Display
• Weight: Regular
• Color: #FFFFFF
• Size: 70
• Alignment: Center

Insert another Text Layer (T), change the text to the percentage sign (%), and give it the following settings…

• Typeface: SF UI Display
• Weight: Regular
• Color: #FFFFFF
• Size: 40
• Alignment: Center

Add the final Text Layer (T) for the circular graph, adjust the wording to something like ‘4 Deeds Complete’, and give it the following settings…

• Typeface: SF UI Display
• Weight: Light
• Color: #FFFFFF
• Size: 13
• Alignment: Center
• Character Spacing: 1.5

Group all of the graph elements together, and then align them correctly on your Artboard.

To finish up this screen, quickly add 2 Text Layers (T). For the first Text Layer change the wording to something like ‘You’re on course to reach your goal for this month.’, and enter these settings…

• Typeface: SF UI Display
• Weight: UltraLight
• Color: #FFFFFF
• Size: 15
• Alignment: Center
• Character Spacing: 1.5

And for the second Text Layer adjust the wording to something like ‘A big high-five for you!’, and use the following settings…

• Typeface: SF UI Display
• Weight: Light
• Color: #FFFFFF
• Size: 15
• Alignment: Center
• Character Spacing: 1.5

Then align these correctly on your Artboard. And that’s this screen all wrapped up!

Settings

We will be using a new background image for our Settings screen, so draw out a Rectangle (R), 375px wide, and 315px high (remember to remove the border). Run the Unsplash It plugin to choose a suitable image.

Draw out another Rectangle (R), with the same dimensions as the one you just created, and then choose your gradient Shared Style from the Inspector Panel.

Insert the Menu + Search Symbol you created before, and align this correctly on the Artboard.

Drop in your Text Style, and change the wording to ‘Settings’, then align correctly on the Artboard.

For the Avatar, we will be using the same one we created for the Daily Deeds screen previously. So copy, and paste that across, and place it underneath the title.

Time to get those input fields into place.

To save time, and to avoid having to design all of those elements from scratch, we’ll insert the ‘Form Fields (Sign Up)’ Symbol that we created in Part 1 of this tutorial.

But, before we go any further, we don’t want to affect the Symbol that we created for the Sign Up screen, so with the Symbol selected, click on the Select menu in the Inspector, and choose Duplicate Symbol.

Then rename this new Symbol to ‘Settings Form’.

Of course, you’ll be currently looking at an invisible element on your design due to the colors we used on the original Symbol. That’s not really helpful currently is it!

So go into the Layers List and adjust the icons Fill Color to #DEDEDE. Do the same for the Line also.

For the Text Layers change the color to #303030, and adjust the wording accordingly.

We’ll add one more field to our ‘Settings Form’, so from Iconjar, drag and drop in the present icon. Then, with the Scale tool, reduce the width to 25px, and change the color to #DEDEDE.

Taking cues from the existing fields, add a Text Layer, and Line, to sit alongside your icon, and then align the elements correctly.

Quick Note: Make sure that the icon, text layer, and line that you just added are contained inside the Symbol, and not sat outside of that group/folder.

And that’s our Settings screen complete.

Let’s move onto the final screen…

Navigation

Firstly, select all of the elements from the Settings Artboard, and then holding Alt (which will duplicate them in the process), drag those elements across to your Navigation Artboard.

Then draw out a Rectangle (R) to cover the Artboard, give it a Fill Color of #303030 with 80% opacity.

Draw our another Rectangle (R), with a height of 667px, and a width of 320px, then apply the following settings…

• Fill Color: #FFFFFF
• Borders: None
• Shadows: Color: #000000 Opacity: 40% X: 4 Y: 2 Blur: 15

From Iconjar, drag in the close symbol icon, and position it correctly on the background layer we just created.

Now let’s liven things up with a few navigation items…

Jump back to Iconjar, and select the home icon. Click, and drag it onto your Artboard. Do the same for the planner, calendar, and settings icons.

Selecting each icon at a time. Click on the Scale tool, and reduce the width to 25px. Then change the color of each icon to #DEDEDE.

With all icons selected, use Align Left, and then using Alt, position them 20px from the left edge of the Artboard.

Insert 4 Text Layers. One for each icon, and change the wording accordingly…

• Home
• Deeds for the Day
• Monthly Planner
• Settings

Then adjust the settings for those text layers…

• Typeface: SF UI Display
• Weight: Light
• Color: #303030
• Size: 18
• Alignment: Left
• Character Spacing: 1.5

And align them correctly next to each icon.

Draw out a 1px Line (L) to act as a Divider between each Navigation item. Make it 280px in Length, with a Border Color of #DEDEDE.

Then, using the Alignment tools, make sure everything is aligned nice, and tight.

Quickly finish up this screen with the ‘Piece’ logo.

Drop in the dove icon from Iconjar, and Scale it down to 40px in Width, and give it a Fill Color of #8C72E3. Position it at the bottom of the Navigation panel.

And that brings us to the end of this 3 Part Tutorial. Now get out there and create some awesome!

My awesome guide to improving your skills with Sketch is now available…

Don’t let your learning experience be slowed down by drip-fed email courses. Discover Sketch App allows you to increase your knowledge, and skills of Sketch in the fastest way possible.

Use the Offer Code DISCOVERMEDIUM to receive 25% OFF!

The post Designing an iOS App in Sketch: Part 3 appeared first on Speckyboy Design Magazine.

If you missed Part 1, you can view it here. Ok, lets make a start on Part 2…

If you haven’t already, grab these required elements to follow along with this tutorial…

• Sketch (Stating the obvious here).
• Iconjar.
• San Francisco Fonts.
• Icon Set.
• Unsplash It Sketch (Plugin).
• Content Generator for Sketch (Plugin) (Plugin).

Walkthrough

Let’s concentrate on the walkthrough screen for our app.

For this screen, lets swap out the background image (Something well be doing on the later screens also).

Select both the overlay, and background image on the last Artboard we created, and then hold Alt and drag across those two layers to your new Artboard.

Like before, make sure both layers are set at 0 on the X, and Y axis.

Of course, the background image, which we need to edit, is hidden below the overlay. How did we fix this?

Let me show you a few ways to get to a layer that is below another…

• The obvious way is to select the background image layer in the Layers List (I think you knew that one already).
• With neither of the layers selected, hover your cursor over the Artboard, and then holding Alt, click to select the layer below.
• Right-Click on the layers, and choose Pick Layer to choose your background image layer from there.

Go ahead and choose a new image Unsplash It Sketch > Unsplash It or Shift + Cmd + U

Now, lets get the navigation arrow, and title into place.

Duplicate across the arrow icon we added to our previous screen, and position it 20px from the left, and 30px from the top of the Artboard.

Then, using the Text Style we created previously, add a new title, then change the wording to ‘Walkthrough’, and position it correctly on the Artboard.

We will now concentrate on the slides for our ‘walkthrough’.

Draw out a Rectangle (R), 300px wide, and 400px high, with a border radius of 4. Give the rectangle a Fill color of #6C56B7.

Holding Alt, duplicate the layer, and then with it still selected apply the following settings…

• Width: 20px.
• Height: 380px.
• Fill Color Opacity: 40%.

You will have noticed that we have all 4 corners set with a border radius still? As this new layer is sitting flush with the edge of our Artboard lets quickly tweak the Radius setting in the Inspector Panel.

So in the Radius field, replace 4, with 0/4/4/0 so only the top right, and bottom right corners are affected.

Duplicate this new layer, Flip it horizontally, and sit it to the far right of the Artboard.

Then, with all 3 shape layers selected, use Align Vertically in the Inspector Panel. Boom!

Lets go ‘Big Icon’ style!

From Iconjar, grab the touch icon, and drag this onto your Artboard.

With the icon selected, increase its width to 150px, and change the color to #FFFFFF.

Insert a Text Layer (T), modify the copy to something like ‘Easily navigate through your daily Pay It Forward deeds’, then add the following settings…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #FFFFFF.
• Size: 15.
• Alignment: Center.
• Character Spacing: 1.5.

Use the Alignment tools in the Inspector Panel to tighten things up.

Time to add some Bullet Navigation for our slides.

Draw out a circle with the Oval Tool (O), 10px x 10px. Remove the Fill Color, and change the Border Color to #FFFFFF.

Duplicate this layer 2 times. Keeping one with the same settings as the original, and adjust the circle (that will sit in the middle) with a Fill, and Border Color of #6C56B7.

With all shapes selected, align them correctly below the slide you created earlier.

And thats our Walkthrough screen complete. Oh yes indeedy!!

Daily Deeds

Onto the Daily Deeds screen. Lets show folks how generous weve been these past 24 hours!

Like the Walkthrough screen before, we will be adjusting the background image here, and using the gradient overlay again.

Up until now we have been copying & pasting across our gradient overlay from one screen to the next (and you can happily stick with this method if you want), but lets try another approach, and one that is much more suited when working on bigger projects.

So, on the Walkthrough screen, select the gradient layer, and then choose Create New Shared Style from the Inspector Panel.

You will now see our Shared Style available in the Inspector Panel.

If you want, quickly go back to the overlay layers on the screens you created previously, and attach this Shared Style to them. This just means that if you decide to change the gradient colors (or go with a solid color) that the changes will be instantly reflected across all your screens. A timesaver all day, every day!

Back to our Daily Deeds screen.

Draw out a Rectangle (R), 375px wide, and 667px high, which covers the Artboard. Run the Unsplash It plugin to choose a suitable image.

Draw out another Rectangle (R), with the same dimensions as the one you just created, and then choose your gradient Shared Style from the Inspector Panel.

Lets add the Menu, and Search icons to the control bar area.

From Iconjar, drag, and drop in the hamburger menu, and magnifying glass icons.

Change the color of both icons to #FFFFFF. Leave the hamburger menu size as is, but Scale down the magnifying glass icon to 25px.

Select both icons, use Align Vertically, and then hold Alt to show you the measure guides, and align it evenly on the Artboard.

With both icons selected, group them together via Cmd + G (label the group something like Menu + Search), and then convert that group to a Symbol.

Drop in your Text Style, and change the wording to ‘Good Morning’, then align correctly on the Artboard.

Time for the user Avatar, and to put the Content Generator plugin to work.

Draw a circle (O), 100px x 100px, give it a Border of 4 (with the color of #FFFFFF).

With the layer selected, navigate to Plugins > Content Generator Sketch Plugin > Persona > Photos > Female/Male/Neutral

Insert a new Text Layer (T), adjust the wording to something like ‘Tuesday, December 22, 2015’, and give it the following settings…

• Typeface: SF UI Display.
• Weight: Light.
• Color: #FFFFFF.
• Size: 15.
• Alignment: Center.
• Character Spacing: 1.5.

Then align this text layer correctly on the Artboard.

Now for the Tasks Counter (Yup. Thats what Im calling it).

Draw 2 circles (O). The first at 100px x 100px, with the Fill Color of #6C56B7, and the second at 50px x 50px with the Fill Color of #8C72E3.

Position these similar to the image below…

Then add 2 Text Layers (T).

For the Task Count layer use the following settings…

• Typeface: SF UI Display.
• Weight: Regular.
• Color: #FFFFFF.
• Size: 66.
• Alignment: Center.

And for the Percentage layer, use these settings…

• Typeface: SF UI Display.
• Weight: Regular.
• Color: #FFFFFF.
• Size: 12.
• Alignment: Center.
• Character Spacing: 1.5.

Then align both text layers correctly inside of the circles, so you have something like the following…

Insert a new Text Layer (T), and change the wording to something like ‘Youve already completed 4 Pay It Forward deeds today. Nice work buddy!’

Add these settings for the text layer…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #FFFFFF.
• Size: 15.
• Alignment: Center.
• Character Spacing: 1.5.

For the ‘Pay It Forward’ portion of the text, change the Weight to Light.

Then align this text layer correctly on your Artboard.

Insert a new Text Layer (T), and change the wording to something like ‘View PIF deeds for today.’ Keep the same settings as the text layer you inserted before, but reduce the font size down to 13.

To finish up this screen, drop in the arrow left in circle icon from Iconjar.

Scale it down to 35px, give it the color #FFFFFF, and then set it to -90 in the Rotate settings.

And that finishes up our Daily Deeds screen. Nice work!

Deed Example

For the background image, we will be sticking with the image that we used on the Daily Deeds screen. So duplicate that image across to your empty Artboard, and reduce the height to 315px.

Then draw out a Rectangle (R) to cover the image, and apply the gradient Shared Style you created earlier.

Insert the Menu + Search Symbol you created before, and align this correctly on the Artboard.

Drop in your Text Style, and change the wording to ‘1st Deed of the day’, then align correctly on the Artboard.

Draw out a circle (O), 100px x 100px with a Fill Color of #8C72E3.

Then, from Iconjar, drop in the shopping bag icon. Keep the size as is, and change the color to #FFFFFF. Align the icon correctly within the circle.

Insert a Text Layer (T), and change the wording to something like ‘At 10.36am’, then apply the following settings…

• Typeface: SF UI Display.
• Weight: UltraLight (For the actual time change it to Light).
• Color: #FFFFFF.
• Size: 20.
• Alignment: Center.
• Character Spacing: 2.

Add a new Text Layer (T), change the wording to something along the lines of ‘Paid an old ladys grocery bill at the local convenience store. Felt real good about it!’, then apply the following settings…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #303030.
• Size: 24.
• Alignment: Center.
• Character Spacing: 2.5.

To finish up this screen, well add in a plus (+) icon for where a user of this app could easily add a new Deed (because they are that darn good-hearted!)

Draw in a circle (O), 60px x 60px, with a Fill Color of #6C56B7.

From Iconjar, select the plus symbol icon, and drop this onto the circle you created. Keep the size as is, and change the color to #FFFFFF.

Do you know what? Ill let you go ahead and create the 2nd Deed example screen!

Just remember what Ive shown you in the last section. Choose a new icon from Iconjar, and use the image below as reference if needed. Go for it!

And thats the second part of this tutorial complete.

In the final part, well be creating screens for the Monthly Planner, Settings, and Navigation.

The post Designing an iOS App in Sketch: Part 2 appeared first on Speckyboy Design Magazine.

Before we start the tutorial, there’s a few things you’ll need:

• Sketch (Stating the obvious here).
• Iconjar.
• San Francisco Fonts.
• Icon Set.
• Unsplash It Sketch (Plugin).
• Content Generator for Sketch (Plugin) (Plugin).

Once you have the items installed, let’s go ahead and create some awesome…

Welcome Screen

Let’s concentrate on the welcome screen for our app. We’ll be putting the Unsplash It plugin to good use, and also the icon set that you will be installing into Iconjar.

Create a new Artboard (A), and choose the iPhone 6 option from the Inspector panel.

Now we will be designing 10 Artboards in total, and all for the iPhone 6, in portrait orientation. So it would make sense to quickly duplicate the Artboard you just placed onto the Canvas.

So, with the Artboard selected, click on the Make Grid icon in the Toolbar, and enter the following settings…

• Rows: 1 Margin: 10px.
• Columns: 10 Margin: 100px.

And click Make Grid.

Cool. Now we have all of our Artboards at the ready!

Let’s rename those Artboards before we move on.

In the Layers List, use Cmd + R to rename the first Artboard, and then use the Tab key to quickly jump to the next Artboard name, renaming as you go.

Starting with the 1st Artboard, use the following labels…

• Welcome
• Sign In
• Sign Up
• Walkthrough
• Daily Deeds
• Deed Example #1
• Deed Example #2
• Monthly Planner
• Settings
• Navigation

Ok. Back to the Welcome screen.

Draw out a Rectangle (R) to cover the Artboard (375 x 667px), and remove the Border.

Then, from the Menu bar, navigate to Plugins > Unsplash It Sketch > Unsplash It, or use the shortcut Shift + Cmd + U.

Now we have a nice background image in place for our first screen. Remember you can easily cycle through the plugin with Shift + Ctrl + R until you find an image you’re happy with.*

*Your images may differ from the tutorial. Don’t worry. It’s all cool!

Let’s get a nice gradient to overlay our image. We’ll have it angled from the top left corner, to the bottom right corner.

Draw a Rectangle (R) to cover the Artboard, and then from the Inspector panel, in the Fills section, choose the Gradient option.

Click on the first color stop in the Gradient Bar, and enter 514A9D for the Hex color value.

Then for second color stop, enter 24C6DC into the Hex color field.

Back on the Artboard, click on the dot at the top of the gradient line, and drag it to the top left corner.

Then grab the bottom dot, and drag that to the bottom right corner.

Quickly jump back to the Fills section, and drop the Opacity of the gradient down to 80%.

Let’s get a logo in place for our fictional app. The app is called ‘Piece’ (That’s not a typo by the way. It’s a long story. I’ll explain over coffee one day).

What’s a sign of Piece/Peace? A dove of course!

Make sure you have Iconjar installed, and running? Good stuff!

And now we’re going to install the font set you downloaded earlier.

From Iconjar, click on the plus (+) icon at the top of the application, give your set a name, and then browse to the folder with the icons. Select the folder, and click Open. Then click Add to bring the new icon set into Iconjar.

Now we have our icons within easy reach, and we can just click-drag them from Iconjar, and place them straight into our design. A real timesaver.

Before we drag in our dove icon, draw out an Oval (O), and give it a width of 130px (with the padlock on to keep proportions).

Remove the border, and then give it a Fill color of #FFFFFF with 10% Opacity.

With your shape layer selected, hold down Alt to align it correctly on the Artboard, measuring 80px from the top.

Back in Iconjar, select the dove icon, and then drag it onto your Artboard.

The icon is a little large to sit inside the circle, so reduce it’s width to 60px (keeping the padlock on), and then, with the icon shape layers selected (not the folder), change the color to #FFFFFF, with 60% Opacity.

With both the icon folder, and circle shape layer selected, use the Align Horizontally, and Align Vertically tools to align them correctly with one another.

Then turn the logo into a Symbol, via the Create Symbol button in the Tool bar.

Time to add some text to our Welcome screen, and make use of the San Francisco font you downloaded earlier.

Use the Text tool (T), and edit the text to say ‘Welcome!’, then enter the following settings in the Inspector panel…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #FFFFFF.
• Size: 32.
• Alignment: Center.
• Character Spacing: 3.

Insert another Text layer (T), edit the text to ‘Let’s make someone’s day’, and then apply the following settings…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #FFFFFF.
• Size: 15.
• Alignment: Center.
• Character Spacing: 1.5.

Let’s convert this title to a Text Style.

With the ‘Welcome’ text selected, Choose Create New Text Style from the select menu in the Inspector panel, and give it a label. Let’s keep it simple and call it ‘Title: H1’ (Remember to use less vague naming conventions when working on a large project).

Now let’s add our Sign In button, which will appear below the welcome message.

Draw out a Rectangle (R), 210px in width, and 50px in height. Give it a Fill color of #6C56B7, and a Border Radius of 40.

Add a text layer (T), with the text ‘Sign Up’, and use the following settings…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #FFFFFF.
• Size: 18.
• Alignment: Center.
• Character Spacing: 2.

Use the alignment tools at the top of the Inspector panel to align the two elements correctly to one another.

Then turn the button into a Symbol, via the Create Symbol button in the Tool bar. Once you’ve converted it, select the Text Layer, and then check Exclude Text Value from Symbol, in the Inspector panel. This just allows us to sync this Symbol across our Artboards, but to alter the text inside of it if required (which it will be).

Final part of our Welcome screen, a message for new users to sign up for an account.

Draw out a Rectangle (R), 375px width, and 60px height, give it a Fill color of #8C72E3 with 70% Opacity.

Place it flush, at the bottom of the Artboard.

Add a Text layer (T) ‘Don’t have an account? Sign Up’, with the following settings…

• Typeface: SF UI Display.
• Weight: UltraLight.
• Color: #FFFFFF.
• Size: 15.
• Alignment: Center.
• Character Spacing: 1.5.

For the ‘Sign Up’ part of the text layer change the Weight to Light.

Finally, turn this element into a Symbol, and then, with the Text Layer selected, check Exclude Text Value from Symbol.

And that’s a job well done for the Welcome screen!

Sign In Screen

As you may have noticed from looking at the screenshots, the Welcome, and Sign In screens share a lot of similarities.

The only thing that differs is the welcome message replaced by the sign in form.

Now, there are a few different methods we could use to accomplish this next part, but for this tutorial I’ll stick with the following…

So, select the background image, and overlay from the Welcome screen design, and holding down Alt (to duplicate the layers), click and drag those 2 elements across to our Sign In Artboard.

Insert the logo Symbol you created earlier, and align it on the Artboard.

Then go ahead and do the same for the Sign Up message bar.

Now for the Sign Up form…

Jump back to Iconjar, and select the user icon. Click, and drag it onto your Artboard. Do the same for the lock icon.

Selecting each icon at a time. Click on the Scale tool, and reduce the width to 25px. Then change the color of both icons to #FFFFFF.

With both icons selected, use Align Left, and then using Alt, position them 20px from the left edge of the Artboard.

Insert 2 Text Layers. One ‘Username’, and the other ‘Password’.

Then adjust the text settings for both layers…

• Typeface: SF UI Display.
• Weight: Light.
• Color: #FFFFFF.
• Size: 15.
• Alignment: Left.
• Character Spacing: 1.5.

And align them correctly next to each icon.

Draw out a 1px Line (L) to sit under each Text Layer. Make it 290px in Length, with a Border Color of #FFFFFF, with 50% Opacity.

Then use the Alignment tools I showed you earlier to make sure everything is aligned nice, and tight.

Insert a Text Layer (T), and alter the text to ‘Forgot Password?’, and then adjust the text settings…

• Typeface: SF UI Display.
• Weight: Light.
• Color: #FFFFFF.
• Size: 13.
• Alignment: Right.
• Character Spacing: 1.3.

Align this Text Layer to the bottom right of your Password text field.

If you haven’t already. Group the elements for your Username field, and also the Password field.

Then, with those 2 groups selected, use Cmd + G again to group them, and rename your new group to ‘Form Fields (Sign In)’.

Go ahead and convert your ‘Form Fields (Sign In)’ group to a Symbol.

And finally for this screen, insert the Sign In button Symbol you created earlier, and align it correctly below the sign in form. Use Alt to measure the distance of 80px from the message bar at the bottom of the screen.

Sign Up Screen

Time for the final screen in this part of the tutorial.

Like the Sign In screen, before it, the background image, and overlay are staying the same, so Alt and drag them across from the previous Artboard.

Make sure they are aligned correctly on your new Artboard, by checking their positioning on the X and Y axis.

From Iconjar, drop in the arrow left in circle icon.

Using the Scale tool, change the width to 30px, give it a color of #FFFFFF, and position it 20px from the left, and 30px from the top of the Artboard.

Now, we’re going to use the Text Style we created earlier (Title: H1), so click on the Styled Text icon in the Toolbar, and choose the Text Style from there. Then click on your Artboard to insert the text layer, and change the wording to ‘Sign Up’.

Using Alt for your Measure Guides, align the title correctly on your Artboard.

Now for some more SVG icon goodness!

Using the Oval (O) tool, draw out a circle, to 100 x 100px (remember to hold Shift whilst you draw your shape, to constrain proportions).

Remove the border, and change the color to #FFFFFF, with 30% Opacity.

From Iconjar, grab the camera icon, and using the Scale tool, reduce the width to 40px, and then change the color to #FFFFFF.

Use the Alignment tools in the Inspector panel to align the icon, and circle shape layer correctly.

The Sign Up form will require 3 input fields…

• Name.
• Email.
• Password.

Of course we can speed up the process somewhat by using the ‘Form Fields (Sign In)’ Symbol we created earlier.

So insert that Symbol into your design. But, before we go any further, we don’t want to affect the Symbol being used on the Sign In screen, so with the Symbol selected, click on the Select menu in the Inspector, and choose Duplicate Symbol.

Then rename this new Symbol to ‘Form Fields (Sign Up)’. Now we have 2 Symbols working independently of each other, and helps us cut down on our production time in the process.

Edit the text, from ‘Username’ to ‘Name’, and then increase the gap between the 2 fields, to allow us space for the Email field.

From Iconjar, drag and drop in the envelope icon. Then, with the Scale tool, reduce the width to 25px, and change the color to #FFFFFF.

Taking cues from the existing fields, add a Text Layer, and Line, to sit alongside your icon, and then align all the elements correctly.

Then insert the button Symbol you created earlier, change the text to ‘Create’, and align it below the form.

Finally, drop in the Message Bar Symbol, and edit the text to ‘Already have an account? Sign In’.

And that’s the first part of this tutorial complete. Nice work!

In the second part, we’ll be creating screens for the Walkthrough, Daily Deeds Planner, and Deed Examples. “Deeds?” I hear you say. It will make more sense in the next part, trust me.

The post Designing an iOS App in Sketch appeared first on Speckyboy Design Magazine.

Marvel is a great application for quickly creating functional prototypes, and syncs wonderfully with Sketch via it’s own Plugin, which we’ll get to shortly.

There are a slew of similar applications out there (and I have bounced between a few) with more advanced features. But Marvel is still a powerful little tool in it’s own right (with more features being added on a regular basis), and comes highly recommended*.

*And has some gorgeous illustrations throughout! Puts a smile on my face every time I use the app :)

Let’s get to it…

Sign Up to Marvel

Jump on across to Marvel App. and sign up for a new account (They have a free plan to begin with).

Cool. Now you’re all signed up for a Free account with Marvel.

In this guide, I will be skimming over quite a few features inside of Marvel, but giving you enough knowledge to feel comfortable using the application on your next try.

Let’s go ahead and create our first project…

Give your new project a name. Something like ‘Shutter iOS Photo App’ would make sense don’t you think?

And for the device we’re prototyping for, choose iPhone.

Click ‘Create project’. Boom!

Let’s Install the Sketch Plugin

From the next screen, we need to go ahead and download the Sketch plugin, so we can send our Artboards directly to Marvel, from within Sketch.

So go ahead, and click on the ‘Sketch’ link, and download the plugin from the next page.

Unzip it, and double-click the Sketch Plugin file to install.

Good stuff. Now we can easily sync our Artboards from Sketch to the Marvel project we just created. Clean. Simple. No fuss!

Back in the Marvel App, click on Settings, to make sure we have iPhone 6 set for our prototype frame.

Have a play around with the various Prototype settings available. Like I mentioned earlier, I will only be skimming over the features in Marvel, so please feel free to tweak the settings at will. You can’t break anything!

Exporting our Artboards from Sketch

Time to jump back to Sketch for a little while, and go back to the Artboards we created in the previous part of this guide.

We created 6 screens for our fictional iOS Photo App ‘Shutter’. But in this part we are only going to be exported 4 ‘complete’ screens into our Marvel project…

And I’ll explain why…

Layers in Marvel App

Marvel has a great feature called Layers, which allows you to add elements over the top of your screens, such as sidebars, modals etc…

If you remember (with the last 2 screens we designed in Sketch) we added modals for the Share, and Delete image actions?

So we won’t need to export the complete screens for those (we can use the screen from the ‘Full Image Preview’), and then just export the Share, and Delete elements by themselves, and then layer them over the top of a screen in Marvel.

What? Huh? I’ll explain more as we move along. It’s a walk in the park I promise you!

Let’s concentrate on the Welcome, Viewfinder, Image/Photo Gallery, and Full Image Preview screens for this next part.

Select all 4 of those Artboards in the Layers List…

And then navigate to Plugins > Marvel > Login or Logout to Marvel…

From the popup window, enter the login details you created previously inside the Marvel Web App.

Once you’re logged in, and with those Artboards still selected, navigate to Plugins > Marvel > Send or Update Selected Artboards to Project… or use the shortcut Alt + Cmd + G

From the Export Settings popup, you will see your project name already selected. Choose 2x, as we’re creating designs for an iPhone 6 Retina screen. Then click Send or Update.

Jump back to the Marvel Web App, and you’ll see your screens appear (give them a little time to load in) inside of the project window.

Click + Drag on the screens to re-arrange them correctly.

Adjusting our modal elements in Sketch

Now before we get into any of the juicy options available to us now, let’s hop on back to Sketch, and fix up those modal elements we created, first.

We currently have them sat atop the Artboards we created (this was for obvious reference purposes), but we only want to import those elements alone into Marvel.

So with the Share modal, select just that element, and then copy, and paste it onto the Canvas area.

We of course want this element sitting inside of an Artboard, so insert a new Artboard (A), and then from the Inspector panel, choose Around Selection.

Follow the same process for the Delete Image modal.

Done! We now have 2 new Artboards for our modal elements.

Like we did previously, select both Artboards in the Layers List, and then use Plugins > Marvel > Send or Update Selected Artboards to Project, or Alt + Cmd + G

From the Export Settings pop up window, keep the same settings, and click on Send or update.

Our screens are ready for Prototyping!

Jump back to the Marvel Web App, where we now have all of our screens ready to rock!

Let’s get to the good stuff shall we?

From here you can easily begin editing these screens, and creating Hotspots for them, to create a functioning prototype.

Hover over the first screen (Welcome), and click the Edit button, which will take us into edit mode, and where we can start bringing our screens to life. Woop! Woop!

Using the left, and right arrow keys on your keyboard you can quickly navigate through all the screens in your project…

…And zoom in, and out on each screen, using +, and –

You can also add Annotations to your screens, and Fixed Headers, and Footers if required.

For the purpose of this guide, we’re going to concentrate primarily on Hotspots, and Layers. But once you’ve finished up here, feel free to have a real good play around with the application.

Also, we won’t be applying Hotspots to every element on the design, I’ll focus on just a few of them to get you started, and then let you run with the rest. When you realise how much fun it is inside of Marvel, you’ll appreciate it!

Welcome screen

Still inside of the Edit window, and with our Welcome screen visible, hover over the image, and you’ll see the Hotspot tool appear. Click + Drag to draw out a Hotspot to cover the ‘Skip’ button.

You will see the Options panel appear at the bottom of the window. This is where we can now weave our prototyping magic!

There are various options to choose from here, so let’s touch upon a few of them as we move through the rest of this guide.

We want our Welcome screen to skip the tour, and take us straight to the Viewfinder. So click on the Viewfinder screen in the panel to select it.

Now let’s add a nice Screen Transition between our screens. Click on the Screen Transition tab, and take your pick! You will see a nice animation appear when you hover over each of the transition options. Let’s go with Slide Up for ours.

Quick Tip: If you ever want to Preview what you’ve prototyped up until that point, click on the Preview link at the top right of Edit window.

This will open a new window, with your screens inside of a Prototype Frame, in our case the iPhone 6. Where you can test out your current actions, and animations…

Viewfinder Screen

Back in the Edit window, use your keyboard arrow keys to switch to the next screen (Viewfinder), and draw out a Hotspot covering the Shutter button.

Then click on the Image Gallery thumbnail in the Options panel below, to link the Hotspot to that screen.

Add a Screen Transition between the screens. Click on the Screen Transition tab, and let’s go with Fade.

Like I mentioned a little earlier, we’re going to activate just a few Hotspots on the screen designs. Once you’re a Pro with Sketch, and Marvel (or maybe you secretly are?), you can come back and design any missing screens, or elements.

Image Gallery screen

Ok. Navigate to the Image Gallery screen, where we’ll be adding two Hotspots to this design.

Following the first example above, draw out a Hotspot to cover the Camera Icon, and then select the Viewfinder screen in the Options panel. This would just allow a user to navigate back to the Viewfinder, for them to keep snapping away!

name=”de37″ id=”de37″>Choose a Screen Transition between the screens. Let’s go with Slide Right.

Draw out a second Hotspot, covering your middle thumbnail image, and then select your Full Image Preview screen as the destination, so a user can click through to the full-size image.

Choose the Slide Up transition, and that’s our gallery fixed up.

Full Image Preview Screen

Now. Navigate to the Full Image Preview screen, where we will be popping in a few more Hotspots, putting those modal windows to good use, and showing you more cool features in the process.

Let’s rock!

Add in a Hotspot covering the back button at the top of the screen, and then (as currently there is only one way into this screen, via the Image Gallery) choose Link to last visited in the Hotspot Destination options.

You don’t need to add in a Screen Transition here. Marvel will just flip the animation that you used to enter this screen. For example, Slide Up will now be replaced with Slide Down when navigating back.

It’s now Layer time for those modals!

We’ll work on the Delete Image modal first.

Draw out a Hotspot to cover the Delete button at the bottom of the screen, and select the Delete Modal image as your Hotspot Destination.

Then choose the Layer an image option at the left of the Options panel.

On the new Edit screen that appears, you have a couple of options to choose from, Layer position, and Layer background.

For the Layer position, we’ll choose Centered, and for the Layer background, let’s quickly jump back to our design in Sketch.

On your Delete Image Artboard, select the Overlay layer, and from the Fills option in the Inspector, you will see that we set it at #303030, at 60% opacity.

Back in Marvel, enter that Hex color value, and adjust the opacity slider to 60%. Then click Save Layer.

Let’s add in a quick Screen Transition. Slide Up would work I think.

Delete Image modal

Now, navigate to the Delete Image modal screen inside the Editor, and draw a Hotspot around the Cancel button. Select the Full Image Preview screen as your Destination, and then use Slide Down as the animation.

Share Image Modal

Do you know what? I’ll let you run with this. Just remember the steps I showed you before for the Delete Image modal. The animations, the hotspots, the color for your overlay.

Aim for something like this…

Once you’re happy with everything, click on Done at the top right of the Editor window, which will take you back to the Project area.

From there, click on the Play button (at the top right of the screen) to take your prototype for a spin!

Here’s something I made earlier (give it a try)…

I’ve only touched on some of the elements that make Marvel such a great tool, and there’s a whole lot more to see inside of this application. So go on, get stuck in, and produce your next best prototype!

The post Prototyping with Marvel and Sketch: Part 2 of 2 appeared first on Speckyboy Design Magazine.