I do relatively little web design but the process has become increasingly complex in recent years. The days of static Photoshop mock-ups are probably over when you consider…
- Responsive Web Design. If you’re using RWD (and you really should unless you’re creating a separate mobile app or website), you’re adapting the layout for the device dimensions. A single mock-up cannot illustrate all eventualities.
- CSS3. Transitions and animations are cheap and easy to implement, but demonstrating them on a static screenshot is not possible.
- Client expectations. Showing a lovingly-crafted mock-up to clients leads to confusion when the final site looks totally different in IE7.
Many designers have switched to browser-based mock-ups. It’s provides a far better representation of the final site and the code can be re-used accordingly. If you’re lucky. If you’re unlucky, you’ve just spent a lot of time and effort developing a prototype which the client hates.
Have you considered a more low-tech approach for the initial design stages? Pen and paper served us well for a millennium or two so why not draw the initial mock-ups? Admittedly, few of us are great artists and panic when faced with a blank piece of paper. But it need not be blank.
sneakpeekit provide a range of attractive, purpose-built sketch sheets for different uses including:
- desktop browsers
- smart phones and
- grids with 1140px, 960px, 768px, 640px, 480px and 320px guides.
The packs contain various templates in PDF and JPG format. There are also Photoshop PSD grid templates should you want to scan your sketch and convert it to a graphical mock-up.
Did I mention that the sketchsheets are free to download and print? All sneakpeekit.com ask is attribution and a little promotion.
I like the sneakpeekit sketchsheets. They’re attractive, useful and provide a great starting point for design work. Carry a few around — they’ll give the impression you’re a web professional. I wish I had them years ago!…
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Your First Year in Code
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Jump Start Git, 2nd Edition