Website Design – How to Create a Mockup Design and Convert it Into a Web Page

  • Do you often get stuck for design ideas for your website?
  • How do you quickly create a mockup design?
  • How do you convert the mockup to a web page?

Business owners often find it difficult to come up with a website design that blends well with their product and services. With so many choices available they often suffer “paralysis of analysis” and end up procrastinating making a decision. Whether you design your own website or give it to a professional web designer here are the steps for getting design ideas, creating a mockup design and converting it into an html web page.

1. View other websites online

Find websites related to your business online by entering your main keyword in the search engines. Here are 12 things to consider when building a a website:

  • clean design
  • easy to navigate
  • colors integrate well with each other
  • fast loading pages
  • images relate to the content
  • plenty of white space between design elements
  • home page content clearly conveys the purpose of the website and it’s benefits
  • only takes 3 clicks to navigate to any internal pages
  • web pages validate for correct html and css
  • includes a site map
  • includes an RSS feed and opt-in newsletter for visitors to subscribe to content
  • web pages are optimized for the search engines

2. Take screen shots of different designs

If you have graphics software such as Fireworks you can easily take a snap shot of the design by pressing the “print screen” key on your keyboard. Open up a new document in Fireworks ( or your favorite graphics editor) then paste it on to the document and save it.

Alternatively download the screen grab add on for Firefox. it enables you to capture the whole computer screen.

3. Overlay your own design

Create a mock up design for your new website by laying your design elements on top of the screen shot. For example you can quickly create the same layout by positioning the header, navigation, images and content as a new layer on top of the screen shot image.

4. Create a new mockup design

Select your new layout then paste it into a new blank document window. Now you can freely alter the layout by moving around the design elements e.g. change colors, add new images, text, etc until you (or your customer) is happy with the new design.

5. Convert the image into HTML and CSS

Create image slices from the mockup design image you created then export it into an HTML web page. Adobe Fireworks CS4 enables you to create CSS-based layouts. This means they’ll contain clean code and are fast loading.

Now there is no excuse for creating beautiful unique designs that stand out from your competitors and wow your customers.



Source by Herman Drost

Leave a Reply

Your email address will not be published. Required fields are marked *