I am very pleased with the outcome of this course.  Jamie, if you read this thanks for your well organized course and all the good info!

The opportunity to work in a team has been rewarding, not only, I have made couple of good friends but also I have learned a little about teamwork, and the importance of clear communication and sharing the workload. 

Thankfully, all team members,(myself, Liz and Lori) equally worked hard to make this happen.  I think our NEVC site is successful both visually and strategically.  Of course, all works are “in progress”.

The process of strategizing, content management, design, production, and launch in addition to client surveys , budgeting,  and estimating, is hacked in my mind, Thanks to this course!

The knowledge that I could actually manipulate html, and as Jamie puts it ” I am smarter than Dreamweaver”  is invaluable.

My role on the final project was lead Information Architect.  I created the sitemap, content outline, wireframes, and the final content strategy.  In addition, I created all the copy for the two demos, the app animation and the final site demo.  Although, these were my main tasks, I did just a little revision on the final html, and css files.  However, the dedicated efforts of my team members, their good work and their ideas is  a major  force behind the success of this site.  We discussed all aspects of the project enthusiastically, and we all, promptly and efficiently ( given our hectic lives), contributed to this project.  So thank you Team Studio03 (Lori & Liz) and i am glad i got to know you and work with you!

Cheers, 

Nina Mashhood

http://www.everythingaboutweb.com/grdes67/studio_03/final_web/index.html/

After the Mobile App strategy was completed,  the final designs containing final content were submitted to the client (Jamie!) She signed off as approval and the fun task of production got underway.

We spent the Week 14 and Week 15 production of the html coding and CSS styling.  Revising, updating, and finalizing last touches.  We worked on the two demos introducing the finalized site and the fantastic Mobile App (created as swf files)

We spent december 16 testing the site accessing from the development folder.  We tested using mac, window, and various browsers to ensure all working OK.

The following is a text of the site demonstration and a summary of the design and navigation strategy .

NEVC Website demo text

web_estimate

web_schedule

So, the various estimates is a good tool to gauge a designers time and fees into a comprehensive list whether it is by task or by phase.  Personally, I think estimate by task works better with a design firm, and estimate by phase is a good tool for a freelancer, who may or may not contract out some of the work, because it allows for a range of fees, rather than exacting hours.

the schedule was conceived by trying to adhere to realistic time frame we have for the scope of this class and the final project. I think in the real world the time frames should expand to allow for real life procrastinations, revisions, scope creep, unforeseen circumstances, etc.

Peace,

Nina

resources_wireframe 

 have referred to our content outline and the sitemap to create these wireframes.

the home page wireframe:  Logo is the most important item of our site therefore it takes up the first left-top space of this wire frame.  We like to encourage membership therefore the second important item is a membership form, a global navigation system is of utmost importance therefore its design takes precedent also.   An inviting image montage, or flash animation will entice viewers to click to deeper levels of our club website.  Home page content should be minimum so we decided to only introduce ourselves and explain the benefits of EV.

The Resources page wire frame: Basically, this wireframe will determine how the rest of the pages of our site will be layed out.  in Addition to the global nav, membership form and the logo, we will incorporate a sub menu system, a search form, interactivity column, and advertisement column., and a main content column which for this page features our App (EV charging station finder form).

In Addition the wire frame PDFs contain more detailed notes explaining the various content hierarchy.

Our lead designer will be utilizing these wireframes as a resource to understand the intended hierarchy of the content, when creating her layout proposals.

Peace,

N

So, as the lead I.A, I have  devised this outline by referring to the Client Survey (put together by all team members) and visiting the existing site(s).  Of course, this is just the first draft, as we discuss the site map , client and audience needs, and navigation strategy, we will produce revised version(s) of this outline.

NEV Site map

This site map is a preliminary plan based on our Content Outline.

Based on this, the Home page features a navigation which it’s main focus is to get visitors to the two most important features of the site:  Membership, and the App for Sale.  The home page will act as an inviting, threshold to introduce the user to NEV’s and the importance of this club, and to encourage membership. The global navigation will also link users to the Resources (the most useful part of the site), and the Market Place ( a place to buy the App, find NEV dealers, other merchandise, a classified page with NEVs for sale by owner), A link to events, A link to local NEV clubs,  a contact page, & a form page for membership.  The encyclopedic info will be featured under the main “Resources” category.

Peace,

Nina

Here is my proposal for the Mobile Web site for our final project.

The Thinking behind this:  

-Organized navigation in order of importance. Therefore Resources takes precedent over other content.  Since this is a site specific to NEV’s, I think the most useful links are those that support the visitors’ need to find a charging station using a GPS based APP. In addition: a link to Google Maps for finding general directions is a thoughtful tool, which is a good marketing scheme as well.

Informational content would fall beneath the fold , since based on the client survey a typical visitor to this site on a mobile device would already be familiar with the NEV club’s main site, perhaps even is already a member,this allows for the most viable info and links to be displayed above the fold.

In Addition:  On the top navigation the link to “For Members” is featured next to home for easy access by members who want to contribute alerts or stories to the blog.

The look and feel is green and links are highlighted with alternating color backgrounds for easy scrolling/viewing.

Peace,

N

So, after being hopelessly inundated with plethora of seemingly impossible tasks, I was able to assemble something close to what I had in mind!

The project is a site for an educational org which shares and advocates new techniques of teaching to College Instructors.

The home page is a threshold to the rest of the site, with the emphasis on the purpose of the project.  the main navigations that are global to the whole site are featured here but to keep this page just a store front I have avoided member login forms.

The link to Events landing page basically reveals how the rest of the site is structured using a fixed 3 column /header/footer page which will be consistent throughout the site. 

The left column of the webpages will be dedicated to the sub level menus for each section, followed by the member login which is universal.  the right column features access to info sharing such as RSS feeds & Blogs.

I have included the Contact Us page under Resources, so for instant access to Contact us I have set up a link system on top of the search form to info I think needs to be readily available.

I set up these pages using a combination of ready made DW html and handwriting.  The Styles are defined in an External style sheet.

In building these two pages I encountered many many issues, which actually provided the opportunity to learn the intricacies of working with html & CSS. 

From lining up divs  to styling links, and devising lists, all of it was challenging!

Peace,

Nin

I made a gif image and linked it to the BG of the “wrapper” to get the faux column which creates the illusion of the nav column being =to content column.

Faux 2-column html

faux 2-column css