Design & Layout

The right visual presentation of your content and products is crucial in conveying the right experience. The customer journey should be natural, consistent, and attractive, with a wow factor. To achieve this in the Visual eCommerce platform, a standardized design system is used. As UX-export Proud Nerds ensures the platform provides a streamlined user interface with logical clickflow. By default the layout consists of three main elements. The platform makes use of several template layouts which can have various implementations of the components shown below. For instance, there’s a default layout, a full screen layout (configurator) and checkout layout.

Section	Description
Header	Navigation, login, branding, languages, etc
Content area	Editorial Widget
Footer	Copyright, content, language, website, etc

---

Header

Elements:

• Top Header

• Logo

• Navigation Menu

• Company Selection (when applicable)

• Saved Designs

• User Login

• Cart

• Store Selector (when applicable)

The header becomes sticky when scrolling and not on top of the page. The top header area is only shown on desktop layout on the pages and homepage layout. It is not shown in the checkout and the configurator which have designated layouts.

Desktop layout.

Example of the header

Mobile layout.

Example of the mobile header

Content Area

• Boxed with certain areas full width

• Content can only be filled with editorial widgets

Content area’s are maintained via Wordpress in respective Pages and Blocks. See editorial widgets for more input.

Footer

Elements:

• Column Content Area

• Link Buttons

• Country / Website / Language selection

• Copyright Message

Example of a footer design on desktop

Example of a footer design on mobile