UXpin's Blog, page 113

UXPin Changelog August 2017 #6

The changelog is our weekly post series on all changes, improvements, and fixes we released past week. If you’re interested in what we launched already in August, check last week update.

Design Systems Librieries

Reorder items in Design Systems and Design System Libraries with drag and drop.

 

Additional ways of presenting colors and assets in Design Systems for Sketch Design Libraries. Show colors as tiles or stacked and show assets thumbnails in one of three sizes: small, medium or big

Preview

[Performance] Lazy loading of comments to improve the overall experience while working with lots of comments.

Editor

Added ability to rename prototype inside Editor

 

Join the world's best designers who use UXPin.Sign up for a free trial.Your e-mailTry it for free!

The post UXPin Changelog August 2017 #6 appeared first on Studio by UXPin.

UXPin Changelog August 2017 #5

The changelog is our weekly post series on all changes, improvements, and fixes we released past week.

Design Systems

Ability to edit Design System Libraries items from the Design Systems documentation:

– add or remove a color or an asset or change its name

– change the category name

 

Ability to simulate interactions for UI Patterns in the Design Systems documentation.

Design System Libraries (Sketch plugin v4.4)

Ability to change the order of the items in Design System Libraries.

[fixed] Newly added Libraries are by default visible on the list.
[fixed] Optimized assets size in the Design System Libraries.
[fixed] Symbols added to the Design System Libraries will be stored with their shared styles.

Symbols

Symbols lock improvements: lock dimensions of a symbol/group are ignored during resizing.
[fixed] Symbols are shown in search results in the Editor.

Security (Enterprise only)

Enforcing password to Prototypes Preview: only account owner can turn this feature on/off. Now the account owner can generate passwords for all prototypes, new and already created.

Join the world's best designers who use UXPin.Sign up for a free trial.Your e-mailTry it for free!

The post UXPin Changelog August 2017 #5 appeared first on Studio by UXPin.

UXPin Changelog July 2017 #4

Since our Design Systems launch, we have been working on a few major and many minor product improvements. Below you can see what our team achieved over the last six weeks.

Design Systems

Additional ways of presenting colors and assets in Design Systems
All assets can now be downloaded at once
Design System documentation is presented on separate pages instead of one. You can check how it works here
Additional styling options in Design Systems documentation
(Performance) Optimizing thumbnail size for Sketch imports
(Performance) Loading time improvements for Design Systems with many assets

Design Libraries

Ability to move items between categories in Design System Libraries with Drag&Drop
Ability to show and hide Design System Libraries using shortcuts (cmd+L for Mac and ctrl+L for Windows)
Design System Libraries panel in Sketch remembers its last position and size, even on different resolutions
New Libraries are visible by default
Color picker shows colors from the last opened Design System Library

Symbols

Ability to apply/clear single overrides for symbols. Now, when you have multiple overrides in a symbol, you can select overridden element inside the symbol and choose the desired action
Cloning symbols (basically it’s duplicating and detaching at the same time)
Detach button is inactive when the symbol was already detached
Improved way of resizing nested groups and symbols
Enhanced flow for deleting symbols: local properties of a symbol are cleared after deleting the last instance of the symbol from the canvas. Once you drag the symbol from the Design System Libraries again, it’ll have its original form.

Preview

Page scrolling is now running at 60fps (unfortunately, due to browsers technical limitations, at the moment it’s not available for pages containing sticky position elements, with zoom set at 100%)
Removed memory leaks when changing pages

Join the world's best designers who use UXPin.Sign up for a free trial.Your e-mailTry it for free!

The post UXPin Changelog July 2017 #4 appeared first on Studio by UXPin.

Enterprise UX: The State of the Industry in 2017 and 2018 [Infographic]

We are in the midst of an enterprise UX renaissance.

Startups like Gusto, Stripe, and Slack are setting the expectation that business products should be useful, usable, and satisfying. Meanwhile, large organizations like IBM, GE, and Salesforce are prioritizing design as a competitive advantage by hiring thousands of designers. 

