Sunday, 2 October 2016

A Rapid Mockup, Wireframe & UX Prototyping Tool for Designers

The process of wireframing can be totally non-tech stage of any app or web development, requiring only a skeletal outline of essential elements, such as header, navigation, content and footer area, to illustrate any possible interaction from a user. With that said, it’s the utmost important, yet underused, stage of any given project.

There are more avenues than ever to sketch a wireframe, even most notably pen and paper (the most cost-effective and easiest way), but for the sake of this article we have focused on a new-born yet feature-rich tool - Mockplus, with every aspect of the product covered in details. Let’s read on and prototype away!  

An Overview of Mockplus

As a relatively new player in the prototyping field, Mockplus has emerged as a real stand out thus far with a smart team from the orient supported. Instead of overemphasizing on functionalities, this agile design tool does give user experience the highest priority, making sure anyone of every level can prototype faster, smarter and easier. It’s user-centric interaction and highly-intuitive interface have gained an increasing number of global customers.      

Specifications & Feature Highlights

Though some people may prefer to go vanilla and create prototypes by hand using paper and pen, one thing that UX designer or researcher have in common is they keep looking out for new technologies. No one would like to use sophisticated tool if he/she can achieve it by a simple alternative. Following are some highlighted features of Mockplus that may take your design process to the next level with least efforts.

1. Fully Visualized Interaction

Interaction design focuses on creating engaging interface with well thought out behaviors. It is drag-and-drop based at Mockplus, which means you can build interactive prototypes in a totally visualized way, with no calculation or repetitive selection required. As shown, the Link Point on each component is all about setting up interactive components and a link between pages, no matter in-page or cross page.

Let’s say we need to make a movable picture when the “Adjust” button is clicked. Just click on the button component and then drag the link point to the needed picture. Once done, a dialog window will appear on the screen to prompt you to define a command for your component. In this case, we choose “Move” and press “OK”. 

2. Ready-made Components

Pre-designed and readily available components will obviously reduce the overall design time and greatly improve quality. At Mockplus, there are over 200 ready-made components specifically designed to fit both mobile and web apps, making interactive design as time-efficient as possible. The newly-added components include pop-up panel, image carousel, stack panel, scroll box and sliding drawer, etc.   
Taking the “Scroll Box” as an example, you can achieve scrolling for a web prototype by simple drag-and-drop. Also, there is another effective way to set scrolling for mobile prototype with header and footer area fixed. This tutorial illustrates how it works. 

3. New Features Wrapped in V2.19

Like many other tools on the market, Mockplus keeps improving and evolving rather rapidly, with a cool set of new features added in each update. As for the upcoming version 2.19, there are four spotlights that you should never miss out:

A. Around 3000 vector-based icons. A total of 3000 icons will be available for free use, with 2500+ vector icons and 400 flat icons included. All of the new icons are high-quality and support proportionally scale.

B. Auto-recovery option. This type of interactive command allows you restore the original interaction after the first interaction occurs. With that said, only one touch of the button can revert back to your original interaction.

C. Export to project tree. You have a high-level view of page flows and choose to export to various file forms, ranging from Tree View, Mind Map, to CSV (opened in Excel), Text as well as XML.

D. Copy text from demo package. The ability to copy all or only the selected text from the demo package by dragging marquee on the prototype page. It’s a time-saver for UI designers and developers.

4. Selectable “Wireframe” & “Sketch” Style

When rendering your design, you can decide on a style for the mockup. The Wireframe style adopts geometrically reduced shapes, while the Sketch style takes on a hand-drawn outlook. Mockplus allows you to switch between the two styles with ease.  

5. Multiple Choices to Preview on Any Device

Not only does Mockplus let designers quickly make interactive prototypes of their mobile, desktop or web apps, but also offers a fluid view of prototypes on any device, in a web browser or on a mobile device using the Mockplus app for iOS and Android.

In the case that you need to make a mobile demo for completed sketches, there are two flexible ways to choose: one way is by scanning the generated QR code, another way is by publishing to the cloud. Undoubtedly, such a device preview will give you instant feedback of how a layout works on different screens.  

Pricing Policy & Exclusive Offer

