Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Frameworks for Developers

itsleesimpson
September 27, 2011

Design Frameworks for Developers

The battle between designers and developer is an age old one. As the stereo types go developers often see designers as big kids with a box of crayons and too much 'creative thought time', and designer see developers as boffins trying to solve a problem that never existed.
However no matter how much we wrestle its hard to ignore that what happens in the front-end is just as important as what happens in the back-end when developing a website or application.
With a number of different framework options out there you don't need to be a design genius to get something that looks good (and works) in place quickly. Whether you're developing for a client or developing for yourself, its good to have a solid foundation of front-end markup in place whether it comes down to the design or not.
…and if you do need something a bit more pleasing on the eye then it doesn't need to be about drop shadows, gradients and rounded corners. More often than not a simple, well planed layout does the job.
This talk will aim to give you an overview of resources out in the wild that you can start using straight away:
- Grid Systems & Layouts; quickly creating both fixed and fluid layouts.
- Forms & Buttons; creating usable forms for applications.
- Typography & Font-Face; there's more to life than Arial.
- Responsive; frame works for creating responsive layouts for different devices.
- HTML & CSS Markup; simplest way to keep your front-end clean.
- Templates & Template Systems; the best resources for when you need a more complex design, you really don't need a designer.

itsleesimpson

September 27, 2011
Tweet

Other Decks in Design

Transcript

  1. Why use a design framework? they’re quick they’re easy* they’re

    transferable they’re cross browser friendly *mostly they’re better than nothing Tuesday, 27 September 11
  2. lets talk about... grids & layouts typography forms & buttons

    html markup 101 design short cuts Tuesday, 27 September 11
  3. Grid systems & layouts frameworks 960.gs yui 2: grids css

    1140 css grid marker css 1kb css grid blueprint css Tuesday, 27 September 11
  4. 1140 css grid 12 column layout responsive* ready really good

    browser support image scaling photoshop file *bullshit buzzword alert Tuesday, 27 September 11
  5. atatonic very fast & small well designed vertical rhythm clean

    fonts html5 compatible Tuesday, 27 September 11
  6. typography tips check your line height vertical rhythm is important

    keep styles consistent big fonts a stupid Tuesday, 27 September 11
  7. bootstrap, from twitter awesome browser support full style guide documentation

    3 quick start ‘templates’ js plugins .less compatible 12 column grid layout crazy good typography Tuesday, 27 September 11
  8. bootstrap, from twitter lovely table* layouts inline labels error &

    block messages modals, tooltips & popovers *remember those guys Tuesday, 27 September 11
  9. fuck it! forget everything I just said before this and

    bootstrap Tuesday, 27 September 11