What is prototyping?

The term ‘prototype’ is applied the sample model of the product that enables to test it and see if the solutions and decisions made about the product are efficient and working. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to provide a designer, a customer, and a user with the opportunity to check the correctness and appropriateness of the design solutions.

The value of prototypes in the sphere of app and web design has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be the great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective, Tubik Studio designers. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

The prototypes on UI stage are created more for presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

What is the best prototyping tool?

Obviously “the best” is very subjective and too personal. If there were the ideal and perfect tool for anything, for instance, prototyping, people wouldn’t need to make a choice, but still, we have a wide field of options and that’s great.

The list of prototyping tools that designers use for different goals is quite broad. Usually, the choice of the tool and its correspondence depends both on the task and on the preferences of the designer assigned to accomplish it. Designers having tried multiple options mostly mention that various tools have their own benefits and pitfalls. Let’s take a look at the list of some tools enabling us to create interactive prototypes easily and efficiently present them to clients or use in teamwork. Most of them have already become recognized in the field. This is the first set which will be continued and reviewed in more detail in our next posts here.

InVision

UXPin

Framer

Adobe XD

Origami

Axure

Marvel

Mockplus

CanvasFlip

Designers of design agency Tubik, experienced in all diversity of design directions, answer the following way: the best prototyping tool is the one that improves the productivity of the particular design workflow as well as helps to provide efficient and user-friendly final product. Whatever you feel working this way is good for you. Still, even if you are experienced in using a particular prototyping software, trying new tools is a good way to open new horizons and find new ways to enhance creative processes.

One more thing to consider is that new not always means “inexperienced” – vice versa, it can mean “innovative”. So, when you are offered new features for already established flows or new tools with a fresh USP different from the competition, try them before thinking for too long. Modern prototyping tools are offering more and more options and features able to have positive impact on speed and quality of design and development process. Some well-established tools, like InVision, are regularly updated and add great deal of integrations into the software to make it easily combined with other digital products which is highly appreciated in particular for complex multilayered projects. The others add new useful functionality to already expected features, like for example usability analysis as in CanvasFlip, QR-code simplifying the process like Mockplus and so on and so forth.

For those, who want to get dip into the theme of prototyping in UX design and communicate with their mates in the field, we would recommend to take a look to the prototyping community Prototypr which curates and shares the latest updates on the variety of prototyping tools and unites designers actively applying prototyping to create positive and problem-solving UX.

Also, it is advisable to revise the book by UXPin team called The Ultimate Guide to Prototyping in which the authors share the same position on the significance of prototyping in testing usability of design solutions: “Not only do prototypes help provide proof of concept, they, more importantly, expose any usability flaws behind the wireframes and mockups.”

Check out the next posts to see more detailed reviews for the features and functionality of specific tools. Good design day to everyone!

Not any part of the article is advertising, the post offers personal review and opinion of the writer.

Useful Articles

Here’s the set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Сообщение Prototyping User Experience. Tools to Try появились сначала на Design4Users.

No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles, we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI/UX design issues enhancing usability and supporting the definitions with the links to the articles where we gave more details on the topic. So, let’s move on!

UX (User Experience)

It is the general attitude and emotional feedback that user has during different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, speed of work, etc. If all the logic and possible issues of product implementation in real life are analyzed and designed properly, it forms a positive user experience which means that users are able to satisfy their needs in a fast, easy, and pleasant way. Positive user experience is one of the strongest factors in retaining users.

UX Wireframing

It is the process of creating the general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of low or middle-level fidelity. The aim of this stage is to set a clear and orderly structure of all the layout, transitions, and interactions on the basis of the user’s problems and pains that the product is going to solve.

In one of our previous articles we provided a bit of metaphor on that. When we think about building a house, for example, we usually mean the process of the physical appearance of the construction rather than tons of projects, drawings, and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case, you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application, or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time, and vice versa, it will save the time you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

That is the aim of the UX part of the design process. UX wireframing stage should be heavily based on user research, competition research, and analysis of all the data obtained. In the outcome, it creates a clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as the placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing the design process and increasing performance.

Read more on this topic in our previous article

UI (User Interface)

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools for increasing usability and satisfying target users’ needs and wishes. All the features of visual perception as well sound and tactile feelings influencing the product use and interaction with it should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation, and so on and so forth are able to affect the performance of the final product greatly in both positive and negative ways.

In general terms, the UX research and wireframing stage are about how the website or application works while UI is about how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections, and user behavior while the UI stage provides a visual representation of all the concepts. It means that ideally, the designer should first work on the UX part with a concentration on layout, making it more powerful, thought-out, clear, and easy to use. Without this vital work, you highly risk creating a pure mess out of the user interface.

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when the newborn heart and brain of your product are clothed with its skin and bones. Here the product gets its real color scheme, forms, and features of the layout details, styles, animated elements, and so on.

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work in the other.

