Creative Matchup: UX Designers Battle It Out on Adobe XD for Girls Who Code


Creative Cloud

Three designers. Four hours. One epic design challenge.

UX designers went head-to-head in Adobe’s latest Creative Matchup. In this challenge, three talented designers have been tasked to use Adobe XD, the all-in-one cross-platform design and prototyping tool, to create a new profile experience for Girls Who Code‘s mobile app Loop.

Girls Who Code is a national non-profit organization devoted to closing the gender gap in the tech industry. It helps equip girls with the computing skills they’ll need to pursue 21st-century job opportunities. In the challenge, the designers have to use Girls Who Code’s existing branding and color palette, and have four hours to use Adobe XD to create an experience that will impress the judges and satisfy the client.

“We wanted our sisterhood to be able to share more of their experience and their personality in their profile so they can use it to help them apply to college or future jobs,” said Amulya Kunati, teacher at Girls Who Code and one of the judges.

You can watch the creative battle play out in the videos below, but first, let’s meet the designers and judges.

The Competitors and The Judges

The challenge pits three experienced UX designers from three different companies against each other, all in the name of creating a great feature for a good cause.

Left to right: George Kedenburg, Jordan Smith, and Jeany Ngo

For all of them, Girls Who Code is a cause they believe in. “I feel like Girls Who Code gives opportunity for girls in a safe space to be who they are and gives them the resources to learn [about code and design] so I’m really excited about it,” said competitor Jeany Ngo.

The judges may come from three very different backgrounds, but all have an interest in seeing the designers create the best experience for Girls Who Code.

Challenge Part 1

With four hours on the clock, the designers get to work creating Girls Who Code’s new profile experience, using Adobe XD’s design tools and features.

“Four hours is a realistic timeframe for me to be able to get through unread slack messages,” said Jordan Smith, with a laugh. The pressure might already be on, but like any good design challenge, there’s a big twist. Check it out below.

Challenge Part 2: Final Elimination

With only two competitors left and two hours remaining on the clock, the competition heats up as the designers push to create and fully prototype their designs before time runs out. While they’re all experienced with Adobe XD, having to create the new feature in such a short period of time gave them a new appreciation for XD’s all-in-one design.

“A really great feature in Adobe XD is the combination of design and prototyping in the same tool…just a great way to get your point across and to show someone how a flow pieces together,” said George Kedenburg.

In the end, our judges gave the win to the designer “who met the client needs the best,” giving Girls Who Code a rich profile experience inside its app. While all three competitors did an exceptional job working with XD, one rose to the top. Check out the winning design in the video above, and head over to Behance to see more of the incredible design prototypes #MadeWithAdobeXD.

For trends and insights in experience design, sign up for Adobe’s experience design newsletter!

Storyboarding in UX Design


Creative Cloud

To come up with a proper design, UX designers use a lot of different research techniques, such as contextual inquires, interviews and workshops. They summarize research findings into user stories and user flows and communicate their thinking and solutions to the teams with artifacts such as personas and wireframes. But somewhere in all of this, there are real people for whom the products are being designed for. In order to create better products, designers must understand what’s going on in the user’s world and understand how their products can make the user’s life better. And that’s where storyboards come in.

In this article, we’ll focus on storyboards as a means to explore solutions to UX issues, as well as to communicate these issues and solutions to others.

What Is A Storyboard?

A storyboard is a linear sequence of illustrations, arrayed together to visualize a story. As a tool, storyboarding comes from motion picture production. Walt Disney Studios is credited with popularizing storyboards, having used sketches of frames since the 1920s. Storyboards enable Disney animators to create the world of the film before actually building it.

Storyboards have long been used as a tool in the visual storytelling media. Here is a Peter Pan storyboard. (Image: Wikia)

Stories are the most powerful form of delivering information for a number of reasons:

  • A picture is worth a thousand words. Illustrating a concept or idea helps people to understand it more than anything else. An image speaks more powerfully than just words by adding extra layers of meaning.
  • Storyboards help people relate to a story. As human beings, we often empathize with characters who have challenges similar to our own real-life ones. And when designers draw storyboards, they often imbue the characters with emotions.
  • Stories capture attention. People are hardwired to respond to stories: Our sense of curiosity immediately draws us in, and we engage to see what will happen next.

What Is A Storyboard In UX Design?

A storyboard in UX is a tool that visually predicts and explores a user’s experience with a product. It presents a product very much like a movie in terms of how people will use it. It can help UX designers understand the flow of people’s interaction with a product over time, giving the designers a clear sense of what’s really important for users.

Why Does Storytelling Matter in UX?

