Published on | Prototyping: From UX to Front End — Medium Marc Andrew

Well hello there!

Welcome to the Process Tutorial Series.

So what is this you may ask? How is this any different to the countless text/image/video based tutorials that are readily available?

Well, I’m glad you asked.

Ok. So we’ve all absorbed a tutorial in some shape or form throughout our careers. If that’s at the start of it, or later on when you’re wanting to learn something new, and need to get some guidance from someone who’s been there.

Now the problem with a lot of the Free Tutorials out there is that they don’t always give much insight into the ‘Why’ behind the design process.

It’s mainly a case of “Fire up X, Y or Z design tool, drag this box, add this color. Boom you’re done. You’ve created some retina-searing eye-candy. Bye for now”.

So apart from learning more about a specific design tool, and focusing purely on the aesthetic, you’ve not really been taught much else, and in this present day that level of knowledge is just not good enough to get by now. Sounds harsh, but it’s true.

With the Process Tutorial Series I wanted to go a little deeper, and help you apply more UX thinking to the fictional products that we’ll be creating together.

As a UI Designer today it really pays to have a better understanding of UX Design principles and methods. Having this extra knowledge can make you a much more valuable asset to a team, with multi-faceted roles becoming the norm now.

Today employers are looking for Designers with many strings to their bow (taken from some recent job postings I came across)…

Expertise in design and UX/UI software such as: Sketch, Photoshop, Illustrator, XD Design, Balsamiq. Framer or Principle App is a plus
Excellent understanding of user-experience design for mobile and the web
Ability to create wireframes as well as visual design comps, storyboards and sitemaps

With the Process Tutorial Series I want to help teach you more of the ‘How’ and the ‘Why’…

“How can we reduce possible friction in the product that we’re designing?”

“Why this element in our Wireframe should be positioned here for an improved user experience?”

If you want to gain a little more insight into the actual process behind creating products for mobile and web, and don’t want to design solely for a certain section of the Dribbble crowd, you’ve come to the right place.

With each 3 Part Tutorial in the Series we’ll start with a fictional User Persona, then move onto Wireframes, on to Hi-Fidelity Mockups/Comps, all the way through to a Hi-Fidelity Prototype.

So are you on board?

Awesome!

Ok. So what are we creating in the first of this series?

It’s called Explorr — A Travel App that easily enables people to find events and attractions near to their current location.

Ready? Cool. Let’s make a start…

User Persona

User Personas. So what are they exactly? And what part can they play in the Product Design Process?

In a nutshell…

A Persona is a representation of a certain type of customer. User Personas can help with answering the question ‘Who exactly are we creating this product or service for?’.

They can give you real insights into the potential users of your product or service, and as a result can enable you to design and build a much better product, aligned to their needs and goals.

Now, for the Process Tutorial Series I’m only calling upon one fictional Persona here as I want to keep things reasonably light, and enable us to move along at a swift enough pace.

We can look at our following Persona as a combination of a few personas that share similar characteristics, so we’ve combined them into one.

Say hello to Hanna…

Hanna — 26 — Young Adventurer

Hanna is a keen traveller, a regular festival goer, very sociable and pretty tech savvy.

She wants to visit many different places in the world before she hits 30, as she feels that’s the time when she needs to settle down and possibly start a family.

She has always had a big appetite for exploration, and loves to experience the authenticity of each and every place that she visits.

She’s not had a great experience in the past with the regular Hotels & Package Holidays All-Inclusive option so is keen to avoid going down that kind of route.

Hanna likes to feel a sense of accomplishment with each and every trip that she makes, and also likes to be flexible with her schedule and not feel constrained in any way when on vacation, with the ability to easily find events and attractions near to her location being key to her enjoyment.

Wireframes

Ok. So what is Wireframing? And how can it play a key role in the Product Design process?

Wireframing, in the context of Product Design, is simply the method of creating Wireframes for the product that you will eventually design and build.

Wireframing can help you and your team understand, at an early stage, if the ideas that you’re looking to implement in a product will actually work, and if the user will be able to accomplish their goals when using the product or service that you’re setting out to create. It can assist in solving problems as early as possible, and/or help avoid much bigger problems at a later stage in the process.

Wireframing enables you to start making decisions on the structure, features, functionality, content, and user flow of a product without focusing too much (as little as possible to be honest) on the visual design.

Ok. Before we dive on head-first into this section of the tutorial we’re going to need a piece of software installed, and by our side. That piece of Wireframing joy is called Balsamiq.

Now, Balsamiq has been around for quite some time now, and it was one of the first Wireframing tools I came across (well that and Axure RP) when I first started designing for the Web (which was in Black & White then). Yes, a long time before monikers like UI Designer, UX Designer, Product Designer and the like were being bandied about.

Now I will admit that the current version of Balsamiq is getting a little long in the tooth. It’s powered by Adobe Air, which is well, old as dirt. But don’t run away in a panic just yet. Speaking to Peldi the CEO of Balsamiq, they are now currently in the process of Beta testing the online version of Balsamiq as we speak, which will be completely native and saying “Adios” to the tired Air Framework, with the Desktop version arriving early next year, so it’s all looking good for Balsamiq moving forward. You’re still here? Thank goodness for that. Oh and it’s being rebranded as Balsamiq Wireframes. Makes more sense right?

Yes, it has its quirks, and it can feel limited for certain projects, but for getting ideas out there faster than Usain Bolt picking up his complementary pair of Nike trainers it’s one, if not the best for that.

Again it’s down to what you feel comfortable with, and what the project at hand requires. You can still go with scraps of paper, Sharpies, and whiteboards if you want, or you can take it to the other end of the spectrum and bring in more prototyping functionality with a product such as Axure RP. It’s your choice at the end of the day.

Ready to make a start? Cool. Let’s get to it.

Go ahead and download a copy of their very generous 30 day trial from https://balsamiq.com/download/ and have it installed and at the ready.

