Create a Clean Website Layout in Photoshop – Designing a website layout is more than arranging colorful images and filling some text in the text frames. It is an approach that speaks volumes about your client’s business. The website’s colors and graphics define the nature of the business, whereas the quality of design and easy navigation flow of the website should tie the user with the organization and turn him into a potential customer.
Designing a good looking and easily accessible website layout is mandatory for every wannabe web designer. This tutorial is intended to take you through the process of creating a website layout simple and clean website right from scratch. During the process, you will learn important points that will help you further gain more knowledge regarding web designing.
Write down your requirements before designing a website layout.
Before you start designing a website layout, you should know how your website will look and what are the topics you should include in the website are. It is crucial to make a list of website layout elements your client needs on his website. Along with that, the quality of a good designer is to prepare a mock of the entire website before he starts working on the final template.
Various designing companies adapt various levels of pre-designing strategies, which may contain wire framing, prototyping, mockup, beta versions and much more. In this tutorial, we will create a mock-up version before kick-starting the original template design. I am using the grey shades, which allow identifying the mockup block.
Canvas
Years before, while there were very few OS and limited devices to access websites, the dimensions of the page were fixed to one or two sizes. Today the scenario is entirely different. End Users access sites on Desktops of various sizes, mobile phones, iPads and Tablets. There is no chance you can fix your web page to a particular size in this diverse situation. But there are some Industry standard sizes applied for every device. You will slowly find your favourite size, or your Client may refer you to a website to mimic the sizes.
In this case, we are working on the following dimensions. Do not worry about the height, as it is going to change over time. The more content you are adding to your website, the more the height will be.
Remember, it is common to scroll down the page vertically, so you may not fix to a particular height for your web page unless you don’t want the user to scroll on your homepage as Google. But, it is necessary not to scroll horizontally. So, limit your width as per the Industry standards and don’t get creative with the horizontal scrolling.
For the web, the resolution is limited to 72. There are higher resolution images and pages found on iPads and few tablets recently. But it is on a rare occasion, and it is better to stick with 72 considering the internet speed across the globe.
Select the files using the Ctrl+A command and draw guides equally throughout the template. A website should be neatly organized with every element arranged coherently to each other. And website layout guidelines help you to obtain it easily.
4.9 (8,712 ratings)
View Course
Get your mockup ready.
Placing your mockup file on your original template helps you to save ample of time. Designing your website becomes so easy that you will end up completing the framework within few minutes. However, the mockup will only help you to design the frames. Completing the elements of design with details, type arrangement and alignment will take excess time than drawing the website layout.
Color Scheme and other choices
The next thing to after getting your framework ready is to choose a color scheme. But, it is better to get your colors ready before you start working on the design.
The whole thing boils down to the message that, get your guns ready before you start the design. Everything, including icons, images, and color choices, should be ready before you start working. Organizing and planning your work will save more time and focuses on design without obstruction in between.
Choosing colors can be a designer’s choice if the company is new and doesn’t have a corporate identity before. Clients give an idea of what shades they want the logo or background should be in some cases. In the matter of existing companies where you may need to redesign an entire website, you may have to choose the same colors as per the client’s needs.
There are numerous websites which can help you to choose millions of color schemes from the archives. Try out the following websites to enjoy a wide choice of color combination.
Here I chose few shades of blue to use for the website. The whole website will be planned within the following color scheme. Do not forget to choose three or four different color combinations, as we don’t know which color the client will prefer. Once the client finalizes a color scheme, save the shade values and make sure the colors play a vital role in every vertical of the organization, especially in the corporate identity.
Designing Process
There are many ways to carry on your designers. There are no hard and fast website layout rules to define or follow the process of designing; it is mostly a process the designer will choose to his convenience.
Some designers want to build the entire blocks and frames and start to work on details in the second stage, followed by the type and finally alignments and adjustments. Some like to finish one part of the page at one time and take it to the next part. We are following the second style.
We will finish the website in the following steps
- Header & Footer
- What we do
- Services
- Form
- News
- Footer
Header & Footer
The rule of thumb to define the dimensions of your header or banner is left to your creativity. According to the latest trends, websites appear with a huge image that covers your entire computer screen. The style is referred to as Hero image, which became quite popular recently.
In this case, we started with 120 pixels height header and a 550-pixel height for the banner. The width should match with the document size.
Designs with solid color have a flat look which doesn’t go well with larger frames or images. To avoid the flat look, I applied a gradient overlay layer on top of the banner. It gives the banner a depth that slowly transforms from one shade to another.
Next, we started to import the Logo and place it on the top left corner of the header and another bigger logo at the center of the banner. You can also observe the website layout vector shapes at the top right corner, which are used to share the social media links.
At this stage, I finished adding the type in the Header & Banner part. Company name, brand message, with links and services, are added in the text. You can also observe a transparent button on the Banner.
Plain text or too much of type without special features will spoil the look and feel of your web page; the page will soon bore the user, which may let him leave your site quickly. Check out the vector shape I added to the services links on the top right of the banner. The style is simple, yet it fills the void avoiding the mundane look.
Choose an image appropriate to the business. There are millions of stock images available on the web, and it won’t take too long to find an image that fits your requirement.
In my case, I found a high-quality image which I think will go well with my website. I don’t have a business theme for the website, so I am free to choose any image that looks good on the banner post.
Try to download some HD images from the free stock image sites given below
www.pixabay.com.
Blending is an art you should master to produce beautiful banners. Here I mixed three layers to achieve the effect shown in the above image. Here is what I did
- Place the image layer on top of the blue color banner
- Place the Gradient overlay above the image
- Change the opacity of the image 40 percent and change the blending mode to difference.
- Check out the layers palette in the image above to understand how the layers are stacked on each other.
This is how your Header & Banner will look as we just finished working on it. We are working on one part at once, and it is time to move on to the next level.
Alignment is crucial when it comes to type; have an idea of how your site should look, and text should be aligned before you start it. At this level, I used two different text frames, both aligned to the left.
The next step is designing the services part of the web page. I designed a metallic star in gray shades to showcase various services of the company. The intention behind using the star symbol is 5 Star services.
When it comes to aligning the text, Guides are your best friends. Coherency within type and objects can be obtained by making good use of the white space and equal gaps between the elements of design. I used many website layout Guidelines to see that all objects in the frame should maintain proper gaps and distances, which bring out a fair amount of white space.
The next step of our design is to create the Form field. In this case, I am working opposite to the method which we used in designing the banner. We will place the image layer below the solid colored layer and apply a gradient layer on top of the two layers to achieve a better look. Playing with the blending modes is always essential while placing larger images.
The choice of the images for this site has no specific theme related to it. I think this image will help the site look better.
Place the image below the colored background layer. To fix the image exactly to the size of the colored layer, use layer masking options.
Take a look at the layers palette in the above image. The solid blue colored layer is on the top of the image, the blending mode is converted to overlay and opacity is reduced to 65 percent.
I used the gradient map on top of the two layers. Blending mode is changed to hue, and opacity remains the same.
The form box is ready, which brings us to the end of the fourth level in our website design.
Our next level consists of two simple text frames. It resembles the level two of the web page, and I used aligned the two boxes similar to the top. Maintaining coherency in alignment is a good way of using the white space.
As we reached the final part of the page, it is time to look at the dimensions of the footer once again. The designer has to plan about the height of the footer based on the links he should use there. In this case, I gave a height of 170 Pixels to my footer. The width remains the same as the website.
Place the links and images as per your requirement.
With this, we concluded the designing part of our website. The color combinations we used are minimum; we make use of a lot of white space in our design and added simple text with minimum fonts. The intention is to design a clean web page, which we hope is fulfilled.
Please take a look at the design of the entire page below once again.