Stories are an effective and inexpensive way to capture, convey and explore experiences in the design process. In UX design, this technique has the following benefits:

  • Design approach is human-centered. Storyboards put people at the heart of the design process. They put a human face on analytics data and research findings.
  • Forces thinking about user flow. Designers are able to walk in the shoes of their users and see the products in a similar light. This helps designers to understand existing scenarios of interaction, as well as to test hypotheses about potential scenarios.
  • Prioritizes what’s important. Storyboards also reveal what you don’t need to spend money on. Thanks to them, you can cut out a lot of unnecessary work.
  • Allows for “pitch and critique” method. Storyboarding is a team-based activity, and everyone on a team can contribute to it (not just designers). Similar to the movie industry, each scene should be critiqued by all team members. Approaching UX with storytelling inspires collaboration, which results in a clearer picture of what’s being designed. This can spark new design concepts.
  • Simpler iteration. Storyboarding relies heavily on an iterative approach. Sketching makes it possible for designers to experiment at little or no cost and to test multiple design concepts at the same time. Designers can be shot down, move on and come up with a new solution relatively quickly. Nobody gets too attached to the ideas generated because the ideas are so quick and rough.

Storyboarding in the UX Design Process

A storyboard is a great instrument for ideation. In UX design, storyboards shape the user journey and the character (persona). They help designers to string together personas, user stories and various research findings to develop requirements for the product. The familiar combination of images and words makes even the most complex ideas clear.

When Is Storyboarding Useful?

Storyboarding is useful for participatory design. Participatory design involves all parties (stakeholders, UI and UX designers, developers, researchers) in the design process, to ensure that the result is as good as possible. With a compelling storyboard that shows how the solution addresses the problem, the product is more likely to be compelling to the target audience.

It can also be helpful during design sprints and hackathons, when the prototype is being built by multiple people in a very short time. Communicating design decisions with a storyboard really comes in handy.

When Is There No Need for a Storyboard?

If everyone involved in creating a product already shares a solid understanding of how the product should be designed and agrees on the direction of the design and development, then there’s no need for a storyboard.

Use Storyboarding To Illustrate Experiences

Before you start creating a storyboard, it’s important to know exactly why you want to do it. If you don’t have a clear goal in mind, you might end up with a few attractive storyboards, but they won’t give you important insights into the user’s experience.

The Primary Purpose of Storyboards Is Communication

When you search for storyboards online, they always look really nice. You might think that in order to do them properly, you have to be really good at drawing. Good news: You don’t. A great storyboard artist isn’t necessary the next Leonardo da Vinci. Rather, a great storyboard artist is a great communicator.

Thus, it doesn’t matter whether you’re a skilled illustrator. What is far more important is the actual story you want to tell. Clearly conveying information is key. Keep in mind that a designer’s main skill isn’t in Photoshop, but rather is the ability to formulate and describe a scenario.

When thinking about storyboarding, most people focus on their ability (or inability) to draw. The good news is that you don’t need to be good at drawing in order to create storyboards. This example is a storyboard frame from Martin Scorsese’s film Goodfellas.

How to Work Out a Story Structure?

Before drawing a single line on a piece of paper or whiteboard, prepare to make your story logical and understandable. By understanding the fundamentals of the story and deconstructing it to its building blocks, you can present the story in a more powerful and convincing way.

Each story should have following elements:

  • Character. A character is the persona featured in your story. Behavior, expectations, feelings, as well as any decisions your character makes along the journey are very important. Revealing what is going on in the character’s mind is essential to a successful illustration of their experience. Each story should have at least one character.
  • Scene. This is the environment inhabited by the character (it should have a real-world context that includes a place and people).
  • Plot. The plot should start with a specific event (a trigger) and conclude with either the benefit of the solution (if you’re proposing one) or the problem that the character is left with (if you’re using the storyboard to highlight a problem the user is facing).
  • Narrative. The narrative in a storyboard should focus on a goal that the character is trying to achieve. All too often, designers jump right into explaining the details of their design before explaining the backstory. Avoid this. Your story should be structured and should have an obvious beginning, middle and end. Most stories follow a narrative structure that looks a lot like a pyramid — often called a Gustav Freytag pyramid, after the person who identified the structure. Freytag broke down stories into five acts: exposition, rising action, climax, falling action (resolution) and denouement (conclusion).

Freytag’s pyramid, showing the five parts, or acts: exposition, rising action, climax, falling action and denouement. Ben Crothers has drawn in a quick story about a guy whose phone doesn’t work.

To make your story powerful, account for these things:

  • The main thing is to make the character, their goal and what happens in their experience as clear as possible. The outcome of the story should be clear for anyone who sees it: If you use a storyboard to communicate an existing problem, end with the full weight of the problem; if you use a storyboard to present a solution that will make the character’s life better, end with the benefits of that solution.
  • Honor the real experiences of the people for whom you’re designing. If you’re writing a story that isn’t faithful to the product, it won’t bring any value to you and your users. Thus, the more realistic the storyboard is, the better the outcome will be.
  • Each detail in the story should be relevant to the experience. Cut out any unnecessary extras. No matter how good a phrase or picture may be, if it doesn’t add value to the overall message, remove it.
  • Bake emotion into the story. Communicate the emotional state of your character throughout their experience.