Open up Balsamiq and quickly rename the project (something like ‘Explorr’ would make sense I guess) via Project > Save Project As or use the shortcut (Shift + Cmd + S).

You can also set Balsamiq to Auto-Save in the preferences if you so desire. I’ll leave that one up to you.

The main sections of the Balsamiq interface are as follows…

1: Toolbar
2: UI Library
3: Navigator
4: Canvas
5: Inspector

You can find a detailed overview of the application here — https://docs.balsamiq.com/desktop/overview.

As we work through this tutorial I’ll be showing you some of invaluable keyboard shortcuts to use when working inside of Balsamiq, but if you want the full-fat, extra Mayo and Pickles list of Keyboard Shortcuts to reference. No problem, you can view them here — Balsamiq Keyboard Shortcuts.

Ok, before we start creating the first of our Wireframes, let me show you something quickly in the Project Information panel, which you can access by either clicking on the Project Info icon in the Toolbar or via the shortcut (Cmd + ,).

At the bottom of the panel you will see the Skin section (alongside the Font and Colors options which we’ll get to very shortly). Here you have 2 options; Sketch (no not that one, that’s in the 2nd Part of this tutorial) and Wireframe.

When working in Balsamiq, and if you’re just sharing Wireframes between other members of your team, sticking with the Sketch selection is the preferred option. When you’re wanting to try out different ideas and iterate fast, having the Sketch skin selected keeps everything at a Low-Fidelity, just how it should be when creating early stage Wireframes.

Now I’ve heard certain designers exclaim “How can I show these scrappy looking Wireframes to my Fortune 100 client?” Well, just switch on the Wireframe option when you do you precious little soul, and ta-da it’s all good in the Fortune 100 hood.

So for now, keep the default of Balsamiq Sans for the Font choice, and I’ll show you about switching this up when we move into the Preview of our Wireframes later on.

For the Colors, keep them as is. Again, like I’ve mentioned you want to keep your Wireframes as distraction free as possible, and deep-diving into your favourite colours archive is really not required at the Wireframing stage. You can do all that prettifying of elements when we move onto the Hi-Fidelity Mockups/Comps stage in Sketch (yes that one).

Phew! Let’s get Wireframing shall we?

Launch Screen

From the UI Library select the iOS option and then add the iPhone container to the Canvas by either Double-Clicking on the control or simply clicking and dragging it onto the Canvas.

Then, from the Inspector panel make sure the iPhone 6/7 option is selected, and hide the Top Bar (or Status Bar to give it its official iOS title).

From the Navigator panel on the left, Double-Click on the preview and rename to ‘Launch’.

With the Launch Wireframe we don’t want to aim for anything too elaborate. Like any good Launch screen just keep it as simple as possible. Think Twitter or Airbnb. They just stamp their logomark on the Launch screen and they’re done.

Like the Apple Human Interface Guidelines (HIG) happily mention –

‘The launch screen isn’t an opportunity for artistic expression.’

So we’re going to simply go with something similar to the Explorr logomark that you saw at the start of this tutorial. Remember that tree tag?

Now, Balsamiq comes fully loaded with the world famous, everybody has used it at some point in their career, icon set, Font Awesome http://fontawesome.io.

So let’s go ahead and add an icon to our Wireframe in the quickest way possible using the aptly titled Quick Add feature. Honestly once you’ve used the Quick Add feature a few times you’ll find it a real chore to resort back to the method of adding elements to the Canvas via the manual drag-and-drop method, I promise you.

Oh and later in this part of the tutorial I’ll show you an even quicker way of putting together your Wireframes. Your mind will be blown!

Ok, back to it.

Press the (/) key to focus on the Quick Add field in the Toolbar and type Tree. Select the Tree icon and press Enter to insert it onto the Canvas.

Drag the icon across to the iPhone element, and using the blue alignment guides that appear, center it on the screen.

Welcome (Sign Up/Log In) Screen

For the Welcome screen Wireframe we’re going to look at giving new users the option to Sign Up right from the get-go, but also the ability to Swipe to start an Onboarding process that will give them a brief overview of what the app can do.

You don’t want to force the user (Hanna in our case) straight into the Onboarding process, as they may already know enough about the app, be that via friends, what they’ve read on Social Media, or the description on the App Store, so they just want to jump on in and Sign Up without any kind of hindrance.

And for existing users, well, they simply Log In.

We’ll be keeping the Explorr logomark on the next screen so to keep a little bit of uniformity as we move from the Launch to Welcome screens.

So go ahead and make sure the Launch preview is selected in the Navigator panel, and Duplicate it (Cmd + D). This just saves us dragging in a new iPhone container, adding an icon etc…

Then Double-Click on the new preview and rename to ‘Welcome (Sign Up/Log In)’.

Drag the Tree icon up towards the top of the screen, giving us some room to insert our welcome message. Keep any eye on those alignment guides to keep the icon aligned on the Horizontal Axis.

From the UI Library you have a few options for when you want to insert text into your Wireframe, and I’ll go over them and give you my thoughts on what I think works best. Personal preferences are incoming.

When you select Text in the UI Library you have a multitude of options, but 3 specific options which are mainly used when inserting headlines or blocks of text.

These are…

Title
Subtitle
Text

Now the Title, and Subtitle elements are great for when you’re just creating a title, or subtitle that will fit on one line. You can drop them in, edit the text and away you go.

And if you do want the title to have a line break and sit on separate lines you can do that by editing the text and inserting r where you would like the line break to occur.

The issues (and this is just a slight Balsamiq annoyance) are when you try to resize the text box it only gives you left and right resizing handles so you’re pretty constricted when it comes to resizing.

My personal preference for when I’m inserting a title, subtitle or block of text is just to stick with the Text element most of the time. It just saves you that little bit of back and forth, “Oh I need that title on 4 lines to fit my design. Let me go back, manually insert another line break” and so on.

