Apple proposes new emojis to represent people with disabilities

Apple has requested the addition of 13 inclusive emojis, including prosthetic limbs, guide dogs and a hearing aid, to better represent people with disabilities.
The company submitted the series of emojis on 23 March to the Unicode Consortium, the organisation that reviews requests for new emoji characters.If approved by the Unicode Consortium the new characters will be included in the Emoji 12.0 update in 2019, according to Emojipedia.

Apple proposes new emojis to represent people with disabilities
This emoji represents the “deaf sign” in sign language

Designed to create an “inclusive experience” for its users, Apple has designed symbols depicting wheelchair-users, and visually impaired people using support canes.

Other planned icons include two different types of guide dog, a prosthetic arm and leg, and an ear with a hearing aid.

A prosthetic arm and leg are included in the proposal from Apple

The company worked with international organisations such as the American Council of the Blind, the Cerebral Palsy Foundation and the National Association of the Deaf to develop the designs.

“One in seven people around the world has some form of disability,” said Apple in the submission.

“The current selection of emoji provides a wide array of representations of people, activities, and objects meaningful to the general public, but very few speak to the life experiences of those with disabilities.”

“At Apple, we believe that technology should be accessible to everyone and should provide an experience that serves individual needs. Adding emoji emblematic to users’ life experiences helps foster a diverse culture that is inclusive of disability,” it added.

A guide dog with a harness is one of the 13 new emojis proposed by Apple

The firm believes that these new icons will provide more options to represent people with disabilities, but states that the emojis are not meant as a comprehensive list.

“Every individual’s experience with their disability is unique and, therefore, the representations have unlimited possibilities. It would be impossible to cover every possible use case with a limited set of characters,” Apple explained.

Apple proposes new emojis to represent people with disabilities
Apple proposes adding two types of emoji wheelchair

Unicode, whose other members include the likes of FacebookMicrosoft and Netflix, decides what emojis should be used and what they should represent, with members deciding what the design looks like on each of their operating systems.

Apple’s last update, in July 2017, saw the company release 52 new icons, including a zombie, sandwich, elf and a woman wearing a headscarf.

Images courtesy of Apple and Unicode Consortium.This article originally appeared in Dezeen.

Seems like there is lots of discussion about emojis these days. Come to the VMA Design Conference on June 15 in San Francisco for even more!

An Introduction to Emotive UI

Written by Sherine Kazim

DESIGNERS NOW HAVE TO GRAPPLE WITH THE WHOLE MESSY SCOPE OF HUMAN EMOTIONS
Historically, emotion has been thought of as a byproduct of design — not something that drives the user experience. But emotion is actually a critical new dimension in UI, and one for which designers are ultimately responsible.

There are certain things designers want you to feel when you use their products, and you can hear it in the way they talk. Designers often say: “We want to surprise and delight our users.” But really, that’s just scratching the surface. Humans are a mess of emotions — and designers are going to have to learn to engage with all of them.

Robert Plutchik, an academic psychologist who (literally) wrote the textbook on emotions, in 1980 introduced the concept of eight basic emotions — joy, trust, fear, surprise, sadness, disgust, anger, and anticipation. His “wheel of emotions” shows the interplay of those emotions, and their varying levels of intensity.

The form of UI that most accurately reflects our emotional spectrum today is emojis. Here’s an emoji-based version of the wheel I created for a recent presentation on Emotive UI:

You can see in the chart that there is a dissipation of intensity that happens as you move further out on the wheel, and in design, nobody is talking yet about that. We currently design things that make people feel basic emotions — maybe joy or sadness — but we don’t talk about how we should adjust the UI according to how the user’s emotions may be intensifying or dissipating.

We tend to create products that aim for the center-wheel emotions, because it’s the easiest thing to convey. We rarely think about the full spectrum, and we don’t think about the dissipation. Currently, most designers think about the design intention and the user reaction: “I want to make you happy,” and the user is happy.

But here’s what a user interaction might look like in the real world:

When someone designed this particular object (a mailbox flag), they weren’t thinking about emotion. They were thinking about an object. Then along comes a user — Ralph Wiggum — and he clearly thinks, “Hey, this looks like a really fun thing to do.” Once the flag is down and the fun is over, you watch that emotion dissipate. In Ralph’s case, he even transitions to another emotion: sadness. That whole spectrum happens in a three-second GIF: Ralph is feeling joy — but from a design point of view, we never got around to addressing the more intense ecstasy, or less intense serenity, even though Ralph went through all those emotions, and more. We need to start intentionally designing for every single emotion that Ralph is going through.

What that forces us to do is fine-tune communication between people and products — to design for a primary emotion as well as its dissipation — and the relationship we have there. Ultimately, we’re trying to make deeper, more meaningful connections with the user and the best way to do that is to fully understand and manage their emotional spectrum.

 

DESIGNING FOR FEAR, JOY, AND ANTICIPATION.
Designing for emotion can be subjective, but here’s one example of something that gave me joy:

 Things bounce around, there’s bright color and movement and music that brings back amazing memories from when I was a kid. I even get to make something that’s a direct reflection of myself. The design intention is pure ecstasy, and the user reaction, pure ecstasy.

 

Or what about designing for fear — what does that look like? It’s difficult to come up with examples, but I found one instance when I was in a Seoul train station — and it’s an example of designing for fear, gone wrong.

I remember sitting there looking at this piece and thinking, “OK, I don’t speak Korean but clearly I am supposed to run away from a bomb, run away from an explosion. Not sure why I’m running toward the trees.” I’m not entirely sure what I should do, and it seems the intention was to deliver the information in a neutral way. But my reaction to it was “Holy shit, I’m not getting on that train, because I don’t want to be anywhere near where these things can happen.” Absolute terror. You start to feel the responsibility of the designer in considering the emotions of the user — in this case, the person viewing the sign.

Or, think about designing for anticipation. Look at the Japan Quake Map. It’s relatively old, but it’s still very powerful. The UI of the quake map shows the quake depth. You see the clock running, but beyond that, there’s nothing else going on — until you’ve waited for a couple of minutes:

 

That first day is the day Fukushima hit, five years ago. Without even realizing it, the data itself is managing to not just create anticipation, but also elicit an emotion — grief. All that with very few UI cues. That wasn’t intentional, but it illustrates why we need to take responsibility when we create something to put in front of a user.

Surprise is a tricky one because I rarely agree with surprising a user in the interface, with one exception: games. When it comes to games, surprise can be paramount to their success.

 

Who would think to put an apple in front of a sleepwalker to stop him from hurting himself? It’s gorgeous, interesting, and wonderfully surprising.

What’s interesting is I could hit on only 50% of the basic emotions — not to mention all the others on the rest of the wheel. There’s no clean way to capture that stuff in UI currently — at least, not visually. That’s because, as designers, we’ve done such an excellent job simplifying visual UI. But soon, products will become more multidimensional, so they have their own personalities, just like users do.

