5 Lessons Learned Designing a Project to Empower Young Creatives


Creative Cloud

p1324-head

I have been designing and building user experiences for Adobe products for many years now. My mission has always been centered on our users; making their lives easier and more successful. Over time, this focus on UX has driven me to be more and more of an analytical problem solver. But at the same time, I consider having an intuitive sense of aesthetics a core element of my character. These two things are often in conflict and I sometimes worry — am I still creative?

Fortunately, I’ve recently had the opportunity to meet and talk with young creatives all around the world who are fearless, brilliant, and very creative.

For the last three months I have been a part of Project 1324, an Adobe initiative that supports, connects, and amplifies a global community of emerging artists who are using creativity as a force for positive impact. We’re looking at ways we can help these young creatives – aged 13-24 – develop their ideas and impact change across the globe. Project 1324 has launched the Sundance Ignite “What’s Next?” short film challenge, which is just the first project from our team: there are many more exciting developments on the way.

Adobe Design was involved from the beginning of the design process, and like any good UX project, we kicked things off with research. We wanted to better understand how these young people think about creativity and what they need to be successful. We’ve done a deep dive into how our target demographic behaves, how they use the web, and what kind of things they’re into.

Here are some of the things we found that have influenced our design work:

1. Creativity plays an important role in the lives of youth. Youth value creativity.
They consider themselves creative and would like to be more so, but common barriers to creativity are lack of confidence, fear of criticism, not knowing where to start.

2. Creativity is an impetus for social change.
Many young people are eager to make a difference. A vast majority of youth agree that creativity helps create positive change in the world and they have a responsibility to make the world a better place.

3. Youth are motivated to enjoy, learn, and grow from creativity.
Creativity is self-sustaining. Young people enjoy being creative, so they learn new things to get better at it. This in turn helps them grow as a person. Growing helps them enjoy being creative, and the cycle continues.

4. Teenagers (Gen Z) are different than young adults (Millennials) when it comes to navigating websites.
Young adults are very task-oriented. They want something easy-to-use so they can finish their task quickly. They demand simplicity in interfaces and prefer clean, streamlined web design. They are very confident in their own ability to navigate interfaces, so they don’t hesitate to click around and explore. Teenagers, on the other hand, like to play games and watch multimedia and often want something more playful and entertaining. Unlike young adults, they are hesitant to click on unknown elements.

5. Young adults care A LOT about a website’s ‘tone of voice.’
Friendly, casual tones work really well for young adults, but if you try to be ‘too cool’ or ‘too casual,’ they react negatively. They tend to skim pages for keywords that strike their interest, so using words that are common to their vocabulary is critical to keeping them interested.

The Sundance Ignite challenge is serving as a stepping stone for our team to see how we can  build a bigger picture for young creatives to connect, get inspired, and learn from others who project their voices through their creation.

Being part of the Project 1324 team has been an eye-opening opportunity for me as a UX designer. Meeting and talking with so many young creatives who are advocating for a better world has left me inspired! By doing my best work to help them turn their dreams of changing the world into reality, I’ve found a way to reconnect with my own creative side.

Earplay and the World of Voice UX Design


Creative Cloud

earplayheader

The world of voice UX design is exploding as we’re increasingly talking to our mobile devices, from personal assistants like Siri to smart speakers like Amazon Echo. Earplay’s team – including experienced writers and game designers Jonathan Myers, CEO, and Dave Grossman, CCO – is taking voice UX design to a new level. Their stories for mobile devices use interactive conversation and simple voice commands that create an eyes-free, hands-free interactive experience.

founders

Founders of Earplay

The Emotional Power of Sound Brings People Into the Story

The team’s first release was Codename Cygnus. “The goal was to take the powerful emotional intimacy of audio, the same one that caused widespread panic when War of the Worlds was first broadcast, and enhance that experience so that you can imagine yourself inside the story, connecting with the other characters,” explains Myers.

Cygnus

Cygnus

Approaching UX Design Like Creatives, Not Engineers

Voice UX designers are often engineers focused on speech recognition. As designers and writers, Earplay takes a different approach. “Simpler design and better user guidance in the prompting and solicitation of speech may work just as well, or better, without needing the excess processing of language,” says Myers.

High-quality audio experiences start with your voice selection. “A recorded human voice is going to provide a better and more intimate interaction for someone whose sole experience is listening and responding. A well-directed voice actor captures the right nuance and subtext so that the meaning, guidance, and solicitation of speech from a user becomes crystal clear.”

File quality is essential, and having the right creative and tech tools lets the Earplay team deliver a world-class audio experience. “By far, our most significant use is with Adobe Audition CC for sound file editing, cleaning and processing.”

Advanced Tips from Interactive UX Story Design

According to Grossman, the design process starts with mapping the story and then goes through highly iterative stages of story refinement, writing, recording, and extensive testing. “What should a user interface be like when it needs to be presented entirely by audio, and how should it distinguish itself from the rest of the audio that the audience is hearing? Or, how can it blend in effectively and still do its job?”

The writing and extensive testing with audiences are key. “You have to pay attention to how you word things when you set it up, because the phrases being listened for can’t sound overly similar to one another – and what the software finds ‘similar’” is sometimes not the same as what a human being would,” advises Grossman.

It’s also important to think carefully about what audiences need to say in order to prompt action. “Keep your voice intents short enough that the audience can remember them, but long enough to be easily distinguishable,” Grossman suggests. “Develop a strategy for prompting the audience for input and make sure that strategy is unambiguous. For instance, if you have characters addressing the audience directly with questions they’re expected to answer, don’t also give the characters any other dialog that could be mistaken for a question.”

