ATION DATE Wed 11 ﬂe N We STORY 0johnadcox.com/Cigarette_Racing_2.0.pdfCigarette Racing Web site...

FILE NAMEblacQubeCigarette_Racing_2.0.graffle

CREATORWed Aug 24 2011MODIFICATION DATE

Cigarette Racing 2.0

DESCRIPTION Revised Web site

VERSION HISTORY 0.9

Cigarette Racing Web site 2.0Site Map

Wed Aug 24 2011

Creator

Modified

blacQube

1.0Home

2.0 The Boats

2.1 High

Performance

2.1.1 to 2.1.∞ Individual

Boats

Features Specs Power Options Gallery

3.1 Ride

3.2 Quality

3.3Design

3.3.1Hull/Deck

3.3.2Rigging

3.3.3Power

3.3.4Technology

3.3.4.1Technology

Partners

JL Audio Garmin Mercury Racing etc.

3.2.1A Tailored Experience

2.2Center

Console2.3

Sport Cruiser

3.0The Difference

3.2.2Construction

3.2.3The Facility

3.2.4Materials

4.1.1Events

4.4.4.1Archives

Issues

4.1.2 Partners

4.1.2.4 to 4.1.2.∞

etc.

4.1.3Cigarette

Racing Store

4.1.2.1AMG

4.1.2.2Lufthansa

4.1.2.3DucatiEvent 1 Event 2

3.4 ... And Beyond

(Post-sale)

3.4.1The Warranty

3.4.2Wiring

Diagrams

4.0The Legend

4.1The Lifestyle

4.2 History

4.3People

4.3.1Skip Braver

4.3.2Hector

Rodriguez4.3.3

Bud Lorow

4.4Media

4.4.1Ads

4.4.2Releases

4.4.3Smokin'

Magazine4.4.4

Newsletter

4.4.5.1Archives

Issues

4.4.3.1 News

Releases

5.0Contact

5.1General

Contact Form

5.2Parts and Service

Newsletter Signup

(Crosslink)

Note:Contains crosslinks to Design and A Tailored Experience, in The Difference

JL Audio Tech Product

Garmin Tech Product

Mercury RacingProduct

TechProduct 1

TechProduct 2

Note:Content "buckets" can be accessed from multiple pages

Privacy Legal Social Media Links

Footer and Offsite Links

Note:Contains crosslink to Design

Home

Primary Landing Page

Secondary Landing Page

Third-tier Content

Key

Fourth and fifth-tier content

Content accessed on

multiple pages

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.01.0 Home

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold

CIGARETTE RACING LOGO

Copyright © 2011 by Cigarette Racing Privacy Legal

1StoreIcon

Twitter Icon

Face-book Icon

You-Tube Icon

Home The Boats The Difference The Legend Contact

6

50' Marauder 46' Rider XP 42' X 39' Top Gun Unlimited 38' Top Gun 39' Top Fish 39' To Fish Open 49' Grand Sport

3

7

Headline Headline Headline Headline

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. More>

Tagline Tagline Tagline Tagline Tagline Tagline

2

4

5

8

1. Logo The logo remains in place throughout the experience, on later pages, and provides redundant navigation back to the Home page. Clicking the logo from any other page in the site will return the user to the home page.

2. Background A background image or color block fills the majority of the page real estate throughout the experience. This image will change throughout the site.

3. Newsletter Signup As on the present site, the user has an opportunity to sign up for the newsletter on every page through out the site. When users enter their email address and click GO, they will see a confirmation message in a modal. A confirmation email is sent to the address entered; the user must click a link to confirm newsletter signup.

4. Social Media/Store Navigation Links to Facebook, YouTube, Twitter, and to the Cigarette Store remain in place throughout the experience. Clicking a link opens the appropriate Social Media site/page in a new window, keeping the main experience open and available.

5. Primary Navigation Links to Second Tier Category landing pages. The user's present category location is highlighted (Home in this illustration). The user clicks a link to go to a second tier category landing page.

