Hello, My name is Chanpory Rith. I am a designer, and

Hello,
My name is Chanpory Rith.
I am a designer,
and this is my portfolio.
These projects show what I have done and give an idea
of what I want to do in the future:
Symantec desktop icon system
4
Thomson iLrn web application
10
Yahoo! Go identity
20
Adobe enterprise product imagery
24
Marshall Strategy website
30
PC World website
36
After acquiring many smaller companies in over 20 years,
Symantec had more than 78 products with many different
icon styles. They needed a consistent, flexible, and
easy-to-extend desktop icon system.
Ancient Celtic and Japanese symbols of protection,
I combined simple lines with a yellow dimensional
as well as modern forms, inspired many of my early
grounding circle to create a bold, graphic, and distinct
explorations. Their simple, abstract lines had great
icon style that resonated with modern operating
flexibility, but the challenge was to update their archaic
systems and the Symantec brand.
forms in harmony with Symantec’s modern brand.
Early explorations
Basic construction of the icon
+
!
!
=
The icons on a desktop
The icon system’s simplicity kept the styleguide from
becoming an unwieldy tome of rules. At a minimal 11
pages, the styleguide showed how to create the icons
in multiple sizes, color bit-depths, and platforms.
Some pages from the styleguide
?Yedif[Y_\_YWj_edir)(#X_jc_bb_edie\Yebehi
'(.n'(.f_n[bi
9b[WhifWY[
'&f_n[bied[WY^i_Z[
B_d[m[_]^j
/f_n[bi
Fh_cWhob_d[Yebeh
)
,
?Yedif[Y_\_YWj_edir*#X_j',Yebehi
)f_n[bi
'&f_n[bi
(f_n[bi
H
,/
)f_n[bi
=
,,
8
,,
(f_n[bi
'f_n[b
/f_n[bi
:[i_]d]k_Z[b_d[i0IocWdj[YZ[iajef_Yedi
',n',f_n[bi
9b[WhifWY[
Ded[
B_d[m[_]^j
'f_n[b
Fh_cWhob_d[Yebeh
H
&
=
&
)(n)(f_n[bi
9b[WhifWY[
(f_n[bied[WY^i_Z[
B_d[m[_]^j
(f_n[bi
Fh_cWhob_d[Yebeh
8
&
H
&
=
&
8
&
:[i_]d]k_Z[b_d[i0IocWdj[YZ[iajef_Yedi
žIocWdj[Y(&&*
,
?Yedif[Y_\_YWj_edir*#X_j',Yebehi
)f_n[bi
(f_n[bi
KdWYY[fjWXb[lWh_Wdji
J^[i[[nWcfb[iZ[cedijhWj[iec[
kdWYY[fjWXb[jh[Wjc[dji\ehIocWdj[Y
Z[iajef_Yedi1Wbbi^ekbZX[Wle_Z[Z$
J^[i_cfb[ijmWoje[dikh[Yehh[Yj
h[fheZkYj_edWdZYedijhkYj_ede\_Yedi
_ijeki[j^[Wffhel[ZZ_]_jWbWhjmeha
WdZj[cfbWj[i$
D[l[hY^Wd][j^[Yebeh
e\j^[b_d[meha
D[l[hiYWb[ehi[fWhWj[
j^[[b[c[dji
D[l[hki[WZ_\\[h[dj
h[dZ[h_d]ijob[
D[l[hki[WZ_\\[h[dj
Zhefi^WZem
D[l[hWZZWZZ_j_edWb[b[c[dji
D[l[hki[igkWh[Yehd[hi
eh[dZi
D[l[hekjb_d[j^[ehX
D[l[hZ_ijehjj^[b_d[meha
D[l[hki[Wdej^[h
]hekdZ_d]i^Wf[
D[l[hXb[[Zeh
Yhefj^[b_d[meha
D[l[hki[Wdej^[h
b_]^jiekhY[
H
&
=
&
8
&
žIocWdj[Y(&&*
?Yedif[Y_\_YWj_edir9ehfehWj[_Yed
/
D[l[hY^Wd][j^[Yebeh
e\j^[ehX
*.n*.f_n[bi
9b[WhifWY[
)f_n[bied[WY^i_Z[
B_d[m[_]^j
)f_n[bi
Fh_cWhob_d[Yebeh
-
J^[IocWdj[YYehfehWj[_YedWff[Whi_dj^[CWY_djei^c[dkWdZj^[M_dZemijeebjhWo"fhel_Z_d]
]beXWbWYY[iijeIocWdj[YfheZkYjiWdZi[hl_Y[i$?j^WiX[[dif[Y_WbboWZWfj[Z\ehj^_ifkhfei[WdZ
i^ekbZdejX[ki[Z[bi[m^[h[$<eh[nWcfb["_ji^ekbZdejX[ki[ZWiWd_Yed\ehWif[Y_\_YWffb_YWj_ed
eh\_b["WiWXkjjed"eh\eh9:ijWhj[_j^[h$
)f_n[bi
(f_n[bi
'f_n[b
:[i_]d=k_Z[b_d[i0
IocWdj[Y:[iajef?Yedi
',n',f_n[bi
9b[WhifWY[
Ded[
B_d[m[_]^j
'f_n[b
Fh_cWhob_d[Yebeh
H
&
=
&
8
&
)(n)(f_n[bi
9b[WhifWY[
(f_n[bied[WY^i_Z[
B_d[m[_]^j
(f_n[bi
Fh_cWhob_d[Yebeh
H
&
:[i_]d]k_Z[b_d[i0IocWdj[YZ[iajef_Yedi
=
&
8
&
*.n*.f_n[bi
9b[WhifWY[
)f_n[bied[WY^i_Z[
B_d[m[_]^j
)f_n[bi
Fh_cWhob_d[Yebeh
žIocWdj[Y(&&*
H
&
=
&
8
&
:[i_]d]k_Z[b_d[i0IocWdj[YZ[iajef_Yedi
žIocWdj[Y(&&*
CWYEIN
M_dZemiNF
M_dZemi/.%(&&&
9ebehZ[fj^
)(#X_j"',n',f_n[bi
9ebehZ[fj^
)(#X_j"',n',f_n[bi
9ebehZ[fj^
*#X_j"',n',f_n[bi
:[i_]d]k_Z[b_d[i0IocWdj[YZ[iajef_Yedi
žIocWdj[Y(&&*
Thomson’s iLrn web application had many powerful tools to
manage courses, yet teacher and student adoption was lower
than planned. Thomson asked for a new version with clearer
navigation and a vibrant, friendly, and memorable look.
In addition to its confusing interface, Thomson was
The new look and feel used energetic colors
not happy with how iLrn looked. They wanted iLrn
and dimensionality with new layouts to provide
to reflect “service,” “quality,” and “personalized.”
an easier-to-use and engaging experience.
Old start page
New start page
12
13
The large amount of data on the site created
many information design challenges.
The new visual language was robust enough
to present information in a clear way.
Gradebook page
14
Home and registration pages
Assignments and report creation pages
15
The site’s complexity demanded a very
detailed styleguide to specify page
construction, icons, links, and buttons.
Pages from the styleguide
*>}iÊVœ“«œ˜i˜ÌÃÊNÊ««ÀœÛi`ʈVœ˜Ã
1Ãiʜ˜ÞÊ̅iÃiÊ>««ÀœÛi`ʈVœ˜ÃÊvœÀÊ
ÃÌ>ÌÕÃiÃÊ>˜`Ê>V̈œ˜Ã°
Ó£
-Ì>ÌÕÃʈVœ˜ÃÊ>ÀiʘœÌÊÀiÃÌÀˆVÌi`Ê̜Ê̅iÊ}i˜iÀ>Ê
ˆÀ˜ÊVœœÀÊ«>iÌÌi°
V̈œ˜ÊˆVœ˜ÃÊVœ˜vœÀ“Ê̜Ê̅iÊÃ>“iÊVœœÀÃÊ>Ãʏˆ˜ŽÃ°
-Ì>ÌÕÃ
V̈œ˜
,ˆ}…Ì
i˜iÀˆVÊV̈œ˜
7Àœ˜}
>i˜`>À
1˜>˜ÃÜiÀi`
6ˆiÜ
˜ÃÜiÀi`
->Ûi
1˜}À>`>Li
*Àˆ˜Ì
*>À̈>ÞÊ
œÀÀiVÌ
i«]Ê*>}i‡iÛi
1˜>ÃÈ}˜i`
i«]ʘˆ˜i
*>}iÊVœ“«œ˜i˜ÌÃÊNʈ˜ŽÊ>˜`ÊLÕÌ̜˜ÊÌÞ«iÃ
ÕÌ̜˜ÃÊ>˜`ʏˆ˜ŽÃÊ«iÀvœÀ“Ê>V̈œ˜Ã]Ê
£x
œÀÊÌ>ŽiÊÕÃiÀÃÊ̜ʜ̅iÀÊ«>}ið
-œ“iʏˆ˜ŽÊ>˜`ÊLÕÌ̜˜ÊÌÞ«iÃʅ>Ûiʺ«ÀiviÀÀi`Ê
>V̈œ˜»ÊÃÌ>ÌiðÊ1ÃiÊ̅iÃiÊ̜ʈ˜`ˆV>ÌiÊ̅iÊ
«ÀiviÀÀi`Ê>V̈œ˜Ê܅i˜Ê“Տ̈«iʏˆ˜ŽÃʜÀÊLÕÌ̜˜ÃÊ
>««i>Àʈ˜Ê}ÀœÕ«Ã°Ê
ˆ“ˆÌÊ̅iʘՓLiÀʜvʺ«ÀiviÀÀi`Ê>V̈œ˜»Êˆ˜ŽÃÊ
>˜`ÊLÕÌ̜˜ÃÊ̜ʣʫiÀÊ}ÀœÕ«ÊœÀÊ«>}i°
/Þ«i
-Ì>̈VÊ-Ì>Ìi
,œœÛiÀÊ-Ì>Ìi
ÀÀœÜʏˆ˜Ž
œ`ÞÊVœ«Þʏˆ˜Ž
link
Link
Bold Link ­*ÀiviÀÀi`®
Bold Link ­*ÀiviÀÀi`®
This is a Link.
This is a Link.
This is a Bold Link. ­*ÀiviÀÀi`®
This is a Bold Link. ­*ÀiviÀÀi`®
V̈œ˜ÊLÕÌ̜˜
Print
ÃÈ}˜i`É œÌÊÞiÌÊÌ>Ž>Li
Print
i>`iÀ
ÃÈ}˜i`É œÌÊÞiÌÊ`Õi
œÀ“ÊLÕÌ̜˜
-Ìi««i`Ê«ÀœViÃÃ
À>`ˆ˜}ÊVœ“«iÌi
ii`Ãʓ>˜Õ>Ê}À>`ˆ˜}
­*ÀiviÀÀi`®
*>ÃÌÊÕi
­*ÀiviÀÀi`®
i«ÊLÕÌ̜˜
œÊœ˜}iÀÊ/>Ž>Li
ˆÀ˜Êx°äÊÃÌޏiÊ}Ո`i
*>}iÊÃÌÀÕVÌÕÀiÊNʏœL>Ê˜>ۈ}>̈œ˜Ê>˜`ʅi>`iÀÃ
1ÃiÊ}œL>Ê˜>ۈ}>̈œ˜Êii“i˜ÌÃÊ
£
œ˜Ê̅iʏivÌ°
Ó
Î
{
i}ˆ˜ÊÌ>LÃʅiÀi
£«Ý
£Ó
Ê ˆÀ˜ÊLÀ>˜`ˆ˜}
`i˜Ìˆvވ˜}ʓiÃÃ>}ˆ˜}Ê>˜`Ê`>ÌiÊ
Ê i>`iÀʏˆ˜ŽÃ
ÕLÊÌ>LÃ
i˜ÌiÀÊÌiÝÌ
x
Ê Ài>`VÀՓL
È
Ê *>}iÊ̈̏iÊ
Ç
Ê œÕÀÃiÉÃÈ}˜“i˜ÌÊ-iiV̜À
n
£äx«Ý
/…iʈÀ˜ÊLÀ>˜`ÊNÊ
œœÀÊ«>iÌÌi
/…iʈÀ˜ÊVœœÀÊ«>iÌÌiʈÃÊÀˆV…Ê>˜`Ê
œL>Ê˜>ۈ}>̈œ˜Êii“i˜ÌÃ
Vœ˜ÃˆÃÌi˜ÌÞ°ÊÜ>ÞÃÊLi}ˆ˜Ê…ÕLÊÌ>LÃÊ
^ÊÓääxÊ/…œ“Ãœ˜Êˆ}…iÀÊ`ÕV>̈œ˜°Ê
œ˜vˆ`i˜Ìˆ>°
ۈLÀ>˜Ì°ÊÌʈÃʓœÃ̏ÞÊLÕi]Ê܈̅Ê
œÀ>˜}iÊ>VVi˜ÌÃÊ̅>ÌÊi“«…>ÈâiÊ
ˆ“«œÀÌ>˜Ìʈ˜vœÀ“>̈œ˜ÊœÀÊ
v՘V̈œ˜>ˆÌÞ°
Ê œÕÀÃiÉÃÈ}˜“i˜ÌÊ-iiV̜À]ÊiÝ«>˜`i`
ˆÀ˜Êx°äÊÃÌޏiÊ}Ո`i
È
*>}iÊÃÌÀÕVÌÕÀiÊNÊÀˆ`
œÃÌʈÀ˜Ê«>}iÃÊÕÃiÊ>Ê{‡VœÕ“˜Ê}Àˆ`Ê
À>`ˆi˜ÌÃÊ>ÀiÊÕÃi`ʜ˜ÊL>VŽ}ÀœÕ˜`Ã]ÊÌ>LÃ]Ê
>˜`ʓœ`Տiʅi>`iÀÃÊ̜Ê>``Ê`i«Ì…Ê>˜`Ê
`ˆ“i˜Ãˆœ˜>ˆÌÞÊ̜Ê̅iʈ˜ÌiÀv>Vi°Ê,iviÀÊ̜Ê̅iʈÀ˜Ê
*…œÌœÃ…œ«ÊÌi“«>ÌiÃÊvœÀÊ}À>`ˆi˜ÌÊÕÃ>}i°
n
*>}iÊÌi“«>ÌiÃÊNʜ“iÊ«>}i
/…iʜ“iÊ«>}iÊŜÜÃÊ̅iʓœÃÌÊ
/…iÊ܏ˆ`Ê>˜`Ê`œÌÌi`ÊÛiÀ̈V>Ê`ˆÛˆ`iÀÃÊŜՏ`Ê
>««i>ÀÊ̜Ê̅iʏivÌʜvÊ̅iÊ}Àˆ`ʏˆ˜iðÊ
܈̅ÊÓ{‡«ˆÝiÊ}ÕÌÌiÀð
^ÊÓääxÊ/…œ“Ãœ˜Êˆ}…iÀÊ`ÕV>̈œ˜°Ê
œ˜vˆ`i˜Ìˆ>°
ˆ““i`ˆ>Ìiʈ˜vœÀ“>̈œ˜ÊvœÀÊ̅iÊÕÃiÀ]Ê
>œ˜}Ê܈̅ÊÀiiÛ>˜ÌÊ>V̈œ˜ÃÊvÀœ“Ê>Ê
1˜ˆŽiʓœÃÌÊ«>}iÃ]Ê̅iʜ“iÊ«>}iÊvœœÜÃÊ>
·VœÕ“˜Ê}Àˆ`]Ê>ÃÊŜܘÊLiœÜ°Ê/…iʓ>ˆ˜Ê
“œ`ՏiʈÃÊLÕi]Ê܅ˆiÊÃiVœ˜`>ÀÞʓœ`ՏiÃʜ˜Ê̅iÊ
Àˆ}…ÌÊ>ÀiʜÀ>˜}iÊ>˜`Ê܅ˆÌi°Ê
œvʈÀ˜°
œÀÊ܏ˆ`ÊVœœÀÃ]ÊÕÃiÊ̅iÊ«>iÌÌiÊLiœÜ°Ê1ÃiÊ
œÀ>˜}iÊë>Àˆ˜}Þ°
Ó{
1Ãiʜ˜ÞʣʜÀ>˜}iʓœ`Տiʜ˜Ê̅ˆÃÊ«>}i°ÊÊ
œÌ…iÀÊÃiVœ˜`>ÀÞʓœ`ՏiÃÊŜՏ`ÊLiÊ܅ˆÌi°
{™ä«Ý
ÓΙ«Ý
ÇÎÈ«Ý
£äx«Ý
ÎÈn«Ý
£n{«Ý
ÎÈn«Ý
£n{«Ý
£n{«Ý
£n{«Ý
£Î«Ý
£
Ó
Î
£{«Ý
Óä«Ý
/…œ“Ãœ˜ÊÕi
,Ê äÊ
Ê x£Ê
Ê £xÎ
Õi
,Ê Î£Ê
Ê £Î£Ê
Ê ÓäÇ
i`ˆÕ“ʏÕi
,Ê näÊ
Ê £™£Ê
Ê Óx{
ˆ}…ÌʏÕi
,Ê £{xÊ
Ê Ó£xÊ
Ê Óxx
*>iʏÕi
,Ê ÓäÇÊ
Ê ÓÎnÊ
Ê Óxx
7…ˆÌi
,Ê ÓxxÊ
Ê ÓxxÊ
Ê Óxx
{
£Ó«Ý
Ó«Ý
£Ó«Ý
£Ó«Ý
£Ó«Ý
x
È
Ç
"À>˜}i
,Ê Óx{Ê
Ê £ÎÇÊ
Ê Ó™
iˆ}i
,Ê ÓxÎÊ
Ê ÓÓ{Ê
Ê £ÈÓ
>ÀŽÊÀ>Þ
,Ê ££{Ê
Ê ££{Ê
Ê ££{
œœÊÀ>Þ
,Ê £n{Ê
Ê ÓäxÊ
Ê Ó£™
ˆ˜ŽÃʜ˜Êˆ}…ÌÊL>VŽ}ÀœÕ˜`
ˆ˜ŽÃʜ˜Ê`>ÀŽÊL>VŽ}ÀœÕ˜`
Õi
­-Ì>̈V®
,Ê äÊ
Ê ÈxÊ
Ê Óä{
7…ˆÌi
­-Ì>̈V®
,Ê ÓxxÊ
Ê ÓxxÊ
Ê Óxx
À>Þ
,Ê ÓÓxÊ
Ê ÓÓxÊ
Ê ÓÓx
ˆ}…ÌÊÀ>Þ
,Ê Ó{ÎÊ
Ê Ó{ÎÊ
Ê Ó{Î
Ó{«Ý
n
>ÀŽÊ"À>˜}i
­,œœÛiÀ®
,Ê Óä{Ê
Ê nnÊ
Ê ä
Àˆ}…ÌÊ"À>˜}i
­,œœÛiÀ®
,Ê ÓxÊ
Ê £ÓxÊ
Ê ä
*>Vi“i˜ÌʜvÊ`ˆÛˆ`iÀʏˆ˜i
£Ó«Ý
ˆÀ˜Êx°äÊÃÌޏiÊ}Ո`i
16
^ÊÓääxÊ/…œ“Ãœ˜Êˆ}…iÀÊ`ÕV>̈œ˜°Ê
œ˜vˆ`i˜Ìˆ>°
ˆÀ˜Êx°äÊÃÌޏiÊ}Ո`i
^ÊÓääxÊ/…œ“Ãœ˜Êˆ}…iÀÊ`ÕV>̈œ˜°Ê
œ˜vˆ`i˜Ìˆ>°
ˆÀ˜Êx°äÊÃÌޏiÊ}Ո`i
^ÊÓääxÊ/…œ“Ãœ˜Êˆ}…iÀÊ`ÕV>̈œ˜°Ê
œ˜vˆ`i˜Ìˆ>°
ˆÀ˜Êx°äÊÃÌޏiÊ}Ո`i
^ÊÓääxÊ/…œ“Ãœ˜Êˆ}…iÀÊ`ÕV>̈œ˜°Ê
œ˜vˆ`i˜Ìˆ>°
17
Early on, I looked at different visual languages for
the site. Some were very minimal echoing sites like
Google and Flickr, while others were more robust.
Early explorations
18
19
Yahoo! Go lets people access their personal Yahoo! content
from a computer, phone, or television. This new service
needed an identity to express convergence and persistence.
The design began with explorations of arrows,
The final design used three ovals that intersect
networks, stars, and planets. Many were too
to combine a solid oval in the middle.
familiar or similar to other identities.
Early explorations
22
The identity on a t-shirt
23
After modernizing its creative professional software with
standout graphics, Adobe turned its attention to providing
the same level of design for its business products. They
wanted a unified system of enterprise product imagery
that could extend to a growing line of 12 applications.
Since all Adobe enterprise products are based on
Along with packaging, elements of the Adobe
an underlying PDF technology, I used the tangram
tangram could be used on marketing materials
as a visual metaphor: a set of elements that can be
such as brochures, websites, and posters.
combined to create almost infinite outcomes. Using
the angle of their logo, I made a new Adobe tangram.
Construction of the Adobe tangram
Classic Chinese Tangram
Elements of the Adobe tangram on a poster
Angle of Adobe logo
Adobe Tangram
Some possible configurations
26
27
In another direction, I used Spirograph-like forms to
Together, the two images from each product group
express the Adobe-enhanced processes between
identify Adobe’s enterprise product line as a whole.
documents, people, and computers. Using one base
image for each product group: Tools and Servers, I varied
the size and rotation to make individual product images.
Imagery for the Tools products on CD jewel cases
28
Images for Servers products on CD jewel cases
Image for the whole product line
29
Marshall Strategy is a world-class brand consultancy.
They wanted a new website to reflect their smart,
personalized, and intimate approach to branding.
A map of Marshall’s existing website showed several
Because the site was small, its architecture did not
areas for improvement. In particular, the company’s
need an overhaul. I proposed restructuring the home
extensive experience and legendary status of its
page to provide instant access to content about
founder, Phil Durbrow, needed more prominence.
the company’s founder, offerings, and clients.
Old home page structure and site architecture
(OME
New home page structure and site architecture
,ANDINGPAGES
!BOUTUS
(OME
,ANDINGPAGES
-ARSHALL\(OME
!BOUTUS
7HY-ARSHALL
0HIL
3ERVICES
+EN
!BOUTUS
%NVIRONMENT
#LIENTS
!LLIANCE0ARTNERS
#ONTACT
4ESTIMONIALSOR
CLIENTSTORIES
-ARSHALLLOGO
(EADER
7HY-ARSHALL
3ERVICES
!BOUT5S
#LIENTS
#ONTACT
#ORPORATEIDENTITYANDBRANDSTRATEGYADVISORS
TOWORLDLEADINGCOMPANIES
)MAGEOFWORKENVIRONMENTORPEOPLEWORKING
,EDBYLEGENDARYIDENTITYCONSULTANT
0HILIP-ARSHALL$URBROW-ARSHALL3TRATEGY´S
SENIORTEAMOFIDENTITYANDBRANDSTRATEGY
EXPERTSADVISES#%/SANDMARKETING
EXECUTIVESONSTRATEGICPRIORITIESFORTHEIR
ORGANIZATIONSANDBRANDS
7HY-ARSHALL
-OREABOUT0HILIP$URBROW
6IEWOURCOMPLETECLIENTLIST
-ARSHALL3TRATEGY)NC0INE3TREET0ENTHOUSE3AN&RANCISCO#!
4EL&AX
32
&OOTER
33
In my early explorations, I tried various layouts,
Once designed, I coded the site in XHTML/CSS
color palettes, and image styles. I also looked at
markup language. I commented and formatted
the possibility of a typographic-based direction.
to make it easier for Marshall to edit later.
Early explorations
Source code of home page
34
35
PC World’s website lagged behind competitors with richer,
easier-to-use sites. According to Alexa traffic rankings,
they ranked more than 600 sites below Cnet.com. To attract
more visitors, a new site had to be both unique and clear.
PC World wanted to improve their site’s
The new design reclaimed red as a dominant
information design. They also wanted a bold
brand color and established clear hierarchies
and distinct personality that reflects the
through consistent typography and color.
fearlessness of their editorial content.
Gradient, highlights, and drop shadows also added
depth, helping to define information clearly.
Old home page
38
New home page
39
A module-based grid system allowed
The site used modern web technologies like AJAX
editors to recompose pages quickly while
and DHTML to improve responsiveness. For example,
keeping an orderly appearance. The grid also
the Find a Review tool shown below could be
incorporated standard internet ad sizes.
opened and closed without refreshing the page.
The site’s grid system
Laptops page with the Find a Review tool opened
40
41
I designed different page types and module
configurations using the grid system. I also
showed how the visual language could extend
to tables, rating badges, and icons.
Product rankings page
42
Article page
Product review page
43
Thank you very much.