Waves Audio Redesign Thesis Process Book by Frank JE Flitton (Revised)

5/27/2018 Waves Audio Redesign Thesis Process Book by Frank JE Flitton (Revised) - slide...

http:///reader/full/waves-audio-redesign-thesis-process-book-by-frank-je-flitto



going on...

T H

E R

E

I S

A

W A

R



THIS

PROJECT

IS A HAND GRENAD



there is a war going on for DOMINATION

of the home and pro audio recording

market where plugins are the

armaments and my project is the hand

GRENADE

this war can be so



with

__::REFINED ELEGANCE::__



1.

ESEARCH



-

MER USERAND POTEN

TIAL USER.Usually when I would play with my band, Death Cartel, or for other acts around North America I would chat with th

sound man or talk to other artists about their recording process. Universally, Waves plugins came up short despite

exceptional quality when compared to rival brands like UAD and NI.

10 years of research = Waves dated UIs inspired by the 60s+70s were lost on the 21st century creative.



FLUXIBLE:UX

CONFE

RENCE Starting off on this project, there was a lot I wanted to

change about the way the Waves plugins suite currently

looks and operates. After chatting with Kate Wilhelm,

Senior User Experience (UX) Designer at Quarry previ-ously at Blackberry and IBM, she pointed out that I have

the unique opportunity of being a potential user of the

product I would be designing and am a current user of the

existing Waves Plugin Suite.

That weekend I sat down at my digital audio workstation

but did a little mixing. I was inspecting the plugins thor-

oughly, comparing them to competing plugins and thinking

about what the Waves Audio Plugins could be. Using this

method, I made a simple list of what I like about the current

Waves Audio set up and what I would like to see changed

from a users point of view. There many more points butthey distilled down to the following:

BRANDING

The Waves brand isnt carried over the

plugins in a strong way. By making unified U

elements I can create a visual language to

communicate that these plugins are, infact

made by the same company.

USER EXPERIENCE

Many of the plugins are very different in

looks and layout. This can cause a head-

ache for users. I also hope to be able to do

more with the screen real estate to get mor

work done with less clicking.

DESIGN

The aesthetic of the programs should be up

dated to match the current state of affairs in

the audio world. These boutique plugins wi

get a sleek new skin that will add value to

the user experience and the product.

LIKES:

A/B bar

Undo button

Type in values

BPM sync control

DISLIKES:

aesthetic

analogue

skeuomorphism

unnecessary clicks

uncreative pallet

All of this brought meto the three tennants

of which my concept isfounded on.



The need for analog rack mounted themed UI

is lost on most new users. Older users found

that many of them were hard to read and harder

to use than their more modern counterparts.

From my testing, many of the waves pluginsfailed to reach the AA standard as defined by

the World Wide Web Consortium (or W3C) in

terms of colour luminance contrast and UI

elements behave differently across their large

offering of plugins.

CONCLUSION:

The plugins are constricted by their analogue

predecessors form factor.

Analog rack mount:Old school equipment that

manipulates an audio signal by measurement

of a continuous physical variable, as voltage or

pressure that is designed to be mounted onto an

equipment rack.



CLIENT NAME//

Hypothetical Waves Audio Ltd.

PROJECT//

Third Year Graphic Design Thesis

PROJECT OBJECTIVES//

Improving the quality of the visual design (UX)

Accessibility features (legibility, scaleable, type in values...)

Increace precieved value of products

Reimagine the products in a new and fresh way.

TARGET AUDIENCE//

My target users of my product will be 1835, mostly male,and have an interest in pro audio. They will be looking for

the best software that will make their work stand out and

value quality, efficiency and intuitiveness. The target user

is probably a musician. The target users will most likely

live in North America or Europe and can read English.

They often use their smar tphone and computer for busi-

ness related activities such as audio mixing and research.

DESCRIPTION

Identity - brand (look and feel of new material)

UI Kit

Redesign of 5 products

Commercial Web Page For Bundle

Mockups

UI Flat UI Interactive

Commercial Page Other (Email blast)

CUSTOMER (USER) BENEFITS//

Help customer create music and use the tools provided

by the products in a simpler and easier fashion.

SUPPORT FOR BENEFIT CLAIMS//

In dependant research/servey.

COMPETITION//

Native Instruments, Izotope, Universal Audio

