0412 899 672

14 May 2011

Creating a Web Design Mock-up


Design Before Coding

Creating the layout of your website in a graphics program such as Adobe Photoshop or Fireworks allows you to conceptualize your design and reuse the design elements you create in your HTML and CSS.

Finding Inspiration

Think about how you want the site to look. Template sites such as Template Monster and Dream Template can be useful as a starting point, when determining your design preferences. Be sure to consider the results from the planning phase of your project. For more design ideas, see links at the end of this article.

Creating the Mockup

Once you have an idea of how you want your site to look, create a mock-up in a design program such as Adobe Photoshop or Fireworks. The mock-up should define the design at the same width as intended width of your final web page.

When designing fixed width designs, bear in mind standard screen resolutions. Currently, 1024px X 768px is considered the lowest common screen resolution and should be the resolution you design for.

A minimum of 20 pixels should be subtracted from the standard screen resolution you are designing for. This allows space for the standard objects occupying space on the screen, such as the browser window edges and the vertical scroll bar. Allowing for these objects prevents the site visitor needing to scroll horizontally to view the entire width of the design.

This means that when designing for a screen resolution of 1024 x 768, the maximum width of your mock-up and layout in Dreamweaver should be 1004 pixels.

You can also create designs with widths that are relative to the browser window, by specifying the measurement of outer design container using percentages not pixels.

Preparing the Images

After the initial mock-up has been created in a graphics program, slice up the individual sections and images (using the Slice tool) and optimise each slice to reduce its files size. This ensures a faster download time when the page is viewed across an internet connection.

[box type=”info”] Make sure you save a copy of the original psd or png image file. If changes to an image are required, it is best to work from an original file.[/box]

Export the sliced and optimised images to an images folder located within the root directory of the web site.
You are now ready to define a site in Dreameaver and start creating web pages.

Need some ideas…

Check out the following gallery sites:
CSS Zen Garden
| Cool Homepages | Best Web Gallery | The Best Designs
Web Designer Wall
| Dream Template | Template Monster

Leave a Reply

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