Step-by-Step Guide to Creating Your Own Storyboard

With so many things to take into account, creating a storyboard might seem like an impossible task. Don’t worry, the following guide will help you turn out a good one:

  • Grab a pen and paper. You don’t have to use special software to leverage storyboards in the design process. Start with a pen or whiteboard marker, and be ready to experiment.
  • Start with a plain text and arrows. Break up the story into individual moments, each of which should provide information about the situation, a decision the character makes and the outcome of it, whether a benefit or a problem.

Lay out each story as a sequence of moments. (Image credit: Nick Babich)

  • Bake emotion into the story. Next, convey what the character feels during each step. I add emoticons at each step, to give a feeling for what’s going on in the character’s head. You can draw in each emotional state as a simple expression.

The same sequence of moments but with emoticons added will give the viewer a sense of what’s going on with the character’s emotional state. (Image credit: Nick Babich)

  • Translate each step into a frame. Roughly sketch a thumbnail in each frame of the storyboard to tell the story. Emphasize each moment, and think of how your character feels about it. Visuals are a great way to bring a story to life, so use them wherever possible. You can leave a comment on the back of each frame to give more context. You can also show a character’s thinking with thought bubbles.

Storyboard frames

Story told in frames (Image: Elena Marinelli)

  • Show it to teammates. After you’ve drawn the storyboard, show it to other team members to make sure it’s clear to them.

A Few Notes on Fidelity

High-fidelity storyboards (like the one in the example below) can look gorgeous.

A smile or frown can add emotion to the story and make it come alive for the audience. Image: Chelsea Hostetter, Austin Center for Design

However, in most cases, there’s no need for high-fidelity illustration. The level of fidelity will determine how expensive the storyboard will be to create. As I said before, conveying information is what’s important. A more schematic illustration can do that perfectly, while saving a lot of time.

Real-Life Storyboard In Action

Airbnb is a great example of how storyboarding can help a company understand the customer experience and shape a product strategy. To shape the future of Airbnb, CEO Brian Chesky borrowed a strategy from Disney animators. Airbnb created a list of the emotional moments that comprise an Airbnb stay, and it built the most important of those moments into stories. One of the first insights the team gained from storyboarding is that their service isn’t the website — most of the Airbnb experience happens offline, in and around the homes it lists on the website. This understanding steered Airbnb’s next move: to focus on the mobile app as a medium that links online and offline.

An example of a storyboard. Image credit: Airbnb

Conclusion

Dieter Rams once said, “You cannot understand good design if you do not understand people; design is made for people.” Storyboarding in UX helps you better understand the people you’re designing for. Every bit you can do to understand the user will be tremendously helpful.

For the latest trends and insights in UX/UI design, subscribe to our weekly experience design newsletter.

References

Debunking Common UX Myths With The UX Mythbusters


Creative Cloud

‘Simple = minimal,” “mobile users are distracted,” “the homepage is your most important page”: these are just some of the commonly-held design principles Zoltán Gócza and Zoltán Kollin say are simply not true. The UX designers have devoted themselves to discovering and debunking UX myths, drawing on research and data to uncover which design practices and user behaviors are, and aren’t, grounded in reality. They started the website UX Myths with the goal of helping UX designers make better design decisions. We asked Zoltán Gócza to share some of those UX myths and tell us why it’s important to him to be a ‘UX mythbuster.’

You’ve dedicated yourself to good UX design. How did your career start? 

I grew up watching Star Trek, marvelling at the beautiful GUIs Michael Okuda created for the series. And I possessed the magical skill of the 90’s, I could set up the time on a VCR (a feat that would have made even the first Bush administration tip its hat).So it was a straight road getting into digital products. I started a design agency, then moved on to product companies and later started my own startup. Working in such different settings was a humbling experience. Currently, I’m heading UX design and research at a Swiss fintech startup.

What are some of the top UX myths affecting designers right now?

Minimalism under the guise of simplicity is definitely high on the list. While simplicity is indeed a key factor for product success, it is commonly confused with extreme reduction. And that often leads to hidden complexity, introducing more friction and cognitive load.Number two, I see a renaissance of the ‘build it and they will come’ mentality that has been mostly fueled by the mobile app boom. But it’s not 2012 anymore, and even though mobile usage is still on the rise, we spend most of our time using just a handful of apps, seldom downloading new ones.

Image courtesy of Alessandro Giammaria

And thirdly, the craze for tiny UI details at the expense of the bigger picture, a phenomenon also known as the dribbblisation of design. Attention to well-crafted details is of course very welcome, but putting eye-candy ahead of real design thinking can completely derail a project. The result is the plethora of beautifully executed, yet unsuccessful products.And let’s not forget about the myth that vitamin C helps you fight off cold.

And what made you decide to take these misconceptions and start the UX Myths website?

UX Myths scratches our own itch. A common theme when you work for a design agency is that you have to spend countless hours explaining the same misconceptions to your clients over and over again. We were frustrated with how inefficient this was.

