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.

Words are well known as the universal mechanism of incredible functionality. In terms of user interface of any kind, being supported with all the other visual features mentioned before in our blog, text becomes one of the key features to successful performance.

The essence of copy

Not to mess up with the terminology, it has to be mentioned that in the field of design (as well as advertising and journalism), content written in text is called copy, whatever big or small it is. The only single word you write on the call-to-action is already a piece of copy, which, even being so small, can become encouraging or vice versa—confusing.

Although in terms of design, we can get more concentrated on visual elements such as illustrations, icons, buttons, animations, colors, and shapes, neglecting the aspect of copy while creating the interface can bring out great disappointment in the final result. Words cannot be fully replaced with graphics, whatever amazing, high-quality, and professional they are going to be. Therefore, a copy should be thoughtfully analyzed and created in a way that supports general design concepts and enhances positive user experience via successful interaction.

Copy is an integral part of UI

Taking into account the fact that the web page is rather limited and the mobile application screen has a highly limited amount of space that can be used for interaction elements, a copy should witness an elaborate and professional approach. It is actually amazing when designers are able to do all the work on the interface by themselves—obviously, it’s always great to have a unicorn on board. However, they are not obliged to do it. Moreover, in many cases, being great professionals in design, they have difficulty tackling the issue of correct and appropriate copywriting for the screens.

This job, as well as any other, needs special skills and knowledge which designers need to master additionally. It has to be said that a great number of them really go this way, carefully studying the techniques and methods of creating copy that will be informative and engaging for users and, at the same time, will support all the visual design solutions applied for the screens or pages.

The other way to sort out this problem is to engage a professional copywriter in the process. Any way you go, the most important thing in this aspect is to find a way of creating copy for the interface that makes every single letter count. As copy is an integral part of UI design, we believe it should support the same philosophy as any other part of a layout: everything put on the screen or page has to be functional and purposeful. Everything should work for the user.

Functions of copy in the interface

Copy belongs to perhaps the most comprehensive and multifunctional ways of interacting and engaging the user, especially when it is created on the basis of psychology and linguistic knowledge as well as deep analysis of the target audience and product’s purpose. Efficient copy has a number of general functions, which can be presented altogether in one piece or in different combinations depending on the aim of the copy created. Let’s take a look at the most basic of them.

Copy implemented in an application or a website can and should:

• inform
• communicate
• enable interaction
• enhance navigation
• appeal to feelings
• engage emotions
• set the tone and voice

A good piece of copy rarely covers only one of the presented positions. In the vast majority of cases, both designers and copywriters are keen to implement the copy, which supplies several functions at the same time, improving usability and speeding up the perception of all the content on the screen or page.

Copy is visual

One more thing that designers creating interfaces of any kind should always bear in mind is that copy is one more visual element of design. As well as the icons, fields, buttons, illustrations, toggles, and the like, it literally occupies a part of the screen or web page as any other graphic component and influences the general stylistic presentation of the app or website. That means that both its informative content and visual presentation significantly affect the efficiency of a copy. This is the sort of mutual support of the outer and inner sides.

It’s also important to remember that the success of an efficient copy directly depends on such design solutions as the choice of types and fonts, background, and placement of the copy. All the mentioned aspects greatly affect the level of readability, so when they are done inappropriately, the copy, even being highly meaningful, will lose the chance to get all its potential applied.

So, let’s see what is the short bottom line here. Copy, which contains useful data but is poorly presented, will not work. Copy, which is visually presented in an amazing way but shows a lack of meaning and purpose, will not work. Keep the balance to make everything go round properly. Make meaning and appearance support each other, and both aspects will get more powerful in terms of usability.

Stages when copywriting is involved in the design process

According to everything mentioned above, there are some stages of the design process when a professional copywriter can become a great help in the process:

• creating copy presenting user personas and use cases – done by professional copywriters on the basis of information obtained from user research, they can be more efficient as the text will get concentrated and can be more efficient, especially in terms of teamwork
• creating copy for call-to-action elements
• creating copy for intro screens, tutorials, and tooltips
• creating instructions and notifications for screens and webpages
• creating the copy for sets of catalog and menu positions
• creating enganging copy for landing pages
• creating templates for item descriptions, etc.

