16
Course: ITGM 715: Interactive Web Design Summer Quarter 2010 June 21 – August 26 Professor David E. Meyers Student: Maitreyee Murani Duration: July 26th to Aug. 26th 2010 Unit 6 to 10: PROJECT B: FLASH BASED WEB SITE TRANSPORTATION CO. PDF processed with CutePDF evaluation edition www.CutePDF.com

Web Site Design Doc

Embed Size (px)

DESCRIPTION

Flash site - proposed

Citation preview

Page 1: Web Site Design Doc

Course:

ITGM 715: Interactive Web DesignSummer Quarter 2010June 21 – August 26Professor David E. Meyers

Student:

Maitreyee Murani

Duration:

July 26th to Aug. 26th 2010

Unit 6 to 10: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO.

PD

F processed w

ith CuteP

DF

evaluation editionw

ww

.CuteP

DF

.com

Page 2: Web Site Design Doc

CONTENTS

unit 6 - Design narrative

Design brief

Competition

Sitemap

Preliminary concept sketches

a. Look and Feel - Type Studies

b. Look and Feel - Color Studies

Initial splash page (index.htm) design comp

unit 7 - Concept 1 -

a. about

b. contact

Concept 2 -

a. about

b. contact

Unit 6 to 10: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO.

Page 3: Web Site Design Doc

DESIGN PURPOSE

Description:

Using Macromedia Flash and any tools you prefer to use for image creation (Photoshop, Illustrator, ImageReady, Fireworks, Digital

camera, scanner, etc.), create a fully functioning Web site on the subject of your choice. Some suggestions for subject matter are: a

tribute Web site exploring the life's work of a famous figure, a public service announcement based on the work of a nonprofit

organization, a music band Web site, a site exploring an artist's work, a site to promote a product or business, and a tourism site.

Requirements:

• Your site must have at least four main sections.

• Your project must contain some form of animation or motion graphics.

• You can use other Web technologies besides Flash (such as DHTML or JavaScript), but the

• main portions of your content and your artwork must be in Flash.

• Your site must be well-designed and must communicate clearly to an intended audience.

o To be well designed, your site should:

* be laid out in a clear and organized manner

* indicate a hierarchy of information

* include typefaces that are appropriate for headings and subheadings and can

* visually communicate the look and feel of your piece

* have a consistent and coherent scheme of colors and decorative elements

* have a strong composition.

• Your design must be uniquely yours.

• All links must offer feedback, such as rollovers and click graphics (the "down" state in a

• Flash button).

• Content should include both text and imagery.

• Transitions from one section to another should be well-considered. That is, the motion and

• shape of the elements on the screen should match the overall theme of the piece.

• Dreamweaver should be used in conjunction with Flash to ensure that the site is laid out properly.

Deliverables:

Project deliverables include concept sketches, a site map, design comps, and fully functioning site project files. You will submit

your site folder as a zipped file.

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | design narrative

Page 4: Web Site Design Doc

DESIGN BRIEF

Overall Concept:

After considerable thought and researching different contents I decide to create a useful website for the transportation, logistics

and Survey Company - to promote that business / work. I still have to think of a name for the company.

The reasons I choose the above company are quite a few:

• Firstly, me and my family are based in Houston, TX - which is the fourth-largest city in the United States of America and

the largest city in the state of Texas. Houston is also rated as a beta world city, its economy has a broad industrial base in

the energy, manufacturing, aeronautics, health care sectors and is a leading center for building oilfield equipment and

transportation.

• Secondly, the Port of Houston ranks first in the United States in international waterborne tonnage handled and second in

total cargo tonnage handled.

• The third reason again is a very personal one - my husband is a transportation consultant and has been working all over

the world - dealing with marine, land and also air based logistics and transportation sectors. He is now venturing into his

own independent service based company based in Houston. I would be more than happy to learn and create the website

for him.

Subject matter:

Transportation Company

Transportation and logistics is a needed commodity in almost any economic situation, as there will always be individuals, groups

and items that need to be transported from place to place.

Intended Audience:

The intended audience / users of transportation services are the varied small and big companies and people who are looking for

small or big transportation needs. The sectors like break bulk cargo, air cargo, barges, oil field equipment, wind mill equipment,

edible goods, insurance companies, oil tankers and carriers and so forth. Anyone who would seek out specialized logistics and

transportation of their goods. Some of these companies include - Mammoet USA, BP, ExxonMobil, Helix Energy etc.

