5 things that help craft products at Square (Beau Smith at Design+Startup)

This is the fourth post in this series summarizing the Design+Startup event First Round put on with IDEO in San Francisco this summer. If you missed it, you should check out the talks from Tom Hulme, Shawn Borsky and Josh Brewer that I posted previously.

In this Quick Fire talk, Beau Smith, UX designer and developer at First Round Portfolio company Square describes the tools that get heavy use from his team and keep product shipping at Square…By making a meaningful investment in process and tools, Square drives consistency across the product and gets more leverage out of each design effort.

1. Always create a style guide.

The style guide should be a web page with examples of every different piece of UI (links, buttons, forms etc.)

Square uses a lot of test driven development, but there isn’t really a test driven development way to check look and feel so they use their style guide site to maintain consistency

At any given time, Square front end developers can check the style guide elements and identify anything that is broken

2. Use Twitter Bootstrap

If you don’t have a your own style guide, Twitter Bootstrap is a great place to start because it provides the generic use case elements. Bootstrap uses common grids, tables and buttons so that you don’t have to develop your own from scratch each time.

3. Leverage SASS / Compass

CSS is not really a programming language but SASS allows you to embed logic into your style sheets. For example, padding can be represented algebraically as a combination of values from other page elements so you do not loose the thinking behind the design decision as you add elements to a page or build new pages

CSS3 autocompletion (such as CSS for rounded corners) is really efficient

Sprites — delightfully simple with Compass — simplify the structure of the user interface and increase speed. Having fewer things to download, this is especially important for mobile UI.

For more from Beau on SASS, please check this out: bit.ly/SASS-why

4. Keep X-Scope within reach at all times

This thing is a Swiss Army knife, 8 simple tools in one. It measure dimensions, widths and height for pixel perfect design, identifies colors of on screen elements and can make you a 1/2 caf-no-foam-2 splenda latte.

5. Master your code editor

You’ll be using your code editor a lot so learn all the shortcuts and advanced techniques. Editors are powerful tools and can make you much faster as a product creator — if you really force yourself to learn how to use all the functionality packed in the software package you are using.