Kickstarting a Web Design Using an Image as a Base

In this short tutorial I’m going to show you one of my favorite shortcuts for kickstarting a web design. This is a method I’ve used a lot in freelance design, and it will really help you get over that initial hurdle where you need to work out what the color scheme and overall “feel” will be.

This technique is simple, but it’s not necessarily obvious until you’ve been through the process a couple of times. It all starts by selecting the perfect image. So with that said, let’s dive in!

Watch the Screencast

[embedded content]

Selecting an Image

As mentioned, it all starts with an image. Something which is connected to the website you’re designing. I’ll often use Unsplash because it’s awesom, but the volume of inspirational photos now available on Envato Elements is also excellent. 

Pick something relevant, but something which also contains colors which you can imagine will suit your project well. If you’re designing something for an established business, you may need to stay within branding requirements, in which case this whole process will work just as well using a logo as the starting point.

Here’s the image I’ll be starting with, by Kyler Trautner (it’s beautiful, and gives us a range of balanced colors):

You can see the blueish black from the tarmac, plus what will be an orange hue from the tundra if we bump up the saturation, plus what appears to be gray but is actually a shade of blue from the low-lying cloud.

Importing an Image into Adobe XD

I have the image downloaded and saved, so now I’m going to open up Adobe XD (which just happens to be my tool of choice in this instance, you can use something which is more familiar to you if you prefer). 

Go to File > Import and select the image to bring it onto your canvas. Resize it as you see fit.

Picking Colors

By placing UI objects on the canvas, we can then take the color picker and fill each one with shades from our image. 

For example:

• Place a body rectangle to serve as the background, then give it a “medium” shade from the tarmac.
• Create another rectangle for the main wrapper element, then give it a darker shade from the road.
• Add a shadow to that same wrapper element, and give it a suitably matching dark blue/gray shade.
• A pale sky color will suit a page element underneath the image.
• The same applies to text, some of which will need to be dark on light, and vice versa.

This is what I have so far:

Contrasting UI Elements

Let’s now use some contrasting orange hues for some buttons. Place some button rectangles on the page and pick a beige/orange hue from the scrub beside the road.

The initial effect is almost “dull”, so using the Fill selection tool drag the picker up and to the right to increase the saturation.

Try the same with a contrasting blue color too, for a secondary button.

Conclusion

From just one suitable image you can kick off a whole color scheme and the basis of a complete web design. 

The example you’ve been following is taken from an upcoming course entitled “Code-Friendly Design With Adobe XD” so keep an eye out for that!

If you’re interested in color theory you may also want to check out these other learning resources: