MAKE WEBSITE MOCKUP

How To Make A Website Mockup

You may want to read “How To Properly Plan A New Website ” before beginning to design your website mockup. The planning stage is the single most important stage for creating a website mockup.

Assuming you have all the necessary information, you are ready to begin the process of actually creating the website mockup. There are a couple of programs available that work well for creating website mockups, but the two most popular are Fireworks, which was previously made by Macromedia and is now an Adobe Product and Photoshop CS2 or CS3, which is also an Adobe product. The program you choose to use for your mockup depends on your own preferences. To help with the decision, the following are lists of some pros and cons of using either program to create a website mockup.

Adobe Photoshop CC

Pros:

• Photoshop has a LOT of add-ons that will help you create a website mockup with very detailed effects and textures with just a click of a button.
• If you do a search online, you can fine an infinite number of posts or tutorials on how to use Photoshop to create your mockup.
• Every bookstore usually has 1 or more magazines dedicated to teaching and showing various techniques to create a website mockup with Photoshop.
• Photoshop’s ability to manipulate and blend images can not be beat. Photoshop makes it so that you can literally do ANYTHING with the graphics for your mockup.
• Photoshop integrates seamlessly with other adobe products like Illustrator and In Design. The ability to create a “smart object” really helps with logos.
• Photoshop comes packaged with ImageReady which is an easy to use program for slicing up images and compressing them for the internet.
• Learning Photoshop can increase your marketability in the website design and/or graphic arts industry.

Cons:

• Photoshop’s interface is more difficult and takes more time to learn than Fireworks.
• Photoshop requires another program (ImageReady) when preparing images for the web.
• Photoshop is a lot more expensive than Fireworks
• Photoshop (.psd) files are not readable by Windows XP, when browsing with “Thumbnail View” instead you see a Photoshop Icon, which can be a nuisance.
• Photoshop is not really designed or meant for web graphics. It’s more than capable in aiding with website mockups, but it’s main purpose is for graphic arts applications.

Adobe Fireworks

Pros:

• Fireworks is VERY easy to learn and use.
• Fireworks was designed specifically for creating graphics for the internet.
• Fireworks integrates seamlessly with Dreamweaver for easy image and graphic updates.
• Fireworks has add-ons that are capable of duplicating Photoshop affects (look up Alienskin).
• Fireworks is a smaller program and puts less strain on your computer when working with website mockups than Photoshop.

Cons:

• Fireworks does not have the pure graphical power or ability that Photoshop does.
• Fireworks is not looked upon as being the “cool option” for creating website mockups.
• Fireworks does not have the support Photoshop does.

Personally when creating a website mockup I prefer to use both Photoshop and Fireworks, so that I can stay familiar with both. For those new to creating website mockups I would definitely recommend Fireworks over Photoshop simply because it will give you more time to create the website mockup as opposed to learning a complicated program. If you already know Fireworks and want to make yourself more marketable and be more familiar with the program that is considered the industry standard I recommend doing a mockup with Photoshop. The optimum choice in designing a website mockup is to use Fireworks to create the layout and Photoshop to create any intricate graphical elements. Fireworks can then be used to slice up the image and make it internet ready. Hopefully this will allow you to better compare Fireworks and Photoshop so that you can decide which is right for you in creating website mockups.

Assuming you have Adobe Fireworks, Adobe Photoshop or another applicable graphics program you are now ready to begin the actual creation of your website mockup. The following is my personal method of creating a website mockup and is not necessarily the right way nor is it the best way to create a mockup. This method is however the way that I have found to work best for me.

The first question to ask yourself is what size is your blank canvas? In creating your website mockup, the size of your canvas matters. You should consider your target audience; if your target audience is elderly then chances are they are going to be viewing this website with a low resolution on older crt monitors. If your target audience is viewing your website with low resolution monitors it is a good it idea to make sure your canvas is no wider than 760 pixels. The length of your canvas will grow as you develop and build the mockup. The reason for the 760 pixel limit for the width of your canvas is because elderly people tend to use 800 X 600 resolution. If you consider the extra space for a scroll bar then 760 pixels will be wide enough to fill most of the screen and not require a side scroll at the bottom of the browser. Having a side scroll at the bottom of the browser is bad design practice and is annoying. If you don’t have an older target audience and the target is more technology friendly then you can go a bit bigger. Chances are your website will be viewed on flat screen monitors at a resolution set to at least 1024 X 768. Because of this higher resolution your canvas should be approximately 975 pixels wide, again this uses most of the screen and takes the scroll bar at the side of the browser into consideration. Now that you have your canvas set, make sure you are using a resolution of 72 dpi, which is pretty much the industry standard for web graphics.

