What is KRUPA conference?

KRUPA is the biggest interface design conference in Eastern Europe. The event is held on April 6, 2019, in Kyiv. It gathers global design stars, UX leaders, aspiring designers, and UX teams, developing networking opportunities and raising design industry in Ukraine to a new level.

• 13 fantastic speakers are coming to the event from all over the world to share their real-life experience.
• 3000 attendees. KRUPA attendees are driven and focused interface designers, product managers, and design directors. It’s the biggest interface design related gathering in Eastern Europe.
• Cool venue. The conference is held in Sports Palace—a sports and concert complex located in the center of Kyiv, within walking distance from the subway station with the same name. Its capacity will allow comfortably accommodate spectators, food courts and entertainment. Indoor sports games, concerts, major exhibitions, and fairs are held in this hall.

Here’s a quick glance at the previous conference in 2018 whose keynote speaker was famous UX design guru Alan Cooper.

Reasons to attend Krupa in 2019

Touch the legend: for the first time in Ukraine, Don Norman, a design legend and the author of the term User Experience, co-founder of Nielsen Norman Group and author of The Design of Everyday Things.

Get global insights with speakers from the USA, Switzerland, Germany, Japan, Israel, and Ukraine. Join the experience of various participants in the global UX world.

Join a powerful community of specialists. Meet designers from Smashing Magazine, Airbnb, Figma, Wix, Mozilla, Soundcloud, Tubik Studio, Lun.ua, The23.design, and CloudMade.

Feel the creative drive at the largest conference on design interfaces in Eastern Europe.

Try the big platform of networking with other designers and specialists from various companies.

Speakers in 2019

Don Norman, Nielsen Norman Group Partner

Vitaly Friedman, Smashing Magazine editor-in-chief

Cole Mercer, ex-product manager at Soundcloud.com

Guillermo Torres, Airbnb Product Designer, ex-Google, Adobe

Zach Grosser, designer educator at Figma, ex-Square, Apple

Lior Pinco, Design director for Wix.com

Max Shirko, The23 creative director, curator at Projector

Alexander Ivanov, Head of Product at ЛУН and Flatfy, curator at Projector

Takeshi Horiuchi, UX Director for Age of Learning

Dmitry Starkov, senior UX designer at CloudMade

Sergey Valiukh, Tubik Studio creative director

Anna Kuntsman Rozenberg Creative Director Wix.com

Amin Al Hazwani, User Experience Designer at Mozilla Firefox

What does it feel like?

To get more insights into the atmosphere of the upcoming conference, let us share some photos from KRUPA 2018.

More information about speakers and the overall agenda can be found on the conference website. Join in!

Don’t miss the collection of inspiring TED-talks for designers and the list of handy tools for the UI/UX design process. 

Сообщение Design Events: KRUPA Conference for UI/UX Designers появились сначала на Design4Users.

The question is definitely great and the answer, in particular, can be important for the young specialists who are considering this career. Not only in terms of humanity, but also in terms of yourself adding something to the global progress. Whatever people tell about money as the key point, in creative spheres there is a variety of research showing that designers need the feeling of creative growth and participation in global progress not less than a good salary. One of the articles in Harvard Business Blog mentions three big reasons that are common in making people happy at work: a meaningful vision of the future, a sense of purpose, and great relationships. Specifying the sense of purpose, they state: “People want to feel as if their work matters, and that their contributions help to achieve something really important. And except for those at the tippy top, shareholder value isn’t a meaningful goal that excites and engages them. They want to know that they — and their organizations — are doing something big that matters to other people.” Being aware of the destinations and seeing themselves the part of globally important processes, people tend to make the choice of a particular career as good for them.

Without getting dip into the sphere, you can see UX designers like people working out endless flows of screens. At the first sight for many people who don’t deal with all the aspects, this job looks neither interesting nor creative. And the aspect of its value for humanity also seems to be not so obvious. Here in Tubik, we’ve been lucky to see the sphere of UX design high and deep, in all its diversity, creating digital products for companies worldwide. And what we’ve seen and taken part in, makes us certain to answer: UX designers do provide considerable value for humanity.

