Prototyping with Marvel and Sketch: Part 1 of 2

It’s a match made in digital heaven! And I’ll show you how to get both Sketch and Marvel working together in sweet harmony!

In this 2 part guide, we’ll be designing screens for a fictional iPhone Photo App, inside of Sketch, and then creating functional prototypes over in Marvel.

Nothing too strenuous at all. But it will give you a greater understanding of how these companion applications work so great together, cut down considerably on your development time, and give you a little more insight on how great Sketch and Marvel are.

In this first part, we’ll look at creating the artwork in Sketch. So if you don’t currently have a copy to hand, download and install, the 14 day Trial from here.

I’ll be skimming over the complete ins, and outs of Sketch, but if you want to get to know the application a little more, before we start, this earlier tutorial of mine, which you can find here will help a lot.

We’re Going to Need a Few Things Before We Start Designing Greatness…

A few Google Fonts, a couple of Plugins for Sketch, some SVG icons, and a fantastic application for keeping those icons in order. Not too much to ask right?

Google Fonts
From Google Fonts, download, and install the following font families…

Josefin Sans
Open Sans

Sketch Plugins
From the Menu bar in Sketch, navigate to Sketch > Preferences or use the shortcut Cmd + ,

Click on Get Plugins… and from the Sketch Plugins directory, search for the ‘Unsplash-It Sketch‘, and ‘Marvel Sketch‘ plugins. Download, and install both of those.

SVG Icons
We’re going to be using a great icon set called Entypo. Go ahead and download the icon set to your desktop. We’ll come back to them very shortly.

Iconjar
This application helps avoid the hassle of hunting down a specific icon on your machine. You can have your icons all stored inside this one application, and easily drag, and drop them into your Sketch project. Grab a copy from here.

Once you have Iconjar installed, add the Entypo icon sets to it, as we’ll be putting them to good use later in this part.

Hopefully you’re all setup, and ready to rock? Good stuff…

… Let’s create some awesome.

The Welcome Screen

The Photo App design we’ll be creating will be for the iPhone 6.

It won’t be an all singing, all dancing photo app. Extremely basic, with a few features missing. But enough to give you a good overview of how Sketch and Marvel work so well together.

Create a new Artboard (A) inside of your Sketch document, and choose iPhone 6 from the Inspector panel.

Quick Tip: We will be designing 6 screens in total, and they all share the same dimensions (375 x 667px), so to save us having to repeat the process of creating a new Artboard each time, we’ll put the Make Grid tool to good use.

With your Artboard selected, click on the Make Grid icon in the Toolbar, and then enter the following settings…

Rows: 1
Margin: 0px
Columns: 6
Margin: 100px

and click Make Grid.

Saved us some time right?

Now, with the first Artboard, draw out a Rectangle (R), that covers it (375 x 667px), and then, from the Menu bar, navigate to Plugins > Unsplash It Sketch > Unsplash It or use the shortcut Shift + Cmd + U.

You should have a great image fill out your shape, and what we’ll be using for the background of our Welcome screen.

We’re going to be dropping an icon and text on top of our image, so let’s add a dark overlay to sit over the image, so we can keep a good contrast.

Working with Shared Styles

Draw out another Rectangle (R) to place over the background image, and give it the following settings…

Color: 303030
Opacity: 60%

Then, with the layer still selected, click on No Shared Style in the Inspector panel, and choose Create New Shared Style from the select menu. Let’s call this new Layer Style ‘Dark Overlay’.

Time to give a name to our photo app, and put Iconjar to good use at the same time.

It’s Iconjar Time!

Open up Iconjar, and do a search for the ‘circular graph‘ icon. Then drag, and drop it onto your Artboard.

From the Inspector panel, increase the width of the icon to 50px (keep the padlock on to keep proportions), and change the color to #FFFFFF.

Insert some Text (T) for the app name. We’ll call it something completely revolutionary, like ‘Shutter’.

Use the following settings for the title…

Typeface: Josefin Sans
Weight: Regular
Color: #FFFFFF
Size: 64
Alignment: Center
Character Spacing: 2

The strap line can read ‘Capture those perfect moments’, and use the following settings…

Typeface: Open Sans
Weight: Italic
Color: #FFFFFF
Size: 14
Alignment: Center
Character Spacing: 1

With both text layers, and icon selected, go to the Inspector panel and click on Align Horizontally.

Then, holding down Alt, measure the distance, so you can align the elements correctly on your design.

Let’s add a couple of navigation links to appear at the bottom of our Welcome screen.

Insert 2 Text layers (T). The first one labelled ‘Take a tour’, and the other ‘Skip’.

Then with both layers selected, apply the following settings…

Typeface: Josefin Sans
Weight: Bold
Color: #FFFFFF
Size: 14
Alignment: Center
Character Spacing: 1

With both text layers selected, use Align Vertically in the Inspector panel to align things up correctly.

And then put Alt to good use again to align the navigation at the bottom of the Artboard.

That’s our Welcome screen finished up!

The Viewfinder/Capture Image Screen

