Zero UI: Designing for Screenless Interactions


Creative Cloud

We are starting to live our daily lives in the post screen world. The advent of smart and contextually aware devices have changed how we interact with content. Data is a snapshot of our contextual connectivity to our physical and digital environments. Designers will need to build screen-less experiences that leverage data and algorithms to create value for users.

By definition, Zero UI removes the traditional graphic user interface (GUI) from the equation and uses nature interactions of haptic feedback, context aware, ambient, gestures and voice recognition.

The best interface is no interface.

– Golden Krishna

Haptic Feedback

Haptics (or kinesthetic communication) provides the user with motion or vibration-based feedback. Sega’s Moto-Cross video incorporated haptic feedback through the controller to add to the experience of colliding with other players on screen. Nintendo brought haptics to home consoles with their Rumble Pak accessory. Today, we commonly experience haptics as we interact with small touch screens. Haptics are currently used by fitness trackers and smartwatches to provide notifications to the wearer. Haptic feedback is being extended to clothing, while ultrasound or ultrahaptics will bring the sense of touch to virtual reality (VR) and Kinect style gaming. Keeping haptics to a minimum and avoiding overuse enhances the value of the feedback for users.

Context Aware

Devices and apps that are contextually aware and remove the need for additional interactions simplify digital and physical experiences by anticipating user wants. Personalization allows Zero UI devices and applications to be preemptive, predictive, and proactive. Domino’s Zero Click App works on the premise that if you launch the app, you want pizza delivered. The only way not to have pizza delivered is to close the app within ten seconds.

Domino’s Zero Click App via Google Play

Context of use is being integrated into devices, lowering the overall need to interact with the app or device settings to achieve user wants. At first glance, the new Apple AirPods are just wireless earphones. However, they offer relevant and customized experiences to the user. Remove one AirPod, and music playback switches to mono. Remove both, and playback stops and resumes when the user puts them back in.

Apple AirPods via Apple

Other devices, like the Nest Thermostat, rely on collecting data on usage and interactions to adapt to the user’s anticipated needs. By leveraging sensors within a device or location data, we can design contextual experiences that become implicit rather than explicit interactions. What is the situation or context the user is in? What is the context of use of the device? The need is to build and design interactions that are in the background and temporal.

The real problem with the interface is that it is an interface. Interfaces get in the way.

– Don Norman

Glanceability and Ambience

Ambient devices work on the principle of glanceability, with no need to open applications or read notifications. One glance should provide the user with the needed information or context, much like a wall clock or a single day calendar. The Nabaztag Rabbit was a companion style device that provided glanceable experiences by combining colored lights and changing positions of the rabbit’s ears. While the Chumby provided a snapshot of information through widgets. The underlying premise of ambient devices is to create a seamless bridge between physical and digital spaces. These interactions are connected, browserless experiences. Both of these devices were short-lived as they were not able to adapt to changing technologies and the information needs of users.

Nabaztag Rabbit – Image via CNET

Gesture Based Interactions

Gestures need to be easily learned and repeatable. One of the problems with gestures is getting systems to recognize the physicality of the actions (wave, hover and swipe) in the three dimensional space. System responsiveness to gesture inputs can create problems as users start going through multiple gesture sets trying to get the system to respond. There needs to be a balance between teaching the gestures and providing feedback to the user on successfully completing actions and tasks. Designing for gestures requires being adaptive and working within the limitations of the system (processing speed) and the focal length of the camera and establishing a minimum and maximum distance from the screen/camera for the interactions to occur. Google’s Project Soli makes “your hands the only interface you need” by using radar to detect fine movements. UI layers and interactions should not overextend the user’s motion away from the body as this can be fatiguing. Make gestures small and natural.

Xbox Kinect Gestures via Microsoft: Programming with the Kinect

Voice Recognition

Voice recognition has been a part of science fiction since the early 1970’s and entered the mainstream with the advent of voice recognition and search in both iOS and Android phones. Users will accentuate syllables, words and phrases, thinking that this will allow the system to recognize their queries and commands. Designing the conversational UI requires additional user research to find out how users will phrase and construct their queries or statements. One of the difficult parts of voice recognition is the need to adapt the system to regional dialects and slang. Something as simple as ordering a pizza may become a complex design problem when all the different variants for ordering are considered. Understanding user wants and intent, or motivation, helps determine the phrasing or expression.

Image via Amazon

The Amazon Echo limits interactions to ambient or background conversations by requiring an initiation phrase with each command and query.

Conclusion

The future of Zero UI is in leveraging data and understanding user intent to design and build personalized user experiences that are relevant and anticipate user needs. Contextual devices create experiences that extend beyond the screen and connect our digital and physical worlds. Minimizing dashboards and providing information that is glanceable and creates value for users adds to the challenge of designing for screenless interactions. User research will extend beyond how we interact with an interface to how we live and use physical objects in our daily lives.

Save

Premiere Pro 11.0.2 update


Creative Cloud

Today we’re releasing the second stability update for Premiere Pro CC 2017 since our November launch. The 11.0.2 update contains important bug fixes and is recommended for all users. 

You can install the update through the Creative Cloud desktop application, or you can check for new updates from within any Creative Cloud application by choosing Help > Updates. Please note that it can take 24 hours or more for all of our global data centers to receive the update. If the update isn’t available for you right now, please check back later.

