A Broader Concept

Hype was initially developed to build HTML5 animations with no hassle. However, we quickly realized that people were using it to create prototypes, animated e-books, web banners and more.

We received tons of feature requests from creators across the spectrum of interaction design, web design, and graphic design, and began zeroing in on a set of features to make Hype more powerful and maintain its approachable interface.

Projects created with Hype are fueled by HTML5 technologies.

Unlike Photoshop, Sketch, or After Effects, Hype lets designers add animations and interactivity so they can communicate more than just the visual aspects of their design. They can polish the user experience of their designs by creating interactive prototypes they can play with and demonstrate directly in browsers and on actual devices.

A revamped User Interface

Pretty early on in the process of making Hype 3, we decided we wanted to focus on the interface. Version 1 looked very ‘Native’ in the initial release, but we realized it was time for an update.

The overall idea for the redesign was to keep a strong Mac OS X look and feel. We wanted to make the app as intuitive as possible and move beyond the Keynote-like interface to give the UI a much stronger personality.

All-in-one window

The previous version was clearly inspired by Apple’s Keynote presentation app with floating panes and inspectors. While it felt at home on OS X, we knew the interface needed a bit more personality; an identity unique to Hype.

We heard from Hype 2 users that the floating inspector and color picker panes interfered with their work. Before Hype 3 & Hype Pro, the inspector, color palette, and resource library floated over everything, often blocking content or the timeline. Especially on small screens, the interface could become a cluttered mess with everything active at the same time.

We decided to opt for an all-in one layout with everything accessible in one window. No more covering up. The most important panes (inspector, resource library) would be part of the main window while the secondary panes that are only visible to set or tweak properties would be popovers which disappear after use.

It was also important to us that creative users could customize their workspace. Space is precious, especially on smaller laptop screens. In Hype Pro panes can be hidden and rearranged.

Popovers over dialogs

Dialog windows tend to cover content. They also include an additional step to each interaction: the OK or Cancel button. Converting floating palettes and inspectors to popovers ensures that nothing distracts from the content.

An interface designed for designers

I personally use Hype for hours everyday. I somehow felt more comfortable using Photoshop all day long than I did using Hype with its light gray, really bright interface — especially in fullscreen mode.

To really make content pop, we began working on a dark interface with the goal of helping users focus on their animations and content, and not the various toolbars, buttons, and interface elements. We opted for a darker UI.

The re-redesign

Early in June of 2014, after 5 months spent on Hype Pro’s development, Apple unveiled the OS X Yosemite update which included a general facelift of the user interface. This meant new typography, flatter general look and feel, and vibrancy we have all come to understand as the ‘new normal.’

The introduction of OS X Yosemite forced us to re-redesign the whole app.
From the ground up.

Revamping the inspector

The inspector is the spine of Hype. It provides control of every single aspect of every element of a Hype project and must be legible, clear, and comprehensive.

In Hype 2.5 the inspector was already pretty clear, but felt a bit cramped, due to the use of small fonts and the multiplication of divider bars everywhere.

The idea behind the inspector redesign was to clean up the layout, redefine the options and divide them by simple lines. One other aspect was to add a hierarchy. You first see the title of the pane, a group of settings and then the actual settings. We wanted users to quickly scan through the panes to help them work more quickly.

Updating the timeline

Another important part of the user interface is the timeline. It not only controls animation, but also element management, locking, hiding, and reorganizing similar to layers in Photoshop.

The structure of the timeline in 2.5 worked just fine, however there were two UX problems we had to address. The first was the record button. It’s a pretty popular feature but in previous versions the button was opposite the timeline controls. To make recording easier we grouped everything together on the left side.

Next, we created element-type icons. For each element, an icon now represents the type of element, a shape, text, image, etc.. The idea was to help users visually filter their elements at a glance.

A new visual identity

The first impression you have of an app is its icon.
Since version 1.5, Hype has been represented by an animator’s light table as an icon. Animation is the reason why the app was created in the first place. It was important to us to keep this concept as a reference.

The new icon was designed after Yosemite’s release. We felt like we had to comply to the new visual direction to make Hype Pro feel natural in the new OS.

Typography

Even though Yosemite imposed Helvetica Neue as a default font, it was important for us to keep some title treatments on alternative windows in the app looking like Hype and like any random Mac app.

For instance, the trial window is the first thing you see when you download the app for the first time. This window should convey the Hype identity through its icon and font that users might already know from the Hype landing page.

Hype Pro is the result of fourteen months of both fun and hard work.

We set out to build a product that fits in with OS X but also has its own personality. We listen to our users’ feedback and work to deliver the best piece of software possible.

Being able to redesign an app from the ground up is a privilege; I hope you’ll enjoy creating stuff with Hype Pro as much as we enjoyed crafting it!