The pricing of Mockplus is “Pay as you go” with a monthly or annually plan to enjoy rapid prototyping on mobile, web and desktop platform. The monthly subscription is priced at $20/mo, but there will be an exclusive 50% discount
for yearly plan which costs $119 only. The “Group Purchase” is meant to anyone who needs three or more copies of this software for team use, offering up to 40% discount without tied contract.  

If you happen to be a student, teacher or educator who is engaged in UI/UX design or other software design training related positions, you can get FREE trial of Mockplus Pro version. Submit your request and they will be back in touch soon.

Technical & Documentation Support

It’s always important to have reliable technical and documentation support to guide your work. Instead of leaving customers in stranded and helpless, Mockplus treats every user as they treat their own family with efficiency and professionalism. It has been praised for responsive and informative support since the first inception.    

For regular users who want to address their minor issues independently, they can search and find documentation articles from Tutorials page. Plus there is a series of YouTube videos awaiting for your discovery.     

How about Customer Satisfaction?

Customer reviews are an increasingly important part of the purchase journey, providing the kind of mass exposure that you might never be able to find via traditional channels. Based on collected online reviews, a majority of people are satisfied with Mockplus service and product, with little negative remarks yet to discover.

Ari Arturo Velázquez Fierro, an interaction designer, said “I have used the tool and I love the idea that making screen view through QR code. I’m really satisfied with what I see and even start recommending it at the office to some of my colleagues. I love this app and it is super easy-to-use I must say”.

Shalaka Bhagwat, a freelancing journalist & content creator said “I love what I see at Mockplus, a rapid prototyping tool that offers template designs for various app components, making it so convenient for the end user, especially if they are keen on investing their time in working on other stuff that goes into making an app: the logistics, the market survey and communication”.

Perhaps the biggest downside of Mockplus is the lack of HTML file format, which won’t be available until mid-August. Also, it is a non-web-based tool (in consideration of the project file security) and may take some time for advanced features, such as adaptive design.   

Closing Notes - The Choice of Rapid Prototyping & Wireframing

As there are too many tools focusing on functionality instead of usability, the presence of Mockplus is like breathing fresh air with the ease of making ideas visible in an instant. Also, the user-friendly pricing and well-informed support make it an excellent choice for rapid prototyping and wireframing. For more details, just visit

About Author

Berry Sarah


Saturday, 1 October 2016

How to Get Started in UX/UI Design?

As most UX designers may tell you, there is no prescribed path to becoming a UX designer. Some designers may start with degrees in arts, others were trained in architecture school, while some even came from entirely different professions. Not a few designers have been broken into this field without any formal training, with a genuine empathy for others and the belief of making lives better through design.

However, it’s not easy to land an entry-level UX position, and many new-comers may get lost by the interchangeability of design terms, like UX and UI. So before diving deeper into starting a career in UX, let’s take a quick look at the two different terms in below.        

 What Is UX/UI Design?

At the very start, let’s define UX & UI design before moving on to our point: 

UX Design (User Experience Design) - is all about enhancing user satisfaction and designing the complete user experience. UX requests a solid understanding of sociology, psychology as well as design to identify and address the real user problems. Also it requires tactical skills, including concept iteration, user research, prototyping and usability testing. One of the most critical skills for UX designers would be communication.
 UI Design (User Interface Design) - is all about selecting the right interface elements, such as text fields, buttons, check boxes and drop-down lists, to create the tangible interfaces that users can readily understand and easily use. In small-sized companies, UI designers may conduct the entire process from user flows to hi-fidelity mockups; In large-sized companies, they are likely to specialize more in defining the layout of an app or website (that’s what we call “Sketch” or “Wireframing”).  

The ultimate goal of UX and UI design is making the user’s interaction as time efficient and simple as possible. Also the lines between UX and UI designers are always blurred in accordance with different company size and demands. For more information about frequently confused design terms, like UX, UI, IA, IxD, here is another post for your read.

 How to Become a UX Designer?

There is no need to repeat others’ career path, and below are some practical advices for those who are thinking of stepping into UX design industry.

1. Get Yourself Educated

