Looking for a graphic designer? Click here to hire us!

How to Create a Simple Web Site Design

How to Cretae a Simple Web Site steps -  featured

Hello everybody there!!  Today we are going to show you how to make a Simple web site design using Adobe Photoshop. For this tutorials we designed it for a fitness website.

Web site designing is a popular Job in the Graphics and UI design Industry as you can create a web site from a small shop to a Huge Supermarket. Basically if you have got the info and the creativity you can come up with a web site concept for any kind of industry, a person or any kind of services or item.

The design process can be showing in simple steps like, first you have to gather the info about the type of web site that you’re going to create and get the client’s likeness about the web site look and feel. Next, you have make some research on the web about the industry or type of web of similar web site that have been done by designers. Next you will make the prototype design basically the home page design like scratch and get the client’s feedback and based on the client’s feedback and your creativity you will have to complete the design.

Before we begin, we are just reminding you that, if you haven't, you can always subscribe to our tutorials here to get the latest tutorials with project files from DesignOptimal.com to your email inbox in no time and you will never miss an awesome design tutorial again :) .
Download the Project File

Resources (all credits goes to original authors)

Step 01

  • Open Adobe Photoshop and open the grid only.psd that has been supplied.
  • As the first step we will have to make a fake logo to the Web Site.
  • I used the Exo Black Italic and Exo Black fonts to the logo and typed as “The Gym”.
  • Now when we make a web site, we will have to place the logo and the main navigation on the top of the web site.
  • Next, when making the main banner, always we will have to make the banner to be shown in the first scroll area.
  • The main header area the width should be the width of the web site and in this case it is 1280px and the height should be 640px.
  • We will add the far_side_of_the_sun_by_vishstudio-d4usujt image as the header.
  • The steps that we have completed so far will be like shown below.
  • Always remember to keep the content in the grid area as the grid has been implemented to keep the designers and the developers both in the correct path. Sometimes when the designer makes a design there are mostly times that the developer can’t implement the design as it is, so when we use the grid correctly, it’s always easy to make the same design to the HTML when developing.
1.1

1.1

1.2

1.2

1.3

1.3

Step 02

  • Next we will move into the main navigation.
  • The navigation will consists with the main links such as, HOME|ABOUT|SCHEDULE|PACKGES|CONTACT high light the home link in light blue.
  • Remember when we type the links the we need some space between the main links, so when adding the links if we press tab once it will add a space of 5px between a text if we press Shift+Tab it will add 10px between the text.
  • If you feel like adding a space of your own between the texts, make sure to copy the space between the first 2 links and add it to the other links as well.
  • So here we will add 10px space between every link because there is no lot of links on the top.
  • Make sure every time whenever you are working on a new content of the web site, group it and name it. Because it is easy to make changes and it’s easy to developer to find the design elements whenever he needs them.
  • Make the main links right aligned, that means to keep far end corner of the right side of the grid.
2.1

2.1

2.2

2.2

2.3

2.3

Share Your Thoughts Here...
Loading Disqus Comments ...
Share with your friends










Submit