self promotion package

8/13/2019 Self Promotion Package

1/18


2/18

Self-Promotion Package

SI 520 Final Project

Mengdi [email protected]


3/18

Personal Signature (Logotype)


4/18

ux / uiprojects

Hello, Im

UX & UI

Projects

MengdiZhangUXD

esigner&InformationArchitect

website

design

mobile

app design

logo

design

poster

design

handicraft facsimile

Visual

Design

Other

Works

about me ui/ux designprojects

visualdesign

otherworks

downloadmy cv

contact me

visual

design contact

ux/uiprojects

other

works

featured

works

about

me


5/18

MengdiZhangfeatured

works

ux/ui

projects

visual

designabout

mecontact

other

works

download

my cv

about me ui/ux design

projects

visual

design

other

works

contact me

Home >> About Me

Brief Intro

Education

Work Experience

My Resume

Hello! I'm Mengdi Zhang, a 1st-year graduate student at University of Michigan,

School of Information, specializing in Human-Computer Interaction and

Information Economics for Management. I hold great passion on information

architecture and user-experience design.

Drawing and designing are my biggest interests. I have more than 16 years' amateur

drawing experience and more than 4 years graphic design experience with Adobe

Photoshop, Illustrator and InDesign. As a big fan of Information Architecture, I like

exploring website and mobile app design, making more usable information

navigation, organization and visualization. I can also do some front-end design with

HTML and CSS.

I like discovering and drawing beautiful things in my life. I wish to design better

user experience to make our life more beautiful.

Embrace all challenges

Mengdi Zhang 2013

AboutMe

My Skill Set

Brief Intro


6/18

featured

works

ux/ui

projects

visual

design

about

mecontact

other

works

submit

North Quad, 105 S. State St.,Ann Arbor, MI, 48109

Mobile: 734.834.2577

Email: [email protected]

MengdiZhang

Home >> Contact

Leave me a message

Name*

Email*

Subject

Message Please leave your message here.

Your topic

Your name

Your email address

School of Information

about me ui/ux design

projects

visual

design

other

works

download

my cv

contact me

Mengdi Zhang 2013

Contact


7/18

Mobile Version (Homepage)


8/18

Business Card


9/18

Promotion Mug


10/18

Identity guide

General: Concept and DesignI use the portfolio website and other components in the self-promotion

package not only to demonstrate my design-related works, but also my

design styles, personal pursuits, and personalities.

The main messagesI want to convey include: my passion in UX design,

information architecture and visual design; my dream to make our life more

beautiful; my exploration and efforts, and the hand-drawn style that I like in

design.

I created the personal signature by taking advantage of the typefaces long

tails. So the logo basically becomes a girls face, which is highly personalized.

I also used the pen tool of Illustrator to draw the pattern which includes abrush, a pen and a pencil. This is also part of identity representation.

The color paletteI chose makes me think of dream: the light blue and

green represents hope while the brown indicates hard work and challenges

towards the dream. I added tones and transparency to make them lighter in

saturation so that they look more elegant and not so bright.

As fortypography, I combined Script with Serifs to balance the free sketchy

style and the reliable elegant style. While using multiple typefaces, I tried to

make them stay in consistency and unity.

I chose imagesthat are in harmony with the dominating palette and general

style. Most of them are static. Images posted on the homepage are featured

works selected from each category. Images used as subpage banners are for

the viewer to know me better. Currently one of them is a panorama taken by

my best friend; the other one is the North Quad I drew with a mobile app. In

the About Me page, I also included a concept map showing my skill set.


11/18

ColorsColor palette harmony type: Neutral harmony

TypographyWebsite:

- Header 1Freestyle Script

Regular; 35pt for category title on homepage; 45pt for subpage title;

R: 0 G: 0 B: 0

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890- Header 2

Freestyle Script

Regular; 30pt;

R: 72 G: 57 B: 37

- Global navigation & FooterStencil

Regular; 15pt;

R: 0 G: 0 B: 0 (Global navigation); R: 255 G: 255 B: 255 (Footer)


12/18


(No lower case / capital and lower case are same)