So we set out to end these discussions, driven by personal opinions and beliefs and to provide a reference for designers facing the same challenges. There’s the immediate impact of helping others improve and speed up design decisions, but we believe our most important goal is to convince people of the importance of evidence-based methods and the value of critical thinking. If you ask me, that’s much more important than our daily dose of UI inspiration.

UX Myths

The feedback we are getting from our readers also convinces us that we are onto something important here. UX Myths has received millions of visits. It has been translated to 12 languages, inspired posters, and was even published in a printed book form.

What harm do design myths do?

Such myths are hurtful because they are deeply ingrained and treated as dogma. We use them as shortcuts and stop asking ‘why.’ So we end up with products that miss the mark.Another pain is that designers who are well aware of these myths (the majority, I would say) often need to exert tremendous energy and spend a good amount of time ‘breaking their spells’ when working with external clients, engineers, or product owners in a cross-functional team. That takes a huge toll on any project and steals the focus from the problems you ought to be tackling.

How can UX designers make better informed, data-driven design decisions?

There are many methods and tools out there UX designers can use daily to optimize designs and make informed decisions. I believe that our profession is headed in the right direction.

That said, there are things always worth repeating:

  • Be curious and learn. A day not gathering user feedback, be it an A/B test, an interview, a survey, etc, should be treated as a day wasted.
  • Leave your desk and do some good old-fashioned research, talking to and observing people.
  • Always have assumptions and questions you want to validate, otherwise you’ll be wasting a lot of time.
  • Document and share your findings with the whole organization–it’s energizing to see how people react to hard facts.
  • And most importantly, be confident about your instincts and ideas but expect to be proven wrong. As Andy Grove said, cherish strong beliefs, weakly held.

Discover more UX myths on Zoltán Gócza and Zoltán Kollin’s website.

#ColorFontWeek – Popsky


Creative Cloud

Download Popsky here.

Igor was with his mother in an Belgrade exhibit about the Russian Constructivism movement in 1913. Constructivism was a movement that melded art with social activism. Igor admired architectural designs that originated from this movement and pop art, and his Popsky font emerged as a melding of influences from pop art and Russian constructivism.

Early sketches of Popsky

As a font designer, Igor typically has a clear vision for typefaces, then just jumps into Illustrator and starts to draw. In the creation of color fonts like Popsky, Igor describes a new process that requires more of trial and error, since the new dimension of color is not something font designers worry about. The interplay of color adds a whole new complexity. Igor says, “When it comes to multi-color [fonts], the main concept is something that has to be explored more carefully. Because you might have a great idea, but then later it turns out that the same concept is not applicable for all alphabet letters.”

Multicolor fonts are still a new field, so designers like Igor have run into more conceptual problems not encountered before. Igor describes the process for creating color fonts as requiring more attention in planning, sketching, and hand drawing. Popsky is a beautiful font that is a culmination of adaptation of the latest technology and creativity.

The Popsky OpenType-SVG Font was designed with Fontself Maker in Illustrator CC and made available at no charge to you for this week thanks to the generosity of Igor Petrovic. This font can be used on the latest release of Illustrator CC and Photoshop CC. Free download expires 11/5.

This font is available as part of 5 free color font series released during #ColorFontWeek.

Time for a Coffin Break: Create a Dia de los Muertos Puppet


Creative Cloud

Dia de los Muertos, or the Day of the Dead, is here. On this day, the legend goes that loved ones who have passed are awakened to celebrate life with their families. To honor them, altars—or ofrendas—are erected to lead lost loved ones’ souls back to their families. The altars include symbolic items, such as marigolds, incense, and a special bread called pan de muerto. One of the most recognizable symbols of Dia de los Muertos is calavera, or skull, decorations.

Since we’re all still in the Halloween spirit as well, what better time to take a break and celebrate by creating your own paper calavera decorations!

What you’ll need:
Creative Cloud and Adobe Illustrator CC installed*
Download the Illustrator CC Project File “day-of-the-dead-cc.ai” here
Sync Your Creative Cloud Library here
Brads
Bamboo skewer

*If you don’t have Adobe software, download this nifty printable PDF, or try Creative Cloud for free.

Instructions:
1. Open “day-of-the-dead-cc.ai” in Illustrator and go to Window > Libraries to access the assets you’ve synced. Select “Day of the Dead DIY” from the drop-down menu and browse through all the artwork.

If you haven’t used CC Libraries before, all you need to know is that it’s a collection of assets that you can create yourself, download from another Creative Cloud user, or collaborate on with a team. You can make any number of libraries to organize assets you use frequently. I use them every day for my work on tutorials, as well as for storing the colors, logos, and paragraph styles that make up my personal brand identity. Learn more about CC Libraries here.

2. Customize your calaca and calavera! Drag assets from the Libraries panel into your document. You can scale and rotate the assets as needed. If you hold the option key while dragging an asset from the library, you will create a raw copy of the artwork that will allow you to manipulate the colors or make any other edits you’d like.

