home page (min-width: 1024px) - alex · pdf filescroll-jacking-on-hugeinc 11 lorem ipsum 12...

Home Page (min-width: 1024px)

LOREM IPSUM

Dolor Sit Amet Consectetur

[CTA]

LOREM IPSUM


[CTA]

MENU LOG IN

10

MENU LOG IN3

1

2 54

6 7

9

8

Header Baseline (Invisible)

ANNOTATIONS

1. Hamburger Menu: Clicking the menu icon will reveal a sidebar nav menu. Hover animation to be applied to the icon. Ref: http://tympanus.net/Development/AnimatedSVGIcons/. See Main Navigation Expanded section for complete functional details.

2. Search icon: A search input container will display on click. See Search Header Expanded for more details.

3. Logo: Directs user to homepage on click. 4. Store Locator Icon: Directs the user to the store

locator page on click. 5. Login Button: Prompts a Login / Sign Up overlay

screen on click. See Login & Sign Up screen sections for complete functional details.

6. Hero Section: Container supports multiple static images and video content.

7. Hero Carousel: Rotation: An automatic rotation function will NOT be available for this feature. Nav will be manual in order to encourage user scrolling and engagement. Note: if auto-rotate feature is desired, the function should be optional and should be nullified following manual navigation. Ref: http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/Content/Style: The header has two contrasting lines of text that are populated via the CMS. Each line will have a specific default font style class associated with it. Line 1: Thin font weight / smaller font size (TBD). Line 2: Thick font weight and larger font size (TBD).

8. Carousel Navigation: Number of nav links determined by the number of hero images published to the web via the CMS, plus one (See annotation 8.1). Nav links won’t display if less than 2 hero images are published. Nav links will have active and hover state style values. The visibility/display of hero images will toggle on click based on the user’s selection.

8.b.The last nav item will receive a different stylistic treatment and link to the modular content below the hero fold.

9. CTA (CALL TO ACTION) Button: Hyperlink is created via CMS. User will be directed to corresponding page on click.

10. Hero Navigation Scroll Icon: This icon button is an anchor link that works in conjunction with the carousel navigation (annotation 8). Clicking this link will call a transform action to transition between hero images. This button will remain static during image transitions. See next Hero Image Transfrom/Transition (annotation 11) for more details.

11. Hero Image Transform/Transition Functions: Next / Scroll Down Functions: Scrolling down (See annotation 12), clicking the scroll arrow (See annotation 11), or clicking the descending carousel navigation link (See annotation 8) will trigger a vertical image transformation from bottom to top. Previous / Scroll Up Functions: Scrolling up or clicking the ascending carousel nav link (See annotation 8) will trigger a vertical hero image transformation from top to bottom. Animations: Transitions and Transformation use concurrent actions including: position, elastic y-axis slide, opacity fade-in/out, and z-index swap.

12. Mouse Scroll / Vertical Swipe: Scrolling / swiping works in conjunction with the carousel navigation. Scrolling/Swiping down will cause the next hero image to slide up. Scrolling/Swiping up will cause the previous hero image to slide down from the top (negative y-value) of the page body. Upward scrolling will be null when first hero image display is active. When reaching the last nav item, users can scroll up to go back to the hero content or continue scrolling down to see editorial content. Ref: http://www.hugeinc.com/ideas/perspective/scroll-jacking-on-hugeinc

11

12LOREM IPSUM


HERO CAROUSEL - SCROLL FUNCTIONALITY (SCROLL-JACKING)

*- Browser Window Baseline

Hidden Overflow

8b

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Home Page: Header & Hero Carousel

7 / 22

Fri Nov 14 2014Last Modified

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore

veritatis et quasi architecto beatae vitae dicta sunt explicabo.

[CTA]

[CTA][CTA]

COLLECTION

PRODUCT

COLLECTION

PRODUCT

COLLECTION

PRODUCTPRODUCT

COLLECTION

LOREM IPSUM

Dolor Sit Amet ConsecteturLOREM IPSUM


RETURN TO TOPCopyright 2014 Girard Perregaux

