How to Create a Mockup Website Design and Convert it Into a Web Page
By Herman Drost
• 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
More General Web Design:
• How to Help Your Customers Speak
• How to Boost Your Chances at Having a Successful Web Site
• "About Us" Pages in Small Business Websites
• Unbiased Step-by-step Guide on Web-Hosting
• Go Ahead And Use That Copyrighted Material, It's Fair Use!
• Home Page Essentials - Miss These and You're Missing the Mark
• Types of Mobile Website Design
• What is "Above the Fold?"
• Integrating Advertising into Your Web Design
• Choosing the Right Colors for Your Web Site
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
