Before I start creating my website I have to create a few things to help make the process of building a website less sophisticated and more efficient. Thankfully, I have recently made a brand/style guideline for my website. I am using a lot of the material from last year such as colour scheme, typography and visual media e.g. gifs, etc.
Another thing I must consider to make the web building process easier is the typography hierarchy. I found a tutorial online that gave a free web-flow document that acts as a fundamental guide to creating the hierarchy of my website. Along with using the type scale visualizer, I found this guide extremely helpful in creating a visual hierarchy. Other things to create a hierarchy include colour/hue, typefaces and weight on the typography. Together I will use all of these methods to create a pleasing visible scale among the content on my website.
Now that I have all my styles done and media created it’s time to build the website although I don’t have much experience with Webflow it seems like an easy enough tool to use. Messing about the templates Webflow provides has given me sufficient experience to begin the process of building my website.
I began with the navigational bar as I thought it would be the easiest and most practical thing to do. I have designed in it my chosen colour scheme with a newly created and simpler wordmark alongside an animated version of my monogram to make the site more immersive and reactive.
(*Side note* the case studies are a different colour purple to everything else, this was done on purpose as I felt like the colour sat really well with the design.)
Units of measurement
After building my website’s homepage to an efficient enough degree, I started to explore different units of measurement. One major problem last year was how unresponsive my website was. I started to look at viewport width/height measurement as it is one of the more modern units that provide full versatility and responsiveness to design. I tried this mainly on my typography alongside percentages, and em. I found this unit very flexible and created a smooth responsive flow when resizing the browser.
Acknowledging the Problems
Although this unit is better than most it does come with problems. One of the problems I found was when exploring smaller devices the typography becomes too small to read as it scales with the screen and this gives the opposite effect when viewing on larger screens as the font becomes too large. Another problem I found is that the browser’s zoom feature doesn’t work as the typography is scaling with the screen. An efficient solution to these problems is media queries although this can get tricky especially when there’s a lot of queries involved throughout the website. Additionally, one last problem I ran into was it was much harder to create a true-to-unit hierarchy as many sites didn’t provide this unit of measurement. However, the most up-to-date browsers support this unit of measurement.
Case Studies
Once I had the case studies complete I loved the layout of the hero that greeted people upon opening the page. This allowed users to quickly go to whatever stage they wanted. This was added unconditionally as I suddenly got an idea for it. However, as this was added unconditionally I forgot about structuring the content inside of it so when viewing on devices smaller than laptops it began to give progressively distorted.
I managed to keep this style for a while however it was extremely awkward to work with. However, I came up with an ultimate solution for it. The solution? – delete it entirely, well not entirely just most of it. I replaced it with a simple title, description and tag hero which proved to be way more responsive and easier to manage on smaller devices. I also fixed the inconsistent margin which was plaguing my site by using containers/sections margins – easily fixed.
Additionally, I had to replace the numeric system my content had with a more descriptive title. Although the previous system looked more aesthetically pleasing, it was not practical. I then implemented this design throughout my site including the contact screen.
Reflection
Overall, I am extremely happy with the outcome of my site I feel like achieved consistency, responsiveness and simplicity throughout the design especially in typography, colour, etc. I feel like I have created a fully-fledged responsive website which was my original goal. Although, some tweaks do have to be made. I am extremely happy with the result and the processes that went before it. However, if I was to build a site again I feel like I would build it better as I am more knowledgeable about what individual element does and through problem-solving of this design. Unfortunately, web-flow only allows for one full website at a time unless the subscription is upped.