ContactCare GuideFAQ

CUSTOMER SUPPORT

About / Kering Sustainability Careers Sitemap Privacy Terms

COMPANY STAY CONNECTED

Email Address →

GET THE LATEST NEWS

US / ENGLISH

FIND A STORE

Enter a city or zip code

US / ENGLISHFR / FRANCEJP / JAPANSE

MENU LOG IN

MENU LOG IN

ANNOTATIONS1. Sticky Header: When the user scrolls down

beyond the hero container, the sticky header will remain fixed to the top of the page body. The header will only remain fixed when the user reaches the first content module following the hero. The content and height of the header container will slightly minimize via a transform animation. A dark transparent background style will be applied to the header body via a concurrent fade in and slide down animation. The image and text content will transition (ease-in) into a lighter color to establish a contrast with the background color. Scrolled content will be slightly visible behind the opaque header background.

2. Sticky Header Fade Out: When the user begins scrolling down the page (below the hero area), the sticky header will fadeout and disappear to allow the user to focus on the content. Scrolling up will call a function to make the sticky header to fade in and reappear.

3. Sticky Header Fade In: When the user finishes scrolling down to the very bottom of the page (footer area), a function will be called to make the sticky header to fade in and reappear. The stick header will always be present when the user scrolls up the page from any position/section.

1

2

MENU LOG IN

3

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Home Page - Sticky Header Functionality

8 / 22




CUSTOMER SUPPORT



Email Address →

GET THE LATEST NEWS

US / ENGLISH

FIND A STORE


US / ENGLISHFR / FRANCEJP / JAPANSE

2

FOOTER - GLOBAL



CUSTOMER SUPPORT



US / ENGLISH

1

FIND A STORE


Email Address →

GET THE LATEST NEWS

Error Validation Message



CUSTOMER SUPPORT



US / ENGLISH

FIND A STORE


Email Address →

GET THE LATEST NEWS

Thank you for signing up! Please check your email.

ANNOTATIONS1. Footer text links: Clicking a list item directs the

user to the specified page. 2. Region Selector: Element contains a visual icon

and a text string based on the selected or default region (based on cookies). Element is clickable has a hover state. Clicking the region selector will trigger a tooltip containing a list of regions. The regional list items in the tooltip will have hover states pertaining to font color. A different region can be selected by clicking on a region in the tooltip list. The value of default (or previously selected region) will change based on the tooltip selection. See BRD for required region list.

3. Store Finder: Text input that allows users to search for store locations based on city or zip code. No dynamic validation required. User can hit enter key or pin button to submit search. User will be directed to store locator page after submitting. Invalid parameters will be handled via error message on Store locator page. See Store Locator for expanded details.

4. Return To Top (anchor link): Clicking this button will anchor the user back to the top of the page.

5. Social Media: Clicking on any of the social media icons will direct the user to the respective social media for GP.

6. Newsletter Form: Text input with submit button. Confirmation message displays and confirmation email sent to user after submitting a valid email address.

7. Newsletter Form Error Validation: Error message displays when user submits invalid email address. Validation parameters include: 1) @ character 2) .com 3) Duplicate email address

8. Newsletter Form Confirmation: After submitting a valid email address, the subscribe form will reset and a confirmation message will display. The confirmation message will state that the email address entered was successfully submitted and a confirmation email was sent.

3

5

4

6

FOOTER VALIDATION- EMAIL INPUT ERROR

FOOTER VALIDATION- CONFIRMATION

7

8

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Footer

9 / 22


LOREM IPSUM



[CTA] [CTA]



[CTA]

IMG / HEADER

COLLECTION

PRODUCT

COLLECTION

PRODUCT

COLLECTION

PRODUCTPRODUCT

COLLECTION

LOREM IPSUM

[CTA]

IMG ICON

LOREM IPSUM

[CTA]

IMG ICON

LOREM IPSUM

[CTA]

IMG ICON

MENU LOG IN

Module 1

Module 2

Module 3

Module 4

ANNOTATIONS

