Hi everyone. I’m Jay & I’m doing some website design and development for Paradise London at the moment. I wanted to create a quick video to show you how to style or play around with any website in just a few seconds really, all you need is your browser. I’m currently working from home with my cat who is apparently bulletproof and can’t get the Coronavirus.
So I thought it would be fun to do this on the Paradise London website. So say if you’re a designer or anyone that just wants to tinker with something, all you need is a browser to be able to do this. So I’m going to do this in Chrome. Let’s play around with this area of the site here. Let’s say we want to change the title colours here.
What you need to do is you need to right-click and then you need to click inspect. You’ll then get what looks like a very complicated panel on the side. So yours will probably be on the right. I’ve docked mine to the left just for ease of playing with things here. I’m just going to un-dock this. So what you need to do to do that, you just click these three tiny dots here and then I’m gonna un-dock it to a separate window.
Having it undocked is great because it means if you’ve got two screens, you can sort of play with the design. While having these tools on the other side of the screen. And what I’m going to do is I’m going to right-click this title and then click inspect specifically on this, on this title here. And when it ends up doing is highlighting where this title is within the webpage.
From here on the right side, you can see. All the rules associated with the style of this particular headline. And some of these are quite obvious, so you can see like letter spacing. You can kind of guess what that does. A margin, maybe you can guess what that does. And also the colour. So let’s put it with colour just for this demo.
Here I can click this and it opens up a nice colour picker and within here, I can drag this around and you can see it live to update in the background against all the other titles. So you can try and pick different colours just from here and see if I click back, see how it looks with, with this new colour.
Another thing you can do is you can, if I flip back to this window, you see it changes to a colour picker here. So this is really great if you want to create some like complimentary style in the design. So let’s say I grabbed this piece of artwork, I’m going to pick like one of the lighter oranges from this background, and I click that.
You can see that the title has changed to compliment this image because it’s picking a colour out of it. And then a couple of tips around colors. So the default model is to generate like a hex code, they call it, which is a way to describe a certain color. If you click this drop-down by here, you can flick through some other colour models.
I really like a colour model called H S L. This stands for hue saturation and lightness. And this makes it really easy to understand what’s going on with the color. So I can see here that this color is very saturated. So if I want to turn down the saturation, I can actually just hover in here and use my mouse wheel.
To go through the different values and you can see it changing live in the background. So the saturation is getting a lot less here. I really like HSL for playing with different colours and just tweaking them until they’re just about right. One of the things you can do with colour is if I delete this value. It goes to nothing. There’s actually a default colour value within browsers. So you can see some colours described here, like aqua, beige. And what you can do, you can just tap up or down on your keyboard to flip through all these different colours. So here I’m just like tabbing through all these different colours and it’s picking random ones out.
This is really great idea for if you want to kind of go left field with the design, be not sure what colours might work. By flipping through these, you might just stumble across a colour that works really well that you can then pick up and run with. So for example, I know this deep pink kind of reminds me of the BBC iPlayer to be fun when you want and you can just run with it and then design the rest of the webpage around that colour.
I hope you’ve learned something. This is the simplest thing I could think of when it comes to manipulating a website.
Check back each day for a new topic, from a new creative – you might learn something useful!