09.1 / Grids & Spacing
Sitewide grid
The main idea behind the grid-based
design, is to have a structured, well
balanced, and solid visual aspect
to the site layout. Sophisticated
layout structures offer more flexibility
and enhance the visual experience
for the user. Grid systems create
a cleaner more organized design,
which users can easily follow the
content of the page.
Grid and spacing
Homepage grid
All interactive areas of the home
screen fall within the center 944
pixels of the grid system. Having the
widgets locked to the center, allows
users on multiple size screens and
interfaces to view the same content.
This gives the site a true sense of
unity no matter what platform the
user is using.
Homepage spacing
Homepage grid
Due to the actions involved with the
home page widgets, the only rules
of the grid they follow are having a
max set width of 944 pixels. In its
active state, the widget will have
a max width of 380 pixels and a
max height of 376 pixels. When
expanded, the user is able to make
selections to personalize their
choices and continue to the next
step in the process. In its collapsed,
inactive state, each widget will have
a max width of 188 pixels and a max
height of 188 pixels.
Homepage tile spacing
Homepage tile spacing
All information containers within
the interior pages of the site will
have a max width of 944 pixels. The
header and footer both will fill the
entire width of 944 pixels. The footer
will vary in height due to which ever
link is activated and content within.
The cart will have a max width of
284 pixels, and height will vary due
to amount of content. The content
and selection area has a max width
of 622 pixels and height will vary
depending on content and where the
user is within the selection process.
5 – 94px wide by 100px tall
4 – 118px wide by 100px tall
3 – 158px wide by 100px tall
2 – 238px wide by 100px tall
1 – 318px wide by 100px tall
Interior page measurements
Interior grid
The header content area of the
interior pages will be set to a max
width off 944 pixels. The logo and
all action items associated with the
header will always be white (#FFFFFF)
in color. The page messaging as well
as the progress bar will be dark blue
(#003057) in color. The image area
of the header will have a max height
of 220 pixels but will vary in width
depending on the screen resolution.
Header spacing
Interior grid
The cart summary will always be
found at the top right of all interior
pages attached and just below the
search widget. The cart will have
a set width of 284 pixels but will
vary in height due to the number
of products selected by the user.
Within the cart, a user will be able
to see a summation of all selections
they have made throughout the
booking process. The user will also
at a quick glance be able to see
a total price for their selections.
Cart spacing
Interior grid
The content area of the page has
a fixed width of 622 pixels but has
a height that will vary depending
on the amount of information and
where the user is in the selection
process. This space is where the
user will make the majority of their
selections in order to proceed in
the booking path.
Content area spacing
Interior grid
The footer in its collapsed state
will have a set width of 1024 pixels
and a set height of 117 pixels.
In its expanded state, the footer
will have a max height of 320 pixels.
In its expanded state, the user
has a number of options on how to
navigate further into the site to gather
needed information on products and
services.
Footer spacing
Interior grid
The flight search is designed to stay
within the active, content area of the
page with a set width of 944 pixels.
The flight summary is 464 pixels wide
by 100 pixels tall. Depending on the
availability, there could be as many as
5 choices for the traveler to choose
from. Each price block is separated
by a 2 pixel gutter. Pricing sizes are:
5 – 94px wide by 100px tall
4 – 118px wide by 100px tall
3 – 158px wide by 100px tall
2 – 238px wide by 100px tall
1 – 318px wide by 100px tall
Flight search
