designers-and-statisticians-disagree-on-what-makes-a-good-infographic

The field of data visualization has become a tussle between accuracy and beauty. In one corner, designers say that data is fungible as long as the presentation is eye-catching. In the other corner, statisticians argue that clarity should rarely be sacrificed in the name of novelty or entertainment.

The latest AIGA Design Census is a vivid illustration of this skirmish. Published by the oldest and largest professional design organization in the US, the report—based on an industry survey—contains some valuable insights about the country’s creative sector, but some argue that the findings are obscured by the report’s “very bad” data visualization.

Consider this chart from the report denoting the years of experience of 9,000 respondents.

Accurat

The rows of bright yellow bubbles may be more interesting to look at—they really pop against the salmon-colored background—but it makes it difficult for readers to make comparisons between shapes. A simple bar graph, like we made below, better conveys the information.

Quartz

In a table showing work satisfaction versus type of benefit received, respondents are represented via clusters of dots that vaguely resemble bacteria in a petri dish. These organic forms are pretty but, again, statisticians would argue that simple bar graph would have been the most efficient visual.

Accurat

“The emphasis is not on how to communicate data as clearly as possible but on a kind of visual cuteness,” observes Stephen Few, a data visualization expert and author of the book Show Me the Numbers: Designing Tables and Graphs to Enlighten, after reviewing the report. “Many charts in this publication that ought to be the same kind of graph are displayed in different ways for the sake of variety.”

Antony Unwin, professor of computational statistics and data analysis at the University of Augsburg says, “it’s very disappointing. I would expect something better from such an august body.” Asked how he might fix some of the more perplexing graphics, Unwin decries, “there’s nothing I can ask them because we’re on different planets.”

Accurat, the design firm that developed the graphs for the AIGA Design Census, says that its concern is winning the audience’s attention—even to the point of initially puzzling them. “I feel there’s a value in creating a dynamic presentation of data because capturing the attention of the audience is as important as communicating the data properly,” explains Gabriele Rossi, Accurat’s co-founder.

With offices in Milan and New York, Accurat takes the stylistic component of information design to point that one of its cofounder’s work has been featured in a fashion line.

Though Accurat also produces fairly straightforward graphics for clients such as IBM, Deloitte, and the Bill & Melinda Gates Foundation, Rossi characterizes the AIGA industry report as more of a marketing document aimed at designers. There’s an underlying assumption about this approach: it suggests that designers need to be entertained in order to be informed.

Two takes on data visualization

The fundamental disagreement between designers and statisticians isn’t rare, nor is it new. In 2012, Unwin and fellow statistician Andrew Gelman wrote a paper that defined the issue:

Outside of statistics, infographics is huge, but their purveyors and enthusiasts appear largely to be uninterested in statistical principles… We worry that designers of non-statistical data graphics are not so focused on conveying information and that the very beauty of many professionally-produced images may, paradoxically, stand in the way of better understanding of data in many situations.

Rossi of Accurat tells Quartz the difference in approach is a result of having different communication goals. If statisticians see data visualization as the pursuit of the clearest and most correct translation of numerical data into graphical form, designers understand that a chart can at times be a tool in a bigger marketing or branding scheme. It’s essentially the difference between a court transcription and an interpretative dance.

“We needed to get traction on social media,” explains Ross. “Will you really share 10 images on Instagram if they all look the same? If you do, it’s probably not going to be a very savvy social media strategy.”

Like other forms of graphic design, experimenting with fonts, shapes, and grids is a way of avoiding visual fatigue, Rossi says. “For theater posters for instance, of course black and Helvetica [font] on white background will always be readable but would you notice it on a subway? In the same way, would you notice a plain and proper bar chart with very grid lines in place, as academics recommend it?”

Not all untraditional charts are ineffective. One such example in the AIGA Design Census is a chart showing the distribution of time at respondents’ current job for different types of employment. Data viz researchers might scoff at the chart’s missing y-axis and would prescribe bars over curved shapes. Still, it is beautiful and clearly shows that self-employed workers tend to stay in their position longer than those who work for a company.

Accurat

Statisticians believe that data visualization is about communicating information efficiently. If done right, readers can quickly perceive patterns and relationships in graphical format that would be more difficult to explain through text. In reality, it’s often more complicated than that—especially in today’s attention economy. To keep a reader’s interest, visualizers not only have to think of conveying information succinctly, they have to conjure a way to make it visually appealing and exciting. Bar charts and line charts, though effective, are boring to some people.

Influential information designer Nigel Holmes grappled with this tension when he introduced a new approach to graphics for TIME magazine in the 1970s. Working under art director Walter Bernard, he created bar graphs on horseback, droopy charts on hospital beds, and many other goofy graphs that purists like Yale University information design pioneer Edward Tufte, might call “chartjunk.”

Mag Men / Columbia University Press

Over the top? Nigel Holmes’s graph for TIME Magazine, 1979.

In the new book Mag Men: Fifty Years of Making Magazines (Columbia University Press), Holmes describes toeing the line:

From time to time I overstepped the mark and illustration got in the way of the numbers. All I wanted to do was help people become interested in the subject of the articles. I spent a lot of time talking to the writers, who helpfully fed me metaphors that I could work into the charts. If I could get readers to smile, I was at least halfway to helping them understand.

After a few years, I felt that perhaps some of the charts had gone too far, so I calmed the illustration down a bit. That led to another round of critical mail: ‘So now we are back to boring charts again?’ A funny thing: after many years of changes in style, I still get requests for the lighter touch I’d used at Time (I’m happy to oblige). The point is the same as it always was—to engage readers.

Terrible charts in the wild

Accurat’s sometimes befuddling graphs for the AIGA Design Census are a minor event compared to the “bad charts” that have become a mainstay of business communication.

A classic example of an inefficient, but well-loved, graphic is the world cloud. A world cloud is a cluster of words associated with a key concept, with the most frequently used words rendered in a larger font size and displayed close to the center of the graphic. Data experts agree that this is a horrible way to convey frequency.

Salesforce

An example of a word cloud used on Salesforce’s blog.

Yet data visualizers are often asked to make word clouds to summarize a politician’s speech or a company’s report. Why do otherwise brilliant writers and editors want such an ineffective chart? Because they think it looks cool, and it’s different. And if a word cloud gets someone to read a report or article they wouldn’t have otherwise, can we really call it ineffective?

Another example is the pie chart. Reviled by serious data experts, a 1984 study outlined how people tend to underestimate the size of acute angles (90°).  But pie charts persist because people like circles more than rectangles.

Quartz

Bad pie.

There is a large body of scientific research literature on the most effective types of charts vis-a-vis the information. This research suggests that people are better able to compare differences in length than differences in area, and can more accurately assess the area of a square better than the area of a circle. Nearly every statistician would recommend a bar chart over a pie chart. But even experts who know this basic rule, like Accurat, will often ignore it—and it can be a good choice.

An interactive visualization of Barack Obama’s 2013 budget proposal in the New York Times, for instance, is informative and playful. There are aspects of this visualization that don’t follow the rules, particularly the use of circles rather than distance to convey differences in spending amounts.

These examples demonstrate the fundamental conflict in  data visualization: Finding a balance between ingenuity and comprehension; visual acrobatics and accuracy.

Sticking points

The irony that a design organization like AIGA would publish a report with methodologically “poor” data visualization isn’t lost on critics. After all, graphic designers are often tasked with creating graphics for reports, publications, and presentations.

Few, the author of Show Me the Numbers, argues that there’s something greater at stake when such lapses go unchecked. “This is a publication from an organization that ought to understand this stuff, right? You would expect them to be leaders in this field to some degree,” he says. “This kind of publication just gives designers permission to continue doing it poorly.” Few suggests that we might see an overall improvement in charts if graphic designers involved in making charts studied some basic statistics and statisticians, in turn, learned design principles for better-looking graphs.

Accurat’s Rossi, for his part, underscores the different pressures that plague professional designers compared with academics. He admits that his firm could’ve done a different job with AIGA’s graphs had they been given more resources. “It’s just that you also have to imagine that this is a non-profit project than we did in our spare time, with a fourth of the budget,” he says. Rossi also mentions that he had to work with creative parameters from Google Design, which co-sponsored the project with AIGA. “As professionals, we need to do in two days what an academic researcher might do in two years,” he says.

For Few, among the the most egregious aspects of the AIGA Design Census visualization strategy is that readers are compelled to figure out how to read every chart. Variety, in this case, becomes a stumbling block. “If you use various types of graphs to show exactly the same thing, you are forcing people to have to relearn how to read the graph every time they come to a new one,” Few points out. “There’s no reason to put people through that learning curve when they’re reading a report.”

