Portfolio for web & ui:ux design

Page 1


Ui Design & Web Design This section of my work, contains projects that demonstrate my ability to not only create and layout a web page, but also how I arrange the items on the page for users to interact with.


Q Website main page My personal web page that holds not only my portfolio of works, but also displays recent works in photography, web, illustration, design, contact info and more! These pages are viewable by the tabs on the sidebar. Once a section is clicked, an image will slide into view and show the image content of that group.


design page This is the navigation of the site. From the main page, to the design section. Next, It leads into any project and its process works. These pages consist of hover buttons and artworks as well as a back button and the letter “Q� to go back to the main page. When the mouse hovers over an image, it will reveal the text content behind each to describe the project.


photography page This part of my site, has multiple subdivisions of pages and groups to show the various styles of photo shoots I have done. After selecting a group, the focus would then go further into each section and show the images in a light box setting, so the viewer can see each image at a time. This section also incorporates the hover technique to show the information behind each image.


Illustration page This section displays my work as a list of colored works or as sketch works I have done using painter, photoshop, or other painting programs. When clicked, the images are viewed in a light box setting.


kun Photography web page A prototype web page for a photography group. This site consists of Photography learning and support. It has examples of photos from various albums, along with a donation section and multiple language support, for international audiences looking to learn about photography. The footer also includes a contact form for those who would like to send a message along with their name and email.


Chicken Coop digital & web materials A newly established franchise “Chicken Coop� looked to have a new way of presenting their menu boards to the public. For that, I was contacted to help refine, photograph and display their menu in a digital format. Beyond the digital menu boards, the franchise also asked me to produce marketing materials such as promotional and advertisements for both in-store and web.


ordering app A design mock-up for Chicken coop franchise and their move forward into ordering, using web apps and mobile applications. In the design, there is the logo at the top left, below it is the timed sliding special menu. After every 5 seconds the slider will slide to another advertisement. To the right is the Chicken menu; one of 4 menus in the franchise ordering selections. Of the menu are 3 selected items which are then at the bottom calculated and displayed as the total amount. And to the right of the total is the pay now button. In the background, there is the logo icon of the franchise which is the Chicken.


The Survival Kit project program An interior company program that allows each (designer, project manager, secretary) to access, add, complete and organize the projects for the company. This application allows the users to visually see their projects, the date its due, which category the project belongs to, a brief description of each project in the section and a small calendar ,which is color coded, to better organize and set each project apart for the viewer.


MIPJunior 2012

product line up

3D Â TV

Tianjian North Film Group

Tianjin  North  Film  Group

Tianjin  North  Film  Group

mipcom 2012

product line up

3D Â TV

 11  mins.  x  104  ep.

 11  mins.  x  104  ep.

(China’s 2nd largest film distributor)

104  episodes 11  Minutes  Animation,  In  Stereo-3D

Fresh  from  the  cinematic  success  of  the  animation  ,“Legend  of  a  Rabbitâ€?  which  was  distributed  in  over  70  territories  worldwide,  a  brand  new  3D  TV  series  kicks  into  production.

ACTION Â Â ADVENTURE Â Â COMEDY

web materials

WATCH Â THE Â TRAILER

LEGEND  OF  A  RABBIT  Tu  &  Bo’s  Kung  Fu  Adventures   (2013)

It’s  Peking,  China  around  400  years  ago,  in  a  time  where  Kung  Fu  swept  across  the  land  with  two  academies  dominating  them  all  -  the  Ying  Yang  and  the  Fox.   Two  teenage  friends  Tu  (a  Rabbit)  and  Bo  (a  Bear)  grew  up  trying  to  get  into  their  favorite  kung  fu  academy  and  learn  the  best  Kung  Fu.  Tu  is  kind-hearted,  likes  to  help  others,  and  loves  to  cook,  yet  Bo  ' #( % %# $ ) $*# ' %$ 1 ) ' $ $ - ) $ + $)*' % meeting  warriors,  bandits,  masters,  beauties  and  beasts,  Tu  eventually  rises  in  the  Ying  Yang  school  while  Bo  strays  to  the  â€œdark  sideâ€?  of  the  Fox.  What  would  become  of  this  brotherhood  next?

LEGEND  OF  A  RABBIT  Tu  &  Bo’s  Kung  Fu  Adventures   (2013)

