for the ‘design’ stuff

The 2nd half of design

People say football is a game of two halves. In the same way, so is design. The first half where you understand the problems and test methods to solve these issues. I’ll pick up this in a separate blog post. As for this post (the 2nd half), it’s all about the logic, math and patterns.

This is the area developers and designers have a lot in common, which will then get implementing through the markup and styles (HTML and CSS).

This stage’s core is all about re-using, discovering logical visual theories and patterns, then applying them through mathematics and implementation. There’s a few other parts of the game going alongside, but lets focus on this area of it. This sometimes gets applied to paper, stays in people’s heads or through word of mouth. Rarely does it go into the stylesheet as a reminder or guidance or how it gets there. On occasions it goes into a pattern library – which needs pulls these workings out into a slipstream.

We naturally don’t keep the workings out of this in the implementation area. Yet if you look at any well written program, you’ll get to see clear workings out of the programs implementation within the program itself. Keeping this knowledge in the program itself will allow it to be easily updated, reused, applied else where with modifications by yourself and others in months and years to come.

So enter SASS. For those of you that don’t know what it is, it’s a better way of writing CSS – enabling nested rules, variables, mixins, selector inheritance and more.

The real game changer for us is the combination of being able to do calculations (of numbers and variables) and variables (giving a number or a calculation a name).

The very thought of this should say it all… you can now actually say in your code what the designer is thinking. Here’s why this is awesome.

div { width: 960px;  }

div#welcome {
  width: 910px;
  padding: 10px 25px;
  background-color: #f3f3f3;
  }

div#my-talk  {
  width: 410px;
  padding: 10px  425px 10px 25px;
  background: #f3f3f3 url(me-talking-to-someone.jpg) right center;
  }

Can you understand why both those two are different quickly? Now if you were to just commend some of the differences…

/* setting all div widths... there really wasn't a need for this yet? */
div { width: 960px;  }

/* So the welcome div has no image in it... but I want all text to be padded
on the left and right and to have a bg colour */
div#welcome {
width: 910px;
padding: 10px 25px;
background-color: #f3f3f3;
}

/* Now we're cooking!  Added in a nice background image of me talking... the padding is to push the right side in and the width is adjusted accordingly */
div#my-talk  {
width: 410px;
padding: 10px  425px 10px 25px;
background: #f3f3f3 url(me-talking-to-someone.jpg) right center; }

The above code is a lot more useful, for understanding it – but not for editing it quickly. If the differences were explained in equations and variables, you would get the following

$paddingSides = 25px
$largeImageSize = 425px
$divDefaultWidth = 960px
$widthDivHasContent = $divDefaultWidth - $paddingSides
$widthDivHasContentHasLargeImage = $widthDivHasContent - $largeImageSize

div {
  width: $divDefaultWidth

  #welcome {
    width: $widthDivHasContent
    padding: 10px $paddingSides
    background-color: #f3f3f3
  }
  #my-talk {
    width: $widthDivHasContentHasLargeImage
    padding: 10px  $largeImageSize 10px $paddingSides
    background: #f3f3f3 url(me-talking-to-someone.jpg) right center
  }
}

Because of how we’ve now separated the workings out (design calculations) from the implementations. It makes it easy to see any design problems and fix them.