HOME
Hiya! This page contains my tips and tricks for if you're struggling with web design. I'm no professional, but I'll share the tips that worked for me. Of course, there's no one-size-fits-all approach, so just remember that at the end of the day, the only opinion that matters is your own!
COLOUR HELP
You may find yourself asking: How should I find out which colour-combo to use for my site? On the one hand, you could just use all your favourite colours, but this might become hard to read if they're at similar values (more on that in the next section), or it could give a cluttered, disjointed look to your site (which is fine if that's what you're going for). In this section, I'll show you guys some free tools I use, how I decide on colour schemes for my pages, and some of my failsafe methods to getting a cohesive colour scheme.
THE COLOUR SCHEME OF LAVENDERBLUES
My two holy grails were the W3Schools' colour picker and colour mixer. Take the colour #FFFFE6. If I enter it into the colour picker, I can change the lightness, hue, and saturation, and also see the incremental changes side-by-side (see below).
The colour mixer, on the other hand, allows you to pick two colours and, as the name suggests, mix them. This is great for creating a unified colour palette (see below).
CREATING A COLOUR SCHEME:
In terms of the 'lore' behind my design, I suppose the general gist was this sort of cute pastel site with a vague spacey-starry-spooky thing going on with the colour scheme, meaning I focused on light blue, yellow, and purple. Ironically, I'm not the biggest fan of purple as a colour, but I felt like I had to live up to my name. Quite frankly, I might not still make the same colour choices if I were to design this again, but I don't really want to change the original design too much. Below is an image of how I've developed my main site layout, as well as some notes I've made to illustrate the 'mistakes' I made in the early development of my site.
The main takeaway from this is that I think colours shouldn't vary too much in value, saturation and hue at a time. If a colour is different hue, for example my sidebar and the box within it, the saturation is similar (and the value, but more on that in the next section). If the hue is the same, like my font colour and main body background colour, the saturation & value are different.
I use Procreate & ibisPaint X to trial different colours for my site. You can see how I planned out the colours in my very first design, and implemented these accordingly. If I'm working off an image, like my header, it's useful to colour pick using an art program and test out the colours that way. This is also useful for sketching my layouts, or for seeing if certain graphics I've made for my site 'fit' the mood of my page. Below is an example of me trialing the navbar colour for my space page:
GETTING A COHESIVE PALETTE
If you don't want to make a colour palette yourself, or maybe you don't have experience with colour picking, you could use coolors, a platform that allows you to generate a palette. I'm pretty sure it's designed to be cohesive, but you can change the settings to fit your needs (complementary, analagous, etc).
Monotone colour palettes:
A monotone colour palette would be like the one on this page. All the colours are of the same hue, just with different saturations. This is useful if you want to create a minimalist design, and is really useful for beginners (although it can kind of be hard to eyeball a natural prgression in saturation and lightness. Below you can see how I would create a monotonous palette (using a html colour picker. This should work for most art programmes with a colour wheel.
We start off with Eastern Blue, a turquoise-ish blue colour
To get a font colour, we drop the colour picker higher up, and to the left (lighter, and less saturated)
For a border colour, we take our Eastern Blue, and decrease the saturation and value slightly
Finally, for the background, we can take our border colour and decrease the value and saturation dramatically
CONTRAST ADVICE
under construction!
please come again later :0
SHAPES
under construction!
please come again later :0
FONTS
under construction!
please come again later :0