WATCH  THE  TRAILER $/(2.#$2 11  Minutes  Animation,  - 3$1$.

Fresh  from  the  cinematic  success  of  the  animation  ,“Legend  of  a  Rabbitâ€?  which  was  distributed  in  over  70  territories  worldwide,  a  brand  new  3D  TV  series  kicks  into  production.

ACTION Â Â ADVENTURE Â Â COMEDY

                                                                                       Â

LEGEND Â OF Â A Â RABBIT Â 3D Â Â (2011)

WATCH  THE  TRAILER 84  Minutes Animation  Feature Â

WINNER  â€“  2011  China  Elite  Award  for  Best  Animated  FIlm WINNER  â€“  Golden  Rooster  Award  for  BEst  Animated  Film WRITER  /  Sun  Li  Jun  DIRECTOR  VOICE  CAST  Jon  Heder  Tom  Arnold Michael  Clarke  Duncan Rebecca  Black ACTION   ADVENTURE COMEDY

3<2 $*(-& '(- 1.4-# 8$ 12 &. (- 3(,$ 6'$1$ 4-& 4 26$/3 across  the  land  with  two  academies  dominating  them  all  -  the  Ying  Yang  -# 3'$ .7 6. 3$$- &$ %1($-#2 4 !!(3 -# . $ 1 &1$6 4/ trying  to  get  into  their  favorite  kung  fu  academy  and  learn  the  best  Kung  4 4 (2 *(-# '$ 13$# +(*$2 3. '$+/ .3'$12 -# +.5$2 3. "..* 8$3 . #1$ ,2 .% !$".,(-& 3'$ -4,!$1 .-$ =&'3$1 - - $7"(3(-& #5$-341$ .% meeting  warriors,  bandits,  masters,  beauties  and  beasts,  Tu  eventually  1(2$2 (- 3'$ (-& -& 2"'..+ 6'(+$ . 231 82 3. 3'$ :# 1* 2(#$; .% 3'$ Fox.  What  would  become  of  this  brotherhood  next?

w

“Sweet...  a  refreshing  alternative  to  hollywood  animated  heroesâ€? The  Hollywood  Reporter

$ . . $ *$ * # () ' 2 ( '%# ) #& ' " ). )% (# "" village.  He’s  been  betrayed  by  his  number  one  disciple  and  is  on  his  last  dying  breath.  He  is  found  by  a  humble  farmhouse  cook  named  Tu  who,  at  the  request  of  the  dying  master,  must  return  a  very  important  Kung  Fu  Academy  Tablet  to  the  master’s  daughter  Peony  in  the  imperial  city.  Tu  made  a  simple  promise  that  turns  out  to  change  his  life  forever.

                                                                                       Â

LEGEND Â OF Â A Â RABBIT Â 3D Â Â (2011)

WATCH  THE  TRAILER 84  Minutes Animation  Feature Â

WINNER  â€“  2011  China  Elite  Award  for  Best  Animated  FIlm WINNER  â€“  Golden  Rooster  Award  for  BEst  Animated  Film WRITER  /  Sun  Li  Jun  DIRECTOR Â

                                                                               WATCH           THE  TRAILER

             LETHAL    HOSTAGE   (2012)

100 Â Minutes

WRITER Â / Â DIRECTOR Â CAST Â

DRAMA CRIME Â Â THRILLER

Cheng  Er

VOICE  CAST  Jon  Heder  Tom  Arnold Michael  Clarke  Duncan Rebecca  Black ACTION   ADVENTURE COMEDY

Sun  HongLei Wang  LuoDan

“Sweet...  a  refreshing  alternative  to  hollywood  animated  heroesâ€? The  Hollywood  Reporter

-$ # 8 #8(-& 4-& 4 , 23$1 >$$2 %1., 3'$ ,/$1( + (38 3. 2, ++ 5(++ &$ $<2 !$$- !$31 8$# !8 '(2 -4,!$1 .-$ #(2"(/+$ -# (2 .- '(2 + 23 dying  breath.  He  is  found  by  a  humble  farmhouse  cook  named  Tu  who,  3 3'$ 1$04$23 .% 3'$ #8(-& , 23$1 ,423 1$341- 5$18 (,/.13 -3 4-& 4 " #$,8 !+$3 3. 3'$ , 23$1<2 # 4&'3$1 $.-8 (- 3'$ (,/$1( + "(38 4 , #$ 2(,/+$ /1.,(2$ 3' 3 341-2 .43 3. "' -&$ '(2 +(%$ %.1$5$1

$ . '( % ) ) %' ' % $ $ # % '* )' 1 ! ' 350  held  An,  a  Dentist’s  young  daughter,  as  hostage  after  a  failed  )' $( ) %$ 2 )% # % , ) $ $ ' ( ' ( ( %,$ 350  and  An  fell  in  love  and  married  eventually.  Despite  Dentist’s  several  attempts  in  reaching  out  to  his  daughter,  An  refuses  to  reunite  with  her  father  but  to  follow  350  even  when  he  is  wanted  by  the  police. Â

                                                                               WATCH           THE  TRAILER

WATCH Â THE Â TRAILER

THE Â FLOATING Â SHADOW Â Â (2012) 100 Â Minutes

WINNER  â€“  Best  Picture,  Best  Director,  Best  Actress  â€“  2010  UK  China  Image  Film  Festival WINNER  â€“  Worldfest  (Houston  Int’l  Film  Fest)  REMISpecial  Jury  Award–Worldfest  Best  Script  Gold  Prize WINNER  â€“  Best  Foreign  Film,  Best  Actress  â€“  5th  Buffalo  Niagara  Falls  Film  Festival  1 " " ) %$ 0 ) % *"% ) ,&%')

