Refining Our Structure And Adding The Bones The Skeleton Pla

Refining Our Structure And Adding The Bonestheskeleton Planeis Concern

Refining our Structure and Adding the Bones The Skeleton Plane is concerned with an individual web page, how it is presented, and how it relates to other pages in the site. This brings together our three design strategies. As discussed in the text, remember: · Interface Design Strategy allows the user the ability to do something within our page. · Navigation Design Strategy allows our user to go from place to place. · Information Design Strategy allows the user to become informed, be entertained, learn, purchase, select, vote, contribute, or any action, because they have information. The Skeleton Plane provides us with the support for our website, much as our skeletal system provides support to our body. To achieve this support, three primary components must work in harmony in order for the site to be a successful user-friendly site. A web site is almost always more than a single web page. A quality site contains multiple pages that are related, but often include different content, different functionality, and even different user expectations depending on the target audience and his or her purpose for being there (nike.com is a very good example of this). But in all cases, a good site functions as a unified whole with disparate parts. We have been learning that the user experience is not limited to simple and basic interactions with the site, or surface interactions. The successful user experience must include critical and credible design functions that are below the surface, and are consistent, and reliable. Pre-planning and concurrent planning assure the success of your site as does the site structure and information design. Our goal is to design a site with multiple pages that are provides appropriate information, is easily navigable, and creates an environment in which the user can comfortably and easily interface or interact with the site to efficiently and effectively achieve her or his goals.

Interface Design Strategy As we will read in Chapter 6, the interface design is about selecting the right interface elements for the task the user is trying to accomplish. We are to arrange these elements onto the page in a way that will make the user experience comfortable and successful. The elements that contribute to this success may include alignment, arrangement, labels, buttons, colors, size, font, shape, or other visual cues. In all cases, the elements that are to contribute to the successful web site must be clear so that the information is communicated quickly and efficiently. The displays must be distinguishable from each other so as to communicate a single concept consistently and accurately. The user should be directed by the elements to the appropriate information. All information must be clean, well defined, and legible. And the elements must be understandable to the user, specific to that target audience. (Maybe images of bunnies and kitties for five-year-olds, but not for pharmacists.) These elements are also known to define and establish usability parameters discussed later.

Navigation Design Strategy If the user cannot navigate through your site, they are not likely to stay, or come back. Navigational elements, also part of the interface consideration, guide your user, and placement of these elements should be consistent and coherent throughout your site. As users become more familiar with web site use, they develop expectations of where elements will be placed, and therefore found. For example, navigational elements such as menus should be placed at the top, or along the left side, where the user can readily click and move efficiently. Other elements that are not navigational, not required to move the user from page to page for different information, might be placed at the bottom of the page and coded accordingly. Help elements, site map, and terms and conditions, or privacy policies, for example, are important support information. In considering your navigation and interface, you might remember that navigational elements may be normal, active, or current. The normal element is the surface look, how the element looks when it is not being used. The active element is the look when the user is engaging the element, such as a click or roll-over. A change in color might indicate this is a clickable link. And the current element is the indication, or reminder, that this is the place where the user is currently located.

Information Design Strategy When we consider the design of our information, we must consider several hundred years of cultural conditioning. For our purposes, we are working with those principles developed over time from the print industry in our western culture. How we read a book, top to bottom and left to right is an example. And, usually, we read from the front to the back of a text, especially if one concept is dependent on a previously learned concept, or in a murder mystery. But for web design, information may be gathered on an individual page, or collected in small groups, and the information access is more random. Navigational elements such as Contact Us, About Us, FAQ, or Help are good examples of when this particular information is helpful, but not critical to using the remainder of the site. As we will learn, the strategy of design of the information and layout is another critical consideration of the Skeleton Plane for an enhanced user experience.

Storyboards: Bringing Interface, Navigation, and Information Together You cannot learn too much about Storyboards. Storyboards are a critical design tool that is used to help us visualize what our final product should look like. As with a road trip, we could just jump into our car and start driving, in some general direction, toward some city out there, somewhere. That is fun, but not productive. Especially if your passengers need to be in Boston… soon. The storyboard is our road map with lines and stops and villages, and color and such. Storyboards help us to separate our functional elements from our graphic elements so that we can determine how users will interact with the Web site. A typical storyboard may include: · Key page elements and their location. This might be in the header, footer, navigation, content objects, or branding elements. As well as the grouping of elements, such as sidebars, navigation bars, and content areas. · Helpful specifics such as labeling, page title, navigation links, headings to content objects. · Useful items such as placeholders, content text, and images. If you have a good roadmap, the journey for your passengers will be smoother, faster, with purpose, and comfort. Otherwise, they might not drive with you again.

Adding Color The color property can be applied to most elements on a web page and there are many different ways in which you can specify the color itself. One way is simply how we have applied it within our document, by just indicating blue, red, and green and so on. These are easy to remember and spell out, however, you are somewhat limited by the range. Another way to reference color is to use a hexadecimal color specification. So, before we begin this week’s portion of the (X)HTML let me introduce you to Eric Meyer. You may not know him now, but if you stay in this field, and begin to develop web sites, you will. The reason I wanted to bring him to your attention is because he has shared with us one of the best color palettes I have ever seen, and I am sharing it with you. Now instead of assigning the color property of red to our site, we can apply the hexadecimal color of #FF0000 [red]. The interesting thing with this color blender is that it also provides you with the rgb, and cmyk colors as well. This comes in handy if you are doing any type of illustrations or design, and you need to match colors. In our CSS’s properties, we can define the (X)HTML

heading

like this: Give it a try. If you began with red, you should not see any change at all. That is what we were going for. Want to see if it really changes; try another color from the color-blender. You can also begin to add background colors to your web page. Try adding some to the “header” and the “footer”. Can you see where color has been added in the CSS coding for the navigation? Can you change it to a hexadecimal color? Inserting Images Adding images is not complicated. Insert the HTML tag where you want the image to appear. · img -- Defines an image · src --Defines the source of the image · alt – Provides written information about the image being used. The tag is another empty tag, which means that it contains attributes only, and has no closing tag, but does use the forward slash at the end of the entire coding. Look at the example carefully. [W3Cs web site does not show this ending slash, however, it needs to be there.] Apply the following coding within the content area: Here are the results: You can embellish the image, by adding some CSS style properties. You can make the border as thick or thin as you like, by adjusting the number of pixels within the style properties. You can also make an image a link. This is often done as a logo within a web page. It can be a secondary source to send your user back to the home page from any secondary page. To create an image as a link Because the image is in the place of the text it will become “hot” link, a button, and act as the link for the page.