1. Module 1 - Horizontal Content Article (Full): 100% width rectangular content block. Transparent overlay occurs on hover. CMS driven features include:A) Background image B) Image icon or header copy C) Paragraph copy

2. Module 2 - Square Content Article (2 col/ section @ 50% width): 2 square or rectangular blocks @ 50% width. Transparent overlay occurs on hover. Module 2 has 2 style options:2A) Full bleed background image w/ Header and CTA button.2B) Border style background Image w/ Header and CTA button.*Only one template can be selected.

3. Module 3 - Featured Product Article (4 col/section @ 25% width) : 4 border style product images. CMS driven header titles for collection and product. Transparent overlay occurs on hover.

4. Module 4 - Utility Promo Article (3 col/section @ 33.3% width):

END MODULE 1

END MODULE 2

END MODULE 3

END MODULE 4

3

4

2

1

2A 2B

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Home Page: Content Modules Pt.1

10 / 22


FOLLOW @GIRARDPERREGAUX ON INSTAGRAM

Lorem Ipsum

[CTA]

LOREM IPSUM DOLOR SIT AMET TITLE

LOREM IPSUM

LOREM IPSUM

Lorem ipsum dolor sit amet subtitle



10. 29. 2014

10. 29. 2014

10. 29. 2014

Lorem Ipsum

MENU LOG IN

Module 5

ANNOTATIONS

1. Module 5 - Social Content Article (Col/Section 1: Instagram Board): This module will consist of 3 elements. A) Header: Header copy for this section is mandatory. Client will be required to publish text for this field in the CMS.B) Instagram Photo Board: A 9 image (3x3) grid will display thumbnails of image content from the GP’s Instagram page. The client will manually curate and populate the thumbnail content in the grid via the CMS. C) Follow Link: A hyperlink to GP’s Instagram page will display the below the thumbnail gird. The user will be directed to Instagram via a new browser tab.

2. Module 5 - Social Content Module (Col/Section 2: Blog/Newsfeed): This module will consist of the following elements:A) Header: Header copy for this section is mandatory. Client will be required to publish text for this field in the CMS.B) Blog Stream: 3 of the most recent blog posts will be fed into this container. Each post will display in a separate line and contain the following elements: 1) Thumbnail Image 2) Header 3) Date 4) Truncated paragraph description (2 line max).Note: The max height of the column for elements 2-4 should not exceed the height of the thumbnail (element 1). C) Call to Action (CTA) Button: A hyperlink to GP’s blog page will display the below blog stream container. The user will be directed to the blog page in the same window.

1 2

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Home Page: Content Modules pt.2

11 / 22


LOREM IPSUM


[CTA]

LOG INMENU

1

ANNOTATIONS1. Search Container: The search container will

display via a slide animation and fade transition when the user clicks the search icon in the global header. The background will be styled with a dark transparent overlay.

2. Search Input: The search input field and text will be centered aligned. A focus state style will be automatically applied to the input field when displayed so that the user may begin typing without having to move the mouse or click on the input itself. Typing a term and hitting ‘enter’ will submit a search query and direct the user to a search results page based on valid and invalid terms (See Search Results page section for more details). Search input will contain the following elements:A) Placeholder Text: This is the default copy inside input. The placeholder copy is meant to help guide the user and must indicate the following actions: 1) Type 2) Hit Enter. B) Search Icon: The icon will maintain the same vertical position it held as part of the global header and transform to a slightly larger size when the search container animation renders. C) ‘Clear Field’ Button: An ‘X’ icon button will display inside the right edge of the search input field. Clicking this button will clear any typed data from the input field. The placeholder copy will display again after clearing.

Type a search term and hit the enter key

