MAAC Interactive

2010-03-22T14:30:00.002-04:00

The DanceATL Web site was created in the Winter of 2010 for a class at the Art Institute of Atlanta - Decatur by team members:

Mark Anthony (email: manthonydesign@gmail)
Ana M. Velez (email: amvelez33@yahoo)
Anna Lam (email: sal662@stu.aii.edu)
Charie Seals (email: charieseals@yahoo)

Please feel free to contact us for any questions or for possible future work.

Thank You,
MAAC Interactive
Our work on DanceAtl

Usability test

2010-03-12T22:39:00.000-05:00

http://amv661.aisites.com/imd320/usabilitytest.pdf

Style Guide

2010-03-10T15:49:00.001-05:00

http://amv661.aisites.com/imd320/styleguide.doc

Prototype Site

2010-03-09T21:22:00.001-05:00

click to view - http://sal662.aisites.com/imd320/prototype/index.html

Site Map

2010-03-09T20:55:00.003-05:00

Click on the image to see the latest version of the site map

Maac Interactive Content Matrix

2010-03-09T20:48:00.000-05:00

Content Matrix This is the link Where Claire would go to look at the Content Matrix. It is saved as a PDF.

Maac Interactive Content Matrix

2010-03-09T20:38:00.000-05:00

MAAC Interactive

Technical Design Document

Version 1.0

Purpose

The Purpose of this document is to outline all the web technology use all the web technology our team can possibly used to make the DanceATL web site interactive to its user.

Audience

The intended audience for this document is the project Development teams, technical personnel and art designer of site.

Design Principles

Best web design practices will be applied to all areas of the site.

1. All links will work properly with in which the user will be able to understand.

2. The HTML/strict flavor will be used; which requires all other scripting languages to be used externally while be linked to the XHTML pages.

3. The above the fold method will be used for the Home page to make users want to use this site.

4. Using Proximity will lets users know which information go with which and which set of content is more important to the other content (according to the page.)

Technical Devices Used:

• XHTML-Standard Web Design technology used to produce strong graphical interfaces.

• CSS- Standard Web Design technology used to produce strong graphical interfaces.

• Content management System (Adobe Contribute)-Business Requirement for client. Client is able to update site without using XHTML or CSS

• Google Search Bar-Used to locate information easily, because site large amount of content.

Status report #6

2010-03-09T18:48:00.002-05:00

http://maacinteractive.ning.com/group/statusreports/forum/topics/status-report-6

Wireframes updated

2010-03-01T21:56:00.004-05:00

http://amv661.aisites.com/imd320/wireframes5.ppt

Style Guide

2010-03-01T21:09:00.000-05:00

Dance ATL Website Style Guide

Created by: MAAC Interactive

Color Scheme: #FB660Af #b7c683
#115AA7

LOGO Design: Used Clients Logo.(Can’t be changed)

Typography Specs: Helvetica, Bold Content 11pt Bold Heading 14pt

Page-Layout: 850w, 680 h

Photo Treatments: Large image on homepage (top corner)- 285w, 405 h PIXELS, photoshoped & resized w/ transparent background. All Round Corner Images- 145w, 95h PIXELS, Photoshoped & resized w/ transparents\ corner for allusion of rounded corners.

Flash Animation w/ round corners: 395w, 105h PIXELS

User Interactions: User will be able to look up performances, search different dance companies, look up local in events going on in their area, login for existing members and new member.

Navigation Strategy: Easier for user, bar added behind navigations for recognition.

Embellishments: Added framed outline w/ rounded corners, and shadow to right and bottom to show dimension.

Graphic & Style Treatment: Color scheme- all orange to stand out. Calendar size- 165w, 155h PIXELS.

Team MAAC Status Report#5 w/ Corrections

2010-02-25T12:13:00.000-05:00

MAAC Interactive Report#5

Group with assigned Positions:

• Mark Anthony: Project Manager & Technical Architect and Developer

• Anna Lam: Usability Engineer, Content Manager & Visual Designer

• Charie Seals: Business Analyst & Quality Engineer

• Ana Velez: Content Strategist & Information Architect

Previous week:

