Marketing Holistics

I subscribe to a number of  online marketing industry publications. Previously I have blogged about articles from:

• Advertising Age
• Bruce Clay
• Imedia Connection
• Grok.com
• Website Magazine

Website Magazine typically has interesting articles and the subscription is free. I will discuss an article from the May Edition: Construction Before Coding by Kristin Reilly, Marketing Coordinator for the Irwin Siegel Agency – www.siegelagency.com. Perfect timing, I thought then,  “a article somewhat relevant to our weekly assignment on wireframes.” I was taking an Internet Advertising & Promotion course  at SCSU (Southern Connecticut State University).  I really like the process of continual learning at the university level.  In a classroom, as a marketing professional, I am exposed to simultaneous multiple viewpoints moderated by an expert, in this instance, Professor Kristin Kimball of the SCSCU Communications Department. In fact, this blog post was originally part of our semester blog assignment. I saved several of my favorite posts, modifiied them slightly and re-published them under Marketing Holistics because these assignments helped me to expand and refine my original thinking on a variety of concepts related to internet marketing.

In retrospect, the article was  not as helpful for our assignment and I actually found it confusing. The more detailed documentation provided by our instruction in this assignment’s learning module and our class text, Communicating Design : Developing Web Site Documentation for Design and Planning by Dan Brown,  provided a clearer perspective. Since I noticed an information conflict between our text and the article, I decided to dig a bit deeper.

On one hand, several takeaway seo tips from this article would provide good reference points for a client.

• meta tags and description should match the copy  on each page
• keep all index pages f or  every section in the root folder and put secondary pages in their own folder
• keep an xml copy of sitemap and submit to search engines
• build your template and css after mapping you content into the wireframe
• brand is important and the design needs to clearly communicate the product
• use the wireframe to design the site’s navigation
• navigation style, content and position are the most important to the end user

The article explains that the first and most important steps, often overlooked, is constructing the wireframe – a step which the author skipped on her first web assignment. Not doing this resulted in major complication.

I know exactly how this feels. My first web project in the real world was to transfer an undergraduate university print catalog ( quark document ) into a FRONT PAGE web sub-site. This was a project from hell because  I had no technical support, no department buy in, and an unreasonably tight time frame. What I learned foremost from that  project was:

• the need to always use the best tool for the project which of course in this case was not Front Page.
• how important it is to understand the difference between print & web delivery
• you can do anything when you are determined

Wireframing was not a concept taught at the university level back in 2001.

On the other hand, I think Kristin Reilly is confusing a site map with a wireframe and our class text supports my assertion. I visited www.siegelagency.com to get a sense of the agency’s web presence. Overall…o.k. I still could not help but think that that her article was a bit off mark. This actually decreased the credability of Website Magazine in my mind. I’d be curious to know what everyone thinks about conflicting information on the internet, how they determine the validity and the resulting impression incorrectly presented information leaves.

Then I began to see the difference between a web site wireframe and a web page wireframe. I realized our assignment is about the web page wireframe and Kristin Reilly is talking about the web site wireframe but she shows what looks to me like a site map. There must be an essential difference. This prompted me to search further.

http://wireframes.linowski.ca/
provided information on Wireframes explaining that they are an important design tool used in Web development. Wireframes are a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. A wireframe separates the graphic elements of a Web Site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site.

A typical wireframe includes:

1. key page elements and their location, such as header, footer, navigation, content objects, branding elements
2. grouping of elements, such as side bars, navigation bars, content areas
3. labeling, page title, navigation links, headings to content objects
4. place holders, content text and images

A website wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Because of this, they are often completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. Wireframes also allow for the development of variations of a layout to maintain design consistency throughout the site.

I consulted a few more sources so I could really get this straight:

• http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain
• http://deyalexander.com/resources/uxd/wireframes.html
• http://iainstitute.org/tools/

Bottom line: my confusion prompted me to learn more about wireframes.