Massimo


Vignelli

___________

Web Design / Web Development

Overview

A web page constructed to showcase Massimo Vignelli's impact on Graphic Design.

Concept

1

As this was my first web development and coding experience, I wanted to keep the webpage simple but effective. The highlight was the choice of colour; I used a bold orangey-red colour taken from the front cover of Massimo’s books, combining with a black and white image of Massimo Vignelli displayed in front to set the overall look of the webpage.

Since the goal was keeping the layout ‘clean’, a solution was to adjust content into sections; a divider was coded onto the webpage,ensuring the web page is consistent and not messy.

To perfect the layout of the images, the aim was to add two grid columns for images. With a little bit of work, it worked. This structure unfolds a clean and well-followed flow, equalling as a good user experience factor.

Development

2

The Details

3

Making sure it was robust was also a priority, the ‘Back to Top’ was added as an additional feature, allowing better useability and interaction. Integrated hover feature was added in as well,resulting in a more dynamic experience.  

Colour Palette

Tomato

HEX:               #FF6545

    RGB:              255 101 69

  CMYK:         0, 60, 73, 0

Yellow Crayola

HEX:               #FFE882

RGB:              255 232 130

CMYK:         0, 9, 49, 0

HEX:               #FF4A16

RGB:              255 74 22

CMYK:         0, 71, 91, 0

Red Orange Colour Wheel

Typography #1

Hammersmith - One

ABCDEFGHIJKL
MNOPQRSTUVWXYZ
abcdefghijklmnopqrst
uvwxyz
0123456789!?\()

Used for: Title

Regular

Massimo Vignelli

Typography #2

Raleway

ABCDEFGHIJKL
MNOPQRSTUVWXYZ
abcdefghijklmnopqrst
uvwxyz
0123456789!?\()

Used for: Headings & Text

Regular

Medium

Semi-Bold

Bold

Extra-Bold

Black

Massimo Vignelli

Massimo Vignelli

Massimo Vignelli

Massimo Vignelli

Massimo Vignelli

Massimo Vignelli

To sum it up,

testing is what makes a web page work, so feedback played a significant role in discovering what worked - especially receiving advice, knowing that people want to help. The process helped to establish a consistent design layout before settling with the outcome.

Visit Web Page