Sazerac

a UX cocktail with a southern twist

Design Book

All the documents you will find here have been created in Illustrator and are completely free to open and modify.

Card Template

Print this document as many times as needed, add your content details to the printed cards and then use them as a guide for your web site.

Design Book

This document has three parts:

  1. Analysis

    Before beginning any web project, it is essential to understand your objectives and targeted users. In this part of Sazarac´s Design Book, you will find the questions you need to ask in order to clarify those objectives and users.

    Most of these questions are based on those found in this fantastic post by Steve 'Doc' Baty "Questions to ask for any UX project" Other are inspired by the beautiful tome, "Design Discovery"

  2. Application Design

    Use these pages to create your Personas, Scenarios & Task Flows.

  3. Prototype

    Here are the base templates where you can sketch out your wireframes. Remember Sazerac works with a 16-column grid.

Design Templates

The templates here are all based on Fireworks files and are ready for you to modify according to your tastes. Files included are:

  1. Grid Columns

    The same structure you used in your wireframe, divided into layers and totally editable.

  2. Boilerplate Elements

    The default elements in our Boilerplate CSS are drawn in Fireworks and totally modifiable.

Boilerplate CSS

Sazerac is not a FrameWork CSS, instead it is mix of many good ideas and existing code in the most important FrameWorks out there.

Sazerac uses LESS and emulates the work of Bootstrap.

Inside the file "Sazerac CSS Boilerplate" you will find all the LESS files that make up the Sazerac boilerplate. The most important ones are "variables.less" which contains all the defined variables that we used to personalize the Sazerac boilerplate, from the color of links to the number of columns in our grid.

Once you've edited "variables.less" and modified its values, you can open the file called "sazerac.less" where the rest of the less files are linked. You can delete or add new files depending on the flavor of your own code.

When you compile your edits with "sazerac.less" you will have your new Sazerac cocktail, mixed perfectly according to your taste.

In the following links you will find more information about the options you have using the Sazerac Boilerplate CSS

  1. Grid
  2. Responsive
  3. Typography
  4. Buttons
  5. Forms
  6. Tables
  7. Images