09.1 / Grids & Spacing

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.
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
Available Assets Use the links below to access the available files for the assets referenced on this page.