You are on page 1of 31

FOLI

ORT
VINCE PEO DESIGN

2018
Port.
2018 Peo.

DESIGN & CODE

Phone: +1 704 418 5660
Email: vincepeo@yahoo.com
Website: vincepeo.com
Linkedin: linkedin.com/in/vincepeo

2018
Port.
2018 Peo.

01 02 03 04
Intro Contents Corporate Identity Typography Heirarchy

Statement 05
Grid Layout
06
UI/UX
07
Mobile Marketing
08
Package Design

DESIGN & CODE

I am a Web & Graphic designer delivering creativity combined with strategic
thinking into every project. My greatest strength is my passion for Web
Development, an obsession which allows me to spot trends making my
websites beautiful, usable and most importantly accessible. - Vince Peo

09 10 13 14 The artwork presented in
Fashion Branding Brand Image Freelance work Credits
this portfolio are property
of Vince Peo. The content
may not be distributed,
modified, reproduced
without prior consent of
the respective owener.

2018
Port.
2018 Peo.

Identity
DESIGN & CODE

The goal of my work is to make the brand/logo redesign Blizzard my focus
was making everything legible recreating the brand image to give it a much
more appealing look.

2018
Port.
2018 Peo.

The two corporate colours are blue and grey. It is a fresh
and appealing blend of colours chosen for their strong
combination - modern -complimentary. Color plays an
important role for various media. A palette of primary
colors has been developed, consistent use of these colors
will contribute to the cohesive and harmonious look of
the Blizzard brand identity across all relevant media. The
Colours have been selected according to international
standards as shown below and are easily implemented.

PRIMARY COLOR
Usage:

Use them as the dominant
color palette for all internal and
external visual presentations
of the company.

PRIMARY COLOR PRIMARY COLOR
LIGHT BLUE DARK GREY

COLOR CODES COLOR CODES
CMYK : C076 M037 Y028 K010 CMYK : C064 M054 Y052 K052
Pantone : 297C Pantone : 442C

2018
HKS : 02K HKS : 98K
RGB : R06 1 G125 B152 RGB : R070 G071 B071

Port.
2018 Peo.

THE FULL LOGOTYPE
1
/2 x 1
/2 x

The Blizzard Corporate Logo comprises two elements, the logo
x

Blizzard symbol and logo type. The Logo Symbol is a powerful image
evoking the culture of design services the connection between the
1
/2 x 1
/2 x
strength of communication and the different points that influence.

The Logo Type has been carefully chosen for its modern and yet
0.5 x refined, highly legible style, which has been further enhanced by

0.5 x
Blizzard x 1.5 x the use of upper case letters. The typeface is Break Light and has
also been chosen to compliment and balance perfectly with the
logo symbol.

LOGO A LOGO B
Colored Version Colored Version The Logo Symbol
Consists of a powerful element evoking the
Theculture
Logo Symbol
of design services and a grey square
backround.
Consists of a powerful element
evoking the culture of design services.
The Logo Title
TheCarefully chosen for its modern and yet
Logo Title
Blizzard Blizzard refined, highly legible style, which has been
Carefully
further chosen forbyits the
modern
use ofand

2018
enhanced upper
yet refined, highly legible style, which
case letters in gray tone of the chosen

Port.
has been further enhanced by the use
4 4
corporate
of upper color.
case The font
letters that is
in gray usedofhere
tone
the is
chosen corporate
Montserrat Bold. color.
2018 Peo.

BREAKLIGHT
THE FONT
Stationery is a primary means of communication and
it is essential that every application be a consistent Breaklight is a sans serif typeface, It is the first open source
reflection of its corporate identity. This section illustrates font family from Adobe, distributed under the SIL Open
approved layouts for standard U.S. business stationery. It Bold 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 Font License. The typeface is inspired by the forms of the
includes specifications for typography or other business 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 American Type Founders’ gothics by Morris Fuller Benton
processes. with both a larger x-height and character.width.

Regular 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 Google describes the font as “modern, yet approachable” and

Stationary.
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 “emotional”. The entire font family was officially made available
for free download on January 12, 2012. It belongs to the neo-
grotesque genre of sans-serif typefaces, and includes Thin,
Figures

01234567890 Light, Regular, Medium, Bold and Black weights.

2018
Port.
2018 Peo.

Typo
TYPOGRAPHY & HEIRARCHY

Typographic hierarchy presents lettering so that the most important
words are displayed with the most impact so users can scan text for key
information. Typographic hierarchy creates contrast between elements.
This typeface analysis showcases understanding of typography and its
components.

2018
Port.
2018 Peo.

Akzidenz

G ROTE S K

2018
Port.
2018 Peo.

Layout
G R I D L AYO U T D E S G I N

The magazine’s curated content complements its sleek visual presentation,
with the aim to feature news from international developments to the attention
of the national public. The design is in a grid structure made up of a series of
intersecting straight or curved guide lines used to structure content. The grid
serves as an armature in which the design can organize graphic elements
(images and paragraphs) in a rational, easy to absorb manner.

2018
Port.
2018 Peo.