What challenges do designers face when designing B2B products? What processes rule the day? And how much do they earn? We’ve captured key insights in the infographic below.

For more in-depth insights, download the 41-page Enterprise UX Industry Report for 2017-18.

 

 

 

1. UX design is still new to B2B companies

At companies with more than 500 employees, 35% of respondents reported that a full-time UX design role has existed in their company for less than three years. Across companies of all sizes, 53% of respondents reported that UX has existed for less than three years.

This shows us that UX design is still a new discipline to over ⅓ of established companies.

 

2. Design consistency is the top challenge

Design doesn’t scale like engineering.

As teams grow, design processes eventually break. Unless a standard set of tools and guidelines are in place, every new designer may introduce new inconsistencies to the product – slight changes in color, typefaces, or design patterns altogether.

Add in the complexity of B2B organizations, and it’s no surprise that 59% of all respondents reported that maintaining design consistency is their biggest challenge.

To eliminate inconsistency and improve scalability, many companies are turning to design systems as a long-term solution. Popularized by enterprises like Salesforce, Microsoft, Intuit, and others, a design system prescribes standards for product development and all the design and code components required:

Guidelines – The design principles, code conventions, and editorial guidelines
Visual assets – Color palettes, typographic scales, grid definitions, icons, etc.
UI patterns – The design and code for repeating patterns in a product (e.g. page layouts, forms, buttons, etc)
Governance and maintenance – Who can contribute changes to the design system and how changes get approved

3. Executive buy-in for design is more difficult in larger B2B organizations

A clear correlation exists between company size and degree of executive buy-in. In companies with 1 to 25 employees, 27% reported that executive buy-in is a challenge. At companies with 1000+ employees, that number nearly doubles to 48%.  

4. Most B2B organizations follow agile processes

It is encouraging, however, that the old waterfall style of product development is fading away. Instead of defining all the requirements upfront and completing the work in phases, more teams are now following an agile process where requirements are regularly revisited, work is done in smaller iterations in “sprints”, and the output of each sprint is tested with end-users.  

5. Design systems are the key to scaling UX

The iterative nature of agile development, however, requires new types of tools for designers and developers. To keep up with the fast pace, teams need tools that can help them collaborate and deliver consistent work.

Since design consistency is the top challenge, it makes sense that 69% of respondents said their companies either have a design system or are building one.

6. Self-education popular amongst B2B designers

Over 65% of respondents report learning design skills on their own. This percentage represents the number of people with no formal design education, and those with formal education who continue learning on their own.

The high rate of self-education could be due to the limited amount of formal UX programs. According to UX Mastery, only 132 universities around the world offer a 4-year degree related to UX.

7. Design income and career prospects are promising in the B2B world

Despite the challenges, the future looks bright for designers in the B2B world.

Income dramatically increases once you have three to five years of experience – At this level, three times more respondents earn greater than $100,001 per year in the U.S. compared to those with one to three years of experience.

Promising long-term career income – After 10 years of experience, 82% of respondents report yearly earnings of at least $150,001 in the U.S. 

Conclusion

With UX spreading across the enterprise industry, more teams experience the growing pains of scaling design culture and processes.

Design consistency, usability testing, and clear requirements remain pressing issues with majority of respondents.
Designers per developer decreases as company size increases.
Over half of respondents indicated that a full-time UX role was just introduced in the past three years.

Product teams, however, are quickly adapting to enterprise sprawl with more collaborative processes and toolkits. Nearly 70% of respondents report using a design system and over 90% follow some form of an agile process.

Enterprises are finally facing the reality that business users expect the same quality of experience as consumer products. While transformation won’t happen overnight, the future looks promising. As UX continues to evolve as a core business competency, so too will the processes and platforms that support collaborative product development.

For more insights around team structure, income, design leadership, and more, download the free 41-page 2017-2018 Enterprise UX Industry Report.