This does nott mean you have to go invest in a university degree, but a formalized education won’t hurt. There are may higher education UX courses and programs out there, while it’s not a necessary step to break into the UX field. Just as one UX expert put: “If you are a ‘lifelong learner’, in other words, if you are paying attention, you will be able to take previous experience and apply lessons learned from them to your new situation. That is more important to me than specific skills you might learn in school.”

Here is a comprehensive list of recommended ebooks, which would form a good starting point. On a more informal level, you can take participation in various online courses, and following are some recommendable learning resources.

General Assembly - They specialize in today’s most in-demand skills, offering a complete program in UX design. It’s possible to take different kinds of workshops and classes, as well as attend as a part-time or full-time student. 

 DesignLab An authorized design program that would pair students with experienced mentors. Their courses vary between 4-6 weeks and charge around $300.

Udemy - As a competitor to Lynda, their pre-course pricing makes it a great supplement to designer’s education. There are some free pre-introductory courses there.

Lynda All courses on the site have good reputation, requiring you to subscribe before accessing them. There is a 10-day free trial and the pricing goes from $25/mo.

Fundamentals of UX Design - It’s coming from Tuts Web Design, consisting of sixteen 2-hour lessons at the fee of $15.

UX Apprentice - Cost-free courses and learning resources for anyone who is looking to learn the basics.

Aside from articles and online courses, you can also engage in design communities, ranging from visual design websites like Behance and Dribbble, to more comprehensive websites, like UX Magazine. Being a part of a community will make self-learning less intimidating and you can get inspired by others’ creative ideas. More websites and blog resources to get you educated. 

2. Take Advantage of the Right Tools

Since you have learned the fundamentals, you still need to practice your knowledge under real environment. UX design is not just working in front of a screen, and you have to be taught how to create interactive wireframes and conduct usability testing sessions. Both require software to achieve. Considering of ease-of-use and included features, here are the most recommended tools:


Established in May 2002, Axure is considered as the standard in interactive wireframe software and recommended for professional designers looking for sophisticated prototyping capabilities. It does help user experience professionals, product manager and business analyst as well, but is far from an ideal choice for beginners for its steep learning curve.


As a flexible prototyping tool, Justinmind supports multi-platforms and can work well for simple click-through prototypes or complex interactions. The device-specific templates and gesture-based interaction set it apart from other tools. However, the free version is somehow  limiting and its moderate learning curve still keeps many first-time users away. 


Founded by a former senior engineer of Adobe in 2008, Balsamiq has appeared to be one of the best wireframing program providers in the industry. As is advertised “Life is too short for bad software”, Balsamiq Mockup allows simple elements and fast design creation for websites & mobile apps. It may have a top limit on the quality of created mockups and the lack of template window is another downside.


InVision is a US-based company that takes many useful customization and import options from Marvel, with more collaboration features included. A highlight is you can share completed mockups through the in-built LiveShare tool, which is more effective than sending a .PDF file. While this viewer app is only compatible with iOS devices like iPhone and iPad, with no support for Android and Windows Phone. 


Developed by a team of passionate developers from the orient, Mockplus is a relatively new player in the industry. It’s a rapid prototyping tool to turn design ideas into functional prototypes faster, smarter and easier. It’s visualized interactions and drag-and-drop UI largely simplify the design process and keep designer focused on the graphic quality and content. Live preview can be achieved by scanning QR code and the most recent 2.19 version will add 3000 vector icons. Its educational offer is awaiting for fresh minds.  

Beyond any doubt, there will be other alternatives on the market, with both pluses and minuses existing the same time. For those who are in need of testing and analytic tools, here are the recommendations:

A/B Testing Tools, which aim to help test one or multiple elements on certain page to see which received the most action. These types of tools can be purchased on monthly basis. Some popular choices are A/B Test MasterIntuitionUsabilityTools
Web Analytics Tools, which give you better understanding of website traffic and visitor behavior from both optimization and conversion perspective. Google Analytics is my tool of choice.
User Feedback Tools, which enable you to gather user information and feedback. Some general tools include Mechanical TurkUsabilityHub and Ethnio.

3. Find Yourself a Mentorship

