Research & Planning
When conducting my research for my web essay on Massimo Vignelli I wanted to take into consideration how he approached design throughout his own projects, a common trend I noticed throughout his work was the use of sans-serif typefaces, more specifically Helvetica. Massimo Vignelli shared many of the same principles and ideas on typography to the likes of artists from previous design movements like the Bauhaus, Modernism and the International Typography Style. Similar to Laszlo Moholy-Nagy, Vignelli saw typography as the purest form of communication. Upon further research I noticed that Massimo Vignelli was a firm believer in the use of grid systems as a design tool to allow him to create uniform and structured designs, this is something I want to consider when it comes to designing my project in order for me to demonstrate Massimo Vignelli’s design style.
Once I had completed my research and written my essay on how Massimo Vignelli became one of the most influential graphic designers in history I went on to plan out my website in some low fidelity wireframe ideas.
I have included a link to my web essay below:
Link to Website Essay – Massimo Vignelli by Benn Cox
Final Design
For my final design I wanted to consider how I will be building the website to allow me to make it easier for myself and have an initial idea on how to go about creating the website using HTML and CSS code. I wanted my website to be based on an 8 column grid with the landing page containing an addition 8 rows to create a geometric layout, I started by setting an 8 column grid the frame/art-board of my design in my Figma project and created an addition frame inside my main frame but adding an additional 8 rows and setting the height and width to 100% of its parent container, this is to replicate creating a full screen landing page using HTML and CSS.
Once I had my basic design system in place I went on to create each section of my website dividing the content into their own sections, I did this by utilising Figma’s Auto Layout feature as it allows me to make my content responsive in addition to being able to adding a fixed padding amount to keep my project consistent, this method will allow me to code my project by defining specific grid areas within a section.
I have included my design for desktop to demonstrate my ideas for this project and how I used grid systems and sans-serif typography to replicate the design style of Massimo Vignelli.
Website Build
Basic HTML Markup & Website Structure
I began my build by focusing on creating the basic layout and structure of my web essay project, as I wanted to use CSS Grid to replicate the ideas and principles behind Massimo Vignelli’s designs I began by creating each section and mapping out the grid structure. This was pretty simple as CSS Grid is extremely easy to use once you’re able to get to grips with it, I defined each section as an 8 column grid and placed my content accordingly in relation to the design mock-up I had previously created. My Main focus was to get the main structure of the website created without worrying about the finer details, some of the images I have used are not correctly placed but I will revisit this at a later stage as it is a simple fix.
I have included some screenshots of the website below in addition to some of the HTML and SCSS code that was written to create the website at this present moment.
Adding Media Queries for Responsive Design
Once I had the basic structure of my website created I went on to create the media queries to allow me to make my website responsive across a number of different devices and screen resolutions. I achieved this by using the @screen only CSS property to allow me to define specific styles and a certain screen size so the website will be displayed differently on a mobile device as opposed to a desktop screen. As I had used CSS grid throughout my project, making my website responsive was a simple task as I just had to redefine the with of each grid area to extend to the full width of the container.
I have included a few screenshots of the website being displayed at a smaller screen resolution below in addition to the SCSS/CSS code written to create this responsive design.
Adding Navigation Menus & Footer Sections
Once I had the basic framework of my web essay project created I wanted to focus on creating the navigation elements to the website and ensuring that everything is linked correctly and in working order. I took some inspiration from the W3Schools website to help me get the basic framework for the overlay navigation I wanted to use when my website was displayed on tablet and mobile devices. Overall I am happy with the outcome of the navigational elements and it was very close to the idea that I had in mind for this project.
I have included some screenshots of the website in addition to the HTML and SCSS code used to create the website.