The list is not a sort of cure-all here—it’s just a recommendation on the points to consider. On the basis of our studio experience, we can say that, in particular, it is useful for design teams that are keen to optimize and improve production so that all the professionals involved in the design process can get deep into the work they do best of all and not get distracted with the tasks that are not directly in the scope of their skills. This sort of strategy usually brings a high level of performance. As for freelancers in UI/UX design working alone, our thoughts can be helpful to consider this sort of aspect and perhaps master some new skills in supporting visual solutions with effective copy.

Useful Reading

How To Make Text Improve User Experience: Insights Into UX Writing

Guide into Types of Copy for Mobile and Web Interfaces

Material Design: Writing

3C of UI Design: Color, Contrast, Content

Inverted Pyramid: Writing for Comprehension

Interface Copy Impacts Decision-Making

Tips on Applying Copy Content in User Interfaces

User Experience: How to Make Web Interface Scannable

Originally written for Tubik Blog

Сообщение The Role of Copywriting in UI Design Process появились сначала на Design4Users.

People should never feel like a failure when using technology. Like the customer, the user is always right. If software crashes, it is the software designer’s fault. if someone can’t find something on a web site, it is the web designer’s fault… The big difference between good and bad designers is how they handle people struggling with their design. Technology serves humans. Humans do not serve technology. (Joshua Porter)

Your app might be a technological marvel, but don’t forget that it’s people who need to interact with it. (UXPin team)

People ignore design that ignores people. (Frank Chimero)

Feedback is the heart of interaction. If user interaction is a conversation between your user and the product, then your product better participate in a friendly, interesting, and helpful manner. (UXPin team)

In an ideal world, a user would remember every function after only a single use, but we do not live in idealism. The reality is that familiarity and intuition must be consciously designed into the interface. (UXPin team)

Our opportunity, as designers, is to learn how to handle the complexity, rather than shy away from it, and to realize that the big art of design is to make complicated things simple.  (Tim Parsey)

It is easy to fail when designing an interactive experience. Designers fail when they do not know the audience, integrate the threads of content and context, welcome the public properly, or make clear what the experience is and what the audience’s role in it will be. (Edwin Schlossberg)

Good design is a lot like clear thinking made visual. (Edward Tufte)

HCI draws on many disciplines, as we shall see, but it is in computer science and systems design that it must be accepted as a central concern. For all the other disciplines it can be a specialism, albeit one that provides crucial input; for systems design it is an essential part of the design process. From this perspective, HCI involves the design, implementation and evaluation of interactive systems in the context of the user’s task and work. (Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale)

To design is to communicate clearly by whatever means you can control or master. (Milton Glaser)

Don’t make something unless it’s both necessary and useful. But if it is both necessary and useful, don’t hesitate to make it beautiful. (Josh Porter)

The details are not the details. They make the design. (Charles Eames)

Good design is design that changes behavior for the better. I think it needs to take into account the context of the environment, of the human condition, the culture, and then attempt to make the things you do—make us do them better, make us do better things. It encourages us to change the way that we live.  (Jon Kolko)

It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives.  (Don Norman)

Good UI design gives users a comprehensible sense of power that consistently helps them feel in control. (Jim Nielsen)

In situations of stress, people will be less able to cope with complex problem solving or managing difficult interfaces, whereas if people are relaxed they will be more forgiving of limitations in the design. This does not give us an excuse to design bad interfaces but does suggest that if we build interfaces that promote positive responses – for example by using aesthetics or reward – then they are likely be more successful. (Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale)

When we interact with computers, what are we trying to achieve? Consider what happens when we interact with each other – we are either passing information to other people, or receiving information from them. Often, the information we receive is in response to the information that we have recently imparted to them, and we may then respond to that. Interaction is therefore a process of information transfer. Relating this to the electronic computer, the same principles hold: interaction is a process of information transfer, from the user to the computer and from the computer to the user.  (Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale)

Interaction is the essence of all user experiences. It is the conversation between your product and your user, and if the conversation is boring, your user will leave and talk to someone more interesting. (UXPin team)

Interaction design isn’t about how interfaces behave, it’s about how people behave, and then adapting technology accordingly. It’s a two-part challenge: first, you must know your target users on a level that reveals what they like and what they expect; second, you must figure out how to satisfy those needs given your technological constraints. (UXPin team)

