Composition And The Web Portfolio

Let Us Help You Succeed! - Call (800)770-0492, email, via chat or daily conference call.

Composition and the Web Portfolio

Speaking in visual terms, composition is the arrangement of elements to create an effective visual product. The proximity, weight, continuity, scale, and repetition of items in a Web page have an impact on how the page is perceived and acted upon. Composition takes these factors into account. By giving the user a well thought-out composition, the pages and interface structure become transparent and the user can intimately focus on your content. So like naviga- tion, composition is seen by the author and is natural to the user. When composition is flawed or inconsistent throughout Web pages, it causes the entire Web portfolio to suffer.

Composition brings all the elements together. Imagine you shot five photo- graphs: these are your elements or assets. You then took the photos and arranged them on top of a piece of cardboard. You overlap each photo a bit to create a layered look. Or, you could change the composition and butt the photos up against each other side by side so that they arrange a grid. You have changed the composition, and thus will change the communication and the reaction fed back by the receiver. Composition refers to the individual pages and how they are assembled, as well as the entire site and how it is assembled.

There are many techniques to assist you in composition. One of the main things that we want to focus on when we are creating a visual composition is placement of elements including text and graphics. Without training in two-dimensional design, this process is not an easy one to master. Because there are so many possibilities in two-dimensional design, no one can really master it. We only can hope to develop good visual habits and be open to criticism, revision, and redesign. One technique that is effective to help with two-dimensional composition is to use a grid.

Using a grid is a common practice to develop composition. Grids are utilized in all forms of art and design. In computer art and multimedia applica- tions, grids are easy to set up and use. Design Web pages, also known as screens on paper first. Use regular graph paper or draw your own grid. The grid will help you arrange the elements on the page with balance, unity, and emphasis. Then, when you begin to use digital production tools, you can reproduce the grid electronically in your applications. Dreamweaver, Fire- works, Flash, Freehand, and Photoshop all have grid setting and guides to help make composition a bit easier.


Every digital design medium has parameters or boundaries. The boundaries are located within the space. Units measure boundaries. The common units of measurement in computer graphics are pixels. Paper and print mediums are measured in inches or metric units. Paper is considered a two-dimensional space: width and height.

Letter size paper has a space of 8.5” by 11” inches. The screen is measured in pixels, short for picture elements. In general terms, a pixel represents one small bit of information which is combined with other small bits on a computer screen. These bits fool the eye to create an image. A Web page can typically occupy a space of 640 pixels wide by 480 pixels high. The screen is two-dimensional space. Space has some important characteristics, which are highlighted as follows.

Format Two-dimensional space traditionally has vertical and horizontal formats. Por- trait, which is tall, is the vertical format and landscape is the horizontal or wide format. Formats for two-dimensional space can also be varied in shape or size. The format for Web pages is can be horizontal or vertical. Keep in mind that vertical formats will require scrolling. For this reason many designers strive to create fewer vertical format scrolling pages. Horizontal design is better for pages containing a majority of large graphics.


Horizontal design provides a format that is wider than it is taller. Horizontal pages do not work well with long sections of text, such as with a resume. Are horizontally designed Web page may be 800 pixels wide by 600 pixels high. Vertical, scrolling pages are better for text intensive pages. A vertically designed page may be 800 pixels wide by 1024 pixels high. Vertical format is taller and than it is wider.


If a document will exceed the browser window, as in the case of an 8.5 x 11 page, you should use of vertical scrolling page. Web portfolio pages can be any site you wish. You should however keep in mind that the content must fit the format.

Think about format and page content. Come to conclusions about common page formats that will be used for specific content. One example would be to plan to have a vertical scrolling page for your Web resume. You want to make sure that the format of pages is consistent with the content. Page formats can be mixed but, you must do it cautiously so that you do not damage the style or the functionality of the site.

Space and Dimensions

The concept of space and dimensions are something that is common to artists and designers, but may not be common to students, academics, and profession- als in other disciplines. Understanding dimensions and space will help with visual design of Web portfolio pages. Spatial dimensions can be quantified in several different measures.

Space can be two-dimensional as with paper and the screen. Two-dimensional space is measured by height and width. Space can be three-dimensional design as we see in a building, sculpture, or 3D graphic model. The dimensions for three-dimensional objects are height, width, and depth. Volume also is involved when the space is not virtual. Space can also be four-dimensional and include the dimension of time. Web sites, interactive CD ROMs, and performance medium such as stage, television, and film are four-dimensional due to the fact that they span time.

Computer applications that allow design within the fourth dimension of time all have one thing in common: they have timelines that allow dynamic time-based design. So to add these definitions to the Web page, we must note that a Web page when it is being created is a two-dimensional space. The space provided in a Web page can be measured by height and width using the unit of pixels.


When the Web page design leaves the two-dimensional design application such as Adobe Photoshop or Macromedia fireworks, it is brought into a four- dimensional application such as Macromedia Dreamweaver or Macromedia flash. In these four-dimensional applications, objects including text and graph- ics can be added and manipulated on timelines which bring the elements into the fourth dimension. In the fourth dimension, objects can be animated with motion over time.

Actual Space

Actual space refers to the real space we have to develop our design within. It is the working space or the live area. The actual space is a product of our project specifications. It always has defined dimensional requirements. Most computer design tools allow a working space in addition to the actual space. For example, digital illustration programs utilize a page and a pasteboard area to lay unused graphics and type. If they are not on the page/actual space, they will not be printed.

Only the actual space is output. The same concept of working space and actual space is seen in four-dimensional computer applica- tions such as Macromedia flash. In flash, objects are created in a symbol editor that is external to the working flash movie. When we begin to create storyboards where going to define areas that constitute actual space and live area for our content.


The actual space encompasses the entire Web page, the live area is a place where content will be inserted and changed. We must make sure that graphics and text that are created to fit in actual space meet the size requirements of that space. We do not want to scale content when it is in actual space. We only want to work on content, scale it and manipulate it when it is in working space, before final output. In our Web portfolio pages, the actual space is the space that we define when we create our content.

The Web page has boundaries outside of actual space which sit inside of actual space. This sounds confusing but, what I mean here is that a Web page can scroll on and on with content. However, at some there needs to be an end. A new page should continue content.


Forever scrolling pages can be ineffective in displaying a quantity of information that has multiple categories and needs multiple spaces to present the content exclusively. So keep mind that actual space in a Web page is based on the size and quantity of content. Once content is placed in a Web page and is live within a browser, you as the author need to control the user’s navigation throughout the space.

Add a quote engine to your website for Free! We'll even create the website for you for Free!
There are No Catches! It's free and always will be.

"Best system in industry for insurance agents - anything less in not acceptable."

Step number #1 - NAAIP's technology helps producers project themselves as top level professional with minimal time and effort.

Step number #2 - Being among the largest brokerages in the insurance industry, allows agents access to top commissions and resources on every case.

Commitment to growing this relationship is nurtured by providing best in class service. Our attorneys, underwriters, case managers and sales experts will help you grow your business - one client at a time. Welcome to our team, a system that is uniquely suited for insurance professionals in this new millennium."

Aaron Levy - CEO,

David Gordon - Digital Marketing Evangelist,