si520 final project

8/13/2019 SI520 Final Project

1/13

SI520 Final Project

Final Project


2/13

1/5x

The UX Designer, Period

x

Personal Signature + Free Space Guide

x1/5x


3/13

HOME CURRICULUM PROJECT RESUME ABOUT CONTACT

All Rights Reserved

UX DESIGN FRONT - END

MARKETING

About Copyright Employment Advertisement


4/13


All Rights Reserved

I have years of

experiences in

qualitative research,

know how to

understand the needs

of users with effective

methods.

MARKETING

FRONT - END



All Rights Reserved

MARKETING

FRONT - END


5/13


All Rights Reserved



All Rights Reserved

Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Nulla tincidunt malesuada consectetur. Proin

porta risus at eros tempor pellentesque. Vestibulum

ante ipsum primis in faucibus orci luctus et ultrices

posuere cubilia Curae; Proin sagittis leo felis, tristique

fringilla metutae. Integer faucibus, ante vel tincidunt

lobortis.

About Me SKILLS HOBBIES

Mauris accumsan scelerisque mauris vitae

aliquet. Curabitur ac felis accumsan ante

imperdiet faucibus quis sed lorem. Cras

venenatis laoreet bibendum. Aenean

imperdiet rutrum porttitor. Fusce at sem at

eroiverra neque ultricies in. Aliquam id

ipsum a nisl rhoncus elementum ut at

mauris.


6/13


All Rights Reserved



All Rights Reserved

CONTACT ME

Id like to hear from you

Name

Email

Your Comments

SUBMIT

Phone Number: +1(734)-277-8174

Address: 105 S State St, Ann Arbor,

MI 48104

Email: [email protected]

Contact InformationWhere to find me

Fax Number: +1(734)-277-8174


7/13

AM

Passbook

1

2

3

4

56

7

8

9

10

1112

Phone

N

S

www.zuoyang.com

HOME CURRICULUM PROJECT

RESUME ABOUT CONTACT

UX DESIGN

FRONT-END

MARKETING

Mobile Site Mockup


8/13

The UX Designer, Period

Zuo YangUX Designer

Phone: +1(734)-277-8174

E-mail: [email protected]

Address: 105 S State St, Ann Arbor, MI 48104

Business Card Design


9/13

Wather Bottle Design


10/13


All Rights Reserved


Colors:


All Rights Reserved

C5 M76 Y99 K0

R230 G99 B37

HEX: E66325

C0 M70 Y98 K0

R243 G111 B33

HEX: F36F21

C31 M24 Y25 K0

R179 G179 B179

HEX: B3B3B3

Analogous + Neutral

C75 M68 Y67 K90

R0 G0 B0

HEX:000000

C0 M0 Y0 K0

R255 G255 B255HEX:FFFFFF

Myriad Pro Typeface Structure:

Myriad Pro x heightBaselineMeanline

Descent

Ascent

Header 1:

Myriad Pro, size 22

Paragraph 1:

Myriad Pro, size 21

Paragraph 2:

Myriad Pro, size 20

Textures:Header: Orange Background

Footer: Grey background

Body: Ivory background with shades

ABCDEFGHIJKLMNOPRQSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Hyperlink:Email: [email protected]

Header 2 :

Myriad Pro, size 21 Bold

Harmony Type:


11/13


All Rights Reserved



All Rights Reserved

Concept and Design:

Colors:

The primary color I chose was organge, and

the reason I chose this color was that I want

a bright color to represent an outgoing

personality. The color of organge can also

give people feelings of being active, cre-

ative, and youthful.

The second primary color I chose was grey

and white, both of which are constrast to

orange. I especially like the combination of

orange and white, which is visually appeal-

ing, and the contrast between the two canmake the text readable.

The typeface I chose was Myriad Pro, for

both header and paragraph text. The rea-

sons I chose it were that it looks slim, suc-

cinct, and it matches the design of my sig-

nature. Also, this typeface is sans-serif,

which means it is more readable than serif

in digital screen.

Icons:

UI Elements:

Button:

SUBMIT

All those pictures I choose are in black &White. This is because black and white will

form a constrat with the color of orange,

which makes it kind look like acccented

harmony. In the home page, the first pic-

ture is a pair of glasses placing on paper

prototyping, which represents UX design;

The second picture is the logo of Ogilvy &

Mather, the marketing firm, which reprents

marketing, and the thrid picture is the one

that has a number of HTML code, which

represents front-end development.

Typography:

Image Choice:


12/13

Sketch


13/13

Wireframe

LOGO

Navigation

Text

Text

TextPicture

Picture Picture

Footer

LOGO

Navigation

Picture Text

Footer

Text

LOGO

Navigation

Picture

Footer

Text

Home Page

About Page Contact Page

si520 final project

Documents