6. Scroll ArrowsUser may click arrows to scroll through additional articles or videos which will refresh the main content area described above in Annotation 5. The user will scroll to the next hero, and so on through all until finally cycling though them all and returning to the first of the heroes.

6.1 Tool tip teasing the next story appears on tap or mouse-over of either arrow. Tooltip may expand to contain a thumb nail image, a headline, and or text.

7. Hero Article(s) A main article is in place when the user lands on the home page. The first hero article functions as a landing page/welcome. This article may contain an image with text or a video. Between three and eight additional articles and/or videos can refresh this space, using the navigation described below in Annotations 6 and 7. If the main story is a video, only a few seconds will loop. When users click to play the full video, they are directed to a page within the site.

7.1 The "More" link is optional, and may lead to a specific boat overview page, a news article, gallery/video, an event, etc. Text is limited, and links to content elsewhere in the site (a news story, a boat landing page, an event, etc.).

9

3 / 27

1 2 3 4 5 6 7 8

Story Tease

6.1

GoSignup for our Newsletter: Enter email address

8. Story NumbersClickable numbers provide redundant navigation and allow the user to quickly navigate between heroes. Usually, there will be between 4 and 9 hero stories/videos.

9. Boat NavigationAllows user to navigate directly to specific boat overview pages.

10. "Bead" Navigation User drags a "bead" up and down a timeline to select specific boats. When the user drags the bead to a boat, an icon appears (see Annotation 11). A click or tap takes the user directly to that boat's overview page (see Wireframe 2.1.1).

11. Boat Icon When the user drags the bead to a specific boat, an icon appears, showing a thumbnail image of that boat. When the icon appears, the user may tap or click to go directly to that specific landing page (see Wireframe 2.1.1).

12. FooterThe footer contains copyright information and links to all appropriate legal, terms, and privacy policy information.

7.1

10

Boat Image 11

12

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.02.0 The Boats

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold

2


1

Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon

Home The Boats The Difference The Legend ContactThe Boats


Image

Building your CigaretteConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis.

More>

Image

What makes a Cigarette Boat Special?Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Ut wisi exerci tation ullamcorper suscipit lobortis.

More>

High Performance

Boat IconCenter

Console Boat Icon

Sport Cruiser Boat Icon

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel in, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.

Boat Image

3

5

1. Category-specific Headline Headline introduces the category. The headline remains in place throughout the category.

2. Main Navigation Highlight The category that the user has navigated to is highlighted.

2.1 A second line of category specific sub-navigation is revealed, and remains in place throughout the category.

3. Subcategory Icons Clicking an icon refreshes the content area to show just the specific boats within that subcategory (High Performance Boats, Center Console Boats, or Sport Cruise Boats). See Wireframe 2.1. These icons can be "blueprint" diagrams, representative illustrations, or photographs.

4. Category Text Brief copy describing the Boats category, focusing on the unique experiences that make Cigarette Racing Boats unique.

5. Cross-link Touts Since the content in The Difference is closely related, the touts provide space for crosslinks. These direct the user to information on the "tailored experience" of ordering a boat (Wireframe 3.2.1), and to the Design overview (Wireframe 3.3). The touts should contain a headline, "tease" text, an icon image, and a call-to-action link—although the user can click anywhere in the tout to be directed to the appropriate linked page. It must be obvious to the user that these are navigation elements, and not just page decoration.

6. Category Navigation The Boat navigation remains in place, providing subcategory navigation.

6

4

High Performance Boats Center Console Boats Sport Cruiser Boats 2.1



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.02.1 The Boats, with Category Selected

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon

Home The Boats The Difference The Legend ContactThe Boats High Performance Boats


Image

Building your CigaretteConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis.

More>

Image

What makes a Cigarette Boat Special?Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Ut wisi exerci tation ullamcorper suscipit lobortis.

More>

50' Marauder


Boat Image

