Transcript
8/13/2019 Self Promotion Package
1/18
8/13/2019 Self Promotion Package
2/18
Self-Promotion Package
SI 520 Final Project
Mengdi Zhangzhmengdi@umich.edu
8/13/2019 Self Promotion Package
3/18
Personal Signature (Logotype)
8/13/2019 Self Promotion Package
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
8/13/2019 Self Promotion Package
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
8/13/2019 Self Promotion Package
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: zhmengdi@umich.edu
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
8/13/2019 Self Promotion Package
7/18
Mobile Version (Homepage)
8/13/2019 Self Promotion Package
8/18
Business Card
8/13/2019 Self Promotion Package
9/18
Promotion Mug
8/13/2019 Self Promotion Package
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.
8/13/2019 Self Promotion Package
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)
8/13/2019 Self Promotion Package
12/18
ABCDEFGHIJKLMNOPQRSTUVWXYZ
(No lower case / capital and lower case are same)
1234567890- Sub-navigation
Verdana
Regular (Boldif selected); 15pt;
R: 0 G: 0 B: 0
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
- BreadcrumbsVerdana
Regular; 14pt;
R: 0 G: 0 B: 0
- CopyrightVerdana
Regular; 11pt;
R: 255 G: 255 B: 255
- Image captionVerdana
Regular; 11pt;
8/13/2019 Self Promotion Package
13/18
R: 135 G: 133 B: 132
- TextAparajita
Regular; 13pt;
R: 0 G: 0 B: 0
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
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
8/13/2019 Self Promotion Package
14/18
Textures
(Adjusted with Photoshop)
UI elements- Icons
Socialnetwork icons:
Contact icons:
Arrow used in image caption and sub-navigation:
- Button
- Form
8/13/2019 Self Promotion Package
15/18
Sketches
8/13/2019 Self Promotion Package
16/18
Wireframes
Homepage
Subpage (for About Me and Contact page)
8/13/2019 Self Promotion Package
17/18
Subpage (for design work display page; not implemented)
8/13/2019 Self Promotion Package
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/
top related