EXECUTION

I decided to draft a quick moqup of what my website should look like, to get a rough idea of what I should be sticking to.

I then started to try out some of the designs I had come up with in my notepad, all on the same page so I could do some quick comparisons.

I wasn’t entirely sure but I definitely liked the dark grey header background and a light grey body, I was still undecided about the primary colour situation.

I could see the merit of keeping things rigid with squares and rectangles fitting the modules; easy to do.

I had thought of just padding the outside stroke with the colour and have the inside be grey with white text, as I just could not see it being practical to use yellow squares as a proper design aspect.

I went on to try out a version of the long linked rectangles that are woven into each other, I like the colour combination but felt it was a bit too rigid, as I was now going down a slightly quirkier path.

I changed my header to different sections of text with “Ro” being a different colour from “ugh”, navigation was still an issue because I felt it didn’t sit right with the whole page.

I thought it should be more central, so I moved everything into the centre and tried a different version of the woven rectangles, this time, overlapping one another.

I liked the revision better than my original and it became the central design piece throughout my website.

I would keep the red lines as they were and alternate the yellow and blue so it rectangles within each link up don’t have two of the same colour on the top and bottom.

I felt like I needed a separation between each navigation button, they need to be broken up in some way so I used an enlarged full stop to create the effect; I think it ended up working quite well.

I aligned the heading as I wasn’t quite happy with the quirky misshapen effect, but I kept the different colours to retain some character.

I had trouble with the “work” page as I wasn’t happy with the way my design was appearing, the text was too bland so I tried adding an element of white to it, but it made it worse. I decided on revamping it by adding the icons of the respective programs and only using the text for the actual links to my projects (as it is easier to link native HotGlue text boxes to other pages).

It made more sense to have the icons as an identifier rather than text.

It has a much better look now by aligning some of the text, I just need to move the red bar on the right to be equal to the red bar on the left.

Something I hadn't mentioned in my designs earlier was that I wanted to cater to mobiles as well as websites, so I restrained the size of my website so it's still easy to navigate on a phone.