The post Enterprise UX: The State of the Industry in 2017 and 2018 [Infographic] appeared first on Studio by UXPin.

Design Systems 2017 Industry Report Survey

We discovered in our Enterprise UX Industry Report that 59% of designers struggle with design consistency.

One solution is the design system – a standardized toolkit of design standards, code standards, and components that satisfy both. Given the rising popularity of design systems, we wanted to capture current best practices, frameworks, and processes.

For our last survey, we had over 4100+ responses. If you work on a design system, we’d love to get hear about your experiences in this 3-minute survey.

Feel free to complete the survey in a new tab or right below.

The post Design Systems 2017 Industry Report Survey appeared first on Studio by UXPin.

Introducing the 2017-2018 Enterprise UX Industry Report

Driven by the consumerization of the enterprise, user experience is now a major competitive advantage for B2B products notorious for poor design. While many have reported on the overall role of design, few have investigated the new status quo for the trillion-dollar B2B space.

That’s why we conducted the first ever report into enterprise UX.

Diving deep into the B2B sector, the report uncovers insights from 3100+ product, engineering, and design professionals from around the world.

Respondents reported their background, experience, salaries, team structures, product development processes, design maturity, and more. The new report reveals the trends, challenges, and forecast for freelancers, agencies, and teams of all sizes who create B2B products.

Key insights in the 41-page report include:

1. UX is still new to B2B companies: Only 26% of respondents report that a full-time UX role has existed for more than 5 years.

2. Design consistency is the greatest challenge

Improving UX consistency (59%)
Testing designs with end-users (53%)
Clarifying requirements (46%)
Collaborating between teams (44%)

3. Agile rules the day: 93% of respondents report they follow either an Agile or “Agile-fall” product development process.

4. Salaries and earning potential are strong: In the U.S., 72% of all enterprise designers earn at least $75,000 per year.

Download the full 41-page report. 

The post Introducing the 2017-2018 Enterprise UX Industry Report appeared first on Studio by UXPin.

Diving Into the Data: Why Enterprise UX Is So Hard

Think about all the frustrating products you’ve used at work. Expense reporting apps. Outdated CRM systems. Database management tools. In the world of B2B products, UX has historically been an afterthought.

That’s because it’s not easy to overcome years of engineering-driven culture, legacy technology, and complex bureaucracy.

In the 2017-2018 Enterprise UX Industry Report, we gathered insights from 3,157 designers, developers, and product managers in the B2B world. In this post, we’ll dive into just a slice of the data.

The top challenges in enterprise UX included:

1. Improving UX consistency (59%)

2. Testing designs with end-users (53%)

3. Clarifying requirements (46%)

4. Collaborating between teams (44%)

 

Legacy technology issues increase with company size

61% of respondents in companies with 5001 or more employees report legacy technology as a UX challenge.

Meanwhile, only 33% of respondents in companies with 26 to 100 employees reported the same challenge.

UX consistency is a universal challenge

The data indicates that improving design consistency becomes a significant challenge once a company grows beyond 25 employees.

The results aren’t surprising since poor product consistency is a byproduct of poor communication and collaboration (both of which become increasingly difficult with distance).

Executive buy-in becomes more difficult as company size increases

Almost half of all respondents from companies with 5001 or more employees reported that executive buy-in and understanding of UX is a challenge.

Collaboration becomes more difficult as developers outnumber designers

The data showed that larger companies tend to be distributed and hire more developers per designer.

As designers support more developers across locations, collaboration certainly becomes a greater challenge.

Want to know more about the current state of enterprise UX? Check out the 2017-2018 Enterprise UX Industry Report for all the details.

The post Diving Into the Data: Why Enterprise UX Is So Hard appeared first on Studio by UXPin.

The Future of Design Tools Isn’t Prototyping: UXPin Systems

It’s hard to believe we started UXPin 7 years ago.

