I pride myself on being a graphic designer, but one of the first things I ever did before I even got really into Photoshop was design websites. Over the years, I have created all kinds of websites in all different shapes and sizes, but one of the kinds that I frequently like to design are Minimalist Websites.
There are a lot of minimalist websites out there right now, but some are just too overcrowded to truly be considered “minimalist” and others are way too empty, sometimes going as far as to not even give any CSS styling, let alone any images! To those designers, I only have one question: What the hell were you thinking when you released this?
I’ve gotten a lot of praise on various minimalist websites that I have designed, so I’d consider myself a bit of an expert on this subject. So let me now walk you through the steps to successfully create a beautiful Minimalist Website.
One of the first things you should ask yourself before you get any further when designing a website of any kind, is: How should I lay this thing out? Well, this is sometimes a difficult question to answer, and in order to answer it, you have to ask yourself some follow up questions:
- Is this a WordPress theme or a static website?
- Is this a portfolio layout or a blog layout?
- How many (if any) sidebars will I have?
This list can go on and on, but basically, you just want to understand what type of website you’re building. I will be going over how to create a standard WordPress theme with a right-hand sidebar, a header, and a footer.
2. Basic Shapes
Now it is time to open up Photoshop and start creating your design. What I like to do at this stage is take either my marquee tool or a custom shape tool (usually a rounded rectangle) and start placing some shapes out on a new layer, and moving them around according to what we decided in Step 1.
Don’t worry about details at this point… all you want to accomplish right now is to get the basic layout established, and have your shapes be in the right spots on the page.
3. Color Scheme
This is the first of many different stages of details. After your shapes are all set up, you want to start adding some layer styles that will make this theme look polished and elegant, without overdoing it.
Subtlety is the key to doing this successfully. First things first… pick two colors: one for the background and another for your shapes. I would recommend two colors that are close together, like a light blue or grey for the background, and a white (or an extremely close to white gray or blue) for the shapes.
If you are confused, or can’t for the life of you figure out some good colors to use, you can check out Colour Lovers. They have a huge selection of swatches, and you’ll definitely be able to find something that looks great for whatever project you are working on.
Once you’ve ironed out your color scheme, you might want to try some borders. Setting up two borders of about 1px in width each… one that is a color slightly brighter, and another that is slightly darker than your foreground is a great way to add detail and make the “pixels pop”. It adds crispness and a shows that your design is sophisticated and elegant through its attention to detail.
5. Drop Shadows
This is a step that you should be careful not to overdo, just like any other step for that matter. You shouldn’t try to make your shadow too big (either in distance or size) and you shouldn’t make it too dark. Try to keep it close to the shape and lower the opacity.
I typically like to use the color black for shadows with a normal blending mode at around 25%-50%. But if you want you could even try setting the blending mode to overlay or soft light if you think it works nicely.
6. Soft Gradients
Soft is the key word here. If you try to make your gradient too contrasted, then your setting yourself up for an eyesore. Try experimenting with standard black to white gradients at low opacities under 10%. This should be just enough to give it a little bit of depth without it grabbing your attention (in a bad way).
This should get you to the stage where you’re ready to start adding your content.
A few tips to remember when completing these steps.
- Consistency is probably the most important thing to remember.
- Use Photoshop’s global light option if you have difficulty remembering what angles of light you were using in other areas. If you mess up the lighting… that is, if your lighting is not consistent throughout the entire design, then the rest of your design, no matter how good everything else is, is now ruined.
- Once your are happy with your layer styles that you have applied to one shape, save yourself both time and a possible mistake and copy that layer style and paste it on every other shape. This will ensure that everything is the same.
Stay tuned for Part II, where I will discuss fonts, images, logos, etc.