1234567890- Sub-navigation

Verdana

Regular (Boldif selected); 15pt;

R: 0 G: 0 B: 0



1234567890



1234567890

- BreadcrumbsVerdana

Regular; 14pt;

R: 0 G: 0 B: 0

- CopyrightVerdana

Regular; 11pt;

R: 255 G: 255 B: 255

- Image captionVerdana

Regular; 11pt;


13/18

R: 135 G: 133 B: 132

- TextAparajita

Regular; 13pt;

R: 0 G: 0 B: 0



1234567890Logo:

Confetti Stream

A B C D E F G H I J

K L M N O P Q R S

T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y zTagline:

Amplify

A B C D E F G H I J K L M

N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z


14/18

Textures

(Adjusted with Photoshop)

UI elements- Icons

Socialnetwork icons:

Contact icons:

Arrow used in image caption and sub-navigation:

- Button

- Form


15/18

Sketches


16/18

Wireframes

Homepage

Subpage (for About Me and Contact page)


17/18

Subpage (for design work display page; not implemented)


18/18

Image CreditSocial network icons:http://www.bourncreative.com/1680-free-circle-social-media-icons/

Contact icons:

http://www.vectorstock.com/royalty-free-vector/contact-icon-set-simplicity-theme-vector-1161371 http://www.softicons.com/free-icons/system-icons/windows-8-metro-invert-icons-by-

dakirby309/drive-iphone-icon

Texture:

http://texturelib.com/texture/?path=/Textures/paper/paper_0028

Map:

Google map -

https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Comple

x%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7c

b%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-

83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121

Coffee mug template:

http://www.positiveratio.com/shop/coffee-mug/

http://www.marinamugs.com.au/details.php?a=details&id=400122BKWH
http://www.bourncreative.com/1680-free-circle-social-media-icons/http://www.bourncreative.com/1680-free-circle-social-media-icons/http://www.vectorstock.com/royalty-free-vector/contact-icon-set-simplicity-theme-vector-1161371http://www.vectorstock.com/royalty-free-vector/contact-icon-set-simplicity-theme-vector-1161371http://www.softicons.com/free-icons/system-icons/windows-8-metro-invert-icons-by-dakirby309/drive-iphone-iconhttp://www.softicons.com/free-icons/system-icons/windows-8-metro-invert-icons-by-dakirby309/drive-iphone-iconhttp://www.softicons.com/free-icons/system-icons/windows-8-metro-invert-icons-by-dakirby309/drive-iphone-iconhttp://texturelib.com/texture/?path=/Textures/paper/paper_0028http://texturelib.com/texture/?path=/Textures/paper/paper_0028https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121http://www.positiveratio.com/shop/coffee-mug/http://www.positiveratio.com/shop/coffee-mug/http://www.marinamugs.com.au/details.php?a=details&id=400122BKWHhttp://www.marinamugs.com.au/details.php?a=details&id=400122BKWHhttp://www.marinamugs.com.au/details.php?a=details&id=400122BKWHhttp://www.positiveratio.com/shop/coffee-mug/https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121https://www.google.com/maps/preview#!q=North+Quadrangle+Residential+and+Academic+Complex%2C+South+State+Street%2C+Ann+Arbor%2C+MI&data=!4m15!2m14!1m13!1s0x883cae406bf1f7cb%3A0xefd29040373a695a!3m8!1m3!1d41516!2d-83.7142224!3d42.2734325!3m2!1i1366!2i675!4f13.1!4m2!3d42.280718!4d-83.740121http://texturelib.com/texture/?path=/Textures/paper/paper_0028http://www.softicons.com/free-icons/system-icons/windows-8-metro-invert-icons-by-dakirby309/drive-iphone-iconhttp://www.softicons.com/free-icons/system-icons/windows-8-metro-invert-icons-by-dakirby309/drive-iphone-iconhttp://www.vectorstock.com/royalty-free-vector/contact-icon-set-simplicity-theme-vector-1161371http://www.bourncreative.com/1680-free-circle-social-media-icons/

self promotion package

Documents