4

46' Rider XP 42' X 39' Top Gun Unlimited 39' Top Gun

2

1. Category and Sub Category-specific Headlines When the user clicks or taps a subcategory icon on the Boats category landing page (Wireframe 2.0), a subhead referring to that subcategory (High Performance Boats in this illustration) appears. The main Boats category headline is clickable, taking the user back up a level to 2.0, providing a sort of breadcrumb navigation. Since there is no other "back" function (aside from the browser controls) this function needs to be obvious.

2. Subcategory Icons The main content area icons are refreshed to show the boats within that subcategory (again, High Performance Boats in this illustration). Clicking or tapping any of the specific boat icons takes the user directly to that boat's overview page (Wireframe 2.1). Again, the icons can be photographs, illustrations, or diagrams—however, again, it must be obvious to the user that these are navigation elements, and not just page decoration.

3. Arrow Navigation Arrows take the user to the next subcategory page (Center Console Boats or Sport Cruiser Boats, and then back to High Performance Boats).

4. Subcategory Text Brief copy describing the selected subcategory (High Performance Boats, Center Console, etc.).

5. Boat Navigation Highlights Specific boats within the selected category are enlarged and/or highlighted.

Center Console Boats

High Performance Boats Center Console Boats Sport Cruiser Boats

3


5

1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.02.1.1 50' Marauder Product Page

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon



Boat Image

Overview Headline

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.

Subhead

Esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.

Esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait. Nam liber tempor cum soluta vel illum ullamcorper eu feugiat nulla.

1. "Back a Level" Link Takes the user back to the previous tier page or to the category landing page (The Boats or High Performance Boats in this illustration).

2. Boat Specific Headline Headline for the specific boat. The boat is always identified in this headline. User may click the Boats or High Performance Boats to go back to those pages.

3. Overview Content As on the home page, content may be an image with text or a video. If text, the article may scroll when necessary.

If a video, the user may click to play the video full screen. Video remains full screen until it finishes playing or until the user clicks the icon again to return it to its usual size. Video controls appear when the user first clicks to play the video, and then fade after a few seconds. Controls reappear upon tap or mouse-over. See Wireframe 3.1 for an illustration.

4. Arrow Navigation Arrows lead boat to boat, cycling through all, even through those in different third tier categories.

5. Icon/Button Navigation Clicking an icon refreshes the main content area with new images/articles or videos. The user's current selection (overview by default) is highlighted.

6. Gallery Gallery contains all available images and videos for the selected boat, even those used elsewhere in the site.

7. Fourth-Tier Arrow Navigation The user may also refresh the content in the main window by using the arrows to scroll, cycling through the specific boat fourth tier content.

8. Cross Links The last two icons lead to content within the Difference category. These are the only links that do not refresh the content, and are not part of the arrow cycle described above in Annotation 7.

2

3

4

Specs Power Options Build Yours DesignOverview Features Gallery

5 67

8


High Performance Boats Center Console Boats Sport Cruiser Boats


High Performance Boats: 50' Marauder Headline1

The Boats

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.0 The Cigarette Racing Difference Landing Page

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold

The Cigarette Racing Difference


Subhead





Subhead Subhead Subhead Subhead Subhead


Ride Quality Design ... And Beyond1

5

3

2

1. Category Headline The Difference category headline.

2. Category Subhead Subhead or tagline is optional.

3. Overview Content As on the home page, content may be an image with text or a video. If a video, the rules described in Wireframe 3.1 apply. If text, the article may scroll when necessary.

4. Redundant Subcategory NavigationIcons tease the subcategory pages, encouraging clicks. Icons should include a headline, "tease" text, and an image. Clicking the link (or anywhere in the tout icon) takes the user to the appropriate tier 3 content page.

5. Boat Navigation As noted, the boat navigation timeline bar remains in place throughout the experience, even when the user is accessing a page in a different category, so that the user can always access any boat from anywhere within the site.

