Issuu on Google+

CAREN KWA N VISUAL DESIGNER


WHO I AM I’m inspired by everyday challenges and am constantly fascinated by the emotional relationship between a user and an object.

minimal color

clever

hero

biomimicry

typography

Enhancing someone’s life motivates me to create smart designs.

texture

brave


EMOTIVE BRANDING logo exploration application icons landing page vectors visual design interface

emotive, inc.

white labeling


BEFORE AND AFTER LOGO

logo exploration


CONCEPT EXPLORATION

CONCEPT EXPLORATION


CONCEPT EXPLORATION

CONCEPT EXPLORATION


CONCEPT EXPLORATION

CONCEPT EXPLORATION


FINAL CONCEPTS

FINAL LOGO DESIGN The final logo design incorporated the original “e” into a cloud within a negative space, allowing the “e” to be incorporated within any environment.


EMOTIVE COLOR STUDY

what i did: • remove dull color / replace with cyan • took out three dimensional look / add a flat graphic • utilize negative space as needed


BRANDY IDENTITY LOGO USAGE

x x

application icons

2x xx Minimum space requirements for placement.

Example with rule applied.


CONCEPT EXPLORATION

ICON EXPLORATION These icons were primarily made under the intention of a re-design of the mobile application site.

$

Color scheme, stroke sizes and stylizing were considered to act as one icon family.

#1

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

?

?

SAMPLE


SAMPLE

SAMPLE

$

landing page

SAMPLE

SAMPLE

#1

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

SAMPLE

? ?


MOCK UP #1

EMOTIVE LANDING PAGE I developed some mock-ups for the “landing page� of the application during the initial phase of development.

Edit

Approve Pay Invoice

Three different styles were conceptualized into the Emotive brand.

View invoices from the field

Edit

Approve Pay Invoice

$

Approve Pay Invoice

Contact Lookup Keep in contact with your customers

Contact Lookup

Contact Lookup

Keep in contact with your customers

Keep in contact with your customers

Quickly view sales forecasts

Get Invoice Status Stay on top of your invoices

Discount Approval

Field History Report View reports from the field

3 Library

Forecasted Amount Report

Quickly view sales forecasts

Quickly view sales forecasts

Get Invoice Status

Get Invoice Status

Stay on top of your invoices

Stay on top of your invoices

Discount Approval

Discount Approval

Lose no time approving discounts

Lose no time approving discounts

Field History Report

Field History Report

View reports from the field

View reports from the field

Settings

More

Inbox

Library

Settings

Favorites

Inbox

Approve Pay Invoice

Approve Pay Invoice

View invoices from the field

View invoices from the field

Contact Lookup

Contact Lookup

Keep in contact with your customers

Keep in contact with your customers

Forecasted Amount Report

Forecasted Amount Report

Quickly view sales forecasts

Quickly view sales forecasts

Get Invoice Status

SAMPLE

Stay on top of your invoices

Discount Approval

SAMPLE

Lose no time approving discounts

Field History Report

SAMPLE

View reports from the field

3

3 Favorites

Lose no time approving discounts

Inbox

Forecasted Amount Report

Edit

Edit

View invoices from the field

View invoices from the field

Forecasted Amount Report

Favorites

Edit

Settings

More

Favorites

Inbox

Stay on top of your invoices

Discount Approval Lose no time approving discounts

Field History Report View reports from the field

3

3 Library

Get Invoice Status

Library

Settings

More

Favorites

Inbox

Library

Settings

More


MOCK UP #2

MOCK UP #3

Edit

Approve Pay Invoice

$

View invoices from the field

Contact Lookup Keep in contact with your customers

Forecasted Amount Report Quickly view sales forecasts

Get Invoice Status Stay on top of your invoices

Discount Approval Lose no time approving discounts

Field History Report View reports from the field

avor tes Favorites F i

n ox Inbox I b

Approve Pay Invoice

Approve Pay Invoice View invoices from the field

View invoices from the field

Contact Lookup

Contact Lookup

Keep in contact with your customers

Keep in contact with your customers

Forecasted Amount Report

Forecasted Amount Report

Quickly view sales forecasts

Quickly view sales forecasts

Get Invoice Status

Get Invoice Status

Stay on top of your invoices

Stay on top of your invoices

Discount Approval

Discount Approval

Lose no time approving discounts

Lose no time approving discounts

Field History Report

Field History Report

ettings Settings S

or More M e

avor tes Favorites F i