“We have a finite set of emotions, and there will never be another sadness 2.0.”

As AI becomes more prevalent in our lives, it’s only going to get more complex, because we’ll need to focus on the personality of the user and how it interacts with the personality of the AI. We can no longer solely rely on just the visual representation of the UI.

This is good because it will ultimately allow us to form a more reciprocal relationship between the user and the brain behind the interface as we move away from screens.

It’s challenging, but know this: Products and platforms will change, but our spectrum of emotion will not change. This is the key takeaway — that we have a finite set of emotions, and there will never be a sadness 2.0. It’s actually great that we have that constraint to work within because it’s going to help us design better product relationships for the future. It’s not just about designing for intention and reaction — it’s about understanding the full spectrum of emotion and the dissipation of each one, so we can start to develop true product personalities.

The minute we design for all the variations of basic emotions, we know we’re heading toward solid territory for future design.

This article originally appeared on Sherine Kazim’s Website. You can hear more of her muses at the VMA Design Conference on June 15th in San Francisco. Join us.

http://www.sherinekazim.com/perspectives/

How I transitioned from a graphic designer to front-end developer in 5 months

👉 中文版連結 (Chinese Version)

2017 was a bumpy yet exciting year for me. I left my graphic designer job in March, and entered the maze of the coding world. Five months later, I finally got a job as a front-end developer at Tenten.co.

Having been a full-time front-end developer for six months, I’d like to share my story of why and how I pivoted my life path. This is for those who might be as helpless but ambitious as I am.

To be clear, this post is not written from the perspective of a seasoned developer or designer who’s able to illustrate a clear road map to follow. Neither is it a crash course for learning front-end development. There are lots of great tutorials on this topic, and I will list some later in the article.

Remember, the perfect (universal) path for all individuals does not exist.

My Background

My Behance page

I was a 24 year old graphic designer with no experience related to coding at all. In my school days, my exam scores of math, physics, chemistry and science were horribly low. These subjects scared me with dull and complex formulas, numbers, and errors. Things that interested me back then were always the beauty created by paint, music, or words. Naturally, I chose English as my major, and got fascinated by literature, culture, photography and design in college.

How I learned how to design in college by myself and finally became a graphic designer after graduation is story for another day. The point is, throughout my entire life until last year, I’d dreamed of being a writer, photographer, film critic, singer and designer, but I never thought of being a developer under any circumstances.

Why I Wanted to Code

For me, graphic design serves the purpose of solving a problem with attractive visual forms supported by invisible systems or structures.

As the world is facing so many critical issues, I believe that problem-solving design thinking can and should help deal with some of these issues. Of course I was only trying to layout something beautiful the first time I opened Photoshop. Yet, the more I learned about design, the more I craved to engage in critical issues with graphic design.

But, after many endeavors to achieve my ambition, I was deeply disappointed at the impact that graphic design could make in Taiwan (or maybe the whole world?).

Design & Thinking Official Trailer by Muris Media. The documentary tells the power of design thinking.

There’s no doubt that I’m still aware of the power and importance of great design. But most of the time, designers are only allowed to deal with the “client’s problem,” instead of tackling “real problems client have.” Designers spend most of the time guessing their client’s wishes with no profound data and analysis, but only intuition, experience, or common sense.

I got tired of this game two years into my graphic design career.

That’s when I decided to take a serious look at the always trending front-end development topic on Medium.

 

Design in Tech Report in 2017 by John Maeda. This report taught me the potential impact a computational designer could make could be way more than a classic one.

I found that being a developer with design skills allowed you to have way more control and authority over each case and client. Besides, working on web development or applications allows you to efficiently propagate information.

I left my graphic design job at the end of February. With no elaborate plan and limited saving in the bank, I started my journey of transforming into a front-end developer.

What to Do

Taking the first step is always hard. But if you recognize what the reason propelling you is, things get simpler. For example, if your purpose of becoming a developer is getting paid better ASAP, then you should learn the hot stuff in the market.

In my case, because I realized that my current goal was to earn the power to combine design with development skills, I focused on showcasing both abilities.

So, I set a goal, and made a list of required tasks with my shallow understanding of front-end development:

List of skills I wanted to learn and the rough plan I sketched on paper

1. Goal

Get a front-end developer job

2. How to achieve the goal

Build my portfolio site for showcasing my ability

3. Tasks to do

  • Learn HTML, CSS, jQuery/JavaScript
  • Design portfolio site
  • Portfolio works preparation

I assigned only these tasks for myself at first. But as I read more articles, tutorials, or job requirements, I put these skills on the list along the way:

  • Sass
  • Gulp
  • CS50
  • Basic Unix
  • Basic WordPress
  • Jekyll
  • Basic AWS knowledge
  • Basic networking knowledge

Note: To be sure, the exploding information on web bombed me with more things to learn. In the five months, I had once put Node.js, React.js, PHP and more on the list. The tasks above were the ones that I actually completed in the end.

My Toggl report from March to July in 2017

To follow the plan, I set a 48hr/week working goal for myself. It meant I had to work eight hours a day with only one day off in a week. Toggl helped me keep track of my performance.

Asana for schedule

Also, I took a long-term goal -> monthly goal -> weekly agenda -> daily agendamethod to make my learning schedule, and Asana was my best assistant on managing these tasks.

Where to Learn

I tried to learn from many platforms, tutorials, or articles along the way. Here’s the list of the resources and my thoughts to each of them:

Learning Platforms

Back then, I hated the tutorials that showed me lines of codes I didn’t have any idea what to do with. Some assumed that I knew every bit of it, or they told me to ignore it for now. Please, I genuinely didn’t understand even a line of the code on the screen, because I was a TOTAL BEGINNER.

Those kinds of lectures pained me, and made me looked down on myself. Generally, there’s no perfect platform to learn everything. I tried to be as flexible as I could, jumping between each of them.

  • Codecademy — Lots of people recommended it, but I was pretty frustrated by its tutorials back then. I always stuck in practice without any clues.
  • Code School — I spent lots of time here, because the teachers explain the whys clearly. Recommended.
  • Treehouse — The one with the most ads on Youtube! Treehouse has done a great job on marketing, which works (at least for me as a lost beginner back then). It covers so many topics, some of which were really useful for me. For example, it’s hard to find a decent tutorial of WordPress for front-end developer students out there, but Treehouse has one.
  • freeCodeCamp — Huge love for freeCodeCamp! This community has a clear path for beginners to follow, and it knows when to take the training wheels away from student. I was once anxious about what to do next after learning basic HTML, CSS and JavaScript, but freeCodeCamp put small projects on the right spots in the learning track. The community also shares great posts on Medium and by emails. Highly recommended!
My bookmarks of learning platforms in Safari

Youtube Channel