GoSignup for our Newsletter: Enter email addressCIGARETTE RACING LOGO

Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


The RideConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

QualityConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

DesignConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

...And BeyondConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.1 The Cigarette Racing Difference: The Ride

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead



Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel in, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.


The Ride


Ride Quality Design ... And Beyond

1

1. Article Template Article pages contain text and/or a video. Text may scroll if necessary. This basic template is used throughout the site (after the Boats category) for articles.

2. Image/Video The text can be supplemented with and additional gallery of images and/or videos. This basic template is used throughout the site (after the Boats category) for articles. The image/gallery is optional and need not be a part of every article page.

3. Full Screen User may click to play the video full screen. Video remains full screen until it finishes playing or until the user clicks the icon again to return it to its usual size.

4. Video controls Video controls appear when the user first clicks to play the video, and then fade after a few seconds. Controls reappear upon tap or mouse-over.

5. Gallery Clicking a gallery image refreshes the main image or video. Note: Any gallery image throughout the site can be downloaded.

6. Arrow Navigation Arrows lead to third tier pages within the category (Ride, Design, Quality, and ...And Beyond). As before, tool tip appears on mouse-over or tap.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


0:00 / 4:59

23

4

5

Quality6

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.2 The Cigarette Racing Difference: Quality

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead




The Cigarette Racing DifferenceQuality



1

1. Fourth Tier Navigation Third Tier pages that link to fourth-tier subpages include clickable icons as navigation, following the style established in the Boats. The "Cigarette Racing Difference" icon, which takes the user back up one level, should be separated visually from the fourth-tier icons.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


A Tailored Experience Construction

Design

Materials The Facility

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.2.1 The Cigarette Racing Difference: A Tailored Experience

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead




The Cigarette Racing DifferenceQuality: A Tailored Experience



1. Fourth Tier Page Template Fourth Tier pages follow the template established for third-tier article pages. The image/video gallery is optional.

2. Fourth Tier Page Navigation The user's selected page is highlighted.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


A Tailored Experience Construction

2Materials The Facility

1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.2.2 The Cigarette Racing Difference: Construction

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead



Ut wisi exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel in, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.

The Cigarette Racing DifferenceQuality: Construction




Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


ConstructionA Tailored Experience Materials The Facility

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.3 The Cigarette Racing Difference: Design

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold

Rigging TechnologyHull/Deck Power



Design

1

2

3

4

1. Category Headline The Difference category headline remains in place.

2. Design Subhead

3. Design Overview Article Presents an overview of the Cigarette Racing design philosophy and invites the user to explore the diagram layer by layer.

4. "Generic" Boat DiagramA representative illustration that represents a "typical" Cigarette boat. Basically, one shape will represent the entire Cigarette Racing family of boats, allowing users to explore features that are universal to all Cigarette boats.

6



StoreTwitter Icon

Face-book Icon

You-Tube Icon






...And Beyond

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.3.1 The Cigarette Racing Difference: Design: Hull/Deck

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold


Point of Interest lorem ipsum dolor sit amet nonummy consectateur

POI ICON

POI ICON

POI ICON

POI ICON

POI ICON


Design: Hull/Deck

1

2

5

3 4

7

1. Category Headline The Difference category headline remains in place.

2. Overview Subhead The "Design" subhead remains in place, but the specific "layer" is identified with every fourth-tier refresh as described below.

3. Representative Boat Image An outline that is meant to represent all Cigarette Racing Boats fills the main content area. As the user navigates through this subcategory, we see different "layers" of this illustration, revealing more "under the surface" details that make Cigarette Racing boats unlike any others.

4. Point of Interest Icon Each layer contains clickable or tappable icons. Upon click or tap, the icons expand as described below in Annotation 5.

5. Point of Interest Description Clicking or tapping an icon expands a window with text that describes that point of interest. Points of interest can include design features, appointments, technology, materials, etc. Points of interest can also include images and/or videos. If so, a click or tap expands the video or image window. Videos behave as described in Wireframe 3.4.1).

