Welcome to The Hague

Welcome to The Hague

Welcome to The Hague

Welcome to The Hague

— Get a tour of famous buildings in the city —

— Get a tour of famous buildings in the city —

— Get a tour of famous buildings in the city —

— Get a tour of famous buildings in the city —

Year

Year

Year

Website

Website

Website

Grade

Grade

Grade

2018

Year: 2018

Year: 2018

8/10

Grade: 8/10

Grade: 8/10

Objective

Objective

Objective

Objective

Welcome to The Hague is a school assignment for Visual Skills class at The Hague University of Applied Sciences. The assignment was to design a three-page website that would showcase in any way something related to The Hague.

I decided to design a website for tourists who would like to visit the most famous places in The Hague and get a tour guide.

My inspiration for this project is the official website of the city which helped me with choosing what buildings to include in my design.

Simulation of browsing the homepage.

Simulation of browsing the homepage.

Simulation of browsing the homepage.

Process

Process

Process

Process

Process

I started with curating general information about The Hague. Especially helpful resources were, in this case, the official website of the city (denhaag.com) and Wikipedia.

One of the first things I wanted to know is how does a flag of the city look like so that I can make a colour palette.

Because the flag of The Hague looks like this it would be really difficult to create a visually attractive interface.

Below is an image of the first version of the website (on the left) and final version (on the right side).

before after

Before / After

Before / After

Before / After

Before / After

Minimalism — showcase

Minimalism — showcase

Minimalism — showcase

Minimalism — showcase

Minimalism — showcase

Homepage
newsletter & menu2
Places organised in tabs

↑ Newsletter form & Menu items / Discover tabs on the homepage (detail) ↑

↑ Newsletter form & Menu items / 
Discover tabs on the homepage (detail) ↑

↑ Newsletter form & Menu items / Discover tabs on the homepage (detail) ↑

Detail of building
open hours & calendar
fog

↑ [Left] Opening Hours of a building and detail of calendar with events ↑

↑ [Above] Opening Hours of a building and detail of calendar with events ↑

↑ [Above] Opening Hours of a building and detail of calendar with events ↑

guide
map detail
maps

↑ [Left] Pop up window will display after clicking the pin icon on the map ↑

↑ [Above] Pop up window will display after clicking the pin icon on the map ↑

↑ [Above] Pop up window will display after clicking the pin icon on the map ↑

Style guide

Style guide

Contents:
-- Fonts [1 fontface]
-- Colors [~4]

↓ SCROLL DOWN ↓

wrinkled-den-haag

Fonts

Fonts

H1

Header

Header

Maison Neue - Bold

H2, H3, H4

Subheader

Maison Neue - Bold

H5, P

Paragraphs and body text

Maison Neue - Book

H6

DESCRIPTIVE TEXT AND TYPE FIELD TEXT

Maison Neue - Mono

Color palette

Color palette

C1 - Black

#0A1019

RGB(10,16,25)

C2 - Faded blue

#4B5566

RGB(75,85,102)

C3 - Grey

#757575

RGB(117,117,117)

C4 - White

#FFFFFF

RGB(255,255,255)

Next project

Next project