n ox Inbox I b

SAMPLE

SAMPLE

3

3 rary Library Lib

SAMPLE

View reports from the field

View reports from the field

3

Edit

Edit

Edit

rary Library Lib

ettings Settings S

or More M e

avor tes Favorites F i

n ox Inbox I b

Edit

Approve Pay Invoice

Approve Pay Invoice

View invoices from the field

View invoices from the field

Contact Lookup

Contact Lookup

Keep in contact with your customers

Keep in contact with your customers

Forecasted Amount Report Quickly view sales forecasts

ettings Settings S

or More M e

avor tes Favorites F i

$

Edit

Edit

Approve Pay Invoice

Approve Pay Invoice

Approve Pay Invoice View invoices from the field

View invoices from the field

Contact Lookup

Contact Lookup

Contact Lookup

Keep in contact with your customers

Keep in contact with your customers

Keep in contact with your customers

Forecasted Amount Report

Forecasted Amount Report

Forecasted Amount Report

Forecasted Amount Report

Quickly view sales forecasts

Quickly view sales forecasts

Quickly view sales forecasts

Get Invoice Status

Get Invoice Status

Get Invoice Status

Stay on top of your invoices

Stay on top of your invoices

Get Invoice Status

Stay on top of your invoices

Stay on top of your invoices

Discount Approval

Discount Approval

Discount Approval

Lose no time approving discounts

Lose no time approving discounts

Discount Approval

Lose no time approving discounts

Lose no time approving discounts

Field History Report

Field History Report

Field History Report

View reports from the field

View reports from the field

Field History Report

View reports from the field

View reports from the field

n ox Inbox I b

View invoices from the field

3

3 rary Library Lib

Edit

rary Library Lib

ettings Settings S

or More

M e

Favorites

Inbox

3 Library

Settings

More

Favorites

Inbox

Quickly view sales forecasts

SAMPLE

SAMPLE

SAMPLE

Get Invoice Status Stay on top of your invoices

Discount Approval Lose no time approving discounts

Field History Report View reports from the field

3

3 Library

Settings

More

Favorites

Inbox

Library

Settings

More

Favorites

Inbox

Library

Settings

More


MAKO SURGICAL I used this image of a surgical device as a reference to design a vector that was used in a powerpoint presentation.

vectors


PRESENTATION

SIEMENS “FLOW” ICONS

The vector image is used in a powerpoint presentation that was shown to Mako Surgical.

This project was directed for Siemens and I created an individual font for their machining system. On

Off

Manual

Automatic

Open

Close

Ok

Fault

Connected

Disconnected

Emotive platform ANDRIOD

JAVA C

IO S

SMARTPHONE CONTAINERS

WINDOWS H TML + NATIVE C O DE

IOT DEVICE LIBRARIES

O B JECTIVE C C# JAVASCRIPT

EMOTIVE CLOUD PLATFORM

OBJECT REPOSITORY

DATA SERVICES

SECURITY SERVICES

BUSINESS LOGIC MESSAGE SERVICES

DISTRIBUTED CLOUD INFRASTRUCTURE 63

Alarm

Warning


BALFOUR BEATTY ICONS

VODAFONE ACTION ICONS

This project was directed for Balfour Beatty and I created an individual font for their status and delivery method systems.

This project was directed for Vodafone and I created vector fonts that was implemented into a graph chart. Complete

Inactive

Active

Preconception

Undefined

CM at Risk

General Contractor

DB Contractor Lead

CM Agency

Cost Plus GMP

GMP

Cost Plus

CM Multi Prime

LS

CP

Lease Lease Back

Lump Sum

Program Mangement

Professional Services

Private (Profit/ Non-Profit)

Interior Design

DB Integrated


SIEMENS “FLOW” APP This was an application designed for Siemens for their “Flow” application. This was a collaboration between the Senior Design Lead, Darrell Sano and I.

visual design interface


EMOTIVE WALKTHROUGH This was a prototype that was to be developed as an “walkthrough” of what a customer of Emotive would initially see when they start the app as an introduction.


SPLASHSCREENS MOCK-UP #1

Welcome to Emotive! Build and manage smar t conencted applications

Let’s take a look around... Skip


SPLASHSCREENS MOCK-UP #2

X

Welcome to Emotive!

brian@emotive.com

Password Login

>

Forgot Password?

Email

email@domainname.com Login License Agreement

>

Build and manage smar t conencted applications

Let’s take a look around... Skip


