Web Experience: Michael Bierut
Build a responsive webpage to showcase designer Michael Bierut. The webpage should be visually consistent with the booklet, video, poster, and mobile prototype.
I first started working on a wireframe to start my process. The wireframe helped me guide my layout as well as inform me of any impracticalities in my user experience.
Basic Wireframe:
With the wireframes done, I started to code the basic structure of my webpage. The first thing to do was the create the column structure: I had a 12 column grid as the basis for my entire site. 1 column would be used as the margin on each side of webpage.
I made all the different possible combinations of columns between 1 and 12, each with a proportional width. I also created a navigation bar that would be present on all webpages except for the home page; it would include the items “Who is Michael Bierut?”, “Chronology”, “Quotes”, and “Credits”.
The links would change from html to html page as I would have to change which links were self referencing. Additionally, I wanted to center-align my navigation bar like I had designed in the wireframes. I took to Google to find some answers.
After building the basic structure for the webpage, I started populating the different pages with content. I wasn’t able to completely finish every page, but I built the basics to continue working on the site after the deadline.
First, I built the home page to mimic the cover of my booklet. I wanted to continue using the halftone grid. I also overlayed some text on top of the grid because I wanted the grid to take over the entire page.
The grid was behaving funny at first because the images would not fill the entire screen. On each row, there would only be shown 5 images instead of 6. I was able to combat this issue by using a different grid set up.
I created a new class of main called homepage12, which would use display:grid instead of display:block. I created a 12 column grid structure with 4 rows for the home page. I then messed with the view height to be 130% view height to get consistent spacing between the images.
Finally, I used this bit of code to overlay the text/navigation items on top of the images.
Here is the final homepage:
Here is the “Who is Michael Bierut?” page. I wanted to keep it minimal while also practicing how to set type on a web format using HTML and CSS.
Moving on to the “Chronology” page, I decided that I wanted to implement a hover state with each of the different items on the timeline. I made thumbnails of the different projects in Photoshop and placed the thumbnails into a grid.
When hovering over each of the images onscreen, a small bar of text would appear at the bottom left corner of that image. Andrew helped me figure out the CSS for this, which can be shown below.
Finally, I built a few pages with relative simplicity. I want to do more with each of these pages, but given the time constraints, I wasn’t able to fully build them out.
I wanted to do more with the different interactions for this webpage. For example, I wanted to build something in Javascript to make the page feel more responsive to the different mouse interactions the user could make. The landing page could use aspects of animation to bring in the different grids. Additionally, the quotes page could also have different hover states or scroll interactions. I will be continuing to build these aspects out over the summer. I think that I have provided the webpage with a good backbone, but there is still much to be done in order to create something I am satisfied with.
