We have previously covered some great plugins for Sketch​; today we will discuss Mac apps that significantly improve your general workflow when designing in Sketch.

Zeplin

Sketch is great for designing in isolation, but it offers no solution for design hand-offs. Enter Zeplin: a collaboration tool that helps developers implement your designs. Devs can inspect design specs to quickly find fonts, HEX colors, pixel-perfect spacing between elements, and more. They can easily export assets, too! It saves time for everyone, and moves you to launching your app quicker.

You’ll be doing a great favor to your team by using Zeplin. Trust me: I’ve used it as both the designer and developer in several projects.

Jumpshare

(Full disclosure: I work at Jumpshare).

Jumpshare is a fast file sharing app that doubles as a set of handy tools for designers. You can instantly share designs from Sketch by using the ‘Jumpshare Hotkey’​. Just press ⌥​D (Option+D), and a shareable link is immediately copied to your clipboard, ready to be pasted wherever you’re collaborating with your team. Previews show inline in Slack so you can discuss your designs in context. ⌥​D also works great for sharing designs from Photoshop if you still prefer Adobe’s suite of apps.

This, of course, is in addition to Jumpshare’s ability to share screenshots (with annotations), record screencasts, and voice clips. Indispensable!

CheatSheet

Sketch is a comprehensive app, so it helps if you use keyboard shortcuts for regularly used tools. Being able to switch between these tools, or performing different actions without lifting your hand from the keyboard is not only faster, but also more comfortable!

Now I usually search for keyboard shortcuts online and then forget to use them when the time comes. That’s where CheatSheet comes in! I discovered CheatSheet when I moved from Windows to Mac earlier this year. It shows you a list of all keyboard shortcuts available in the current app. All you have to do is press and hold the ​⌘ key for a few seconds. I have significantly improved my workflow in Sketch thanks to all the shortcuts I’ve quickly learned!

ImageOptim

Sketch designs usually have dozens of images in them that can add up to large file sizes that, in turn, really slow you down when you need to send them to your team or clients.

I strongly recommend including ImageOptim in your design workflow to compress your images, and hence your design files. I have seen it reduce image file sizes by as much as 60-70% without any noticeable loss in quality!

RightFont

RightFont is the sort of tool you don’t know you need until you start using it. It is a font management app à la Font Book, but it’s faster, and includes actual​ ​font management features. With RightFont, you can sync your fonts across multiple computers and within your team over Dropbox or Google Drive.

Regularly used fonts can be marked as favorites for quicker access, and collections of fonts (say, based by projects) can be organized into lists. Crucially, it works really well with icon fonts, too! Search for icon fonts from within the app, and just drag & drop them into Sketch! This alone can save you up to a minute for each icon font.

If you’re looking for Sketch App templates, you might like to take a look at this post: Free UI Kits and Templates for Sketch

The post 5 Fantastic Sketch App Tools Every Designer Should Use appeared first on Speckyboy Design Magazine.

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.

All those moving pieces come with a cost, though, in the form of meetings, emails, and file versioning—all things we do in order to stay on the same page.

One such practice on the design side that’s proven itself time and time again is the style guide, a collection of agreed-upon brand decisions (like colors, typefaces, brand imagery, etc).

A style guide is what allows everyone to use the right color blue, every single time. A style guide is what allows a developer to crank out a simple page without having to loop in a designer. In short, a style guide is what keeps your brand looking good.

Craft Styles by InVision Labs

Recently the folks at InVision Labs launched Craft (check out our post here), a collection of free tools for the design workflow of the future. It lets you design layouts with ease and design with real data. And the latest update brought a new tool, Styles, that lets you create a living style guide with a single click.

Like everything in life, I think the awesomeness here can best be explained with GIFs. Styles can automate a bunch of tricky design tasks, all of which used to require major manual labor.

Let’s take a look at the greatest hits…

A Living Style Guide

Styles is able to create a living style guide from your .Sketch document in just a single click.

Skeptical? There’s a GIF for that:

The tool is able to sniff out every single color, font, and type style in use throughout your document.

And the living part? It’s just as easy to update your style guide as it was to create the first time around. Simply make a change in your document, click the “Sync Styles” button, and your style guide will fall in line.

Let’s take a quick look at how the Styles panel works, which is located in the Craft toolbar along the right side of the Sketch interface.