But Rossi says this, in fact, is by design. “We stimulate curiosity by asking the reader to figure out how the chart works,” he says.

In many ways, the fundamental disagreement between statisticians and designers reflects a shift in thinking about what constitutes good design. There was a time when the universal goal was to create seamless flow. Designers were charged with eliminating all obstacles, anticipating the mindset of users along the way. In the popular design reader, The Design of Everyday Things, design guru Don Norman writes that “when the point of contact between the product and the people becomes a point of friction, then the industrial designer has failed.”

In recent years, user-experience experts have begun to change their tune. They realized that a seamless flow of information and tasks results in passive, unmindful customers. Accurat’s  intentionally imperfect chart-making underscores the importance of friction to invite participation, curiosity, and engagement—for better or worse.

this-is-the-one-skill-designers-need-to-develop-most-in-2020

By don norman6 minute Read

In his annual Design in Tech report in 2019, my good friend and design visionary John Maeda declared that “design is not that important.” He is wrong, but also correct. Let me explain.

In his assessment, Maeda is not damning design—he is damning the wrong kind of designer. For technology companies, the wrong kind of designer can be pernicious, but the right kind of design (and designer) is essential.

Let me start by rephrasing his declaration to cover every discipline inside a company—marketing, sales, technology, manufacturing, service, etc.—where any one discipline is “X.” What Maeda was saying was that “‘X’ is not that important.” He is correct. Every discipline is important to the company (or else they wouldn’t be there), but no single aspect of a company is the most important. The best products are made by a collaborative team.

Maeda’s descriptions of designers forcing their will upon the company is an example of designers who put themselves above all others. This is bad, he said (although not in those words). Of course, it is bad—but why should it only apply to designers?

Well, here is one reason: Designers often lack the skills of teamwork, or mutual discussion, and of compromise. Oh sure, designers work in teams and often compromise, but only when the team is made up of designers. But designers need to learn to compromise with programmers, engineers, sales, marketing, service, manufacturing, and of course, management. Many do not wish to do this. In this sense, they are similar to the other disciplines, but worse.

What is wrong with designers? Much of this disinclination to collaborate is rooted in their education—especially if they were trained in schools of art and design. Design is not art. The value systems are different. The skills required are different. A designer needs to understand the world, business models (margins, basic finance, and accounting), marketing, sales, manufacturing, and service. And of course, designing technology that people can use, understand, and take delight in. If the designer is developing a service or a business model, then the designer must consider all the myriad kinds of people, organizations, and frameworks that need to come together to produce smooth, cohesive, delightful results. No discipline, not design nor any of the ones that are “X,” can do this alone: They must form collaborative teams with the other disciplines.

The goals of the organization should be foremost in the mind of the employees, whether designer, engineer, marketing person, or executive. Each discipline usually focuses on one dimension of the complex mix of issues that are important for the company. What do the customers need? This is one of the questions for designers. What do customers want, and how much will they pay? These are questions for marketing. Will the product work properly, be reliable, and be delivered at a reasonable cost? These are important issues for engineers. Will the price be right and will the end result deliver value for everyone? This is something everyone must focus on. Will it be easy to understand and to use—especially when something goes wrong? Here is where good design can reduce service costs, to say nothing of customer frustration. And will the end result enhance people’s trust in the company?

I am pleased to say that I know many designers who do not fit Maeda’s categorization, including Maeda himself. But these designers are rare: They were able to escape their training and learn to think broadly. In many cases, they started off with degrees outside of design—something that we might require of all designers. Yes, many designers do play important roles in companies, but their life might have been easier had they been trained better. And many designers never escape from their lack of general, broad knowledge. That is why we must change design education. We are in the 21st century, and although the craft skills of many designers still produce wonderful results, the world needs much more than that. We need designers who can tackle major social issues. Designers whose creative thinking can move us forward. Designers who recognize that no single discipline can solve the major problems facing us; instead it will require that designers work with scientists, engineers, businesspeople, ethicists, planners, developers, and politicians.

We need to teach designers the importance of teamwork with the other disciplines. You can’t design a great product without a collaborative team of every discipline, where everyone is willing to make compromises if they will benefit the customers and the company’s profitability. I worked at Apple in the “between Jobs” era, and even though we had the best product in the world of computers, we were going bankrupt. I learned many lessons from that experience. For example, it doesn’t matter how good your product is if people won’t buy it. And you can say that about everything. Why was Apple failing? Ah, that’s a wonderful topic for late-night drinking parties. As for me, I have my answers, but the proper treatment would require a book, and although I do write books, I probably will not write this one. I prefer books that show optimism, that talk about what we need to do for the future. I do not dwell on the past.

So why do I say that Maeda is correct? He is correct when he talks about many of today’s designers. Why? Because of the way they are educated. To correct this deficiency, we have to change the way we educate designers.

Today, most design training focuses upon the design skills that produce wonderful craft. For some kinds of designers, this is necessary, but it is not sufficient. Design training seldom includes business principles, the role of evidence, ethics, and the havoc that our design creates all around the world.

We destroy the environment by mining rare materials we use to make our gadgets. We destroy the environment in manufacturing and shipping, and we destroy the environment in making products that only last a few years, with materials that cannot be readily separated and reused. The results are catastrophic for all of humankind. These are all important issues for designers, because it is the stuff that they design that leads to many of these problems. But we cannot put all the blame on designers: They are the soldiers, not the generals. Designers currently play a small role in this because they seldom are in a position to decide what products should be produced. But with better training, we might see more designers in the c-suites of companies, and chief design officers could bring these issues to light.

How do we change education in design? I’m working on this. For one thing, we have to separate designers from art schools and departments. And we have to ensure that designers have a broad education about history, ethics, and civilization. They need better education on science and technology. And they need to recognize the importance of system thinking. We cannot just concentrate on the small—we also have to think big.

This requires a major shift in design education: a new set of curricula, a new depth of understanding. But watch this space. I hope that in the next few years we will see movement in this direction, for although we need a revolution, there are many willing revolutionaries who can gather together to make powerful changes for the good. It will take time, because the proper revolution will change the curricula of design schools all over the world. But other disciplines have made this change: medicine, law, and business all are examples of disciplines that in the past century or so made major changes in their approach to education. They are all excellent models.

There is no single, simple answer to how we will make the change. In the three disciplines I listed above, it took diligent work by many people, followed by several decades before most educational institutions changed. Now it is design’s turn.

I hope to prove John Maeda wrong, and I hope one of the people who will help me do so is John Maeda.

vr-for-ui-designers:-how-to-make-skyboxes-tutorial

Du Hoang

In Virtual Reality, user interfaces do not exist in a void but within a 3D environment. When designing user interfaces for VR, UI designers have to stretch our skillset to include environment design, because now the UI is an extension of the environment or vice versa.

It can be a daunting task for traditional UX/UI designers to create a 3D scene because it involves completely different tools and domain knowledge than what we were trained for. But fear not UI designers, there are ways to make an environment for your Virtual Reality UI without the need for 3D models or fancy shader graphs. And that is by creating a 360 image, or skybox.

You might have seen 360 photos on Facebook or elsewhere. Viewing a 360 photo is like being transported to that location. And a 360 photo is, just like any other photo, a 2-dimensional image. If you know how to edit images (via Photoshop or other means), then you know how to create 360 photos/skyboxes.

Source: Flickr

You might also have noticed that 360 photos, a.k.a. equirectangular images, are severely distorted. And that both the front and the back of a scene are displayed side-by-side. How does it all work?

An equirectangular image is a type of projection of a 2D image onto a 3D sphere. Imagine printing out a map of the Earth, and then wrapping it around a globe.

In a 3D scene, an equirectagular image can be use as the background image, or skybox, that surrounds the scene. There are other types of skybox projections with their own pros and cons, but for this tutorial we will focus on creating an equirectangular image.

The simplest way to make an equirectangular image is to take a 360 photo with a camera. If you don’t own a 360 camera then most mobile phones can also do the job. Simply go to the location of your choice, snap a 360 photo, and you are done!

But what if you want to create a futuristic scene, or something else that doesn’t exist altogether?

Well, since equirectangular images are just 2D images, you can try to Photoshop/illustrate one, distortions and all. Here is a guide on how to do just that by a talented individual: Drawing a Spherical Panorama.

I personally do not recommend manually drawing equirectangular images. While it is a fun exercise, it takes an expert illustrator to do a convincing job, and no matter how great of an illustrator you are, you will never be able to reproduce the required distortions perfectly.

The easier way to go is to draw/Photoshop images that make up the six directions and put it into a 3D software, then take a 360 screenshot of that scene.