Before starting the list of aspects for this value, let’s check the terminology. In one of the issues of UI/UX Design Glossary, we described UX in the following way: it is the general attitude and emotional feedback that the user has at 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 into 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 remains one of the strongest factors of retaining users.

Working on the UX for a digital product such as a website or mobile app, UX designers have to concentrate on such aspects as:

• usability (the product is convenient, clear, logical, and easy to use)
• utility (the product provides useful content and solves users’ problems)
• accessibility (the product is convenient for different categories of users)
• desirability (the product is attractive and problem-solving, it retains users and creates a positive experience which they are ready to repeat).

All of the mentioned positions present the value for people in terms of particular operations done day in and day out as well as global processes in different spheres like commerce and business, education, management, housekeeping, communications, and so on, and so forth. On the ground of everything above mentioned, we could assume several points of the value which UX designers provide to humanity creating a wide variety of digital products.

What are the values brought by UX designers?

1. They support fast, easy, and productive communication worldwide via products like various messengers, social networks, etc. Communication is one of the key reasons why people turn to websites and apps, and its flow has a great impact on user’s life, from personal chats with family and friends to professional online conferences and business negotiations. To create a user experience for this purpose, designers have to study the needs of the audience and offer the appropriate solutions which will make the product helpful for getting in touch with other people.

StarDust Bikers Website

2. They support international collaboration working over successful experience for apps enabling productive work within a team scattered around. Today the world has a number of applications and tools enabling professionals to work effectively from different places. That creates new business contacts and supports a great variety of international projects. And by the way, sets the ground for creating new workplaces, raising profits, and developing welfare which, no doubt, sounds like credible value. The platforms, apps, tools, and software enabling specialists from different cities, countries, and continents to operate in a big number of professional activities, all have user experience designers behind them.

3. They support the everyday life of millions of people with digital products that solve actual problems (like to-do lists or apps for taking notes), inform (like news websites or different blogs), and entertain (like apps for listening to music and watching films as well as tons of games). Every day, using quite basic and simple things like alarms, news platforms, video apps, or music players, most users don’t even imagine the simplicity of those interfaces and navigation which makes all the flow intuitive is the result of thorough work which takes many hours. User experience designers are the ones who have to build these products helpful and pleasant-to-use on the balance of applied content, target audience, and business goals.

Upper App

4. They support and improve core spheres of human life like health care, education, commerce, and self-expression. In this aspect, UX designers are contributors to different fields of human growth and development. They create the flows of interactions and layouts for educational websites, applications used in medical treatment and health care, data analysis, technical support, and other directions. Add to it the variety of specialized platforms where people share their creative outcomes like artworks, music, or pieces of writing – all of them need experience and interactions appropriate for these needs.

Health Care App

5. They make technology more accessible which means closer to people of different ages and nationalities, levels of education and tech literacy, physical and mental abilities, or disabilities. User research is one of the core parts of UX design, and one of the objectives is finding the solutions for problems, which could make using the product hard and tricky for some categories of users. Diligent UX designers aim at creating products that will be inclusive and accessible for users of different abilities.

6. They support the concept of non-stop learning through life via educational and information resources. Motion is life, and motion through the ocean of information around is not an easy part of it. People are born with natural curiosity, the wish of getting knowledge, and being informed. UX designers contribute to this eternal human movement creating flows at which users, readers, learners will not get lost under the tons of data. They apply the techniques and methods of information architecture to make the interfaces organized and problem-solving for their readers.

Birds of Paradise Encyclopedia

7. They respond to the human need for harmony and aesthetic satisfaction finding the ways to make digital products both useful and beautiful. There are many people who support the idea that digital products of today should be minimalist and purely functional. However, life is not just like that: practice shows that people want to both solve the problems and feel aesthetic satisfaction using apps and websites. The balance of these things is included in the responsibilities of UX designers.

Calendar App

8. They support products that simplify and automate decent mechanic processes saving time for activities applying creative human energy. More and more products nowadays, including chatbots, are able to automate simple things, for example, scheduling, computing, checking grammar in writing, analyzing and organizing received data, etc. Those things allow people to accomplish some tasks faster and easier and free their time for more creative tasks which machines cannot do. This is one more side of a positive user experience.

NGIN App