Layout Project 1
design
Entertainment newspaper
Page layouts
I sought to create an engaging visual environment
through line, colour and hierarchy. I also experiment with
the possibilities allowed through different application
techniques creating a visually appealing layout. Front Inside 1 Inside 2 Back Front 4 Inside 7 Inside 8 Back 4

........
........
........
“ ........

Front 2 Inside 3 Inside 4 Back 2 Front 5 Inside 9 Inside 10 Front 5

........
........ “
........
........

Front 3 Inside 5 Inside 6 Back 3
The
II
International
Title

Title Font: : Liberation

ABCDEFGHIJKLMNOPQRSTUVWXYZ

2018
abcdefghijklmnopqrstuvwxyz

Port.
2018 Peo.

Ux/Ui
EXPERIENCE & INTERFACE
DESIGN

Fitrack is a mobile application designed to allow tracking of healthy eating
and lifestyle. Eating a balanced diet can do alot to promote long term health.
Fitrack ensures that people track what they consume and what indication or
effect will their eating habits results in as well as changes ocurring in their
lifestyles.

2018
Port.
2018 Peo.

Personalized for you.

Fitrack offers programs to meet the goals

2018
of each user. the simplistic design and

Port.
step by step programs gives users a
sense direction towards their health and
fitness goals.
2018 Peo.

Appskout.

Market
MOBILE MARKETING

Mobile marketing consists of ads that appear on mobile smartphones,
tablets, or other mobile devices. My design for the mobile marketing website
was designed to inform users of the uses of mobile applications. I design
this website to give users as much clear and concise information about an
application so it can appeal to users.

2018
Port.
2018 Peo.

The layout considers the use of imagery
to keep the viewers engaged. The
simplicity of the navigation gives the
user easier accessiblity. Mobile devices
have small screens, which means words
should be used sparingly. Cluttered and
crowded ads will just drive users to scroll
past. When it comes to mobile, it’s best
to keep things simple.

Comp.
COMPONENTS

2018
Port.
2018 Peo.

Create
PACKAGE DESIGN

Rice Milk packaging campaign was designed for an alternative to Diary
products. The campaign features print ads showing cartons, it will
showcase how taste and nutrition can come together and redefine a product
image towards a milk alternative.

2018
Port.
2018 Peo.

Design.
Rice Milk use of packaging to break
out of the sea of conventional
milk. For years, an eye-catching
label helped brands stand
out, but emphasis was on just
communicating fat content: whole,
skim or fat-free.

Rice milk drives an emotional,
visual and practical appeal for their
products. Product packaging is as
crucial as the product itself. Apart
from being visually appealing,
packaging design needs to be
practical, usable and make the
consumer prefer your product over
the competitor’s.

2018
Port.
2018 Peo.

Advertise
FASHION BRANDING

A visual identity for fictional Raw clothing brand, includes labels, bags and
clothing also the magazine layout and the website development. Raw was
designed with the use of high quality images, white space, and modular grid,
the campaign was designed to be minimalistic and attractive.

2018
Port.
2018 Peo.

Grunge
Resurgence
The resurgence of ’90s grunge-inspired
fashions has broadened beyond ripped jeans
with a wide assortment of apparel showing
noticeable signs of wear and tear.

Consumers seeking an edgier look are
gravitating towards distressed and destroyed
garments like ready-made knee-baring denim
and shirts bearing holes and cutouts. Raw is a
modern and youthful brand that understands
the trends for distressed clothing. In order to
fully focus on the product, the website designs
focuses its attention to the white space usage

2018
and black accents.

Port.
2018 Peo.

Ux / Ui “there’s still an element of
rebellion, even if you are buying
Raw Denim Sitemap UX and UI Design

Design. something that is pre-distressed
– pre-ripped or made dirty.”
Charlene Lau This is a of a mobile responsive ecommerce site using
1 2 sitemap, wireframe, and flowchart elements.
Nav menu
Sign Up Home

Home
Description for each function listed here.
About

Shopping

Contact
3
Trendiing 1
Product

Login/signup form for new and returning customers

Process

Hamburger nav
Wireframing Breakdown
Contact

Functionality First stages in branding are very important Cart Payment 2

to understanding the goal and processes
Home page for Raw. Trending and newest arrivals call for
Prototyping involved with having a well design brand action buttons are conveniently located for customers.

back to top btn
image. The process of creating a website
involves planning and researching the
Coding
customer.
Well-designed websites offer much more
3
Server upload
than just aesthetics. They attract visitors
Several call to action buttons will lead to product catalog

2018
and help people understand the product, designs to be clear and concise for customer usage.

company, and branding through a variety

Port.
of indicators, encompassing visuals, text,
and interactions.
2018 Peo.

website
Grunge
design & FASHION

development Effortless is attractive. No one wants to look like they’re trying too hard.

2018
Port.
2018 Peo.

Image
BRAND IMAGE

A visual identity for my personal image. This campaign, focuses on
showing website development and the core brand logo design, on a
clean white background and the use of color is to eliminate any other
noise, or distracting visual elements, that might impede the viewing or
direction of my work.

2018
Port.
2018 Peo.

PRIMARY COLOR
Usage:

