or in their words: 'Sass makes CSS fun again') ( SASS is an way of writing CSS at a slightly higher abstraction layer and allow variables for repeated values etc. You could also use Visual Studio with the awesome (and free) Web Workbench for the SASS compilation. I am using SASS to make writing the CSS a bit easier using the SASS command line. Initially I tried using markup (using Pandoc) but found it wasn't adding much value, so switched to just writing the HTML manually. Once this is done we can add extra content for non-mobile/desktop resolutions. The value of starting with the most basic, most simple, linear design is that it forces us to concentrate on the most 'accessible', mobile-friendly version first. By using CSS 3 media queries I can experiment with mobile and tablet wireframes early on to get a feel for the final implementation in the actual target technology (HTML & CSS) rather than having to translate from a bitmap (Photoshop, etc.) at a later date.Īs a starting point and with 'mobile first' and 'progressive enhancement' in mind, the first wireframe is a simple linear design where the majority of content flows from top to bottom. The advantage of this is that I can iterate really quickly through designs and actually view the wireframes in the browser or mobile emulator. This means actually creating the wireframes using HTML and CSS. I could use an image editor (Photoshop, Inkscape, Paint.Net, etc) to create some wireframes and decide what content to put in them.Īn alternative is to do in-browser design. This step is all about deciding what content will go where, and more importantly what content will be removed when viewed on mobile or tablet devices. Redesigning DontCodeTired.Com (Part 2) - Designing with Personality

How to use inkscape to wireframe