DISTRIBUTION//

Online via Webpage

CREATIVE CONSIDERATIONS//

Make sure to watch for UI design trends while suporting

the boutique, top-notch quality of the Waves Audio Ltd.

products.

KEY MESSAGES//

Waves Audio is an industry leader that makes quality soft-

ware for the audio professional.

STRATEGIC FOCUS//

By utilizing iconography, keeping things si

utilizing modern UI practices in addition to

audio UI elements, the Waves Audio Ltd. p

reimagined in a new and fresh way.

TONE & MANNER//

Clean, fresh, geometric, simple

PROJECT MANDATES//LIFE SPAN

Life span would be for the next 25 years

redesign as per industry standard.

AP PR OVA L PR OC ES S/ / Feedback from peers and faculty.

TIMELINES//

Phase 1

Brief meeting

Brief/planning meeting

Student briefing

Creative concepts for identity,

ad (specifications required)

Phase 2

Finalize indentities

UI kit

Mockup chek point (2/3)

Flat mockups of plugins and UI kit

Phase 3

Create Interactive mockups

Product Page

Deliver project

DELIVERY INSTRUCTIONS//

Submit during second semester for evalua

EVALUATION CRITERIA FOR CONESTOGA S

LISTED ON PROJECT SHEET//

REFERENCE//

Fadeyev, Dmitry. 12 Useful Techniques For Good

Design | Smashing UX Design.

Smashing UX Design Usability, Psychology an

Architecture. N.p., 19 Jan. 2009. Web.

Wilhelm , Kate. How to start out in UX, stay on to

practices, and build your UX muscle. Starting Out

UX Circuit Training for Any Fitness Level. Fluxible/U

Waterloo. University of Waterloo School of Pharma

FRANK JE FLITTON//WAVES AUDIO REDESIGN

THESIS STATEMENT:

Considering their function, pro audio plugins

have a very dominant visual component.

The quality of the user interface can add definite

value to the UX and win customers away from acompetitor.

Waves Audio Ltd. makes great quality audio

plugins that lack visually. They hint at skeudo-

morphism but are visually scattered across the

septum from photo-realistic to a basic gradient.

A unified UI would greatly improve the UX and

add to the boutique quality of the Waves

plugin suites.

Improving the quality of the visual design can

help with legibility, streamline a workflow, andmake the end user more comfortable. This would

lead to better reviews, more referrals, more tuto-

rials and all around more hype.

By utilizing iconography, keeping things simple

as well as utilizing modern UI practices in addi-

tion to the traditional audio UI elements I will be

able to reimagine the Waves Audio plugins in a

new and fresh way.



My aim is to design plugins that have a

refined elegance.

Refined in terms of ease of use and in

terms of accuracy that the plugins can

convey. Elegant in terms of the overallpresentation.

The display is overall easier to read

and displays elegance of a consistent

design set. Ability of using an ana-

logue feel with digital accuracy to pro-

duce music in the 21st century.

The best of the past with an eye on

the future.

A Graphical User Interface (GUI)shouldnt be something thats hard to

read or something in which its parts

seem disconnected. With a consistent

design the user knows what to expect

in the interface presentation univers-

ally in whatever plugin the purchase

may be.



1.

ATH WAYO VICTORY

starts ugly,

gets bette



IS WON BYUNCON-

VENTIONAL



the first attempt was a lackluster:

Original Rework

It has the soul, but is misguided, cluttered and confused.

//*A horrible solution.

My attempt at refined elegance was more c

fusing than the original and did little to imp

the UX. The changes should be more drast



FAIL QUICLY AND

CHEAPLY



the second attempt was worse:

Original Rework

Fischer-Price called,

they want their hopes and dreams back #emotions

//*Another horrible solution.

This was just a new skin that did not live up

the companies boutique standard and, fran

looks like it could be a toy. Again, the chang

should be less superficial.



THIRD TIME

IS THECHARM...



the third attempt something magical happened:

I noticed that the vector outlines of drawing the

UI elements functioned better than when I

coloured them.

This new direction has a raw infographic feel

that captures the refined elegance the

audio creative of the 21st century craves.

By allowing mulitiple input methods for manual

fine tuning or typing in values it meets acces-sibility standards. Also, all of the colours have

a contrast exceding 4.5:1 (AA WC3 contrast

standard for small type in a layout) to ensure