SPLASHSCREENS MOCK-UP #3

X

Welcome to Emotive!

brian@emotive.com

Password Login

>

Forgot Password?

Email

email@domainname.com

Login License Agreement

>

Build and manage smar t conencted applications

Let’s take a look around... Skip


WIKI TRAVEL APP WIREFRAMES X AT&T

12:34 PM

AT&T

12:34 PM

brian@emotive.com

Login Forgot Password?

Email

Local Guide

Welcome to the UK Bobby!

Password

Welcome Bobby

> Nearby

Local Guide

Restaurants

Nightlife

Fino

Dabbous

Shangri-La Hotel

The Cumberland Hotel

email@domainname.com Login License Agreement

>

LondonForecast 12PM

1PM

72º

73º

2PM

75º

3PM

75º

4PM

74º

6PM

7PM

72º

8PM

69º

9PM

64º

Home Screen

61º

Local Guide


AT&T

12:34 PM

AT&T

12:34 PM

AT&T

AT&T

12:34 PM

Emergency Help Local Calls

11

rh@globaltech.com

Fire

Welcome Bobby

Welcome Bobby

Welcome Bobby

Robert Harrington

mbulance

In Touch with Time

Roaming

Welcome Bobby

PoliceA

12:34 PM

12

1

10

Dipock Dasser

dipock@wonderbread.com

Andrew Wallace

$ 0.99

$ 0.99

England

England

per min

9

4 7

6

11

12

Family & Friends

Emergency Numbers

Emergency Contacts

Robert Harrington

$ 0.99

$ 1.59

$ 0.99

to USA

to India

to Ireland

per min

per min

6

SMS SendingS

MS Receiving

12

$ 0.40

free

England

England

per sms

Send

Emergency Help

Clear

Notify Friends

11

4 6

5

Delhi

3 4 6

5

Chicago

3 7

2

7

2

8

1

8

1

9

12

9

5

10

5

10

Paris

per min

6

11

4

11

Enter your message here...

7

3 7

3 4

New York 2

8

2

8

1

9

1

9

5

10

12

10

London

Outbound Calls

andrew@evenplay.com

3

8

per min

11 2

12

1

10

2

9

3

8

4 7

6

5

Tokyo

per sms

Roaming

In Touch With Time


AT&T

AT&T

12:34 PM

12:34 PM

AT&T

Voice Over IP Welcome Bobby

Send

Clear

Suggestion Box

Welcome Bobby

1

2

3

4

5

6

7

8

9

*

0

#

AT&T

12:34 PM

12:34 PM

Find Me

Call Stats

Welcome Bobby

Welcome Bobby

I Agree

Call

Voice Over IP

Call Status

Find Me


WIKI TRAVEL APP This project was directed for Wiki Travel App and I designed the “Local Guide,” (including the vector icons) “In Touch With Time” and “Voice Over IP” pages and collaborated on the other pages with the Design Director, Darrell Sano.


EMOTIVE WHITE LABEL: VODAFONE I created a white label design for our client, Vodafone. This was used to show Vodafone what they could possibly use to rebrand for themselves to use.

white labeling


1.1

Emotive White Label: Vodafone 1.1 Text and Inset Text Color 1.2 Splash Screen Image 1.3 Brand Image & Header Background 1.4 App Icons 1.5 Profile Landing Screen 1.6 Entry Image on the Profile Landing Screen 1.7 Entry Image Samples on the Profile Landing Screen 1.8 Screenshots

Text and Inset Text Color

Emotive White Label: Vodafone

Red #ED1C24 Dark Red #AA3539

Text color and inset color may be specified. Inset text color may be used for emphasis, or to differentiate text. The app name is a grey assigned to insetTextColor, and the description is white assigned to textColor.

Font Colors: backgroundColor #FFFFFF headerColor (top light) #ED1C24 headerColor (bottom-dark) #AA3539 headTextColor #FFFFFF InsetListTextColor #535352 textColor #000000


1.2

1.3

Emotive White Label: Vodafone

Emotive White Label: Vodafone

Brand Image & Header Background Color

Splash Screen Image

M / 34 x 33

XL / 64 x 62

A brand header appears on every screen in the MMC container.

A splash image is briefly displayed on initial application loading. A graphic is prepared to sit on a specified background color that is displayed throughout the MMC container. The image fits within 7 sizes to accomodate PPI.

H / 47 x 46

320 x 460

640 x 920

640 x 1096