To create a skybox using images alone, you will need Photoshop or equivalent, and a 3D program. In our case we will use Unity.

For this example, I want to create a cartoony environment with clouds and stars against a bright sky. The ground will be a sphere with a cute tree growing out of it.

To start, we make square illustrations of the different objects in the scene with Photoshop, and save them as transparent PNGs.

2D illustrations of the objects in our 3D scene

Next, we create a new 3D project in Unity and import our PNGs. For each illustration we want to create a new Material, set the Shader type to be Unlit/Transparent and assign the PNG as texture.

In our scene, we’ll make a Quad (a square geometry). Go to Create > 3D Object > Quad, and assign the Material to it, by dragging and dropping the Material on top of the Quad. If done correctly, we should see the illustration displayed on the Quad with proper transparency.

Selecting the MainCamera, we need to reposition it at the point of origin (x: 0, y: 0, z: 0). Then we make more Quads of the various objects, place them around the MainCamera, facing it by rotating the Quad to be perpendicular to the camera, and compose our environment in that manner.

Once you have constructed an environment to your liking, you can take a 360 screenshot of it using this Unity plugin: Sky Capture or similar free assets. The result is a perfectly distorted equirectangular image that can be used as a backdrop for your VR applications and prototypes.

Resulting equirectangular image of our skybox

While our example is a cartoony skybox, you can also create photorealistic skyboxes using the same technique. The limit is your imagination!

kpi-is-an-imperative-tool-for-ux-designers

Some tools allow us to move pixels and some affect the bigger picture.

Uri Paz

In his recent lecture last year “The Tools We Use: Challenging Dogma in the Design Process,” Emmet Connolly, Director of Product Design at Intercom, broadened the definition of tools.

He introduced a pencil that, in addition to expanding our physical abilities, increases our intellectual capabilities.

To illustrate his point, he discussed solving a complicated math problem: the square root of 200 times 57. Although we wouldn’t be able to do it in our head, by using wood pulp, graphite and a piece of paper we probably understand the answer pretty quickly.

White pencil on white paper

White pencil on white paper

Photo by Yoann Siloine on Unsplash

To solve a problem or achieve a specific goal we need to use different kinds of tools — tools that help us in the building itself and tools that allow us to think and make decisions — KPI is one of them.

A Key Performance Indicator (KPI) is a measurable value that shows how effectively a company is achieving its key business objectives.

Success is based on the question “What is the goal?”

The goal is the outcome that we want to achieve.

The measure is based on the question “How many?”

By using the “How many” question we create a basis for comparison, i.e. whether or not the choices we made serve our goal.

1. A KPI is a tool to communicate

Common language within the team and between departments:

When we work with colleagues, we have to make sure that we measure success in a similar way. We want to avoid the situation when one team member says “what a failure” and another team member says “what a great success.” Everyone should agree or at least understand the KPI, when we are successful and when we’re not.

At the macro level, KPI alignment allows employees from different teams, such as UX, Development, Support, Marketing and Finance to speak in a common language and step towards the goal.

People are building a house

People are building a house

Photo by Randy Fath on Unsplash

Common language with management:

The best way to convey the importance of design to management is to start talking numbers as these allow us to compare results before and after.

The language of numbers is familiar to people who are planning projects or responsible for business operations. Using these metrics will make our communication more objective.

2. A KPI is a tool to spot problems

As a KPI can show us improvement, it can also indicate a failure. For example, what are the critical points in a particular funnel? Indeed, one of the UX designer’s role is to find and solve the right problems.

Lack of work with a KPI can create wrong assumptions that have a possibility to make our house of cards collapse.

UX Designers can find a source of inspiration, motivation and much more in KPIs.

3. A KPI is a tool to turn abstract into concrete

A strategy is abstract by definition, but measurable values give it a shape and allow our minds to grasp it more easily.

Each strategy has its relevant KPIs, for example: growth in revenue, a number of customers retained, saving of user’s time, decrease in calls to help desk, reduction of user errors, etc.

The right KPI creates prioritization that will bring more clarity and focus.

4. A KPI is a tool to connect the business goals and the user experience

“To understand products, it is not enough to understand design or technology: it is critical to understand business.” — Donald A. Norman

The success measure of a product produces a system of interactions between the business interest and the interest of the user experience.

Sometimes the business goal is linked with intuitive user behavior and sometimes with different behavior than the user expects it to be.

A good designer is measured by producing a good user experience that serves the business goal.

5. A KPI is a tool to make an impact

How can KPIs help us be influential?

  • It makes the impact of design decisions more objective and prevents doubt in its value.
  • By using it we can generate motivation — “we’re going to move that needle.”
  • It can help us to take a more proactive position to help organizations reach strategic goals.

Measuring success with measurable value doesn’t have to be just business.

During the past 6 months, I’ve been training to tone my body. The reason I enjoy the process and persist with the training program is that I see results and progress. Reaching my goal includes the following steps:

1. Defining Goal

The goal is the starting point for defining appropriate KPIs — but only if the goal is clear, specific, achievable, relevant and measurable.

Example: My goal is to tone my body, which means to reduce body fat and gain muscle mass.

2. Defining Indicators

For each goal, we have to define Indicators that will allow us to monitor and measure success.

Example: My indicators are: body weight, body fat, arm circumference and waist circumference.

3. Defining Targets

For each KPI, we have to set clear targets for successful performance.

Example: My target is that in four months my body weight will be 73kg, my body fat will be 13%, my arm circumference will be 35 cm and my waist circumference will be 82 cm.

4. Defining Data Collection Frequency

Some KPIs require data to be collected continuously, others specify hourly, daily, monthly, quarterly or annually.

Example: Each month I weigh myself and make changes in my training and nutrition program accordingly.

5. Defining Expiration/Revision Date

The KPI should include an expiration or revision date.

Example: In four months (10th of May 2020), I’ll update my targets.

6. Defining Way to Communicate the KPIs

We need to make our results obvious, therefore we have to think of a way to communicate our KPIs clearly.

Example: I made the following table:

Table that contain the following indicators: body weight, body fat, arm circumference and waist circumference.

Table that contain the following indicators: body weight, body fat, arm circumference and waist circumference.

There are ups and downs, but overall, tracking the numerical value gives me the motivation to practice hard and eat right to get to the next weighing in better condition.

“Dreams are for the dreamers. Goals are for achievers.” — Arnold Schwarzenegger

A pile of weights in the gym.

A pile of weights in the gym.

Photo by Jesper Aggergaard on Unsplash

“You don’t go to a restaurant and order a meal because you want to have a shit.” — Banksy

Indicators can show us just the fact that a person went to a restaurant and had a meal, but they can’t tell us about his experience. Through quantitative research, we compare numbers that can be measured but we cannot rely only on it because numbers can’t be used to answer everything.

For example, when we want to check a funnel — when the users execute a particular action in the sequence of actions we mark it as done ✔️ — which is considered a success. However, between 0 and 1, the metric can show success but it doesn’t necessarily indicate a good user experience.

Actually, KPIs don’t do anything to improve performance. They only tell us if we’re achieving our target.

To get specific information we have to talk with users — what is the user’s background, what they choose to say first, what they choose to emphasize or not, what is their work process…

Quantitative research gives us a basis, qualitative research gives us depth.

We need to combine quantitative and qualitative metrics to validate the data in the present and in addition, to predict the future.

“Tools help us do our work better.” — Steve Jobs

The dialogue of designers often includes talk about different kinds of tools. Some tools allow us to move pixels and some affect the bigger picture.

This tweet sharpens the question — how do we as a UX community think and talk about tools?

While Product Managers have realized a long time ago that good product management cannot come without an understanding of user experience tools, UX designers need to realize that without using tools like KPIs, it is difficult to produce a relevant user experience that serves business goals.

This is no longer just a theory, good design drives organizations to deliver better products and services. It’s been proven frequently.

As mediators between the users’ satisfaction and business goals, our toolbox should include tools like KPIs.

This tool is one of the keys for UX designers to move forward and change our reputation. By measuring success, blurred concepts become clearer, principles are reinforced and there is a distinction between desirable and undesirable.

A KPI is a tool for UX designers to communicate, research, understand, criticize and influence.

designers-need-to-get-paid.-let’s-ban-‘exposure’-once-and-for-all

If you’ve ever been asked to create something for free in exchange for “exposure,” you’re not alone. One 2016 survey found that freelancers spent 31 days over the course of two years doing unpaid work.

[Image: courtesy Jay Liu]

