Introduction

The wireframes described here contain interaction designs for storefront pages. Elements and functionality of the Intershop Progressive Web App are displayed and explained. Based on this documentation new features can be designed and developed.

View and Edit

The Wireframes - Intershop PWA 2.2.0#wireframes are provided in zip files at the bottom of this document. Each of the zip files contains:

• A clickable prototype. Open HTML/index.html to see the start page. From there you can navigate directly to other pages via the sitemap.
• The editable *.rp Axure file.

Interactive Prototype

There are features on some pages which are interactive. Use the  icon next to the Axure logo and select the option Show Hotspots.

Responsive Design

The design is responsive in the same way as the starter store is.

The breakpoints are:

• Phone (xs): less than 768px
• Tablet (sm): 768px and up
• Medium Desktop (md): 992px and up
• Large Desktop (lg): 1200px and up (only included in the Checkout documents; in all other areas the layout is the same as in the Medium Desktop view, only the page margin increases).

To see the different layouts, you can resize your browser, or you can use the drop-down menu to switch between the views.

Page Notes

The prototype is described with page notes and widget notes. Use the icon to show the documentation.

See the Axure documentation for more information on how to interact with the prototype.

 Widget Style Manager

The used default widgets (e.g., headings, paragraphs, buttons, etc) have a predefined set of property styles. If you change one of the properties in the widget style, the change will be applied to all pages using that widget style. You can manage the widget styles by clicking the Widget Style Manager icon next to the widget style drop-down menu in the Style pane or the style toolbar. More information about styling widgets can be found in the Axure documentation.

Feedback

Any feedback is appreciated.

Write an e-mail to UserExperience2@intershop.de

Wireframes