Our first product was a paper prototyping notepad aimed at bringing designers and developers together, instigate collaboration and make the software development process faster.  A little bit over a year later we followed with our digital collaborative prototyping tool, with the very same goal. Since then  we never stopped  learning from our customers and building the tool that makes working together easier, release after release.

The prototyping tools market in 2011 was much different than it is today. A few companies had to do their best to sell the importance of prototyping and often the importance of design.  There weren’t too many options, which wasn’t helping us proving that prototyping matters at scale. Our first two rounds of funding were a pain to raise.  I constantly heard ‘Yeah, but who cares about design anyway. It’s a small market’.

And then everything changed. Design ate the world.

The Market Today

Since early 2017, five of the ten biggest publicly traded companies by market cap are either software companies (the main product is entirely digital), or software makes up a significant part of their revenue stream.

It didn’t happen overnight of course.

This crawling digital revolution is at least 20 years in the making and continues to inspire more and more companies to take a stab at digital. Money has the strongest magnetic field of them all.

At the very same time, the cost of producing technology continues to drop and availability of  capital increases, allowing more companies to compete. Today, it’s  is safe to say that every significant sector of software is full of options for customers. This is the era of hypercompetitiveness. The perfect time for design.

When the market becomes hypercompetitive, experience design becomes the main differentiator.

Soon, businesses all over the world started to notice that to thrive – they have to invest in design. In the last 5 years, the designer to developer ratio improved by 2.5x and the number of designers in China grew to 17 million. Design, in the past an after-thought, became the priority and the demand for design became stronger than ever.  

With the boom on the design market, no wonder the boom on the design tools market followed. Instead of a few options, we’ve started to hear about new tools being launched every other week. And this is great!

Stronger competitors energized innovation and segmented the market. Instead of providing one solution to fit all, companies started to focus on sub-segments and niches.

UXPin thrives in the mid and enterprise market and we’re widely considered the top option for teams in need of an advanced tool (take a look at these two examples of case studies: PayPal , Sapient ).

We’re very proud of our prototyping solution and we’re going to continue to build it up for our customers. And I’m sure others are going to try to challenge our position and we’re going to welcome them to the market and compete.

Here’s the thing though, despite the whole influx of prototyping tools – software development did not become that much easier, faster, more reliable or more scalable.

With every new prototyping feature, every new prototyping tool, we’re becoming a couple of percent better at creating software, but we’re not making big leaps on the path to greatness. As an industry, we’re just about to hit the wall at full speed, because we’re overinvesting in small tools solving small problems, instead of addressing the biggest challenges and pushing the industry forward.

Prototyping tools are not enough anymore. We have to think bigger.

The Biggest Problems in the Design Industry

We’ve spent the past year researching the biggest problems in software development and the biggest problems in design. We interviewed hundreds of designers and design leaders, surveyed over three thousand enterprise designers, tested dozens of prototypes. And guess what? Prototyping isn’t the magic bullet.

The biggest problem in the industry: design is hard to scale.

Hypercompetitiveness on the software market and the growth of the importance of design, brought a lot of business pressure to the lives of designers. We’re constantly being asked to take over more projects, work faster and deliver better experiences. And it’s damn hard. And sometimes we simply fail. So at the biggest companies, design headcount keeps increasing. And the new designers have a hard time.

Scaling design through hiring only is a myth and path to failure.

You would think that by increasing the size of the team you’re naturally increasing speed. Trust me, it’s a myth confirmed by hundreds of companies. When you bring more and more designers without establishing certain standards, you’re triggering design entropy.

Every product, unless properly managed, is becoming more chaotic over time. It’s design entropy.

Your product is becoming more inconsistent and chaotic over time, because every designer adds their own piece to the ecosystem. These inconsistencies confuse users and developers. Product development becomes more expensive and less effective. Maintenance cost rise, which slows down design and development.

Eventually, everyone needs a design system.

And Here We Are: Enter the Design System

Style guides and pattern libraries have been around for ages.

