!

Name: _________________________________

Final Project Checklist - Self-Promotion Package

Printed copy submitted for grading (letter size, landscape). Late submissions are not accepted. Deliverable Concept: meaningful, practical, appropriate. Page 1 cover Page 2 personal signature (logotype) in color, with the free space guide; signature + tagline in color, with the free space guide. Page 3 Home page Page 4 About page (text + image content). Image has captions. Page 5 Contact page with contact form, address, and map Page 6 mobile version (homepage only) for Android or iphone screen Page 7 business card (front and back with crop marks and bleeds) Page 8 promotional custom printed water bottle or coffee mug Pages 9-10 identity guide: colors (RGB , CMYK, HEX), textures, typography structure, UI elements: buttons, icons. Concept and design (colors, typography, images choices) explained. Indicate color harmony type that dominates your identity. Submit also: checklist sketches wireframes for homepage and sub-page Readability Gestalt Free space Balanced layout Consistent, logical alignment Grid Unity Allowed 3-rd party content: photos, textures, social media icons, water bottle/coffee mug template. No screenshots of any kind, no commercial web site templates.

SI 520 Final Project

Self-Promotion Package

Mengdi Zhang
zhmengdi@umich.edu

Personal Signature (Logotype)

Hello, Im

Mengdi Zhang
UX

D e sig n e

tect i h c r r & I n f o r m a ti o n A
about me visual design
contact

featured works ux/ui projects

other works

UX & UI

Projects

ux / ui projects

website design

mobile app design

Visual Design

logo design

poster design

Other Works
about me

handicraft

facsimile

ui/ux design projects

visual design

other works

download my cv

contact me

Mengdi Zhang 2013

Mengdi Zhang

featured works

ux/ui projects

visual design

other works

about me

contact

About Me
Embrace all challenges

Home >> About Me

Brief Intro Education Work Experience My Resume

Brief Intro

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.

My Skill Set

about me

ui/ux design projects

visual design

other works

download my cv

contact me

Mengdi Zhang 2013

Mengdi Zhang

featured works

ux/ui projects

visual design

other works

about me

contact

Contact
School of Information

Home >> Contact

Leave me a message
North Quad, 105 S. State St., Ann Arbor, MI, 48109 Mobile: 734.834.2577 Email: zhmengdi@umich.edu

Name* Name* Email* Email* Subject Subject Message Message

Your name Your email address Your topic Please leave your message here.

submit

about me

ui/ux design projects

visual design

other works

download my cv

contact me

Mengdi Zhang 2013

Mobile Version (Homepage)

Business Card

Promotion Mug

Identity guide
General: Concept and Design
I 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 messages I 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 a brush, a pen and a pencil. This is also part of identity representation. The color palette I 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 for typography, 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 images that 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.

Colors

Color palette harmony type: Neutral harmony

Typography
Header 1 Freestyle Script Regular; 35pt for category title on homepage; 45pt for subpage title; R: 0 G: 0 B: 0

Website:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Header 2 Freestyle Script Regular; 30pt; R: 72 G: 57 B: 37 Global navigation & Footer Stencil Regular; 15pt; R: 0 G: 0 B: 0 (Global navigation); R: 255 G: 255 B: 255 (Footer)

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

1234567890
Sub-navigation Verdana Regular (Bold if selected); 15pt; R: 0 G: 0 B: 0

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Breadcrumbs Verdana Regular; 14pt; R: 0 G: 0 B: 0 Copyright Verdana Regular; 11pt; R: 255 G: 255 B: 255 Image caption Verdana Regular; 11pt;

R: 135 G: 133 B: 132 Text Aparajita Regular; 13pt; R: 0 G: 0 B: 0

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Logo: Confetti Stream

A BC

DE F O X

H PQ Y

I J R Z S

K L M N T U
Tagline: Amplify

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Textures

(Adjusted with Photoshop)

UI elements
- Icons
Social network icons:

Contact icons:

Arrow used in image caption and sub-navigation:

- Button

- Form

Sketches

Wireframes

Homepage

Subpage (for About Me and Contact page)

Subpage (for design work display page; not implemented)

Image Credit

Social 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-bydakirby309/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!2d83.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