Managing Parallel Audio and Voice UXs

An important design challenge is creating a parallel visual UX that supports, yet doesn’t detract from the voice UX. Earplay’s designers use Adobe Creative Cloud tools such as Photoshop and Illustrator for their visual user interface design.

“When you design the voice UX for a mobile app, anything that draws attention to the screen during the experience is probably an unnecessary distraction that detracts from the total experience. A good portion of that experience is taking place inside the mind of the user, so you’re directing their attention away from what’s important if you focus them on the screen,” says Myers.

Ultimately, the team believes that a pared down visual UX is critical unless it adds to the functional voice experience. Myers adds, “It’s best not to provide anything beyond functional audio player buttons or return to menu options. The one exception is that we offer the ability to tap their speech decisions after a prompt when they’d rather not speak aloud. For example, in a public place they may want to keep silent.”

The Power of Prototyping: A Roadmap for Creating the Best Products


Creative Cloud

talin_1800x1013

Lessons Learned from Adobe XD’s Lead Designer

Prototyping is the key part to solving any design challenge. It’s important from the minute you start designing: you have to make your product real in some way. When designing Adobe XD, we knew the only way we were going to turn a good product into something great was by prototyping. By continually testing our ideas and getting feedback, we were able to make XD better. We’ve been able to tell a better story, and find a better design solution each time. You can too.

My design mantra is simple: make, show, learn, repeat. You should be testing your design as quickly as possible, any way possible: sketch it, print it out, mock it up, pin it up on a wall or on a device and share it with others. Only testing and getting real feedback will take you where you need to go.

Here’s my road map for creating great products and solving inevitable design problems along the way:

  1. Start with “why?” What do I want the user to do here? How are they going to feel successful?
  2. Sketch it out. Draw it on a whiteboard, in a sketchbook, or right on your device. Define the backbone of the user experience flow. You want to see the big moments wired together.
  3. Now test it! Pin up on the wall, get it onto your target device, and ask for feedback. If your core experience doesn’t hold together, no amount of visual polish will make it any better.
  4. Think about the details. Once you’ve refined your flow, start adding more complexity and visual polish. Then test it again!
  5. Reiterate and refine. Continue to take that feedback and put it right back into your design. Then go back to step 3, and do it all again.

Do all of this early in development. The quicker I can share my product with real users, the quicker I can learn and make my design better. Always test before you ship: that’s the biggest part of my process. The design team at IDEO has a saying: A prototype is worth a thousand meetings.

How to Prototype and Win

There are a few key steps to take to make sure you prototype in the most-efficient, most successful way:

  • Turn to your colleagues and other designers for feedback first. Get it in front of them quickly and hammer out the biggest ideas early in development.
  • Ask yourself ‘who is my user, and what problem are we solving for them?’ Find those people and test, test, test! You may have empathy for user, but you and your fellow designers are not the average users.
  • Test and validate with your users. They are the ones who are going to give you the knowledge you need. Sometimes they’re going to give you great feedback and it’ll make the design better. Other times they’re going to give you terrible feedback, and you have to decide whether to follow their advice or trust your gut.
  • Test early, and test as often as your resources allow. Take those learnings and feed them back into your design to make them better and better: the more you can do that, the better you’ll be.

Don’t sell your product short

Prototyping has always been a challenge for designers who create digital tools: it’s easy to start designing and get locked on the screen. Until you’ve prototyped and ‘held your product in your hands’ you haven’t figured out the big spacial relationship problems that are key to solving any user experience challenge.

Prototype like a Pro

If you continually prototype, test and refine your design, you’ll have success. The best feeling is when your user forgets he or she is looking at a prototype. It means they’ve given themselves over to the experience. This provides your user with the most honest engagement, and in return they’ll give you the most reliable feedback before your product hits the market for real.

With Adobe XD, we’re making it easier to go from an idea to prototype. As designers ourselves, our goal is to create a design tool with unmatched prototyping capabilities that let you design at the speed of thought.

At its core, Adobe XD is built around the simple design process ‘make, show, learn’ – this translates to ‘design, prototype, share’ with the app. In world that’s continually changing and redefining what experience means, this process remains steady. When you’re designing applications with hundreds of screens on multiple devices, this prototyping mantra becomes a crucial part of the puzzle.

XD Essentials: Typography in Mobile Apps


Creative Cloud

type-header

Communication plays a vital role in design — in order to be successful your products have to clearly communicate their intent and purpose. When we talk about communication, we usually mean text, because the purpose of text in your app is to establish a clear connection between the app and user, and to help your users accomplish their goals. Typography plays a vital role in this process; good typography makes the act of reading effortless, while poor typography turns users off.

How do you make typography work for you and your users, and not against you and them? Unfortunately, there are a lot of conflicting opinions out there about best practices for typography on mobile, and there isn’t one strict set of rules that apply in every case. However, there are several things you can do to make sure the typography is honoring the content and improve readability on mobile devices.

Font Size, Line Length, and Space

Three of the most important considerations when designing type for mobile devices are font size, line length, and space.  Type must be large enough to easily read, and there should be sufficient space between lines.

Font Size

The size of your text has a huge impact on the experience of reading something on screen. It takes the user much longer to process smaller text. Text that is too small can cause the reader to strain, because it’s usually hard to find the beginning and end of lines of text when there are too many letters to digest at one time. As result, users will skip most of the information presented. This is especially true for mobile, where tiny type on a small, bright screen can be a real headache for users.

Left: Almost overlapped text. Right: Good spacing aids readability. Image credit: Apple

However, text that is too large can also cause problems. If a line is too short the eye will have to travel back too often, breaking a reader’s rhythm. This makes the message more difficult to comprehend.

