I’ve recently made some changes to my University coursework page. So I thought I would document what I have, how I have done it and why I have done it that way….

First step is finding a colour palette. I don’t like using existing websites for inspiration and so I tend to avoid places like Dribbble. This is just my personal process and it’s because I want to create a brand identity, so I need to think about the brand itself. My first step in this process is creating a moodboard, usually using pinterest because I can pin lots of things chaotically and choose to refine them later on. In this instance I actually used a whimsical board.

The inspiration for this moodboard came out of my idea to change the layout of my coursework page to reflect a folder manager interface. So I started looking at the folder manager of my first computer which was a commodore 64, and then looked at similar examples across lots of different operating systems. I also have a website example in this moodboard as I found someone had done something similar with their coursework page layout.

The first thing that spoke to me was the various uses of blue. So I used an eyedropper tool to pull out some of the various blues. I did this until I had a collection of various hues, value and saturation.

Now that I have a few colours the next thing that I want to do is consider how I am going to use them, and also that they meet the Web Content Accessibility Guidelines (WCAG). There are a few resources for checking if your colour palette meets WCAG, and it depends on my process on which one I use.

Now that I have an idea of how I might use the colours I will apply them to the local version of my coursework page. I still am not 100% sure what colours are going where so instead of applying the colours to each element of my page I have created CSS properties for different areas I am going to change the colour. This means that I can quickly change where the colour is applied just from the CSS at the top of my style sheet.

I often use this method as I have a preference for building prototypes in CSS. I do also use tools such as figma, however this tends to be when I need to do something quickly or sometime I might do this if I am changing only one particular area of functionality of a website.

Once I have a combination that I like I check the colours meet WCAG. And then I upload the changes to the server using FileZiller.

Now that the website is live I will now double check that it is accessible for colour blind users. In this instance I use https://www.toptal.com/designers/colorfilter. This website is really helpful as it shows an example of how the website will look to people with different type of colourblindness.

List of Tools:

• Whimsical – For planning
• Photoshop*
• Contrast Checker
• VS Code
• FileZiller – FTP
• Colour Filter

*I suggest free open source tools GIMP or Krita (Photoshop Equivalent) and Inkscape (Vector or Illustrator Equivalent).