Here are some fresh UI design examples for different types of products from Tubik Studio portfolio on Dribbble:

Birds of Paradise Encyclopedia

Comics Shop Home Page 

Simple Blog App 

Read more on this topic in our previous article

Prototyping

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analog of the final product as they aren’t those. Their main aim is to enable a designer, a customer, and a user to check the correctness and appropriateness of the design solutions.

The value of prototypes in the sphere of app and web design has rocketed over the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be a great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

The prototypes in the UI stage are created more for the presentation of the application’s general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details in the final stage of UI in most cases is not as reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

Read more on this topic in our previous article

Icon

An app or desktop icon is an image that has a kind of symbolic and metaphoric potential and becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.

In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.
Read more on this topic in our previous article

Microinteraction

Microinteraction is one particular case of a user’s interaction with the product to complete one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone on a social network, rate a blog post, or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear, and fast as possible.

BuonApp

Read more on this topic in our previous article

The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. New definitions are coming soon!

Recommended Reading

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Visual Hierarchy: How to Organize UI Content

Gestalt Theory for UX Designers: Principle of Similarity

Gestalt Theory for UX Design: Principle of Proximity

Small Item, Big Impact: Types and Functions of UI Icons

Copy Content in User Interfaces

Originally written for Tubik Blog
Welcome to see the designs by Tubik Studio on Dribbble and Behance

Сообщение UI/UX Design Glossary. Key Terms появились сначала на Design4Users.

In one of our previous articles, we have already mentioned the benefits of prototyping for designing a strong and positive user experience and reviewed one of the popular prototyping tools Pixate. Today we are going to continue this conversation by describing the other efficient software for prototyping called InVision.

General description of the tool

InVision is the comprehensive prototyping software supporting the process of designing user interfaces for mobile applications and other sorts of digital interactive products. Now it is one of the major players on the market, perhaps due to constant improvement and extensions of the functionality that the company adds to the product as well as the strong informative support via its Blog which shares diverse cases and articles on design.

The basic idea behind InVision is fast and easy to create a live prototype from static images of any fidelity level. The tool provides the ability to upload wireframes that can be more or less detailed and with the functional facilities of the software they are automatically transformed into the prototype of the app. It is possible to follow the necessary transitions, test the buttons, analyze the layout in the mock-up of the device interface.

Working over numerous projects on UI/UX design for mobile applications here in Tubik, we are usually keen to try different tools and software to increase productivity and – what is more important – efficiency of design workflow and communication with the customers. These are the reasons why the InVision prototyping tool has become popular here in cases of app design. Being simple and clear in its interface, it doesn’t scare clients who can be easily involved in the process; in addition, it provides numerous functions enabling designers to make the process of testing design faster and easier in terms of productive teamwork.

Why should you try prototyping?

As we have already mentioned plenty of times in our earlier blog posts, prototyping is the essential stage of the design process when the user interface for a mobile application or a website is created. Based on our practical experience, we can definitely say that prototyping is the stage when testing can save time, effort, and money.

Let’s see, how the process is going on here in the studio. After setting clear objectives for the product, conducting user and market research, and defining and analyzing the target audience designer starts working on the initial UX design solutions. This is the time when the living organism of the future product gets into its skeleton and all the elements that have to be included started functioning as a united system. The designer thinks over all the layout, forms the group of screens, decides on their functionality and transitions, and thinks over the most efficient variants of placement for interactive elements and CTAs. The result of this process, based on a great deal of thinking and analysis, is initially given out as a system of UX wireframes. This is usually the set of screens done in a limited color palette and its main goal is to set all the logic and functionality of the future application. And this is the high time when the team involved in the design process could apply a prototype to make a full analysis of design solutions before starting the UI design stage.

A lively and clickable prototype tested in the mock-up of an actual device screen you design for is a great and fast way to reveal any sort of problems influencing the usability of the product. It lets all sides of the design process – designers, managers, QA testers, and clients – have actual experience of interaction with the future product, to ensure that there are no missing parts or unnecessary steps in the process, to test if all the elements are logical and placed right.

The great advantage of the InVision tool is that due to its functionality it’s now rather easy to apply the technology of prototyping, in fact, almost at all the stages of the design process as it is not time-consuming to upload the static images of the screens and form the prototype with them. That means that it’s possible to start effective testing from the very first groups of screens to see how they provide the logic of the layout and transitions.

Moreover, in the case of using the tool, it is also possible to test all the UI decisions in the clickable prototype and see them actively used. The designer can apply animation and simulate gestures using tools’ native functionality to make the prototype feel even more realistic and the experience very close to natural.

