I have some experience using Webflow however I always struggled with creating consistent page structures and making top nav’s. I found the tutorial we received in class particularly helpful. I didn’t quite keep up but did my best to follow the steps throughout the demo, see above outcome. I have applied the same method to create my portfolio website

Top Nav

When creating each portion of my page I added a section and container to house the content. To create a nav I used a nav component provided by Webflow as a template. This component and something I was not aware of when using Webflow previously. Before creating any new components I now make it part of my command practices to check the component list to see if what I’m trying to build is already there.

A greater feature of the nav component is that it is already designed to be responsive so when I adjust my screen to mobile a hamburger menu appears with a dropdown section.

I reformatted my nav shown above, by making the background white, spacing out the menu items on the left and placing it in a container with a max-width of 1400px. I reduced this as I moved down the screen sizes and added 15px of padding to the top.

To create the line appearing on the hover effective I followed a quick tutorial. To create this I had to add a hover state to the nav link and adjust to the background linear gradient effect to create a line.

Dropdown Menu

It took me a little while to figure out how to make the dropdown portion of the nav selectable though once I found the right area in the settings menu I was able to style the elements quite easily. I tried adding a drop shadow making the background white and then black however in the end I selected a blue background with black text as this contrasted the background nicely without being too stark a contrast.

Once I had completed the nav and was happy with my dropdown and how the nav appeared on all screens I made it a symbol so that I could easily reuse it on other pages.

 

Zoom hover effect

I wanted to include some nice interactions on my page so I decided to go for a zoom hover effect. I achieved this on my feature image by adding the image as a background to a div block applying a scale-up hover effect and adjusting the transition to Transform:600ms. I also had to hide the overflow to keep the image frame in place.

I did the same for the rest of the project images however with these I realised I could apply the hover effect to the actual images and therefore, I didn’t have to make the images background images. As the images were smaller I used a slightly fast transition of Transform:500ms.

 

Contact Section and Footer

I created two separate symbols for the contact section and footer and included these in all pages I was able to create the content section by placing two div blocks in a container and left and right aligning the content. I added the line rule at the bottom of this section. This can be added in a number of ways, I decided to include it using the HTML Embedded code editor

To create the footer I used a columns element containing two columns and left and right the text to add the secondary nav and my monogram on opposite sides. I then used a div block to include additional copywrite information below. I placed the secondary nav links in a div box and adjusted its max-width to make the list move from horizontal to vertical on smaller screen sizes. I decided not to use the provided footer template for this as the format I required was quite different from the footer component provided by Webflow.

Responsive Design

To make my design responsive on all screens I divided my pages in sections and placed containers in each section set at varying max-widths to work the various screen sizes. A great feature included on Webflow is the screen adjuster. You can click through using a top nav to different device types including a desktop, tablet, mobile horizontal view and mobile vertical view. Within each of the displays, you can adjust the screen by dragging it at its edge. This causes the above scale to appear and the list of devices that use the screen width your view is currently set. I think this is a great feature as it allows you to check how your website will appear on all devices and optimise for specific devices if required.

I managed my content using an inline-block display and placing elements in columns and setting the columns to stack on the required screen sizes. I attempted to use flexbox to do this originally however I found that images were not filling div blocks on wider screens and switched back to the block elements display.

An issue I ran into was that I needed images to appear at different ratios on different screens. At first, I attempted to do this by framing the image and setting overflow to non-display. however, after having a one-to-one tutorial I realised I could make edits externally. I then upload a separate image and hide it on larger screens and hide the larger image on smaller screens using the hide selection in the display menu. This was a much easier approach and something I would definitely do again when building a responsive website in future.

Case Study

I found case studies quite simple to build following my home page build as I was able to pull a lot of the elements through such as the Top Nav, Footer, Contact Section, Hero Section and top Project Image Section.

A new structure I had to create was a two-column outcome with one column spanning one column and the other spanning three columns and the same in referee for my next blog section shown above. This was actually very simple to do, once I had added the columns I simply used the column setting custom options and was able to make changes easily from there. Likewise, when viewing on a smaller screen I stacked the columns so that the subheading appeared above the text.

Accessibility checks

When my website was complete I wanted to run accessibility checks and found a website that allowed me to run my whole website through a colour contrast check. Unfortunately, I can no longer access this resource so I have included an example of a colour contrast checker that allows users to check colour contrasts individually. As shown above I found that my purple #9e6cf6 was failing on colour contrast and had to make amendments. On white backgrounds, I used #8f53e9, on light blue box backgrounds I used #9b06ff and on nearly black backgrounds I used #af82ff. These amendments meant that my colour contrasts were strong enough to meet accessibility standards.