This is the best place to learn for free or for fun. Youtube videos are not only great for learning certain topics thoroughly from playlists, but are also handy for having a taste of some interesting knowledge.

  • The Coding Train — Hosted by NYU’s ITP professor Daniel Shiffman, who is the most vigorous teacher I’ve ever seen, the channel provides easy-to-follow videos.
  • thenewboston— Covers almost any topics I can think of. The host, Bucky, has the power of making intimidating things sounds easy.
  • Academind — Also provides all kinds of tutorials. Easy to follow. Recommended.
  • Fun Fun Function — The host Mattias Petter Johansson is a developer who had previously worked at Spotify and Blackberry. His channel is a nice place to learn JavaScript in an easy way.
  • Linux Academy — I learned some basic knowledge of AWS here. Liked it!
  • Computerphile — The videos here are all about computer stuff. Interesting to know, but I’ll probably never truly understand what they’re talking about.
  • Eli the Computer Guy — I learned knowledge about networking or servers here.
  • mycodeschool — My best friend while I took CS50. It explains computer science stuff clearly. Loved it.
Coding Train Channel

Articles to read

Readings are a perfect medium for topics of life paths or inspiration for me. I was pumped by great articles when frustrated so many times in the five months. Here’re some of my best life guides:

These articles gave me strength whenever I felt stuck

Other Useful Resources

  • JavaScript: Understanding the Weird Parts — Great Udemy course that clarify so many confusing parts of JavaScript for me. Highly recommended.
  • CS50 at Harvard — I knew Computer Science knowledge was not a must-have knowledge for applying to junior front-end developer job, but I couldn’t resist the temptation to take this course because it looked so interesting! It was worth my precious time in retrospect.
  • NYMY — Episode 1 — Pieter Levels — NYMY is a podcast show hosted by talented designer Tobias van Schneider. He interviewed the maker of NomadList Pieter Levels in this episode. I listened to Pieter’s story several times when I was down. This one hour show introduced me to the infinite possibilities of being a coder/designer.

 

NTMY Show — One of my favorite podcast episodes ever!

How to Get a Job

After about 4 months of non-stop coding and designing, I finally knew a little about the front end. I had also completed almost 80% of my portfolio site. At the same time, my remaining savings were only enough for me to live on for another couple of months.

It was time to look for a new job.

Unfortunately, I had barely any choices at all. Not many companies wanted a man with no relative development experience/background, and even fewer appreciated the value of my graphic design abilities. It was also sad to have fewer than five job opportunities that were possibly a fit for me. On the bright side, the situation forced me to focus on these precious chances.

🔥Tenten.co 🔥

I had been watching the design agency Tenten for at least three years. It is the one and only agency that’s able to harness design, digital development, and innovation at the same time in Taiwan. I’ve had them on my “please hire me” list for a long time, and I believed Tenten was the only company here that would be sold on my multi-disciplinary skills as well.

In the last two months of my journey, I learned as much as I could about Tenten’s junior front-end developer position. Meanwhile, I completed my personal site. When the time was ripe, I applied for the position. As backup plans, I sent my resume and portfolio to other five companies as well. And I waited.

And finally…

In Retrospect

Looking back, I still wouldn’t say that transforming myself from a designer to a developer was easy, but it wasn’t as hard as I thought it would be, either. The hardest part of the process was never understanding or writing the code, but having the powerful motivation that drives you forward.

Congratulations if you’ve found this motivation. If you haven’t, give it more try before you quit. If you never try, you’ll never know.

The most important lesson I learned along the way was to start doing something ASAP. I know it’s terrifying to take the first step of actually building something, but it’s the only way to truly learn something. Remember, you have nothing to lose anyway.

The days and hardships after formally becoming a developer are another story.

I’m so glad to have been a front-end developer at Tenten for 6 months now. The journey of learning never ends!

This article appeared previously on Medium.

How Mixed Reality will change your perception of public and private spaces

We live surrounded by messages and we consume them everyday in private and public spaces. Communication streams hit us everywhere from the brands of the clothing we wear to signs on the street, instructions on the oven, traffic lights, etc. Anywhere the eye can see it’s likely to see an ad or intentional message. MDI estimates a normal American consumes around 4,000 to 5,000 ads a day but that doesn’t even count all the other visual clues and indicators we see and seek with a purpose (i.e directions, bathroom signs, exit signs, etc.).

In this abundance of messages we have learned to navigate through them and we have almost become numb to their effects. Just like users tend to ignore banners online we ignore street signs if we know where we’re going or we ignore traffic lights if we are not driving. All these messages visually clutter our environment by targeting everybody when in reality they are only relevant to some of them. With the arrival and spread of Virtual Reality, Augmented Reality and Mixed Reality a few things can be expected to change.

At the risk of describing a dystopian future I believe traditional communication platforms will be the first to feel the burn with the arrival of these new devices and that they will soon affect the design of private and public spaces as we know them.


How — Information depth in Mixed Reality

To disrupt everyday communication platforms and therefore our living spaces, Mixed Reality and Augmented Reality devices will need to follow a series of principles and perceptive rules so users can immediately assimilate how they work and see its value. Just like with any other new device the golden rule will be familiarity plus progressive enhancement. Find a hook and little by little it will become a habit. To achieve this I believe Mixed Reality devices will operate at three different levels of our reality.

1. Anchored to your view

Your most personal space ever that won’t ever be occupied by anything other than what the user decides (maybe notifications / alerts).

2. Anchored to objects to reveal contextual info.

Objects will trigger their own interfaces depending on the user and their intent. For example the interior of a car will be different if you are the person driving it or sitting in the passenger seat.

3. Anchored to physical spaces to reveal extra info.

Street signs, landmarks and any other physical representation will potentially be enriched by MR and AR.

From context to intent — A mindset change

Since the users are the platform themselves physical spaces will no longer need to be designed around static platforms and the contextual clues that normally feed UX studies will become irrelevant. Context (demographic information, time of day, location, etc) will no longer be the only source of information used to define UX.

A given space can have distinct meanings to different people. When designing spaces different types of use are prioritized and that is translated into its design. Take an airport for example, its primary goal is to get people through a series of planned steps (checking to boarding) and its spatial design and signage is articulated accordingly.

However the goal of a given space is not always that clear and its type of use isn’t either. What’s relevant to you if you are in the middle of a street? Everybody around you shares the same geographical context but depending on their purpose their attention will be focused on different aspects. Are you looking for a subway station or are you waiting to cross a crosswalk? Different purposes will seek different signals.

With the introduction and mainstream adoption of MR devices the current paradigm is likely to experience a structural change. As soon as the individual people become the platform, physical spaces will no longer need to display lots of messages for different uses. Instead, users will shape their space according to their current intent, independent from their geographical context. Walking in the street will be a different experience if you are trying to find a restaurant or if are trying to catch a Pokemon.

