Amerock Public Concepts for Review
These jpg image proofs are large, when viewing in a browser window, remember to click to zoom in 100% on the image
Detailed Mockups
Following the initial set of wireframes, we move toward full detail mockups of sections and critical pages of the site. The mockups and concepts are presented in the list at the top of the page and approved and more completed mockups are added to the site outline below. Older mockups and concepts are moved to the Previous Rounds/Research section at the bottom of the page.
- 6/14/2016 - From Client Mockups
-
- 6/14/2016 - What's New Kitchen Images (Magento)
-
- 3/8/2016 - Finalized Category and Collection Pages
- After working with Laura's designs...(etc.)
-
- 3/1/2016 - Product Detail Mockups
- Working with Laura's mockups as outline for the majority of the layout and design direction for the page, we made a few minor font, size and placement adjustments to the mockups as well as including them within the site theme/style for header, footer, etc. We'll want to review the mockups further to discuss elements and placement of items to further organize and preserve design open space. Additionally, we'll want to discuss the incorporation of the received color sets that might be used to color code departments or sections.
-
-
Product Detail Page
Default View
(Color Set
blue /
gray /
teal
)
These image mockups take the proposed layout and suggest a few elements that we can discuss as options. Note the change from border drop-shadows or glow, horizontal image scroll vs introducting a vertical, less prominant breadcrumbs, etc. for discussion.
Additional Arrangement B
Much of the intended direction for the site design regaring sections or elements is for them to have large margin, gutter and open space. Some of the Home Page through Category Section designs help set the style for this space... to help rearrange and work with the two-column elements on the Product Detail page we have mocked up an alternate arrangement to consider as well. This contains the same page elements and continues the discussion from the first set. Let's discuss the elements within the layout and determine whether additional rounds of refinement are worth exploring on the product detail page.
- 2/29/2016 - Laura's Product Detail Mockups
- To help aid the discussions and speed the rounds of revisions and further discussions internally regarding the product detail page, Laura has worked to produce mockups that include elements of size/position, accordion expand/collapse sections, and other elements from the competitor and inspiration sites that we've all been discussing. The following are the mockups that were shared on Monday.
In addition to text content and additional resources, some of the implied sections/elements (for example, the the new element of text "other items / sizes in collection,") will need to be discussed and added to development tasks.
-
- 2/16/2016 - Collection / Category Mockups
- While the home page and main product detail pages have been outlined and discussed,
some of the other sections are now receiving attention and design concepts. The following mockups include modified design directions that began
with the KBIZ amerock.com Magento site updates and direction changes that have been discussed.
-
-
Category Page
Category Page
(mouseover
a /
b
)
Category Page - Horizontal Scroll
(mouseover
a
)
The collection page design includes a large area for lifestyle images and collection images at the top / main section of the page. Each approach
presents the list of collections with a large image and title/information for each collection to drill in to. Each concept shows the ability to mouse-over
the collection image for further details.
The first concept presents a vertical page
that allows for white-space around each collection on the page. The horizontal-scroll concept presents the same information yet in a style that allows
for the page to show all collections in one space without page scrolling. On a tablet or touch-device, the horizontal scroll would be intuitive and on a desktop
we would enforce "scroll-wheel horizontal scroll"
-
Collection Detail
The collection detail presents a large lifestyle image area at the top of the page and ability to drill-down / select groups of product type, size and finish within the page.
Each filter step would adjust the view of elements in the body of the page. Within the body, items would be grouped as best as possible by type.
-
Product Detail Update
This updated mockup for the Product Detail includes notes and revisions after the KBIZ related designs, updates from the round-one concept and notes provided by Laura
for next mockups.
Amerock.com
- Home (mockups)
- Inspiration Showcase
wireframe
- Lifestyle Showroom
- Design Council
- Articles/Blog
- Color Boards
- Share Your Stories
- News
wireframe
- Products
- Product Detail
(mockups)
- Edit Product
- My Account
- Support
- Catalogs
- FAQs
- Warranty Information
- Use and Care
- Installation Information
- About Us
- Search
- Advanced Search
- Search Results
- Login
- System Mgmt
- User Mgmt
- System Settings