Wireframes & Graphical Mockups for Ecommerce

The strategy comes to life in the visual design, the "bright, tasty candy" that attracts and engages prospective customers across many different devices.  At Beacon, all of our ecommerce websites are built with a responsive design in mind; therefore, multiple wireframes are required to represent each page on each device.  Wireframes are the functional floorplan and framing; while mockups depict the carpet, paint, creative lighting, beautiful molding and other creative features that dress-up the functional items... for the people that it will serve.

Creating a set of wireframes is the first step in moving from the Site Map to a more visual representation that:

  • Allows features and navigation to be clarified visually (from the more technical lingo like “light box”, “impact image”, etc.),

  • Highlights usability and the desired customer flow for online stores in terms of the placement of various features,

  • Aids in identifying & defining technical functionality,

  • Drives early collaboration and feedback to ultimately expedite the development process and minimize cost,

  • Allows time to focus on functionality, content, navigation, organization before worrying about colors, images and creative elements,

  • Ensures the transitioin of features and functionality across devices is graceful, while remaining usable and goal-driven.


Beacon's wireframes include navigation components (global, local, topic, utility), footers, breadcrumbs, filters, widgets and/or related links, as needed.  At this point, the patterns of navigation will begin to emerge as tabs, megamenus, carousels, accordions and other options. 

Once the wireframes have been approved, usually after multiple design-and-review cycles, the graphical mockups can get underway.  This is accomplished by incorporating visual richness through color, photography, typography and iconography that maintains the brand throughout all the various designs.  All the planning, strategy, structuring and content must be carefully & professionally wrapped to draw in your target customers (and get them to use their credit card!).  This is when our client's eyes begin to light up - as the graphical mockups bring all the underlying work together, a step closer to a more finished product.  Interestingly, mockups will help reveal problems that weren't readily apparent in the wireframes (e.g. color clashes, font size problems, etc.).  There's a level of subjectivity with any creative design, the old saying, "the beauty is in the eye of the beholder", but rest-assured, at this point, the functionality required to drive your business needs are in place.  So open and honest collaboration (and patience, to some degree) is a vital factor with this step. 

Free Google Analytics Audit for Ecommerce

* Required

eCommerce GA Info about Beacon