Summary

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.

Walkthrough

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

Resources

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

Gliffy

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." http://www.gliffy.com

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. http://www.balsamiq.com/products/mockups

Pencil

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. http://www.evolus.vn/Pencil/Home.html

HotGloo

The Online Wireframe Application http://www.hotgloo.com/

MockingBird

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

ScreenSketcher

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. http://www.codingrobots.com/screensketcher/

Cacoo

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.
http://cacoo.com/

Mockery

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.
http://getmockery.com/

ForeUI

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.
http://www.foreui.com/

MockApp

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!)
http://mockapp.com/

Creately

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 http://creately.com/

MockFlow

Design, collaborate (in real-time) user interface mockups for your software and websites. http://www.mockflow.com/

Leave a Reply

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