You have more control over the resizing, and well, it just enables you to work that little bit faster. I highly recommend it to speed things along when creating your Wireframes inside of Balsamiq.

So let’s go ahead and grab the Text element from the UI Library, and change the wording to something like ‘Welcome to Explorr’. Then click outside the text area once you’ve done that to de-select it.

From the Inspector panel, increase the font size to 40 and center align the text.

Adjust the resizing handles so the text is visible inside the box, and then place it below the logo mark. The alignment guides will help you out here once more, and as you’ll soon realise they are some of the smartest guides around.

Time to concentrate on those ever so important Sign Up and Log In buttons.

Now you may be thinking, why not ‘Sign Up’ and ‘Sign In’ for the labelling of these buttons?

Well, that’s not always the smartest naming route to take.

Let me explain…

Having two button labels using the same verb such as ‘Sign’ just brings in that little bit of confusion for the user, and makes it harder for them to distinguish between the two buttons quickly. In turn, they may find themselves tapping one instead of the other, leading to a level of frustration with your app.

Just quickly scan over these 2 groups of buttons…

Which group did you find it easier to focus on? I’m guessing it was the ones on the right?

If you want to provide a great user experience you need to make the buttons distinct from one another, and you can achieve this via the wording of labels, and visual appearance, which we’ll touch on soon.

Let’s get our buttons into place, and in the process I’ll show you another of Balsamiq’s time-saving features that goes by the name of Quick Draw. Oh I’m full of little surprises. Honestly, once you’ve used this feature you’ll rarely find yourself grabbing an element from the UI Library again.

Hold (R) and draw out a small Rectangle…

Then press (Cmd + T) to bring up the Transform to… window and type ‘Button’ into the search field…

Ta-da! You have a Button with all the relevant settings available to you in the Inspector panel…

Now, this is the most basic of examples here, and you could simply jump across to Quick Add, search for Button and pop one in that way, but I just wanted to show how the Quick Draw feature enables you to not only create buttons, but a complete layout if you really wanted.

If the Quick Draw feature now has you going “Oooh I like it a lot with sprinkles on.”, just remember these simple keyboard shortcuts (hold down the relevant key and then Click and Drag) –

R — Draw a Rectangle
T — Block of Text (Double-Click to edit the text)
Y — Headline/Heading (Double-Click to edit the text)

Ok. After that brief, but I hope highly informative interlude, let’s get back to the button we just created.

Double-Click the button and change the text to ‘Sign Up’. Increase the font size to 32, and change the button colour to a Light Grey.

With the Sign Up button selected, hold (Alt) and Click-Drag to create a duplicate.

Change the text to ‘Log In’, and the background color to White #FFFFFF.

By adding just a splash of colour we now have a subtle visual distinction between our two buttons.

When Wireframing, keep colours to the bare minimum. A splash of grey here, and possibly a spot of blue for tappable text links, nothing more.

You’re not wanting to distract with too many design flourishes at this stage. All the visual niceties can come at the next stage of the process.

Oh. Before we finish up here, let’s talk about Symbols. Just like Sketch (yes that one again), Balsamiq has Symbols too.

Basically Symbols allow you to create reusable common elements that you can use across different Wireframes. Update the Master Symbol, and every other instance of that Symbol will be updated to reflect the changes you made.

Now I think there’s a good possibility that we could look at using the Sign Up/Log In buttons in one of our later Wireframes.

For example, to give the user the ability to sign up after they have gone through the Onboarding sequence.

So let’s convert those buttons to Symbols pronto!

With the Sign Up button selected press (Cmd + G) to group it. Yes I know it’s one element and not a selection of elements to group, but that’s just how Balsamiq likes to do things, regardless of how many elements you’ve selected to be grouped.

From the Inspector give the Symbol a name (i.e. ‘Sign Up Button’), and click Convert To Symbol.

You’ll now see your new Symbol appear in the Symbol section of the UI Library, waiting to be reused at a later stage in the project.

Follow the same procedure for the Log In button giving it a suitable name (i.e. ‘Log In Button’).

Ok. To finish up, simply drop in a Label element. Remember to use (/) for Quick Add and then search for Label.

Change the text to ‘< Swipe to learn more’, center align the text, and then place it toward the bottom of the screen.

If you’re wondering, we don’t need to actually use a Link element here as it’s not a tappable link per sé, but a notification to swipe the screen.

We’ll touch on tappable links later in the tutorial.

Ok. I think we’re all good for the Welcome Wireframe.

Onboarding Screen(s)

For the Onboarding screens, let’s aim for 4 in total. We want to simply enable a new user to get a brief overview of the app, but also the ability to skip the sequence at any time and jump straight to the Sign Up screen.

Quick heads up. For the rest of this tutorial I’ll be mainly using the Quick Find (/) feature. It’s the smart way to create your Wireframes. Come and join me it’s much more fun!