3. If you want to make the most your printer ink and paper, group each piece of the puppet (including the decorative elements), then select all the artwork and scale it up. Rearrange the pieces to fit on a page, leaving some space between each element. If you don’t want your puppet to be poseable with brads, delete the letters from each piece and arrange them into a static pose. In my example below, I fit two smaller puppets on one page and changed the background color.

4. Print, then assemble! Cut out around each part of the puppet and arrange the limbs: match A to A, B to B, etc. Poke a hole through each of the letters (or where they would be if you covered them with decorations) and connect each matching end with a brad. If desired, attach a skewer to the back of the puppet. You can cut out the calavera, too, or leave it as-is for a neat little print to hang.

You’re done! Happy decorating!

Creating a Heroic Tribute to Firefighters in Only the Brave


Creative Cloud

In 2013, an elite crew of firefighters known as the Granite Mountain Hotshots was dispatched to battle a wildfire in Yarnell, Arizona. It turned out to be one of the deadliest wildfires in recent U.S. history. Their heroic efforts to save Yarnell are the subject of a new feature film, Only the Brave, which premiered October 20, 2017. An emotional and raw story, the movie follows the tight-knit team as they struggle with personal issues while protecting surrounding communities from the fire.

The movie was cut entirely using Adobe Premiere Pro CC, and the post-production team also used Adobe After Effects along with Industrial Light & Magic (ILM), the VFX and animation branch of Lucasfilm Ltd., for temp and final visual effects. It was the first time editor Billy Fox, ACE, used Premiere Pro to edit a film. “My ideal editing system is one that doesn’t get in my way, and allows me to turn the vision in my head into reality,” says Fox. “Adobe Premiere Pro gives me that power. Within four days, I was completely at ease using Premiere Pro.”

Director Joseph Kosinski (TRON: LegacyOblivion) shot the movie in 4K using the Sony F65 and dailies were sent to nextLAB® by FotoKem, which acted as the asset hub and pipeline for metadata, color, and deliverables for editorial and visual effects. There, daily footage was customized and ingested into Premiere Pro.

“I would group, organize, and sync everything in Premiere Pro, and then footage from each shooting day would have its own project,” explains Jamie Clarke, First Assistant Editor. “As soon as a project closed for the day, Billy would take it, open it up, and start cutting away.”

Within four weeks, visual effects editor Jon Carr created more than 200 temp visual effects using Cinema 4D and After Effects, which were sent to ILM to finalize. This gave editors a visual of what was happening in a scene before the final visual effects were ready. Carr was also responsible for creating 65 final opticals and visual effect shots that were included in the final cut of the film. “Because of the emotions surrounding this movie, we spent a lot of time focusing on all of the small details in honor of the fallen firefighters,” he explains.

Using the Lumetri Color panel in Premiere Pro, all color correction was completed in-house, reducing production costs and giving the production team opportunities to experiment with the overall look of the movie. The initial color correction was then provided to the finishing house as a template for the final color.

“With Adobe Creative Cloud, it’s like film-making in a box. You can do absolutely everything,” says Carr. “It’s challenging and rewarding at the same time, because you can do all of these cool things within the Adobe ecosystem.”

A case in point? The team used Adobe Media Encoder to create DCPs for all screenings. This is atypical, though: normally, DCPs are sent to outside vendors up to 72 hours before a preview, which means that all creative changes must be complete days ahead of time. The ability to create these in-house meant that the team could put last-minute finishing touches on the film as close to the last minute as possible, while saving the production thousands of dollars for each individual output.

FotoKem’s nextLAB also played a crucial role in enabling the production team to keep as much work as possible in-house. The team could conveniently make changes on the fly, without having to send work out to a separate facility.

From the editorial equipment and 5.1 surround sound systems to large, 4K monitors, FotoKem—in close collaboration with Adobe—gave the team the ability to realize their final vision for the big screen. “Adobe engineers and FotoKem development worked together really well, helping the production team create a movie that is true to their vision,” says Melissa Lichtle, Senior Non Linear Technician at FotoKem. “It’s very rewarding to help people find workflows that work well for them, and help them achieve their goals.”

Only the Brave promises to be emotional for audiences everywhere as the bravery and courage of the Granite Mountain Hotshots comes alive on the big screen.

Learn more about Adobe Creative Cloud pro video tools

#ColorFontWeek – MEGAZERO

{$inline_image}
Creative Cloud

Download MEGAZERO here.

With MEGAZERO the letters are reminiscent of the color bars that appear on a TV screen when a signal is lost. There’s also pixelation in each of the letterforms to complete the television set’s no-signal effect. This was in fact one of Alex’s inspirations when designing the font.

In creating MEGAZERO, Alex took inspiration from Felipe Pantone. He is known for his bold letterforms and vibrant colors in his street art. Those influences are clearly shown in MEGAZERO. One of the other inspirations for Alex is Camille Walala, a designer known for her textile designs. Her compositions are characterized by innovative use of shapes and colors to create motifs that radiate with eccentric energy.