The promise was great, but they never fully realized the value of modular, consistent, predictable and scalable design. Both are stuck in the static world, far away from the tools that designers and developers use. Documentation still needs to be manually created as a PDF, Confluence page or simply a website.  Never fully actionable. Always out of date.

Style guides and pattern libraries might have pointed at the right problems, but they weren’t the right solution.

And then some insanely smart people (Nathan Curtis, Jina Bolton, Brad Frost, Dan Mall…) and very smart companies (Salesforce, Airbnb, IBM…) started to build complete design systems, merging design and development and treating them as a process, not the final outcome.

Instead of investing months of work into building a static collection of standards, a design system becomes part of the process of building software. Instead of aiming at solving everything, a design system gradually improves the consistency of the interface and efficiency of software development.

A design system is an evolutionary process, not a revolutionary process.

Design systems establish the ever growing and ever changing source of truth for the entire design and development teams. And this is the key to scale. Every new team member, instead of starting from scratch, can hit the road at full speed with an approved set of building blocks (colors, typography…), patterns, and rules to build consistent experiences fast. Everything connects back to code, so developers can reuse rather than recreate.

Design and development with Design Systems is the future. And we’re committed to bringing this future to you – today.

Introducing UXPin Systems

I’m extremely proud to announce UXPin Systems. The new UXPin product aimed at solving the problem of scaling design and development. The first complete and actionable design systems platform.

In the first release we’re delivering four experiences:

 

Build & Document Design System

Building a design system has never been easier. You can either start from scratch or use existing libraries in UXPin or Sketch to build the core.. Add documentation wherever needed and you’re good to go with the first release.


Share & Sync Design System

By generating design system documentation with UXPin, you’re automatically creating a sharable link that stays in sync with your libraries. You can share it with the team and it’s always up to date.


Use Design System in UXPin or Sketch

Everything in your design system is actionable. Every single color, style of text, icon or UI pattern saved in the system can be used across projects in UXPin and Sketch. You can update your Design System and sync it across accounts of all your fellow designers, giving you one source of truth.


Document Automatically

Every project created with elements from a design system is automatically documented with data from your design system. That means documentation is generated automatically.

The Ultimate Task: Bridging Design and Development

The first release of UXPin Systems  is the result of a year of research and months of work.

Over 4,500 people participated in the early access program providing an invaluable feedback (thank you!). We couldn’t be happier or prouder.

This is just the beginning. We’re committed to helping companies all over the world build better experiences faster. Prototyping is part of this story, but on its own is not enough.

It’s a new world of design and design tools. It’s the world of systems.

Seven years ago, we started UXPin with an attempt to bridge design and development with paper prototyping. Today, we’re sure that the ultimate bridge between these two worlds is a common system of design and code.

Design and code are like spoken and written words. They represent the same concept. And UXPin helps help form the entire language to scale that communication.

Sound interesting? Sign up for a free trial of UXPin Systems now.

The post The Future of Design Tools Isn’t Prototyping: UXPin Systems appeared first on Studio by UXPin.

The Future of Design Tools Isn’t Prototyping: Introducing Systems by UXPin

It’s hard to believe we started UXPin 7 years ago.

Our first product was a paper prototyping notepad aimed at bringing designers and developers together, instigate collaboration and make the software development process faster.  A little bit over a year later we followed with our digital collaborative prototyping tool, with the very same goal. Since then  we never stopped  learning from our customers and building the tool that makes working together easier, release after release.

The prototyping tools market in 2011 was much different than it is today. A few companies had to do their best to sell the importance of prototyping and often the importance of design.  There weren’t too many options, which wasn’t helping us proving that prototyping matters at scale. Our first two rounds of funding were a pain to raise.  I constantly heard ‘Yeah, but who cares about design anyway. It’s a small market’.

And then everything changed. Design ate the world.

The Market Today

Since early 2017, five of the ten biggest publicly traded companies by market cap are either software companies (the main product is entirely digital), or software makes up a significant part of their revenue stream.

It didn’t happen overnight of course.

