• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Custom Website Designs

Now that we have discussed some of the visual principles and elements that are important to the look and feel of the Web portfolio, let’s create a rough draft of how we want the information to look on the Web page.


More importantly, we should make notes on the drafts of what multimedia, navigation, and visual elements we want to include in the page design. Also, we should create a rough draft of all types of pop-up windows that exist in our site. The drafts that I am referring to are storyboards.


In simple terms, the storyboard blocks out a set of actions for each screen, what the user sees when arriving at the Web page, what navigation or other controls are available when the user gets there, and the sequence in which events will occur (Kristoff & Satran, 1995). Creating the storyboard does not require intense artistic talent.


Actually, very little detail is show in paper storyboards. Paper storyboards are all that is needed to block out the Web page sequences.


Button and other page locations only need to be approximate and you should only show Web pages that change. For each screen you should show:

• Approximate and tentative image locations

• Text position

• Motion graphic or animation locations

• In the margin, write in audio track or sounds to be played and in the storyboard show how audio is controlled

• Navigation, sub navigation locations

• Pop-up windows with sub-navigation, captions, and close buttons.


Now it’s time for you to create storyboards. Take a piece of paper, 8.5 x 11 is fine, and turn it sideways to a horizontal orientation. Use the whole piece of paper as if it was one Web page. This is your actual space. Start with your index page also known as your home page. Don’t worry about color right now, just think about where the elements such as navigation, text, and images need to go.


Just think in the simple terms for now. As you build the storyboards, you can begin to integrate in other elements such as animations and audio controls. But for now just concentrate on where the navigation is going to go, where you’re going to place the text inside of the page, and how the images are going to be positioned in relationship to the text inside the actual space.


This won’t be a process that is easy and you will succeed at on the first try. Different storyboards for one page are common. Once you work out one-page, you should have some visual elements which can be carried through consistently to the other pages which gives the site continuity. You can get inspiration by looking at other Web portfolio sites and even other Web sites.


You can take a screenshot of a Web page or simply print the page from the Internet and use tracing paper to outline the existing positions of the elements on the Web page. At first, it will be difficult to develop consistent Web pages. But you must put forth in your mind that consistency will help make the Web portfolio organized an effective. Start the storyboard from the top down.


Rough out the space for a banner or personal logo. Rough up the space for the navigation items and position them on the page approximately where you feel they should go. This decision is critical because it will be followed through on other pages. Without consistent navigation from the start, you and your user will be lost.


After establishing the identity and banner considerations, you should designate the live area for content placement. This live area will hold text, graphics, and multimedia items that reside on the page. Once you have established a home page, you want to follow the navigation design throughout the rest of the storyboards to establish continuity.


If you need additional navigation items, you can sketch in sub navigation which can be customized as content and needs dictate. You should be creating storyboards for each page that changes.


As you are beginning to create your storyboards you may want to rough out as many as you can to practice this conceptual process. Remember, the storyboard needs to tell the story, not be a high level illustration. The time you spend creating storyboards should be utilized in the process of thinking, analyzing, and designing the visual framework for an engaging Web communication experi- ence.


At this point, you should have thought about and possibly completed conceptualization, information design, and visual design of your Web portfolio. This web design lesson has given you some ideas as to what can go into a Web portfolio and given you some instruction on how to assemble the site visually, on paper in the form of storyboards.


You should have established a tentative layout for the Web pages and you should be able to assume where the content will reside inside the Web page designs. The content items must be formatted to fit into the Web page layout you designed in the story boards. With an idea about what you want the Web portfolio to look like and how it will work, all of the items for the Web portfolio must be gathered and manipulated into a Web-based format.


In some cases, artifacts and assets may need to be developed from scratch or converted from paper or application formats. We will explore these processes and tasks in the next web design lesson.


to Top