that all the users can use these UI designs for

years to come.



.

HE PLANSVOLUTION



Images from my original concept:

These original knob designs show how the design process

came full circle.

Their streamlined form allows the user to modify multiple

related properties of the effect while saving screen space.

It is also a visual illusion to a knob like on a mixing board

which will help older users feel at home and be a conve-

nient metaphor for new users that have experience with

using hardware like an electric guitar or guitar pedals.



PHIPHIPHIPHIPHIPHI

PHIPHIPHI



The new design is based off of phi/Fibonacci.

For Example:

The spacing of the white tracks on the knobs

is 1 pica, interior padding is 1 pica and the in-

terior elements are is 2 picas tall.

It all fits together forming a modular UI that can

be adapted across a suite of other plugins. As

a proof of concept, I chose to pull the design

across five plugins including:

L2 Ultramaximazer

Center

Vocal Rider

W43

Renaissance Compressor

These plugins have common UI elements

found in audio effect plugins as well as a

customized component.



My sketches to arrive at UI components:

Sliders

Threshold gauges SolutionButtons

For this third attempt, I started from scratch and gradually

stripped the elements back to their most baisic forms.

The button graphic in this

setting is comparable to a

track slider on a typical

mixing board.

-12. 5- 12.5

-12.5

-12. 5- 12.5

-0.2

NORMAL

TYPE 1

24 BTS

NORMAL

TYPE 1

24 BTS

NORMAL

TYPE 1

24 BTS

-10.0 -1 0. 0 -10.0

THRESH

-10.0

THRESHOL DTHRESHOL D

-10.0



My sketches to arrive at UI components:

Knobs

Finals used in comps Solution

In addition to setting values,

this knob model has the abil-

ity to let the user maniplulate

the signal.

THRSHOLD-12.5

-12.5 -12.5

THRESHOLD-12.5

-12.5 -12.5

threshold-12.5

-12.5 -12.5

threshold

-12.5

-12.5 -12.5 =

spread

74%

74% L 74% R =

spread

74%

74% L 74% R =

spread

74%

74% L 74% R

threshold

-12.5

-12.5 -12.5

=

slider

2 option

52% L 90% R



3.

ATTLESHAT WON

HE WAR



Like anything, the layouts started on paper. Here are select scans from my sketch books:



UISIDE/SIDE



Original Rework

This plugin was an experiment to display the information in

three different ways: The ring, waveform and knob/dials.



Origional Rework

If you watch a tutorial of how to use this plugin, you will

quickly see that its fuction is confused by its form.

The rework may appear to have more going on but it takes

the user through the workflow in reading order.



Exploration:



Original Rework

As a proof on concept, this plugin illustrates how sliders could

be used as part of an equalizer (EQ). Note that the rework

displays the value so that the user has an acute awareness.

The type could also be a text field to deliver more control.



Original Rework

This simple compressor is much more space effecient.

It quickly lets the user make their adjustments in this com-

pact UI.

The output knob shows the

adjusted level inside the track.



Original Rework

Used to enhance or supress stereo sounds, the Centers

dated UI is restrictive and the small knobs make it hard to

target specific sounds.

By blowing up the center

ring and placing the controls

along it the function and use

becomes more clear.



Rework

The Center plugin makes use of graduated panning by

using the equationy = 0.006*x^2+0.3*xto redistribute the

values where y is the adjusted angle and x is the desired

perceived percent toward a side from the center. This will

allow the end user to accurately place and isolate the

fringe frequencies in the signal giving as perceived by the

listener. This will help in giving the user a wider sounding

mix that is true to the placement of the markers in the UI.

SIMPLE EX PLANATION:

When stereo audio is panned (a process of splitting the sig-nal more to the left or right bus by a set amount) it is often

split along a curve as opposed to a linear one.

For example, 30 is interpreted as half way, 50%, to a sideas opposed to the linear interpretation of 4 5.

0.0

3.75

8.68

14.97

21.81

29.94

39.30

49.80

60.19

72.50

90.00

deg

to

turn

graduated panning curve

(if 30deg = 50% then)

% of panning



GOTTA ANI-MATE /

PRESENT.Thanks for reading!



Original Statement:

Considering their function, pro audio plugins have a very dominate visual component. The

