A Front End Design Stack

Although most of what I do is business design (designing businesses and processes i.e. being an entrepreneur, on demand), inevitably this involves some front end web design, these are the tools, tips and elements I use for UX.

Design process

Double Diamond design process (I use a variant of this with unlimited ‘diamonds’):
http://www.designcouncil.org.uk/designprocess

The Lean Startup process builds new ventures more efficiently. It has three parts: a business model canvas to frame hypotheses, customer development to get out of the building to test those hypotheses and agile engineering to build minimum viable products.

Value Proposition Design, the sequel to Business Model Generation.

Gantt chart tool:
http://www.teamgantt.com

UX Patterns and Layout

Pattern Libraries:
http://ui-patterns.com/
http://patternry.com/
http://patterntap.com/
http://pttrns.com/
Old fashioned but original:
https://developer.yahoo.com/ypatterns/
Saas UX platform that imports patterns:
http://www.uxpin.com/

UI Kits:
http://www.invisionapp.com/
http://www.invisionapp.com/do

Registration/login:
http://www.90percentofeverything.com/2009/04/16/five-ux-antipatterns-to-avoid-when-designing-log-in-registration-areas

Mobile design patterns:
http://pttrns.com/categories/15-signups

Good 3rd party website framework as reference to base design principles on: http://designmodo.com/startup/?u=672

Multi device layout patterns:
http://www.lukew.com/ff/entry.asp?1514

The Ideal Length of Everything Online:
http://blog.bufferapp.com/the-ideal-length-of-everything-online-according-to-science

Color palettes:
http://www.materialpalette.com/

Iconifying content for previews:
http://codersblock.com/blog/iconifying-content/

Stack elements

Typical Front end stack components:
Marionette — linking templates to views — rendering templates
Backbone — JS MVC
Handlebars — templates
Grunt — automating, flattens and minimizes js.

Prototyping and hacking

Click demo tool (haven’t used this yet but it looks better than what I have):
http://www.invisionapp.com/

HTML/CSS scratchpad:
http://scratchpad.io/qmOymSoAWH

Javascript scratchpad:
http://jsfiddle.net

HTML/CSS

Interactive html5 and css3:
http://webdirections.org/tools/#video

Flat UI version of bootstrap:
http://designmodo.com/flat/

Css style guide:
http://www.davecranwell.com/content/10-tips-better-css
Use id’s for javascript but not for css selectors
Define css selectors as broadly as possible (i.e. not lots of elements) so they can be overidden.
Label classes according to their design not their location on a page — e.g. teaser rather than top-left-column
Use hyphens between components of a class: button-primary (note not primary-button)

CSS, positioning, what you really need to remember:

An absolutely positioned element is positioned relative to the top left corner of first parent element that has a position other than static applied to it. If no parent element up the chain meets that condition the absolutely positioned element is positioned relative to the document window. It doesn’t exist as far as other elements are concerned. Margins don’t collapse on absolute elements.

Relative positioning means just shift it from normal position — like a margin except margin is ignored by other elements. (“position: relative does nothing to that element’s positioning. However any descendant elements withposition: absolute are positioned relative to that element” )

Fixed elements don’t scroll and are relative to browser window. Can’t apply position and float

http://www.vanseodesign.com/css/css-positioning/

The default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

http://css-tricks.com/the-css-box-model/

Text

Nice simple guide to web typography:
http://kaikkonendesign.fi/typography/section/1

Simple Web Typography rules of thumb to give to people who update content on a site:
Use any font for headlines, but for body text these are only a handful that work: Open Sans, Helvetica Neue, Rotis, Times Roman, Proxima Nova.
Leave a bigger gap than you think is necessary around text on buttons etc.
Kern big text by eyeballing it.
Space body text lines 1.5 x font size.
Align left, not justify.