In response, Singapore-based art director, designer, and typographer Jay Liu has developed a project called “Exposure Currency,” which aims to critique the way artists are offered exposure instead of pay. (As we all know, getting tagged on a post doesn’t pay the bills). This series of paper notes exists as a playful imitation of real dollar bills, and employs a striking visual language in the form of neon lettering and in-your-face art direction to bring attention to how often designers and creatives are robbed by companies that think exposure takes the place of cold hard cash.

[Image: courtesy Jay Liu]

“A creative loses up to $6,620 every year through creating actual work for no pay. But what sort and amount of exposure did the creative earn? The returns are often unclear,” Liu writes. The designer collaborated with copywriter Boston Ho to generate the currency text; bold phrases like “The Note No One Asked For” and “We Don’t Trust” adorn the virtually worthless dollar bills, which, of course, is the point.

[Image: courtesy Jay Liu]

Exposure Currency is equal parts cautionary tale (for artists) and an attempt to hold businesses accountable. The back of each note reminds everyone of the virtue of proper compensation. “Its visuals are aptly art directed as a heist—on an entire industry,” explains Liu.

This project, a rightfully direct critique of unethical labor practices, is a creative approach to starting a conversation on how exposure is simply a form of counterfeit currency—and should be eliminated from circulation immediately.

designers-react-to-the-new-ps5-logo-(and-it’s-not-pretty)

(Image credit: Sony)

The new PlayStation 5 logo has been revealed, to much fanfare, at CES 2020. To say the moment was an anticlimax would be an understatement. In short, the new PS5 logo looks exactly like the old PS4 logo. Which, to be fair, looked an awful lot like the PS3 logo. See it in all its glory above.

Sony has been slowly releasing information about its next console over the past few months. It’s due to be released “Holiday 2020”. Sadly, this latest revelation wasn’t quite as exciting as we might have hoped – Sony has clearly decided the logo wasn’t broke, and no fixing was required (for more enduring brand marks, check out our guide to the best logos of all time). 

We quite like that the new logo gives the impression that it’s just the ‘2’ of the PS2 logo reversed and flipped (it’s not, incidentally, the PS2 logo was a whole lot more angular), but other than that there’s not really much to say.

PlayStation logos through the years

PlayStation logos through the years (Image credit: Sony)

If Sony execs thought this was a safe design choice that wouldn’t attract too much vitriol from the PlayStation community, they were sorely mistaken. The claws are out and the memes are rolling in fast. Read on for our pick of the most savage takedowns so far (you might also want to check out Twitter’s hilarious reaction to the Xbox Series X last month).

Many commenters are calling out Sony for being lazy…

Sony’s lead graphic designer coming up with the #PS5 logo#SonyCES pic.twitter.com/7xOJXBWHCFJanuary 7, 2020

You had one job Sony! #PS5 #PlayStation5 #SonyCES pic.twitter.com/jZVx4cZMQZJanuary 7, 2020

Don’t tell Sony but they accidentally emailed me the PS6 logo by mistake pic.twitter.com/gFHb4D6B4CJanuary 7, 2020

… but Mike Drucker’s tweet is probably a little closer to the truth.

The funniest part of the PS5 logo being identical to the PS4 logo is you *know* there were HOURS of meetings and discussions and notes and follow up calls and approvals for this design https://t.co/V9KLZCctbhJanuary 7, 2020

Or are there hidden messages that we’re missing? 

If you turn the PS5 logo upside down it spells SSD which means – and this is pure speculation – it will contain an SSD. pic.twitter.com/WfXL2lTbkpJanuary 7, 2020

Hmm. Find out everything we know so far on our sister site GamesRadar ‘s PS5 news and rumours roundup.

Read more:

top-12-best-ios-apps-for-designers

Top 12 Best iOS Apps for Designers

With the mobile evolution, every business has an application for the mobile platform. 

Over a million apps exist on both Android and iOS app stores, and many more are in development. 

New technologies are emerging every day, making mobile app development a worthy investment for companies to improve branding, content, and reach a broader consumer base. 

For that reason, designers are a hot commodity. 

Businesses aim to join the mobile app market to increase user engagement and earn a higher ROI.

Mobile apps, however, are not solely for the average user. 

Many applications are available in app stores for the designers to flex their creativity and design artistic pieces for their clients. 

Here’s a list of the top 12 best iOS apps for designers for you to simplify the development process and decrease the time taken.

1. Sketch’em

Sketchem App For Designers

The first of the best apps are not specifically for professional, experienced designers. 

Instead, Sketch’em caters to the amateurs looking to brush up their design skills

It is a free app for iOS and Android platforms, including video tutorials, to guide users on how it works.

The tutorials are categorised based on difficulty levels. 

It offers drawing lessons, free sketching, and a creator mode for you to express your creativity. 

Additionally, via the app, you can directly share your creations on social media like Facebook and Twitter and build your following.

2. AutoCAD 360

Autocad 360 Ios App For Designers

AutoCAD 360 is one of the favourite iOS apps for designers and architects to create unique pieces for their projects. 

It includes easy-to-use drawing and grafting features for viewing, creating, editing, and sharing AutoCAD drawings from anywhere in the world. 

Professional and experienced designers can use it to develop technical designs with its high-end functions. 

The one drawback of the app is that it is a little difficult to understand. 

It can be challenging and time-consuming to comprehend each of the features available. 

But the professional result of the designs makes it worth the trouble.

3. Sketchbook Pro

Sketchpad Pro Ios App

Another designer app on the list is SketchBook. 

It’s a paid app with exclusive features to create beautiful, unique designs. 

It’s like its desktop version; except on the mobile app, you can use pencils and brushes for your creations. 

Plus, you have the freedom to customise the 100 different types of brushes available as per your needs. 

Additionally, it also features markers, pens, and many more tools for designers to showcase their creativity. 

It offers a full-screen view with landscape or portrait orientation options. 

Designers can pen down ideas as they come to mind from anywhere in the world.

4. Adobe Illustrator Draw

Adobe Illustrator Draw App

The Adobe Illustrator Draw is an exceptional app from the renowned Adobe, Inc. 

It is a free application that allows designers to create vector illustrations, access high-res, royalty-free images, share layered and flat artwork, and sync assets to appear as you need them. 

The app features convenient, intuitive tools, built-in vector brushes, and drawing tools such as Adonit Jot Touch, Adobe Ink, Apple Pencil, and more.

You can design free-hand drawings with scalable strokes, add up to 10 layers within the sketch, and a photo layer to give it depth. 

5. Adobe Photoshop Mix

Adobe Photoshop Mix App

Another app from Adobe is the Adobe Photoshop Mix. 

Available for Android and iOS users, it allows designers to edit, crop, and combine photos. 

It is user-friendly with live-sync features that connect the mobile app with the desktop version. 

Meaning, you can customise your photos on the app and access them via the PC as well. 

The app is convenient for large projects. 

Designers can save time by combining images, editing them to blend layers, resizing, and more. 

Plus, the app offers various font styles and colour options to create unique, stunning typographical designs. 

If used to its full potential, users can have the best of Photoshop CC.

6. Behance

Behance Ios App For Designers

It’s not enough to create beautiful drawings; you need to share them to build a portfolio, get clients, and build your brand

Behance is one of the best iOS apps for designers to share their creations with others in the field and a platform for clients to find them.

The app has many of the same features as its desktop version, including separate profiles, collection folders, and the option to view stats on the designs. 

Plus, it gives you the chance to have your entire portfolio at your fingertips. 

From illustrations to screenshots, web design, and more, designers can share all types of projects. 

Additionally, as a designer, you can learn about the latest design trends, motion graphics, exchange ideas with other members of the community, and build your portfolio.

7. Coolors

App To Create Colour Schemes

The colour theme sets the foundation of your brand and the audience you want to target. 

Deciding the colour palette is an essential part of the design process if you wish the project to be a success. 

Coolors allows you to experiment with shades and set your theme as you want. 

It lets you take the hues of the real world and apply them to your artwork. 

You have the freedom to customise the palettes with over a million combinations. 

For the designers who use the COLOURlovers’ website, the app allows you to sync your palettes with your iPhone so you can access it wherever you are.

8. Assembly

Assembly Apps For Designers

If you want to create beautiful drawings without mastering the art, Assembly is the app for you. 

Aiming to replace the traditional paper sketchpad, it helps designers create simple sketches and vector images. 

It is a free app for iPhone users that has earned its place in the list of top iOS apps for designers with its extensive library of shapes and excellent user experience.

It features over a thousand basic shapes within the virtual library accessible to all users looking to design vector graphics. 

You can pick your preferred image, fit together multiple designs, and set them over a plain backdrop or a background image.

The app is incredibly easy-to-use for both amateurs and seasoned designers. 

While beginners can showcase their creativity, experts can use the Assembly to create professional, detailed, and intricate designs. 