- Anna posted the final design of the home page and secondary page and received comments from other members of the group which conducted to make some changes presented on the final design on the meeting on Tuesday 2/16/10.

- Charie made an initial style guide.

- Mark put together the information architecture and printed the final documents to be handed to Claire and Ms. Bales on Tuesday meeting.

- Ana posted the wireframes, sitemap and flowchart with corrections.

On Friday 2/19/10:

- Team met up to discuss individual’s pages design for Dance ATL site.

- Mark Created basic template for team to follow each page design from. Mark is also responsible for the Basic Home page of site.

- Charie is responsible for Gallery page. Decision must be made rather to create image gallery using basic table, Divs w/ CSS, or JavaScript. He wants create table based on the client’s skill level of web design.

- Anna Lam is responsible for the Community page. Anna is post list at least half the companies on her page and all the events that correspond to each company.

- Anna Velez is responsible for the Performance page.

- Each group member had plans on creating their own CSS for their specific page they are working on, but entitled to miss with any of the basic CSS for the template.

- Each member is required to do a Content matrix and Technical Uses for their own page.

- Team came together and decided to not add a Google calendar to the site, so we decided create our own calendar through CSS and XHTML.

- Charie Seals has to redo Style guide and submit it to client.

Upcoming Events

- Production & Visual Prototype

o Create working pages with working Links

o Must Have Actual Content

o Create Usability Test Plan

MaacInteractive Status Report 5

2010-02-24T14:15:00.000-05:00

MAAC Interactive Report#5

Group with assigned Positions:

• Mark Anthony: Project Manager & Technical Architect and Developer

• Anna Lam: Usability Engineer, Content Manager & Visual Designer

• Charie Seals: Business Analyst & Quality Engineer

• Ana Velez: Content Strategist & Information Architect

Previous week:

- Anna posted the final design of the home page and secondary page and received comments from other members of the group which conducted to make some changes presented on the final design on the meeting on Tuesday 2/16/10.

- Charie made an initial style guide.

- Mark put together the information architecture and printed the final documents to be handed to Claire and Ms. Bales on Tuesday meeting.

- Ana posted the wireframes, sitemap and flowchart with corrections.

- Team presented design comps and resubmitted Information Architecture to client.

On Friday 2/19/10:

- Team met up to discuss individuals pages design for Dance ATL site.

- Mark Created basic template for team to follow each page design from. Mark is also responsible for the Basic Home page of site.

- Charie is responsible for Gallery page. Decision must be made rather to create image gallery using basic table, Divs w/ css, or JavaScript. He wants create table based on the client’s skill level of web design.

- Anna Lam is responsible for the Community page. Anna is post list at least half the companies on her page and all the events that correspond to each company.

- Anna Velez is responsible for the Performance page.

- Each group member had plans on creating their own CSS for their specific page they are working on, but entitled to miss with any of the basic CSS for the template.

- Each member is required to do a Content matrix and Technical Uses for their own page.

- Team collectively tried to find alternative for Google calendar. Calendar work, but involves user log-in to view calendar. Not sure if Client has Google accounts for Calendar events.

- Charie Seals has to redo Style guide and submit it to client.

Upcoming Events

- Production & Visual Prototype

o Create working pages with working Links

o Must Have Actual Content

Status report #4

2010-02-16T19:35:00.003-05:00

http://maacinteractive.ning.com/group/statusreports/forum/topics/report-4

Complete Information Architecture Deliverable (PDF - 4.83MB)

2010-02-16T05:52:00.001-05:00

click on the link (above) to download files.

Final Visual Design Composition

2010-02-15T22:18:00.001-05:00

Flowchart corrections

2010-02-13T02:01:00.004-05:00

http://amv661.aisites.com/imd320/flowchart3.pdf

Site map

2010-02-09T20:38:00.002-05:00

http://amv661.aisites.com/imd320/sitemap3.jpg

Anna Lam's Visual Design Comp

2010-02-09T20:34:00.002-05:00

My Concept Note for the comp: http://sal662.aisites.com/imd320/images/concept_note.pdf

Information Architecture: Wireframes Revisited

2010-02-09T20:21:00.002-05:00