The unique combination of Pantone’s street art and Walala’s vibrant textile inspirations come together to create a font that is assertive and bold, yet intrigues with intricate patterns woven in the letters like diagonal ribbing.

The MEGAZERO OpenType-SVG Font was designed with Fontself Maker in Illustrator CC and made available at no charge to you for this week thanks to the generosity of Alex Trochut. This font can be used on the latest release of Illustrator CC and Photoshop CC. Free download expires 11/5.

This font is available as part of 5 free color font series released during #ColorFontWeek.

Fresh Ideas to Let Your Artwork Work for You


Creative Cloud

This post is presented in partnership with 2017 MAX sponsor, Roland. 

Written by Ben Fellowes. Ben is a writer, designer and marketer at Roland DGA. He loves art, punk rock, horror films, beer and cooking.

Okay! You’ve got that killer design but what are you going to do with it now? Where does it go from here? How can you make money from your artwork? Your first instinct might to stick it on a t-shirt. You may even feel like uploading it onto an online marketplace and forgetting about it, so it can live in digital bliss, waiting for someone to give it life as a poster, a tote bag or an iPhone case!

There is nothing wrong with uploading your design to a marketplace and featuring it on a bag or t-shirt. It’s a very smart idea. However, your artwork doesn’t have to sit in the “online ether” and can be more than just a t-shirt and a royalty payment. It has far more worth and profit potential than you may realize, especially when applied to new and unexpected products and surfaces to make highly desirable custom items.

There is a new breed of artists and designers who realize they can self-produce products featuring their art. These creatives put their art to work for them on a wide variety of products, to capitalize on new markets and revenue streams.

The following images illustrate just a few examples of artwork put to work using UV printing technology, by printing a single image on a variety of cool products including decor, merchandising, and unique functional pieces.

 

 

 

 

As an artist or designer, there’s nothing quite so fulfilling as seeing your artwork on a medium like wood – add stylish UV ink effects to add a whole new element to your work.

 

What could be more appropriate for a big pitch presentation, interview or simply as an awesome specialty graphics product.

 

In addition to customizing fashionable items like retro lunchboxes, designers can add variable data printing fields to include print runs of items with different names, colors and design elements.

 

Customize chic and trendy products, such as chalkboards for studios, homes, or as a custom signage service for local businesses.

 

Or if a chalkboards are not your thing, a clean and sophisticated dry erase board is a smart idea.

Create one-off, custom art items like tabletops to show off your personal designs or as high-value decorative pieces for homes, galleries, hotels and offices.

 UV flatbed printers help artists, designers and other creative professionals turn their designs into physical art objects that have a high worth. Flatbed UV printers empower your creativity and offer a world of profitable possibilities for your designs that go far beyond the obvious.

To request a free print sample on a flatbed UV printer, click here.

Day One with Adobe XD: All The Resources You Need to Start Designing, Prototyping, and Sharing No Matter Your UX Skill Level


Creative Cloud

Adobe XD is your one-stop UX/UI tool for designing, prototyping, and sharing web and app prototypes. As Senior Creative Cloud Evangelist Paul Trani puts it, now is the perfect time to start learning the program, at the ground level. As the tool continues to grow and add features, you’ll become a UX leader in no time. Fortunately, Paul is happy to help launch you on the right path. At Adobe MAX, Paul showed UX/UI designers and enthusiasts of all skill levels just how easy it is to start creating in his lab, Mastering Adobe XD for Beginners. We asked him to share some of his top tips for jumping right into XD and gathered a few resources to help you start creating and sharing amazing website and app prototypes from day one.

1. Come Up With An Idea

Before you launch, think about apps or websites you use on a regular basis. Take notes on what you like about them so that when you launch XD, you know where to start and what you’d like your prototype to look like. If you need some extra inspiration, head over to Behance and search for projects made with Adobe XD to see what others have created. “Look at what you like using, and take hints for those apps. It’s going to help your designing because those popular apps have already put a lot of work into those apps, and then it’s more stepping on the shoulders of giants,” said Paul Trani.When you open XD for the first time, you’ll see a start screen. This will let you select an artboard size – this is your canvas to create any type of website or app you’d like, formatted for any device you want to see it on. If starting from scratch is intimidating, the sample app, right there on the start screen, is a great place to start.

“Open the sample file, check it out, and start playing around with it. It’s there right when you launch XD, and it’s a really great place to get a feel for the program and start imagining what your app would look like.,” said Trani.

2. Start Designing

After you’ve played with the sample app, it’s time to create your own website or app from scratch. Paul recommends taking a subject or activity you’re interested in and creating a design and prototype based on that. The best place to start, once you open your blank page in XD, is to get to know some of the tools at your disposal. This tutorial will help you get to know the interface and what’s available to you in Design mode.