quality of the user interface can add definite value to the UX and win customers away from a

competitor. Improving the quality of the visual design can help with legibility, streamline a

workflow, and make the end user more comfortable. This would lead to better reviews, morereferrals, more tutorials and all around more hype.

Waves Audio Ltd. makes great quality audio plugins that lack visually. They hint at

skeudomorphism but are visually scattered across the septum from photorealistic to a basic

gradient. A unified UI would greatly improve the UX and add to the boutique quality of the

Waves plugin suites. By utilizing iconography, keeping things simple, utilizing modern UI

practices in addition to the traditional audio UI elements I will be able to reimagine the

Waves Audio plugins in a new and fresh way.

Accessibility Features:High contrast colour layouts adhere to AA and AAA standards for luminance to enhance

readability for low vision of different types of colour blindness. The minimum luminance

contrast for small text to achieve AA is a contrast ratio of 4.5:1. The font Helvetica Heavy

set in lowercase (where possible) was chosen for its outstanding legibility at small sizes. The

red and green hues were chosen as they are audio industry standard colours.

By using a grid the UI elements are easier to get acquainted with across the effect suite and

are easily identified.

The interfaces elements are also designed in a way to allow function in a touch input basedenvironment. This may be more relevant in the future as more tablets are equipped with full

operating system distributions and touch panels become affordable for desktop and laptop

workstations.

Any sliders have a text field companion where the user can input a desired number directly

into the program. In addition to making this more accessible it is a definite value added

feature for advanced users that will calculate various measurements relating to their sound

like delay or reverb timings or compression settings based on their signals input metrics and

various equations.

Why Circles?

Music and audio in general is based on revolutions of patterns whichin theoryare non-

terminating. The clearest examples of this are tones and scales where they can be express as

the linear sequence ABCDEFG but start again at A or G. This can also be seen

mathematically where 440Hz, the A note, is the same note but an octave lower when halved

to 220Hz or an octave higher when doubled to 880Hz.



Circular knobs are also an extremely efficient UI mechanism that is often found on audio

equipment like guitar effect pedals and rack mounted units alike. In theory, one may fit three

knobs with padding in the same area that a track from a slider would take if the width of the

sliders grip and the knob are the same. (C=2 r DRAW DIAGRAM)

In addition, the perceived gradual nature of audio (many of the numbers are perceived to

ease in and out when listening) the visual of a circle provides a convenient vehicle.

Common UI Components:

Sliders: Often in a vertical orientation, these are often used to control the volume of the

signal in whole or part. It is most commonly found representing input/output levels to

mimic a mixing board. By listing the numeric value on the face of the slider the user can

easily find the sweet spot manually or type in values.

Buttons: Commonly representing binary commands (on and off). Dropdowns are signifiedby the double dot underneath the button. If the buttons are circled then they are related

commands to the plug-in. Inactive plugins lack a coloured border, it is black.

Gradual Panning:

When sound is coming from two speakers at equal levels it is perceived that the sound is

coming from a position between the two of them. This front position is only seen as

center from HRTF (head related transfer function) when listening with headphones.

When the level of the sound is inconsistent from the two speakers the ear interprets binaural

sound somewhere in 3D space. With a typical two speaker set up, the sound would fall

somewhere along the x-axis going from left to right.

When stereo audio is panned (a process of splitting the signal more to the left or right bus by

a set amount) it is often split along a curve as opposed to a linear one. For example, 30 is

interpreted as half way, 50%, to a sideas opposed to the linear interpretation of 45. To

help the end user take advantage of this phenomenon and place their sounds accurately and

in context many modern digital audio workstations interfaces such as Acid, Logic and

Studio One implement an easing feature when manipulating stereo (left and right channel)

audio panning.

The Centerplugin makes use of this feature by using the equation y= 0.006* x 2+0.3*xto

redistribute the values whereyis the adjusted angle and xis the desired perceived percent

toward a side from the center. This will allow the end user to accurately place and isolate the

fringe frequencies in the signal giving as perceived by the listener. This will help in giving

the user a wider sounding mix that is true to the placement of the markers in the UI.

Date post:	17-Oct-2015
Category:	Documents
Upload:	frank-je-flitton
View:	5,236 times
Download:	0 times

Waves Audio Redesign Thesis Process Book by Frank JE Flitton (Revised)

Documents