Professional Website Design Services

 

Negative Space

Negative Space

If we talk about actual space, we must balance it out by covering the concept of negative space. Negative space refers to the empty space within the actual space. It is void of objects and elements. Its usage is vital to proper visual design. It is always the starting point for our design. It may be a blank piece of paper or a new file in an application ready for content to be placed. When you begin to create a Web screen in Macromedia Fireworks, you begin with negative space. Negative space also goes by the name white space.

The term white space was coined in traditional 2D design. It is a frequent term in graphic design. In Web design, white space is just as important to composition as content is in many instances. Visually, negative space provides visual relief as well as gives intelligent organization to elements on a page by highlighting and separating text and graphics with the use of white space. Just think, between characters, between lines, between everything, is white space. Effectively using white space means that you do not crowd content for no good design reason. Occasionally, a design may call for no white space or rely on negative space for the design, but in Web design, particularly in situations such as the Web portfolio, we want to utilize white space in our interface and typography. Doing so will create invisible order and will enhance readability of the Web page.

Proximity and Containment

Proximity and containment become important considerations when you are designing within a two-dimensional area such as a Web page. Keeping navigation items located consistently and strategically is of high importance. Menus should be contained to upper regions of the page when they are of high importance. Sub menus can be lower on the page to reflect the hierarchy of the two navigation items. Personal logos and page headers should be contained in the upper regions of the page to command immediate recognition and to establish page to page identity and style. To expand on proximity and containment, we need to think about how our user will move around our Web pages. It is important that we put the most important navigation elements within quick reach and without clutter. That’s where proximity and containment common. The ability to put white space around a logo or the ability to separate navigation elements properly so that each is independent and can be clicked on by the user without error exemplify using proximity and containment to enhance the Web  page.

Containment of content within Web pages is critical to showing off your best work. Pop-up windows are good examples of content containers which set off work from the rest of the Web site. Containment also offers organization to a Web experience. An example of this would be PDF files that may contain external documents for viewing or downloading. Isolating documents within a Web site gives priority to them and allows the user and effective method for gaining access. Larger documents that do not convert well to dynamic Web pages are perfect for containment within the PDF browser environment. Containment also occurs within flash movies. The movies act like containers for multimedia content which gets placed inside the framework of a Web page. The flash movies are developed and saved as self-contained, self running multime- dia snippets that can be swapped out for new content quickly and easily without affecting the overall stability of the Web page. Containment also helps in hierarchal structure and the management of overall content presentation.

Weight

Weight refers to the visual value placed upon the items on your Web page. A heavy weight graphic could be over sized, distinctively colored, or oddly positioned to imply that it has dominance in the visual space. We want to establish strong weight to our portfolio pieces and work items and a light weight to our navigation items. Logo and headers should have light to medium weight so they have impact, but do not overwhelm the page or distract from the impact of the work. The overweight nature of many interface designs seen in my research leads me to believe that focus is not as centered on content as it needs to be. Another way to exhibit weight is to use bold text within large text blocks or for links. Bold text is also effective when used in rollovers to show visual feedback when the mouse goes over the navigation. Weight can be seen in borders and rules used in Web page designs. These items can be effective in distributing weight and breaking up white space within a design. Make sure the weight of borders and rules is consistent and not overwhelming to the eye. Rules and borders should be kept under two points to avoid a heavy look. As you begin to perform visual design on paper and using computer graphics applications, think about weight and how will have an affect on your Web portfolio pages.

Scale

Scale refers to physical size. Large scale images on a page can result in dominance of that page. Small-scale graphics can represent lack of importance or in the case of text; they can be iconic or representative of a single navigational or representational item. Small scale also implies order, as with a set of thumbnails. Scale affects composition because it takes the eye to something or confuses the eye in determining what to look at first. We want to make sure that we use scale effectively in a Web portfolio pages. During this requires us to have visual contrast between scaled items or it may require repetition of items at the same scale to portray a series or a visual list.

In the portfolio we want to make sure that our content items that are specific work pieces get represented properly by being created at the proper scale. We don’t want our project samples to be too small or too large. Both cases cause problems due to scale. Images that are too large, may be difficult to decipher, or maybe disproportional to the space. Images that are too small may be difficult to see simply because of physical size and lack of resolution. The best rule I can give you for scale relates to a technical point not a visual point. The rule is to create graphics to the scale you need for the final Web page. Visually, experiment with scale to get appropriate visual contrast and to give elements on a Web page prominence or order.

Repetition

Repetition refers to repeating elements. Sounds elementary, but sometimes inexperienced designers one non-designers use it the wrong way. Repetition is used for several different purposes within a design. Repetition can be good or it can be bad. Mostly, I think repetition should be used to remember things easier and allow the user not to think so hard when encountering common elements. Repetition should act as an intuitive guide for the user. We want to repeat certain things such as typefaces, positioning of elements, and procedures that the user communicates with while interacting with the site. Good repetition should help establish identity, such as when a personal logo is used on a Web portfolio. However, when the logo is blinking on the page, or is placed on the page several times, the repetition becomes bothersome and distracting to the user. Good repetition is when you place all the page headers in the same exact location on every page. Good repetition is when you use consistent navigation systems in your site. Bad repetition happens when things are repeated for no good reason than simply to repeat them.

As with the case of blinking items and putting four instances of a logo on one Web page. Another event that exemplifies bad repetition is when navigation is repeated in the exact same way on the same page. Navigation can be repeated on a Web page. It is a good idea to have main navigation which is graphical or text-based at the top of the Web page and if the pages are scrollable, main navigation should be located at the bottom of the pages in a simple, small scale text-based navigation bar. Components to the Web portfolio page such as a contact button should be repeated in the same place on every page, but not multiple times on the same page for no good reason. When you begin to design your Web page screens think about the role of repetition in your designs. Once you decide that an element should be repeated, make sure that it is repeated consistently throughout all of its occupied pages.

Before duplicating items on a page asked the questions: Why am I doing this? Will this be effective or bothersome to the user? Is this repetition needed to benefit the user? Will this repetition help guide the user when they are navigating through the site? Will this repetition help promote my personal identity and add value to my public appearance? These questions are given to you so that you consider them when you begin visual design. I offer them to you so that you can begin to eliminate common visual mistakes that I made one non designers and new designers begin to create visual work.