For details of what was added, changed, and fixed in the 2017 release (version 11.0) of Adobe Premiere Pro CC and Adobe Media Encoder CC, see this page. For details of all of the other updates for Creative Cloud professional video and audio applications, see this page.

The 11.0.2 bug-fix update for Premiere Pro addresses these bugs:

Titler and Captions

• Title Tool crashes when copy and pasting

• Captions not editable after switching workspaces

• Mouse Disappearing When Editing Captions

File Format Support

• Some QuickTime files fail to import

• Phantom Cine files captured on cameras with new firmware import with a pink cast

• Import of Canon RAW UHD clip results in severely distorted picture

• Content of AVC-I export does not meet P2 AVC-Intra spec Proxy

• Paste clip from After Effects, with Proxy unchecked, results in no Proxy attached in Premiere.

• Quit AME during Creating Proxy Jobs progress will result in crash.

Export and Render

• Crash sometimes when exporting to AAF

• Smart rendering QT AVCI to MXF AVCI

• Rendering Proxies to your CC files directory will cause syncing errors regarding temp files.

• Exported HDR10 clips will have a small color shift towards cyan

• Crash & “Error Compiling Movie”: H.264 direct export with “maximum render quality” fails on MacBook Pro with NVIDIA GeForce GT 650M

Keyboard Shortcuts

• Unable to change the keyboard type in Keyboard Shortcuts Panel on Japanese version Windows PC.

• Custom Keyboard cache auto populates keyboard shortcuts

• Deleting one of more than one keyboard shortcuts assigned to the same command deletes assigned shortcuts

Media Browser

• Drag clip from Media Browser to Project panel, then adjust In/Out in Media Browser can affect clip in Project.

• Drag multiple instances of clip, from Media Browser Thumbnail View to Project panel, results in only one instance of clip.

• Media Browser does not show icons for browsed project items for Windows General Editing and UI

• Edit in Audition is greyed out

• Overlays disappearing when dragging effects over monitors

• When Drag the clip on the timeline, Overlays disappear from Program monitor

• Redraw issues when scrolling

• UI mislabel: Lumetri Panel HSL

• Cannot delete multiple instances of the same clip, or deleting one instance of a clip deletes all instance of it.

• When opening an older project then closing the new one created from the old one, the lock file will remain.

• Attempting to import a BinLocked project into another project will fail with a generic importer error

January 2017 Update to After Effects CC Is Now Available


Creative Cloud

The January 2017 update for Adobe After Effects CC (version 14.1) is now available. This update fixes multiple bugs, including fixes for compositions rendering at the wrong resolution via Adobe Media Encoder and Adobe Premiere Pro. Updates for Audition CC, Adobe Media Encoder CC, Premiere Pro CC, and Prelude CC are also now available.

You can install updates through the Creative Cloud desktop application, or you can check for new updates from within any Creative Cloud application by choosing Help > Updates. Please note that it can take 24 hours or more for all of our global data centers to receive the update. If the update isn’t available for you right now, please check back later.

For details of what was added, changed, and fixed in the November 2016 release of After Effects CC (version 14.0), see this page, and see this page for a list of bugs fixed in the version 14.0.1 bug-fix update. For details of all of the other updates for Creative Cloud professional video and audio applications, see this page.

Please, if you want to ask questions about these new and changed features, come on over to the After Effects Forums. That’s the best place for questions. Questions left in comments on a blog post are much harder to work with; the blog comment system just isn’t set up for conversations. If you’d like to submit feature requests or bug reports, you can do so at this page.

The January 2017 update for After Effects CC (version 14.1) fixes these bugs:

  • Adobe Media Encoder and Premiere Pro again render compositions at full resolution, regardless of the resolution set in the Composition panel in After Effects. (When using the Queue In AME command, the resolution you specify in the Render Settings dialog will be used.)
  • JPEG image sequence footage no longer changes its frame rate and duration when the project is saved, if the frame rate assigned in the Interpret Footage dialog differs from the preference for sequence footage frame rate. Note: JPEG sequences in projects last saved by versions 14.0 or 14.0.1 are not automatically corrected to their previous frame rate. To fix such projects, change the frame rate to the expected value in the Interpret Footage dialog for these JPEG sequences.
  • After Effects no longer crashes when you open the preferences if the audio device last used by After Effects was disabled or disconnected.
  • Auto-save timing has been fixed so that the timer only starts after you make a change to a saved (or new) project. This prevents problems where the timer would run while the project was saved but not changed, resulting in auto-save occurring after you make the next change.
  • After Effects no longer disables the Hardware Accelerate Composition, Layer, and Footage Panels option on Windows when you unlock the computer while After Effects is active. (You should no longer receive the warning, “Hardware-accelerated views have been disabled because they are not compatible with Remote Desktop”, unless you are actually using Remote Desktop.)
  • Text templates that use sourceRectAtTime() in an expression now update the comp correctly when the text is changed in Premiere Pro.
  • Text templates that use expressions to reference other layers now update the comp correctly when the text is changed in Premiere Pro.
  • Text templates no longer display layers as offline in Premiere Pro if the source file for that layer uses non-English Unicode characters.
  • When you select a template project in Preferences > New Project, the file dialog box allows you to select all project format types (.aet, .aep, and .aepx) without changing the format type selector.
  • Creating a new project from a template, when enabled in Preferences > New Project, no longer adds the project template to the File > Open Recent menu.
  • Orthographic views of compositions using the CINEMA 4D renderer are no longer offset and shifted from layer handles.
  • Previews with the Skip option enabled (i.e., not zero) in the Preview panel no longer play at less than real-time when you play through previously cached frames.
  • Composition and layer viewer panels no longer downsample the preview image if you make a change during playback and the composition Fast Preview option is set to Adaptive Resolution.
  • After Effects no longer crashes when you quit on a Mac computer with an Intel GPU, after you import video footage or JPEG images.
  • After Effects no longer sometimes crashes when you quit while a preview is playing back.
  • After Effects no longer crashes on start when trying to load a plug-in from a folder with a very long name.
  • After Effects no longer crashes if you apply the Glow effect to a synthetic layer (e.g., solid, shape, text, etc.) and the layer is outside of the comp bounds, if the project is set to use GPU acceleration and is in 8- or 16-bpc mode.

