SPIRITED AWAY千と千尋の神隠し-----------------------

Colour Moodboard

Midnight Blackrgb (43, 42, 48)

Dark Creamrgb (253, 225, 173)

HEADINGS

Body Text

Links

Spirited Away Whitergb (248, 237, 218)

Pop Pinkrgb (222, 74, 96)

SPIRITED AWAY千と千尋の神隠し-----------------------Font Inspiration/

Pairings

Heading: Overlock SCBody: Crimson Regular

Heading: Overlock SCBody: Lora

FINAL CHOICE

Heading: Overlock SCBody: Noto Serif

Heading: PangolinBody: Lora

千と千尋の神隠し

千と千尋の神隠し千と千尋の神隠し

千と千尋の神隠し

千と千尋の神隠し千と千尋の神隠し

TYPEFACES

SPIRITED AWAY千と千尋の神隠し-----------------------

Initial sketches and thoughts

Reasons for final design of site--------------------------------------------

Initially wanted to do a one page site with different layouts for each section as you scroll down, but thought it would be cleaner if the sections were on different pages with some consistency running through them.

I did two separate layouts, both of which did not go into the final design, but I used elements like the grid for the images on the homepage, and the large background images for each page.

I used the lanterns for my animation but decided it would look better as a divider rather than have it sit under the nav bar, as it might have looked a little busy.

I felt that these two typefaces would give the site a whimsical feel without it being too childish. Although the film is aimed towards a younger audience, those visiting the site would most likely be parents or those who watched the animation back in their childhood, and the typography needed to be engaging and have enough character - but not too much as to put people off when they first land on the site.

OVERALL DESIGNHaving watched the animation well over 10 times throughout the past 15/16 years, the first being when I was around 10 years old and the last being 26, I knew that this site had to cater for audiences of all ages. I didn’t want the site to be too childish but have enough character and feel of the film as much as possible to offer a taster to those who’d never seen it before or bring back familiar memories for those who have. As the film is mainly set in the spirit world, I used transparency in some of the colours and box/text shadows to create some blurry/seethrough effects and give off a ghostly vibe.

Images of the film were also must-haves on the site because the animation is so beautifully illustrated. I opted to put these as background images for the whole page on larger screens, and just for individual sections on smaller screens. As the images contained enough colour in them, I could get away with having dark backgrounds and only having three main colours for the text.

In terms of bringing an element of surprise and something fun, I created a animated divider made of lanterns which move up and down and says ‘Welcome’ on them in Japanese. They also dim when you hover over them. I didn’t want to do too much as it might overpower the content and the imagery, but I wanted something that was noticeable enough for users to enjoy.

COLOURSThis was quite a difficult decision, because there are so many colours used throughout the animation, but I knew I wanted to incorporate them into the site somehow. I noticed that the pink popped up in quite a few of the image stills that came up, and also Chihiro - the main characters wears that colour throughout the film. I decided to use it as a feature colour in the site, but opted for a slightly darker pink that was used in the buildings/lights. I used dark colours for the background to give a mysterious atmosphere and to make the lighter creamy colours stand out.