- Do you often get stuck looking for design ideas for your website?
- How do you quickly create a mockup design?
- How does the mockup become a web page?
Business owners often find it difficult to create a website design that goes well with their products and services. With so many options available, they often suffer from “analysis paralysis” and end up procrastinating on making a decision. Whether you design your own website or give it to a professional web designer, here are the steps to get design ideas, create a mockup design, and turn it into an html web page.
1. View other websites online
Find websites related to your online business by entering your main keyword into search engines. Here are 12 things to consider when building a website:
- clean design
- easy to navigate
- the colors blend well with each other
- fast loading pages
- images relate to content
- lots of white space between design elements
- the content of the home page clearly conveys the purpose of the website and its benefits
- it only takes 3 clicks to navigate to any internal page
- web pages validate for correct html and css
- includes a site map
- includes an RSS feed and optional newsletter for visitors to subscribe to content
- Web pages are optimized for search engines.
2. Take screenshots of different layouts
If you have graphics software like Fireworks, you can easily take a snapshot of the layout by pressing the “print screen” key on your keyboard. Open a new document in Fireworks (or your favorite graphics editor), then paste it into the document and save it.
Alternatively, download the screenshot plugin for Firefox. allows you to capture the entire computer screen.
3. Overlay your own design
Create a mockup design for your new website by placing your design elements on top of the screenshot. For example, you can quickly create the same layout by placing the header, navigation, images, and content as a new layer on top of the screenshot image.
4. Create a new mockup design
Select your new layout, and then paste it into a new, blank document window. You can now freely modify the layout by moving around the layout elements, for example changing colors, adding new images, text, etc. until you (or your client) are satisfied with the new design.
5. Convert the image to HTML and CSS
Create image segments from the mockup layout image you created, and then export it to an HTML web page. Adobe Fireworks CS4 allows you to create layouts based on CSS. This means that they will contain clean code and will load quickly.
Now there is no excuse to create beautiful one-of-a-kind designs that will stand out from your competitors and wow your customers.