The January 2017 update for After Effects CC (version 14.1) also includes these improvements to Team Projects (Beta):

  • Team projects can now be saved as a local project (.aep) by choosing Edit > Team Projects > Convert Team Project to Project.
  • The Edit > Edit in Adobe Audition command is now available for layers with audio in a team project.
  • Many bugs with team projects have been fixed.

For more detail about these improvements and how Team Projects lets you collaborate on shared projects in After Effects, Premiere Pro, and Prelude, read this article about working in shared projects.

January 2017 update for Audition CC now available


Creative Cloud

The latest update for Adobe Audition CC is now available, including performance improvements and bug fixes. Notably, Edit in Audition functionality in Premiere Pro should work correctly regardless of the application installation order. In addition, UI performance improvements provide smooth level meters while adjusting parameters and continued stability improvements ensure reliability when recording and editing.

To download and install the latest update, check your Creative Cloud application.

Meet the Designer: Manuel Ryan Espinosa


Creative Cloud

Manuel Ryan Espinosa is a southern California-based mobile product designer whose passion for creating new projects is rivaled only by his desire to constantly seek out new tips, techniques, and tools to help him realize his concepts. This combo of making and learning continues to push his practice, prototypes, and professional studies; we caught up with him to talk about impressive student work, surprising interfaces from the future, and why it’s a good idea to get out of the gym and into the world around you. (And because we’re all friends here–you can call him Mico.)

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

When I was little—starting from when I was about one year old—my dad would sit me on his lap while he painted famous painters’ paintings; all kinds of art from all kinds of artists. He would do this over and over again, and he said that I never got sick of it or bored watching him. I remember when he did Picasso’s Don Quixote; at first, it just looked like black blotches to me. But as I got older, those blotches became a man on a horse, with a sidekick on a horse, and little windmills in the background. I was fascinated by that evolution, and always kept that style and sense of discovery in my head.

I always loved art—admiring it, and later making it—but it wasn’t ever something I felt someone could make a living doing. It was more of a hobby.

Then in 1998, I was studying Biochemistry at UCSD. My roommate at the time was a programmer, and snuck me into the digital media lab one night to show me what was going on with computers, and specifically Adobe Photoshop. It was incredible: I made him go back the next night; and the next; and after a few weeks, I realized I wanted to change my major to Digital Media, with a minor in Visual Arts.

From there, I picked up work with a record label doing everything from CD imprints and jewel cases to stadium posters and freeway billboards. Eventually the iPhone came out, and my mind lit up when I saw it. I became super focused and finally thought: ‘Designing for this is something I can do, as a career. Now I can make a living doing what I really love.’ I was hooked.

How does Adobe Creative Cloud fit into your creative process?

I do research before anything else, which includes interviews, looking at studies, web searches, and figuring out personas (basically who I’m designing for). Based on that information, I’ll create a sitemap using Post-Its, which I’ll quickly convert into a low-fidelity wireframe; flow it all together; then made I’ll make a high-quality version, with graphics from Principal for Mac, for user testing–all in Adobe XD.

I used to use a variety of tools—but XD lets me do all the things I used to do in these other programs, like logos, background blurs, and web pages.

Plus the layout templates are great; they’re great for keeping me up to date with what’s possible for material design in iOS and Android. They’re not just helping me create—they’re helping me learn as well.

XD helps me express my vision for mobile apps way more quickly and much more easily, which saves me a lot of time and frustration. Even though it’s still in its infancy, it’s an incredible tool and I want to grow my skills alongside it.

Let’s look at one of your projects. What was your process creating Circuit Express—a mobile app for mixing up your regular workout routine?

Circuit Express is part of my series of 365 series—over the course of a nine-year period, I’m going to finish 365 videos for mobile app prototypes. It’s a way for me to practice, learn, and develop new ideas and skills.

There was interest from friends in something sports-related, and I wanted to work on a social impact project that could potentially help make society better—a double whammy. I got out there and started talking to people—at the pool, at a 6K race, and other activities—and found that a lot of them got bored of doing one thing in one place for their workouts, so I decided to turn the entire city into a gym.

Low Fidelity prototyping of Circuit Express by Manuel Ryan Espinosa on Behance.

High Fidelity prototyping of Circuit Express by Manuel Ryan Espinosa on Behance.

By creating custom circuits with different stops—kick things off at 24 Hour Fitness, then jog a park to kick around a soccer ball, then on to a playground to do pull-ups, then back to 24—the routines become shareable and sociable in different vicinities; users can meet up, exercise together, and exchange tips and ideas.

