Structuring Pages

All pages published on sun.com are required to follow the Sun.com Design System that includes a formailized page layout supported by a thorough library of established components. This page structure has been produced via extensive design efforts, validated through repeated usability testing, and proven via analyticsof improved site performance.

Page Regions

The sun.com layout breaks the page down into many regions that are structurally and visually formalized but still provide you with significant flexibility in creating a user experience specific to your business context and needs. Select a region in the graphic below to learn more.

Header
Page Title & Breadcrumbs
Big Top Banner
TabsSide Nav
Content & Primary Navigation
Header

Includes the global navigation (e.g., Cart, Contact Us, and more) and masthead (with search) used on every sun.com page.

Page Title & Breadcrumbs

Important for establishing both the context of the current page as well as providing a sense of place within the broader site.

Big Top Banner

Vital for graphically establishing tone, branding, and the overall message and pitch of a given page or section.

Tabs

Organize content into meaningful groups across a suite of pages when a topic's content is too extensive for a single page.

Content

For the nuts and bolts of communicating your page's unique message, a wide range of content components are available.

Primary Navigation

Beyond just tabs, smoothly present navigation via tables, search results, link lists, image grids, and hierarchical categories.

Side Nav

Position relevant related resoucres, contact info, calls to action, promotions and more along the side of your page.

Established guidelines and approaches exist for how to choose and utilize elements throughout each sun.com page. Therefore, work with your web design team to best apply these guidelines and structures to your project.