9. They keep the balance between the rational and irrational parts of human life and activity. UX designers work on the crossroads of rational and emotional sides of human life: creating apps and websites, they have to consider both logical thinking and typical interaction models as well as the emotional background which can greatly influence user behavior.

Cinema App

10. They make beauty working and logical as well as they make simple operations beautified and pleasant to the human eye. No special comments are needed. UX designers know how to get an efficient combination of beauty and functionality, doing it in the way which the particular product and audience require.

Home Budget app

Surely, this list is not full as well as the issue is not so purely positive. There are many aspects of the job of UX designers, some of which are inspiring while others are challenging or confusing. Still, we suppose the given positions are a good ground to believe that the job of UX designer is the one creating real value which has plenty of shades and tones. On the other hand, this variety of values added by the representatives of the given professional field brings out the number of responsibilities for the job, which should be also considered and kept in mind.

The life of UX designers is not the life of a magician flying in silver clouds and saving the world with every move of a hand. No, it’s a flow of rigorous research and analysis, creative effort, and review of the slightest details – and many other things to mention, as well as in any other job. However, that is definitely the job that brings something precious to the humanity of today and tomorrow.

Useful reading

Creative Jobs: What Graphic Designers Do

3C of Interface Design: Color, Contrast, Content

5 Basic Types of Images in Web Design

Functional Art: 10 Big Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Originally written for Tubik Blog

Сообщение How User Experience Designers Bring Value to the World появились сначала на Design4Users.

Color

In visual arts, it seems that color is the soul of everything, breathed in by the artist into a creation. Color is power, actually. It can change the mood of the image in a blink of an eye. It can encourage, warn, appeal, frighten, highlight, persuade, and so on and so forth. It can support the words or vice versa – steal their power. It can share an emotion without anything said. It can become a great weapon in the hand of a master.

No wonder, in the sphere of UI design color is one of the key steps to efficient result. It is actually a multi-functional and diverse tool able to fulfill several needs simultaneously:

• supporting recognizability and brand awareness;
• supporting readability;
• strengthening call-to-actions;
• satisfying aesthetic needs;
• sharpening navigation;
• enhancing intuitive interaction;
• beautifying visual solutions;
• creating clear and harmonic style.

As it was mentioned in one of our articles about colors in UI design, trying different combinations and their functionality for user-friendly interfaces, it is important to remember that in any case, in even the most venturesome color matches and blends should feel clean. No dirt on a screen or a page. Clarity enhances usability rate, supports readability and makes all the colors do their best.

Talking about interfaces, whose aim is to not just transfer visual message but also enable easy and successful interactions, a good way to check your solutions is a black-and-white look of the accomplished screen. Observing it, you will quickly understand if the elements, which have to be noticeable and functional, work like this or get lost without colors. Don’t neglect this easy way to check the efficiency of your design: it will reveal ineffective combinations and will easily show what are the potential problems of your interface for color-blind users.

It’s also essential to mention that color choice and combinations have great psychological potential: they are able to strengthen the message and content of the website creating the appropriate mood. Psychological aspects, stereotypes, and cultural background make the color itself a strong and effective factor enabling designers to transfer the ideas, goals, nature, and mood of the digital product.

Creating interfaces is never an act of pure creativity. It is the act of providing users with the product that will heal their pain and make their life happier. So, in the perspective of color choices and usage in UI, a designer should always remember that the interface should be highly usable and clear. All the slightest aspects of color choices should increase usability, utility and harmony. Use color coding of categories, provide color markers, use color to improve and speed navigation – there are so many aspects that can become much more efficient and user-centered just with the help of the great power of color.

The Gourmet website

Contrast

Contrast is one of the key factors influencing the scannability and visual hierarchy of the page. It enables the designer to present the layout in a way that informs users which points of interaction are vital and which ones are secondary. Contrast is effective in catching user’s attention and attracting it to particular elements, in this way supporting intuitive navigation and usability of the page or screen.

Contrast can be based on different features of UI elements including:

• color
• size
• shape
• direction.

Architecture Firm Website

The first idea that often comes to mind about contrast is something black and white. In the absence of shades and multiple colors, the monochrome image uses contrast as the main booster of expressive potential. And that works the same way in user interfaces. Even more, comparing to the pieces of art or photography, contrast not only influences the aestheticism but also has a significant impact on usability and navigability of the layout. Therefore, wise usage of contrast is the powerful method of making websites and apps user-friendly and easy to use.

