Design

Using a “Done-for-You” Color Scheme from Adobe Color to Create a Web Design Mockup… In 12 Minutes.

by David Tendrich

image loading - reliable - how psd to html and wordpress should be

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


What is Reliable PSD?

What is Reliable PSD? After years of frustration, terrible service, horrible quality and trying almost every PSD to HTML service out there, we gave up relying on others and created our own. We are a high-quality coding partner for digital agencies that want to convert PSD into CSS and HTML. You will love our friendly, thorough service, our impeccable code, and also the fact that when you get your website back, it’s actually ready. No more long lists of changes that take months to resolve. We’d love nothing more than to help you too. Touch base now to start the conversation.

Join the Conversation

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You might also like:

hello@reliablepsd.com
close

Join over 2,000 designers, agencies & entrepeneurs
getting our weekly posts about design & conversions:

Thank you! We look forward
to seeing you around the blog :-)