768 x 1004

1024 x 748

Brand Image: A graphic is prepared to sit on a specified background color and fits within 3 sizes to accomodate PPI.

M / 125 x 25

H / 220 x 40

48 x 48 px 47 x 46 px 64 x 62 px

320w x 460h 640w x 920h 640w x 1096h 768w x 1004h 1024w x 748h 2008w x 1536h 1536w x 2008h

Header Background Color: A graphic is prepared to sit on a specified background color and fits within 3 sizes to accomodate PPI. Medium: 125w x 25h High: 220w x 40h Extra-high: 300w x 50h

2008 x 1536

1536 x 2008

XL / 300 x 50


1.4

1.5

Emotive White Label: Vodafone

App Icons

Profile Landing Screen

Apps require an icon to display in the Favorites view of the container.

The graphic style of the default profile image be be determined by the organization, and used instead of the Emotive default.

A graphic fits 5 sizes to accomodate PPI. 48 x 48 px 57 x 57 px 72 x 72 px 114 x 114 px 144 x 144 px

48 x 48

57 x 57

72 x 72

114 x 114

144 x 144

A graphic is prepared to sit next to the user name and fits 3 sizes to accomodate PPI. Medium: 57w x 57h High: 72w x 72h Extra-high: 114w x 114h

Emotive White Label: Vodafone

M / 57 x 57

H / 72 x 72

XL / 114 x 114


1.5

Emotive White Label: Vodafone

1.6

Profile Landing Screen

Entry Image on the Profile Landing Screen

The graphic style of the default profile image be be determined by the organization, and used instead of the Emotive default.

An entry image appear’s on a user’s profile landing page.

A graphic is prepared to sit next to the user name and fits 3 sizes to accomodate PPI. Medium: 57w x 57h High: 72w x 72h Extra-high: 114w x 114h

M / 57 x 57

H / 72 x 72

XL / 114 x 114

Emotive White Label: Vodafone

A graphic is prepared to sit on the specified background color and fits 4 sizes to accomodate PPI. Medium: 600w x 480h High: 600w x 650h Extra-high: 680w x 750h Extrax2-high:1360w x 1500h

M / 600 x 480

H / 600 x 650

XL / 680 x 750

XXL / 1360 x 1500


1.8

VODAFONE SCREENSHOTS

Emotive White Label: Vodafone Profile Landing Screen

Vodafone Icon 2.

1.

Screenshots of the dashboard, splash screen and startup screen on an iPhone 4.

3.

Screenshots brian1 Profile Name

Vo do an fe

1. Dashboard screenshot of Vodafone launcher icon iPhone: Retina display: 114 x 114 px 57 x 57 px iPhone Settings: 29 x 29 px

Dev Start

iPad: Retina display: 144 x 144 px 72 x 72 px Android Phone: 48 x 48 px: 160 dpi 72 x 72 px: 240 dpi

A

T

&

T

A

2. Vodafone splash screen Medium: 320 w 480h High: 480w x 960h Extra-high: 640w x 960h

3. Vodafone startup screen and profile landing screen and entry image. Profile Image: Medium: 300w x 240h High: 376w x 300h Extra-high: 600w x 485 h Entry Image: Medium: 300w x 240h High: 376w x 300h Extra-high: 680w x 500h Extrax2-high: 1360w x 1000h

Vo

do an fe

T

&

T

A

T

&

T

brian1 Profile Name Dev Start

Powered by Emotive

Vodafone Splash Screen

Entry Image

P wo e

r

e

de

b

y

E

m

o

t

i

v


1.1

Emotive White Label 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8

Text and Inset Text Color Splash Screen Image Brand Image & Header Background App Icons Profile Landing Screen Entry Image on the Profile Landing Screen Entry Image Samples on the Profile Landing Screen Screenshots

Text and Inset Text Color Text color and inset color may be specified. Inset text color may be used for emphasis, or to differentiate text. The app name is a grey assigned to insetTextColor, and the description is white assigned to textColor. Font Colors:

backgroundColor #00AEEF headerColor (top light) #00AEEF headerColor (bottom-dark) #00AEEF headTextColor #00AEEF InsetListTextColor #00AEEF textColor #FFFFFF

Emotive White Label

#00AEEF


1.2

1.3

Emotive White Label

Splash Screen Image

Brand Image & Header Background Color

A splash image is briefly displayed on initial application loading. A graphic is prepared to sit on a specified background color that is displayed throughout the MMC container.