CAST  Li  Jia  Shen  AoJun Â

WRITER  /  Sun  Li  Jun  CAST  DIRECTOR  For  years,  anlu,a  mythical  mongolian  illage  ,!.#( has  been  terrorized  by  a  big  $- 8$ 12 N&. 3 3'$ !.1#$1 .% '( v-# #14& 31 %="*$1

Monster.  the  latest  battle  in  defense  f  the  village,  head  of  the  clan  held  An,  DIn  entist’s  young  daughter,  as  hoostage  after  at  he  failed  transaction.  !4 6 2 " ,!.#( /341$# .-23$1<2 .-+8 ".-#(3(.- .% 1$+$ 2(-& !4 (2 3'$ $ >$# 3. 6(3' - -# 1 (2$# '$1 2 '(2 .6-

-# - offering  of  a-# ,  young  boy  in  exchange.  The  fate  of  the  village  + n33$,/32 (- ow  rests  on  %$++ (- +.5$ 11($# $5$-34 ++8 $2/(3$ $-3(23<2 2$5$1 !4<2 3$$1# 1 reaching  out  t&$ # o  his  4&'3$1 $(+4 (3' 3'$ '$+/ .% 6(9 daughter,  An  refuses  to  reunite  with  her  f--($ ather  b-ut  6'. to  !1.4&'3 .- 2/$"( + !.8 %1., :.3'$1+ -#; 2 3'$ .%%$1(-& $(+4 $,! 1*2 %.++.6

$5$- 6'$- '$ (2 6 -3$# !8 3'$ /.+("$ on  a  dangerous  mission  to  rescue  Habu  and  the  entire  Nanlu  clan.

For  years,  soft-spoken  kindergarten  teacher  Lu  has  been  haunted  by  %'' 1 # #%' ( % ' & $ %# () + %" $ ' '! " %% drove  her  to  commit  murder  on  her  husband.  A  police  investigator  is  determined  to  lift  her  out  of  an  unspeakable  past  and  help  her  acquit  life  imprisonment  -  but  in  the  process,  darker  shadows  lurk  behind.

Contact  in  MIPJunior:  Elliot  Tong      Email:       Tel:  +86  13911259177 , (+ 42 3. 2$3 4/ ,$$3(-& 3 MIPJunior  that  best  suits  your  schedule.  Thank  you full  info  at:  666 3) =+, -$3

WATCH Â THE Â TRAILER

    BATEELAER    SAGA   (2012)   Â

85  Minutes Animation  Feature

1 " " ) %$ % $$ . $) '$ ) %$ " $ # ) 1"# () + " WRITER  /  Sun  Li  Jun  DIRECTOR  ADVENTURE  Â

For  years,  Nanlu,a  mythical  mongolian  village  has  been  terrorized  by  a  big  Monster.  In  the  latest  battle  in  defense  of  the  village,  the  head  of  the  clan  Habu  was  captured.  Monster’s  only  condition  of  releasing  Habu  is  the  offering  of  a  young  boy  in  exchange.  The  fate  of  the  village  now  rests  on  Habu’s  teenage  daughter  Beilu.  With  the  help  of  wizard  Grannie  Tana  who  brought  on  a  special  boy  from  â€œotherlandâ€?as  the  offering,  Beilu  embarks  on  a  dangerous  mission  to  rescue  Habu  and  the  entire  Nanlu  clan.

WATCH Â THE Â TRAILER

COLOR Â ME Â Â LOVE Â Â (2010) Â Â Â Â WRITER Â / Â DIRECTOR Â CAST Â

ROMANTIC Â COMEDY

97 Â Minutes

Alexi  Tan