9. Adobe Comp CC

Adobe Comp Cc Ios App

Adobe Comp CC is another app for the iOS platform that turns your rough sketches into sharp and crisp graphics; users can create diagrams via their smartphone or iPads. 

The app is ideal for designing layouts via natural gestures. 

The app offers tons of ground-breaking features, including access to Adobe Cloud account.

You can sync the app to the Adobe Creative Cloud and import images, vectors, and illustrations. 

Plus, you can add text to your graphics in fonts from Adobe Typekit. 

You can export your creations to other Adobe platforms, like Photoshop, Illustrator, InDesign, or Muse and finish the designs at home or in the office.

10. Canva 

Canva Ios App For Designers

The Canva app offers designers the freedom of creativity. 

It holds hundreds of beautiful built-in templates specific for each platform, including social media channels, invitations, banners, posters, and more. 

Designers can create custom works from scratch or use the pre-made layouts for faster designing of stunning graphics. 

It is incredibly user-friendly with easy-to-use navigations for amateur and expert designers. 

With a little understanding, you can create high-level professional images, shareable via the app on multiple platforms. 

11. Pantone Studio

Pantone Studio Iphone App

The Pantone Studio is your digital colour swatch book with over thousands of hues for you to mix and match to create your custom colour palette

It is a paid app for both iOS and Android platforms. 

Designers can match colour schemes from pictures, generate personalised palettes, and share them with their team or clients. 

Additionally, the app can be synced with other design software, making it accessible via different platforms.

Furthermore, myPantone is also a creation of the Pantone Studio and an exceptional application for designers who like to dabble with various colour combinations. 

It has access to Pantone colour libraries and allows export to external software like Adobe Creative Suite.

12. Bazaart

Bazaart Ios App Design

Bazaart offers advanced photoshop tools with the option to sync with Adobe Creative Cloud, making your artwork accessible from anywhere. 

The app comes with an extremely intuitive interface with layers and faster processing. 

You can import and export PSD files, work as you go, and with the sync feature, work with your laptop, smartphone, or desktop.

Via the app, you can save images with transparent background or combine them to make beautiful, unique collages. The app is available only for the iOS platform.

Wrapping Up!

Startups and enterprises want to hire a mobile app designer that can deliver unique and innovative layouts for their app idea and meet their tight deadlines. 

As a designer, you never know when inspiration will strike to live up to that expectation; thus, you need to have the means to save the idea whenever possible. 

Mobile apps for designers can help you in that respect. 

The above applications are available in the App Store. 

Each one is the best fit to create unique designs on the go. 

Expert or an amateur designer, mobile apps can help bring a professional look to your images. 

So, be sure to download one or all the apps mentioned and experience the results yourself!

the-designer’s-edge-?-an-overview-of-photoshop-plugins

Photoshop plugins are used by designers in multiple disciplines. They add functionality, increase efficiency, and enhance creativity. But there’s a problem. With so many options, it’s hard to know which plugins are worthwhile (even more so when they cost money).

To help, we’ve curated a collection of the finest Photoshop plugins available and summarized the strengths of each.

Problem 1: Cutting Layers and Shapes Is Time-Consuming

The Solution: Easy Cut

Easy Cut does what its name suggests—makes cutting Photoshop layers a breeze. With the click of a mouse, the plugin splits layers along guides, selections, and paths. In addition to pixel layers, Easy Cut works on shapes, smart objects, and text.

Even better, layer styles and shape attributes remain with the original layer and transfer to the newly created layer, and all cutting actions are controlled from an intuitive plugin panel.

Bonus: The creator of Easy Cut, Simon Henke, has an entire stable of Photoshop plugins that aid in tasks like grid creation, corner rounding, and layer organization.

Cost: USD $12

Photoshop plugins
Easy Cut allows designers to cut any type of Photoshop layer with guides, selections, and paths.

Problem 2: Digital Artwork Lacks the Warmth of Analog

The Solution: True Grit

True Grit Texture Supply isn’t a plugin but it might be the best collection of Photoshop brushes, actions, textures, and effects available to designers today.

Many digitally placed textures are obvious, and the effect feels cheap, but True Grit’s products are supremely crafted to look natural. Best of all, they’re backed by a no-nonsense return policy.

Cost: Varies by product

Best Photoshop plugins
True Grit houses an impressive collection of Photoshop brushes, textures, actions, and effects.

Problem 3: Guides Aren’t Precise or Reliable

The Solution: GuideGuide

When it comes to precision, Photoshop’s guide and ruler system leaves much to be desired. Thankfully, there’s GuideGuide, the plugin that guides guides. GuideGuide makes it easy to create custom grids, save guide presets, mark edges and midpoints, and add guides based on artboard and object dimensions.

Cost: USD $36 annually

Photoshop add-ons
GuideGuide greatly increases the precision of Photoshop’s guide and ruler system.

Problem 4: Enlarging Images Causes Pixelation

The Solution: Blow Up 3

Scale an image beyond its original size, and pixelation occurs—it’s one of the first lessons of Photoshop. Unfortunately, fuzzy pixels aren’t disappearing anytime soon. Not when our clients only have access to low-res graphics or we’re forced to crop photos because of strange objects (or people) lurking in the background.

Yes, there are techniques and tricks to obscure pixelation, but they’re not failproof. Blow Up 3 solves the pixelation problem with algorithms, but all that designers need to do is define a crop region, enter a few dimensions, and click a button.

Cost: USD $79

Photoshop extension
Blow Up 3 helps designers solve the decades-old pixelation problem.

Problem 5: Juggling Screen Design Projects Between Photoshop, Sketch, and InVision Is Tedious

The Solution: Craft

Well-known and widely used, Craft syncs Photoshop and Sketch files to InVision for design collaboration. More than that, it allows designers to make interactive prototypes, manage design systems, import high-end stock photography, and annotate design files.

Cost: Free

Best Adobe plugins
Craft syncs Sketch and Photoshop files with the InVision ecosystem.

Problem 6: Refining Pattern Repeats Requires Multiple Steps

The Solution: Rapport & Repeat

Creating patterns shouldn’t be hard, but it often is. Rapport & Repeat generates seamless pattern repeats in three simple steps:

  1. Arrange pattern elements as desired.
  2. Select all elements to be included in the pattern.
  3. Test what the pattern looks like using the Rapport & Repeat panel.

Adjusting patterns is as effortless as dragging elements around the artboard and retesting. Once a final design is achieved, pattern repeats are easily formatted, sized, and saved via the plugin.

Cost: USD $100

Best Photoshop plugins 2019
Rapport & Repeat was created by the talented pattern designer Mila Petry.

Problem 7: Color Is the Most Difficult Design Element to Manage

The Solution: Color Tools Bundle

Digital artist Rico Holmes crafted a collection of plugins that dramatically improves color selection in Photoshop. All four of his color plugins are sublime but the crown jewel is the Chameleon Adaptive Palette, a plugin worth the price of the entire Color Tools Bundle.

The Chameleon Adaptive Palette automatically generates a variety of color schemes and functions based on a document’s selected color. Dynamic updating of palettes can be locked so that desired colors aren’t lost, and the plugin panel can be scaled to any size (a thoughtful space-saving feature).

Cost: USD $24

Best Photoshop plugins for graphic design
Color Tools Bundle is a collection of four highly useful color controls created by digital artist Rico Holmes.

Problem 8: Photoshop Isn’t the Only Program That Designers Use

The Solution: Avocode

There are more digital design tools than ever, and the number continues to climb. The Avocode plugin allows Photoshop designers to join forces with digital product pros who prefer to use different programs. Avocode is a cloud-based tool where designers and developers can open an array of design file-types for inspection, asset sharing, visual feedback, code generation, and hand-off.

Cost: Starting at USD $17 per month

Best plugins for Photoshop
Avocode is a cloud-based tool where designers and developers can collaborate.

Problem 9: It’s Challenging to Create Realistic Cast Shadows

The Solution: Shadow

Drop shadows in Photoshop are easy. Cast shadows? Not so much. Shadow is a plugin that makes cast shadows as simple as drop shadows. Angle, scale, blur, opacity, color, and sun position are all editable in the plugin panel, and the parameters of shadows are linked and saved to their assigned objects.

Cost: USD $15

Cool Photoshop plugins
Shadow enables Photoshop users to create cast shadows like they would drop shadows.

Problem 10: Aligning and Distributing Layers Is Easier in Adobe Illustrator

The Solution: Align and Distribute

Compared to Adobe Illustrator, aligning and distributing objects in Photoshop always feels a bit awkward. Thankfully, Toshiyuki Takahashi created a plugin called Align and Distribute. A man of few words, Takahashi’s plugin description perfectly underscores its value, “It works like the Align Panel in Illustrator.”