In order to make your text legible you need to find the right balance between  font size and line length.

Practical tip: There is no simple formula for selecting a font size, but a good starting point is Apples and Googles guidelines:

  • For iOS you should use text size that’s at least 11 points so it’s legible at a typical viewing distance without zooming.
  • Minimal readable font size for Android is 12 sp, but it is highly recommended to use at least 14 sp for main text.

Line Length

The generally accepted, optimal length of a line of text for comfortable reading is around 50-60 characters, including spaces (“Typographie”, E. Ruder). This measure is good for desktop apps, since it’s rare that 60 characters will extend to the edge of a desktop screen, but on most mobile devices 60 characters extends beyond the boundaries of the screen. Also lines with 60 characters on mobile screens usually require fonts that are too small to be easily readable.

There’s no commonly accepted standard for measure on a mobile screen, however a good rule of thumb for line length is to use 30–40 characters per line for mobile (source).

Left: Lines that have too many characters can be difficult for the eye to follow. Image credit: usertesting

Left: Lines that have too many characters can be difficult for the eye to follow. Image credit: usertesting

 

Practical tip: Font-size is generally more important than line length so you should always go for a good font-size first. If it can be combined with an optimal line length, then that’s obviously the ideal solution.

Spacing

When it comes to mobile screens, space is a key consideration:  the smaller the screen size, the more important it is that you give letters room to breathe. By adding a little space to text — by increasing line height or letter spacing — you are helping users better interact with the words.

Practical tip: Smaller type is easier to read with additional spacing. Thus, add extra space – maybe as much as 10 or 20 percent – between lines of type.

Left: Almost overlapped text. Right: Good spacing aids readability. Image credit: Apple

Left: Almost overlapped text. Right: Good spacing aids readability. Image credit: Apple

“Consider using paragraph spacing as well since paragraphs may look longer on smaller screens. This additional space gives readers the perception that text is not too dense and will feel easier to read.”
– Carrie Cousins

Example of good spacing in Medium app for iOS. Image credit: Medium

Example of good spacing in Medium app for iOS. Image credit: Medium

Color Contrast

Contrast is particularly important when designing for mobile because of the potential for distracting glare when using a device outside. The two most common misconceptions about color contrast are:

  • The first misconception is too much contrast is harder on the eyes. Thus, shade of grey is more accessible. As a result we get grey text on a grey or white background. However, a text color that is too similar to the background color is hard to read.
The neutral grey of this page is pleasant to look indoors, but outdoors it looks not so good, because low contrast on the screen together with screen glare makes copy hard to read. Image credit: usertesting

The neutral grey of this page is pleasant to look indoors, but outdoors it does not look good, because the low contrast on the screen together with screen glare makes the copy hard to read. Image credit: usertesting

  • The second misconception is higher contrast is better. Provide below is a black on white combination as a proof of this statement. In practice, text with too much contrast can also be hard to read. This is especially true of light-colored text against dark backgrounds. For example, forcing users to read white text on a black background for a long time can strain the user’s eyes.
    image10

Even people with perfect vision experience eye fatigue from staring at white text on a black background for too long.

It’s worth saying it again: the most important property of the text in your app is readability. Designers often like to use low contrast techniques, because low contrast makes things look beautiful and harmonious, but beautiful isn’t always the best for readability. When the text is hard to read the experience will be far from good, and the design simply won’t work.

Practical tip: The right amount of contrast is a tricky thing. Because of the variation between screens, a color contrast that seems good enough on a designer’s monitor could appear much different on a user’s screen. However, the situation is not hopeless — there is a good place to start and it’s a WC3’s Web Content Accessibility Guidelines.

The WC3 sets minimum standards for contrast ratios, which represent how different a color is from another color (commonly written as 1:1 or 21:1, the higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors). The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferred.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
    image05

    These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors.

    These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

    These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

Ensure sufficient color contrast for your text for best readability. You can use a contrast ratio tool to quickly find out if you’re within the optimal range.

One App, One Typeface

You should try to use a single font throughout your app. Mixing several different fonts can make your app seem fragmented and sloppy. When designing an app think about how can you make the typography powerful by playing with weight and dimensions, not different typefaces.

Left: Negative effect of mixing several different fonts. Right: Using one font and just a few styles and sizes. Image credit: Apple

Left: Negative effect of mixing several different fonts. Right: Using one font and just a few styles and sizes. Image credit: Apple

Practical tip: A safe bet is to rely on the platform’s default font.

 
 

Apple uses the San Francisco family of typefaces to provide consistent reading experience across all platforms. Roboto & Noto fonts are the standard typefaces on Google Android and Chrome.

iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets. Image credit: Apple

iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets. Image credit: Apple

Roboto font. Image credit: Material Design

Roboto font. Image credit: Material Design

 

  • If your design requires not standard typeface, consider to choose a typeface that is legible (not tough to read). It’s very important to check typeface works well in multiple sizes and weights to maintain readability and usability in every size. A good place to start is Adobe Typekit where you can find a large collection of legible fonts.
Image credit: Adobe Typekit

Image credit: Adobe Typekit

Importance of Testing

Don’t forget about testing. Once you’ve made your typography choices, it’s absolutely necessary to test them out with real users, on the most popular device screen widths. The more devices you try text styles on, the better you’ll understand how it looks and works for users. If any of the test participants have trouble reading your copy, then you can bet your regular users will have exactly the same problem.

Practical Tip: You should use A/B testing to find out how your typography choices reflected in your conversion.

Conclusion