To our human minds, computers behave less like rocks and trees than they do like humans, so we unconsciously treat them like people…. In other words, humans have special instincts that tell them how to behave around other sentient beings, and as soon as any object exhibits sufficient cognitive function, those instincts kick in and we react as though we were interacting with another sentient human being. (Alan Cooper)

If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful. (Alan Cooper)

A powerful tool in the early stages of developing scenarios is to pretend the interface is magic. If your persona has goals and the product has magical powers to meet them, how simple could the interaction be? This kind of thinking is useful to help designers look outside the box. (Alan Cooper)

User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. (Jesse James Garrett)

As much as we may want to withdraw into a world of pure problem solving, we have to acknowledge that the most successful architectures are the ones you can actually convince someone to implement. (Jesse James Garrett)

Designers shooting for usable is like a chef shooting for edible. (Aarron Walter)

Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design. (Jesse James Garrett)

Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it. Think of it like a room’s air conditioning. We only notice it when it’s too hot, too cold, making too much noise, or the unit is dripping on us. Yet, if the air conditioning is perfect, nobody say anything and we focus, instead, on the task at hand. (Jared Spool)

Get closer than ever to your customers. So close that you tell them what they need well before they realize it themselves. (Steve Jobs)

Beauty and brains, pleasure and usability – they should go hand in hand. (Donald A. Norman)

To design an easy-to-use interface, pay attention to what users do, not what they say. Self-reported claims are unreliable, as are user speculations about future behavior. (Jakob Nielsen)

Originally written for Tubik Blog

Сообщение 30 Quotes on User-Centered Interaction Design появились сначала на 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.

The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and books on design, presented in workshops and webinars, and shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems really constant and demanding.

The essence of an icon

Basically, an app or desktop icon is an image that having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, an icon is a 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.

Being so multifunctional and comprehensive, icons of the apps and websites can be:

• • interactive, i.e. directly representing buttons, controls, and any other elements of interaction
  • clarifying, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves
  • decorating and entertaining, i.e. having lower functionality and higher aesthetic potential, providing a decorative addition to general style, for example featuring some seasonal celebrations, etc.

An example of interactive icons: Veggie App Concept

An example of clarifying icons: Passfold project 

An example of decorative icons: Easter and spring-themed icons

The features of icons

Some basic features of efficient icons include being:

• meaningful

As has been mentioned above, an icon is a graphic element that has high symbolic potential. It means that by creating the icon, first of all, a designer should define what is its role and meaning as a separate element and as a part of the general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with unnecessary elements.

• clear

Behind the clarity here we mean making the icon understandable. That is one more feature supporting icons being meaningful. In fact, what is the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such an icon will confuse the user and bring out a poor user experience.

• simple

The simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that any icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time, it’s important to remember the general style and other elements of visual representation of the whole app or website concept. Successful consideration and combination of these factors will result in efficient icons.

Valentine’s Day icon set 

• recognizable and unique

To make the icon recognizable, the designer needs to become a researcher before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create a significant basis for making the icon easily remembered and catchy. If a designer finds a way to make the icon recognizable not losing its main meaning, it will become the first step of attracting the user in conditions of active competition as well as will provide a positive feature for user experience as the user won’t be annoyed losing the time on looking for the necessary icons which aren’t recognizable at once.
The feature of uniqueness mentioned here doesn’t mean the creation of absolutely unique stuff every time you need the icon, but thinking about some even slight flavor of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user’s device.

• aesthetic and attractive

For sure, remembering that icon is a visual representation of the meaning, it’s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user to get into the meaning you represent behind the icon and at the same time, it is the important element making the product regarded as attractive, beautiful, and stylish. Following the principles of color theory, proportions and other features making the result of graphic design successful is always very helpful in the creation of a great appearance for the icon meaning.

Saily ghost icon version

• flexible

As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability are included in the list of key features making icons efficient. A good icon should be seen, readable and recognizable in different sizes and environments therefore it is one more process that should be thoroughly considered while creating icons.

• consistent

Icons as well as the other elements of the layout have to feel consistent as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app – as usually happens – they should follow the same style, and concept and correspond to the general design solution for the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.

IT Office Icons Set 