“The great thing about Adobe XD is it’s simple to learn. You’re not overwhelmed with tools and you’re not going to get lost in the app,” said Trani.

When you’re ready to get a little more sophisticated with your buttons, icons, and other graphics in your design, check out this tutorial on how to use Adobe XD’s Pen tool. There are also iOS, Android, and Windows UI resources that will help you kick-start your next design project. Just go to ‘File > Get UI Kits’ for a direct link to these. We’ve also developed two free wireframe UI kits for mobile and web to help you get started.

Wire up a prototype.

Adobe XD also lets you wire your multiple app screens together in prototype mode so you can communicate user flows seamlessly. You can create transitions between your artboards to simulate the flow of your app. It’s simple to do, and you can follow the steps in this tutorial to turn your static designs into interactive prototypes.

“It makes the whole idea of building an app very tangible. You actually feel like you’re designing and coding an app, even though you’re just building a prototype with no coding experience required. It’s super fun,” Paul said. Once you’ve wired up your prototype, you’re also able to preview it on your Mac or Windows 10 desktop or on any iOS or Android device via the Adobe XD mobile app, available in the Apple App Store or Google Play Store.

Share and collect feedback.

Whether you’re looking to test the user experience of your app or get feedback from team members, Adobe XD has a variety of ways to show others and collaborate. Since you’re just starting out, you’ll probably want to simply send your app design to some friends to check out the interactive sharing and feedback features. This tutorial video demonstrates how to create a live link to your project that you can send your friends. Anyone with that link can access your prototype, interact with it, leave comments, and mark-up the page with their feedback.”Some things work, and some things don’t, and trying and failing can be useful too. You don’t get too tied up in your way of thinking, and that’s what’s great about XD’s ability to prototype and share with others. Your thinking could be completely wrong— feedback will fix that,” Paul said. You can share your design with anyone you want to, regardless of whether they have a Creative Cloud account or not. Take their feedback, make changes, and play around until it’s time to share the next iteration of your design.

Next steps.

Adobe XD is designed to be easy to jump into, but still powerful enough to be an essential tool for any UX designer who wants to design, prototype, and share quickly and efficiently. “The great thing about Adobe XD is that it’s simple to learn. It’s everything you need to design something, and then prototype it fast,” Paul said.

For more training on designing, prototyping, and sharing in Adobe XD, check out Paul Trani’s Lynda.com course, and for more in-depth Adobe XD tutorials, click here.

How Conversational User Interfaces Will Change Our Lives


Creative Cloud

In 2017 we saw continued excitement and hype around ‘conversational interfaces’–interfaces that allows users to interact with machines using natural language. While conversational UX also includes text-based conversations, such as those we have with chatbots, this post is just going to focus on voice-based conversations. Voice user interfaces (VUIs) are hitting the mainstream and becoming ubiquitous in our daily lives. We can find them in smartphones, smart homes, TVs, and a range of other products. The rapid development of voice interaction capabilities in our daily lives makes it clear that this technology will soon become an alternative to graphical user interfaces.

According to Gartner, by 2018, 30 percent of our interactions with technology will happen through conversations with voice-based systems.

In this article, I explain how VUIs will change the way we interact with digital products and what this change means for designers.

Why VUIs Are On The Cusp of Becoming Mainstream

Before we dive into the details of VUIs, it’s important to understand the reasons why VUIs suddenly became popular. There are a few things that lead to rapid adoption of this new interaction medium.

Voice Provides A Natural Means of Interaction

One of the main reasons VUIs are so fascinating is because conversation using words is a natural form of communication for people. What’s especially great is that people associate voice with communication with other people rather than communication with technology; human brains are fundamentally wired to interpret the source of speech as human. This means voice interaction systems can be a more natural way of interaction than visual interfaces for the vast majority of users. By removing a visual interface and replacing it with a voice, users are placed in a much more familiar context.

Frictionless Experience

People have long been using intermediaries called interfaces to interact with technology. A majority of modern interaction systems are based on an intermediary called a graphical user interface (GUI). Unfortunately, GUI isn’t the most obvious way of interaction with a digital product; it requires users to learn how to use the interface first and recall this information during each next interaction. In many situations, a voice is far more convenient than a GUI because interacting with a VUI simply requires a user to speak to the device. An interface that doesn’t force users to learn and recall specific commands or methods of interaction creates less friction.

In comparison with GUIs, where users have to learn how to interact with a system, VUIs can significantly reduce the learning curve. Image credits: cnet

Both Technology and Users Are Ready for Voice (Finally)

While VUIs might seem like a new concept, they have been around long before the first GUI. One of the first VUIs, called Shoebox, was created in the early 1960s by IBM. It was a forerunner of today’s voice recognition systems.

IBM’s Shoebox was an experimental machine that performed arithmetic on voice command. Image credits:IBM