Bonus: Takahashi also made a PathFinder plugin for Photoshop.

Cost: Free

Must-have Photoshop plugins
Align and Distribute brings Adobe Illustrator’s Align Panel to Photoshop.

Problem 11: Making Design Mockups from Scratch Is Labor Intensive

The Solution: EasyMockups

Mobile design mockups are a big motivator for potential design clients. Why? Because they position design work within real-world settings and help clients envision what their own product might become. Convincing mockups require time and skill—unless there’s a shortcut.

EasyMockups is a plugin that equips designers with 10 contextual mockups that can be used to showcase work. Backgrounds and devices are interchangeable, and designs are added to mockups via top-level folders.

Cost: Free

Plugins for Photoshop
EasyMockups helps designers create compelling mobile mockups in minutes.

Problem 12: Photoshop Wasn’t Designed to Be a Vector Editor

The Solution: SVG Layers

When an SVG is imported into Photoshop, it’s rasterized. This flattens the graphic, rendering its vector editing properties useless. SVG Layers is a plugin that amends this pain point by allowing users to open SVGs as vectors, edit SVGs as vectors, and save SVGs as vectors—all within Photoshop.

Cost: USD $19

The best Photoshop plugins
SVG Layers extends Photoshop’s vector editing abilities.

Problem 13: Retouching and Enhancing Photos Is Monotonous

The Solution: Luminar 4

A Photoshop plugin for editing photos? Imagine that. Luminar 4 is a powerful photo enhancer that both experts and beginners will find useful. In addition to its 70 preloaded filters, Luminar 4 leverages artificial intelligence to erase unwanted objects, reduce noise, and create realistic lighting effects within photos.

Cost: USD $89

Top Photoshop plugin
Luminar 4 is a comprehensive photo editing tool built for experts and beginners alike.

Problem 14: Professional Font Design Programs Are Too Expensive for Casual Use

The Solution: Fontself Maker

In the world of visual design, most designers work with text on a regular basis. As typography skills grow, a question emerges, “Could I make my own font?”

The answer is a resounding yes, and it’s relatively simple, just not with professional font design programs. There’s nothing wrong with pro font programs, but they’re overkill for the average bespoke font.

Fontself Maker allows designers to use their own, custom-made glyphs to create and export OpenType font files. Spacing and kerning are easily defined, and alternative glyphs and ligatures may be added.

Cost: USD $79 (Bundled with Adobe Illustrator version)

Photoshop plugins
Fontself Maker is an easy way for visual designers to step into the world of typeface design.

Problem 15: Animating in Photoshop Is Unintuitive

The Solution: Animator’s Toolbar Pro

Photoshop possesses an extensive set of 2D animation abilities. Unfortunately, they’re hidden within a poorly designed user interface. As a result, most animators leverage Photoshop’s brushes and effects to create scenes and characters before moving outside of the program to animate.

For artists and designers interested in making frame-by-frame animations within Photoshop, the Animator’s Toolbar Pro plugin significantly improves the user experience. How? By making the animation interface more intuitive and highlighting capabilities that are virtually invisible without the plugin.

Bonus: The Animator’s Toolbar Pro Cheatsheet

Cost: USD $20

Best Photoshop plugins
Animator’s Toolbar Pro makes frame-by-frame animation in Photoshop much more intuitive.

Nominate the Best Photoshop Plugins

There are more than 1,100 Photoshop plugins available at Adobe Exchange. It’s an excellent resource, but nothing beats a firsthand recommendation. Pay it forward and help fellow designers by sharing noteworthy Photoshop plugins, actions, and extensions in the comments.

• • •

Further reading on the Toptal Design Blog:

why-designers-need-to-look-beyond-2-genders

Something I’ve been ruminating on for a long time is our lack of gender options when users register for products and services. I’m not the first one to notice this, but it’s still happening, and it’s more prevalent than we realize. While I personally identify as a cisgender female, I still care about this issue because it affects many good people, including the ones I care about.

Max Masure wrote a great article on why cisgender people should be normalizing pronoun usage that I would recommend for other cisgender people to help educate themselves. In this article, they mention how cisgender people can normalize gender diversity by including pronouns in their email, LinkedIn, website, etc. I think designers can take it a step further by adding more gender inclusion to the products we work on. Gender inclusion in our products is a small action that can have considerable impact. As designers, we advocate for the people we are serving, and so many of us say we are empathetic. Shouldn’t a cisgender designer’s empathy also extend to gender identity?

Illustration with character filling out profile and selecting “non-binary” as gender option

How to design beyond binary

The most common places that users identify their gender is in an onboarding experience or their user profile. In many cases, this is the first impression that someone gets from your product. It’s essential that it’s minimal and, yes, inclusive. Users can, and will, leave an onboarding experience if they determine they don’t like it or aren’t comfortable with the questions asked.

Similarly, people will delete their accounts with products if those products can’t meet their needs. Gender inclusivity is especially relevant for companies that specialize in social media, health, finance, insurance, etc. Anywhere where gender data is gathered by an organization, you have an opportunity to do better. So let’s talk about how to be gender inclusive in your design processes.

Don’t ask for gender unless you need to

In any onboarding experience or any experience in which you request information from people, you should be asking yourself, “Is this question necessary?” We’ve all experienced the horrors of filling out lengthy forms. Forms are often considered an annoying experience, so much so that autofill is a thing. The same logic applies to asking for gender information. Honestly, while researching apps I have on my phone, I found a lot of them keep my gender information. In many instances, it makes sense. Each experience is different, and I know that gender plays a big part in marketing campaigns, but if you don’t really need gender information, try not to ask.

Screenshot from Pandora music application with module that says “Why does Pandora need my gender?”
Sources: Apptimize, Pandora

If your gender field is necessary, let people understand why

One emerging trend in onboarding experiences is explanatory text associated with form fields. Offering information to users in this way cultivates a trusting relationship from the moment a user begins interacting with your product. Spoiler alert: gaining a user’s trust is invaluable. It can make all of the difference in transforming casual users to evangelical.

Infographic showing the sliding scales of how we individually feel about our gender and sexual identities
Source: The Trevor Project

Provide more gender options and let people change their gender at any time

Gender and sexuality in humans is fluid. You can Google “how many genders are there” and get a myriad of answers. There is so much more to gender and sexuality than a simple form can contain, so this is why I recommend allowing for multiple gender options, or even a custom gender selection. Facebook is one product that currently allows users to do both. They also allow people to change their gender at any time in their profile settings. These features are Facebook’s way of embracing a world that is not binary, allowing people to change and transition as they discover their gender identity. These are especially valuable when presented in the context of social media so that people can be socially seen in the same way they identify.

Facebook’s gender selection screenshot
Source: Facebook
Facebook’s pronoun selection screenshot
Source: Facebook

Let people pick their pronouns

In the same breath, allowing people to select their pronouns is also essential. It helps to clarify how someone identifies with their family and friends, or in something as simple as an email. This customization can make all of the difference to people who deal with gender dysphoria. Facebook also allows people to select their pronouns and will change the content that users interact with based on that selection. This small change can mean a significantly more positive experience for many of your users.

People marching down street, one wearing transgender flag as a cape
Photo by Delia Giandeini on Unsplash

Cultivate content that isn’t binary

How many stock images are we going to have to look at with white/rich/straight/thin/cis people in this lifetime? How many articles do we have to read that speaks to all people in the same way? Representation matters, so let’s try to represent everyone. As someone who has had to find stock images for the past ten years of my life, I know that options can be limited and that better options tend to cost more. I know that data related to transgender individuals aren’t as common as we would like. Try your best, and advocate for better representation in the products you are working on. Culture shifts take time.

The business advantage

Inclusive design always has a moral value. But if you’re someone who cares about inclusivity and wants to build inclusive work, you’re going to have to get good at answering “what’s the business value?”

You might be thinking, “why can’t we do what is right simply because it is right?” As someone who has been dealing with this question since the day I stepped into my career, I want to tell you honestly that I have felt that way too. But making a business case for the work you do is key to becoming a leader, to making change happen. The good news is that making a business case for something you are passionate about is an excellent way to learn how to win over stakeholders. For me, going to bat for the issues that mean the most to me is an easy thing because I will give it my all, and in most cases, I can win them over. Systemic change is about every little thing we can do better, it can be hard, but it’s worth it.

On the other hand, if you’re someone who is reading this article asking why you should bother with building work that isn’t gender binary, you’ve come this far, and I respect that! I’ll do my best to answer this question.

Don’t leave money on the table