Creating icons for various design projects in Tubik Studio, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Besides creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market, and Envato.

Multimedia Icons Presentation

Useful articles

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

Shape and Color in Logo Design. Practical Cases

Visual Perception. Icons vs Copy in UI

Small Stars of Interaction Design: Interactive UI Elements

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation

UX Design Glossary: Affordances in User Interface

UX Design: How to Use Animations in Mobile Apps

Originally written for Tubik Blog

Сообщение Iconic Simplicity. The Vital Role of Icons появились сначала на Design4Users.

In one of the earlier articles with tips for beginners in the app and web design, our first piece of advice based on practical experience was rather simple. The first and really crucial thing may sound quite primitive: you should make sure that you really want to make it your job. There are lots of people who, being great artists, deeply creative, and inspired, get broken by the necessity to work systematically with strict deadlines and loads of requirements and wishes (sometimes illogical or not-too-professional) from the customers. Clear up the nature of your job: the designer is not a pure artist free of obligations and fully devoted to creativity. Nope. In different stages of your project, you’re also going to be a researcher, an analyst, a time manager, and the like. Bear in mind all those things from the very start of the way.

For those who have made this vital decision, today we would like to recommend a useful and helpful book “Design Is a Job” by witty expert Mike Monteiro, the co-founder of Mule Design. The book reveals all the stages of a design job, including communication with clients, organization of the process, drawing contracts, working in teams of colleagues, and so on and so forth. The author doesn’t try to make the profession look like magic: he is deeply and sometimes sharply honest about not only the benefits but also pitfalls. In the foreword to the book, Erik Spiekermann says: “Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.” The ideas shared by Mike Monteiro are deeply practical in supporting this thesis. It is not about the design process inside only, it is more about the outer part of the design world, full of clients, requirements, goals, metrics, iterations, presentations, and discussions.

Here we would like to share a new set of design quotes that we grabbed from this book for Tubik Studio Quotes Collection. This time it will be fully loaded with honest and informative thoughts by Mike Monteiro. Join in!

A designer requires honest feedback and real criticism, and that’s not going to happen in a realm where colleagues or clients are worried about crushing the spirit of a magical being. The sparkly fog of affirmation gets in the way.

Clients will always ask you to make their logo bigger, prescribe solutions, and ask you to do things that will make you smack your forehead. You can roll your eyes at how much they don’t understand about design or you can roll up your sleeves and begin practising your craft by helping them clarify what they need.

If you can stand in front of a client completely confident and explain why you are worth the amount you quoted, you should charge it.

The general rule is to involve as many people as possible in early discussions, and make that number as small as possible once you go into review cycles.

Anyone who hires you because they thought you could do the job and then doesn’t let you do it has lost respect for either you or the design process.

Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.

Successful design balances convention—familiar forms, terms, and interactions—and novelty—new forms to engage and delight the users, in the hope they will stick around a bit longer and maybe buy their pants here instead of somewhere else. As long as you remember that those new forms must serve the goals of the business. Otherwise, they’re just novelty.

A good client will trust your process as long as they have transparency into it, can see results, and you’re willing to bend a little here and there. Without breaking.

A designer who does not present his or her own work is not a designer. Presenting the work, explaining the rationale, answering questions, and eliciting feedback are part of the design toolkit. If you sit at your desk while someone else presents work to the client, you don’t get to complain about the feedback. The failure was yours.

Clients are the lifeblood of a healthy business. They are the oxygen in your bloodstream that keeps everything going. No matter how good you are at what you do, without someone willing to pay you for that service you will have to close your doors.

If you’re trying to decide between two design firms that seem equally talented, the one that came with a referral has a solid advantage. And that vetting goes both ways—a client who is well-socialized and has a good reputation in a large network is more likely to be a great client. In most cases, you’re going to be as sceptical of a client who hires a designer from an ad as they are of the designer who answered that ad.

…you should aim to be pleasant to work with, as everyone would rather work with someone pleasant than with an asshole. But no one wants to work with someone who’s faking it. Doing good work often requires a few hard conversations.

The biggest myth ever perpetuated in the design field is that good design sells itself. (The second is that Copperplate is a legitimate typeface.) Design can’t speak for itself any more than a tamale can take off its own husk. You’re presenting a solution to a business problem, and you’re presenting it as an advocate for the end users. The client needs to know that you’ve studied the problem, understood its complexities, and that you’re working from that understanding.