Circuit Express by Manuel Ryan Espinosa on Behance.

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

The surprises. The unknown. We’re going to be creating interfaces for things we can’t even conceptualize yet because they’re so next level, or haven’t even been invented yet.

I’m also excited because artists—I use that term to include all the designers and creative people with all the millions of titles describing their work these days—can actually create a meaningful social impact. Artists are pushing with engineers to figure out how to realize their incredible ideas, and engineers are pushing artists to use all this new technology; it’s a back and forth that’s enabling interesting hand-in-hand collaborations.

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

I have a friend who used to be a pro soccer player. He and I once tried to figure out what makes a great athlete, and I think the criteria apply here as well. What makes someone great at something?

One of the most important things is passion. You can’t lie to yourself, and you can’t pretend, because there are going to be bumps and bruises and frustrations along the way before you even get to the fun part. It’s not always easy pursuing your dreams.

Practice is important. In order to stay sharp, I think it’s good to practice at least one hour a day.

Study continuously. I take at least one class a quarter, be it art or programming or whatever skills I need to improve, or whatever I’m trying to get better at.

And find an industry blog or magazine or blog website that comes out with new information every month, and follow it. Net magazine is incredible; it’s got all the trends and recommendations for mobile apps and software and what’s coming out for the year, and they get it right every single time.

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

I recently saw year-end presentations of graduate programs for both the University of Washington (Computer Interaction and Design) and California College of the Arts (Interaction Design), and was completely blown away. These students put a whole year of research into these projects, which they translated into prototypes and mobile apps. But it was more than just design; these were whole mental endeavors, expressed in really cool ways I’d never seen before. I was hooked. It’s what made me want to go on to grad school.

Best tunes for getting into a creative flow?

I like to listen to Passenger; it’s great mellow music, one of my favorite artists.

I discovered The Piano Guys looking for cover songs on YouTube, and I love their stuff.

And Lindsey Sherman’s violin music is wonderful.

Fave follows:

Follow Mico on: Behance, LinkedIn, and Twitter

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.”

Save

Dynamic Storytelling: The Rebirth of Multimedia Experiences


Creative Cloud

In the increasingly competitive battle for user attention, creators need to leverage new technology to captivate in the most engaging manner to attract an audience. This need, combined with technological advances, has given birth to dynamic storytelling through multimedia experiences.

The Rise of Multimedia Storytelling

Multimedia storytelling is defined by the use of various mediums (text, graphics, audio and video) in a mixed format to create an immersive digital experience. It is important to tell a story that is designed to leverage various digital platforms in order to extend the narrative. Each platform should add relevance and coherence to the story. Readers can become both contributors and consumers of content. Sharing content builds a relationship with the story as it grows and adapts. In this article, I have pulled together examples of dynamic storytelling through multimedia experiences and outlined the characteristics that make them stand out.

The multi-chapter series, Snowfall, uses full-screen video and side vignettes to provide the reader with greater context for the experience-based feature story. The real life people in the series have integrated bios and tell “stories within the stories” to create greater context for the reader. Snowfall was heralded as the future of online journalism and storytelling and set a standard for future online news features.

Collaboration and Social Media

One of the easiest ways to engage users in creating and pushing a story forward is by inviting users to contribute content to the story helps maintain the momentum of their experiences. Providing a general narrative or framework for user generated content creates a community that engages users, and as users contribute content they become invested in the process of storytelling. In the Johnny Cash Project, users contribute images of Johnny Cash as the project grows and evolves; these images are sequenced into a music video and users can explore the individual image contributions as the music video plays.

The New York Times’ Your Biking Wisdom in 10 Words allows users to share their biking experiences in ten words or less, creating an interactive mosaic of shared moments, stories and rants from a cyclist’s perspective. Neighborhoods and bike paths become the context of the narrative.

Social media and customization has made multimedia storytelling dynamic and personalized by integrating and weaving a user’s social media data into a storyline. In The Most Glorious Survey Ever, the user becomes part of the story through personalized imagery and context changes as they answer questions in real-time.

Innovation and Engagement

[murmur] was an archival audio project that collected and curated audio stories. Users called a specific phone number to experience and listen to a story while in specific Toronto locations. [murmur] allowed users to experience the physical location while listening to the story, creating an integrated “being there” experience.

Dynamic storytelling can be a shared experience. The band Coldplay has used radio controlled LED wristbands and beach balls to make the audience an integral part of the light show and graphic interplay with the lyrics of songs that they perform. The contextual aspects of time, place and environment become part of the experience. Concert light shows enhance the musical experience. As the light moves from the on screen projection to the crowd itself, being part of the light show adds to the concert goer’s immersive experience.

Pushing existing technologies creates new ways to tell traditional stories. Taking a simple concept and placing it onto a new platform quickly takes a “choose your own adventure” narrative in a new direction. Deliver Me to Hell uses embedded interactive elements within the video to push the narrative forward.

The Other Side engaged users by telling two sides of a linear stories simultaneously; in it, users can flip between two streams of video, allowing them to see “the other side of the story.”

Together Tales engages children by putting them at the centre of the story through the use of print books, interactive games, web and outdoor adventure activities.

Mobile Data, The Next Frontier