Let’s create the screen for the viewfinder part of our app.

Again, draw out a Rectangle (R) to cover the whole Artboard, and then run the Unsplash It plugin to insert a suitable image. I’ll leave that to your personal preference.

Let’s create the Viewfinder to appear in the center of our screen.

With the Oval tool (O), draw out a circle 200 x 200px, remove the Fill Color, and add a 2px border with the color #FFFFFF.

Duplicate that shape, by selecting it, then holding down Alt, and dragging it to duplicate. Then reduce it’s size to 50 x 50px.

Using the Alignment Tools

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

Back in Iconjar, do a search for the ‘align horizontal middle’, and ‘align vertical middle’ icons, and drag each of them onto your Artboard.

Leave the dimensions as they are, and change their color to #FFFFFF.

Then, using the Alignment tools in the Inspector panel, line them up inside of the circle in the Viewfinder.

Let’s finish up this Artboard with the Control Bar that sits at the bottom of the screen.

Draw out a Rectangle (R), 375px wide, and 120px in height, and remove the border.

With the layer selected, choose the ‘Dark Overlay’ Shared Style from the Inspector panel.

Now we’ll add some buttons to this area. One for ‘more settings…’, one for our ‘shutter button’, and the other for the flash.

We’ll start with the ‘shutter button’ first.

With the Oval tool (O), draw out a circle 50 x 50px, 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 60 x 60px, add a 2px border, and remove the Fill Color.

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

For the ‘more settings…’, and flash buttons, draw out 2 circles (or use Alt and then drag), 30 x 30px, and color them #FFFFFF.

Search for the ‘dots three horizontal’, and ‘flash’ icons in Iconjar, and drag them onto the Artboard.

Keep the sizes as they are, and then align each icon correctly within the circles you just created.

Always Remember to Group Your Layers

Make sure you are grouping elements as you follow along. If you haven’t already, jump over to the Layers List, and using Cmd + G, group each of the buttons that you’ve just created. This will leave you with 3 separate groups, and makes things a lot easier when it comes to aligning elements on your design.

With the 3 groups selected, use the Distribute Horizontally, and Align Vertically options in the Inspector to tidy things up.

Nice work! That’s our Viewfinder screen wrapped up.

The Image Gallery

Time to create the screen for our Image Gallery.

Draw our a Rectangle (R) to cover the whole Artboard.

And we’re going to use the Unsplash It plugin again, but choose a different option from the menu.

With that shape layer selected, navigate to Plugins > Unsplash It Sketch > Unsplash It with Options, or use Shift + Alt + Cmd + U.

With the options that pop-up on the screen, choose No for Grayscale, Yes for Blur, and Center for Cropping Gravity.

Quick Tip: Remember you can easily run the plugin again with Shift + Ctrl + R, until you’re happy with the image.

Now, on the other screens we’ve created, we omitted the iPhone Status Bar to give more focus to those screens. We’re going to insert a Status Bar on this screen, though.

From the Menu bar, navigate to File > New from Template > iOS UI Design, and here you’ll find a very handy template, containing a multitude of UI elements for iOS. Thank you Bohemian Coding!

Find Status Bar White, and then copy and paste that into our Image Gallery Artboard.

And then position it at 0 on your X, and Y axis.

So a user can quickly take another photo, and navigate back to the Viewfinder screen, we’ll drop in a camera icon to allow that.

But before we do, and just to make it easier to align elements, draw out a Rectangle (R), 375px wide, and 65px in height (remove the border).

Make sure it sits butt-up to your Status Bar.

Now back to the icon…

From Iconjar, do a search for ‘camera’, and drop that onto your Artboard.

Increase the width to 35px (with the padlock on), color it #FFFFFF, and then align it correctly inside the shaper layer you created before.

Then go ahead, and hide the shape layer, by clicking on the Eye icon (next to the layer name) in the Layers List.

Time to add some images to our Gallery.

Draw out a Rectangle (R) at 375px wide, and 200px in height. Then duplicate this 2 more times, leaving a 5px bottom margin between each shape layer.

With all 3 shapes selected, run the Unsplash It plugin Shift + Cmd + U.

Image in an instant! That’s one handy plugin right there.

Oh. For the first image in your gallery, it would make sense if we re-used the image that we inserted on the Viewfinder screen, to keep some uniformity.

So, with the image selected on your Viewfinder screen, right-click, and choose Copy Style.

Then, selecting the first image in your Gallery screen, right-click, and choose Paste Style.

And that’s our simple Gallery screen complete!

Full Image Preview

Now onto the screen for our full-screen image preview.

Draw out a Rectangle (R) to cover the Artboard, and then following the steps above, copy the style from the 2nd image in your Gallery, and paste that style into your shape layer.

For the Control Bar at the top of the screen, draw out a Rectangle (R), 375px wide, and 65px in height, and position it 20px from the top of the screen.

Then, drag in ‘arrow with circle left’ from Iconjar, increase the width to 35px (padlock on), and change the color to #FFFFFF.