If you are starring at a blank canvas without any ideas in creating your mockup, try looking at template websites or other websites with similar content. A good source of inspiration that can be used is: templatemonster.com.

Now you should have a list of key highlights, the client’s favorite colors, a list of pages for navigation, and hopefully an idea of what the client is looking for. Instead of trying to make the perfect website mockup, begin simple by using color filled shapes to layout sections. Use a different color for every section and use the text tool to write down what each section is.

As an example of creating a template for your website mockup, I will use the mockup for Job Pro’s new search engine optimized website that WebDuck Designs is creating. After various meetings with the client, we know the following things that will aid in creating the mockup:

• The client likes a simple layout.
• It is important to highlight the client services, job opportunities and employee services.
• They would like to have a listing of available jobs on every page.
• Navigation needs to be simple.
• They want to incorporate a flash animation element on the homepage.
• SEO is important, so we then found out what keywords were important to them
• We have the artwork for their logo so we can design the layout around the logo’s look and feel.

In starting this website mockup, WebDuck Designs made the different sections to convert all of the information given by the client. The raw layout for the new Job Pro website can be seen by clicking here . This is not a full fledged website mockup, however it does give a very good starting point and a nice foundation to work off of. All of the client’s points of interest were addressed while at the same time making extra sure that the site will be very search engine friendly. Once you get the raw mockup image created it’s time to turn that into a true DETAILED website mockup.

Now that you have your initial sections of your website mockup created and your navigation is set, the next step is the graphics. First, you should bring in the logo of the client, if they have an existing logo. Place the logo where you want it so that you can design around that logo. By placing the logo first it’s easier to set the colors and get the overall feel of what the website will look like. For instance in the case of JobPro, you will notice that the JobPro logo is a large square with 4 smaller squares, so the graphics on the site incorporate the square theme as well as the logo’s colors.

In creating your website mockup, you should next set your text size and navigation font sizes. Most likely the sizes will not be perfect, but you can get a rough estimate for the client to look at. Make sure to use a WEB SAFE FONT because if you don’t you run the risk of not being able to use the font you showed the client on the mockup image and then have to try and explain that to the client.

Think about the actual graphical images that will be used in the website, if it will at all incorporate any images. In the case of JOBPRO the website needed to be Search Engine friendly with emphasis on information as opposed to pretty pictures, so only the picture located at the top of the page was used. This picture was chosen because it looks professional, shows diversity, and since it has a white background it blends in very well with the theme of the website. Parts of the client’s logo were also used to act as Icon links for the key elements of the site, which are located in the middle column. The use of the logo in this way really helps with branding the company and carries the theme all the way to the bottom of the page.

Now that the graphics are set, it’s time to pay some attention to the details of your mockup. In the case of JOBPRO’s website mockup, the initial transition between the navigation and the far right column, which was to contain dynamic content, did not work well. The far right column in the mockup needed to really be set apart from the rest of the site, yet at the same time it had to transition well from the left content. The solution was to make the right column orange with blue links and make it seamless with the navigation. In the mockup the right side was initially too blocky so a blue line was added above the navigation, below the navigation and had that line continue up and down the left side of the right column. The blue line created the desired transition. The next step in the mockup was to make the title to stand out better so a small gradient change with a wave behind the title was added. Even though this change is subtle, it helped offset the title of the column.

In JOBPRO’s website mockup the right column really added a lot of Orange, so the footer separation bar needed to be made blue to offset that orange. The mockup really started to come together, however the content text in the far left column blended into the middle column too much. Vertical separation lines were tried, but didn’t look good. The background color of the two different columns was changed next, but still wasn’t appeasing. Finally, it was set so the middle column was white and a light grey to white gradient was used for the left column. This gradient made the middle column distinct from the left column while at the same time allowing the left column to blend in nicely with the background to keep that open airy look.

The final details could be the most important part of a website mockup. The less left up to the client’s imagination the better. Certain things on the mockup should be set before being shown to the client. For instance, if the site is going to be centered then make sure you center the site. If the site is going to have a stretching graphic for a background, make sure the mockup has that background. Also, make sure you put a page title up. Having a page title on your website mockup may seem little, but it’s more professional and easier to sell a design if the client sees the actual title on the status bar or the tab of the browser.

A couple of changes may need to be made once the client sees the website mockup, but if you acquire enough information in the beginning, approach the mockup systematically and pay attention to the details, then you should be able to produce a website mockup that makes your client happy and makes you proud to add it to your website mockup portfolio.

( Click Here to view the actual website made from this mockup )

Still looking for more help in creating a website mockup? WebDuck Designs online learning center, WebDuck University, has video courses and tutorials to walk you through each step of making a website mockup.

^ Top