Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 81 Next »

Overview

The Aspenware Design Team will create a theme for the resort and provide opportunity for feedback. The resort may submit change requests, which will be evaluated and implemented at Aspenware's discretion, provided they are clear and can be modified.

In order for Aspenware to begin work on the theme, the Resort Marketing Team will need to provide Aspenware with their choices for the following theme decisions as well as the required marketing collateral outlined in this document.

NOTE ON IMAGES:

The standard minimum required sizes for resort-provided images are listed below in-line with each image requested. Images must be below 400k in size to maximize site load times and it is recommended to provide image files as close to 300k as possible. It is recommended that the resort crops the images prior to sharing with Aspenware, since quality will be affected if Aspenware needs to stretch them. If the resort is unable to modify the image, Aspenware will crop the image. In order to reduce load times, Aspenware will optimize images to balance file size with quality.

Additionally, the more complex and intricate the image provided, the more noticeable the compression will be. As such, Aspenware recommends providing images that are relatively simple and do not contain large areas of complicated textures, e.g., detailed trees.

HINT: For a free tool for reducing image sizing go to https://tinypng.com. It can often be used with little to no noticeable degradation in quality to reduce an image size.

Provide Brand Assets

  1. Asset

Spec Requirements

Image Example

#1 Header Logo

SVG file recommended. If using other file types:

  • 400 x 400px (Minimum) for PNG file

  • Max file size of 400kb

image-20250113-154903.pngUntitled design (2).svg

#2 Sidebar Logo

SVG file recommended. If using other file types:

  • 150 x 150px (Minimum) for PNG file

  • Max file size of 400kb

image-20250113-154713.pngPEAK MOUNTAIN RESORT (6).svg

#3 Favicons

  • File must be in .png or .svg

  • Provide favicons for each size:

    • 16x16, 32x32, 48x48

Note: AW can generate the favicon file if a square svg logo is provided.

image-20250113-155056.pngPEAK MOUNTAIN RESORT (6).svg

#4 Loader “Spinner” Image

SVG file recommended. If using other file types:

  • 150 x 150px

  • Max file size of 400kb

image-20250113-155207.pngPEAK MOUNTAIN RESORT (13).svg

#5 (Optional) Checkout Logo

SVG file recommended. If using other file types:

  • 50-100px tall

  • Max file size of 400kb

Note: AW can utilize the header logo provided, if a different logo is desired please provide.

image-20250113-155529.pngPEAK MOUNTAIN RESORT (22).svg

#6 Font(s)

AW supports a maximum of two fonts. One is assigned to the Primary Font Setting and one to the Secondary Font Setting. These will automatically apply to pre-defined areas of the store.

Provide either:

A) AW Hosted Font Requirements

  • The following font files are supported: TTF, OTF, WOFF, WOFF2

B) Google Font Requirements

  • Must be accessible from the internet, provide the hosted URL

n/a

#7 Hero Image (PLP)

Provide hero image that matches the size selected in #17.

Large

  • 1920 x 550px

Medium

  • 1920 x 400

Small

  • 1920 x 285

Note: The hero image is overlayed behind the header and scales differently based on device sizes; therefore different areas of the image will be non-visible. The focal point of the image should be centered vertically.

image-20250113-160141.png

image-20250113-160027.png

image-20250113-160327.png

Untitled (1920 x 550 px).png

#8 Hero Image (My Account)

  • JPEG, JPG, or PNG (recommended)

  • 1920 x 400px

  • Max file size of 400kb

image-20250113-160658.pngUntitled design (31).png

#9 Checkout Background Image

  • JPEG, JPG, or PNG (recommended)

  • 1920 x 1080px

  • Max file size of 400kb

Note: Checkout’s background image has a darkened overlay auto-applied to ensure text is legible. This cannot be overridden.

image-20250113-161120.pngUntitled design (29).png

Provide Theme Colors

Decision

Spec Requirements

Image Example

#10 Brand Colors

Provide the following three theme colors from your brand in HEX or RGB.

These three colors will automatically be applied to the store’s various elements.

