web design

Making Web Wireframes easier with Visio – The Pixel Dimensions Shape

Matt Simner Creative Design, Miscellaneous, Tools, Usability , , ,

Many people use Adobe Illustrator or Photoshop for designing Web layouts, but a lot of companies use Visio – especially for higer level ‘wireframes’.  One of Visio’s problems (<= 2003 anyway) is that it doesn’t support pixel units.  This means you’ll always be approximating the sizes of content areas and page elements, making the developer’s job more difficult.

Enter ‘Visio Guy’, and the Pixel Unit Line Shape.  This is just a great addition for anyone using Visio.  Before you know it you’ll be laying out pixel perfect shapes that the developers will then give you great pleasure in declaring ‘this won’t work in IE6!’ 🙂 

A thing to note with Visio as well: If you’re working with pretty small dimensions then the only way to get really precise is to zoom right in (like 500%), otherwise the whole ‘snap/glue’ thing will kick in based on the page units (probably mm), regardless of whether you’ve switched snap/glue off.

Using CSS Frameworks to do the heavy layout lifting

Matt Simner Creative Design, Web , , , ,

CSS is great, until you’re faced with a deadline and a broken IE6 layout.  You get the cowboy gear out and – ‘Welcome to Hacksville!’  


There’s been a growing trend of CSS frameworks recently as people are obviously crying out for ‘something’ to save them from the madness. 


I’m trying out the 960 grid system at the moment, as it’s not too prescriptive and gives me the flexibility I need.


There’s a great review of the best frameworks on adactio.  I’m sure there’s one to suit almost every need.  Remember they’re just the starting point if you’re doing serious design, but they’ll take most of the pain away, because the heavy ‘hack’ lifting is done for you…   


Also – more on Wikipedia (Update: 17/09) – BlueTrip’s the way to go – best of several worlds – nice.