As Oliver Reichenstein states in his essay, Web Design is 95% Typography: “Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.” This statement is relevant not only for web, but for all UIs, because it encapsulates the importance of readability. Typography is the backbone of a design. By optimizing your typography you’re also improving your UI.

Meet the Designer: Eileen Beredo


Creative Cloud

eileen

After a brief stint as a 9-to-5er, Eileen Beredo has been a successful freelance designer for nearly a decade. The decision to stay self-employed has allowed her to dip into a range of industries and disciplines—including branding, UX and UI work, visuals, publishing, websites, and app and product projects—while working from her home base in San Francisco, and exploring the globe with her trusty Macbook. We caught Eileen in the Bay Area and chatted about traveling, tools of the trade, and how bagels helped her find her current creative career.

What drew you to UX/UI design, and how did you get your start?

I’ve always been a visual person, but in high school I got my first intro to the idea of being creative as a career. Back then I worked at a bagel shop and would write out the menus on the chalkboard; my boss told me there was an industry—basically graphic design and typography—where I could develop those skills. At that time, in the early 2000s, the field was really evolving. My parents weren’t exactly open to pursuing something in the arts, but after I got into a selective program at the University of Washington, I decided I was onto something and that I was going to go for it.

How does Adobe Creative Cloud fit into your creative process?

I start as low-fi as possible, with quick sketches on pencil and paper. Then I use Photoshop and Illustrator to make things beautiful.

Let’s look at one of your personal projects. What was your process creating Wanderful Philippines—an app for connecting travelers as they’re on the go?

I had just gotten back from two months traveling around the Philippines and Japan, working remotely as I went. I met so many people along the way who I never exchanged info with; I kept thinking about them all when I got home, wishing I had reached out. That’s where I got the idea for this app—a resource for people to make real life connections wherever they go in real time with other wanderers and digital nomads who might want to meet up, and/or share helpful info that will make exploring easier, safer, and more fun.

Wanderful Philippines by Eileen Beredo on Behance

Wanderful Philippines by Eileen Beredo on Behance

Wanderful Philippines by Eileen Beredo on Behance

Wanderful Philippines by Eileen Beredo on Behance

Adobe XD had just launched with a Creative Jam themed around “travel,” so I thought it was a good idea to put something together quickly using the platform. It only took minutes to pick it up, and I was surprised by the quality I was able to achieve in a couple hours. The idea of an all-in-one tool is a real game-changer. It lets me iterate quickly, making UI changes that instantly update my prototype; there’s nothing else out there that allows me to do that.

Wanderful Philippines by Eileen Beredo on Behance

Wanderful Philippines by Eileen Beredo on Behance

What excites you most about the future of UX/UI design—both in terms of creating it, and engaging with it?

It’s a really exciting time to be a designer right now. We’re moving from more traditional platforms into the digital realm, and the technology is improving so quickly; I can’t even imagine the possibilities for my career, in terms of being able to help people and solve problems. I love what I do. My job never feels like a “job.” If I can make anyone’s life better with my work–either by a little or by a lot–that’s incredibly rewarding.

As for the near future, recently I’ve been working hard on iOS app called Spin to guide people through the auto shopping experience and help them find the best car for them. Our Beta version will only be available on iPad this fall (and  I’m planning to design the mobile version using Adobe XD!). We’re looking for Beta testers at the moment, so let me know if you’re interested!

What bit(s) of wisdom can you share with creative folks who are interested in becoming UX/UI designers?

Our field—and all the tools and apps for doing UX and UI design—is just changing so quickly that it’s really important to keep an eye on and explore the latest releases as they develop.

Whose UX/UI work do you look at and go: “WOW”?

I’ve been lucky to work with the talented designer Patrick Durgin-Bruce of Ultravirgo Creative, a design studio in NYC. I admire his passion to work on purpose-driven design projects, and he has an impeccable attention to detail. I also learned a ton from him about what it takes to run your own design studio.

Whatever It Takes campaign for the National Parkinson Foundation by Ultravirgo

Whatever It Takes campaign for the National Parkinson Foundation by Ultravirgo

Best tunes for getting into a creative flow?

Lately I’ve been really into Odesza, an electric duo from Bellingham, Washington. Very chill.

Fave follows:

Follow Eileen Beredo on: Behance, Twitter, and Instagram

Hey designers: We’d love to feature you next! Share your prototypes on Behance for the chance to be featured in Adobe XD’s Meet the Designer series. Don’t forget to tag them with #MadeWithAdobeXD and select Adobe Experience Design under “Tools Used.”

The Role of UI/UX in Solving Self-Driving Car Challenges


Creative Cloud

selfcars

Self-driving cars are intriguing to tech and automotive fans alike, but recent crashes have opened up discussions about safety and building consumer trust. Fast Company’s Co.Design recently advocated that a focus on UX design could solve these problems – and many experts agree.

To get the inside scoop on how UI/UX could play a key role in solving self-driving car challenges and bring these to market, we talked to Pascal Soboll, current head of Daylight Design Europe and former IDEO executive. He shared his insights, which come from a long-time passion for the automotive industry and hands-on experience with car design and self-driving cars.

The Current State of Self-Driving Cars

According to Soboll, “The technology is developing faster than anyone would have thought just a few years ago.” He believes that most people are still focused on the technical feasibility of self-driving cars, but the industry is far past the point of “what if.” In fact, several companies have recently started public trials, including a self-driving taxi in Singapore and a self-driving Uber in Pittsburg.

Can We Trust Driverless Cars?

