Storyboarding (Wireframes)

 

After analyzing the audience and grouping the website content information, it’s time for the creative part. Before creating a digital mockup in Photoshop or coding HTML, you’re advised to layout a rough layout of the main web pages. This process is called storyboarding, also known as creating a wireframe.

     

     

    Benefits of Storyboarding:

     

  • Helps you to make quick edits while developing the design concept.
  • You can use it in your meetings to show your client what the layout would be like, so you don’t end up doing a lot of work by creating Photoshop mockups or coding HTML pages without client’s approval.
  •  

    You can simply draw boxes to represent Page Layout and all major page elements, including Page Content, Navigation Bar, and Media (image, video, etc.) but it doesn’t need to be detailed. Here’s an example of a storyboard

     

storyboard

 

Drawing Storyboards

 

Storyboards can be done in Microsoft Word, Illustrator, and Photoshop or Mocking Bird http://gomockingbird.com/ (Free but only works with Firefox).

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>