The next frontier in dynamic storytelling will be the use of mobile geolocation data and its integration of the user into location based storylines and building collaborative experiences. The use of geolocation data was a major part of the Pokemon GO! experience, requiring players to walk to specific locations to interact with game elements through augmented reality. Individual players can create real world relationships by interacting with players at physical locations, i.e. Pokemon gyms.

The use of both augmented and virtual reality into mobile experiences is just beginning. Geolocation data will further enhance the temporal, spatial, social and semantic experiences of dynamic storytelling. Engagement and distribution are driving factors of dynamic storytelling where users can integrate themselves temporally and spatially into an immersive storyline or experience.

Save

Save

Apply to be a 2017 Adobe Creative Resident


Creative Cloud

We are excited to announce the Adobe Creative Residency is building upon the success of its first two years and expanding in 2017. For the upcoming program year, we will have six residents from the United States, Germany and Canada. It will be the first year the Creative Residency is open to candidates outside of the United States and we plan to continue expanding it internationally in the future.

We will accept applications from January 23 through February 26. If you want to get a head start on your application, here is some information about the program for you to consider.

What is the Adobe Creative Residency program?

The Adobe Creative Residency program gives talented individuals a year to work on a personal creative project, while sharing their process with the community. Residents apply new ideas and tools to their work and inspire others to try new methods. Adobe provides residents with the best creative tools and resources, along with guidance from advisors and a complete compensation package.

Should you apply?

Creative Residents are passionate about creativity and sharing their creative process. They are interested in growing their creative skills and career, while sharing their process, successes, and failures with the community.

Ideal candidates are in the early stage of their career and prepared to make the Creative Residency their professional focus for one year.

For 2017, we have a focus on the following fields:

  • Photography
  • Graphic design (Digital and Print)
  • UI / UX design
  • Graphic Composition (leveraging 2D and 3D)
  • Video especially on YouTube or Vimeo
  • Illustration

The Creative Residency program aims to provide a diverse range of creative viewpoints, backgrounds and experiences so even if your area of interest is not in one of the fields above, we still encourage you to apply.

Preparing your application

If you are thinking of applying to the Adobe Creative Residency program, take time to gather your application materials including your proposal and work samples. The factors considered when selecting Residents include your project proposal, previous creative work, flexibility to try new things, past work experiences, and willingness to take on new challenges. Here are the kinds of questions you should be prepared to answer in the application.

  • Please describe your project, the goals and what you want to accomplish with it.
  • How does this project build off your previous work?
  • What tools will you use?
  • Describe your work flow for this project.
  • How do you plan to share your project with the creative community?
  • What do you want the community to learn from your project?

While preparing your answers, please select three past projects you’d like to share with us along with links to your online portfolio and/or Behance page. You can find good examples to use as a guide by checking out Behance projects from some of our residents like Christine Herrin and Syd Weiler.

Now you have what you need to begin preparing your Creative Residency application. If you’d like to be reminded when we open applications on January 23, you can sign up here. For questions that are not answered above, please check our FAQ page or send us an email.

Gabriel Topete from Vimeo on the Future of Video in UX Design


Creative Cloud

Video may have killed the radio star, but it’s done wonders for UX designers. We chat with Gabriel Topete, senior mobile and television product designer at Vimeo, to find out where he thinks video is going from here.

Adobe: What attracts you to working on a video platform?

Topete: Video is up and coming. It’s a very hands-on kind of technology and by hands-on I mean video is now attached to everything, not just your cellphone. It’s now on refrigerators and printers. Video devices are popping up everywhere – even my keyboard (I have a gaming keyboard) has a little video screen on it. The new iMac has a video screen touch bar. Video is becoming integrated pretty much into every device. I find that a neat challenge to design for.

Has this created any new opportunities for you in your UX career?

I’d say so. As a product designer, having video on multiple platforms is pretty interesting. I haven’t owned a TV in probably over 10 years, so for me to jump into design for TV, that’s really interesting because I find TV to be a very old technology. Even though there are plasma TVs, flat screen TVs, and the resolution keeps getting better and better, it’s still kind of an old technology. I find it interesting to design UIs for TV because even now the stuff that I design for it does work fairly well, but it still feels clunky. Designing for these things is kind of like an exaggerated DVD menu, which I used to design back in the day. It wasn’t a very fluid experience. I do like the challenge of designing for TV now. It is an emerging frontier. The technology is better, the code is better, and the applications are better. I can see it becoming more fluid.

Can you elaborate on that? What do you mean when you say you can see it becoming more fluid?

With better graphics cards, better hardware, better apps and better coding, the experience is more fluid. Back when this technology was first emerging, a lot of the TV and old school video applications did feel a bit clunky and not really there yet. You can see it with old ATM machines when they have video and you touch the interface and you interact with it; it feels a bit clunky. I see it becoming more fluid, because the technology is getting better so you are getting a better experience.

Do you think users are expecting these more fluid experiences as video becomes a more innate part of how we live our lives?

I think they’re expecting it, but they’re probably not consciously expecting it. They’re not sitting around saying, “I hope this TV app becomes better,” it’s just something we do subconsciously. When we buy a new TV we do expect that its experience will be better than the last experience.

The Vimeo app we launched for Android TV, one of the designers did what she called blooming.

On Android TV when you click on a video cell it expands and that’s it, but what she did is she made it a one-two-three approach so that when you highlight the row you get a bit of information, when you click into the row you get a second bit of information like the title, and when you click on the cell you get a third line of information. Android TV didn’t have that built in, but we built it and we launched it and the users were really impressed by that and thought it was a cool experience. We launched this app and it wasn’t something users were expecting, but when they see it they appreciated it.