This crawling digital revolution is at least 20 years in the making and continues to inspire more and more companies to take a stab at digital. Money has the strongest magnetic field of them all.

At the very same time, the cost of producing technology continues to drop and availability of  capital increases, allowing more companies to compete. Today, it’s  is safe to say that every significant sector of software is full of options for customers. This is the era of hypercompetitiveness. The perfect time for design.

When the market becomes hypercompetitive, experience design becomes the main differentiator.

Soon, businesses all over the world started to notice that to thrive – they have to invest in design. In the last 5 years, the designer to developer ratio improved by 2.5x and the number of designers in China grew to 17 million. Design, in the past an after-thought, became the priority and the demand for design became stronger than ever.  

With the boom on the design market, no wonder the boom on the design tools market followed. Instead of a few options, we’ve started to hear about new tools being launched every other week. And this is great!

Stronger competitors energized innovation and segmented the market. Instead of providing one solution to fit all, companies started to focus on sub-segments and niches.

UXPin thrives in the mid and enterprise market and we’re widely considered the top option for teams in need of an advanced tool (take a look at these two examples of case studies: PayPal , Sapient ).

We’re very proud of our prototyping solution and we’re going to continue to build it up for our customers. And I’m sure others are going to try to challenge our position and we’re going to welcome them to the market and compete.

Here’s the thing though, despite the whole influx of prototyping tools – software development did not become that much easier, faster, more reliable or more scalable.

With every new prototyping feature, every new prototyping tool, we’re becoming a couple of percent better at creating software, but we’re not making big leaps on the path to greatness. As an industry, we’re just about to hit the wall at full speed, because we’re overinvesting in small tools solving small problems, instead of addressing the biggest challenges and pushing the industry forward.

Prototyping tools are not enough anymore. We have to think bigger.

The Biggest Problems in the Design Industry

We’ve spent the past year researching the biggest problems in software development and the biggest problems in design. We interviewed hundreds of designers and design leaders, surveyed over three thousand enterprise designers, tested dozens of prototypes. And guess what? Prototyping isn’t the magic bullet.

The biggest problem in the industry: design is hard to scale.

Hypercompetitiveness on the software market and the growth of the importance of design, brought a lot of business pressure to the lives of designers. We’re constantly being asked to take over more projects, work faster and deliver better experiences. And it’s damn hard. And sometimes we simply fail. So at the biggest companies, design headcount keeps increasing. And the new designers have a hard time.

Scaling design through hiring only is a myth and path to failure.

You would think that by increasing the size of the team you’re naturally increasing speed. Trust me, it’s a myth confirmed by hundreds of companies. When you bring more and more designers without establishing certain standards, you’re triggering design entropy.

Every product, unless properly managed, is becoming more chaotic over time. It’s design entropy.

Your product is becoming more inconsistent and chaotic over time, because every designer adds their own piece to the ecosystem. These inconsistencies confuse users and developers. Product development becomes more expensive and less effective. Maintenance cost rise, which slows down design and development.

Eventually, everyone needs a design system.

And Here We Are: Enter the Design System

Style guides and pattern libraries have been around for ages.

The promise was great, but they never fully realized the value of modular, consistent, predictable and scalable design. Both are stuck in the static world, far away from the tools that designers and developers use. Documentation still needs to be manually created as a PDF, Confluence page or simply a website.  Never fully actionable. Always out of date.

Style guides and pattern libraries might have pointed at the right problems, but they weren’t the right solution.

And then some insanely smart people (Nathan Curtis, Jina Bolton, Brad Frost, Dan Mall…) and very smart companies (Salesforce, Airbnb, IBM…) started to build complete design systems, merging design and development and treating them as a process, not the final outcome.

Instead of investing months of work into building a static collection of standards, a design system becomes part of the process of building software. Instead of aiming at solving everything, a design system gradually improves the consistency of the interface and efficiency of software development.

A design system is an evolutionary process, not a revolutionary process.