Mentoring is rewarding, and a high-quality mentorship can be an important part of a designer’s growth process. You don’t need to catch up as often with a potential mentor, but try to soak up everything that an experienced UX designer can offer you when talking on Skype or taking a quick coffee.

It may be daunting to find a mentor as UX professionals are always busy, but you may find a mentor through some communities you join or some courses you take. Take a look at this article on how to find your design mentor and also consider whether you want to pay for a mentorship service. It’s true that almost anyone you respect can serve as design mentor, and just talk to everyone you can and be open to different opinions.   

4. Get Some Experience & Hired

No one can become a successful UX designer without building things. Almost every UX designer starts with some jobs to practice their skills. That’s where online portfolio comes in handy. Just like a UI designer would have an A3 portfolio that shows posters, logos as well as t-shirts designed by himself, you need to present examples of your created deliverables.

It’s great to propose an apprenticeship or internship at a company, and your portfolio will be a great help that tells a story about the process you follow will be a great help. Generally, the more you’ve learned, the more opportunities will open up for you. This could be a virtuous cycle in which you can learn and grow. 

 Bottom Line

At last, here’s a quote written by Ivan Glass to share with all people who have been planning or just wondering to break into the UX world. Enjoy the ride!

"Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know its normal and the most important thing you can do is do a lot of work."
Please comment below if you have any further thoughts or suggestions to share. 

About Author

Berry Sarah

Everything You Need to Know about UX Sketching

If you’ve done any sort of serious creative work, you are all too familiar with creative block. It feels like hitting a brick wall: None of the ideas you’re able to visualize are good enough, or can’t work in real life.
For designers, the feeling is all too familiar. However, like any complicated problem with no clear solution, a smart process can make all the differences. This is where UX sketching comes in.
UX sketching is a crucial, yet often overlooked, aspect of user-experience design. Sketching is a very efficient way of communicating design while allowing designers to try out a multitude of ideas and iterate them before settling on one.
In this post, I intend to cover everything you need to know about UX sketching, including the following points:
·         Introduction to UX sketches and wireframes
·         UX sketching basics, tools and techniques
·         Clarifying sketches with notes, annotations, numbers
·         UX sketching tips and tricks
·         Mini-methods designed to boost quality and productivity
·         All you need to know about Wireflows
·         A quick guide to UX flow sketching
UX Sketching is a Two-step Process
Many options must be considered in design, which results in the choice and the execution of the best one.Designers consider their options, and then proceed to work out the details, thus making UX design a two-step process:

·         Idea Generation
In the initial step, multiple ideas are generated, but since they cannot be fully shaped, it is not uncommon for some of the elements to be incomplete or missing. The main thing is to consider different approaches and to decide which is the most efficient in the context of your task and the various constraints of the project.
·         Detailization and Refinement
Step by step, you settle on a few promising variants and proceed to work out the specifics, thus rendering some ideas unsuitable.
UX Sketches and Wireframes: Introduction and Classification
Your wireframes may differ depending on factors such as the desired level of detail, colors and style, whether you are going to show them to someone, and so on.

Good sketches will help you think clearer, find better solutions and save time.

I singled out the following sketch types:
·         Sketch: Idea Generation
These are initial sketches. Lower level details are simply noted. A limited number of colors is employed.
I draw a lot of basic sketches to consider the problem from different angles and to consider different solutions. While drawing such sketches, I am also striving to generate as many solution variants as possible.

At this particular step incompleteness frees my mind, which is why it is so important to avoid getting bogged down in minutiae at this stage. My goal is to generate as many ideas as possible and choose the most promising ones.

·         Wireframe: Specification, Detailed Phase
I usually pick promising sketches and go over the details, after which I choose the best variant and work it out in greater detail.
However, this does not mean every single detail. Obvious things may just be noted. Moreover, some aspects will be difficult to describe on paper.

At this step, I draw all the important details, but I do not yet draw wireframes in Balsamiq. After everything is done on the paper, I start drawing in Sketch.

Digital tools provide a lot more creative freedom than paper and you can easily shift attention to minor things. For example, you can focus on "pixel polishing" instead of design.

