DNN Dev
  • Home
  • Who We Are
  • Services
    • Design
      • Design Portfolio
    • Development
      • Web Portfolio
    • DotNetNuke Integration
      • DNN Performance and SEO
    • Online Marketing and SEO
    • Systems & Expertise
      • DotNetNuke Patners & DNN MVP
      • Hotcakes eCommerce
      • CIMCloud CRM & eCommerce
  • Products
    • HOA Website System
    • Church Website System
    • Camp Management System
    • Magazine Website System
    • DNN Modules - XmodPro
    • ADAM Digital Asset Management
  • Articles
    • FAQs
  • Contact Us
    • PrivacyPolicy
    • Pay Invoices Online
    • Payment & Shipping Terms

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
  • Final Versions
    Category Page
    Customer Support Page
    Home Page V4
    Product Collection Page
    Static Page
    View Products by Style

6/14/2016 - What's New Kitchen Images (Magento)
  • What's New Kitchen Images
    Esquire
    Oberon
    Wells
    Sea Grass
    What's New Wells
    What's New Sea Grass
    What's New Oberon
    What's new Esquire

3/8/2016 -  Finalized Category and Collection Pages
After working with Laura's designs...(etc.)
  • Category Page
    Category View Rollover View
    Description

  • Collection Page
    Collection View
    Description
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.
  • Product Detail Page
    Default View
    Specifications Expanded
    Installation Expanded
    Other Products In Collection Expanded
    Warranty Expanded

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     
    • Our History   
    • Our Story     
  • Search     
    • Advanced Search     
    • Search Results     
  • Login     
  • System Mgmt
    • User Mgmt
    • System Settings

Previous Rounds + Research

At this point in the development process, initial wireframes are being built to show the structure and layout of certain elements of the site. They do not dictate anything as final but rather show ideas for layout, organization and structure for discussion and refinement.

11/9-11/11 -  Initial Wireframes
The initial set of wireframes for a few key pages has been posted and initial concepts for Home page content is ready for kickoff discussions. Variations in Home page initial round concepts include menu, logo and header differences, different approach for the promotion of departments/sections of the site and footer details.

11/12/2015 -  Initial Home Page Mockups Round 1
  •   Home Page Concept 1 Round 1
    Concept One takes the white and blue colors of Amerock and uses them for structure, menu and devision. Images and menu items in this concept are intended to roll-over or highlight with color and text changes. The main header rotator section would be able to present short video clips (example paypal/skype), promotion messages/stills, and interactive showcase images that allow the user to mosue over items for detail.
  •   Home Page Concept 2 Round 1
    Concept Two uses a neutral gray color set that may also highlight in brighter colors. Color grouping sections of the site to mirror finish colors could present a variety of colors and finishes to accent site elements. A more traditional header rotator/scroller area could make use of lifestyle images and could maintain interest and variety through motion and zoom. Most elements in this concept are designed to slide left/right to present more information.
  •   Home Page Concept 3c Round 1 ( a  b )
    The elements of the Concept Three home page are split into 50/50 blocks of content that can rearrange for mobile devices to present a strong one-column layout. Page animation as the user scrolls down would slide items in from sided and if left on-screen, could continue to rotate/change to keep attention and present new material.

11/11/2015 -  Product Detail Mockups Round 1
Regardless of which style of site theme header/footer, etc, the content in the body of the page can begin review and discussions with these initial Round 1 concepts for the Product Detail page.
  •   Product Detail Concept 1 Round 1
    The initial product detail builds from current store system display options and presents common social options, large/image galery features and tabs for further details to be displayed.
  •   Product Detail Concept 2 Round 1
    The second concept variation for the product detail is a different approach with primary focus on the product main image and lifestyle image. Additional collection products and recommended/related products are also presented in a different layout.

11/12/2015 -  Inspiration Showcase Mockup/Wireframe Round 1
  •   Inspiration Concept 1 Round 1
    The inspiration section of the site is the largest new addition in functionality to the redesigned site. This initial first concept shows the home page feel for this section and shows off a color board / pinterest type presentation for colors, textures and image inspiration.
  •   Inspiration Concept 2 Wireframe
    Similar to the first, the second concept for the Inspiration Showcase is structured as a dashboard for all of the different sections below including inspiration articles, showroom/styles and public posts.

Research Gallery

11/01/15 - During the kickoff of a project, we review both comparative industry websites for style, organization and functionality examples, and document the current state of those similar systems. The Research Gallery shares thumbnails and screenshots for sites and systems that were worth sharing and worth learning from.



Ultra Media Gallery 9
© 2023 The Moore Creative Company
  • Site Map
  • Login
  • Contact Us