Private spaces are also designed based on contextual assumptions. Apartments for example are organized according to the most common living patterns (sleep, rest, leisure, dine). Most living rooms for instance are organized around entertainment- last century it was the radio and more recently it’s been the television.

Cars are probably the best example of contextually designed physical layout due to their limited space and capabilities (mi4 car interaction with map). Traditionally there are up to 3 main roles in a car, the driver, the passenger, and the cargo. The driver needs focus and has total control, the passenger shares some controls with the driver (complementary to the driving experience) like maps, music and heating and AC and the passengers in the back seats have no control whatsoever and only sometimes have their own individual entertainment sets.

Cars dashboard and interior experiences are defined by their physical limitations. Now let’s imagine how AR/MR devices could help ease the cognitive load of driving a car. How would a car look if we could define controls and indicators based on your intent? I bet it would be less cluttered and more focused since it wouldn’t need to show every single control at all times. Also voice activated UI will alleviate the cognitive load of presenting every single choice all at once.

By looking at the user intent each space can become what the user requires at a given time with no room for interpretation or messaging hierarchy needed. Intent is ultimately the most accurate description of the user needs and the physical world should be the canvas users look at to meet those needs (instead of their phones).

Drivers will be able to define their experience according to their needs. AI doesn’t need to look fancy, it just needs to work. Photo: Alejandro Gonzalez
Passengers on the other side could totally opt out of the driving experience and focus on entertainment. Photo: Nathan Anderson

Why might this happen?

1.Economic Reasons

The internet made real targeted marketing possible and created better ways to target relevant users with more personal and behaviour based messages. It created digital spaces and introduced new financial models (CPC) helping advertisers getting the most roi out of their budget.

Advertising, for better or worse, will play as big of a role with MR devices as it has done with the internet over the years. With the arrival and popularization of MR, digital spaces will finally break out their physical constraints and find a place out in our world. Media companies will jump at the opportunity to finally being able to talk to the right users in the right places.

2.The Final step to Owning the ecosystem.

Big tech companies are trying to engage customers throughout their most common living scenarios. I.e. Apple has Carplay, Homekit and has pushed for Apple TV since 2007. Google on the other side has Android TV, Android Car and NEST. In the quest for being present throughout the user’s life, tech giants have put their efforts into creating as many devices as necessary to reach the user wherever he’s at, (home, transportation, on the go, exercising). The flexibility and portability of MR devices will render all those devices obsolete making it easier for these companies to be omnipresent.

3.The burden of owning multiple physical platforms

For the most part users update many devices at home once in awhile. A new TV, faster phone, and more powerful computers are just examples. Marketing tells customers they are major breakthroughs in innovation with each new iteration but reality says their evolution is closer to sales cycles than it is to true innovation. While planned obsolescence is not going to go away, a MR device could unify many of the devices we use throughout our day therefore simplifying the device ecosystem we are part of.

Collateral effects on society

If we entertain the idea of communication platforms becoming obsolete, how would that affect us anyway? Back in 1964 Marshall McLuhan suggested that not only the content being delivered by the media affected society but that the medium in which that content was delivered and its characteristics were also affecting society. The internet is a good example of this theory. The mere existence of the medium and its characteristics (immediate transmission and consumption of information anywhere in plenty of affordable devices that allow consumption and creation), is far more important to define the current society than the messages transmitted through it.

With that in mind, if we are able to detach the medium from its physical stationary platforms and liberate public and private spaces of the burden of hosting these devices (tvs, computers, billboards, etc.), what effect would that have in our society? How would “restructuring our living spaces” impact the definition of our society and its members?

Personal shared spaces and privacy

Considering experiences are better enjoyed when shared with others the adoption of MR/AR would also redefine how social events are experienced in a group. A physical shared space in a group would not be fully shared since each individual would be able to define the space based on their personality, intent and needs. How much of that digital entity is shared among users vs what other parts are strictly private would be up to each person.

As we expand our digital profile to our physical reality those levels of privacy would define what other users know about us and also what 3rd parties could use to better target their messages to us. If you find yourself on the hunt for Thai food in the middle of the city and as part of your profile you indicated you’re allergic to nuts the results displayed in your field of view should be defined by your needs.

A clutter free world

One of the most exciting prospects of this future scenario is the idea of removing persistent callouts from the urban layout. What would a city without billboards look like? What could be defined as an essential part of our cities if we could redefine them without the burden of indicators, marketing callouts, traffic signals and any other unnecessary message now present?

Advertising was first introduced to the Times Square area in the early 1920s. Since then Times Square has become almost a pilgrimage destination for tourist visiting NYC from all over the world. What once was considered advertising today has become part of the culture and identity of the city. When MR/AR devices become mainstream, will we consider Times Square a vintage reminiscence of a past time?

What will happen when people are able to individually recreate visual experiences equally as impressive or without the need of a physical set up?

And specifically when looking at private spaces…

What would your living room look like without a TV?

This post originally appeared here Hacker Noon

Data and Design: How to Tell Stories that Get Heard

90e2f156907035.59c12c7835263.gif

By: Theresa Christine

The way we consume information is changing at a rapid pace. As a kid, you went to the library and flipped through encyclopedias for a research paper. Then the internet put even more information within grasp. Now, videos from around the world are right in the palm of your hand, literally.

But because we are bombarded with information daily, it often means we tune things out. So how can designers clear out the mess and actually reach people with their work?

Jessica Bellamy knows this struggle all too well. After fighting to have her work heard, the Adobe Creative Resident and Designer sought a more effective way to share information.

“As a college student who was constantly writing long papers on topics that intersected with race, I understood that no matter how well-written my papers were they were still going to go unread,” she said. “I wanted to find new avenues to have meaningful and transformative conversations about race, so I started making some of my papers into infographics.”

Jessica developed a way to harness information to tell visual and personalized stories, especially when it comes to ethnomathematics—the relationships between culture and data. It’s not merely about using charts or graphs, though. “People appreciate a visual narrative rather than just a data visualization; however, from a design perspective, beauty should never be the only goal,” she stated. “Aesthetics should never be placed above function. Data can be made less intimidating by incorporating allegorical illustrations that speak to the issue.”

While some creatives may shy away from numbers, she insists it’s an integral part of design. Graphic designers use the golden ratio when creating layouts, and architecture and product design couldn’t exist without data.

Jessica also highlighted the crucial role math plays in the industry. “Its role is to be accurate and well-researched,” she explained. “It also must be accountable to the negative or positive effect of the design narrative.”

Naturally, as an infographic designer, Jessica loves complex problem solving and system design. This led her to create the infographic wheel, a tool which would allow people to create more effective infographics—what she called her most exciting and challenging project to date.