Use them as the dominant
color palette for all internal and
external visual presentations
of the company.

PRIMARY COLOR
DARK GREY

COLOR CODES
CMYK : C064 M054 Y052 K052
Pantone : 442C
HKS : 98K
RGB : R070 G071 B071

PICTURE MARK
1
/2 x 1
/2 x
Full Logo VINCE PEO 11,5 mm
Minimum Height: 11,5 mm
Vince Peo logo is a minimal design with

only the use of letters within the logo. Used
Logo Symbol 11,5 mm
to represent the last name of the artist. 1
/2 x 1
/2 x Minimum Height: 11,5 mm

2018
Port.
2018 Peo.

Red indicates the flowchart in which a user will
navigate in order to reach a desired destination. I’ve
highlighted only the arrows and tabs which lead to
the viewing of portfolio items.

Back to top btn Home Home Works Profile Contact Search

Social network

Portfolio item Profile Contact

Next item

Portforlio 1 Portfolio 2 Services

Portfolio 3 Portfolio 4

2018
Port.
UX and UI Design
2018 Peo.

t

Free.
FREELANCE WORK

I was tasked with creating a brand identity for Carbon Evolution complete
with development of the website. The client had asked that they be better
represented and to be seen with professionalism. I wanted to create a
Carbon Evolution
memorable visual identity to enter the market communicating professionality
and affinity with its target audience. It was designed to be minimalistic and
attractive.

2018
Port.
2018 Peo.

Website Design
Brand Identity

Responsible for the design, layout and coding of the website. Designing the
Responsible for the Brand Image of Carbon Evolution logo, packaging, letter-
look and feel for Carbon Evolution website.
heads, business cards, and website design.

Website development Additional services

Server setup, cms organizing and setting up plugins, search engine optimiza-
Responsible for the site and technical aspects, such as coding, testing and and
tion(seo), google analytics and instruction on updating content manager.
server side interaction using a content management system.

2018
Port.
2018 Peo.

The logo of Carbon
Evolution is based on
typography. The idea
is to represent the
y the fibres of Carbon
through its simplistic
design.

1) Logo Symbol

1/2 x 1/2 x

Logo A
Background Black Version

1/2 x 1/2 x
Carbon Evolution

Logo C
Background Dark Grey Version
2) Full Symbol

1/2 x 1/2 x
Carbon Evolution

Carbon Evolution

1/2 x 1/2 x 11,5 mm
Carbon Evolution

11,5 mm

2018
Port.
2018 Peo.

FRAMEWORK

Landing Page Home Automotive Decor Apparel Gallery Contact

The flowchart depicted show separate
steps of a process in sequential order. Red
indicates the flowchart in which a user will
navigate in order to reach a desired location.
I’ve highlighted only the arrows and tabs
which lead to the purchasing of a product.

Included are the site layout and content
available within its infrastructure. This is a Automotive Decor Apparel Customers Gallery Contact
planning tool used during the design prcess;
it expands on the process of designing and
becomes a more robust representation of
what the new site will include and how it
functions.

The wireframe is often referred to as a
“skeletal framework” or a “screen blueprint”
of a webpage and provides a visual guide of
Sign Up Cart Payment
what a visitor can expect to see on a page,
what functions should be available to them,
THE PROJECT and any rules associated with the display of
that information. These steps are necessary in
the development process.
My work is based on strategic thinking and quality design, in order to help brands grow.
Clients are guided trough the entire process through design and development.

Product

2018
Port.
UX and UI Design
2018 Peo.

CARBON
EVOLU
The finished prototype of the design for Carbon
Evolution. It features a modern grid based design.
It will utilitze a content managing system to allow
ease of use when updating the ecommerce site.

Mission

Carbon Fiber is indeed a super light material
but many automobile enthusiast admire the
carbon fiber appearance. Today’s market
views Carbon Fiber as a luxury material
rather than for its ultimate purpose of weight
reduction. Its appearance has been admired
by many thus resulting in its high demand.

Carbon Evolution specializes in Carbon
Fiber services/products from Mold creations,
Skinning/Fused Parts with Real Carbon Fiber
and product development.

2018
Port.
2018 Peo.

Special thanks &
Credits

Thanks
Solar Yu Drew Kinney Pexels
Keeping me focus Professor and Program Stock Photos
2018 through my journey. coordinator
Portfolio
Peo Family Tony Reese Ace Nguyen
For supporting my goals Graphic & Web professor Content for freelance work
Designer
Vince Peo Lunn Family E. Marie Robertson Mali Maeder
First freelancing Coding professor Stock photo
opportunity
ACKNOWLEDGEMENT Michael Zhu Wil Bosbyshell
3D Printing Art fundamentals professor

Rock Designs Zachary Nicolas
Online Store and Design Graphic Design professor
I owe a special thank you to the following people who helped immensely to
bring this project to completion I am truly grateful to all of you. Klo James Helms
Portfolio book Audio & Video professor

Doug Jewel Julia Winfield
Helping out a friend Professor of Design

USN & Personnel Kristine Maddox
For the opportunity Career Services Advisor

2018
Port.
2018 Peo.