2

))((

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Search Input Expanded

12 / 22


LOREM IPSUM


[CTA]

LOREM IPSUM



[CTA] [CTA]

Return to Top

LOREM IPSUM

[CTA]

IMG ICON

COLLECTIONS

MANUFACTURE

WORLD OF GP

SERVICE

GIRARD PERREGAUX

CONTACT

PRESS

FIND STORE ACCOUNTEN

COLLECTIONS

MANUFACTURE

WORLD OF GP

SERVICE

GIRARD PERREGAUX

CONTACT

PRESS

FIND STORE ACCOUNTEN

8

PUSH MENU NAVIGATION - REGION SELECTOR / FIND STORE / ACCOUNT

Action

FR / FRENCH

JP / JAPANESE

US / ENGLISH

ANNOTATIONS

1. Push Menu Navigation: The push menu navigation display can be toggled by clicking the hamburger menu in the site header. When the push menu will be absolutely positioned and animate in/out via a horizontal slide function. When the display state is activated, the push menu will shift the site content container (See annotation 6) partially offscreen to right.

2. Push Menu: Secondary Interface Content: The topmost div of the push menu will consist of 3 child sections: A) Region Selector - B) Find Store - C) Account. Each of these items will have a rollover state that changes the background color of the element being hovered.

3. Push Menu: Home Hyperlink: The home link will reside within div element above the menu list items. This block will feature a home icon and site name (html text).

4. Push Menu Nav Items (Main Nav): All top tier nav links contain a corresponding icon and title. Parent navigation pages that contain submenus for child pages also include a left facing arrow icon to indicate the presence of a second tier for child/sub menu pages. The direction of the arrows pertain to the slide origin of the second tier push nav.

5. Push Menu Nav Item Hover: A background color oriented slide animation will occur on hover. Ref: http://tympanus.net/Development/CreativeLinkEffects/

6. Push Menu Nav Items (Secondary Nav - Global Links): Secondary nag links will display below the main nav list items. These links will receive a different visual treatment (TBD by visual designer). The lighter font weight and removal of bottom borders from the list item in this wire is strictly for demonstration.

7. Close Menu Button: When push nav opens after clicking the hamburger menu, the hamburger icon display will toggle by animating into a close button. Clicking the close button will toggle back to the hamburger icon and close the push nav. Ref: http://tympanus.net/Development/AnimatedSVGIcons/

8. Site Content Container: When the push menu nav is open, a CSS class will be applied to the main content container that pushes it to the right and partially offscreen based on the width value of the push menu.

9. Region Selector: The Region selector section will contain an globe icon and an abbreviated text string to indicate language. Clicking on the region selector will prompt a tooltip menu that contains a list of selectable regions. Each list-item in the tooltip will have a hover state that toggles the background color of each item. Clicking on a regional list item will change region of the site on the back end and the language text string on the front end.

10. Find Store: This section will contain an icon and a link title. Clicking FIND STORE link will direct the user to the corresponding hyperlink.

11. Account: This section will contain an icon and a link title. Clicking the ACCOUNT link will direct the user to their account page. This title will not change based on log in status due to character length variables and corresponding real estate restrictions.

3

4

2

1

8

6

5

—* Brow

ser Window

Right Edge

CLOSE

7

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Main Navigation Expanded: Tier 1

13 / 22


[CTA]

Return to Top

LOREM IPSUM

[CTA]

IMG ICON

LOREM IPSUM


CLOSE

Back

Collection 1

Collection 2

Collection 3

Collections

1

2

3 —* Brow

ser Window

Right Edge

4

ANNOTATIONS1. Push Menu Navigation Tier 2 - Header: The name

of the selected tier 1 nav item will display in the top header section of the push nav.

2. Main Menu Icon: Clicking this icon will return the user to the top tier of the push menu. The 2nd tier nav overlays the width of the 1st tier block by approximately 80%, hence the first tier nav items disappear in the residual space and are replaced by the main menu icon.

3. Back Button: Clicking the back button will close the current tier and bring the user back by one step to the previous tier.

4. Subnav Items: These items link to their respective pages. Note: If these items include more child categories, please reference the style and guidelines outlined in annotation 4 on Main Navigation Expanded: Tier1.

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Main Navigation Expanded: Tier 2

14 / 22


LOREM IPSUM


[CTA]

LOREM IPSUM



[CTA] [CTA]

MENU LOGIN

|

Password

LOG IN

LOG IN

FORGOT PASSWORD?

LOG IN WITH FACEBOOK

