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 an 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
Analogous colour palettes
An analogous colour palette is one made up of neighbouring hues (like my homepage for example with the purple, blue, cooler blue). It's great for when you want to add subtle visual interest, but still have it be pretty simple. The steps are essentially the same as the monotone palette, but have a small hue shift as it goes from light to dark.
Complementary colour palettes
A complementary palette is when you have colours from opposite sides of the colour wheel in you palette (known as complementary colours. These differ when using a CMYK or RBG palette. I'll be focussing on RGB because thats what devices use (CMYK is more useful for print and doesn't look the same as when you view it on a screen). Below, you can see the Canva colour wheel, which shows you the corresponding complementary colour to what you have picked.
At this point I would jump into Procreate and play around with the saturation and value of the two. While having both of them at full saturation seems like a cool idea at first, it can be straining to your eyes, and to anyone who views you site.
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