An aspiring graphic designer who designs with quirk and control.
SG-ui-05.png

Studio Ghibli Website

Studio Ghibli Website (fan built)

Studio Ghibli (Ghibli is pronounced as "jib·lee") is a Japanese animation studio that focuses on creating websites that are more hands-on rather than digital; they manually paint each frame. The concept of this website is to show the interesting behind the scenes of Studio Ghibli. I DO NOT OWN ANY OF THE PICTURES. ALL PICTURES GO TO THEIR RIGHTFUL OWNERS.

When I first started this out (in my Freshman year of college), I used bootstrap and HTML/CSS to code this website. It was pretty responsive, but it wasn't really aesthetically pleasing... well.. a lot was going on.

 
 

When I look back to this, it made me want to re-do this again (design-wise). I started with sketches:

sg-sketch.png
sg-sketch 1.png

then to wireframes (read from left to right)

 

Home Page

SG-ui-01.png

Films Page

Initial & Final Process of Studio Ghibli Animation

About Page

SG-ui-02.png

Films Page > Specific Film

 
 
 

and then the content

I illustrated Hayao Miyazaki's person and trophies (that he achieved) because I wanted more of an "animated" or "illustrated" feel to this website. Since this is based on an animation studio, I felt illustrating a few things were necessary.

I illustrated Hayao Miyazaki's person and trophies (that he achieved) because I wanted more of an "animated" or "illustrated" feel to this website. Since this is based on an animation studio, I felt illustrating a few things were necessary.

These films are put chronologically. Studio Ghibli have also done more, but this is an example of how their films page would be shown.

These films are put chronologically. Studio Ghibli have also done more, but this is an example of how their films page would be shown.

The illustrations and drawings are not mine. They belong to Studio Ghibli animators. 

The illustrations and drawings are not mine. They belong to Studio Ghibli animators. 

For the text content in this page, I used Ghibli Gabble. (I used Wikipedia for the previous pages for the content).

For the text content in this page, I used Ghibli Gabble. (I used Wikipedia for the previous pages for the content).