How I wish to address the Audience:

I wish to address the audience in a straight forward and informative approach. It has to be a simple, matter of fact, business

website - that explains and then provides customized services to the needs of the prospective clients.

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO.

Page 5: Web Site Design Doc

COMPETITION

There are numerous companies and their web sites dedicated to Transportation and Logistics.

Websites like FedEx, USPS, and UPS are extremely specialized and offer tremendous interactivity. But this website is more of a

personal service based company - that offers engineering, surveying, calculations, reporting, dealing with insurance groups and laws

of international imports and exports and the like. I would strive to keep the website simple, self explanatory, and very professional. I

would also like my site to have a simple navigation structure that would continue to hold the interest and be useful to the intended

target audience.

Here are some of the transportation websites in Houston:

http://www.palletized-trucking.com/

Palletized® Trucking is a family owned and operated trucking company founded in 1969. Since that time, Palletized Trucking

has evolved into a multi-service transportation company that handles domestic, export, and import cargoes. From its terminal

locations in Houston, Texas, the company provides service within the Houston Commercial Zone and to points throughout

the contiguous 48 states and Canada.

http://www.iss-shipping.com/home.aspx

ISS is committed to delivering a range of quality-assured marine services to its clients across the industry. We take care to

tailor those services to the individual needs of the client – whether a fully integrated global package, the handling of a local

port call or the ad hoc delivery of a single spare part.

http://www.alliancemarine.com/

Among other services AMS provides various services to support FPSO/FSO offload operations. These include mooring

masters, assist boats, logistics support and cargo documentation as required by regulatory agencies and/or Owners and Field

Operators.

http://www.hmsfuels.com/

HMS is a fuel, lubricants and services provider to the marine industry which includes vessels calling on the ports of Texas

and offshore in the U.S. Gulf. HMS’ service offerings include bunkers supply, inland barge transportation; lube oil

manufacturing, offshore lubricant transportation and supply, waste oil and slops recovery and waste water treatment.

And there are many others.

Unit 5: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO.

Page 6: Web Site Design Doc

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | sitemap

Splash page / Index.htm

Services Projects ContactAbout

Air Contact Form

Sea

Land

I have the Welcome SPLASH page and then the subsequent pages for ABOUT, SERVICES, PROJECTS and CONTACT.

All of the pages will link back to the splash page by the way of the rotating globe image and the Title of the company’s name.

The Services page will have additional sub pages for - AIR, LAND and SEA sections. I have also tried to establish hierarchy of

information and set navigation for the above pages / sections in the sitemap depicted above.

Page 7: Web Site Design Doc

SPLASH PAGE

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | preliminary concept sketches

Page 8: Web Site Design Doc

SKETCH 1.

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | preliminary concept sketches

Page 9: Web Site Design Doc

TYPE STUDIES:

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | look and feel TYPE STUDIES

Page 10: Web Site Design Doc

TYPE STUDIES:

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | look and feel

“Business Like, Cool, Matter of Fact”

Color Studies

1. #FFFFFF

2. #3D5A6C

3. #334046

4. #517186

5. #F5F4F4

6. #D2EB35

Page 11: Web Site Design Doc

CONCEPT ONE SPLASH PAGE - index.htm

Unit 6: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | preliminary concept sketches

Hers is the comp for Welcome SPLASH page.

Page 12: Web Site Design Doc

CONCEPT ONE - ABOUT PAGE - about.htm

Unit 7: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | initial comps

Here is the comp for Concept one - About page.

Page 13: Web Site Design Doc

CONCEPT ONE - CONTACT PAGE - contact.htm

Unit 7: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | initial comps

Here is the comp for Concept one - Contact page.

Page 14: Web Site Design Doc

CONCEPT TWO - ABOUT PAGE - about.htm

Unit 7: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | initial comps

Here is the comp for Concept two - About page.

Page 15: Web Site Design Doc

CONCEPT TWO - CONTACT PAGE - contact.htm

Unit 7: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO. | initial comps

Here is the comp for Concept two - Contact page.

Page 16: Web Site Design Doc

SITE IN PROGRESS

http://studentpages.scad.edu/~mmuran20/ITGM/mmurani_projectB_unit7.pdf

Thank You,

Maitreyee Murani

Unit 7: PROJECT B: FLASH BASED WEB SITE

TRANSPORTATION CO.