Surely, it doesn’t mean that only black-and-white UI is the most effective. It wouldn’t be wise to get limited so much when users globally present such a diversity of wishes and needs. However, “black-and-white” testing, already mentioned in the previous part, is highly helpful. Designers should keep in mind that colorful interfaces can look different on different screens and resolutions. Moreover, low contrast can make the interface hard to use for people with health issues like color blindness.

One of the first questions designers usually have to answer in terms of color and contrast is what kind of general color scheme to choose: should it be dark-on-light or light-on-dark?  There are several vital aspects that should be taken into account in this perspective:

Clarity: This aspect should include the ability of the user to clearly see and distinguish all the necessary details on the screen or page. The color scheme and combinations should support easy and intuitive navigation and make the most functional elements of the layout stand out effectively. The case, when this aspect is not considered or not tested properly, can bring to the products which make a complete mess on the screen in which users do not see what they really should. One of the ways to check it is widely used “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily and quickly observed.

Readability: the ability of users to read text easily. This aspect is especially vital if an app or a website is text-driven: poor readability level can result in users missing key data or feel inexplicable tense using the product as all the way they have to struggle with the copy which takes considerable effort to be read. Lack of readability can be a serious reason why users are not retained even with attractive products.

Menu interactions

Accessibility:  the ability of the product to reach as many people as possible. That means that the decision “to use or not to use” should be mostly based on users’ needs and wishes but not on their physical abilities. Color scheme issue is among the main factors affecting this aspect. A designer should think over the users of different age, special needs, disabilities which can also determine the choice of color for the background and layout elements.

Responsiveness: the ability of the product to transform layout flexibly according to the devices it is used on. That can make a crucial effect on usability as what looks slickly stylish, attractive and clear on a high-resolution professional monitor, can transform into a dirty stain on the small low-res screen. The color scheme and contrast level, certainly, influence this issue among the first.

Environment: choosing the appropriate color scheme and the type of background for potential environments in which users are going to use it regularly and frequently. In terms of constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in terms of regular use in a badly-lit environment, a dark background can take the light away from the screen which has bad influence on navigation and readability. So, the issue of color combinations, contrast, and shades draw big attention here.

Cinema App

Content

There shouldn’t be the fight on what is more important, design, or content, as none doesn’t work at full without the other. There is a huge variety of content types that can be globally organized around copy, images, and video. Let’s have a bit closer look on them.

Images

Images take a big part in usability: as the vast majority of users are visually driven, images become the hook points of getting basic data about the website or app. Images present the part of content that is both informative and emotionally appealing. The level of detail and functionality allow classifying the images in user interfaces into types, among which:

– photos: these can be theme photos creating the appropriate mood and setting the message, demonstration photos, photos of the items on e-commerce websites, title photos for blog articles, etc.

Big City landing page

– illustrations: accomplished in different styles and complexity level, custom illustrations present the popular trend in UI design as they can look both informative and original enabling the design to stand out of the competition.

– hero banners: applied mostly in web design, they are big images which are usually the first visual element catching user’s attention in the initial seconds of interaction; they usually give the attractive visual presentation of the main content of the resource.

Dance Academy landing page

– icons: these are small but meaningful pictograms which are informative and support data exchange between the informer and addressee – while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. Icons play a key role in providing clear and intuitive navigation.

– mascots: images, usually personified, which in most cases represent the brand, product or service identity and therefore become its symbolic convention via all the application or website as well as the branded items and promotional activities. Mascots can both add positive vibes to interactions and increase brand recognizability.

– visual identity elements: these are various visual signs of branding like logos, custom lettering for brand name and slogan etc.

Jewellery ecommerce app

Copy

Words are well known as the universal mechanism of incredible functionality. In terms of a user interface, text is one of the key features to successful performance.

Taking into account the fact that web page has rather limited while mobile application screen has a highly limited amount of space that can be used for interaction elements, copy should witness elaborate and professional approach. That is actually amazing when designers are able to do all the work on the interface by themselves – obviously, that’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 to the screens or pages.