In many ways, the biggest question is trust. Can we trust a machine enough to hand over the controls and to be on the road while other driverless cars are in operation? Studies suggest that design may hold the key. Last year, Hyundai and Artefact teamed up to fight for the future of autonomous cars. Artefact believes that incidents regarding self-driving car safety proved three things:

  1. Cars are not yet capable of driving themselves.
  2. Humans are not ready to fully trust self-driving cars.
  3. The automobile industry needs to design self-driving cars in a way that inspires trust in humans.

Building consumer trust is at the heart of getting people to buy – and operate – these vehicles. Soboll agrees, and mentioned that in order to gain public acceptance, a new set of behaviors and systems need to be designed: “It’s really hard to build trust in a perfectly working system if you don’t really develop an intuition about what that system actually is capable of. If there is a self-driving car, and it does its job well, you’re still wondering, ‘Well, but what if a critical situation occurred?’”

What is the Role of UI/UX Design in Self-Driving Car Challenges?

Soboll believes that design plays a key role in overcoming the challenges currently faced in the self-driving market. “I think that UI/UX designers will need to see their job as not just designing for ease of use, but also designing for a learning curve and transition.” After all, most of the current issues with self-driving cars come back to people being able to trust that they can work. As Fast Company pointed out, “new technologies should do not only what they promise, but what we imagine.”

Soboll offers some practical tips for how design will influence the future of self-driving cars:

Overcommunication

When a person gives up control behind the wheel, they still need a signal that the computer is seeing what they’re seeing. A human rider would prefer a notification about a potential safety hazard, even if the self-driving car can handle it on its own.

People also appreciate knowing what the car is about to do, so they can anticipate what’s about to happen. Besides drivers, it’s also important to communicate to pedestrians when it’s safe to cross in front of a self-driving car. Co. Design muses that, “before the cars of the future can become our pilots, they need to prove themselves as our co-pilots.”

Manual Controls (for now)

On steering wheels, Soboll says, “Right now, driving or even getting from A to B in a personal car means you are manually steering that vehicle. And that’ll change, and that’ll be a transition. It’ll be a new experience for drivers, who ultimately become passengers. It’s a new set of behaviors and a new set of systems that you’ll need to trust, potentially trust with your lives. And that’s something that will need to be designed as well.”

Soboll notes that the dashboard design will be critical. “We will see the dashboard changing slowly. But we will see things like the screens growing. We will see things like the steering wheel eventually being an optional thing by maybe disappearing into the dash and only coming out when needed.” Eventually, manual controls will likely be phased out in exchange for screens that are meant to share information without needing a passenger to act on it.

Incremental Steps

There are already cars on the market with crash-avoidance and self-parking technology that in some ways are “self-driving.” The next step is to perfect these systems, create more, and connect these features into a fully autonomous vehicle.

In regards to UI/UX design for self-driving cars, Soboll says, “I think we’re going to see the car becoming more complex before it becomes easier, so to speak. We’ll see a lot of doubling up of functionality between manual and automatic modes.” Eventually, it will all become a digital experience, but it will take years to fully develop the safest self-driving cars.

We’re on the brink of a fundamental shift that relates to all areas of the automotive industry: parking, car usage, and even ownership. Self-driving cars will play a role so much larger than just a new way to get around. Soboll asks, “If my attention isn’t needed for driving as much anymore, then the question is, “Well, how do I work effectively in the car?” It’s exciting to consider the possibilities a society of fully automated cars can bring about. To get to an acceptable standard for autonomous cars, using UI/UX design is key.

September Update of Adobe Experience Design CC (Preview)


Creative Cloud

hero-image

After another month of solid feedback, we’re excited to announce that Preview 7 is available today. Check out what’s new by downloading it here, or updating via the Help menu (Help > Check for Updates).

Today’s update lets you:

  • Preview designs and prototypes in real time with new iOS and Android mobile apps
  • Lock aspect ratios to preserve an object’s proportions when resizing objects on the canvas
  • Zoom to any selection on the canvas using the new “Cmd+3” shortcut
  • Create, move or remove the “fold” (blue dashed line), so as to define a customized viewport height for vertical scrolling in prototypes
  • Use the new Slide transition, creating a parallax effect
  • Share unique URLs to take people to specific artboards in web prototypes
  • Explore a friendlier first-time experience, along with an improved sample file

What’s New in this Update?

Preview designs and prototypes on iOS and Android devices, in real-time

Meeting after meeting, meetup after meetup, on social and in person, we hear that designers need to preview their work on mobile devices. Not only to get a better sense of how items are placed or sized, but also to test the experience as a prototype. Seeing a design on a computer screen is one thing, seeing it on a mobile device is completely different and much closer to reality.

We’re thrilled to announce that we now have Adobe XD companion apps for iPhones, iPads, and Android phones (tablet support is on the way). No other app on the market lets designers preview designs and test prototypes at the same time, as part of one integrated workflow. All you need to do is connect your mobile device to your computer using a USB cable (wireless support is coming later), open an XD project on your desktop and boom! You’ll see your project reflected on your device, in real-time — no refreshing needed.

Please download the Adobe XD apps from the App Store for iOS or the Google Play store for Android and let us know what you think.

Aspect Ratio Lock for constrained width and height

This enhancement allows you to lock aspect ratios while resizing objects on the canvas. This setting is preserved per object on the canvas.

Regular resizing of a single element.

Resizing a group using the property inspector with aspect lock adjusts both width and height at once, while preserving correct proportions and positions of children.

Resizing a group using the property inspector with aspect lock adjusts both width and height at once, while preserving correct proportions and positions of children.

Zoom to Selection (Cmd + 3)

You can now zoom to any selection. Just make a selection and use the new shortcut (Cmd+3) to zoom directly to the selection. You can also find the new shortcut listed under the View Menu.