“To create the infographic wheel I had to do weeks of research and experimentation,” she said. She read through several books and referred to multiple web portfolios, compiling a master list of ways to create this type of visual experience. “Once I had a list of 113 infographic layouts I started categorizing them based on use. I also began to identify the types of data that typically were associated with each of those layouts.”

The result? A wheel which features a refined list of 36 essential, familiar layouts to use when creating an infographic.

Social change drives her work, which helps topics like race become a part of the conversation—a conversation which engages people, one they’ll actually pay attention to. Jessica even started her own video series, Designing from the Margins, about the intersections between men and women of color and design. “I’m hoping to find as many Creative ways to both inspire conversations around race as well as instill pride in Black people,” she said. “The content that I’ve created acts as a mechanism for reconciliation and healing, which is a result that I’ve not always had the opportunity to work towards with design.”

It might be a slow process, but it’s important to continue breaking down the barriers and highlighting the work of people of color. “When we start to recognize the many contributions of Black and Brown people,” Jessica mentioned, “we begin to dismantle our internal bias that limits whose faces we show in our designs, whose perspective is explored in our work, and whose voice is heard through our projects.”

This work is invaluable, especially when it’s no secret the design industry isn’t exactly the most welcoming for people of color or women. Jessica’s advice to them? “Collect mentors, eat as much media as you can, and get past your self-doubts by finding your ‘why,’” she advised. “You are limitless.”

Jessica Bellamy who will be speaking on June 15 at the VMA Design Conference in San Francisco as part of San Francisco Design Week.


static1.squarespace-1.png

Theresa Christine

Theresa entered the world of design through The Dieline. With a background in writing and journalism, she has a passion for discovery and cultivating human connections. Her work for The Dieline is a constant journey to deeply understand all facets of the design process and to investigate what makes designers tick. Theresa’s writing has taken her snorkeling in between the tectonic plates in Iceland, horseback riding through a rural Brazilian town, and riding an octopus art car at Burning Man with Susan Sarandon as part of a funeral procession for Timothy Leary (long story). When not writing, she is planning her next trip or taking too many pictures of her cat.

 

Jessica Bellamy – Adobe Creative Residency Recipient Tells Her Story

Winning an Adobe Creative Residency is no small feat. This year, Adobe increased the program to six residents, including two from Germany, but it is still highly competitive. Because the perks are pretty incredible: The software company provides a salary with health benefits, full access to its Creative Suite, relevant hardware, travel to Adobe MAX and other conferences and mentorship from established creatives in your field. You get to stay where you already live, you get creative freedom … it’s kind of like having a Medici on your side for a year.

So what does it take to earn one of these coveted spots? As the 2017 group of residents have settled into their year, I asked three of them, Aundre Larrow, Jessica Bellamy and Natalie Lew, to describe their work, how the residency has enabled them to lengthen their creative reach and what advice they have for future residency applicants.

Here is the interview with Jessica Bellamy who will be speaking on June 15 at the VMA Design Conference in San Francisco as part of San Francisco Design Week.

Jessica Bellamy, Graphic Designer

Courtesy of Adobe

Adobe’s Description: Graphic designer Jessica Bellamyof Louisville, Kentucky, is a translator of ideas. Her work tackles the challenge of communicating complex service and policy information from non-profits, to the general public. During her residency, Bellamy plans to work towards design-focused social change. Her plan is to create a toolkit for non-profits to tell their stories and help designers learn how to work with the non-profits in new ways.

1) What was the first thing you did when you heard you got the residency?

I was with my friend Angela when it happened. We were on our way to Zanzibar to play pinball to peel some of the stress off of the day. My phone rang. I was very professionally excited on the phone and then promptly screamed once the call was over. I felt like I was in a movie. The sun was setting, the air was warm, and a playful 90s hip-hop song was in the background. We weren’t allowed to talk publicly about being selected for the residency until the official announcement, so this instantly became the most thrilling secret I’ve ever had.

2) Tell me about some projects that you plan to work on this year?

One of my focuses is hackathons, and I’ve been leading Graphic Ally Hackathons across the country this year. The hackathons are a collaboration among creatives, a nonprofit/community group that needs an infographic, and myself. As a professional infographic designer for social change initiatives, I’ve been teaching designers how to make hand-drawn infographics, as well as how to embed principles of conscious and responsible design and data equity into design work. 

Already, I’ve completed three Graphic Ally Hackathons. I’ve done one in Detroit, MI, at the Allied Media Conference; one in Louisville, KY, for AIGA Louisville’s Design Week; and one in San Francisco, CA, at Chronicle Books. I’ll be facilitating more sessions in St. Louis, Cincinnati and Los Angeles before the end of my residency, and I may schedule two more in 2018.

In regards to motion graphics, I’m also making a shareable social media video series that teaches people how to replicate successful social change projects. These videos feature “Bubble,” a living and breathing infographic that morphs into maps, icons, charts and more. I’ve worked within communities for years now as a community organizer and as an equity-focused designer. It has been my dream to consolidate suggestions for policy change and addressing local problems into short, digestible tutorials. This Creative Residency is me living my dream.

3) How much of that plan was made possible (or at least a lot easier) because of this residency?

All of it. If it wasn’t for this residency, I would never have had the opportunity to create the motion graphics series nor share my skills on such a national level. Adobe gives me a generous amount of financial support as I work on my project, and connects me to software experts and esteemed designers when I have questions, need feedback or if there is an opportunity for collaboration. I also have an array of advisors and mentors with a variety of different skill sets that check in with me regularly. This has been an amazing experience and a huge opportunity for creative growth and development.

4) Thinking from the perspective of your own work, or any other inspiration, what does being “creative” mean to you?

Being creative means being ingenuitive and brave. Creatives are resourceful and inventive people who see possibilities in their failures. 

5) Why do you think Adobe does this program? What’s in it for them?

Adobe created this program because it fosters informal feedback cycles and shares skills between creatives internationally. The Creative Residency also creates a personalized method of showcasing new ways to use their design software. 

6) If you were to give advice to creators who are going to apply for next year’s residency, what would you say?

Your proposal should be and do four things. It should 1) be ambitious but realistic, 2) build off of your unique skills and point of view, 3) challenge your creative process, and 4) be about something that you’re passionate. If you get the outstanding opportunity to be a Creative Resident, be excited to work your butt off. 

Writing about the creators and data behind digital entertainment. Opinions expressed by Forbes Contributors, where this article originally appeared, are their own.
Jessica Bellamy who will be speaking on June 15 at the VMA Design Conference in San Francisco as part of San Francisco Design Week.

VMA’s Design Conference – The Story

By Barbara Silverman

It just seems to get better each year! The VMA Design Conference was held on June 14, as part of the opening day of AIGA’s SF Design Week. This year the conference was moved to Bespoke, an amazing new hi-tech venue conveniently located in the center of town, in the Westfield Shopping Center.