I’ve read a couple articles that predict that video is going to become more of a background tool in a lot of applications and websites, so instead of having a static image it is going to become increasingly common for the background to have video and motion. I was wondering what your thoughts are on this?

It’s definitely a popular trend among designers and I know on our side we experimented with those kinds of videos. It goes back to how technology is evolving. The internet gets faster, the hardware gets better. Designers and people working on websites and applications have realized it is actually adding a lot more features. The background video is a nice experience. Instead of having a photo, a video can provide a more immersive, visceral experience. You are in charge of the narrative. For example, you can have a large, beautiful image of flowers on a website. That’s pretty and everything, and you can take that photo as you will. Or maybe there’s a video of a woman sitting at home and someone knocks on the door and she gets flowers and she smiles, maybe these micro videos are only like 10 seconds long or tell a seven second story. When that’s the background image on the website you’re already picking up an emotional response with the user. You accomplish more with those videos than with just one still image. I do see that trend popping up more and more.

In addition to that, what kind of trends do you see for video and user experience design going forward?

I see video becoming more immersed in everyday life. We’ve already started seeing that like in a taxicab they have a video touch screen so I can sit there, look at the weather and get channels. It’s becoming more immersive. I’ve seen cutting boards that are literally just screens so you can technically watch a cooking video and cut on the cutting board at the same time. Video will be an immersive tool. Everything is becoming electronic and everything that is electronic typically has a screen on it. If it has a screen on it, it can pretty much use video.

What do you think this means for UX designers?

I think it’s going to open up the floodgates. If you’re a UX designer right now it’s mainly like “design this website or this app”, so this is going to open up the floodgates beyond the two realms of web and mobile. Look at subway maps. You have these big screens and it shows the whole subway map and it’s interactive. You can click on it and watch a video or see your location. That in itself is a whole new UX experience. It’s a whole new dimension. You have touch action. What happens when a user clicks on this, what happens when they click on Central Park, can they watch a video on it, does it have captions? Each little device that has a screen needs a designer behind it.

What do you recommend UX designers do to get an edge on this emerging field?

For me, to work in house was incredibly difficult. I started doing freelance work at agencies that focused on applications like Android or iOs. In addition to that, I would also update my portfolio with exploratory design and I would actually go and redesign an app and do what I do for web: create some sketches, create my wireframes, and show my flow chart and final design. That’s how I started to transition and people started to take me a bit more seriously. It wasn’t just me going into an app position and only showing web work. I had to show at least some application work and the thought process behind how to build an application.

Finally, what do you have to say to UX designers out there who maybe aren’t sold on how valuable or big video is going to be in 2017?

Take a moment and really look around at all the emerging technologies and see how many of them utilize screens and video. People love videos. You see it with Snapchat. Snapchat has a huge evaluation and all it is, is you take little clips of your friends and what you’re doing and that’s a video experience that’s made 20 billion dollars. Instagram started off with just still photos, but that wasn’t good enough, so now Instagram has to do the same thing Snapchat is doing so they implemented videos and that’s actually booming. Facebook did the same thing and started implementing live video. You’re seeing all these apps add video functionality and it’s for a reason. It’s because people really love video.

What are your thoughts on video’s role in the future of user experience design? Tell us in the comments below.

Save

Save

How to Create Your 2017-Ready Web and App Design Portfolio


Creative Cloud

They say that a good portfolio is a designer’s best friend.

So much so that building a portfolio is usually somewhere at the top of the to do list for most new designers. And it’s hard to disagree with this idea. I mean, as a designer, what other better tool can you use to aid you in convincing new clients that you’re the best person to work with?

But there’s also a problem here, and it’s this:

Not all forms of portfolios are equally effective. And, even worse, some of them can backfire and cost you a job instead of giving you one.

The devil is in the details – as they say. So let’s look into that today – let’s figure out how you can build your 2017-proof web design portfolio that will impress your clients and make you look like a pro as soon as you walk in the door.

Starting with:

The main goal of a web design portfolio

There are two, actually:

  • present what you have that others don’t – the thing that makes you unique,
  • present a good proof that you can deliver results.

The first goal should be fairly obvious. With so many other designers in the market, standing out is a valuable skill. If you stand out, you can build a brand for yourself. You become known for something. If you blend in, you’re just like thousands of other designers competing in the same marketplace.

Now, the second goal – proof that you can deliver – is actually way more tricky than it sounds.

The need to be able to deliver results is something that beginner designers don’t usually ponder too much about. The non-obvious thing here is that those are not “design results” we’re talking about. It’s business results.

At the end of the day, a client doesn’t want a “pretty site,” even though it might appear so. What a client really wants is a website that will achieve certain business goals, and hence put the business in a better position than it would otherwise be without the website.

This is huge because it goes way above the visual attractiveness of the final website, and puts a focus on an entirely different aspect – the website’s ability to make money (more or less). And that’s especially true in 2017. With more and more e-commerce websites and other commercial website projects, earning potentials are among the key characteristics of well-executed website designs.

Therefore, how do we build a portfolio that takes all of that into account, and really convinces the client that YOU can deliver?

Be original

There are no set-in-stone rules that you need to follow from a technical point of view when building a portfolio website. You can do whatever. Be original. Make yourself unique.