·         Visual Design Draft
This is a rarely used approach, but sometimes it can be helpful. Various visual solutions are considered at an early stage of the project, but it may take a long time to create digital sketches for all of them. That is why I draw design sketches on paper first, to consider different options and choose a visual design direction.
·         Components/Elements Breakdown
I find this technique useful when I have already have a general idea and I am thinking about a particular page functionality, or of the integral parts of interface components. I draw different page elements, going into detail, and then draw different possible positions of the page elements.
Elements, even the most simple ones, must have a state; a button can be pressed and it has a hover text block that may or may not be empty. The more complex it is, the more states it has.
Getting Started with the Basics
·         Prepare your tools - Find the most convenient place possible, a large table with plenty of space. Take a lot of paper and prepare some pens and markers.

·         Warm up - In order to get ready I recommend drawing some lines, circles, basic templates and icons.

·         Define your goals - Decide what you want to draw. Set your aim and decide what story you have to tell. Determine the desired level of detailing. Decide whether you are ready to draw a lot.

·         Define your target audience - If you are doing this for yourself, you don’t need to worry about the way your sketch looks. However, if you intend to show your drawings to a client, make sure you allow some extra time to add more details to your sketch.

·         Set a time frame - Having decided on the amount of time you are ready to allocate for sketching, let’s say 30 minutes, will help you focus on your work.

Now, you are all set and you can get started:
1.   Draw the edges - Draw the frames, a browser or phone window, a part of the interface, and so on.

2.   Add the biggest or basic elements - Menu, footer, main content.

3.   Add details - Add relevant details, but keep them simple at this stage.

4.   Add annotations and notes - These are required only if you’re planning to share the sketches. However, they can be useful even if you’re doing them for your eyes only.

5.   Sketch alternatives - Sketch some quick alternatives to your solution.

6.   Pick the best solution - Choose the best options.

7.   Add shadow and bevel - This is particularly important for sharing purposes. Add a shadow to make your sketch visually appealing, which is important if you plan to share it with team members and/or clients.

8.   Save the sketch - Take a photo or put it in a folder. I have a few paper trays on my table for sketches.

9.   Share - I usually use one of the following sharing methods:
·         Scan sketches via Evernote and provide a permalink to other team members or stakeholders.
·         Take a photo and upload to InVision.
·         Upload and map images to Realtimeboard.
·         Or just email a photo.

10.     Review the sketches and add notes - Take a break and then come back to your sketches a while later. Take a look at them again. Does the sketch still make sense to you? A good sketch must be easy to follow.

If you as the designer can’t understand something you have in your sketch, then the solution won’t be successful. Either the sketch doesn’t allow you to visualize your ideas well, or the ideas are too complex.
Clarifying Sketches with Additional Elements
Find or draw a proper sketch, and then add the following details to it:
1.   Title - Sometimes adding a title is a good option. Write a description and date, if necessary, at the top of the sketch. The title will help you understand what you are looking at and whether or not the sketch is relevant. This is especially useful if you have a lot of sketches or you are going to show to others.

2.   Annotations - Annotations are names and notes placed close to an element, to explain its content or other attributes. They add details that clarify other elements, and are usually difficult to draw. For example, it could be the name of the block, some interaction details, an explanation of a picture, some ideas for future design variations, and so on. You can check out one of my examples to see what an annotation sketch looks like.

3.   Numbers - Number the elements of your sketch, or the sketches themselves. You can decide how to order them (e.g., by interaction flow, the order in which you created them, etc.). It may also be useful during discussions (especially remote discussions), as your colleagues and clients can just point out the sketch number in their feedback and you will understand which one their comments refer to.

4.   Arrows - You can use arrows to indicate screen transitions. They can also be used to connect different parts of sketches, to indicate a sequence of actions, and so on. Since the meaning of an arrow can vary, just above the arrow you can add a description or explanation of what the arrow is meant to signify. Here is an example of a basic sketch showing a transition and several difrerent states.

5.   Notes - Just like annotations, notes are used to explain concepts. However, notes differ from annotations in their placement. They are not attached to an element or located near the described element, similar to this example. Notes can be placed at the top or bottom of the page. They can even describe elements that are not included in the design, questions that you may have, general explanations, unsketched ideas and so on.