6. Fourth Tier "Layer" Navigation User can click or tap the icons to reveal different "layers" of the illustration, revealing new Points of Interest. The user may also click the arrows to scroll between layers.

7. Fourth Tier "Layer" Text Description Text gives an overview of the selected layer's main features.6



StoreTwitter Icon

Face-book Icon

You-Tube Icon






And Beyond

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.03.3.2 The Cigarette Racing Difference: Design with Video Modal

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold


POI ICON

POI ICON

POI ICON

POI ICON

POI ICON


Design: Hull/Deck

1. Point of Interest Video Point of Interest tool tip windows may include videos. A few seconds of the video will loop until the user clicks to play. Video rules are the same as the ones described in Wireframe 3.1.

1

0:00 / 4:59



StoreTwitter Icon

Face-book Icon

You-Tube Icon






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.0 The Cigarette Legend Landing Page

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead




The Cigarette Racing Legend

Subhead Subhead Subhead Subhead Subhead


Lifestyle History People Media1

3

2

1. Category Headline The Legend category headline remains in place.

2. Category Sub-navigation Sub-navigation is presented below the main navigation for all categories. Again, the user's selection is highlighted.

3. Overview Content

4. Redundant Subcategory NavigationIcons tease the subcategory pages, encouraging clicks.


The LifestyleConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

Our HistoryConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

Our PeopleConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

MediaConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..

More>

CIGARETTE RACING LOGOStore Icon

Twitter Icon

Face-book Icon

You-Tube Icon


4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.1 The Cigarette Legend Legend: Lifestyle

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead




The Cigarette Racing LegendLiving the Lifestyle


Lifestyle History People Media

1

1. Article Template Article pages contain text and/or a video. Text may scroll if necessary. This basic template is used throughout the site (after the Boats category) for articles.

2. Image/Video The text can be supplemented with and additional gallery of images and/or videos. This basic template is used throughout the site (after the Boats category) for articles. The image/gallery is optional and need not be a part of every article page.

3. Full Screen User may click to play the video full screen. Video remains full screen until it finishes playing or until the user clicks the icon again to return it to its usual size.

4. Video controls Video controls appear when the user first clicks to play the video, and then fade after a few seconds. Controls reappear upon tap or mouse-over.

5. Gallery Clicking a gallery image refreshes the main image or video.

6. Arrow Navigation Arrows lead to third tier pages within the category (Lifestyle History, People, and Media). As before, tool tip appears on mouse-over or tap.

7. Fourth-tier Navigation Icons


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


0:00 / 4:59

23

4

5

History6

Events Partners The Cigarette Racing Store

7

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.1.1 Events

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold




Lifestyle: Events



1. Event List User selects an event from the drop down menu to refresh the content/article space (Annotation 2) with copy about any of the events in the list.

2. Event Description Articles describes the selected event. The article may scroll if necessary. The event occurring soonest appears in this space by default.

3. Image(s) Images to accompany the articles are optional.

4. Expand Image User may click to view a larger version of the image in a modal.

5. Arrow Navigation Arrows allow the user to scroll between various events. Scrolling to the right leads to the second soonest-occurring event. Scrolling to the left leads to the event latest-occurring event.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


Events Partners The Cigarette Racing Store

Specific Event Headline



Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel in, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Next Event

1 2

4

5

3

Event and DateEvent and DateEvent and DateEvent and DateEvent and DateEvent and DateEvent and DateEvent and DateEvent and DateEvent and DateEvent and Date

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.1.2 Partners

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



The Cigarette Racing LegendLifestyle: Our Partners



1. Partners Overview article

2. List of Partners Selecting a partner from the list refreshes the content to the right—the partner-specific image(s) and article. Content for the first partner in this list is in place by default.

3. Image(s) Images to accompany individual partner content. May include a gallery if appropriate.