The event began as our high energy hostess-with-the-mostest, Lauren Elliot of Wicked Good Print Partners (WGPP) kicked off the sessions, introducing the “Large Man” and creative visionary Aaron Draplin of The Draplin Design Co., who shocked the audience with his unconventional delivery along with creative approaches to earning a living in design.

Dava Guthmiller from Noise 13 facilitated the recovery, discussing a sane yet creative approach to achieving meaning in a new brand identity. It was a perfect segue to Brian Dougherty who filled us in with stories of his quests for environmental and social impact design. Who would have through that packaging light bulbs could be both fun and environmentally sound?

David Hogue from Google presented some thought provoking ponderings as he asked us to consider what’s next? Where is all this going? And what should we really expect from our connected world in the future?

Corey Lewis of Black Flag Creative set his pirate ship afloat as he reviewed his methods of smooth sailing when dealing with design that would span many different channels.

Among the many highlights was IDEO’s Neil Stevenson. Stevenson’s mission is to understand creativity and find new ways to enable and encourage creativity in others. He shared some of his own stories, about stories to help us learn to apply storytelling in the service of creativity.

The founder of Social Media Trackers, Mark Schwartz opened the eyes of many of us as he shared real life experiences of how amazing Facebook can be for not only personal (how he met his wife) but business success. And he has the data to prove it.

When Neal Haussel followed, he shared what he believes to be the future of packaging, considering the rise of e-commerce. His Unboxing videos were both amusing and convincing.

Barbara Stephenson from 300FEETOUT offered us a lighthearted look into the workings of a functioning design studio and how to keep the creativity flowing. It was the perfect segue for Michael Osborne of Michael Osborne and one of our regulars, who challenged us to find our creativity and keep it flowing. Perhaps that is easy for Michael but it’s not always that easy for many of us and we certainly appreciated his insights.

We had a fascinating discussion about AR and print by Erica Aiken of Rods and Cones and Cindy Walas of Walas Younger, LTD. They proved that amazing possibilities are now within reach with their own magazine “Out of Chaos” where attendees got to experience AR first hand.

Zooka Creative’s Director of Strategy, Santiago Sinisterra provided an overview of what a brand really is and then went on to share a fascinating case study of the rebranding of Union City. He was swamped with questions in the panel discussion that followed.

Peleg Top closed the day by enrapturing us all with his own story. We were almost there with him as he shared his history that led to a 2-year sabbatical from our overly connected world and then the wisdom he acquired from it. He focused on how we can get more out of life by having less.

Among the bonuses of this conference were the breaks! Along with visits to the wonderful exhibitors, attendees had ample opportunity to mingle and learn from each other.

It was quite a day. Word on the street is that this event was clearly one of great inspiration and education and a perfect kick-off to SF Design Week!

See ya next year!

 

 

Barbara Silverman is the Director of Education at VMA (barbara@vma.bz).

 

The 20 Best New Social Media Tools to Try in 2017 (And How to Use Them)

The social media world is a fascinating one.

Every so often, a new social media platform emerges to capture our attention (Peach) or become part of our daily lives (Snapchat).

The social media tools landscape can be just as fascinating — and robust!

Every week, people build and launch new social media tools, empowering us marketers in our day-to-day work. To give you a sense of how amazing the landscape is, here’s a graphic of some of the social media tools available: social media management, listening, analyzing, content creation and more.

And here’s the even crazier part: The graphic (from Buddy Media) is four years old. Imagine how jam-packed it’d be today!

With all these tools to choose from, how can you stay on top of the latest and greatest?

As part of our State of Social Media 2016 campaign, we’ve scoured Product Hunt for the latest trending social media tools and created a list of 21 products for marketers and teams to try in 2017.

Keep reading to see the full list, or click over to the Product Hunt collectionwith all of 2017’s best social media tools and conversations about each of them.

20 Best New Social Media Tools to Try in 2017

1. Quuu

Hand-curated content suggestions for social media sharing

Price: Free or $10/month

Best used for: Content curation

Description: Quuu and its amazing community (of real people, not computers) hand-curate content for you and fill your Buffer queue, making content curation super easy.

2. Panda 5

A smart news reader, powered by integrations

Price: Free or $4.99/month

Best used for: Content curation

Description: Panda 5 (the fifth iteration of the popular news-reading app) helps you speed up your content curation process by allowing you to browse multiple websites at once, integrate with other websites, and pull in RSS feeds of your favorite content.

3. Zest

Share and discover stellar marketing content

Price: Free

Best used for: Content curation

Description: Zest is a new tab extension that helps you discover great marketing articles. All the articles are curated by its community of marketers and manually approved.

4. Yotpo — Curation

Collect Instagram photos from customers and influencers

Price: $299 onwards (for the entire user-generated content marketing platform)

Best used for: Content curation for Instagram

Description: Yotpo makes collecting the best user-generated content and making full use of them for your business really easy. Curation is their latest feature to help you collect and use user-generated Instagram photos (with proper permissions).

5. Refind

The home for the best links on the web

Price: Free

Best used for: Content curation

Description: Refind helps you re-discover the links you have previously saved when you actually need them. Refind can also show you what your friends have saved if you prefer.

6. Adobe Spark

Videos, images and stories made in minutes

Price: Free

Best used for: Content creation

Description: With Adobe Spark, you can create beautiful graphics, web stories, and animated videos in minutes.

7. Rocketium

Transform text & media into stunning videos

Price: Free, $10, and $25

Best used for: Short video creation

Description: Rocketium focuses on creating short videos with overlaid text (think Buzzfeed’s Tasty videos!).

8. Pixabay 2.0

Over 780,000 free high-quality photos and video

Price: Free

Best used for: Finding photos and videos for your content

Description: Pixabay has more than 790,000 free photos, illustrations, vectors, and videos for your use. The Pixabay community contributes more than 1000 new original high-resolution images and videos every day!

9. gifs

Create personalized GIFs in your browser

Price: Free

Best used for: Creating custom GIFs or turning your videos into GIFS

Description: gifs allows you to take any video (Facebook, Twitter, Instagram, YouTube, etc.) and live video (Facebook Live, YouTube Live, Periscope, Twitch, etc.) and quickly turn it into a GIF using its web application.

10. CalendarX

Get a calendar your audience can follow

Price: $7/month, $29/month or $72/month (with a 30-day trial)

Best used for: Live events promotion

Description: CalendarX is a calendar your followers can follow — how meta! Once they follow your calendar, you can push important events to their personal calendar.

11. Rebrandly

Create and share links with your custom domain namePrice: Free or $99/month with advanced analytics

Best used for: Social media branding

Description: Rebrandly is a custom URL shortener for sharing branded links. You can turn long, complex URL into branded and memorable ones.

12. Yala

A bot that knows the best time to share your contentPrice: Free

Best used for: Social media scheduling