Ultimately, your job is to make the client feel confident in the design. Confidence is as much of a deliverable as anything you’re handing over in the project.

There’s a difference between being enjoyable to work with and being “nice.” Being nice means worrying about keeping up the appearance of harmony at the expense of being straightforward and fully engaged. Sometimes you need to tell a client they’re making the wrong call.

Of course, being the most pleasant person in the world won’t help your cause if the work isn’t good. But don’t make the mistake of thinking the quality of your work by itself will be a shining beacon that pulls clients near.

You can do a lot to show a client how valuable time is in how you comport yourself throughout the project. Run your meetings and work sessions efficiently. Come in prepared. Don’t run over. Don’t hang out. Don’t train clients to think you’ve got extra time on your hands.

At the risk of sounding like a broken record, stay in good communication with your clients at all times. They will accept your process as long as you are showing them results. Make sure to set their expectations correctly as to what is happening when.

Over the years the one constant that we’ve been able to rely on is that how a potential client behaves in the business development process is exactly how they will behave during the project. Trust your gut.

Never work for free. Any work you take on for free will get pushed aside for paying work. That does neither you nor the client any favors. Neither of you will respect each other’s time. If the situation merits it, work at a discounted rate. But submit a budget showing the actual rate, with the discount applied. Let the client know the value of what they’re getting.

Not knowing the design language doesn’t make someone a bad client.

Only you know the value of your time. (Hint: it is greater than $0.) But the value of your work to a particular client depends on what the client has to gain from that work. And the client is not buying time from you. They are buying work. The value of that work is what you need to charge them for.

As we tell potential clients when they ask us what their site will look like: “Oh, we have no damn idea. But we know what the process is for finding out.”

But much like the best umbrella is the umbrella you have on you, the best process is always the one you’re having success with. Don’t fall for trendy processes. If the one you’re using works for you, go with it.

You’re not going to ask for permission to do things your way. You’re going to convince clients that your way works by showing them how you will use your process to meet their goals. And you’ll back this up by showing them how many times it’s worked in the past.

Throughout a project you may have to remind a client multiple times that they agreed to follow your process. And throughout a project you will have to convince a client that your process is actually on target to get them the results they need. There will be hand-holding. There will be tough love. But above all, you will have to stand your ground and stick to what you know works.

…just make it a habit never to speak ill of your clients. They’re paying your bills. And putting their livelihood in your hands. They’re good people.

Working with other (talented) designers makes you a better designer, and is essential to your professional development, especially early in your career. There’s simply no better way to learn your craft than to watch someone else practice it.

Not only can a designer change the world, a designer should. This is the best job in the world! Let’s do it right.

Originally collected for Tubik Blog

Welcome to watch 10 TED-talks for creative people

Welcome to check out the set of 30 Eternal Quotes from Design Experts and 30 Bright Quotes About Creativity

Сообщение Design Is a Job. 30 Honest Quotes by Mike Monteiro появились сначала на Design4Users.

As our UX/UI designer Konst says, it is impossible to consider yourself a UX specialist until your own work process is as efficient as possible. This particular thought makes him constantly explore and study new ways and tricks of optimizing his work and increasing its quality. While many companies and individual designers are moving to work with more modern and specialized software for UI/UX design such as Sketch, there still are a lot of them who work with Photoshop. Moreover, as we have already mentioned before in our previous post, the more tools you can use, the more flexible you are in solving tasks as different tools and soft are efficient for different problems.

One of the ways of optimization for his own design process which Konst found for himself enables the designer to significantly reduce the time needed for adaptation. Certainly, it is not a silver bullet, but it can be useful for those who have to adapt their designs to many resolutions.

In substance, this method applies drawing in 1x in points with further pixel auto-scaling according to the set density of dpi/ppi.

Besides general benefits, there are also the following positive points if the method:
1) It allows designer to use the indices of the points directly both for margins and types (that is by no means unimportant)
2) It isn’t necessary to scale the design manually in the process of adaptation to a new resolution.
3) It isn’t necessary to scale types visually.

So, let’s get started investigating the process itself.

