Brand: EmotionID Project: UX Design, JS Live Demo for Face / emotion tracking. The client ask me for a UI for their live demo, after several wireframes and understanding what are the outputs of the software, I proposed a timelined chart as main element. One of the client requierements was to make a functional design, a UX for a tool, usable and easy to understand.
Diferent icons allowed to visualize diferent aspects of the tracking, in the example collapsed overlaping graphs representing emotions. timeline slider, allows to pan and zoom the timeline
The design had to work well in tablets and desktop browsers.
emotion keyframe captured from the webcam keyframe captured from the tested video
Producing icons to swithc between the different visiualization posibilties I designed several variations and I tested with sample of people which were the most understandable ones.
ďŹ lter emotions key moments whole video
split graphs overlap graphs
emotions dimensions
Minimalistic UI was proposed during the capture. Icons to represent the status of the capture and a simple player that took most of the screen.
your emotions average emotions
TOOLTIPS
Brand: EmotionID
BUTTON EVENTS
Tooltip H
MouseOut
Project: UI design manual. The client requested a manual for their developers in order to produce sistematically the frontend and produce future elements without the supervision of a designer.
MouseOver
Tooltip V
SelectMenu Tooltip vertical
MouseOut
Museo 500, size 24
MouseDown
MouseOver 8px
6px
6px
5px
48px
44px
42px
44px
A min 12px
Opacity 30%
Tooltip Horizontal
6px
6px
12px
Text
44px
44px 12px
12px
12px
12px
12px
44px
Outline +2px
In order to do that I decided to produce it a document incorporating all the visual elements and the basic rules of color, position, size, fonts, distances... etc.
12px
Outline -1px
WEBSITE: Header
logo #888888, font Museo 500, size 8px
BUTTONS
COLOR CODES
logo #C88700, font Museo 900, size 22px
dark
Active
Having this guide was apreciated by coders and client, and helped to boost the production. An extract of the manual can be downloaded here.
SelectMenu
HEADLINE: font: Museo 500, size 24
44px
A min 12px
#750F05
#FF3017
#750F05
znechutenie
#C88700
#FFCA2A
#C88700
strach
#009911
#00F92F
#009911
radosť
#006666
#006666
#006666
smútok
#002277
#0045FB
#0045FB
prekvapenie
#770077
#FF3EF4
#FF3EF4
neutrál
#555555
#888888
#888888
12px
Text
12px
icon < 32px
A min
EmotionID
hnev
bkg: #FFFFFF
Opacity 25%
6px
light
24px
12px
Logo Animations Logo will animate cycling colors (on rollover)
Logo will animate into a smiling face (gif animated)
POPUP COLOR CODES
12px
#1F283A For normal warnings.
#009CA7 For succesful processes
FONTS
BUTTONS
title #888888, font Museo 700, size 24px
WEBSITE: Home,
title #888888, font Museo 700, size 48px HEADLINE (H1): font: Museo 700, color #888888, size 36px, leading 36px
Headline lorem ipsum dolor. SUBHEADLINE (H2): font: Museo 700, color #888888, size 18px, leading: 18px
Headline lorem ipsum dolor sit amet.
BODYTEXT: font: Arial, color #666666, size 14: leading 18px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
bkg #D
Rozumieme reči tváre
Disabled
With Icon
normal
text #999999
title #888888, font Museo 700, size 14px
Active
Kto chce byť efektívny, musí vyvolať emócie
3x
väčšia pravdepodobnosť, že si človek reklamu dopozerajú do konca
8x
viac preklikov
20x
vyššia konverzia na sociálnu akciu
100x rýchlejší nárast sledovanosti
Disabled Opacity 25%
HEADLINE: font: Museo 500, size 24
Emócie formujú naše zážitky, interakcie a rozhodnutia. Sú kľúčom k úspešným mediálnym a biznisovým výsledkom Emócie sú prvý signál, ktorý mozog dokáže vyprodukovať ako odpoveď na podnet. To znamená, že všetky naše reakcie sú najprv emočné až následne si ich racionalizujeme.
With Icon
6px size 48px 44px bkg #BBBBBB, 6px round corners
A min 12px
12px
Text
12px
icon < 32px
A min
24px
12px
12px
“Emočné reklamy sú 11x efektívnejšie pre rast trhového podielu” Donald Gunn, The Gunn Report
“Emócie čítané z tváre sú najpresnejším obrazom nášho prežívania” Dr. Paul Ekman, psychológ a expert v oblasti skúmania emócií
#000000, font Museo 700, size 14px
32x32 matrix to create button icons 44px
140px
Vyskúšajte si demo
180px
New Play again Share Report Record Remove
220px
#6
For prob
#C Temporal
Brand: SEAT Project: GAME UI + concept, Loading game Released in 2004, Was a small game originally designed to be "loading game" for a bigger microsite. The secondary purposa was to let the game be spread around game portals, something that was achieved very quickly, actually the game is listed in more than 100.000 game portals. you can play it for example in this link: http://goo.gl/1Y2aD
Brand: typeForm Project: UI game Typeform, survey based company, askme to design a very simple game to promote their products. The concepts are, the boring forms are the evil, and typeform is here to protect us from their boredom. The game used form elements as enemies
Brand: CSOB Project: Desing / coding car sticker customizer This microsite from 2007 was a request from a CSOB bank, to promote their mandatory car insurance. They offered a free customized sticker for your car, instead of the neutral “baby on board”, the catch was that to pick the sticker you have actually to pick a CSOB branch for the collection. They asked for a kids friendly design so the parents and kids can design the sticker together. I designed and coded the frontend and backend myself in AS2 and PHP. The illustrations in the stickers are from Alex Blanco. The project included a small intranet for the printshop, where the sticker including a code was printed. the archived version of the website is still available here: http://digital.muw.sk/dietavaute/
Videocapture of the webe> https://youtu.be/-BehCsXRKAc
Brand: Telekom Exoti
http://www.exoti.sk
Project: Microsite For Telekom I designed a microsite to introduce the main characters of a online reality show, the audience was able to vote for them, challenge them and even vote for what they should be wearing.
Videocapture of the website: https://youtu.be/HTB7ZszgC1c
http://www.exoti.sk
Brand: Koft
http://www...
Project: UI website design One of the biggest importers of premium spirits requested a corporate website with the portfolio of brands as a main content.
koft.sk
I proposed to have a common, simple and elegant structure taht was skined for each brand. http://www.koft.sk
http://www...