- 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?
Website design By BotEap.comBusiness 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 putting off 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 layout, and turn it into an html web page.
Website design By BotEap.com1. View other websites online
Website design By BotEap.comFind 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
- colors blend well with each other
- fast loading pages
- images relate to content
- lots of white space between design elements
- home page content clearly conveys the purpose of the website and its benefits
- only 3 clicks are needed to navigate to any internal page
- web pages validate for correct html and css
- includes a sitemap
- includes an RSS feed and optional newsletter for visitors to subscribe to content
- The web pages are optimized for search engines.
Website design By BotEap.com2. Take screenshots of different layouts
Website design By BotEap.comIf 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.
Website design By BotEap.comAlternatively, download the screenshot plugin for Firefox. allows you to capture the entire computer screen.
Website design By BotEap.com3. Overlay your own design
Website design By BotEap.comCreate 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.
Website design By BotEap.com4. Create a New Mockup Design
Website design By BotEap.comSelect your new layout, and then paste it into a new, blank document window. Now you can freely modify the design by moving around the elements of the design, for example, change colors, add new images, text, etc. until you (or your client) are satisfied with the new design.
Website design By BotEap.com5. Convert the image to HTML and CSS
Website design By BotEap.comCreate 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 CSS-based layouts. This means they will contain clean code and load quickly.
Website design By BotEap.comNow there is no excuse to create unique beautiful designs that will stand out from your competitors and wow your customers.