Further development of VUI systems was limited by computing power. It takes a lot of computing power to break down and interpret human speech in real-time, and it took more than 50 years to reach the point where it was even possible. Now we’re entering a new era of computing, where advances in machine learning and AI are creating the potential for conversation as the new mode of interaction with technology.Another important factor that has had a strong impact on VUI development is the number of devices that support voice interaction. Today almost 1/3 of the global population owns smartphones that can be used for voice interaction, and it’s easy to predict that the majority of users is ready to adopt voice interfaces.

The language of conversation is more accessible to people, and this will accelerate the adoption of voice interfaces. Image credit: Adobe Stock

How VUIs Will Change The Way We Use Products

Save time on routine tasks

Even though current voice VUIs don’t solve any new problems, they solve existing problems in a way that can significantly improve life for many people. Checking the weather, setting alarms, replying to an incoming message, searching for the recipe — these are routine tasks for many of us. Of course, it’s possible to do each of these things using smartphones or a computer’s GUI, but it’ll require users to turn their attention to a device to do so. People often prefer voice interfaces because of the benefits of hands-free interaction, primarily when using them at home or in the car.

Voice interfaces can be beneficial to use in certain contexts such as at home while cooking or outside while driving. Image credits:KPBC

Advanced voice assistants

VUIs will become essential as personal assistants. New technologies will make it easier to provide tailored digital experiences for people, so imagine a personal assistant that not only understands your current needs but also predicts your future needs. It will be able to aid in every aspect of your life, even the areas you don’t think about.

Google Home can be connected to a Google account and learn about your preferences.

From stand-alone apps and services to unified platforms for interaction

Right now, web and mobile is mess; each time users have to buy something or use a service, they have to download an app and create an account. That’s where voice-based systems can really evolve. VUIs will stop users from the need to install a lot of different apps or creating separate accounts for each service they use. Instead, it’ll bring them all together through a conversation. Why download an app for booking a flight or ordering a pizza when you could potentially connect these services to a chat interface you can speak to in the same way that you speak to other people?

Standard way of interaction with IoT devices

These days it’s not only your phone and your computer that connected to the internet. Smart thermostats, lights, kettles, and many other Internet of Things (IoT) devices also have an internet connection. We’ve got these wirelessly connected devices that are filling our lives now, but not all of them naturally suit a graphical user interface. Using a VUI will help integrate such devices easily into our environments.

Keyboards and touchscreens may disappear for some wearables and IoT devices. Image credits: Adobe Stock

Make Experience More Personal

Voice-based interaction will create a deeper personal connection between a user and a system. Even today, a lot of Amazon Echo and Google Home users establish a close bond with their device — they think of the device more as a friend than a product.

The more voice interaction technology advances, the more it responds and acts like humans.

Life-changing UI for those users who can’t adapt to visual UIs

Vastly-improved accessibility is one of the most impactful benefits of voice user experiences. VUIs can extend the power of computing to people who are unable to use screens and keyboards. Just read the reviews of the Amazon Echo and you’ll find a lot of inspiring stories shared by visually-impaired users about how the device has changed their lives.

VUIs are life-changing for those who can’t use visual interfaces. Image credits: Adobe Stock

How VUIs Will Change The Way We Design Products

It’s clear that voice user interface design will soon become a key strategic skill for designers. Here lies the real challenge: the majority of UX designers are trained in crafting experiences for physical input and graphical output. Designing for voice, on the other hand, is very different from GUIs, and designers cannot apply the same design principles and guidelines. The need to create voice-based systems will encourage designers to focus more on the following aspects of design:

Anticipatory design

The major objective of VUIs is to minimize a user’s efforts to communicate with the system. It’s clear that voice-based interactions between a user and a machine can lead to potentially infinite possibilities of commands from a user and, while it’s impossible for designers to predict every possible user command, it’s still possible to create a contextually-driven user flow. The key to success is in getting the conversational flow right. To achieve that, it’s important to understand the user’s initial intent (a reason for interacting in the first place) and try to anticipate users’ needs and expectations at each point in the conversation to shape the appropriate response.

Try to figure out the intent rather than struggling to understand the entire phrase. Image credit:API

Feature Discoverability

On a graphical user interface, a designer can clearly show users what options are available. It’s impossible to do the same for voice interfaces; there are simply no visual affordances for VUIs. Consequently, if you just look at a device that supports voice interaction, users won’t have any idea what the interface is capable of. Designers need to use context-specific voice suggestions that set clear expectations of what the voice-interaction system can do.

Prioritized information

While GUIs make it possible to show a lot of different options at the same time, verbal content requires designers to keep information brief so that the user does not become confused or overwhelmed (people lose attention after 10 to 15 seconds of listening to a prompt). Designers need to keep in mind the “less is more” principle and apply it to a conversation by prioritizing information they deliver to end user.

Conclusion

The need for voice user experience is real, and these experiences already change lives every day. While VUIs might not replace existing visual experiences any time soon, adding voice UI to extend an existing experience can have a major impact on users. Hopefully, this will lead us to a more accessible world.