Design systems establish the ever growing and ever changing source of truth for the entire design and development teams. And this is the key to scale. Every new team member, instead of starting from scratch, can hit the road at full speed with an approved set of building blocks (colors, typography…), patterns, and rules to build consistent experiences fast. Everything connects back to code, so developers can reuse rather than recreate.

Design and development with Design Systems is the future. And we’re committed to bringing this future to you – today.

Introducing UXPin Systems

I’m extremely proud to announce UXPin Systems. The new UXPin product aimed at solving the problem of scaling design and development. The first complete and actionable design systems platform.

In the first release we’re delivering four experiences:

 

Build & Document Design System

Building a design system has never been easier. You can either start from scratch or use existing libraries in UXPin or Sketch to build the core.. Add documentation wherever needed and you’re good to go with the first release.


Share & Sync Design System

By generating design system documentation with UXPin, you’re automatically creating a sharable link that stays in sync with your libraries. You can share it with the team and it’s always up to date.


Use Design System in UXPin or Sketch

Everything in your design system is actionable. Every single color, style of text, icon or UI pattern saved in the system can be used across projects in UXPin and Sketch. You can update your Design System and sync it across accounts of all your fellow designers, giving you one source of truth.


Document Automatically

Every project created with elements from a design system is automatically documented with data from your design system. That means documentation is generated automatically.

The Ultimate Task: Bridging Design and Development

The first release of UXPin Systems  is the result of a year of research and months of work.

Over 4,500 people participated in the early access program providing an invaluable feedback (thank you!). We couldn’t be happier or prouder.

This is just the beginning. We’re committed to helping companies all over the world build better experiences faster. Prototyping is part of this story, but on its own is not enough.

It’s a new world of design and design tools. It’s the world of systems.

Seven years ago, we started UXPin with an attempt to bridge design and development with paper prototyping. Today, we’re sure that the ultimate bridge between these two worlds is a common system of design and code.

Design and code are like spoken and written words. They represent the same concept. And UXPin helps help form the entire language to scale that communication.

Sound interesting? Sign up for a free trial of UXPin Systems now.

The post The Future of Design Tools Isn’t Prototyping: Introducing Systems by UXPin appeared first on Studio by UXPin.

Popular Web Animation Techniques for Designers

Functional and delightful, animation is one of the staples of modern web design.

Details of interaction design is what makes a fundamental difference on modern websites. Animation can communicate status, guide the users attention, help the user see the results of their actions and even influence behavior.

Here are just a few examples to illustrate places where you can add some animations in your website to improve the experience. 

Progression

Loading Animation

One of the most common uses of animation for the web is to distract the user from loading times. Loading animation influences your users’ perception of time, making it seem less than it actually is.

You should always try to make the wait more pleasant if you can’t shorten the line. 

Loading animation are best when they are simple. Any extra effects such as sound aren’t necessary. Also good loading animation is engaging. When your users have something interesting or fun to watch while they wait, they focus less on loading time.

Even if the loading time is short, fun loading animations still add a little entertainment during waiting periods. Credits: Thomas Bogner

Progress Animation

Animation can show you your progression through a linear sequence. A classic “loading bar” is the most common example of such animation.

Progress bar for Aviasales. Image credits: Mark

But you can also consider using progress animation for multi-step linear process.

Animation can show you your progression through a linear sequence. Image credits: Joshua Sortino

Skeleton screens

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. Such action creates the sense that things are happening immediately as information is incrementally displayed on the screen. Almost any site can utilize a skeleton screen together with a subtle animation when loading it’s content to keep users engaged.

Skeleton screens complete the UI incrementally before the content is fully loaded. Image credit: tandemseven

Visual Feedback

Animated response to user’s action

Good interaction design provides feedback, which communicates the results of any interaction, making it visible and understandable. When a site visitor doesn’t know which items are interactive, or what interactions to expect, this lead to confusion. Combat this confusion by thoughtfully designing interactions to be clear and understandable.

Hover Animation for Desktop/ Elevation for Mobile