Ice website

The other way to sort out this problem is to engage the professional copywriter in the process. Any way you go, the most important thing in this aspect is to find the way of creating copy for the interface that makes every single letter count. As the 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.

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

• inform
• communicate
• enable interaction
• enhance navigation
• appeal to feelings
• engage emotions
• create tone and voice.

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 the 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 copy. This is the sort of mutual support of outer and inner side.

Success of the efficient copy directly depends on such design solutions as the choice of types and fonts, background, 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.

Museu landing page

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

— creating copy presenting user personas and use cases: done by a professional writer on the basis of information obtained from user research, these types of texts can be more efficient, concentrated and concise, which is vital 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 web pages;
— creating the copy for sets of catalog or menu positions;
— creating engaging copy for landing pages;
— creating templates for item descriptions etc.

Architecture blog

Video

The frequently used types of video content:

– introduction video usually gives the first insights about the company, product, or brand and shows what benefits the users can get

– product presentation videos gives details about the product’s features and advantages, informs about special steps of interactions and shows the problem-solving potential of the product

– landing page videos strengthening the message driving users to a particular call-to-action offered on the page

– video testimonials showing the reasons and signs of trust and loyalty to the company, brand or product

– entertaining and educational videos rising emotional appeal and often presenting the material for viral marketing.

All the mentioned types can serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually do it in a way of telling a story. All the mentioned combination of factors tend to make the presentation strong and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time to learning about products or services, especially the new ones. In these conditions, video can become the way of communication which is dynamic, informative, and attractive. However, it should correspond to the general stylistic concept and be technically correct so that it wouldn’t take too much time to load.

Storyboard for Binned promo video

Having checked three core aspects of user-friendly design, it’s easy to see that the creative process includes multiple issues that designers have to consider. There are no universal solutions: for every project, the decisions must be made on the basis of user and market research as well as thorough user testing. To make users feel the magic, designers have to find the combination of 3C which does its best for the particular users’ problems and business goals.

Useful articles

Color in UI Design. Look on the Bright Side
Color in Design. Influence on User’s Actions
Light and Darkness in UI Design. Matter of Choice
Copywriting in UI. Words that Make Design Go Round
Small Elements, Big Impact: Types and Functions of UI Icons
Visual Hierarchy: Effective UI Content Organization
Tips on Applying Copy Content in User Interfaces
Visual Perception: Icons vs Copy in UI

Originally written for Tubik Blog

Сообщение 3C of UI Design: Color, Contrast, Content появились сначала на Design4Users.

What is the difference between UI/UX designer and programmer?

UI and UX design present different aspects of creative flow for digital products. Basically, UI design aims at creating an effective and attractive user interface while UX design aims at providing a positive user experience. Interaction with a product via the user interface is a part of user experience, so we UX design as a creative field is broader and includes UI design as its integral part.

Work on information architecture for a website UX

Working on the UX and UI for a digital product such as a website or mobile app, designers have to concentrate on such core aspects as:

• usability (the product is convenient, clear, logical and easy to use)
• utility (the product provides useful content and solves users’ problems)
• accessibility (the product is convenient for different categories of users)
• desirability (the product is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat).

UI design of some screens for Home Budget App

Programmers or developers are people who actually build the website or mobile application planned and designed by UI/UX designers. They breathe life into the plan, with the code they create the live product which users can actually apply to solve their problems and satisfy wishes. Programmers transform the structure and visual performance thought out and created by designers into the real interface.

How interfaces look from the programmer’s point of view

Therefore, to see the difference, we can apply the metaphor of an actual construction site:

– UX designers are architects who come up with the general concept, its structure and the flow of interactions as well as a variety of factors which influence positive or negative user experience (in case of real building it could include transportation, quality of air, availability of shops and entertaining points, educations and sports facilities, neighbors, etc.).

– UI designers are architectural visualizers who find the best solutions for visual performance of the object corresponding to the style, the environment, user’s expectations, and aesthetic needs based on the already agreed architecture, structure, and core factors of interaction.

– Programmers are actual builders who create the final object in reality. As well as on the building site, they have various specializations: some are good in creating the foundation, others know how to realize visual features made by designers, and some of them work out effective interaction with this object in particular environments and for new requirements which can arise later.

