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
ResourcesWant to create an electronic version from those sketches? Here's some software options for putting user interface mockups together!
Wireframe, Mockup and Flowchart Tools
GliffyBest 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 MockupsUsing 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
PencilOpen 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
HotGlooThe Online Wireframe Application http://www.hotgloo.com/
MockingBirdAn online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application. http://gomockingbird.com/
ScreenSketcherScreenSketcher 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/
CacooOnline 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.
MockeryMockery 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.
ForeUIForeUI 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.
MockAppWhat 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!)