4. Expand Image User may click to view a larger version of the image in a modal.

5. Partner Article Gives an overview of a specific partner, emphasizing the connection with the Cigarette Racing lifestyle. Article may scroll if necessary.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


PartnersEventsThe Cigarette Racing Store

Back to Lifestyle

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ducati

Partner Headline




AMGDucatiLuftansaPartner Partner

34

2

5

1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.2 History

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



The Cigarette Racing LegendHistory Headline



1. History Image This may be a single image, a gallery, or a video.

2. Full Screen The user may click to view the image or video full screen in a modal.

3. Main Article Article may scroll if necessary.

4. Icon Scroll User may scroll through individual history icons. Clicking an icon refreshes the main content article and image.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


Year Year YearOverview Year

People

Year Year YearYear Year Year YearYear Year

History Overview Headline




2

3

1

4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.3 People

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta vel illum dolore eu feugiat nulla facilisis. Nam liber tempor cum soluta vel illum dolore eu feugiat nulla facilisis dolore eu feugiat nulla.

The Cigarette Racing LegendLifestyle: Our People



1

1. People Overview Article Brief introduction to the team as a whole.

2. Icon Navigation Clicking a bio icon opens a bio and image in the main content area, as show in Wireframe 4.3.1.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


Hector Rodriguez Brad Lorow

2

Media

Skip Braver

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.3.1 People: Bio

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta vel illum dolore eu feugiat nulla facilisis. Nam liber tempor cum soluta vel illum dolore eu feugiat nulla facilisis dolore eu feugiat nulla.

The Cigarette Racing LegendLifestyle: Our People



1

1. People Overview Article Brief introduction to the team as a whole remains in place.

2. Icon Navigation Clicking a different bio icon refreshes the image and article with new content.

3. Image Headshot to accompany the bio article. Appears when a bio is selected using the icon navigation.

4. Bio Article Article may scroll if necessary. Also appears when a bio is selected using the icon navigation.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


Skip Braver Hector Rodriguez Brad Lorow

Bio Headline

Esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta vel illum dolore eu feugiat nulla facilisis. Nam liber tempor cum soluta vel illum dolore eu feugiat nulla facilisis dolore eu feugiat nulla.

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate.

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat dolore eu feugiat nulla.

3 4

2

Media

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.4 Media

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead


The Cigarette Racing LegendMedia Headline



1. Media Overview Article

2. Ad ImageImage teasing the ads in the "Keeping Cigarette Sexy" category. Clicking the image takes the user to the ads page (redundant navigation).

3. Newsletter Image A "mock up" image of the email newsletter, made to look like an actual newspaper. Clicking leads to the newsletter page.

4. Smokin' Magazine Cover Image The cover of the current magazine issue. Clicking the image takes the user to the magazine page.

5. News Story Tout Provides space to promote the latest or most important news stories. These touts will need to be updated regularly.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


Lifestyle

Smokin' Magazine News Newsletter Keeping

Cigarette Sexy

Image

News Story ToutConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis.

More>

Image

News Story ToutConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis.

More>

1

5

3

4

2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.4.1 Media: Ads

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead


The Cigarette Racing LegendMedia: Keeping Cigarette Sexy



1. Headline/Breadcrumb "Back" Navigation As before, the user can click the headlines to go back one or two levels. This is the only "back" navigation, so the design treatment should make the function obvious to the user.

2. Ads Overview Article In this case, the article can include an overview of all of the ads and, if appropriate, can include a paragraph or two that refreshes, describing each ad individually.

3. Primary Ad ImageUser may scroll through ad images. The present image fills the main content area. Like all gallery images, the ad images may be downloaded.

4. Enlarge Image Again, the user may click to view an image fullscreen.

5. Image Gallery User may click a thumbnail to refresh the main image with a new ad. If appropriate, replacing the image also replaces the overview text (Annotation 2).