6.   Gestures - Gestures are relevant in the case of touch device design. Drawing a hand gesture may require practice. There are several variants of gestures used to indicate different types of actions, so it is better to decide in advance how you designate a particular action (if it is not obvious, of course) and to practice drawing it.

7.   Feedback - You may receive suggestions for fixing or improving the sketch after showing it to others, or after you take another look at it yourself. It is often useful to mark such feedback in a different color so as to help differentiate feedback from the original sketch.

You can use different colors for different types of elements. Sometimes I use black for drawings, blue for links, dark green for notes, red for titles and feedback. Try to use different colors in your sketches, but make sure your choice of colors is consistent!

More Specific Tips and Tricks
1.   Don’t worry about the quality - Don’t look at the sketches on Dribble; they are about something completely different. Bear in mind that the main purpose of sketches is to help you think clearer, find better solutions and save time.

2.   Practice - For a start, you can try to draw a few apps. Open a web or mobile app and try to copy the screen, describing the elements in the notes. Whenever you have some free time, practice drawing basic building blocks of your designs. In general, practice makes perfect. In a while, it will become part of your designer self.

3.   Buy a folder - I often don’t work from my office, but rather from a cafe or my home. Paper sketches are very prone to damage, so buy a simple folder to keep them safe and sound.

4.   Bring tools with you wherever you go - This helps ensure that you can capture your idea on paper at any time, otherwise you may just lose the thought or not be able to remember it in sufficient detail. I always have a notepad, a few A4 sheets, and pens with me.

5.   Share with others - It’s very important to engage other people and communicate with your team. Involving others and getting their feedback, especially early on, helps save time and resources in the long run. You can also encourage others to draw the way they envision the design.

6.   Paper trays - Think of placing paper trays on your worktable. For example, I have three of them: For incoming tasks, for sketches, and clean sheets of paper.

7.   Experiment and customize - My recommendations are based on my experience. In time, you’ll find out what suits you best; which methods, which sequence of steps, what exactly fulfills your creative potential. You will get there only if you constantly try something new, which is why it’s important to experiment with different formats, styles, and try new templates.

8.   Use templates - Templates will save time and implicitly take into account format restrictions, freeing up more time to focus on what is important.

Additional Mini-methods to Improve Your Sketches
These aren’t necessarily tips and tricks, but they’re a collection of methods, tools, and suggestions that should boost your productivity or improve the quality of your sketches.
1.   Create a Sketch Board - One of the biggest benefits of using pen and paper instead of a digital sketching tool is that you can actually stick it to a wall. Everyone on your team can see it and participate (although I recommend setting up review sessions).

·         You will see your sketches yourself, and this will stimulate your thinking and let you see the big picture, not isolated pieces, but the whole system. You will see interactions between parts and the way they fit one another.
·         Create the sketch board - attach your whiteboard sketches. If there is no whiteboard in your office, you can use double-sized adhesive tape or post-it note sheets to stick your sketches to the wall. If you don’t want to stick to the wall, you can find a big piece of cardboard paper instead. I strongly recommend using sketch boards, as they’re one of the best design tools.

2.   Use a Whiteboard - A whiteboard is a great drawing tool. It has a number of advantages: It is collaborative; it is easy to involve other team members in the discussion and in the drawing as well. Even if their ideas do not fit well, you will understand their way of thinking and it will help you to be on the same page.

·         Markers do not let you focus on details, you have to think about the general things. Sketches are open to interpretation.
·         A whiteboard is easy to clean and make corrections on.
·         There is a lot of space and you can easily think through the whole system flow.
·         You can attach sketches, printouts, and reference materials using magnets.

3.   Prototypes - Make a clickable prototype to evaluate your design. Try to get feedback about some elements. This works particularly well when you are using templates - your sketches are of the same size. Obviously, it will be much easier to draw same size sketches if you are using a template. I will try to make it even easier by providing you with a few templates you can download and use: MobileBrowser multi-windowBrowser scrollPersonas.