Do UI/UX designers need to know computer science and programming to create top-quality user-friendly designs?

This is the question in which the terms should be clearly defined.

Computer science in its traditional understanding is a broad comprehensive study including theory and practices for making and using the computers (now it can also go further to other kinds of digital devices and gadgets). It is often characterized as the scientific and practical approach to computation as well as study, exploration, and automation of diverse operations with data. Therefore, the person with a major in computer studies is usually a specialist in the theory of computation and design of this sort of system and hardware.

In this perspective, yes, knowledge of computer studies is a great basis for creating problem-solving and user-friendly interfaces. UI/UX designers are professionals dealing with much more than just the looks of a website or an app: they think over the logic, transitions, usability, accessibility, emotional and aesthetic appeal, data presentation and lots of other things forming the whole user experience. Whatever is the way to get this knowledge – higher education, courses, apprenticeship, self-education, etc. – it underlies the necessary basis of knowledge which allows a designer to understand human-computer interaction for appropriate and effective design solutions. The knowledge of computer science is an important factor in being a competent designer of modern user interfaces.

As for programming, the situation is different. There are, basically, two camps of extreme positions. One side claims that programming/coding is the absolutely vital thing to know and you cannot provide really efficient UI/UX without knowing how to code. The other side believes that the knowledge of programming kills creativity in design as in this case designer is limited with the rules, standards and restrictions of development. Both positions are supported by numerous articles and discussions and both somehow make sense if you think about the issue in the perspective of real design projects.

On the basis of our team experience, it’s easy to state confidently: you definitely CAN be a competent and successful UI/UX designer for mobile and web with no background or major in programming.

Basically, the task of UI/UX designer is to analyze the target audience and their needs, to make a research, to create an efficient layout and well thought-out system of transitions, to wrap it in an attractive but highly usable and clear visual design and to test the solutions. UI/UX designer is not a developer: they work on the same product but from different sides, as well as for example a writer, an editor and a publisher work differently on the same book. However, it is obviously pleasant for developers if a UI/UX designer is able to produce designs that consider at least the basic limitations and points of programming and coding.

You can find a great bunch of successful experts in app and web design who have never had anything in common with the sphere of coding and development and provided great design solutions with a very high level of usability. Nevertheless, in the case of high-level specialists, it’s impossible to say that they are totally out of the issue. Designers, who are keen to create viable product designs, usually tend to get acknowledged with the general understanding of development basics. That really supports the designer in providing effective design as possible, considering all the stages of its creation and implementation. However, it doesn’t mean that without this sort of knowledge it’s impossible to create good designs. Moreover, if designers work in a team with developers, they can create designs without knowing how to code even easier as they are supported by developers who control the process from the perspective of coding.

The happy medium should be found in this issue without any extreme positions. If designers tear themselves too far away from development reality, they risk losing viability of their designs and could end up having a great deal of amazing and terrific concepts none of which will be implemented in real products. On the other hand, if designers concentrate too much on the limitations of coding, they risk becoming unable to think out of the box and provide original design ideas. Keeping a wise balance provides harmony.

So, to sum up, a person can become a successful UI/UX designer not knowing programming and development; however, this kind of knowledge can be supportive if used wisely.

Working on interfaces created from the first line of design to the real digital product, like Upper App and Toonie Alarm, we find thoughtful and organized teamwork the most effective workflow: UI/UX designers, developers, content, and branding specialists have to be involved in the creative process from the very beginning and combine their strongest sides into one product. The wise delegation of tasks works more quickly and effectively than the attempts of one person to explore and cover everything. And this sort of teamwork lets designers and developers share their knowledge and understand each other’s decisions for the sake of good outcome solving users’ problems.

Upper App

Originally written for Tubik Blog
Welcome to read us on Quora

Сообщение FAQ: Should UX Designers Know Programming and Computer Science? появились сначала на Design4Users.

We’ve already touched upon the topic of wireframing in our article about creating mobile applications, and since the topic remains actual and debatable, this time we want to devote the full article to the roots, nature, benefits and diverse issues of the wireframing process as well as the reasons why it’s advisable for designers to apply it.

What’s a wireframe?

Wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

Wireframing is effective at the beginning of the design process when the main objective is to create the product’s structure. Designers use wireframes to outline visual and typographic hierarchy on user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general interface clearly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures, and all the interactive elements on the page.

Example of UX wireframe for HealthCare App

Earlier we presented the typical creative flow for the digital product we have here in Tubik by the example of creating mobile apps and mentioned the set of stages in this process:

• setting the task and initial scope of works
• estimation
• user/market research
• UX wireframing
• prototyping
• UI design
• animation
• software architecture planning
• iOS development
• testing
• release
• updates.

According to this list, it’s easy to see that UX wireframing is not the first stage of digital product creation, but it’s usually the initial phase of actual design when the future website or application gets its first visual presentation, the sketch of its face and figure. The chances are high that the actual participants in creating digital products would agree with the idea offered by UXPin team in their book on wireframing: “Whether you’re building the next hot startup or a solid website or mobile application, wireframes are invaluable in keeping everyone on the same page – not just product managers, designers, and engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises.”

Why do you need wireframing?

Wireframing is a fast and cheap way to plan the structure of the page or screen design. What’s more, it gives numerous advantageous opportunities not only for designers but for the whole development team and for clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get a clear understanding of the project’s design. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape since it doesn’t take much efforts and time to create one.

The other benefit a team gets from the wireframes is that developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both the designer and the development team. In addition, wireframing is quite inspiring for designers. It is flexible and provides much room for experiments which makes the creative process more productive and presents the field for fresh outstanding solutions.

In one of our previous articles, we provided a bit of metaphor on the basic reasons why wireframing is always included in creative process here in Tubik. When we think about building the 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: vice versa, it will save your time and effort you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

All in all, wireframing is an effective tool that can save time and money for both the team and the client. It helps organize development and design processes and reduce the chances of problems on future steps.

Types of wireframes

There is an opinion that a wireframe is exceptionally a low-fidelity paper sketch of the page structure with boxes and lines illustrating visual elements. Nevertheless, today modern technologies help designers create wireframes of different fidelity level within a short time and without great effort. Typically we can define 3 widely-used types of wireframes.

Low-fidelity wireframes. They are black and white illustrations focused on a “big picture” of the page. UI elements are shown as boxes and lines without detailed annotations. The wireframes of this kind are quite abstract, but they give a chance to see the basic structure of the user interface.

Medium-fidelity wireframes. This type is created in a monochrome palette, often gray-scale which makes it similar to the previous one. The wireframes can be created both manually or via digital tools so that the UI components are more detailed and realistic. Copy elements such as headlines and headers are distinguished that assists to establish typographic hierarchy. Placeholders are filled with images and the comments describing their destination.

The UX wireframes for SwiftyBeaver project

High-fidelity wireframes. These wireframes are created via digital tools. The core difference from the other types is that high-fidelity wireframes are built in color and present the screens in the view close to the final visual performance. The fonts are styled and visual elements are created with textures and shadows. The designer pays more attention to the sizes and alignment of UI components. It’s actually the static version of the app or website presented page-by-page or screen-by-screen. So, in distinction from the previous stage, they are called UI wireframes.

UI Wireframes for Saily App

Wireframing vs Prototyping

High-fidelity wireframes tend to be often confused with prototypes because they are created in colors and look realistic, similar to a fully accomplished project. Nevertheless, these concepts present different stages of the design process, have different aims and focuses. As we’ve already mentioned, wireframes are focused mostly on the structure of the page. On the other hand, prototypes are created to give a more detailed look at the UI elements, their style, and alignment: the biggest difference is that prototypes give the opportunity to test the interactions between the user and the interface similar to the final product. As we mentioned in UI/UX Glossary, 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. However, 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.

Interactions need to be thought out well and similar to the final result and checked thoroughly before the development team starts their work. Making alterations, adding elements, and changing transitions is much more time-consuming and expensive at the stage of development, that’s why it’s important to check the usability of the UI elements in advance. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik, we support the workflow having the sequence «UX – prototype – UI».

The prototypes on UI stage can be created for the presentation of application general looks rather than for testing and improving its functional features. And this is the trap in which it is easy to get confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It can 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 solution 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. Anyway, the solution of applying prototyping at different stages of UI process should be approached individually according to the requirements and goals of every particular case.