At the end of the day, the more your portfolio site stands out, the more effective it will be.

Essentially, there are no portfolio-unfriendly layouts, design types, graphic concepts, or website structures. Anything and everything goes as long as it manages to showcase your portfolio effectively, present your services effectively, and convince your clients that you’re the person for the job.

For example, do a quick research going through popular user profiles on Behance. Follow the links to their websites and see how different many of them are.

Two nice examples:

Think case studies … not visuals

Clients need solutions, not works of art.

You can’t just show off the looks of the websites that you built and not provide any commentary whatsoever. Real-world clients simply won’t care.

Each project in your portfolio needs to have a good description that explains the goals behind that project and talks about the process of actually going through it from start to finish.

So yes, this means doing some writing, unfortunately. But it’s the kind of writing that holds a really good return on investment.

With good project descriptions, you’re helping potential clients understand what the goal behind each thing in the portfolio was. It’s basically allowing them to look beyond the initial appearances and understand why you made specific choices with those projects.

This not only presents your expertise but also lets the client know that you will be able to figure things out along the way, instead of simply being the hand holding the brush.

Here’s what Robert Mening of WebsiteSetup.org says about evaluating candidates for a web design job:

Looking through someone’s previous work is key. And this is not just about screenshots or quick demos, but more about seeing if the designer can solve specific problems and deliver solutions. If I can see an indication of that in their portfolio then it’s a great sign. So rather than looking just at the visuals, I try to look for some explanation as to why certain choices were made vs the other possibilities.

The workflow of the designer is key as well. There’s always a lot of back and forth when working on a complex design project, so I need the person to be able to get back to me quickly and work on the improvements that were suggested. When looking through a portfolio, I try to search for things where it’s clearly visible that a given design decision was made because of a business reason that warranted it. In other words, I need designers that can work towards a business goal, not just someone who can “move the brush nicely.”

In the end, I’m usually looking for someone who is interested in full-time work, so I need to be sure that we can work together as a team where both theirs and my vision make up the final product.

Again, think case studies, not project snapshots. Use as many visuals as you need to present a project case study effectively, but don’t make those visuals the be-all end-all of the portfolio.

Here’s a great example of a case-study-based portfolio by Creative Monarchy:

This brings me to:

Present each individual project separately

Since we are thinking about this in terms of case studies vs single project snapshots, each of your portfolio projects should get its own sub-page that’s linked from the main portfolio listing.

If we were to just make the whole portfolio a single blob of content that’s all put together on one page then we wouldn’t be able to get into any detail for individual projects too effectively.

For example, see this portfolio by Andrea Pedrina:

The main portfolio is just a set of titled boxes. But when you click on any of them, you’ll see a separate page that goes into detail – transitions to case-study mode. There, Andrea takes more time to explain the ideas and challenges of the project.

As a bonus, this sort of structure also allows you to share specific case studies with specific clients. So for instance, if you have a client interested in an X type of project, then you can share specific portfolio links with them that lead to something similar. This should make them much more willing to work with you, seeing you have experience.

Talk about actual results

When you’re describing each of your portfolio projects, you need to focus more on the facts and the parameters of each project, rather than on their visual aspects.

In other words, think and talk results, not visual flair.

Here’s what’s actually important to a client looking through projects in your portfolio:

  • What your previous clients got as a result of working with you. This involves business goals, achievements, and other important outcomes from a business point of view.
  • Is there any data presented alongside the project. This involves raw numbers regarding the results that the website brought, the sales it generated, the conversions it got vs the old website, and etc. Basically, everything that makes a website an effective marketing or sales tool.
  • Is there any mention of UX, conversion optimization, split testing and other website performance metrics that are key for a website’s long-term success.

Here’s what Catalin Zorzini of ecomm.design shared about this:

The designers I work with need to have a strong focus on functionality and UX, instead of relying too much on pure aesthetics. In the long run, aesthetics can go outdated, but the UX needs to stay there no matter what.

Essentially, I’m looking for patience in a web designer. Working on good UX takes time, and it’s not something you can just do perfectly at the first try. If a designer puts a lot of care into explaining the ins and outs of various UX and usability-related aspects of the projects in their portfolio, then it makes me pay attention.

  • If there are any testimonials. This involves your actual clients talking about their experience working with you. Testimonials really go a long way in a portfolio. Although they don’t make a sale on their own (i.e. you need other elements in your portfolio as well), they can be an effective final nudge for a new client to make up their mind.

The previously mentioned Creative Monarchy has an effective testimonial presentation:

Please notice the structure of the testimonial:

  • there’s a picture – proving it’s a real person,
  • name and position of the person giving the testimonial,
  • the text is factual, focusing on specific aspects of working with them (instead of being general, like, “So and So is a great designer.”)

Don’t show everything

Not everything you’ve ever done needs to go into your portfolio.

Choose just the best stuff, or the most interesting stuff.

The best stuff you can probably identify pretty easily. Those are the projects that changed your clients’ businesses or even lives. The ones that took a business off the ground, or improved someone’s sales many-fold.

Talk about those projects extensively. Explain everything that led them to that success. Say it in a way that’s easy to understand and also convinces the reader – your prospective client – that they can expect similar results.

The other kind of projects that should appear in your portfolio – the most interesting projects – are a bit more tricky to identify. Those aren’t necessarily the projects that have ended in the hugest of successes, or that were appreciated the most, etc. These are the ones that have something about them that any new client can resonate with easily on a personal level.