Can your business afford not to serve:

You might also say that transgender stigma can make users run away from your product. In some cases, this could be true, and it could be more problematic if your business is serving conservative clients. But we should never forget that our world is ever-changing. Millennials and Gen Z are coming into ages in which they have buying and voting power. If your product, especially an aging product, does not build support among younger generations, it is at a much higher risk of eroding. Additionally, products like Facebook have included gender diversity in their designs, and I do not see conservatives out there trying to ban it. Maybe they simply haven’t noticed it? Regardless, I suspect that gender-inclusive design will do more good than harm, especially in the long run.

Screenshot from Ellevest’s onboarding experience
Source: Ellevest

Competitive advantage

If you’re in a newer organization or serving younger audiences, inclusive design can be one of the most advantageous moves you can make. Let’s take the example of Ellevest’s onboarding experience. In this, users can select from the options of male, female, and non-binary. For a business that is disrupting the financial industry, Ellevest is using gender inclusion to their advantage. Financial industries notoriously suffer from outdated and hyper rigid values. Ellevest has sought to go against those old financial industry practices and mirrors their values in the design. Doing this helps Ellevest stand apart even further from the industry it seeks to disrupt. This design also captures a new, younger, and specialized set of audiences, which is invaluable to startups.

Better audience segmentation

Audience segmentation is essential and the better we can do it, the more likely we are to gain sales and leads. Imagine what it would be like if we were able to serve a completely “new” subset of users from male and female and specialize in their needs. I can guarantee that people who are transgender aren’t going to have the same health needs or financial needs as a cisgender individual. As the number of people who identify as transgender increases, I anticipate we will need to segment their audience needs better.

Getting ahead of the big data curve

One of the issues we currently are facing in all products is a lack of data representing people who are transgender. As I mentioned, I anticipate that this will change quite quickly in the coming years and is already changing now. Getting ahead of this trend could be a massive win for any organization. There are businesses out there already doing this, but the time to invest in this segment of big data is now.

Attract Diverse Candidates

Businesses should know diverse teams with inclusive cultures are more profitable. Attracting diverse candidates requires many considerations, but one way to attract these candidates to your team is by being mindful of inclusivity in your products.

In a report conducted in 2017 by McKinsey & Company, 1,000 companies were analyzed on their diversity and correlation between diversity and profitability. This study also measured longer-term value creation from diversity initiatives. Here are a few things they found:

  • Companies with a diverse workforce are 35 percent more likely to outperform those without diversity initiatives.
  • Companies in the top 1/4 for gender diversity are 21 percent more likely to have a better financial return.

Message to transgender readers

As I mentioned earlier, I am a cis female. Your experience is not my experience, and in writing this, I only seek to be an ally and advocate. However, please leave a comment if I have missed the mark or if you feel I have not represented the needs of someone who is transgender. I’ll read over your responses and work on editing this piece to be better, and you will have my thanks! You are also welcome to message me privately if you are not comfortable commenting, feel free to email me.

This article was originally published on uxdesign.cc

Read next:

ING bank wants to give clients a compliant way to store cryptocurrency, report

15-tools-web-designers-should-try-in-2020

Last updated: December 10, 2019

Tools web designers and web design agencies should try in 2020

Note: Make sure to bookmark this post, because we will continue to update it weekly with new tools we test.

Designing for the world wide web is easier than ever. Every day, there is a new tool that is “the last web design tool you’ll ever need”. Most of the time, its a load of shit.

When I first started, I spent hours looking for the easiest way to design a website (using Photoshop) and turn it into a website. Eventually, I learned enough about WordPress to buy and install themes and boom, I was a “web designer”.

It didn’t take long for me to realize that I was going to have to step my game up if I wanted to start making the big bucks. So, I decided to learn to write code. While I still try and keep up-to-date with new development tools and coding languages/frameworks, design is still my forte.

With all of the software testing I do, there is still tons of features (or software as a whole) I am hoping to see in the future:

  • Version control for designers – this should come standard with all design tools.
  • Better code export functionality – a few tools are getting close but most seem to focus more on apps than websites
  • Easier client feedback – again, a lot of tools do offer this, but most still seem to need some work

We have a select group of tools we use for all of our web design projects, but we still love testing the new ones that come to the market.

A breakdown of some of our web design software categories:

  • Best wireframing tools
  • Best prototyping tools
  • Best web design feedback and collaboration tools
  • Best handoff tools
  • Best project planning task management for web designers

The best wireframing, project planning, and user-flow software for web designers in 2020

#1 Flowmapp – Best for creating sitemaps and user-flow graphs

best web design tools of 2020

Flowmapp is one of our favorite tools because of its simplicity. With Flowmapp, you can easily map out your website’s sitemap. In our process, we will create our sitemap in Flowmapp and share it with our clients so they can visually see their list of pages and how they will be grouped. It also gives them a good idea as to how we intend to group pages within the website’s navigation.

To make it even cooler, Flowmapp also has a User Flow tool that allows you to create an anticipated user-journey to create a conversion strategy.

Software overview:

  • Platforms: Currently browser only
  • Best for: Web design plans, sitemaps, and user flow graphs
  • Integrations: Slack
  • Price: $15/mo – $199/mo
  • Free trial: Yes, 14-days

#2 Eagle – Best for mood boards and design inspiration

best web design tools of 2020 - Eagle

Of all the tools I use, Eagle is probably the one I use most frequently. Eagle is one of the coolest tools I have ever come across and one I use for not only web design projects but also for our graphic design and branding services. Eagle is a visual library to organize and view your fields. For Mac users, it is a better version of your Finder.

I have Eagle synced to my Google Drive account and use it to view all of my saved designs, PSD mockups, and a million other reasons. The best part about Eagle is the never-ending file format list it supports. You can save and view PSDs, PDFs, JPGs, PNGs, Videos, Gifs, Word Docs, Powerpoints, and about twenty other formats.

It is the perfect way to create a moodboard or collect inspiration for web design projects.

Software overview:

  • Platforms: macOS and Windows
  • Best for: Web design planning, moodboards, viewing design files
  • Integrations: Dropbox, Google Drive, and several other cloud tools
  • Price: $29 (lifetime cost)
  • Free trial: Yes, 30-days

#3 Whimiscal – Best for project planning, wireframing, and flowcharts

best web design tools of 2020 - Whimsical

Whimisical is the perfect tool for web designers who want to visually plan their entire process. Whimsical has four main features: flowcharts, wireframes, sticky notes, and mind maps. Each tool/feature gives web designers a simple interface with complex functionality. The sticky notes feature is one of our favorite. It allows you to easily create notes or tasks for your project and arrange them however you’d like.

Whimsical also makes it extremely easy to share your board(s) with clients. You have the option to create a share link or export the entire board as an image.

Software overview:

  • Platforms: Browser only
  • Best for: Web design planning, flowcharts, wireframes
  • Integrations: None at the moment
  • Price: $0 – $12/mo
  • Free trial: Free membership option (4 boards free)

The best UX design and prototyping software for web designers in 2020

#4 Adobe XD – Best for prototyping and designing

Best web design prototyping software 2020

Adobe XD is our go-to software when it comes to designing websites. Before XD, I slaved away creating UX mockups in Photoshop and boy was my tiny little mind blown away to the first time I used XD. XD’s simplicity is why we love it here at DELT. Its interface is so clean and simple you can pop out 10 different designs in less than twenty minutes. They may look like shit, but the possibility is still there.

Like many Adobe products, its lack of updates and new features, in the beginning, had me a bit worried, but it looks like XD is now in it for the long haul. While we haven’t fully adapted XD’s prototyping functionality, we religiously use its other features like creating design assets and sharing our work with clients. One of XD’s most promising new features is its plugin marketplace. It appears to have new plugins added almost daily and it is finally built a steady integration platform so it will only continue to get better.

Software overview:

  • Platforms: macOS and Windows
  • Best for: Web and UX design, client collaboration, web design prototyping
  • Integrations: Creative Cloud and rapidly growing plugin marketplace
  • Price: $9.99/mo for XD only, $52.99/mo for all Creative Cloud apps
  • Free trial: Yes

#5 Sketch – Best for prototyping and web design

Best website design tools for 2020 - sketch

Sketch has been one of the most popular web design tools for Mac users for quite some time now. Sketch is very similar to XD, and had I not been a Windows user for the first couple of years I started learning web design, we would almost certainly be using Sketch for our web design services. Back when XD lacked the growth I like to see in design software, I tried converting to Sketch a few times. And while it definitely offers a clean and simple interface, I just found it lacked the ease of use that XD had.

