Perlu web design, wordpress development, atau online shopping? Konsultasi Gratis!

Anda perlu web design, modifikasi website, wordpress template / plugin? Membangun website profil perusahaan atau online shopping? Atau ingin mengoptimalkan website Anda untuk meningkatkan penjualan? Hubungi kami sekarang juga!

Web Design Process Step 2: Website Design with Photoshop

9 February 2015 oleh Bambang Sugiarto

Yesterday, i have been start writing an article about 5 Step in Web Design Process to Make Websites. Now, in the 2nd step, let start the process of making your website by web designing exactly what it will look like in a browser using Photoshop. The benefit to designing the home page first in Photoshop is that you get to see exactly what the end result your web will look like in the browser. Most beginners simply start writing the html and css and design it as they go, this is not ideal!

Designing the web layout in Photoshop first is particularly important if you’re designing for a client, because they will want revisions. The revisions are easy to make when you don’t have to also worry about altering code. You just open up the document in Photoshop, make the revisions by adjusting / adding / removing layers, and you’re ready to go.

In this Web Design Process Step 2, below is the list of guidelines you should follow when you will doing Website Design with Photoshop:

  • Set the document width at 960 pixels: 960 pixels is the maximum width you should use for your website. Most visitors have a resolution of at least 1024 width. You wouldn’t want to set your document width at 1024 though, because the vertical scrollbar on the browser takes up a certain amount of pixels and would create for horizontal scrollbars.
  • Import your website logo: I always start by designing the website by importing the logo and positioning it accordingly.
  • Determine the web layout orientation (Left, Right or Centered): Most websites these days are centered, and it’s the orientation that I almost exclusively use. Left aligned is a second favorite, and a right aligned website would be the least desired. A centered website ensures that the website layout is perfectly in line with the visitor’s vision. If you’re left aligning or right aligning a website and the visitor has a large resolution, there will be large empty spaces in the browser to the left or right, when the browser is maximized.
  • Design the Header: The header almost always consists of a few key elements.  The logo, the primary navigation, and other important features like login forms.
  • Design the Content Portion: After the header, you have the main content area to worry about. This is the area which is most important to the success of your website. If you really want to know how to make a website, this is the most important thing to remember on this page. People read from top to bottom, left to right. This means that the area underneath the logo (to the left), is the most important screen real estate you have. This is the spot where you want your visitors to understand exactly what your website is about and what it has to offer. Your goal is to intrigue the visitor to stay on your website, so this area in the layout is of particular importance.The content area can either by one wide column of information, 2 columns or 3 columns traditionally. Generally speaking, if your website one which requires user action, you’ll want to make the content area very simple with little to no columns and few text and other distractions.
  • Design the Footer: It’s a personal preference that I include the navigation in the footer. Sometimes particular pages on your website will have a lot of content. This increases the vertical size of the page with scrollbars. If they’re near the bottom of the page, they can simply access the navigation at the bottom in the footer, instead of having to scroll back up. Other than the secondary navigation, you can also include copyright information, terms of service / privacy policy links.

After you have the website designed, you then have an exact image of what you want it to look like when it’s in the browser. This is where you would send a JPG of the layout to a client if you’re not making it yourself. If you really want to see exactly what it looks like the browser, you can save the layout as a JPG, import the image into HTML and preview it in the browser!

Related Articles

Tulis Komentar