Joan  Chen Yao  Chen Liu  Ye Despite  having  the  most  coveted  internship  at  a  top  fashion  magazine  in  the  country,  Fei  dreams  of  becoming  a  journalist.  Not  knowing  anything  about  fashion  and  having  snooty  colleagues  who  look  down  %$ ' " ! % ( %$ ( $( % ) $ 1$ ( '( " $ ,!, ' *) humorous  situations.  Fei  keeps  true  to  herself  and  earns  the  recognition  of  the  editor-in-chief,  Zoe,  who  decides  to  take  Fei  under  her  wing.  Fei  meets  Hong,  a  young  and  famous  artist  who  has  a  reputation  of  being  ,%# $ / ' %# $ '%# ' $) ,%'" ( %) 1$ %##%$ '%*$ and  fall  in  love  eventually. Â

Contact  in  MIPCOM:  Elliot  Tong      Email:       Tel:  +86  13911259177 Please  visit  us  at  MIPCOM  Booth  N°07.40 Email  us  to  set  up  a  meeting  at  MIPCOM  that  best  suits  your  schedule.  Thank  you full  info  at:  ,,, ) 1"# $ )

(-43$2 100  Minutes Animation  Feature

WRITER Â / Â %="( + $+$"3(.- .% --$"8 -3$13(.- + -(, 3$# =+, $23(5 + DIRECTOR Â

ADVENTURE Â DRAMA, Â CRIME Â Â THRILLER

WRITER  /  Jia  Dong  Shuo DIRECTOR Â

PSYCHOLOGICAL Â THRILLER Â

             LETHAL    HOSTAGE   (2012)     BATEELAER    SAGA   (2012)   Â

At TJNFG I was in charge of producing web materials such as newsletters for upcoming films, TV episodes, games and other. I also was in-charge of producing promotional material for email blasts promoting FILMART, MIPCOM 2012 and MIPCOM jr. This page contains clickable links to each film, viewable on an exterior website, such as (youtube, youku etc.)


kun studios web page A prototype web page for a integrated design company. includes, blog, welcoming page, contact page and tabs for other pages.


XRS TOTAL web page A prototype web page dedicated to inner peace, meditation and serenity for the body. The page is layed out with the title and background imagery, plus a short inspirational film for the viewers who visit the site, who don’t know much about the company.


Silent Praise web site & materials (in production)

This is the most recent web project that I am working on. I consists of a church sign language group that interprets songs with their hands (mime). In this project I provide them with a landing page, main page, personal photography, a calendar and donation page for contributions to their group. Of this landing page, the images circulate as a turn table to give the viewer a visual representation of the group before they open the site. At the bottom is a responsive slow dropping sliding bar that reveals the enter site button.


User Interaction Log-in & Sign up material These are experimental applications, to test out how people will interact with and use when they log into a website, or register themselves to a website. The use of color is the experimentation of which a user will feel the most comfortable.


The Survival Kit Log-in & Sign up material An interior company login and sign-in page that users at the survival kit could log into their accounts and be able to use the system and create projects or complete them. Each person would have their own personalized log-in background image as they would log in, depending on which icon image they would drag and drop onto the image area. 1: The user will click the icon on the left, opening a library of users to select from. 2: The user then can drag their image into the center of the box, which then will trigger the log-in selection and background visuals giving the user a customized log-in setting. 3: final sign-in page.

3


News

Photo

Events

Tourist

Automotive

Weather

Community

Finance

Sports

Education

Food

Health

I need a...

Find a...

About Us

Popular pages

Logo design

Graphic designer

About us

Design Contest

Web page design

Logo designer

How it works

Design Bids

Graphic design

Web designer

Contact Us

Design Outsourcing

Brochure design

Print designer

Affiliate Program

Design Jobs

T-shirt design

Flyer designer

Press

Design Crowdsourcing

Poster design

T-shirt designer

Help / FAQ

Logo Bids

See the full list

See the full list

Blog

News

Photo

Events

Tourist

Automotive

Weather

Community

Finance

Sports

Education

Food

Health

I need a...

Find a...

About Us

Popular pages

Logo design

Graphic designer

About us

Design Contest

Web page design

Logo designer

How it works

Design Bids

Graphic design

Web designer

Contact Us

Design Outsourcing

Brochure design

Print designer

Affiliate Program

Design Jobs

T-shirt design

Flyer designer

Press

Design Crowdsourcing

Poster design

T-shirt designer

Help / FAQ

Logo Bids

See the full list

See the full list

Blog

News

Photo

Events

Tourist

Automotive

Weather

Community

Finance

Sports

Education

Food

Health

I need a...

Find a...

About Us

Popular pages

New Beginings in

Durham

New Beginings in

Durham

New Beginings in

Durham

Design Travels web site (in production)

A website dedicated to unique travels to parts of the world. It includes shared experiences, information and events. Special items are still imagery and roll-over buttons for the main landing page.


Quinton Quaye saminoske2@yahoo.com


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.