With that said, Sketch is a great tool for web designers. It has a lot of features XD does not have, and its integrations and extensions currently have the upper-hand on XD in my mind.

Software overview:

  • Platforms: macOS
  • Best for: Web and UX design, web design prototyping
  • Integrations: Huge marketplace with tons of extensions
  • Price: $99 (for one year of updates)
  • Free trial: Yes, 30-days

#6 Framer/Framer X – Best for web designs, prototyping, and developer handoffs

Framer - best software for web designers in 2020

Framer was one of the first tools with an emphasis on creating interactive/animated web designs and prototypes. Framer’s newest flagship software, Framer X, is a beautifully designed tool that makes designing high-fidelity UX prototypes a breeze. Framer X is also one of the first – if not the first – web design tool to offer an in-app marketplace.

One of the features that makes Framer truly stand out is its developer-handoff option. Their developer tool allows you to create advanced animations and export the layouts and animations to React.

Software overview:

  • Platforms: macOS
  • Best for: Web and UX design, web design prototyping, code export
  • Integrations: Framer X store allows tons of in-app integrations
  • Price: $15/mo – $99/mo
  • Free trial: Yes

#7 InVision & InVision Studio – Wireframing, design feedback, and prototyping

Best tools for web design agencies

InVision has been a leader in the design industry for as long as I can remember. They have grown from a simple design sharing/feedback tool to a one-stop-shop for designers and agencies. InVision has a handful of design tools: Freehand (create wireframes and plans by hand), Boards (a tool for creating moodboards or showcasing designs for feedback – also great for graphic and logo designs), Prototyping (mobile and web design feedback and basic click actions), and Studio (along with several others).

Studio is InVision’s latest tool and, like Framer X, it was created as a solution for people who wanted to be able to easily create designs, animate those designs, and export the designs and animations to code. Studio has seen exponential growth since its first launch and InVision has turned into a very forward-thinking, consumer-driven company, so we are very excited to see how far they take all of their products.

Software overview:

  • Platforms: macOS, Windows, and Browser
  • Best for: Web and UX design, web design prototyping, code export
  • Integrations: Atlassian, Sketch, Adobe, Slack, More, and a growing App Library for Studio
  • Price: $0 – $99/mo (Studio is Free)
  • Free trial: Yes

#8 Protopie – Best for creating interactive web design prototypes

best tools for web design agencies - protopie

Our final web design prototyping tool on this list is ProtoPie. Like the other software mentioned, ProtoPie, allows you to create high-fidelity interactive prototypes for mobile and desktop web designs and apps. Of all the tools, ProtoPie probably offers the most features in terms of animation customization.

Another area ProtoPie stands out is its ability to be integrated into web design teams. With ProtoPie, design teams can easily collaborate on projects, provide feedback and comments, and it even offers a version control function.

Software overview:

  • Platforms: macOS and Windows
  • Best for: Creating interactive web, mobile, and app designs
  • Integrations: Adobe XD, Sketch, and Figma
  • Price: $13/mo – $50/mo
  • Free trial: Yes

#9 ProjectHuddle – Best tool for design and live website feedback

Best web designers software - ProjectHuddle

Another tool I spent countless hours searching for was one that offered easy client feedback. Our team had found reliable options in some other tools, but none that really allowed us to quickly share web designs and collect feedback – until we started using ProjectHuddle.

ProjectHuddle is a WordPress Plugin, but you can use it with any website framework (HTML, Drupal, PHP, etc.). You simply install the Plugin on any WordPress site, and you can then upload logo designs, web designs, or any other designs, and then send a custom link to your clients to make comments and provide feedback.

Along with static designs, you can also paste the link to any live website. All you have to do is paste some Javascript in the code of that site and bam: your clients can now make hotspots/annotations once they login to the dashboard.

Our favorite thing about ProjectHuddle is we have control over everything. We can edit the PHP to change or add functionality or change the CSS to match our brand. The fact that we use WordPress to develop most of our websites definitely is a plus as well.

Software overview:

  • Platforms: Browser/WordPress
  • Best for: Collecting feedback on live websites and static designs
  • Integrations: Zapier
  • Price: $109/year – $139/year
  • Free trial: No

The best tools for web design feedback and collaboration

#10 MarkUp – Best for collecting feedback and collaborating on live websites

Best design feedback software 2020

MarkUp is a simple and modern way to collect feedback from clients and designers on your live website. MarkUp eliminates the need to send countless emails, create endless spreadsheets, or set up meetings every time your client or design team has edits they want to be made to your website.

Our favorite things about MarkUp is how clean the user interface is and how simple it is to set up. If you visit MarkUp’s website, you can paste in a URL and test their software in realtime.

Software overview:

  • Platforms: Browser only
  • Best for: Collecting feedback and collaborating on live websites
  • Integrations: None currently
  • Price: Currently free
  • Free trial: Yes

#11 Pastel – Best for getting feedback on live websites and static designs

website design comment feedback software

Pastel is another feedback tool that is perfect for both design teams and individual designers. Pastel offers a beautiful user interface and works perfectly on both static designs and live websites. No matter what framework your website is developed on, Pastel can easily be integrated to gather feedback from stakeholders or collaborate with other people on your design team.

Unlike the other design feedback tools on this list, Pastel offers a strong arsenal of integrations. You can create support tickets from comments and export them to task management tools like Asana, Jira, or Trello.

Software overview:

  • Platforms: Browser only
  • Best for: Collecting feedback on live websites and static designs
  • Integrations: Trello, Asana, Jira
  • Price: $0 – $249
  • Free trial: Yes, 14-days

#12 Toybox – Best software for design collaboration and managing tasks

Software for web design agencies

Toybox does more than just provide web design teams with a solution to collect feedback. Toybox is focused on taking the hassle out of bug reporting during your web design reviews. Inside of Toybox are three main features: Annotate (comment and feedback tool for websites), Inspect (hover over an element and make CSS edits/comments), and their newest tool, Roller.

Roller is a feature that is still in its early stages, but we are super excited to see where it goes. Currently, it integrates with Figma, but they also plan releases for Sketch and XD. Toybox’s Roller allows you to find and fix inconsistencies in your designs to ensure accuracy across your designs and prototypes.

Software overview:

  • Platforms: Browser only
  • Best for: Collecting feedback on live websites and static designs
  • Integrations: Trello, Slack, Asana, Figma, more
  • Price: $25/mo – $149/mo
  • Free trial: Yes, 30-days

The best developer handoff and project planning software for web designers

#13 Avocode – Best tool for turning static designs into code

The best design to code tool for web designers and developers

Avocode is the OG of design-to-development software. Avocode was originally a tool that gave developers the ability to take a PSD and extract code/inspect its elements to easily gather CSS. Now, it is harder to find a tool that doesn’t integrate with Avocode.

Along with its developer hand-off features, Avocode also allows you to collaborate on designs, organize and manage design files, and even create click-through functionality for your prototypes. Avocode is currently compatible with Photoshop, Sketch, Illustrator, Figma, and XD.

Software overview:

  • Platforms: Windows, macOS, Linux, Web/Browser
  • Best for: Turning design assets into code/developer hand-off
  • Integrations: Adobe products, Sketch, Figma, Slack more
  • Price: $19/mo – $100/mo
  • Free trial: Yes, 14-days

#14 LogicalPlan – Best software for web design project planning

Best web task management software

LogicalPlan is the software on this life we are the most excited to see grow. In short, LogicalPlan is a project and task management solution with awesome functionality for creative planning. Software is the most useful when it can eliminate as many tools as possible. LogicalPlan has the potential to do just that.

Its task lists are very well designed, and there is also a portion of the page dedicated to a separate, more visual depiction of your tasks. You can create a mindmap, a timeline, or even another task list.

Software overview:

  • Platforms: Browser, i0s, Android
  • Best for: Creating and managing web design plans and tasks
  • Integrations: iPhone and Android phones
  • Price: $0 – $9/mo
  • Free trial: Yes, free version

#15 Abstract – Best version control software for designers

best version control software for web designers

As we previously mentioned, making version control a more viable option for designers is something we want software developers to put more of a focus on. Abstract does just that.  Abstract is the first tool (that we are aware of) built specifically to provide version control for static designs. Currently, Abstract can only be used with Sketch but there is a beta version of an Adobe XD plugin.

In addition to version control, Abstract also offers design collaboration and developer handoff functionalities.

Software overview:

  • Platforms: macOS
  • Best for: Designers using Sketch and needing version control
  • Integrations: Sketch and Adobe XD
  • Price: $9/mo – $15/mo
  • Free trial: Yes, 14-days

Coming soon: an ongoing list of new software for web designers. Check back soon or sign up for a newsletter to get updated as soon as it goes live!