Design Workflow Overview

You.i TV embraces the relationship between designers and developers. An innovative workflow enables designers to play a huge role in the development of applications. Let’s explore the concepts fundamental to designing with You.i Engine One.

A Blend of Art and Science

The You.i TV process is a marriage between art and science. Traditional application development only requires designers to plan for interactions, aesthetics, and use cases. The You.i TV process incorporates designers and their skills beyond these preliminary stages. Throughout the phases of a project, designers influence both form and function. Whether it’s through user experience reviews, design iteration, or feature prioritization, designers play a key role in the success of an application.

“Any sufficiently advanced technology is indistinguishable from magic.” — Arthur C. Clark, Futurist

Adobe After Effects and the AE plugin

After Effects (AE) is the industry standard tool for motion graphics. With it, designers can compose content, integrate video, and create rich animations. AE has all the tools required to craft engaging designs. But there are fundamental differences between creating videos and creating applications. AE allows designers to add text, create animations, and layer content.

You.i TV’s After Effects plugin brings interaction into the equation. Here are a few key concepts to understand before working with the plugin.

Creating

Designers use AE to create, import, and animate content. Creating the look and function of an on-screen application element has two main parts: the element and the class assigned to it. Use content as an example. Content can be defined as interactive or dynamic. Depending on which class you assign in After Effects, You.i Engine One (and the app developer) will know how that element is supposed to perform when a user interacts with it. As a designer, you can make that interactive element (such as a button) look and behave almost any way you wish, without worrying about the code. The developer ensures the behavior of that button is correctly bound to the action required of it. In the case of a button, the designer creates the button, animates the states, and assigns a class via the You.i Plugin’s Properties Panel. The developer then links that button to the desired action. For example, a designer can make an interactive “play” button, but the developer creates the code that actually causes a video to play.

Previewing

With the Preview Tool included with the You.i Plugin, designers can test interactions, simulate dynamic content, and even simulate different platforms. Designers can preview their designs with real-world precision, all within After Effects. No code generation is required.

Exporting

In the typical AE workflow, designers render videos. With the You.i plugin, designers export content. All of the information within AE can be exported to an application. This information includes all the data required to build the interface - everything from layer names and classifications to animation details. The You.i plugin exporter incorporates all the AE information into a project.

Design Considerations

When building apps, there’s a lot to consider. Some common topics include:

  • Handling dynamic content
  • Creating user flows and interaction points
  • Animation
  • Building for multiple platforms

Dynamic Content

Content comes in a variety of forms. Application content is typically delivered in the form of graphics, text, and video. It’s important to understand that content can vary within an application. One of the greatest challenges of building an app is making the framework flexible enough to work with dynamic content, such as a movie title. Designers are tasked with the duty of creating flexible layouts to accommodate dynamic content. Thankfully, You.i Engine One provides methods that enable designers to work with static and dynamic content quickly and effectively.

Interaction

The most typical types of interactive components used in app development are buttons and lists. Whether a user is browsing content, playing a video, or pressing a button, apps must react to the user’s action. Typically, an interaction will be accompanied by an animation. For example, when a user clicks a button, that button’s state will change, to communicate to the user that their action has been captured. Most components have default behaviors and states. A button, for example, can be pressed, released, toggled on or off, or disabled.

Animation

Motion graphics play an important role in application development. Animation is less of a visual luxury and more of a functional need that users expect. Animation adds value in a few ways.

Function

  • Optimizing user experience
  • Driving user’s attention
  • Providing visual feedback
  • Guiding focus between views
  • Distracting from what’s happening behind the scenes (like fetching content or loading the next view)

Material

  • Building animation on a consistent information architecture and material user interface model
  • Defining spatial relationships between screens and elements
  • Making the UI more predictable and easier to navigate

Delight

  • Adding emotion and fun
  • Making the experience feel unique and stand out from the crowd
  • Helping users relate to a product

Cross-Platform Design

One of the main advantages of the You.i TV technology solution is that it’s a single codebase that can be deployed across different platforms. Platforms are typically divided into handset, tablet, and TV form factors. While it’s possible to build an application flexible enough to work for different devices, these devices may demand variations in design. For example, a handset portrait design layout could look different from the tablet landscape design. Generally, functionality should not vary from device to device, as this requires additional development. The AE plugin helps designers manage designs from platform to platform, and device to device, when required. You can create esthetics such as fonts, colors, layouts, and animations that vary between form factors without code changes.

Touch vs. Remote

One important distinction to understand when designing cross-platform (or for various devices) is how the user actually inputs information - is it by touch, or with a remote? Tablets and handsets use touch for interaction, while TV (10ft) applications rely on a remote to relay interactions and work with a “focus” system.

Performance

Also consider the performance of the platform you’re designing for. Some hardware performs better than others. And not all design concepts are achievable on all platforms.

Design Process

Designers play a key role throughout the lifespan of a project. Not only do they champion the design, but they also help plan, build, and test the application.

Planning

Think ahead. Validate intentions by consulting team members to review concepts. Propose concepts and interactions to developers to get an accurate picture of the level of effort required to implement the desired feature. Proper communication allows the team to plan ahead and avoid potential hazards.

User Experience

Being a good designer is not only about eliminating frustrations and solving problems. It’s just as much about being thoughtful, creating an absorbing user experience, and evoking positive emotions.

Teamwork

It takes a team to build an application. While designers are empowered to create applications, software developers are responsible for everything “under the hood”. Designers create the buttons, screens, and layouts. Developers wire buttons to actions, load and unload screens, and fetch content to populate layouts, among other things.

Project Scope

Always remember that just because you can, doesn’t mean you should. Designers often have the best intentions, but their requests may seem impractical from a development standpoint. Anything is possible, given enough time and effort. But projects are driven by three aspects: deadline, budget, and scope of work. While all elements of a project are flexible, negotiations tend to focus on project scope. There should be clear objectives for an app; the scope of work must then be modelled to meet these objectives.

Final Thoughts

These are just some of the most important aspects of app design to get you started. Remember, You.i TV is about the blending of art and science. Designers and developers must work together to further the creative dialog, create new interaction patterns, and push the boundaries of technology. It’s the mixture of form, function, and delight that keeps users engaged and coming back for more.