Description: Yala is a Slack bot that uses machine learning to determine the best time to post to Twitter and Facebook.

13. PostReach

The easiest way to measure content performance

Price: $10/month or $29/month (with 21-day free trial)

Best used for: Content marketing analysis

Description: PostReach automates content reporting for you. It tells you your key traffic stats, the number of shares and the influencers who shared your content. With 84% of social media marketers also working on content marketing, PostReach can help you with your social media and content marketing reports.

(PostReach is a project by Buffer’s Ashley Read and friends.)

14. Reveal

Manage your Facebook & Instagram ad campaigns from Slack

Price: Free (at the moment for its beta)

Best used for: Paid social media management

Description: Reveal is a Slack bot that brings you your Facebook and Instagram metrics and allows you to manage your ad campaigns from within Slack. It also alerts you when there are significant changes to your ads’ Click-Through Rate (CTR) and Cost-Per-Click (CPC) so that you can react to them immediately.

With 91% of marketers in our recent survey saying that they are investing in Facebook ads, Reveal could be a great tool to stay on top of all the ad campaigns.

15. Ghost Browser

The Productivity Browser for Technology Professionals

Price: Free or up to $8.33 per user per month

Best used for: Social media management of multiple accounts

Description: Ghost Browser allows you to log into any website with multiple accounts from one window. This can be very handy when you manage multiple social media profiles for each of the social media platforms.

16. Engage by Twitter

Grow and understand your Twitter audiences on-the-go

Price: Free

Best used for: Social media listening and engagement

Description: Engage is a standalone app by Twitter to help you manage your Twitter profiles. It allows you to connect with influencers by highlighting important mentions and provides you with more data about your profile and tweets.

17. Snaplytics

Analytics platform for Snapchat

Price: $179 or $299 for the brand’s analytics and $10/day for each active influencer for the influencers’ analytics

Best use for: Influencer marketing

Description: Analytics for Snapchat is very much needed by marketers and influencers since Snapchat does not provide it natively. Snaplytics provides you with all the metrics so that you do not have to collect them manually again. Apart from that, if your brand works with influencers, the platform allows you to track how well the influencers’ snaps are performing.

18. Intellifluence

Intelligent Influencer Marketing

Price: $9/month (with a 14-day free trial) or Entreprise plan

Best used for: Influencer marketing

Description: Intellifluence helps you discover and collaborate with the right influencers for your brand. What makes Intellifluence stand out from other influencer marketing platforms and agencies is that it focuses on key peer level influencers instead of the big names. This makes influencer marketing more viable for small-medium businesses.

19. Waaffle

Aggregate, analyze, and publish content from social media

Price: $9/month per campaign

Best used for: Social media monitoring, curation, and analysis

Description: Waaffle is the tool for making the most of your social media content. With Waaffle, you can aggregate and monitor social media posts from Twitter and Instagram, analyze them and publish the aggregated content.

20. Falcon.io

The social media and customer experience management platform

Price: Pro and Premium plans (pricing not available)

Best used for: Full marketing and customer experience management

Description: Falcon.io is the one tool that helps you with almost all of your marketing efforts. The platform allows you to listen on social, engage with your customers, manage and publish your content, build responsive pages, measure your performance across channels and more! On top of all that, it is also a Customer Relationship Management (CRM) tool.

Bonus: Respond 2

Social customer service software for support teams

From our State of Social Media survey, we found that only 1 in 5 uses social media for customer support. With more customers turning to social media channels for support issues, there’s a great opportunity here to stand out from other businesses. We thought it might be helpful to share the tool which we use at Buffer for social media customer support. It’s none other than… Respond!

We launched Respond earlier this year and the team has been working hard to improve the product. I’m excited to share that Respond 2, a completely redesigned version of the tool, is slowly being rolled out to customers at the moment.

Price: Starting at $49/month for small teams and basic features (Custom pricing is available for larger teams and advanced features.)

Best used for: Social media customer support

Description: Respond 2 is a team inbox for your social customer conversations. It puts all your Twitter and Facebook mentions, direct messages and searches into one simple inbox so that you and your team can quickly respond to your customers and resolve their issues.

Your turn: What are your favorite new tools?

Thanks for making all the way to the end of the post! I hope you have found one or two (or twenty) new tools to add to your daily workflow.

Are there any new social media tools I might have missed out? (I probably have missed quite a few.) I’m curious to hear about your shiny new tools too! Feel free to comment below and I’ll be excited to check them out.

Thank you!

The full version of this post was originally published on the Buffer Social blogon November 16, 2016 by Alfred Lua. The full version includes a section on how to use each of the tools.

Go Out and Do Nothing

by Jared Enrondu

A few weeks ago, I wrote on a lesson I had learned from designing Evomail. Today I’m going to expand on another.

Lesson #2: Go out and do nothing

Late September 2012, I had began designing a certain interaction for Evomail. I did my raw sketches on the Paper app for iPad, then finalized with pen and paper in my Moleskine. The look and feel wasn’t ideal, but it was a decent start. I waited a day (always good to flush out areas), then hopped in Photoshop with high hopes of conquering the design within a few hours.

Didn’t happen that way

I ended up spending day after day shifting, scrapping, and re-sketching. It became a cycle. “It just isn’t happening for me,” I thought. Had I seriously been conquered by 2-squared inches of an intangible interface? Jon and Dave (co-founders) were scratching their heads at the delay. After all, turnaround time was pretty quick everywhere else. What was going on here? I imagined that was what they thought.

But it wasn’t that simple. My “design juices” had been maxed out, burnt out. I needed some rest. And the day after day routine wasn’t helping at all.

On design and exercise

Ruth Clark, 95, goes through her daily aerobic exercise routine in Pompano Beach, Florida, on April 24, 2012. (Carline Jean/Sun Sentinel/MCT) ORG XMIT: 1122368

Ruth Clark, 95, goes through her daily aerobic exercise routine in Pompano Beach, Florida, on April 24, 2012. (Carline Jean/Sun Sentinel/MCT) ORG XMIT: 1122368

You see, designing is like exercising. We use a mental muscle when we create.

In exercise, there’s what’s referred to as the “3 Rs.” They are Recover, Rebuild, and Replenish (may vary from source to source). We’re really good at the last two. Rebuilding is the workout phase. Where we tone our design muscle by the constant reps, or code deployment and pixel pushing. We build the muscle when we challenge ourselves to widen our design capabilities through learning. For example, when graphic designers learn front-end languages (HTML/CSS/JS) to build out their own designs. And we replenish when we seek design inspiration and learn from others with tools like Twitter, Behance, Forrst, Dribbble, books and magazines.

However, we often neglect the first and most important one, recover. That’s when the muscle actually grows. In exercise, that’s when you rest and sleep. And in design, that’s when you simply breakaway. Ditch the computer, the desk, the office, the building. It’s when you get out, and do nothing.