SIGN UP

or

ANNOTATIONS1. Log In / Sign Up Tab Menu : Log In screen is the

default selection when clicking the Log In button in global header. User can toggle screens by clicking on the tab menu items. Active state and hover state styles required.

2. User Forms: The user will be required to submit an email address (username) and password. Validation required based on existing valid email address and password (See FRD and Validations page).

3. Log In Button: Clicking ‘Log In’ button will submit the form field data. Log In screen will fade out if successfully submitted. Validations will display if incorrect data is submitted.

4. Forgot Password Hyperlink: Directs user to a forgot password screen.

5. Facebook Log In Button: Selecting FB log in will prompt an iframe pop up that logs the user in with FB.

6. Close Button: Clicking the ‘X’ will close the Sign Up / Log In screen.

1

2

3

4

5

6

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Login Screen

15 / 22


LOREM IPSUM


[CTA]

LOREM IPSUM


LOREM IPSUM


[CTA] [CTA]

MENU LOGIN

LOG IN SIGN UP

CREATE ACCOUNT

SIGN UP WITH FACEBOOK

Create an AccountEnter your email address and create a password.

Passwords must be a minimum of 6 characters and include at least one number.

Email Address

Username

Enter New Password

Confirm Password

Password

YES! Get me signed up for the latest news.

Newsletter

?

Contact Us

1

2

3

4

5

ANNOTATIONS1. Facebook Sign Up: Clicking the FB sign up button

opens up an iframe pop up that allows the user to sign up with Facebook.

2. User Forms: The user will be required to submit an email address (username), password and password confirmation. Validation required based on existing valid email address, password character parameters and password confirmation input match (See FRD and Validations page).

3. Newsletter Sign Up: A checkbox will be automatically marked off for newsletter signup. The user must unmark the checkbox via click to not be placed on the newsletter signup list after submitting the account creation form.

4. Create Account Button: Submits the form input data. Successful submission based on validation parameters (See FRD and Validations page). Hover state style required for button.

5. Help Links: A Contact and FAQ link will be aligned to the left/center edge of the screen. Hovering over the icons will display a tooltip with the title of the action. The phone icon will direct the user to the Contact page. The question icon will direct the user to the FAQ page.

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Sign Up Screen

16 / 22


LOREM IPSUM



LOREM IPSUM



MENU LOG IN

COLLECTION TITLE ANCHOR LINK 1 ANCHOR LINK 2 ANCHOR LINK 3

MENU LOG IN

1

2

3

ANNOTATIONS1. PLP Hero: Fullscreen image with header and

paragraph copy. All elements are CMS driven. 2. Scroll Arrow Anchor Link: Clicking this icon scrolls

the user down to the content module below. 3. PLP Collection Nav (Optional): This navigation

contains anchor links to all content module sections on the product listings page. Clicking the anchors links will scroll the user down to the corresponding page section. This navigation menu belongs to the first content module.

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - PRODUCT LISTING PAGE (PLP) HERO

17 / 22




[CTA]

COLLECTION TITLE ANCHOR LINK 1 ANCHOR LINK 2 ANCHOR LINK 3

COLLECTION IMGCOLLECTION IMG



[CTA]

PRODUCTNAME

COLLECTION TITLE

1

ANNOTATIONS1. Collection Nav Scroll: When the user lands on the

module below the hero, the collection nav will be positioned at the top of the page. The collection nav will not be fixed and flow off the screen when scrolling.

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - PRODUCT LISTING PAGE (PLP) SCROLL

18 / 22


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore


[CTA]

LARGE HEADER

Lorem ipsum sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia. voluptas sit

aspernatur aut odit aut fugit

SMALL HEADER

COLLECTION IMG PRODUCTNAME

COLLECTION TITLE

COLLECTION IMG

MENU LOG IN

2

3

4

END MODULE 3

END MODULE 1

END MODULE 2

ANNOTATIONS1. Module 1 - Collection Promo Article: Required

module. Rectangular container with full-bleed background image, paragraph copy and call to action hyperlink. All elements are CMS driven.