As a means to show an element is interactive, hover effects are one of the most common examples of visual feedback.

When a user is in doubt over a feature’s function, they tend to move the mouse over it. You should provide hover animations an intuitive appeal. Source: codepen

However, hover effects won’t work on mobile devices because there’s no mouse cursor. This means that your buttons and other interactive elements should have visual signifers that suggest that elements are interactive before user tap them and provide immediate feedback after the interaction. Such feedback indicates to a user that their actions have triggered a response, like button in example below that appear to depress when activated.

The shading indicates that element is possible to tap. Image credits: Vadim Gromov

Grab design ebooks created by best designers

All for free

Download Download Download DownloadDo you want to know more about UI Design?

Download 'Interaction Design & Complex Animations' FOR FREE!

Download e-book for freeClose
Attracting Attention

It’s well known fact that human eye is attracted to motion. This makes animation the perfect tool for drawing attention and reinforcing the actions a user is preforming.

For example, form entry can be greatly enhanced with some animation. If correct data has been entered, a simple ‘nod’ animation can be introduced upon completion. Whereas a horizontal shake can be used when denying the input. When users notice such animation they instantly understand the action.

The form is basically shaking its head at you. Image credit: Michaël Villar

Navigation

Relationship and transition

A recent trend is hidden navigation menus that reveal themselves upon clicking on buttons like the hamburger icon. Animation is essential in establishing a connection between the two states, and preventing a jarring transition. A well-designed transition enables the user to clearly understand where their attention should be focused.

Animation can be used to make transitions more obvious, so it’s clear what happened between where the user started and ended up. Credits: codyhouse

Below is an example of Brian Hoff Design website. When user clicks on the circular arrow button, an oversized menu box pops out from the right. The “pop out” animation makes the menu appear as if it slides in from offscreen and makes the whole interaction run smoothly.

Animation helped to connect the dots between two states

State Change Without Hard Cuts

Transitions are invaluable for indicating changes of state. In his article Smart Transitions In User Experience Design Adrian Zumbrunnen provides a great example on how animation can help user maintain context when they click on a link that lead to the different section on the same page.

Just compare this static instant change which feels like a hard cut:

Nothing feels more unnatural than a sudden change, such changes in an interface are hard for users to process. Image credit: smashingmagazine

With an animated behavior:

To animate is “to bring to life”. Image credit: smashingmagazine

Later example of the navigation uses subtle animations to help the user see where they are in the article in relationship to the other sections.

Creative Effects

Creative animation can make your user experience truly delightful and memorable. They bring entertainment value to the interface.

Storytelling Long Scrolling

Not too long ago, the rule of above the fold was indisputable. Designers focused most of their attention on making this area full of valuable information. Luckily, we now know that ‘above the fold’ rule isn’t absolute true. In fact, “66% of attention on a normal media page is spent below the fold.” The shift of focus from above the scroll to below makes scrolling an essential element of interaction design.

The storytelling potential of animations can add an emotional connection to an otherwise dull interface. Instead of the parallax animations which is very common, opt for something subtler. Consider breaking up your site into scrollable “chunks.” Within each chunk, you can introduce the content through animations. Animations in example below make the content “come alive” by animating simple art illustrations.

Image credits: Le Mugs

Tools and Tutorials

15 UI Animation Tutorials. A guide on web animation for beginners.
Web Animations. Advanced guide from W3 to synchronization and timing for animation in web pages and APIs.
CSS3 Animation Cheat Sheet. A useful collection of ready-made animations that lets you apply CSS classes to any element you wish.
Tools To Create Animation With. A list and analysis of 16 popular animation tools.

Conclusion

Design is more than just about visual presentation. Design is about interaction. Animation is critical to communication. We need to embrace the interactive nature of the web from the very beginning and think of it as natural part of design.

For more interaction design advice, download Interaction Design Best Practices Vol.1 for free. 

Article originally published on babich.bz. 

The post Popular Web Animation Techniques for Designers appeared first on Studio by UXPin.