WEBSITE MOCKUP TIPS

Tips For Designing A Website Mockup

A website mock up is a static design, created to show your client the overall look and feel of their new website. Providing a website mock up is a great way to submit your design for approval to your customer/client. Adobe Photoshop is a quick and easy tool for creating your design, while also providing an efficient way of making revisions or rearranging your design with little effort. Fireworks is another program that can be used for creating your website mockup. Whichever one you choose, should be based on your personal experience and preferences.

Step 1: Your first step should be gathering as much information from your client as possible.

• What key elements need to be included?
• What is their favorite color?
• What pages need to be seen in the navigation?
• Do they have specific images they want used?
• Do they have a logo?
• If SEO is important, what keywords are important to their business?

Once you have gathered all the necessary information and specs from you client, and you know which elements are required in their new website, you are ready to begin creating the website mockup.

Step 2: The next step in designing a website mock-up is determining the size of your canvas. In determining your canvas size, you need to consider who your target audience will be. Is your target audience more likely to be viewing the website on a lower resolution monitor? If so, the recommended size for your canvas should be 760 pixels wide. If your audience is more tech savvy and will likely be viewing the website on a higher resolution monitor, the recommended size for your canvas is approximately 975 pixels wide. Once you have determined the appropriate canvas size for your project, you can now set your resolution to 72dpi, which is the industry standard for web graphics.

Step 3: If you’re creative juices aren’t already firing off ideas, try researching other websites for similar companies. Your client most likely wants their design to be unique so you don’t want to copy or make your design replicate theirs, but their sites may give you some basic ideas. Another great resource for gathering inspiration is from websites that offer templates. One good site is templatemonster.com.

Now you’re ready to start designing your mockup! Begin with determining a layout that will accommodate all the necessary information and key sections that the client has provided. Map out your layout using basic shapes and text. For example, mark off a space for the top banner, the side banner, the content and the footer, if these are all needed. Create each feature on a new layer so that you can easily rearrange the website while maintaining organization. Start with placing the logo. The logo will determine much of the theme for your design (colors, straight lines vs. rounded, etc).

Step 4: In designing your mock-up it is important to keep in mind the use of WEB SAFE FONTS. You don’t want to run the risk of using a font the customer will like and then not be able to use it. Now is the time you want to determine your font size. This will most likely be adjusted as you work thru your mockup, but you can at least get a general idea to start with.

Step 5: Place your images throughout the website mock-up. Where is it important to incorporate graphical images? Does your customer want to utilize flash? You can “tell a story” with the images you use so carefully selecting the right images is important.

Step 6: Now it is time to work with the little details of the design. Through trial and error, you can work with adding various filters and effects to your design, to really make all of the elements work together. The less you leave up to the client’s imagination, the better. Assume that your client doesn’t have an imagination, and make as much as you can apparent to them right from the start. If the background is going to stretch, make sure it is stretched when they review the mockup. If the site is going to be centered, make sure it is centered when they review it. The little details, can be some of the most important.

Step 7: Submit your website mockup to your client. A couple of changes should be expected, but if enough information was acquired before the design phase began, you should have produced a mockup that makes your client happy.