IXD301 – Portfolio: Using Webflow & Rebranding

This week, we were tasked with creating a home page and two case studies for our portfolio website. I continued to work on Webflow to further develop my site.

I wanted to incorporate my branding identity into my website as much as I could, to give a feeling of consistency throughout all my work. However, I found that as I began to work on my website, I was struggling with the fact that I could only use two colours – black and white. So, my decision to fix this was to change the colour scheme of my brand.

Instead of just black and white, I have now added two new colours – purple and orange. I chose these colours because I really liked the purple colour, and I had seen it on quite a few portfolio examples that I had taken a look at. The orange goes well with the purple, as it compliments it on the colour wheel, so it made sense to include it as well. Adding these two additional colours means I now have four colours to work with, which is much better in terms of accenting and using colour to direct attention.

I was then able to use these colours to create a brand new background for my monogram logo:

Building My Site

I then began to build my site around these colours. I used my mock-up designs that I had created on Figma, and incorporated my new colour scheme into it, creating a much more consistent and flowing design in my opinion.

Home Page:

As I had created a content audit and flow-chart for the pages on my website, it was easy to begin adding my variety of pages into the navigation. I added all of my case studies into a folder titled “Work” so they would be better sorted in the list.

In terms of typefaces, I felt I needed something simple and then something to contrast that – something with a bit more detail. I chose Roboto as the typeface for the main body text throughout my portfolio. Then, to contrast this, I chose Palatino Linotype, which had a more traditional, handwritten style. I would use this for headers and titles, to differentiate between the two different types of text.

On the home page, I wanted to add a little accent to my name in the opening text. I also wanted it to change colour when you hovered over it, just as something small but something that designers will notice and think is well thought out.

When the text is left alone, it is purple. Then, when you hover over it, it changes to orange. It was very easy to do this little mechanic, and is such an effective little detail.

Case Study

I then needed to add a link to my case studies on my home page, so I used the mock-up design from before to base my design on. I tweaked it a little, in terms of spacing and text, but the general design of it is still there.

I like that it isn’t crowded, and is straight to the point, and doesn’t give away too much information but allows you to gain interest, leading you to press “view”.

I then proceeded to begin edited my second page on the site – the Journey case study. I wanted to add a brief description at the top, before leading straight into the development of the project. I was struggling a bit with the spacing of the images, and the use of grids to add images to my page.

I was pleased with the way this part had turned out – the different location illustrations. I felt that it showcased the illustrations in a very sleek and orderly way.


Leave a Reply

Your email address will not be published. Required fields are marked *