Align the elements correctly, and then hide the shape layer.

For the Delete, and Share buttons at the bottom of the screen, we’re going to need a couple more icons.

In Iconjar, do a search for the ‘trash’, and ‘share alternative’ icons, and drag them onto the Artboard.

Now you may find that those (currently) teeny-tiny icons are hard to select, and you find yourself grabbing the background image by mistake? If that is the case, select the image layer, and use Shift + Cmd + L to Lock it in place (repeat the shortcut to unlock when required).

For both the Trash, and Share icon, increase the width to 30px and change the color to #FFFFFF.

And for the text that appears below each icon, create two text layers (T), and apply the wording ‘Delete’ for the first layer, and ‘Share’ for the second.

Then apply the following settings to both text layers…

Typeface: Josefin Sans
Weight: Bold
Color: #FFFFFF
Size: 14
Alignment: Center
Character Spacing: 1

And set both layers to uppercase via Type > Uppercase in the Menu bar.

Now, go ahead, and using a combination of grouping elements in your Layers List, using Alt for your measure guides, and the Alignment Tools in the Inspector, sit those buttons correctly on the Artboard.

Job well done!

Share Image

Let’s work on the screen for our Share Modal window.

In this part (and the following one), we’ll be using the same screen from our Full Image preview. So with all the layers selected in the Layers List (remember to unlock that background image)…

Hold Alt, and then drag across all the layers to your Share Image Artboard.

You have now easily duplicated the layers from one Artboard to the next. Simple!

So our Modal window keeps focus, draw out a Rectangle (R) to cover the Artboard, and then choose the ‘Dark Overlay’ Shared Style from the Inspector panel.

Then use Ctrl + Alt + Cmd + ↑ to place the overlay above the other layers.

It would make sense to duplicate all those layers across to the last screen in this tutorial. So, following the steps above, drag across a duplicate onto that Artboard.

Let’s make a start on the Share Modal window shall we?

Draw out a Rectangle (R), 306px width, and 313px in height, and then apply the following settings…

Radius: 4
Fill Color: #FFFFFF
Borders: None

And then apply the following Shadows settings…

Color: #000000 with 50% opacity
X: 0
Y: 2
Blur: 10

And then center it on your Artboard.

From Iconjar, drop in the ‘circle with cross’ icon, increase it’s width to 25px, and fill it with the color #4A90E2. Then position it at the top left of your Modal window.

Insert a small paragraph of text, with the following settings…

Typeface: Open Sans
Weight: Light Italic
Color: #9B9B9B
Size: 14
Alignment: Left
Character Spacing: 0.5

And then draw out a small Rectangle (R), 100 x 100px, and then, using the copy/paste style options I showed you earlier, insert the background image into the new shape layer.

Time to Add Some Social Icons

Let’s pop in some social icons as part of the Share Modal.

It’s up to you how many you want to insert, but for this guide I’m going to drop in 4 (Twitter, Facebook, Instagram, and Flickr) social icons.

Do a search in Iconjar for…

‘twitter with circle’
‘facebook with circle’
‘instagram with circle’
‘flickr with circle’

And drop those onto the Artboard.

Increase the width of each to 30px (with that padlock on), and change the color to #9B9B9B.

Then use Align Vertically, and Distribute Horizontally to align, and space them evenly.

And to finish things up for our Modal, let’s add in a Share button.

Draw a Rectangle (R), 306px wide, and 70px high, and give it a Fill Color of #4A90E2.

Now our button shape needs to sit nicely inside of our Modal (with it’s rounded corners). So double-click on the shape layer, which will switch us into Edit Mode.

Then click (one at a time) on the bottom left, and bottom right points, and add a 4 to the Corners field in the Inspector panel.

Finally insert a Text layer (T), with the wording ‘Share’. And use the following settings…

Typeface: Josefin Sans
Weight: Bold
Color: #FFFFFF
Size: 20
Alignment: Center
Character Spacing: 1

And align this correctly with the shape layer.

A job well done!

Delete Image

To wrap things up for this first part, let’s create the screen for our Delete Image Modal. This will take no time at all!

Draw a Rectangle (R), 306px wide, and 210px high, remove the border, and give it a Radius of 4. Then jump back to the Share Image Artboard, and copy across the style from the Modal you created there.

Insert a Text layer (T), with the wording ‘Are you sure you want to delete this image?’, and use the following settings…

Typeface: Open Sans
Weight: Light
Color: #303030
Size: 20
Alignment: Center
Character Spacing: 1

Now to add in a couple of buttons to finish things up.

Using the Rectangle (R) tool, draw a shape layer at 153px wide, and 70px high. Double-click to enter Edit Mode, then edit the bottom left point, and insert 4 into the Corners field.

Give this shape a color of #4A90E2.

With the shape still selected, hold Alt, and drag to create a duplicate.

Choose Horizontally in the Flip options in the Inspector, so your rounded borders match up to the Modal, and then give it a color of #3B77BD.

Insert 2 Text layers (T), and word the first ‘Cancel’, and the second ‘OK’.