Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

How to Create a Mockup Website 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.


Herman Drost is the Certified Internet Webmaster (CIW) owner and author of DrostDesigns.com Get a professional website designed for your business by visiting: Maryland Website Design

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268