4.   Use your Printer and Scanner - Draw the framework by hand (you can use ruler to draw more accurately), then just scan it using a scanner or mobile app, and print it. You can edit your template in image redactor before printing. You can remove unnecessary details or duplicate some elements. You can also print a readymade site page, photos, and other descriptive elements. You can paste the cut-outs in your sketch.

5.   Use Evernote for Scanning - Evernote is a great design tool. You can keep and share your sketches in it, you can create themes, and use tags to organize your sketches. The abilities of the “Scanner” mode are particularly impressive. You put your sketch in front of it and it “scans” it, so you get the copy of the sketch. Then you can invite your colleagues to Evernote and give them your note link. Since there is a mobile app for tablets and phones, you can always have your sketches at hand.

6.   Hybrid Sketching - To put some life and realism into your sketches you can combine them with photos. That means that you have to take a photo and then draw some story with interface elements on it. This can also help you to notice some interaction issues and details.

7.   Tracing Real World - If you need to create a storyboard, illustrate an experience in a specific context (e.g. a person using a smartphone at a bus station), you need to include depictions of people, places, and various real-life objects. These can be difficut to draw, especially if you haven’t mastered drawing skills, but here’s simple tip:

Take a photo of the object or the situation, and then obtain the key objects contour using an image editor. You can use the resulting contour in your sketches afterward.

Of course, if you have a tablet and stylus it will be even easier.
Wireflow: Outlining System Flow and Branching
The wireflow is essentially a sequence of the system flow, screen after screen, with branches and decision points. We should consider how a user addresses their task, the way they move from screen to screen, and their overall experience of the product over time.
Wireflow, or what you are drawing and the way it is connected, could be organized according to the following approaches:
·         Sequence - A sequence is a straight journey, screen after screen. It can also be a story with decision points; you show not only the journey but also decision points and different paths the user can choose. You can show the structure of screen interaction.

·         State changes - Depict different screen states of some element and the conditions or actions that cause the transitions between these states.

·         Screen vs. screen elements - You can draw the whole screens or consider micro-interactions and interactions.

·         Platforms - You can consider a one platform experience or multiple platforms.

·         Scope - Will you depict a part of the user journey or the whole journey? One user interaction with the system, or multiple users’ interactions?

I generally try to define the following wireflow types, depending on the organization and practical use:

1.   Mapping overall flow and high-level flow - Promptly sketch the screen shifts and draw the general journey of your product usage. Here you can include some context and you can optionally show some user interaction. For example, an e-commerce shopping service is quite a long journey that may include a lot of steps: How the user found the shop, the steps they went through to order the product, how they paid, and so on.

2.   Screen flow - This focuses on a specific functional flow through the system. It could be a small straight sequence of screens or a journey with branching. For example, a user uploading some photos or a video.

3.   Navigation scheme - Draw your screen and the options it contains. This is not supposed to map the journey. This step includes information that shows the options a user can choose, the directions users have, and various app parts. I usually create a navigation scheme at the beginning of a project. It serves to understand how navigation should be structured (what points should be included, how many levels are necessary).

4.   Screen states - Draw the screen or element states (an example might be a file upload dialogue). In this case, for example, the screen will have the following states:
·         Blank
·         A user pulls the file in the active area
·         The file is uploading
·         The file is uploaded
·         There is an error
Sketching UX Flow: A Quick How-To Guide
The wireflow design process is similar to the wireframe one. Many steps are similar or identical, but there are some important differences:
Define what you need to draw - Decide exactly what you want to draw (e.g. the general history or a fragment of your design). Do you want to generate different options or to think through the details of one journey? Decide whether you are going to show your sketches to someone else or not.

Define what keyframes and transitions you should include in your drawing - If you add all the screens and shifts your wireflow will be very long and complex. Consider which key screens you should show to convey the essence of the interaction that helps accomplish your task. The same goes for screen shifts. You need to choose which shifts will be more useful in expressing your idea. Check out this example for reference.

Define the starting point - What will be the starting point of your journey? You can start with the entry point, i.e. the start of the journey, for example, what a user sees when they log into your app. Alternatively, you can start at the midpoint or with the most interesting/difficult/important screens or process steps. Or you can start at the end, with the end-result achieved by a user, and describe the steps the user took to come to this point.

