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 —

Year

Year

Year

Website

Website

Website

Grade

Grade

Grade

2018

Year: 2018

Year: 2018

8/10

Grade: 8/10

Grade: 8/10

Introduction

Introduction

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 official website of the city which helped me with choosing what buildings to include in my design.

Simulation of browsing the homepage.

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 color palette.

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

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

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 first version of the website (on the left) and final version (on the right side).

Below is an image of first version of the website (top one) and final version (bottom one).

Below is an image of first version of the website (top one) and final version (bottom one).

before
after

Before / After

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) ↑

Detail of building
open hours & calendar
fog

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

↑ [Left] 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 ↑

↑ [Left] 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

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)

Copyright © 2019 Matus Hatala