The purpose of this exercise is to get some more basic details down on paper. In the last exercise you wrote down some clarifications about what your website is meant to do, and the benefits it will bring your visitors. Now we're going get a rough idea of how your site is going to look.

Don't worry if you're not sure exactly what you want at this point. This information will grow and evolve through the planning process and through your building your own website. But it's great to have some of the basic elements to start with.


Ok, so get out a few sheets of paper, one or more for each page. Replay the video if necessary and sketch out how you think your basic homepage might look. Where's the navigation bar going to go? What other pages will you need? Most websites usually have a Home Page, an About Us Page, a Contact Page, and then some sort of other relevant page or pages such as a Product Page or an outline of Service Page, or Pricing Page.

You can simply draw a series of horizontal lines to represent where text will go, and rectangles containing a circle and a triangle to represent roughly where images will be placed. Try and sketch out something for each page, don't got bogged down or stressed as it will be adapted repeatedly throughout the process


Want to create an electronic version from those sketches? Here's some software options for putting user interface mockups together!

Wireframe, Mockup and Flowchart Tools


Best for flowcharts and similar type diagrams - "Gliffy is an online diagramming service that helps users communicate with a combination of shapes, text, and lines."

Balsamiq Mockups

Using Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner.


Open source and Free, the Pencil Project is a great tool for making diagrams and GUI prototyping that everyone can use. It runs as either a Firefox plugin or in a standalone XUL runner.


The Online Wireframe Application


An online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.


ScreenSketcher is a tool for creating quick mock-ups, or wireframes, of a computer user interface, such as a window, a web page, or anything that can appear on a computer screen.


Online Real time collaboration
  • Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.
  • Cacoo can be used free of charge.


Mockery enables you to create great UI mockups, quickly and easily.
  • Design great interfaces for the web or desktop.
  • Review your designs with Windows and Mac themes.
  • Annotate your mockups with detailed information.
  • Share your mockups with others.


ForeUI is a handy UI prototyping tool. It can rapidly create static or interactive, skinnable UI prototypes of your website or software. You can use ForeUI to:
  • Create mockup for the GUI in your mind and make others understand quickly.
  • Make working prototype of website or software to collect feedback from potential users.
  • Perform usability testing before releasing the beta version.
  • Generate the schematics that can be inserted in the design documents.


What can I use MockApp for?
  • Brainstorm and refine a new app idea
  • Show what the app should do so that it’s easy for a developer to code it just right
  • Show-off your brilliant app ideas to your boss, potential business partners, investors, etc. (again, way more effective tan finger puppets!)


Creately is an easy to use and collaborative diagramming application that runs in your browser. With a powerful and intuitive interface, Creately is great for teams that need to work on designs together


Design, collaborate (in real-time) user interface mockups for your software and websites.

Leave a Reply

Your email address will not be published. Required fields are marked *