One of the most challenging things for me in design is coming up with the right color combinations. But if you have a picture that perfectly expresses your client’s brand… chances are the colors in that picture play a big factor.
So, like in the last post, you can quickly create a website mockup based around that photo using Adobe Color. (By the way… I swear I’m not an affiliate of them… I just really love this app lol.)
Here are the steps I took to make a pretty cool mockup in about 12 minutes with a solid color scheme.
First, I generated the color scheme in the Color web app and chose the “muted” preset because it seemed to fit best.
Next, I wanted to place a headline / sub-headline on top of the image, so I took the light blue, made a darker shade from it, then put a transparent overlay on the image.
Then, I placed some text on top of the overlay, and used many of the other colors to form my color scheme for the site. I took some elements from the logo to brand it a bit more too. Otherwise, everything was pretty standard in terms of setting up my hero section:
As you can see, the makings of a real website are here. And one of the most difficult parts – the color scheme – was done for me.
Pretty cool, right? 🙂
Obviously this design has a long way to go! (I only spent 12 or so minutes on it.) But because I didn’t have to think so much about color, it freed me up to get all of the content placed which I can now massage and refine with more creativity.
Till next time,
David, from Reliable.
P.S. If you got a lot out of this post, I’d appreciate if you shared it with those bright social buttons below 😉 Thanks