a UX cocktail with a southern twist

What is it about?

Sazerac is a cocktail of documents and files that can help you rapidly (and deliciously) develop a website. Sazerac is not just a straight-up CSS boilerplate, it is a hardcore concoction of the base ingredients: web target analysis, prototype and wireframing, and design creation in Fireworks. Finally, we mix this all together with CSS code generation, and voila, your Sazerac UX cocktail!

Design book

The Sazerac "Design Book" is your web site recipe: client and user analyses, definition of personas and scenarios, creation of task flow, and wireframing.

Design Templates

The Sazerac "Design Templates" are your base ingredients: various Fireworks templates that you can use straight-up or mix and match with your own personal designs. Don't be afraid to experiment.
Do have fun.

CSS Boilerplate

Sazerac's CSS Boilerplate is the final, tasty twist: a collection of totally modifiable CSS files to finalize your design and publish your web, in any device imagineable.
Bottoms up!

Who & why

The mixologist behind Sazerac is me, Alfonso Morcuende. I've worked as a desinger in sunny Spain for 15+ years. I've been involved in dozens of web projects and in all phases of web site creation from initial client analysis to layout and coding for all sorts of devices. I have always been obsessed with finding a comprehensive method to neatly cover alll these initial aspects of a web project. This is exactly what Sazarec does. Sazerac is a collection of the best techniques I have found in years of searching. Everything you need to create a web site is here, all you have to do is shake it up to create your own Sazerac cocktail.

How do I get started

Sazerac is not a solution for every aspect of your web project, but I sincerely believe it offers a good start, no matter what your objectives, nor your design.

To enjoy Sazarac, simply download it and in you'll find everything you need to start mixing your project.

The structure of Sazerac is:

  1. Sazerac Design Book:

    • Card-template.pdf: print this page if you are preparing a card shorting.
    • Sazerac-book.pdf: this docuemnt allows you to collect all the information necessary to jumpstart your project (analysis, application design and prototypes). Read it carefully and use the parts you find most useful.
  2. Sazerac Templates:

    Various PNG files you can open with Fireworks and use to get started creating your own delicious designs

  3. Sazerac CSS Boilerplate:

    Here is the CSS core of Sazerac. Open the file variables.less, modify it with the values you want. Next open sazerac.less and compile the file to get your personalized CSS cocktail.


Have feedback, questions or simply want to chat about UX? Write me at or call me on +34 667 451 601.

Sazerac is my personal vision and I don't expect it to suit everyone's tastes. At least you can't say I didn't try.

The CSS generated wtih Sazerac is based on the most popular and secure Frameworks in the market and have been proven in various devices such as

  • Chrome (Mac/PC)
  • Firefox (Mac/PC)
  • Safari
  • IE8, IE9
  • iPhone
  • iPad
  • Android