Define your approach and make a general paper sketch.

Decide what comes next - After drawing the starting steps, decide what goes next by answering the following questions:
·         Which way does this step lead users?
·         Which way do you want them to go?
·         What do they have to do to get there?

Sketch alternative routes, entries - Think about alternative ways the user can get to each step:
·         What will happen if the user’s Internet connection fails?
·         What other options do they have?
·         What can go wrong in the case of user or app error, what will happen?
·         What will happen if the user closes the app at this step?
·         Where will the user start the next time he launches the app?

Think about alternative flows - Analyze the history, design an alternative flow, and sketch it.

Add annotations, notes, details - Add the explanatory elements that will clarify non-obvious details.

Save - Make a digital copy of the sketch.

Share - Share the sketch (e.g., via Evernote or Invision).
Essential UX Flow Sketching Tips and Tricks
Draft a wireflow first - If you are going to think quite a long journey over, you would better make a quick sketch in order to understand how much space you need and in order not to miss some important steps or details. It would be difficult to add them to the paper sketch afterward.

Don’t create a huge map with too many details - Paper sketches don’t have an undo button, so it will be difficult to make changes. You may draw the details too accurately and this will distract your imagination from the generation of different high-level variants. Instead of creating a huge scheme that would illustrate the entire system, try to focus on the key scripts and try to dedicate an individual page for each script.

Cut unnecessary details and combine various detalization levels - It is not necessary to draw all the interaction descriptions, so try to use only the key elements of your journey. While drawing a huge interactions map, you have no need to work every single screen out in detail. Some screens could be just represented by several squares, and other, key screens, could be worked out in detail.

Try different paper sizes - Try different paper formats, A3 or A5. Paper sheet size will limit you and will affect your process in different ways. A small paper sheet will not let you add many screens or details, but it can help you to concentrate on the main ideas. Using a big paper sheet you can draw one huge journey, a lot of details and additional notes. Alternatively, you can place a number of small journeys on it.

Post-it notes can help too - You can also try to use Post-it notes. You can draw separate screens or some footnotes on them, or you can draw additional states of your sketch’s elements. Their advantage is that they can be easily replaced, you can also simply move the note somewhere else. For example, in case the flow has changed you can just change the order of your Post-it notes.

Use templates - Try to use templates. They will save time and will enable you to create more clickable, high-quality prototypes.

Try using a whiteboard - A whiteboard has a number of advantages. It is becoming more and more popular because it allows you to draw a huge journey with a lot of branches. You can draw a lot of application components on paper and then just attach them to the whiteboard using magnets, adding them to the journey.

Sketching a shadow - Shadows can help you to mark important elements and they add visual attractiveness to your sketch. I use three different types of shadows

·         Lines following the light direction - this does not always look beautiful, but you can use the graduation and pick the objects up to different “heights”
·         Outlining of some part out with a darker color (only the bottom or the bottom and right side)
·         Using the Pro-marker (or its equivalent in the app you use for drawing)
Drawing components - An objection like “I can’t draw that well” may stifle your initiative. It is actually easier than it sounds. Even the most complex sketches are generally composed of a number of basic blocks, like in this example.

If you can draw a point, a line, a triangle, a square and a circle, then you have the essential building blocks you need to draw anything for your sketch.

Putting it all together - The basic elements, buttons, radio buttons, and dropdowns are composed of basic elements. After learning to draw these elements, you can combine them and draw complex blocks and components.
Wrap Up
The goal of this post was not to create the ultimate, one-size-fits-all guide to UX sketching, or sketching in general, because designers have different needs and personal preferences.
As you can see, this is a lot to cover. Designers use a myriad of tools, techniques, and approaches to produce UX sketches, and it’s rather subjective. Certain techniques may or may not work for different people working on different projects. If you’re just getting started, you should definitely experiment.

Constant practice and experimentation will help you find what works for you.

It’s up to you to choose tips and techniques that will be the best fit for your project and your approach to design. Do you have any additional sketching tips for fellow UXers? Feel free to share them in the comment section.

This article is originally posted here

About Author