Viewport height for artboard scrolling

This update adds a “Scrolling” pane to the properties inspector giving you the ability to make any artboard vertically scroll or not. Previously, scrolling was restricted to artboards created from a template. When an artboard is selected, you will see the scrolling options for “Vertical” or “None”. If “Vertical” is selected, you can also change the viewport height. The dotted blue line on a focused artboard represents the “fold”, the visible area before scrolling starts.

New transitions: Slide Left, Slide Right, Slide Up and Slide Down

In last month’s update, XD changed the name of our “slide” transitions to more appropriate “push” transitions. In this release, we are introducing true slide transitions where the incoming artboard slides over an existing artboard. This results in a slight parallax effect when the existing artboard exits. Check out last month’s blog post for a visual explanation of the differences in these transitions.

You can download the XD file used in this post or see its web prototype.

Unique URLs for specific artboards

You can now point to specific artboards when sharing web prototypes. Just go to the artboard you want to share, copy the unique URL in your browser, and send it to others. Anyone with the URL will go directly to the artboard you selected.

New onboarding experience

Many of you have already tried the Campvibes sample file, which is easily accessible from the Welcome Screen. We’ve revamped both the Welcome Screen and the sample to be cleaner, but more importantly, helping first-time users get up to speed quickly with XD. If you have a chance, check it out and let us know if you think it covers the basics!

Want to know what’s next for Adobe XD?

We’re working on a number of major features as part of our next release, which we’ll be showcasing and delivering at MAX 2016, Adobe’s largest creative conference in the world.

We’ll share progress on a number of exciting new areas we’re tackling, and of course there’ll be few surprises during the conference. Don’t miss it! The XD team will be there and we can’t wait to talk to you in person.

Make sure to sign up for sessions and labs for Adobe XD. Sessions, labs, and creativity workshops are where you’ll gain the knowledge and skills you need to stay competitive and the inspiration you need to create your best work.

Thank you

Adobe XD 💜 Design Community

Designers from all over the world are influencing how we prioritize features, providing fuel for us to rethink and challenge existing mental models, aiming to deliver the right value to our customers. This work includes tracking multiple feedback channels daily, including UserVoice, Public Forums, Private Prerelease (apply now!), as well as running customer meetings and demos.

Thank you for all the feedback!

Social

You can follow us @AdobeXD for updates or reach the team on Twitter using the #AdobeXD. You can also talk to us using Facebook where we answer questions during live sessions, share videos and other updates.

#MadeWithAdobeXD

While sharing your prototypes on Behance, don’t forget to tag them with #MadeWithAdobeXD and select Adobe Experience Design under “Tools Used.”

Adobe XD Private Prerelease Program Application

Interested in accessing XD’s latest and greatest features before they make the public releases?
Every month, we’ll select 50 people who complete this application to join our Adobe XD Private Prerelease Program. For instance, Layers, Symbols, XD for Windows, and much more, will land first in prerelease. Apply now!

Please download the latest version of Adobe XD and let us know what you think. Looking forward to hearing your thoughts.

Cartoon Donald Trump Delights Audiences on The Late Show with Stephen Colbert


Creative Cloud

cartoon-trump

Fans of The Late Show with Stephen Colbert have no doubt enjoyed his regular conversations with Republican nominee Donald Trump—the cartoon version, that is. A frequent and hilarious guest, cartoon Donald Trump talks with Colbert about his contentious relationship with the media, his plans for the Republican convention, and his strategy to win over Sanders’ supporters.

Cartoon Donald Trump is the brainchild of Lead Animator Tim Luecke and Senior Digital Producer and Writer Rob Dubbin. Veterans of The Colbert Report, both have enjoyed creating something outside the realm of what people expect to see on television—real-time interaction with an animated character. We talked with them about how Adobe Character Animator in After Effects CC helps them break new ground in late night television.

Adobe: How did you first get interested in working with Adobe Character Animator?

Luecke: I’d been reading about Character Animator before the initial preview launch. As someone who used to build complex After Effects rigs to accomplish 2D animation, this sounded like a tool that would make my life easier. The day the first preview launched I downloaded it, rigged up some characters I’d animated in After Effects, and showed them around the office. Everyone was excited but we didn’t know what to do with it at the time. Six months later we decided to look into it again and it was exponentially more sophisticated.

Dubbin: We started up a little skunkworks to figure out if it was something we could do on the live show. We looped in producers, crew, the control room, and the director to set up a cartoon that Stephen could interact with from his desk.

Adobe: What were the previous challenges working with live animation?

Luecke: On The Colbert Report, we always wanted to do animated bits, but they required so much preplanning and preproduction. We did one three-and-a-half minute short that took a few months to create. We had aspirations to do more, but it’s so hard to think ahead three days, let alone three months with late night TV.

Dubbin: I worked on a series of cartoons on The Colbert Report that were tightly scripted and highly orchestrated. But whenever Stephen tried to interact with a cartoon, the delay between the animation and his jokes always bugged me. You just didn’t feel like the two characters were in the same room with each other.

Adobe: When did you realize you could add live animation to the show?

Luecke: The big breakthrough moment was when we figured out we could rig it so the character was actually in the physical studio space with Stephen live.

Dubbin: In March, we came up with the silly idea of creating an Irish ancestor for Stephen to talk to. Tim rigged up a cartoon and we tested it in our spare time. It was successful in practice but didn’t end up airing for St. Patrick’s Day. We had a hiatus right after that and Tim took it upon himself to create a cartoon Donald Trump with his vacation time.