First of all, the most important thing is to customize the file of your project correctly. The most important aspect at this stage is the size of the operating zone of the project and the resolution pixel/inch.

The definition of a point is more or less clear for everybody who worked on design for iOS. However, the meaning of resolution should be discussed in more detail.

Both in web design and design of mobile applications, the resolution of 72 dpi is the equivalent of 1x resolution. It became custom on the basis that this is a standard resolution for the creation of a new file and in this resolution, 1 pixel equals 1 point. Explaining the method, the designer didn’t stop on the position of standard resolution in detail providing the link to the detailed Guide on DPI.

In the given case, the project we are creating is the one for iPhone 6 with the screen resolution of 750*1334 pixels, 2x Retina screen, in other words, 375*667 points. While the resolution in pixels can differ, a point is a constant measure and its actual presentation directly depends on the resolution parameter. In our case, we set 144 dpi that is equal to 2x modificator in the design of the application for iOS. So, now our 1 point is not 1 pixel but 4 pixels. It happens because the point contains more pixels with increasing resolution and now it takes the space of 2 x 2 pixels.

Then we can start drawing. It’s important to consider here the following nuances:

• Set the Rules of the document in Points (Right click – -> points);
• Avoid divisional measures of the objects in points;
• Avoid divisional measures of the objects placement;
• Avoid multiplying the measures from the guideline by any modificator; they should be used directly, i.e. navigation bar is drawn with the height of 44 points, not 88 as we would do in pixels;
• Instead of the pixel grid, it’s better to use the grid of 1 point. It makes drawing more convenient.

When the project for iPhone 6 is accomplished, it’s time to adapt it for iPhone 6+ or convert the project according to the given settings.
It is known that the design for iPhone 6+ needs to be accomplished in 3x, which equals the resolution of 216 pixels per inch. Before, you would have to adjust all the design manually to iPhone 6+ requirements, while with this method it is not required.

To make the explanation more applicable, the current instruction will be devoted to re-sizing mock-ups from 5s directly into 6+.

1. First of all, we want to check that our mock-up uses correct settings. The size of the canvas is set in Points. Resolution 144.

The correctness of the settings can be checked in the mock-up itself, if you set on the rulers first points and then pixels, checking the size of the same elements with marque tool. If everything is done right, then the pixel measure should be twice as big as the point measure.

2. Now we start adaptation from 5s into 6+. First, we want to increase the size of the canvas so that it corresponded to the parameters of the new device. To do it, open “Image/Canvas Size…”. In the current case, we need to enlarge the canvas from 320×568 tо 414х736. Pay attention to the anchor point as the sized will get enlarged relatively to this point. Here the designer chooses the top left corner as to it he has already anchored the elements to its edge and such up-sizing will allow additional work on the positioning of these elements.

3. This is how the project will look like after up-sizing. Left – before, right – after. As you can see, the canvas actually got bigger.

4. Having checked the pixels/points, it’s possible to see that there are some minor mismatches. 414 points are the right measure but the width of the mock-ups resolution for 6+ is 1242, not 828. The point is that we have set the resolution of 144, i.e. 2x.

5. To correct the above mentioned, we move to “Image/Image Size…”. There we are able to see the sizes of our canvas in points and its current resolution in pixels. First, we choose “Fit To: custom”. This parameter allows using further settings correctly.

As the size of the canvas in points is correct, we have to adjust its pixel measure. For this aim, we change the resolution from 144 to 216 that is going to correspond to the resolution 3x. After inputting the measure of 216, the number of pixels should change at “2208 x 1242” which we need.

6. After this we press OK. Now by the example of any element with the fixed measure in points, we can check if the resolution in pixels changed properly.

It’s done now! You need only to move the elements of the design and fix them to actual edges, but in general, the main objects are already in their places. Therefore, you needn’t worry about the sizes of the icons and buttons if you followed the guidelines.

The screens for the project for Unique Publishing, in which Konst applied his method

Optimization is a great step to the efficiency of the workflow as it can save time and make it free for more creative tasks. Here in Tubik Studio we always share our ideas on how to optimize the process saving time and effort but not losing in quality as it is strategically important in work on complex design tasks.

Originally written for Tubik Blog

Сообщение How to Resize Mockups for Different Screen Sizes in Photoshop появились сначала на Design4Users.