http://amv661.aisites.com/imd320/wireframe3.pdf

Style Guide

2010-02-09T20:01:00.004-05:00

Charie Seals

IMD20 Production Team

Style Guide:

My approach to my design was to make the content on the home page stick out a little more than the pictures that are on it. Since the goal is to be the main site with other dance sites in the branches, it’s only appropriate to go with that concept.

The page layout will be partially consisted of three layers with three top sections and two bottom sections, navigations bar flowing horizontally across the page, with the help of the 960 Grid. The top portion on page on content section holds the main content and bottom portion will hold features of the site. Navigations will flow horizontally to have space from left side to right side of page for content. Some of the photos will be scaled down to fit certain parts of the layout. There will be a section that holds an inspirational phrase on both pages. There won’t be too many graphics in this design.

The logo design will stay the same, my color scheme (which is monochromatic), will come from the logo. Colors will consist of different hues of blue and gray. Pictures are taken from the client’s idea client’s own or data bases. The Type will be in times with font size of 12 for content and 14 for all sub-headers. The navigation font size will be 20 with font of time.

All users will be able to read about upcoming performances, other dance organizations, and even dance lessons. Usability will be fairly simple. Users will be able to view and scroll through images. Users also will have the ability to view past and upcoming events on the calendar. A blogs section will be on home page so that members and visitors can view comment about site and other info the deals with the site.

Visual Comp 1: M. Anthony - MAAC Interactive

2010-02-09T18:57:00.008-05:00

Style Concept:

In this comp design I wanted to bounce the entire design off the logo, which I used as the main header. I kept the colors consistent to enhance the brand of Dance ATL.

As far as the navigation, I made a few designer solutions according to the competitive analysis as well as professional approaches, i.e. the amount of tabs.
The calendar is on the HOME page and according to dates, can be linked to specific events. Also in PERFORMANCES (as a drop down menu) there would be a full-scale calendar along with a list of events for visitors (this is totally separate from Dance ATL’s events as suggested by Claire that appears on the bottom of the page).

For visual attraction and functionality, I added an interactive gallery w/ a slide bar. This does not feature the entire gallery – but gives a taste of new uploads (pictures) of performances and an incentive to visit the gallery for those who love imagery.

To focus on Dance ATL as an umbrella company I added highlights of featuring companies, and labeled them as “Associates” in stead of just simple companies. The idea is to make those interested feel like they are apart of a growing entity. Where the default images are – the company’s logo or image will appear along side a brief synopsis of the company that will link to the company; One of the benefits of being an associate, as well as a feature.

I added what is called a “call to action” to make visitors aware that there is membership availability. It’s not set in stone but I also added some possible reason why a company may want to seek membership. Instead of the normal “sign up now or register now”, I’m suggesting that the visitor may want more info first, at which there would be a “call to action” to register.

The COMMUNITY tab will house Dance ATL Event, Associating Companies - Members.

The footer still has the possibility for sponsors – when needed or if need be.

Visual Design Comps

2010-02-09T18:53:00.001-05:00

Ana M Velez COMPS

2010-02-09T18:07:00.007-05:00

Here is my design for the home page: http://amv661.aisites.com/imd320/images/comp1.jpg

and for a secondary page: http://amv661.aisites.com/imd320/images/comp1b.jpg

Concept note: the color palette is based on the colors of the logo, in order to give more relevance to the brand as the central column of the site. Main titles and active page title are in blue, secondary titles in gray, links in light blue and text in black.

There are three elements that take the user immediately into the dance environment: the logo, the big image and the inspirational phrase for those more poetic ones. I didn't find exactly the kind of font that I wanted for the phrase, but I will keep looking, I think it has to be handwriting type, but more loosen than the one that I used.

The white space at the bottom is reserved for future sponsors. In order to make them fit in the blue-gray-white scheme of the site, without breaking the harmony, they can be embbebed in a gray frame.
The column on the left contains the vertical elements that will be constant in all pages, such as the calendar, search and log-in.

Status Report 3

2010-02-09T17:43:00.000-05:00

click link (above) to view document

Information Architecture: Competitive Analysis - Impulstanz

2010-02-09T11:46:00.000-05:00