The power of collaboration

What we especially appreciate about InVision software here in Tubik Studio is its strong and constant support of efficient collaboration in the design process. Knowing that fast feedback from the client is a vital feature of the effective and productive design workflow, the creators of this tool made it convenient and clear not only for designers and project managers who are usually fast in dealing with different tools and soft but also for those customers who are not really avid software users and it takes some effort for them to deal with the new tool. InVision has good navigation and is user-friendly for different types of users.

The tool enables creators to get a clickable prototype and at the same time to communicate on every smallest part of it. That means clients are able to set their feedback not only to a particular screen but even to a particular element of the screen such as a button or toggle, shade or shape, piece of copy, or graphic icon – anything. It provides the functionality of multiple threads and therefore designers, managers, and clients can discuss particular elements quickly and set a more productive workflow together.

Additional features

Except for the general functionality of the prototyping process, some important additional features of the tool should be also mentioned:

• Easy and fast integration with other design tools for efficient work, such as Sketch or Photoshop, for example, from which the wireframes can be directly uploaded to InVision.
• Supporting cross-platform experience: the tool provides the ability to set sizes and resolutions of different devices you design for. This feature is highly applicable in the process of responsive design and mobile adaptations.
• Easy control and marking of project statuses for efficient project management.
• Functionality for creating and presenting mood boards, brand boards, galleries, and style guides.
• Tools for direct live communication right from the project account. Especially appreciated by the teams working remotely.
• Saving versions history to easily compare several versions of design solutions.
• Diverse functions and features for creating high-fidelity prototypes that can be used for user testing before the stage of development.

So, the software has shown itself as an important tool for improving teamwork and the process of testing design solutions as well as tight collaboration with the customers. Those positions are among the key points of an efficient design process providing thought-out, high-quality, and user-friendly designs.

Originally written for Tubik Blog

Сообщение Design Tool Review: InVision появились сначала на Design4Users.

What tools do you usually use for prototyping?

Prototyping is a very important part of the design process. Creating UX/UI, we develop the system of screens, transitions, analyze how different elements of the layout will influence the general efficiency of an application or a website. Therefore, the prototype is a great way of testing the work in progress so that the designer could reveal the bugs and problems spoiling the product. Moreover, the prototype gives the opportunity to present to the customer the working model of the product at different stages of its creation.

The list of prototyping tools that designers of Tubik Studio use for different goals is rather wide: InVision, Marvel, Framer, Flinto, Origami. Usually, the choice of the tool and its correspondence depends both on the task and on the preferences of the designer assigned to accomplish it. All the mentioned tools have their benefits and complications. However, now we could define two of them which have settled on the top of the list.

The tool which is now becoming more and more popular with our designers is InVision. Being constantly updated and improved, this tool for prototyping creates more and more opportunities and features. It provides a wide range of functional features that enable a designer not only easily create efficient prototypes, but also set the field for fast feedback in the process. It accomplishes easy export of graphic content from Sketch. It also has a plugin for Adobe Photoshop that provides additional opportunities for quick and efficient creation of prototypes and synchronization of changes. We have already mentioned in our previous articles that fast and clear feedback is one of the vital conditions of successful collaboration with a client. InVision provides everything that is necessary to fulfill this need.

It’s really helpful that it makes it possible to comment not only on separate screens but even separate elements of the layout. Moreover, recently presented opportunities for creating boards and synchronization with Slack provide even more chances for fast prototype creation, testing, and analysis. InVision is the tool that makes the process of prototyping far less time-consuming and more effective due to its wide functionality for feedback. So, the designers could get more time for creative work rather than its technical realization.

As we are getting the questions about prototyping more and more often, now we are preparing a series of case studies and articles analyzing the use of these tools in the design process in greater detail and with practical examples.

How do you track the projects? What is your choice of product monitoring solutions?

As well as for the previous case, during the process of active work, we have tried various tools for tracking the projects and communication with customers. We have already practically tested Basecamp, Trello, Asana, Jira, Redmine, and others. Obviously, all of them are great tools that improve the process of work enabling customers, managers, and designers to communicate easily and provide updates on the projects as soon as possible.

Our personal preference for project monitoring as well as in-studio information flow is Trello. This tool is simple, effective, clear, and intuitive. That is very important because not all the customers are keen users of technologies and they should be provided with the option which doesn’t need special knowledge or much time to get into its functions. This tool for communication provides clear systems of boards and cards which have a gear deal of features. It makes it possible to split any task into sprints and enables to carry out the project providing constant updates and presenting images.