For example, talk about projects that were meant to help a client save a failing business that perhaps couldn’t get off the ground at all. Talk about how you helped them pivot to a new strategy (just an example, if you have an experience like that under your belt). The focus here isn’t as much on the final website that you built, but on the process itself.

Or, talk about some projects that you did for non-profits geared at raising awareness about Cause X. Talk about meeting with Y, figuring out what’s the message that needs to be shared about Cause X. Etc.

In a normal businessy scenario, there’s not much to brag about with projects like that … they don’t bring you richness, nor flare, but putting them in your portfolio simply makes you more human and makes people want to get to know your work better.

Make it current

A portfolio is only as good as it is current. In other words, the projects you worked on five years ago hardly count.

Just like in sports, it’s your latest performance that matters. Nobody cares about your last season home runs.

Therefore, always keep your portfolio up-to-date, and always try adding new and interesting projects.

Also, showcase the dates of the projects near the top of the project description. Your clients need to know that you’re an active professional and that you’re constantly looking for what’s new and interesting.

Make it accessible and easy to digest

Let’s tackle the elephant in the room. And really, this is crucial.

Whatever method you choose to build your portfolio with, you need to make sure that the final product is accessible and easy to digest. On all devices. On all screens. On all browsers.

I know this sounds basic at first … like something I shouldn’t even have to talk about, but I really want to address this since it’s a serious deal-breaker if you get it wrong.

Just like a shoemaker can’t roam the streets in messed up shoes, a web designer can’t have a website that’s faulty in any way. In short, if any potential client sees something funny-looking on your portfolio site, you’re done. The credibility is gone.

So always make sure to use only the best tools that allow you to build a truly friendly portfolio site.

If you already have those tools lined up, that’s cool, go ahead and use them. If you don’t, check out our favorite – Adobe Portfolio. It lets you build a portfolio quickly, with no coding required, so you’re not risking any server incompatibilities with your source code or anything. It just works. Plus, it doesn’t limit you in terms of the layouts or looks that you can use.

Also, speaking of making the portfolio easy to digest, we can’t forget about the language you’re using in the portfolio itself.

Don’t try sounding professional and smart. Instead, try resonating with people on a more personal and natural level. You want them to feel good about reading / looking at your portfolio and getting to know you through it. Don’t build up a barrier around you by sounding too formal. You’re not on Wall Street to be talking like that.

In the end, treating whoever is browsing through your portfolio as a friend will pay off. Making people feel comfortable with the way you’re talking about your work is a great start, and makes it easier for a potential client to reach out to you.

Making the Unreal Look Real: V-Ray’s Incredible Rendering Engine and Project Felix


Creative Cloud

Previously we caught up with the Project Felix product team to hear more about how the project began and where it’s going. In addition to the incredible human power behind the software, one key technical component proved essential to streamline the complex process of rendering, and let users like you pick up the skills immediately.

Say hello to Academy Award winner, Chaos Group. Their incredible V-Ray core technology has been a staple of the cinematic visual effects and architecture industries for over a decade, and now, graphic design.

Let’s start with rendering. What exactly does that term mean for graphic designers?

David Tracy, Chaos Group communications director: It’s actually always a challenge to explain what rendering is, and what it does. Rendering is what makes an object or image look real. Whether it’s the car in the Audi commercial, or the huge battles and settings in Game of Thrones. Rendering recreates the lighting, the look of the material, and even the depth of field from the camera. V-Ray takes into account the actual physical qualities of light, and how surfaces look in different settings. We pride ourselves on the visual effects that people don’t notice, the effects so realistic that your brain doesn’t question it.

The Chaos Group’s annual V-Ray showreel offers highlights from the year’s most impressive VFX–in movies, TV shows, games, architecture, automotive, and more made all around the globe–all powered by the V-Ray core technology.

How does V-Ray fit in and address those ?

David: The V-Ray core is the rendering technology, or code base, that makes up the foundation of all V-Ray products. Every flavor of V-Ray starts there, including the V-Ray engine inside of Felix. Our idea from the very beginning was to make integration into different products as easy as possible, in order to help creatives experiment with and communicate their ideas more quickly and more efficiently.

How has V-Ray enabled Felix to do something different than other 3D applications out there?

Charles Piña, Project Felix lead engineer: A lot of programs are like Swiss Army Knives. They do a lot of different jobs, but mastering each is very involved and complex, so you might only be trained in a very particular workflow; you know what to do when you only press certain buttons in a specific way, basically. It’s crazy hard. Project Felix, on the other hand, is like a spoon. We’ve simplified things such that it’s obvious how you use it. We’re trying to empower users of the spoon to do what the spoon does best.

What do you feel is the coolest thing about this collaboration between V-Ray and Adobe?

Slavka Stankova, Chaos Group project marketing manager, integration technologies: We have a technology that is high end for visual effects, architecture and design. With Project Felix, our technology will reach more artists  with broader creative  backgrounds and perspectives .

David: One of our main motivations was to have the opportunity to give everyone a chance to use this technology, for any purpose they could think of. It can be a benefit for so many people—in this case, specifically  graphic designers. There’s nothing more exciting than providing someone a creative tool, a new means to create, and then seeing what they do with it.

We’ve got more Project Felix insights coming your way next week, with a look at how designer Allison House makes 3D magic.