We're on GitHub

At Lookout we use a lot of open source software throughout engineering.

Being hackers at heart, we also have a lot of gems, libraries, scripts and other things that we want to share with the world. To that end you can now find us on GitHub.

We’re still in the process of moving more code onto this public facing GitHub account, so don’t let some of the current sparseness disappoint you too much.

- R. Tyler Croy

posted in: · ·

This Week in Design

We as a company are passionate about good design, I’m dedicating a portion of This Week in Design updates to talk about concepts in design and usability that I’ve found helpful day-to-day. This week I’ll go over three fundamentals that are very straight forward, but that I think are key in driving great design.

1. “95% of Design is Typography”

Type is not typically the first consideration when thinking of UI, but the vast majority of interfaces and designs still communicate with people via written language. In practice typography is not about choosing fonts, but about allowing people to focus on and digest your message.

Use big fonts. Big text will render you incapable of cramming too much information in your design. Web designers most recently recommend 16px for website body text, Guy Kawasaki recommends 30px for presentation slides. Which initially seems way too big, and that brings us to…

Embrace white space. Nielson says the basic rule is 10-15 words per line. Much more and you cause fatigue going across the screen, much less and you cause eye skittering from line to line. White space directs spacial relation, defines hierarchy, and makes visual impact. White space doesn’t have to be white.

Manage focus with contrast. When creating info-heavy sites or mobile interfaces where scannability is a critical aspect of your design, direct focus with high contrast between important and unimportant elements. Sidenote- never use pure black on pure white for digital screens. #111 is the closest black that won’t flicker.

2. Remember proportions

Many designers use pre-prescribed grids for determining the sizes and width of interfaces, because often when the proportion and balance click together the design just “feels right.” There are quite a few wireframe / css templates 960.gs out there with grid design, but the concept itself is simple to store to your brain- it’s about giving each content block room to breath, and managing cognitive load as the eyes scan down the page. This is the Rule of Thirds grid for web design.

Another aspect of proportion is visual balance, the perceived amount of weight and stability between the upper / lower, left / right of the screen. Apple’s site achieves a good deal of visual harmony by having the left and right sides of the page be exact symmetrical mirror images.

3. Use effective colors

Use warm color (red, orange, gold) to direct attention. Warm colors visually expand outward (glow), cold colors visually contract. Red is said to be the most effective hue to incite action, a concept especially noticeable around election time when virtually every candidate campaign site is composed of red Donate buttons on a cold blue backdrop. Use blue for links, usability research says people will find them faster.

Don’t be afraid of using color as a non-designer. Create a palette of 3-5 colors and be consistent. You don’t need to be into the touchy-feeling stuff about what emotions individual colors evoke or understand ‘tetradic complementary’ means. There are people out there who are really into color theory who have created some great toolsand palettes. And there is always the easy, modern, fail-safe design guideline: put white content on black (or dark content on white), add one color accent, make it helvetica, profit.

Go re-skin your old site finally and win some design awards!

- Sophie Xie

posted in: · ·