6. Arrow Navigation User may scroll to reveal more thumbnnails.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon



Cigarette Sexy

1

5

34

2

6

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.4.2 Media: News (Releases)

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold




Media: News



1. Headline/Breadcrumb "Back" Navigation As before, the user can click the headlines to go back one or two levels. This is the only "back" navigation, so the design treatment should make the function obvious to the user.

2. News Overview In this case, the copy just introduces the news release section of the site, telling the user that this is the latest, most complete, and most up-to-date information available, etc.

3. Headline indexUser may click any headline to refresh the main article space. The most recent story is at the top of the list.

4. News Release Main news release story may scroll if necessary. The most recent story populates the content space by default.

5. Image Gallery Again, the user may click to view an image fullscreen. User may scroll to access more images if available/appropriate.

6. Arrow Navigation User may scroll to reveal the next most recent news story. Clicking the left arrows leads back to the oldest story in the archive.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon



Cigarette Sexy


Next Article

Release Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and DateRelease Headline and Date

News Release Headline




5

1

3

4

2

6

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.4.3 Smokin' Magazine

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold




Media: Smokin' Magazine



1. Magazine Overview The copy introduces Smokin' magazine, briefly explaining its purpose and content, and telling the user how to get copies (order print for the cost of shopping only, download a .pdf, experience the online, etc.)

2. Cover Image An image of the latest issue. Clicking the cover takes the user directly to the online version.

3. Menu OptionsRedundant navigation takes the user to the online version of the current issue. The next options begins a download of the .pdf version.

4. Menu Option: Order Links the user to the magazine page of the Cigarette Racing store.

5. Back Issues User can download the .pdf versions of the previous issues. Note: this assumes that only the .pdf versions of the past issues are available online. If this is not the case, the other links can be added.

6. Arrow Navigation User may scroll to the News section.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon



Cigarette Sexy


News

5

1

3

4

2Read the latest Smokin' Online

Download the latest Smokin'

Order a free copy from the Cigarette Store

Download the 2010 Issue

Download the 2009 Issue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.04.4.4 Newsletter

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold




Media: Newsletter



1. Newsletter Overview The copy introduces the Cigarette Racing newsletter, briefly explaining its purpose and content, and telling the user how to subscribe.

2. Cover Image A "mock up" image of the latest issue. Clicking the cover takes the user directly to an online version of the latest issue.

3. Issue ListClicking each issue takes the user to an online version of that issue. Each issue must feature a "back" navigation link or button.

4. Subscription ToutEncourages the user to subscribe to the newsletter and provides a redundant signup opportunity. See Wireframe 1.0, Annotation 3 for behavior.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon



Cigarette Sexy


Ads

1

3

2Issue and contents

Issue and contents

Issue and contents

Issue and contents

Issue and contents

Issue and contents

Subscribe!Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Go

Enter email address

4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cigarette Racing Web site 2.05.0 Contact

Wed Aug 24 2011

Creator

Modified

blacQube

1024 x 768fold



Subhead


Address OneAddress TwoPhone OneFax

Email

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi exerci tation ullamcorper suscipit lobortis.

I'd like to talk to the Cigarette Racing Team about:

Cigarette Racing: Contact Us


1

3

2

1. Contact Headline

2. Primary Contact Information Address, phone number, etc.

3. Contact Form User selects a subject (Parts and Service, General, etc.) and uses the form to send email.

4. Newsletter ToutPromotes the newsletter and, as on the current site, provides a redundant signup opportunity. See Wireframe 1.0, Annotation 3 for behavior.


Store Icon

Twitter Icon

Face-book Icon

You-Tube Icon


General Information

Your email address Confirm email address

Enter your Message here

Submit

Image

Sign Up for our NewsletterConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Go

Enter email address

4

Date post:	11-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

ATION DATE Wed 11 ﬂe N We STORY 0johnadcox.com/Cigarette_Racing_2.0.pdfCigarette Racing Web site...

Documents