Styles comes ready to track 3 things automatically: your color palette, your fonts in use, and your text styles (things like size, weight, color, etc.).

Clicking that blue “Sync Styles” button is what triggers the magic. Every time you make a change you want to show in your style guide, simply click that button. Change orange to red? Sync and your style guide will show it.

See those dotted lines, the slots ready to be filled? Those are for custom symbol groups, allowing you to manually select which elements you’d like tracked in the guide.

Symbols are perfect for little chunks of repeated design: icons, cards, modules, headers, etc. If you’re going to use it again and again, you’ll want it to be a symbol. Oh, yeah—and I have a GIF for you:

In the above demo, we’re grabbing a bunch of custom icons and adding them to a symbol group called “icons.”

Creating these custom groups is a great way to present an organized list of components across your design. Through the power of Symbols, all these elements stay in sync wherever you use them and update whenever you feel like making changes. Speaking of changes…

Making Sweeping Changes

There’s not a design task more tedious than changing the color of specific buttons across 19 PSDs. Head? Meet desk.

Styles makes executing a sweeping set of changes about as easy as it’s gonna get. The style guide even syncs in both directions (meaning you can make changes in your design or in your style guide, then apply them file-wide).

Let’s take that original example of making a sweeping color change, for when your boss decides he wants the purple to “be more purplier.”

Let’s unwrap the GIF above. The entire file is designed with a light purple color, which shows up in the style guide generated by Styles. Instead of changing each item using the color manually (woof), we hop into the style guide and make the change there.

With the new purple in place, a simple “Sync Styles” is all it takes to apply the new swatch file-wide. The boss changes his mind later? Swapping it back will be just as easy.

This example shows a simple color change, but it works the exact same way with everything else inside the style guide. Rounded button needs hard corners? Sync! Your headline font looks better condensed? Sync!

Finding (and Fixing) Inconsistencies in Your Design

One of the great things about letting a plugin generate your style guide is you can rest assured it’s not going to miss anything. And that includes those 4 different shades of green you thought were identical.

Even the best designers can sometimes make mistakes (shocking, I know). With a generated style guide, finding and fixing them is a snap.

Like the example above, we’re going to keep it simple, fixing an accidentally duplicated color (it was just a few shades off). Also, like the example above, this works with anything in your style guide: fonts, text styles, symbols—anything!

After noticing two similar swatches in the palette, I simply selected the second green and used the eyedropper to match it to the original green (the correct one). After clicking “Sync Styles,” the offending green disappears because it’s no longer used in the document (yep, Styles is smart enough to match exact duplicates and combine them).

An automated style guide will catch things that your eyes won’t. Find four text styles that are identical in every way except line-spacing? Change them to match, click “Sync Styles,” and watch inconsistency fly right out the window.

A Better Handoff

No matter how much prep work you do, the handoff from design to development is a complex process. Traditionally we try to ease the handoff with notes, build documents, and, yes, style guides (all created manually!).

If you’ve never developed a front-end, you might not know how manual that process can be. It’s almost like translating a design file into written word: look at the design file, investigate the attributes, transcribe what you see into CSS (or whatever build language floats your boat).

Another thing developers do? Avoid duplicate code. Just like we use Sketch’s symbols and styles to keep things in sync, developers code flexible and extendable modules, because no one likes doing the same thing over and over.

With Styles, you can easily highlight and organize your design’s most-used patterns. It’s like an inventory of reusable bits your developer’s going to need to code.

Once you’ve got a slew of interface symbols added to the style guide, not only will your document be more organized for handoff, you’ll be ready to make any last minute changes at scale (you know, because of the living style guide thing, at the risk of sounding like a broken record).

It’s Dangerous To Go Alone! Take This

A style guide is the secret weapon of a well-oiled brand (and the team that creates and maintains said brand). It keeps your entire team, even outsiders, on the same page with a simple set of rules and common elements.

As design systems grow larger than ever, keeping track of decisions and changes is becoming a real challenge. Like lots of things in the modern product era, it sure is nice to have a plugin handle the heavy lifting for me.

To give Craft a try, simply head over to the InVision Labs site to download. It’s free, it’s fast, and it’s evolving.

The post Consistency Please! Style Guides in Sketch 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.