When applicable, hover colors will override the original color’s state on hover. If a resort's brand does not include a predefined hover color, AW recommends applying a 10%-20% contrast shift.

  • Primary Color

  • Primary Hover Color

  • Secondary Color

  • Secondary Hover Color

  • Tertiary Color

  • Tertiary Hover Color

n/a

#11 Header Background

HEX or RGB color

SCR-20250109-otvt2.png

#12 Header Text Color

HEX or RGB color

SCR-20250109-otvt3.png

#13 Cart Badge Color

HEX or RGB color

SCR-20250109-otvt4.png

#14 Sidebar Banner Color

HEX or RGB color

SCR-20250109-opyi2.png

#15 Checkout Header Color

HEX or RGB color

SCR-20250109-oqfy2.jpeg

#16 Checkout Footer Color

HEX or RGB color

SCR-20250109-oqfy3.jpeg

Provide Display Options

Decision

Options

Image Example

#17 Hero Height

Large

550px

Medium

400px

Small

285px

Note: AW Recommends utilizing the Small option to optimize visibility of PLP Product Cards.

Large

Untitled (1920 x 550 px).png

Medium

Untitled (1920 x 550 px) (1920 x 400 px).png

Small

Untitled (1920 x 550 px) (1920 x 400 px) (1920 x 285 px).png

#18 Hero Display Mechanism

Dynamic

Hero changes randomly to a product card image from the active category.

Static

Hero is a static image and will not change based on different product cards in the active category.

Note: AW recommends using static images, as variations in product images often lead to inconsistent and undesirable appearances across various user devices.

Dynamic

SCR-20250109-otym.png

Static

SCR-20250109-optw.png

#19 Product Card Display

Option A

  • Price always displayed left area

  • Shop Now button

  • Meta text right of price

  • Lines separate the card

    • Line under Product Name

    • Line under Short Description

  • Left-aligned product title

  • Hard edges

  • No drop shadow

card-option-a (1).png

Option B

  • Price always displayed bottom right

  • No Shop Now button

  • Meta text left of price

  • No separating lines

  • Left aligned product title

  • Hard edges

  • Drop shadow

card-option-b (1).png

Option C

  • No price

  • Shop Now Button

  • No Meta Text

  • No separating lines

  • Left aligned product title

  • Round edges

  • Drop shadow

card-option-c (1).png

Option D

  • No Price

  • No Shop Now button

  • Centered Meta text

  • No separating lines

  • Centered product title

  • Round edges

  • No Drop Shadow

card-option-d (1).png

#20 Sub-Category Display

Tab Option A

  • Capital-cased

  • Active sub-category text is colored and underlined

image-20231025-194914 (1).png

Tab Option B

  • Uppercase forced

  • Active sub-category text is colored and underlined

image-20231025-194940 (1).png

Tab Option C

  • Capital-cased

  • Active sub-category text is highlighted in a box

image-20231025-195002 (1).png

Tab Option D

  • Uppercase forced

  • Active sub-category text is highlighted in a box

image-20231025-195015 (1).png

#21 (Optional) Category Underline Color

Categories in the header and side navigation can optionally display an underline:

  • Active: The underline appears on the currently active category.

  • Hover: The underline is displayed when hovering over a category.

Both of these options are independent of one another.

Footer Decisions

Option 1: Advanced Footer

Provide a static HTML footer that can be uploaded to your site. This method requires advanced HTML and CSS capabilities, see attachment for configuration requirements.

Custom Footer Development Guide.pdf

Option 2: Simple Footer (Recommended)

Provide the following footer details and AW can setup a simple footer that can be edited as an HTML widget.

Variable

Example Text

Image Examples

#22 Contact Information

Pass Office: 720-123-4567,

Reservations: example@resort.com,

123 Mountain Road, Denver CO, 80205

SCR-20250110-jvuk.png

SCR-20250110-jvfp.png

#23 Footer background color

Hex or RGB

Note: The logo from the Header will be used in the footer and columns are restricted to the default design displayed in the example. But the footer can be edited and further customized through HTML by any resort staff with HTML & CSS knowledge.

  • No labels