Luecke: Brian Stack, one of our excellent writers who is also a voice actor and improviser, does a great Trump voice. It seemed like a good idea to have a cartoon Donald Trump at the ready for Stephen to talk to whenever he wanted. For me, it was largely an opportunity to dig deep into the program and see how sophisticated we could get with it.

Adobe: What was the first animation you did on the show?

Luecke: We did a live cartoon bird in one of the cold opens. We ran into a couple of glitches when streaming and the next day we contacted Dave Simons, one of the main creators of Character Animator. The team at Adobe responded quickly and offered help. They added us to the prerelease program and we’ve been working closely ever since to make sure we’re working on a build that will work the best for our needs. We did the cartoon bluebird on Monday and on Wednesday we did a full-fledged cartoon Donald Trump.

Adobe: Tell us about the first cartoon Donald Trump segment.

Dubbin: It all happened pretty quickly. I was in Tim’s office playing with the character and noticed that when you angled away toward the edge of the camera field the cartoon recoiled as if it were deathly afraid of something. In the news that day was a story about Trump’s security removing a reporter because she was holding a ball point pen that Trump speculated could have been a little bomb. I thought if we had Stephen hold a pen toward cartoon Donald Trump it would be fun to watch the cartoon recoil in fear.

Luecke: We performed it in front of Stephen on a laptop with Brian doing Trump’s voice and one of the producers holding the pen. It got a good laugh and we made the decision to do it that day. It’s both weird and wonderful to have live physical comedy with a cartoon character.

Adobe: What do you like about working with Character Animator?

Dubbin: It’s really breathtaking to see the possibilities Character Animator opens up for someone like Tim, who is so talented and prolific. The software is a magnifier of his talent and ability to turn things around in a day. As a writer, I love the gestures. Brian does the voice and the shoulders and another writer does the control of the gestures, keyboard triggers, and whatever other surprises we have baked into the puppet. Watching the way a performer can use those expressively is enjoyable.

Luecke: Character Animator gives us freedom to be really nimble and swift. Once you have a puppet you can try out a gesture in Adobe Photoshop CC and within five minutes see if it works in Character Animator. I feel like I’m building a cool toy; when I hand it off to the team they can spend 15 minutes and come up with something I’m not expecting them to do.

If needed, we can also rewrite a whole segment between rehearsal and taping and the cartoon will act accordingly. It’s been a perfect fit for this world of improvisation that we live in where things get changed at the last minute.

Adobe: Is there anything that has surprised you in Adobe Character Animator?

Luecke: As soon as I figured out you could do frame by frame animation and trigger it in the program live—that really made it invaluable. Recently we put a Rastafarian hat on Trump and the ease with which we could make the dreadlocks dangle and put physics on them was amazing. It makes it look like I’m doing something really cool, but I’m just using the dangle command in Character Animator!

Adobe: What else do you have planned leading up to the election?

Leucke: We recently introduced Cartoon Hillary Clinton during our live DNC shows. It was very nerve-wracking from a production standpoint, because it was the first time we used Character Animator to do a live-to-air bit. But it worked great. Half an hour before we went live, Bill Clinton made a speech that drew a contrast between the “real” Hillary Clinton and the “cartoon” version of her. Thankfully, I’d been working on a Cartoon Hillary, and we had a writer, Jen Spyra, who could do the voice, so we got to comment on the speech less than an hour after Bill delivered it. The audience loved it.

Adobe: What does Stephen think of these special guests?

Dubbin: His joy interacting with a cartoon that is both in front of him and not in front of him is palpable. He thrives on that sort of thing.

Luecke: We got some big hugs!

Helpful links: 

UX Management: 7 Steps to Set up an Ongoing Training Process


Creative Cloud

uxmanagement

A while ago, I took a contract role for a startup company. The design lead sat with me for our first meeting to discuss about the current state of the team and his expectations.

Being new to the team, I hoped to be enlightened by his vision for the design team. But the reality was a bit different. It turns out his expectations were that designers and developers were to drive and inspire the leadership. His beliefs were that senior designers and developers should have the experience to guide the leadership into setting up goals and success metrics.

The outcome was that, in the months after I started, the motivation level of the team plummeted, and the delivery suffered.

Why did that happen? The design manager’s productivity is strongly tied to his team’s productivity, and the productivity of the team isn’t always directly proportional to the seniority and the experience of its designers. Hiring the best talent, the best researchers and designers is not enough to deliver innovative products through a systematic approach.

The building blocks of good UX management

In an organization new to implementing UX design processes, having great designers on board definitely helps, but they just serve as the foundation that a good UX manager needs to build on.

The next step that a design manager needs to take is to empower the design team with decision making. Mike Monteiro, in his book “You’re my favorite client,” stresses the importance of the authority a manager needs to give their team of designers. By trusting the team to make the right decisions, motivation levels increase as individuals want to do their jobs well and prove themselves worthy of that trust.

Another important factor that weighs a lot on the success of a design team is to define a base for performance management. In this sense, good UX managers need to define what design success looks like, they need to set up expectations straight from the beginning in order to get the maximum potential from their team.

Knowing what success looks like, the team will be able to adjust course if the metrics aren’t achieved. Otherwise, by constantly fighting a never ending battle, they will feel discouraged and demotivated to try and achieve invisible goals.

Hiring the best designers, empowering them to make decisions and setting up clear expectations are the first actions t a UX manager needs to take in order to lead a successful team.

But the work doesn’t stop here. The manager has to build a strong vision for the UX team and he needs to transform it into a shared cause.

Involving the team to achieve this shared vision and helping the team deliver the best work they are capable of, needs clear guidance from the manager, it can’t be externalized.