I skipped that. And I suffered the consequences. I wasn’t going anywhere with the interface except backwards, and that wasn’t only detrimental to my productivity, but also the company’s and our goal of shipping Evomail.

So go outside

2inline_jared_24440201927640_raw

 

Mid-October, I went to Brooklyn Beta with my friend Josh Long from Treehouse. We stayed in my hometown for a solid week. And during that time, I kept my work at Evomail to a bare minimum. And I began to feel the mental tension gradually dissipate. My eyes were opened to more elements of design. I noticed the nice balance of typography and kerning at a local diner. The whitespace on billboards. The famous graffiti. The “artsyness” of Etsy’s office (top-left photo). The intricate nature of Aymie Spitzer’s Neighborwood carvings. Even the geometry of Manhattan. I noticed physical product design. And as a digital product designer, this was a welcomed change.

Unbeknown to me, this “break” gave my brain time to actually formulate answers to questions I had not been thinking about at the moment. That seemingly senseless act of wandering the streets of NY was actually the inspiration I needed most.

On night three of our Brooklyn visit, I opened Photoshop just for the heck of it. I deleted the folder group that held the design elements for this “trouble section” of the interface. Instantly, all the design cues I had noticed from earlier in the week began to muster together and amalgamate themselves into something sensible. Within minutes, the design was finished.

3inline_jared_24441173541414_raw

 

In excitement, I quickly took a before (always have a backup .psd file just in case you do crap) and after screenshot of the section. I then dropped them in Campfire for the team to see. The response was great. I was happy. I signed off. Fact: that section of the interface hasn’t been touched since.

And do nothing

The key to the breakaway is to not look at work. But in today’s society, it’s often encouraged to do just that even while on vacation. I just came back from mine this past Monday, and during my break, I made sure to not even open Photoshop. Why? Because rest isn’t only a physical thing, it’s equally mental. You have to give your brain a break once in a while. That means to not look at anything remotely associated with work.

While in New York, Josh and I ate enough good food to have us longing for another visit, for months. We rode the trains, visited the startups (some work exposure, but hey, we chatted with staff about where to eat next), and simply lived. We didn’t let our work dictate us.

And in the end, that break even helped me get work done. Essentially, no time was lost. I had been recharged, I had recovered. And all it took was a close of the Mac lid.

So when was the last time you got away?

4

I’m on Twitter, Instagram, and Dribbble a lot.

Jared will also be at the re:think design conference on June 8th. It’s gong to be awesome! Why not join us?

map-location2logo_vmastoryboardlogo_sfdw

 

 

What’s the Difference Between UX + UI Design?

Many thanks to AIGA and author Dave Benton for clarifying!

In a world where “flat” web design is ever-present, it can be tough sometimes to tell the difference between a wireframe from a final deliverable. Which is one reason I hear this question over and again: “Exactly what is the difference between UX and UI?”

The devil is in the details, so let’s make sure we’ve got the basics covered first. UX stands for user experience and UI stands for user interface. According to user experience consultant Jakob Nielsen,  a user experience designer is someone who “encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” While Nielsen may be the leading UX guru, that definition doesn’t exactly clear things up for most people.

Loose wireframes courtesy of metajive.

 Loose wireframes courtesy of metajive.

One reason there’s so much confusion around UX and UI designers is because they’re joined at the hip.  The line between where one discipline ends and the other starts is blurry, to be sure, and to add to the confusion, different teams take varying approaches as to how the teams should interact. Over the past few years, UX designers have risen in their roles in the interactive team. Anton Repponen of interactive design duo Anton & Irene,  stated “Before UX designers were a solidified role, UX was still happening. It might not have been good UX, but it was still happening.”

For years web and app designers ruled the roost. What, you may ask, has changed so significantly that you now require a whole new person on your team? The simple answer is that interactive design has evolved from a few page brochure-style site to complex digital products and experiences; as it has grown, so has the role of UX designers.

Let’s break down what, exactly, a UX designer does. The UX designer’s main deliverable is a wireframe. In case you’re not familiar with wireframes (and bear with me if you are), they’re blueprints for an interactive experience. Wireframes essentially lay out all the content for a website or app and establish a visual hierarchy.

Wireframes serve two key roles: to clarify how a site or app will work and to think through the more complex problems. Wireframes are intentionally bland, with grey boxes and a simplified framework in order to provide focus to the content, and in many cases to allow sign off from the client. They are vital in confirming  all the content planned to go on the site so you don’t find yourself  adding “that missing paragraph” in round three of design.

fantasy wireframes

pixel perfect courtesy offantasy

With tools like Axure, Framer, and Invision, UX designers are also adding value for teams and their clients by taking on prototype creation. By creating clickable interactions, a wireframe feels more like an end product and user testing can begin immediately. A great UX designer is looking for innovative and surprising solutions to problems. Prototyping is becoming a bigger part of the UX role, which helps everyone understand the project before there are pictures, nice fonts, and colors in the layout.

The second role of wireframes is to set a framework so UI designers can do what they do best: provide visual emotion and context to the content. Typically, UI designers pick up the design from the intentionally bland black text and grey boxes and explore fonts, colors, sizing, and placement. This is where the content is brought to life by pairing images and copy, refining type hierarchies, and setting things on a grid. UI designers are concerned with the overall aesthetic of the brand and the way it will make users feel.

“Hang on! Didn’t you just say the UX designer planned the hierarchy? Why is the UI designer re-doing all this work?”

This is where the partnership between UX and UI really comes into play. Some teams consider the UX job done once the wireframes are approved, while others have the UX involved all the way through to launch. Some teams make pixel-perfect wireframes, some make sketches, and others leave things loose and open to interpretation for the designers. Like many areas of design, there’s no right answer for this process besides open communication.

With the rise of the UX designer’s role, we’re also seeing new tools arrive on the scene to accommodate this process. Apps like Sketch have created the ability to make one file that can start with UX and go all the way through to design. This has prompted Adobe’s much-anticipated Project Comet, the first product designed to embrace this new paradigm and allow users to wireframe, prototype, and design in one app.

When I think about the difference between UX and UI, I think of left brain vs. right brain. And although the lines can sometimes cross, UX and UI designers really do carry out different jobs. Whether you’re making rough sketches to quickly communicate an idea, or are creating pixel-perfect wireframes, the UX designer is trying to solve functional problems, plan content, and organize site data. The UI designer is responsible for conveying the brand and making the site a more pleasant and human experience.

Yes, we might see some overlap from time to time, but the inclusion of both makes for far better projects and superior outcomes. (And if you’re looking to up your UX game there are loads of resources, like this wireframe inspiration post on Medium.)

 

This article was originally published by AIGA. You can see their story here. And join us on June 9 for an AIGA SF Design Week event called re:think design conference for more incites into our design world.

logo_sfdwmap-location2logo_vmastoryboard