A brand header appears on every screen in the MMC container.

320 x 460

640 x 920

640 x 1096

768 x 1004

1024 x 748

The image fits within 7 sizes to accomodate PPI.

Brand Image: A graphic is prepared to sit on a specified background color and fits within 3 sizes to accomodate PPI.

Emotive White Label

M / 34 x 33 H / 47 x 46

XL / 64 x 62

M / 125 x 25

H / 220 x 40

48 x 48 px 47 x 46 px 64 x 62 px

320w x 460h 640w x 920h 640w x 1096h 768w x 1004h 1024w x 748h 2008w x 1536h 1536w x 2008h

Header Background Color: A graphic is prepared to sit on a specified background color and fits within 3 sizes to accomodate PPI. Medium: 125w x 25h High: 220w x 40h Extra-high: 300w x 50h

2008 x 1536

1536 x 2008

XL / 300 x 50


1.4

Emotive White Label

1.5

App Icons

Profile Landing Screen

Apps require an icon to display in the Favorites view of the container.

The graphic style of the default profile image be be determined by the organization, and used instead of the Emotive default.

A graphic fits 5 sizes to accomodate PPI. 48 x 48 px 57 x 57 px 72 x 72 px 114 x 114 px 144 x 144 px

48 x 48

57 x 57

72 x 72

114 x 114

144 x 144

A graphic is prepared to sit next to the user name and fits 3 sizes to accomodate PPI. Medium: 57w x 57h High: 72w x 72h Extra-high: 114w x 114h

Emotive White Label

M / 57 x 57

H / 72 x 72

XL / 114 x 114


1.6

Emotive White Label

1.7

Entry Image on the Profile Landing Screen

Entry Image Samples on the Profile Landing Screen

An entry image appear’s on a user’s profile landing page.

An entry image appear’s on a user’s profile landing page.

A graphic is prepared to sit on the specified background color and fits 4 sizes to accomodate PPI.

The graphic may be anything desired, such as an internal promotion, ad, etc.

Medium: 600w x 480h High: 600w x 650h Extra-high: 680w x 750h Extrax2-high:1360w x 1500h

M / 600 x 480

H / 600 x 650

XL / 680 x 750

XXL / 1360 x 1500

A graphic is prepared to sit on the specified background color and fits 4 sizes to accomodate PPI. Medium: 600w x 480h High: 600w x 650h Extra-high: 680w x 750h Extrax2-high: 1360w x 1500h

Emotive White Label

M / 600 x 480

H / 600 x 650

XL / 680 x 750

XXL / 1360 x 1500


EMOTIVE SCREENSHOTS

Emotive White Label

1.8

Profile Landing Screen

Emotive Icon 2.

1.

Screenshots of the dashboard, splash screen and startup screen on an iPhone 4.

3.

Screenshots brian1 Profile Name

Vo do an fe

1. Dashboard screenshot of Emotive launcher icon

Dev Start

iPhone: Retina display: 114 x 114 px 57 x 57 px iPhone Settings: 29 x 29 px

A

T

&

T

A

2. Emotive splash screen Medium: 320 w 480h High: 480w x 960h Extra-high: 640w x 960h

V dofan o e

&

T

A

T

&

T

brian1 Profile Name Dev Start

Powered by Emotive

3. Emotive startup screen and profile landing screen and entry image.

iPad: Retina display: 144 x 144 px 72 x 72 px

Profile Image: Medium: 300w x 240h High: 376w x 300h Extra-high: 600w x 485 h

Android Phone: 48 x 48 px: 160 dpi 72 x 72 px: 240 dpi

Entry Image: Medium: 300w x 240h High: 376w x 300h Extra-high: 680w x 500h Extrax2-high: 1360w x 1000h

T

Emotive Splash Screen

Entry Image

Powered by Emotive


TASK Design a layout for a calendar application for a mobile phone using the io7 guidelines.

Nokia ios 7 Calendar Concept


Yearly Overview

star t

Homescreen

Tap to month to open

Quickview of Day

Daily Overview Glide over for quickview mode shows detail of day with next event highlighted

Current day is highlighted

Double tap to view full schedule of day

A visual clock indicates time slots taken up during your day

Tap to open calendar app

Montly Overview

Add an Event

Daily Overview Detail

Add a new event Slide tab to reveal full details of day including location

Current day is highlighted

Add time duration Add alarm

Add location

end

Add event


Caren Kwan Visual Design Portfolio