Press (Cmd + N) to create a new Wireframe. Double-Click on the preview thumbnail and rename to ‘Onboarding (Slide #1)’.

Press (/) to focus on Quick Add, search for the iPhone element and place it on the Canvas. Oh, and from the Inspector, remove the Top Bar/Status Bar. We won’t be needing it again for the next few Wireframes.

Using Quick Add (/), drop in the Text element, change the wording and increase the font size to 40, center align the text, and then align it toward to the top of the screen.

Again, using Quick Add (/), search for the H.Rule element and drop that in.

Increase the width of the element using the resizing handles, and then hold (Alt) and Click-Drag to create a duplicate underneath.

Use Quick Add (/) and insert another Text element.

Double-Click to edit the text. And here comes a rather handy tip just for you…

Type ‘Lorem’, and boom, there’s a nice block of Lorem Ipsum text for you to use. Handy right?

Of course I always advocate using real copy if you can, but for this tutorial we’ll stick with good ol’ Ipsum for the majority of our copy.

Tweak the sizing handles so around 6 lines are visible, and then from the Inspector, center align the text, and position it on the screen.

Let’s add in a Dot Navigation so the user knows exactly where they are in the Onboarding sequence, and how many screens they need to swipe through, which like I mentioned earlier, we’re going to aim for 4 in the sequence.

We’ll also be inserting a link to enable the user to skip straight to the ‘Sign Up/Log In’ screen if required.

Press (/) and insert the Shape element.

From the Inspector resize the Width and Height to 20.

With the Shape element selected, hold (Alt) and Click-Drag to duplicate, then space it accordingly.

Now here comes another of Balsamiq’s super-awesome-so-so-handy-timesaving (Patent Pending) features.

With the duplicate Shape selected, simply press (Cmd + D) to create 2 more duplicates.

Balsamiq will space the duplicates evenly following the same spacing measurements as the first items. Oh Balsamiq you bringer of joy!

Set the first navigation dot to an Active state by simply changing the Background Color to Black #000000 in the Inspector.

Shift-Click to select all the navigation dots. (Cmd + G) to group them, and align this new group on the screen.

Let’s go ahead and convert our Dot Navigation to a Symbol that we can look at re-using later on.

So with the Dot Navigation group selected, jump across to the Inspector, give the Symbol a name (i.e. ‘Dot Navigation’) and click Convert To Symbol.

Finally for this Wireframe, we need to give the user the option to jump out of the Onboarding sequence at any point and go straight to the ‘Sign Up/Log In’ screen. Let’s get that into place via a tappable link.

Oh. Before we do that, I need to vent my (mild to moderate) anger…

I see time and time again designers popping the Skip label in the top right of the screen? No. Don’t do it. Users that are eager to use your app will have skipped the Onboarding completely and already signed up. Cool. Not a problem.

But for those users that are still a little unsure and want to find out more about your app they will jump on into the Onboarding and if you’re putting Skip labels in the top right you’re pissing them off before they’ve even signed up. It’s not within easy reach for a user taking the one-handed approach, and gets unbearable when you’re talking about screen sizes like an iPhone 8+ for example. Make it within easy thumb reach so they can, with the least amount of exertion, jump out of the sequence and get signing up for your shiny new app, which everyone wants right?

Ok, so use Quick Add (/) and drop in a Link element. Change the wording to ‘Skip’, and position it so it’s within comfortable reach for the user.

Perfect. Let’s get the last few Onboarding Wireframes in order shall we?

The next 2 Wireframes in the Onboarding sequence should follow a similar layout to the one we’ve just created. So with the current Wireframe selected in the Navigator, press (Cmd + D) to duplicate, and then rename to ‘Onboarding (Slide #2)’.

We’re just going to change the Title on this new Wireframe, and the Active state on the Dot Navigation. Nice and simple.

Edit the Title and pop in some wording of your choice…

And for the Dot Navigation, Double-Click on the element to enter edit mode.

You’ll see a floating tab bar appear asking if you want to edit the symbol source. We don’t want to do that but just edit the Symbol inside of the current Wireframe. So select the relevant dots in the navigation and change the background color of each so the 2nd dot is now in an Active state.

Once you’ve finished making the required edits, click on the Home icon in the floating tab bar to exit edit mode.

For the 3rd screen in the Onboarding, duplicate (Cmd + D) the screen you’ve just created. Rename it to ‘Onboarding (Slide #3)’, and following the steps above, edit the Title, and adjust the active state on the Dot Navigation.

Okey-Dokey. Let’s complete the final Wireframe in the Onboarding sequence. Where, like I mentioned before we’re going to give the user the option to Sign Up when they reach the end of it.

With the ‘Welcome (Sign Up/Log In)’ Wireframe selected in the Navigator, duplicate it (Cmd + D) and then Click-Drag it in the Navigator so it’s sat below the last Wireframe we created.

Rename it to ‘Onboarding (Slide #4)’.

And then on the Wireframe itself change the Title to ‘Ready for the journey?’.

Now all we need to do is remove the Swipe to learn more label, and replace it with the Dot Navigation Symbol we created before, and I’m going to show you how to do this in Guinness World Record breaking time. That’s a bold claim I know!

With the ‘Swipe to learn more’ Label selected, press (Cmd + T), to bring up the Transform to… panel, and then search for the Dot Navigation (or whatever you may have called it) Symbol, and swap out the two elements. We broke records right there yeah?

Align the Dot Navigation on the Wireframe (check the Y position in the Inspector and adjust accordingly if you want the Symbol positioned on the same Y axis as the previous Wireframes), and then Double-Click to jump into edit mode and, like I showed you earlier, change the Active state on the dots.

I think we’re all done for this Wireframe. Great job.

Sign Up

With the Sign Up Wireframe we want to look at giving the user a simple form to fill out, just a couple of fields, nothing more. And the option to view the Terms & Conditions for the app they’re signing up for. We’ll also give an existing user the ability to quickly log in from this screen also.

So, create a new Wireframe (Cmd + N) and rename to ‘Sign Up’.

Drop in the iPhone element and from the Inspector hide the Top Bar/Status Bar.

Via Quick Add (/) insert the Tree icon, and from the Inspector reduce the icon size to Medium (M). Position it toward the top of the Wireframe.

Let’s look at inserting the Email and Password fields for our Sign Up form. Email field you’re up first.

Drop in a Label element, either via the UI Library, or if you’re one of the cool kids via Quick Add (/), edit the text to ‘Email’, and position accordingly.

Add a Text element, edit the text, and then resize the handles on the container to fit. Also adjust the text color so there’s a little distinction between the label and inputted text.

Now we’ll look at dropping in a Horizontal Rule below the text input. And here’s where another great feature of Quick Add comes into play. If you can’t remember exactly what the name of the element is. After all who knows to search for H.Rule all the time? You can type in something like Line in the Quick Add field and Balsamiq will be a smart cookie and have a good idea of what you were searching for.

Go ahead and give it a try with other elements.

Ok. Increase the width of this element and place it below the text input.

Now using Shift-Click select the Label, and Line elements, and then holding (Alt), Click-Drag to create a duplicate, positioning it below the first field.

Change the Label text to Password.

Now let’s look at getting a few Shape elements into place to represent a hidden password.

Add the Shape element. Reduce the Width and Height to 10, and change the Background Color to Black #000000.

Like I showed you previously, hold (Alt) and then Click-Drag to create a duplicate, spacing it accordingly.

Then with the duplicated Shape still selected, simply press (Cmd + D) to duplicate a few more instances of the Shape, and they’ll all have the correct spacing applied between them. Still a great little feature that right?

Select all of the Shape elements, and group them (Cmd + G).

With the password field it would be good practice to give the user the option of viewing, and checking their password before they submit their details. This just avoids the wrong password being inputted and the inevitable frustration of being greeted with a message such as ‘Please check your password’ when they come to log in at a later date.

So, using Quick Add (/) grab the Eye icon, reduce its size to Small (S) in the Inspector, and place it so it’s aligned with the Password Label. We’ll call this new element the Show/Hide Password Toggle going forward.

Now for our Privacy Policy message, where the user has the option to tap on a link to preview the policy details before they sign up.

It is worth noting that in some cases (in the EU for example) checkboxes have to be used instead of an auto-accept message, so bear that in mind.

Ok. Drop in a Text element, and edit the wording to something like ‘By signing up you agree to our Terms & Privacy Policy’.

Still in editing mode, and to make the message clearer to the user, I’ll show you how to put a couple of text formatting options into practice.

‘Terms & Privacy Policy’ will be a tappable link, and should appear on a separate line so to make it more visible to the user.

So we need to go ahead and simply wrap the text in the following notation [] to make it a link, and to place it on a separate line use \r before the text, so you have something like the following –

By signing up you agree to our \r [Terms & Privacy Policy]

Perfect!

If you want to learn more about formatting text in Balsamiq, the following link will come in very handy — https://docs.balsamiq.com/desktop/text/#basic-formatting

Lastly, from the Inspector, center align the text, drop the font size down to 14, and resize the text box to remove the excess space.

With those Quick Add (/) fingers at the ready, drop in the Sign Up Button Symbol you created earlier, and position it accordingly.

And to finish up this Wireframe, we’ll pop in the obligatory ‘What do you mean you fool you tapped on the Sign Up button by mistake when you already have an account?’ message. That’s the one right? Something a little more subtle maybe?

Ok. Let’s drop in a Text element and go with ‘Already have an account? Log In’. And like I showed you before, format the Log In text so it appears as a link.

Center align the text, resize the text container, and then position it on the screen below the Sign Up button. Great job!

Wireframo completo! Let’s move onto the Log In screen.

Log In

With our Log In Wireframe we can look at following a very similar layout to the Sign Up screen, but this time look at giving a returning user the option of logging in with either their email or a username to avoid those moments of “Damn which email/username did I use again when I first signed up?”. We’ve all been there right?

Like I mentioned, the Log In screen will share many similarities with the Sign Up screen, so it makes sense to simply duplicate the previous screen and then make some slight adjustments from there. So with the Sign Up Wireframe selected in the Navigator use (Cmd + D) to duplicate and then rename to ‘Log In’.

For the Email field we’re going to offer a returning user the choice of either using the email they first registered with, or a username that they may have inputted at a later stage, for example via a Profile page.

Giving the user a couple of options to choose from just allows for a much better user experience, and reduces any possible friction that may occur when they come to the Log In process.

So go ahead and edit the Email Label to read ‘Email or Username’.

You can also tweak the inputted text if you want, just so you have some visual distinction between the Sign Up and Log In Wireframes when you come to Preview them at a later stage. This one’s entirely up to you.

Moving onto the Password field.

Leave the Label text as is, and for the inputted text, remove the hidden password dots, and then duplicate (Cmd + D) the Email/Username input above, position it, and then reword however you want.

Now let’s concentrate on the Show/Hide Password toggle (that little eye icon to the right of our Label remember).

With this Wireframe we should try showing the password in an unmasked state. And this would be handy for when you’re previewing the Wireframes to a client, or members of your team for example and they’re not entirely sure on what this function actually does.

So let’s quickly swap out the icon so it appears in a state that would show the user that by tapping it will mask/hide the password.

With the Eye icon selected, jump across to the Inspector panel, click on the Icon search field and simply type Eye. Then select the Eye (Slash) icon to swap out the icons. Simple as that.

Moving on. We of course need to give the user the option to recover a forgotten password, so we’ll get the standard ‘Forgot Password?’ link into place.

We of course won’t be needing the Terms & Privacy Policy text anymore as this screen is for an existing user, but the font size is suitable for the Forgot Password? link, so let’s quickly repurpose it.

Double-Click on the Terms block of text, and edit to something like the following…

Right-Align the text in the Inspector, and then position it below the Password field.

Let’s go ahead and quickly swap out the Button using the Transform to… feature.

With the Button selected press (Cmd + T), search for the Log In Button Symbol we created previously, and swap out the buttons.

And finally for this Wireframe, edit the text below the button to read something like –

‘Don’t have an account? Sign Up’

And like I showed you before, format the Sign Up text so it appears as a link.

Great job there. Let’s move onto the next Wireframe.

Explore (New User & No Location Set)

With this Wireframe and the two that we’ll be creating after it we’ll look at creating interactions that will be happening inside of the same screen.

These interactions will relate to a user finding themselves in the Explore screen of our app, and then needing to scroll to a section of the screen where they can then allow the app (via an iOS Location Alert) to know their current location and then present them with events and places nearest to them.

Hope that makes sense? Let me show you…

(Cmd + N) to create a new Wireframe, and rename it to ‘Explore (New User & No Location Set)’.

Drop in the iPhone container, and keep the Top Bar/Status Bar visible.

Let’s Quick Draw the rest of this Wireframe. Hold tight it’s going to be, well, pretty quick.

For the header image, hold (R) and draw out a Rectangle to span the width of the screen…

And then draw out another Rectangle (R) to act as the Search box…

Then for the navigation that sits below the header image, draw out a Rectangle (R) that spans the full-width of the screen, and adjust the Background Color on it to a Light Grey #DDDDDD.

Draw another Rectangle (R) inside of this shape layer for the navigation itself.

For the screen Title, hold (Y) and draw out a line of text…

Then for the image thumbnail, hold (R) and draw out a suitably sized Rectangle…

Holding (Y) again, draw out a small title to appear below the image thumbnail…

Then hold (T) and draw out a block of text to appear below the title…

Now for the Tab Bar.

Draw out a Rectangle (R) full-width, place it at the bottom of the screen, and change the Background Color to a Light Grey #EEEEEE.

For the navigation items, draw out a small Rectangle (R), and then duplicate this 3 times, and position them roughly the same as the following…

Ok, with our Wireframe roughly sketched out we’ll now go ahead and use the ever reliable Transform to… feature to flesh out the Wireframe some more.

Let’s move down through the Wireframe, transforming elements as we go.

Select the first Rectangle that we drew, press (Cmd + T) to bring up the Transform to… window, and choose the Image element.

You will see our default Rectangle now switch to the image placeholder element. Perfect.

Select the Rectangle that’s placed on top, press (Cmd + T) and choose the Search Box element. Then Double-Click it, and change the text to ‘Search for events & attractions’.

Below the Image and Search Box, select the smaller of the two Rectangles there, press (Cmd + T) and choose the Link Bar element.

Double-Click this new element and edit the text to read something like the following…

‘For You, Events, Attractions’ (the commas tell Balsamiq that you want to separate the list into 3 navigation items).

Then from the Inspector, increase the font size to 18, and choose For You from the Selection menu, which will enable the first link to appear in an Active state, so it matches up to the screen that is currently being viewed.

Moving down. Double-Click the first line of text, and change the text to ‘For You’. Increase the font size to 32, and the Weight to Bold.

Below that, and using (Cmd + T) once more, transform the Rectangle to an Image element.

Onto the Text elements below the image.

Edit the first line of text to read something like the following…

And for the block of text either go down the Lorem Ipsum route or something similar to the following…

Finally let’s add in our Navigation labels and icons.

They will be labelled as follows (with the corresponding icons referenced in brackets) –

Explore (Search)
Saved (Heart)
Inbox (Inbox)
Profile (User)

Let me show you how to setup the first navigation item and then you can implement the rest.

Select the first of the four squares that you drew, press (Cmd + T) and from the Transform to… window choose Icon and Label.

Edit the Label wording to ‘Explore’. And then from the Inspector, reduce the font size to 12, choose the Search icon and reduce its size to Small (S). Then click on Auto-Size so the element fits the container correctly.

Ok. It’s over to you for the rest of this Wireframe.

Following the steps I just showed you, and referencing the list above for the relevant Navigation item Label and Icon, finish up the last items until you have something looking surprisingly similar to the following…

Quickly before we finish up this Wireframe, select the Tab Bar (including the icons), group (Cmd + G) the elements together, and then convert to a Symbol.

Explore (New User & No Location Set) Scrolled

With this Wireframe we’ll be showing the previous screen in a scrolled state with a notification now visible asking the user to tap a button to switch on their location.

So with the previous Wireframe selected in the Navigator, duplicate it (Cmd + D), and then rename to ‘Explore (New User & No Location Set) Scrolled’.

Using (Cmd + Click) select all of the elements contained in the body of the screen, and group them (Cmd + G).

Then drag this new group upward until it snaps just below the Status Bar.

Using (Cmd + ↓), send the group backward until it’s hidden behind the other elements at the top of the screen.

Ok. For the ‘Turn on Location’ banner that we want to appear on the screen, I’m going to let you run free with this (Don’t worry there’ll be an example at the end for you to reference).

We need a container, 2 blocks of text, and a button. That’s it!

Remember you can either go with the Quick Add (/) method, or even opt for the Quick Draw feature.

If you’re going all in Quick Draw, just remember those shortcuts again (hold the corresponding key, and then Click-Drag) –

R (Draw a Rectangle)
Y (Draw a Line of Text)
T (Draw a Block of Text)

And (Cmd + T) to use the Transform to… feature.

Aim for something like the following…

…………………

You’re back. That was quick. I didn’t doubt you for a second.

Let’s move onto the next Wireframe.

Explore (New User) Location Alert

If the user decided to follow the instructions on the previous screen and tapped the ‘Turn on Location’ button, we can now present them with an iOS Alert asking them to switch on their location, and in turn this will enable them to find events and attractions near to their current location.

Let’s get the required elements into place.

Go ahead and duplicate (Cmd + D) the previous Wireframe, and then rename to ‘Explore (New User) Location Alert’.

We want to have the iOS Alert in focus, so insert, or draw out a Rectangle to cover the whole screen. Remove the Border, give it a dark Background Color, and then reduce the Opacity slightly.

Via Quick Add (/), or the old fashioned drag-and-drop method from the UI Library, insert an Alert Box element.

Double-Click the element, and add something similar to the following (the separate lines by the way are so the element understands the format of title — message — links)…

Explorr
We would like to use your location so we can offer events and attractions near to you
Don’t Allow, OK

Resize, and align the element on the screen.

All done for this Wireframe. Great job!

Explore (New User/Existing User) Location Set

With this Wireframe we’ll be following a very similar structure to the ‘Explore (New User & No Location Set)’ Wireframe, the difference being that the user has now enabled their location so we need this screen to reflect that change via some small visual adjustments.

So select the ‘Explore (New User & No Location Set)’ Wireframe in the Navigator panel, and duplicate (Cmd + D) it.

Drag it down to the bottom of the Navigator so it’s last in the thumbnail list, and rename to ‘Explore (New User/Existing User) Location Set’.

Like I mentioned, we’re only going to need to make a few text edits here to reflect the fact that a location has now been set within the app.

So go ahead and add in a new Text element to appear underneath the ‘For You’ title, and also edit the text description somewhat. Then rearrange the elements on the screen accordingly, until you have something like the following…

All done. Yup. That was a quick one.

On to our final Wireframe methinks.

Event Overview

For our final Wireframe we’ll create the screen that is presented to the user when they tap on one of the event/attraction suggestions on the previous screen. Here we’ll look at giving them a detailed overview of the event/attraction that they may be interested in.

Create a new Wireframe (Cmd + N), rename to ‘Event Overview’, drop in the iPhone element, and toggle off the Top Bar/Status Bar.

Drop in an Image element that spans the full width of the screen.

Then insert the Dot Navigation Symbol we created previously. Reduce its size (hold Shift whilst you do this to constrain proportions), and place it over the Image.

Pop in a Rectangle that will sit above the Image, and adjust its Background Color and Opacity.

This will act as a background for the icons we’ll be using next, and will allow a subtle contrast between the icons and whatever image (light or dark) is displayed in this area.

We’ll now insert 3 icons to appear above this background element.

You can search for them using the following names –

Arrow-Left
Upload
Heart

From the Inspector, reduce their sizes to Medium (M), adjust their color to White #FFFFFF, and then place them similar to the following…

For the next section of this Wireframe I’m going to let you run free once more.

Using a combination of Text, Horizontal Rules, and Icon elements, aim for something like the following…

And then finally from the Symbols Library, drop in the Tab Bar you created earlier, and align it to the bottom of the screen.

Nice work there. That’s the last of our Wireframes complete.

Creating a Low-Fidelity Prototype

Before we make a start on this section of the tutorial you need to remember that Balsamiq (and any other kind of Wireframing tool) is/should be geared more towards starting the design process, rather than creating a Hi-Fidelity working Prototype of any kind, and this is why in Balsamiq that features such as timers, scrollable areas, swipes and the like are not available to you when viewing your Wireframes in Preview mode.

Full-Fat Prototypes with all the bells and whistles on should come toward the end of the design process, not at the start.

Ok. So we currently have 13 Wireframes that we need to link together to allow the client or other team members gauge the flow of the app even at this early stage.

We’ll take it from the top, and start with our Launch screen, so make sure you have that selected in the Navigator.

Remember that whenever you’re previewing Wireframes to either a client or members of your team you need to be as vocal as possible when doing this. Don’t just leave it up to the Wireframes themselves. Explain your reasons behind the flow and invite viewers into the conversation. Wireframes are created to spark debate, and the prime time for making this happen is when you come to preview them to an audience.

Launch

Like I mentioned before, you can’t have something like a timer link (which you may have comes across in certain Hi-Fidelity Wireframing tools) that will automatically switch between screens, it’s something that needs to be created manually here.

Let me show you how you can set up full screen links when required.

Simply draw out a Rectangle that covers the whole screen area…

And from the Inspector, go ahead and remove the Border, reduce the Opacity down to 0, and then from the Links menu, select the Welcome (Sign Up/Log In) Wireframe.

You will see a small arrow at the bottom right of the Rectangle to show you that a link is now in place on this element.

If you want to try out the Preview at any time simply use the shortcut (Cmd + F).

You will also see the Settings at the top right of the preview window (the little Cog icon). Here you can adjust how your Wireframes will be presented.

Welcome

For the Welcome (Sign Up/Log In) screen we have 3 links that we need to setup here; Sign Up Button, Log In Button and the Swipe Label, so let’s quickly get them linked up.

Select the Sign Up Button, then from the Inspector, and due to the fact that this is a Symbol, you need to click on Edit Source (or you can simply Right-Click and select Edit Symbol Source), so we can add the link there, which in turn will then propagate to other instances of this Symbol.

Once inside the Symbol editor, make sure the Symbol is selected in the Canvas area, then go to the Inspector, and select Sign Up from the Links panel, and once you’re done click Back to Mockups to return to the main screen.

Go ahead and follow the same procedure for the Log In Button. Choosing Log In (the obvious has been well and truly stated there) from the Links panel.

And for the Swipe Label, select it on the Canvas, and then choose Onboarding (Slide #1) from the Links menu in the Inspector.

Onboarding (Slide #1)

Concentrating on the Skip link first. We simply want to link to the final slide (which contains the Sign Up/Log In buttons once more) in the Onboarding sequence, so let’s set that up quick.

Select the Skip link and then from the Links menu, choose Onboarding (Slide #4).

Then group (Cmd + G) this element, and from the Inspector choose Convert To Symbol (give it a name like Skip Link). When we move onto the next few Wireframes in the Onboarding sequence we’ll swap out the static Skip link for the Symbol we just created saving us some time.

Just a quick heads up before we move onto the next part…

Once you’ve created a Symbol, you might want to change it a little each time you use it. Imagine for instance a Symbol you created as a template, containing a web page’s title and navigation. Symbols allow you to achieve this result by letting you override certain Symbol properties each time you use a Symbol.

And that’s what we’re going to do here…

Double-Click on the Dot Navigation Symbol to begin editing it. Now we can go ahead and override certain properties without affecting the Master Symbol.

So select the 2nd Dot, and from the Links panel choose the next screen in the Onboarding sequence. And once you’re done, click on the Home icon on the floating bar to exit Edit mode.

Onboarding (Slide #2)

Firstly we need to swap out the Skip link, and we’ll call upon the Transform to… feature once more.

With the Skip link selected use (Cmd + T), and then search for the Symbol we created on the previous Wireframe.

We now have the Symbol inserted with the link reference attached that we put into place earlier. Easy as that.

For the Dot Navigation, follow a similar procedure I showed you for the previous screen, and choose the next Wireframe in the Onboarding sequence.

Onboarding (Slide #3)

Piece of cake this one.

Like before, swap out the Skip link for the relevant Symbol, and adjust the Dot Navigation to link to the next screen along.

Yup, that simple.

Onboarding (Slide #4)

Nothing to do here. Our 2 buttons (Sign Up & Log In) are Symbols with the relevant links already in place that we setup on the Master Symbol.

Sign Up

We won’t be touching the Terms & Conditions link here, it’s purely for display purposes for this tutorial.

We will need to override the Sign Up button Symbol though so it links to the correct Wireframe, so like I showed you earlier, Double-Click the element to enter Edit mode, make the sure the button is selected, and from the Links menu choose ‘Explore (New User & No Location Set)’, and once you’re done click the Home icon to exit Edit mode.

Lastly, we need to setup the link that enables the user to navigate to the Log In screen, so let’s go ahead and do that.

With the ‘Already have an account? Log In’ text selected, jump across to the Inspector, where you’ll see that Balsamiq has taken note of the link text that we created previously, and has assigned it a link option. So from the Links > Log In select menu simply choose the Log In Wireframe.

Now if you Double-Click on the text element you will see how the link formatting works in Balsamiq.

You have the square brackets [] to turn a piece of text into a link, and the rounded brackets () next to it with the name of Wireframe you’d like to link to.

When working on projects in the future, and once you become more comfortable with Balsamiq this is another way of quickly adding links to any block of text.

Log In

Similar to the previous Wireframe we won’t be touching the ‘Forgot Password?’ link as this is purely for display purposes.

Like we did for the Sign Up Button on the previous Wireframe, we’ll need to override the Log In button Symbol so it links to the correct Wireframe.

So like I showed you earlier, Double-Click the element to enter Edit mode, make the sure the button is selected, and from the Links menu choose ‘Explore (New User/Existing User) Location Set’, and once you’re done click the Home icon to exit Edit mode.

And finally for this Wireframe, we just need to setup a link on the ‘Don’t have an account? Sign Up’ text element.

So following the steps I just showed you, create a link pointing to the Sign Up Wireframe.

Explore (New User & No Location Set)

Like I mentioned a little earlier, Balsamiq does not allow you (when in Preview mode at least) to have scrollable areas as such. Like they themselves mention “Whatever you can do with pen & paper, you can do with Balsamiq”.

So between this Wireframe and the next one, we need to create the illusion that the user has scrolled down the screen, and we can set that up similar to like we did with the Launch wireframe. Let me show you.

Place a Rectangle that covers the body of the screen.

Then from the Inspector, remove the Border, reduce the Opacity to 0, and from the Links menu, choose the next Wireframe along, that, if you’ve been super-awesome and following the same naming conventions as me will be ‘Explore (New User & No Location Set) Scrolled’.

Explore (New User & No Location Set) Scrolled

For this Wireframe we just need to set a link on the Turn on Location button that will link to the Alert Wireframe.

So with the button selected, choose the ‘Explore (New User) Location Alert’ Wireframe from the Links menu.

Explore (New User) Location Alert

For the following Wireframe we’ll be needing to set up 2 links here on the Alert Box. The first one ‘Don’t Allow’ which will take the user back to the ‘No Location Set’ Wireframe, and the second ‘OK’ which will take them to the ‘Location Set’ Wireframe.

So with the Alert Box selected, jump across to the Inspector, and in the Links panel for the ‘Don’t Allow’ link choose the ‘Explore (New User & No Location Set)’ Wireframe.

And for the ‘OK’ link choose the ‘Explore (New User/Existing User) Location Set’ Wireframe.

All done and dusted.

Explore (New User/Existing User) Location Set

Just a quick setup here that will link us through to the final Wireframe.

Place a Rectangle over the Image and Event Title, remove the Border, reduce the Opacity to 0 and then link it through to the ‘Event Overview’ Wireframe.

Event Overview

We’ll leave this final Wireframe as it is. Link Free. But you’re more than welcome to add a few links in here if you wanted to. For example on the Back Arrow icon to return us to the previous Wireframe, or the Explore menu item in the Tab Bar to take us to one of the previous Wireframes. I’ll leave that one with you.

Using the Preview (Full Screen Presentation) Mode and setting up Mid-Fidelity Wireframes

Like I mentioned at the start of this section, if you do want to present your Wireframes at a higher fidelity you can do that by simply making a few adjustments in the Project Info panel.

Let me show you.

Show the Project Info panel (Cmd + ,) and change the Skin and Font.

Switch to Wireframe, and then let’s go with Helvetica Neue for the font.

Use (Cmd + F) to preview your Wireframes at a higher fidelity.

Looking great. Nice work!

Now that we have our Wireframes in place, and a Low-Fidelity Prototype to boot, we can move onto Part 2 where we’ll look at recreating our Wireframes as Hi-Fidelity Mockups/Comps with the help of Sketch.

Part 2 of this 3 part series will be arriving soon. I hope you can join me.

Please Note: The Deluxe Edition of this Tutorial (HD Videos and more…) will be arriving very soon at https://kissmyui.com

Join the Mailing List below to find out more.

Many thanks for reading the article,

Marc

<a href="https://medium.com/media/926124c7ea9d8f008b9b7caae23ee63a/href">https://medium.com/media/926124c7ea9d8f008b9b7caae23ee63a/href</a>

Process Tutorial Series: Explorr — Part One (User Persona & Wireframes) was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Process Tutorial Series: Explorr — Part One (User Persona & Wireframes)

Top Stories