• 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

The user experience for our Web portfolio project relies on persuasive communication and exquisite presentation of our skills and experience. If the Web portfolio has ambiguous, difficult usability issues, the experience and the attempt at persuasion will fail. Usability cannot be achieved simply with repetition. It must be a thoughtful hierarchy. True, we want navigation to be super consistent throughout the Web portfolio site. We do not want to sacrifice cost or time by creating redundant designs that do not serve our needs, simply to think that we have covered the bases when it comes to usability.


There are three important usability issues to focus on when you design your Web portfolio (Kristof & Satran, 1995):

• Keep the interface and navigation clutter free. Resist the temptation to put something on your page that has no content or navigation value. Do not be redundant and duplicate the same controls on the same page. This wastes time, effort, and screen real estate. Moreover, cluttered interfaces can be a cause for user confusion.


• Use shortcuts to get to your most impressive assets. Do not wait around and expect the user to hunt for your portfolio pieces or your highest regarded work, provide a quick route right to the work. Get creative on the lowest, simplest levels and focus to design access that will move the user towards what is most important. For example, during my last Web portfolio design, I placed publications as the first content that is seen when the main navigation page is loaded. I did this because I recently published an edited web design tutorial. I felt that my users, who include academic colleagues, potential clients, and students, would want to know about my recent publication.  I feel that the accomplishment of producing an edited web design tutorial was one that I needed to communicate to my audience immediately. As you assemble content, you will notice that some things are more important than others are. Make these items prominent in their access routes. You want to keep that in mind as your information design of evolves. As well, when you have new accomplishments you would like to have them immediately available on the most accessed Web page in your Web portfolio. This page is obviously the main page. However, you can structure the site to work so that after any initial animation or motion graphic, the site will go to any page or location that you decide.


• Give the user escape routes. Let the user control the multimedia elements in the site with standardized, intuitive controls. Avoid expecta- tions that the user will migrate to the navigation controls of the assumed Web b rowser — they won’t. Provide close buttons and on/off controls for audio, video, and pop up windows whenever you can. I realize that sometimes attention to this level of detail requires extra time and effort on the project. Many times, these details are left out. We should make an effort to try and cater the experience to the users’ tastes. Escape routes should always be on the menu. Pre-Evaluation of Usablity We will discuss usability in more detail after we create the Web site. We will test the usability of the site against a set of usability guidelines developed by Nielsen and Norman and adapted by me for use on the Web portfolio. By doing an evaluation of the completed Web portfolio, you can learn which components of your Web portfolio are failing the usability test. Testing the usability of the Web portfolio after it is up sounds backwards, right? Actually, we should be thinking about usability before and after the Web portfolio is designed. Why? Because the process has so many interactive components that are needed for successful user interaction and communication that usability must be addressed throughout. So here is a little piece of usability investigation that you can perform on the information that you have already brainstormed. You will repeat this exercise later on in the text after you have created your Web portfolio and uploaded it to the Internet. But for now, let’s examine the information design components that you should question about your Web portfolio site with regards to organization, structure, and your idea of effective usability. Ques- tions surrounding visual aesthetics are stripped out and saved for post Web portfolio evaluation. Think of the following questions in respect to access for the user. We have not gotten to the visual stage yet. Right now concentrate on user access and making it a simple as possible. Ask yourself what the user would say if asked these questions of the Web portfolio design and usability based on the content outline and flowchart.


• In this Web portfolio, is there a visible, clear navigation path to the body of work?

• Was the navigation presented in easy, understandable terms?

• Did you feel you had control of the interface and portfolio content?

• Was it easy to quit out of the Web portfolio pop up windows?

• Did you require help at any time while using the Web portfolio site? Thinking about these questions before you fully design the Web portfolio site will help you keep a grip on usability. Did you discover something that doesn’t seem right with your anticipated information design? If so, simply make a change before you create the flowchart. After creating the flowchart, ask the questions again to see if the skeleton is solid and provides access to content in the most direct routes available. Now let’s map out how the Web portfolio site will work by creating a visual diagram or flowchart.

Create Your Flowchart

The flowchart is the product of information design. It provides a top down structure for the entire Web site and allows the designer to estimate the approximate number of Web pages that are needed to accommodate the content. The flowchart also allows organization of navigation and external links. This scope paperwork becomes extremely important when designing a site with lots of pages and enhances usability through critical vision focusing on how the site will work. The structure of a Web site is planned on paper first to insure that functionality and user convenience is consistent and correct. The structure planning results in a flowchart. Every box in the flowchart represents a page. Every link in the flowchart is access to a page, URL, or content. Use the content outline to work from as you develop the flowchart. Each header or category is going to be a top level item in the flowchart. All content will be a sub level item, also known as the subcategory. Here is an easy way to plot out the flowchart: Use boxes for pages (main navigation/major categories), lines for links, and italic text for loose content. Use indentation to branching of topics within subcategories. Boxes for pages/main navigation represent containers for content. Organize the site structure further by expanding the flowchart with a branch off each box with Sample flowchart (The flowchart allows for a visual inventory of pages within the Web portfolio. Creating a flowchart allows you to show the hierarchal relationships within your site. This flowchart  is an abridged version of the flowchart used in my portfolio. Counting up the boxes will provide a tentative page quantity for the site.)


This will allow you to see a larger view of the entire Web portfolio on paper. It is important that you make the most expanded version of the flowchart that you can. The expanded flowchart will help as you design the Web portfolio and add and delete content. Count up the boxes and triangles to get a tentative Web page count for the portfolio site. This counts as important. It gives you a basis to understand how large or how small the Web portfolio project will be. Later on, as you develop Web sites for other purposes, this technique will help you again and again to gain reference to page count. Also, the flowchart is valuable as a visual reference while designing and updating the Web portfolio throughout its life span.

Review and Conclusion

Now that we have the basic scope documents of what the site will be about and how the site will be structured, we will establish how the site will look. In the next web design lesson we begin the visual design process. To this point you have worked in a logical, calculated way. This methodology is important because you want to realize a clean, calculated route for our users to learn about our professional capabilities. You have taken care to bring information to the simplest levels of presentation on paper, in outline form and using a flowchart. Now, you must continue to take care to bring information to the simplest levels using visual tools. What you do not want is for navigation to overwhelm content in any way. Computer graphics and multimedia software has revolutionized the way we create content. You must respect the tools, but more importantly respect the design of the Web portfolio so that it does not have a lack of balance when it comes to navigation and ornamental items versus pure content. You want the appearance mixture to favor pure content. You want navigation to act as a conduit, a threshold, and a pathway to content. Navigation can never be a distraction to content. Up to this point, you have made some important decisions about the Web portfolio. Although computers have not been discussed yet, you have laid the groundwork for taking information and putting it into a hierarchical structure that you can now begin to present visually. If you have been following along in the text, you should now know what the Web portfolio is going to contain, who your target user is, and what your goals are in creating this multimedia product. Now that we have discussed information design, let us explore visual design.


to Top