Prototypes are created on the basis of the static wireframes, making them clickable and interactive, so the designer can try out if the interface is clear and usable for a real user. This kind of testing is a key step in the design process because it allows identifying possible problems and difficulties with user interactions. There are various prototyping tools providing functionality on checking the usability of the design solutions, and research platforms which make the process even easier.

Efficient wireframing tools

Today, designers are not limited in the aspect of choosing tools for wireframing: there are plenty of them, free and paid, to set up the productive design flow. The number of tools is growing so fast that it’s easy to get lost among them.

Wireframing is an integral part of the design process here at Tubik, so our designers need a flexible and effective tool for creating wireframes that can be effective both for individual and complex team tasks. The long path of probes has led us to Sketch.

Sketch is a professional design software that allows creating the variety of art and design projects. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel. Sketch is an effective tool for UI/UX designers because it can be applied at different stages of the design workflow starting from wireframing. The features which we see as advantages are quite convincing.

It’s vector-based. This means designers can use vector shapes and scale them without losing quality. Moreover, the artboard is still pixel aware which is a core thing for creating quality web and app design.

Effective guidelines. You can see dimensions of the components and spacing between them only by holding the alt key. This is helpful not only for designers but also for developers. When designer shares the wireframes with the development team, they can define the placement and details of UI components and layout without designer’s explanations.

Grids. Unlike many other tools, Sketch provides the inbuilt grid feature that saves designers’ time since they don’t need to create it beforehand.

Native font rendering. It often happens that fonts in a browser look absolutely different compared to the PSD and it ruins the whole picture. Nevertheless, Sketch uses native font rendering that makes fonts feel more natural and accurate in browsers.

It’s fast. Sketch is a tool oriented on web and app design, so the functionality is more concise compared to other software in the field. This makes it lighter, so it works much faster not overloading the computer which saves time (and nerve!) for designers.

Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions. Nevertheless, if you don’t have one, you shouldn’t give up. There is still a classic option – Adobe Photoshop. Yes, it may work a bit slower but it is an efficient tool for creating wireframes, and many designers are sincerely linked to it as a multipurpose tool. Moreover, you should remember that not all the customers are ready to accept the assets in Sketch, so Photoshop will save the game in this case. It proved itself as an efficient tool. Among newer options, the star of Adobe Experience Design (XD) is also rising and winning its positions on the market and in design flows.

And, for the last point here, if you are keen on creating interactive high-fidelity wireframes, you’ll need additional tools to make them clickable prototypes. For this stage, we could single out InVision and UXPin: these tools help to add the interactivity to wireframes creating efficient samples for gathering feedback from the team and clients.

Tips on how to make your wireframing efficient

There are no big secrets about creating a quality wireframe still some tips on how to make it more productive can be mentioned for the bottom line:

Do thorough research beforehand. Do not start the wireframing process before you outline the goals, USP, target audience, and the problems which should be solved with the product.

Keep them simple. The aim of a wireframe is to create a structure of the page design, details go after.

Use a monochromatic palette for UX wireframes. Our experience proves that the design process is more productive if the designer leaves detalization for the next step.

Write annotation. If the designer plans to present a wireframe to the team, it would be good to include annotations. They help to catch and understand the ideas quicker and deeper.

Gather feedback. Try to ask the opinions of your team members and perhaps even potential users, if possible, at this stage. It is an effective way to improve your work and save your time for later stages needing a more sophisticated design.

Use a grid. It helps to place all the components in an efficient way for users’ perception.

Recommended reading

Here is the collection of recommended materials for further reading in case you would like to read more on the theme.

The Guide to Wireframing (E-book)
The Wireframe Perfectionist’s Guide
Using Wireframes to Streamline Your Development Process
What is a Wireframe: Designing Your UX Backbone
Jargonbuster: mockups, wireframes, prototypes
What’s the difference between wireframes and prototypes?
10 tips to improve your wireframes in the web design process
9 Free to Use Wireframing Tools

Originally written for Tubik Blog

Сообщение UX Wireframing: Foundation of Usability появились сначала на Design4Users.