The manager will need to increase the team’s capabilities as a whole in order to go that extra mile and deliver great design.

How can a manager transform his team to execute at their highest potential?

Through iterative training, an ongoing process that improves the capabilities of the team.

Training keeps people aligned with the same goals and engages them in supporting the same vision as the design manager. Especially in the UX field, designers have unique and different interpretations of their job and responsibilities.

“There is no investment that you can make that will do more to improve productivity in your company.” ~Ben Horowitz

Due to the various disciplines that UX encompasses, without proper guidance from the manager on what is expected from them, designers will figure out how to complete the tasks as best they can, based on how they delivered at previous companies. This leads to inconsistencies in the design deliverables, performance issues and a lot of “he said, she said.”

That’s why the designer’s job needs to be defined by the UX manager himself. He needs to set clear expectations for the job and reinforce them constantly through an ongoing process. But how can a design manager start?

What are the steps to set up an iterative training process?

1. Make it clear that training is essential.

This is extremely important as through this training, each designer will get the knowledge that he needs to do his job at the highest standard.

2. Create a list of what the designers in the team need to learn, in order to perform better.

The manager can include topics like what it means to work as a UX designer in that company, what processes they follow. He can include topics related to user research, testing and the tools used to provide the design deliverables. These topics can touch on general aspects as well, things like what good UX Design is, defining the company’s objectives and what the manager values in his team.

3. Get feedback from the team on their needs and objectives.

Designers need to see the company invests resources in helping them develop new skills. Through this, personal ambitions will be replaced by the ambition to optimize their work for a greater good, the company’s success. The company that invests in them.

4. Based on the feedback from the team, prioritize items in your list to better suit the “research” findings.

If designers are already familiar with the tools used, this lesson can be pushed to the bottom of the list, and the priority should be set on helping them understand the historical aspects of how the team delivered up until then.

5. Set the curriculum, create the first lesson and present it to the team.

This is the hardest part. Even if the UX manager is hands-on and has been doing the tasks described on a daily basis, teaching it to the team will require a deeper knowledge of the subject and a lot of patience to explain the sometimes tedious particularities of the topic.

6. Create the second lesson only after you finished with the first.

Think about the RITE testing method. With each round of testing, improvements to the concept are being made. The same should happen with UX training in the workplace.

UX training skills are learned over time and training is different from one company to another. So the first presentation won’t be great no matter how experienced the manager is. But the issues and questions that arise from the first delivery should be analysed and worked on, for the next round to go smoother.

7. Teach the lessons to senior designers first and train a couple of instructors that can reinforce the learnings.

Ask experienced designers to help improve the lessons and bring in their personal contribution. This encourages them to invest in the vision and gives them a sense of ownership. With this, the senior designers will be more motivated to reinforce the team’s vision and promote its values across the whole company.

Treat the training process with a lean approach

The process above can be seen through the perspective of the build-measure-learn loop principle of the Lean startup methodology. As this principle helps speed up product development, it can help speed up the training process as well.

Training sessions are also learning cycles due to the continuous evolution of design practices. Therefore, they can be effective only if the UX manager can quickly research the topics, build the first lesson and get feedback as soon as possible to improve the quality of the delivery.

Therefore, the manager’s ability to improve with each new training session will determine the team’s effectiveness, and in the long run, the company’s success.

Introducing the new Adobe Stock Contributor Site


Creative Cloud

A young couple, man and woman by a pale blue convertible on the open road, holding a camera.

Today we are excited to announce the public beta of the Adobe Stock Contributor Site, a new platform that allows you to upload and sell your photos, illustrations, videos and vectors to the world’s largest creative community.

Most creatives that purchase stock assets use at least one Adobe product on an ongoing basis. To support this engaged and passionate creative community, we are delighted to offer the premier destination to buy, but now also to sell high-quality, royalty-free content.

By contributing to Adobe Stock, you have the opportunity to showcase your work to millions of customers directly inside Creative Cloud applications such as Photoshop CC, Illustrator CC and InDesign CC. Additionally, the release of our new contributor site includes two amazing features that will make submitting content to Adobe Stock easier than ever: auto-keywording and Creative Cloud integration.

1-in-broswer-website-landing-page

Auto-keywording

One of our major new features is suggested keywording, a time-saving tool that leverages innovative machine learning technology to automatically generate the first five keywords of each image you submit.

When you upload an image, our algorithm will analyze it, generating keywords from top images that are similar to yours. We reorder those keywords by relevancy and display the top five for you to review, edit and reorder.

3-in-browser-website-autokeywording

This feature is in beta and is based on the concept of “machine learning” – its accuracy will improve as our contributor community uses it. The more you leverage the feature, the better it gets – ultimately saving you more time!

Creative Cloud integration 

One of our major priorities for contributors is to maximize the time spent doing what you do best – capturing and creating content – and minimize the time spent during the submission process. That’s why we’ve integrated Adobe Stock contributor submission directly within Creative Cloud applications, right from where you create, saving you time and reducing friction.

During this beta phase, you’ll have the ability to upload images to Adobe Stock directly from Lightroom CC and Bridge CC. For an in-depth tutorial, visit our HelpX page. Our goal is to open the feature to more content types and to integrate into more CC applications soon.

lightroom-plugin

More Improvements to Come

The Adobe Stock Contributor Site is currently in beta. This means that although the site is fully functional, some features will continue to be polished before we release it publicly. The beta phase is a great opportunity for us to give you a sneak peek and to gather your feedback in order to make improvements.

We want to build the best tool possible for our contributors, so we’ll be listening carefully to your input. We look forward to hearing from you as we focus on building the best experience possible for our contributor community.