2. Module 2 - Product Promo Article: 3 column layout for curated products via CMS. Each section contains a full-bleed product image associated with the collection being viewed. Collection title and Product name display as overlay on hover.

3. Module 3 - Image/Video Carousel (Optional): Full width container with full-bleed image(s) or videos. Optional small and large header and romance paragraph copy can be applied via CMS. No auto rotation. Carousel images can be navigated by clicking directional arrows on the left and right edges of the container.

4. Module 3 - Carousel Nav Arrow Hover: Hovering over the nav arrows will display a small image preview of the next/previous slide. Ref: http://tympanus.net/Development/ArrowNavigationStyles/

1

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Product Listing Page (PLP) - Content Module Blocks Pt.1

19 / 22


ANNOTATIONS1. Module 4 - Description Block: Full width container

with full-bleed background image. CMS driven paragraph copy and anchor link arrow. Clicking the arrow scrolls the section below to the top of the page.

1. Module 5 - Collection Promo Article: Full width container with full-bleed background image. CMS driven small and large headers, paragraph copy and call to action button with hyperlink.

2. Module 3 - Image/Video Carousel (Optional): Full width container with full-bleed image(s) or videos. Optional small and large header and romance paragraph copy can be applied via CMS. No auto rotation. Carousel images can be navigated by clicking directional arrows on the left and right edges of the container.

3. Module 6 - Promo Block with optional description block - (6A) 2 Column / 2 Image Promo Block: Hovering over the description block is optional and can be controlled via CMS. 6A is a 2 column container. Headers and paragraph copy are optional fields in CMS. Image required for each section. Hover states required. *Same rules regarding CMS fields apply to all versions Module 6.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore


[CTA]

SMALL HEADER

LARGE HEADER

IMGSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo

inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

[CTA]

SMALL HEADER

LARGE HEADER

Lorem Ipsum sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Lorem Ipsum sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

END MODULE 4

MENU LOG IN

END MODULE 5

END MODULE 6A


20 / 22


ANNOTATIONS1. Module 6 - Promo Block with optional description

block - (6B) 2 Column / 3 Promo Block: 2 50/50 columns. 1 tall/vertical image at 100% of column width and height. 2 horizontal images stacked at 100% width of container and 50% height of container. Choice of column alignment determined via CMS (displays can be flipped).

2. Module 6 - Promo Block with optional description block - (6C) 2 Column / 4 Promo Block: 2 50/50 columns. 1 tall/vertical image at 100% of column width and height. 2 horizontal images at 50% width and height of column stacked over 1 image at 100% width and 50% height of container. Choice of stacking and column alignment determined via CMS (displays can be flipped).

IMG

IMG

IMG

IMG

IMG

IMG

IMG

MENU LOG IN

END MODULE 6B

END MODULE 6C

1

2


21 / 22


ANNOTATIONS1. Listings Grid - Description Block: Optional section

with small and larger header and paragraph copy. This block can be applied as an optional field in the CMS. If tuned on, the width will be equivalent to two grids spaces.

2. Product Listing Grid Item - Product Listings will display in a flexible grid that will scale responsively. Each grid item will contain a product image and a product name. Clicking the product will direct the user to the corresponding product detail page. Hover states required for grid items.

3. More Collections CTA- Below each listings grid, just above the footer (depending on the placement of the grid), a call to action banner link will display to potentially direct the user to another collection or product page.

PRODUCT IMGPRODUCT IMG

PRODUCT IMG PRODUCT IMG PRODUCT IMG

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo

inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

SMALL HEADER

LARGE HEADER

GO TO ANOTHER COLLECTION

PRODUCT NAMEPRODUCT NAME

PRODUCT NAME PRODUCT NAME PRODUCT NAME

1 2

3

ONE ROCKWELL, RESPONSIVE WIREFRAMES - GIRARD PERREGAUXDESKTOP - Product Listing Page (PLP) - Product Grid

22 / 22


home page (min-width: 1024px) - alex · pdf filescroll-jacking-on-hugeinc 11 lorem ipsum 12...

Documents