It is easy to set deadlines (due-dates), delegate specific tasks to specific people, create checklists, and mark out the most important and urgent tasks. It also has one more really precious feature. Trello has not only a thoroughly thought-out website but also efficient and smart applications for iOS and Android. This gives an additional opportunity for fast feedback so it saves time, effort, and makes management of the projects very comfortable for the customers. Trello is a great option for creating a spot where designers, project managers, and customers could together make a fast and effective workflow.

Choosing the tool of tracking and management, we always take into account the task of the project and the preferences of the customer. That is why we use not only Trello but also other tools helpful in this issue. However, we always present and explain our scheme of workflow in Trello to the customers, and in most cases, they agree with our choice. But it should also be said that we are flexible and never miss the opportunity to try new tools. The sphere of design is lively and dynamic as well as the field of project management. That’s why on the basis of practical experience we suppose that trying and testing new tools is keeping our eyes on the ball never missing new prospective improvements.

Sure, we could say much more about Trello as well as other tools of tracking and monitoring, so you will be able to see more detailed descriptions and reviews of these tools in the next articles.

How do you organize in-studio communication flow?

No doubt, communication inside the studio is a significant condition of successful work. Designers and project managers need to have a constant opportunity of exchanging information in the process, sometimes discuss general questions and share interesting or useful data. This info-flow is the pulse of the team which makes all the things in the studio go round.

Trying to find the best solution for this purpose, we used two tools simultaneously. Trello, mentioned above, was used for the aims of sharing the data: we create boards on which to save necessary links, documents, images, ebooks, or discussed long-term projects and issues. For fast information exchange and current questions or discussions, Skype-chat was used efficiently for a long time.

However, recently we have changed our preferences after Slack being introduced in our work process by the clients of the studio – the company Fuse Tools. Being already aware of its advantages, the Fuse Tools team insisted on using it instead of Skype as a more multifunctional option for fast and successful collaboration.

Analyzing its functions, Tubik Studio managers made a decision to test the tool in terms of full-time studio communication instead of Skype. After several days all the team accepted this change as Slack really provides the wider field for work not only as a chatroom but also for sharing and saving data. One more thing that has become a bias towards Slack is the possibility to configure different integration including Trello for a faster and smoother workflow.

All these features brought the Tubik Studio team round to use Slack together with Trello as the basic tools for in-studio communication.

Do you use Photoshop or Sketch as the basic tool for design?

Nowadays the fight Photoshop vs Sketch is becoming more and more active. There are loads of articles and reviews, case studies, and interviews in which people analyze the benefits and drawbacks of Photoshop and Sketch. And, being designers taking an active part in the modern design process, we are also often asked which of these editors we prefer.

The answer we would like to give is really simple. There is no any vs. There shouldn’t be any war between the options which can complement each other. Obviously, now there is no perfect and ideal software for design: if it existed, everybody would use only this ideal choice and there wouldn’t be any need for a fight. So, we suppose that modern designers provided with a number of tools should study how to take everything possible from them instead of trying to decide which one is better.

Here in Tubik Studio, we believe that the only single thing that a designer should think about is the high quality of the final product. The highest. Quality. Possible. Period.

That’s why we use the variety of tools and software here, share our experience, and always thoroughly watch the newest trends and upgrades of design software opportunities. A tool is just a tool. The only thing important is to make the customer and the users of the final product happy. It’s vital to think about the implementation of the product into real life and making it the one which provides high conversions. People, who use the product, do not see the tools. They see the work which is good or bad. Therefore, knowing the advantages and drawbacks of different soft and tools, designers are very well armed to find the best tool for any particular problem.

So, we always analyze the task before choosing the tool appropriate for its accomplishment. However, in general terms in most cases, we use the benefits of different design tools in the following way.

Our practice shows, that Sketch is really helpful and efficient in the research and UX stage of the design process. Adobe Photoshop is effective for the preparation of graphic sprites and the creation of unique UI elements. Adobe Illustrator is great as the basic vector editor for creating illustrations and icons. And together they present a powerful engine for high-quality and elaborate design. That is the reason why we never waste time arguing which one is better.

As has already been mentioned, we never stop the process of learning and follow the pulse of the design world. Now we are testing the new vector graphic design software from Apple which is called Affinity Designer. It is a promising product and we are keen to see its possibilities closer. It provides a lot of functions for creating icons, elements of UI, illustrations, and so on. It has a more clear and intuitive interface than Illustrator and provides opportunities for real-time making adjustments and applying effects independently from the size and complexity of the image processing.

Therefore, on the basis of everything mentioned above, we can confidently say that every tool, editor, or software has its strong and weak points. In some sprints of the process, a simple pencil and sketchbook will be the best way to get the result efficiently. So the best practice is to analyze the task thoroughly and decide on the most efficient tool for this particular task.

Originally written for Tubik Blog

Сообщение Design FAQ Platform: Questions from Designers появились сначала на Design4Users.