Desert Island Designs

Presentation given to students and staff from the Interactive Media Design degree course at Northumbria University, February 2014.

Subverting the Desert Island Discs format, I chose 8 design-related topics that I hoped would inspire and prove useful to the students.

Probably a bit weird without the chat…

Links in presentation

Test responsive design layouts easily with the Web Developer toolbar

Recently, I’ve been catching up with the band wagon and getting to grips with responsive design layouts. As a user interface designer, it brings a whole new level of control to the UI which is rather marvellous.

It’s really not hard to get to grips with and I found Web Designer Wall’s post Responsive Design in 3 Steps covered all I needed to know to get cracking.

Testing your responsive design layouts

rezize menu optionI use Chris Pederick’s Web Developer Toolbar and it has a resize window option that I’ve used often for testing different screen sizes. So, I figured I’d add ones for mobile devices. Chris is way ahead of me, because under the Resize menu he’s added View Responsive Layouts which does all the hard work for you – genius!

Looking at one of my design services pages –  User experience (UX), Prototyping & Wireframing – I can see how it renders in different device sizes and orientations on one screen – very useful. Thanks to Chris. Now I just need to make it render well across those devices!

Progressively enhanced UI

Although this website was originally designed (about 4 years ago) with traditional desktops in mind, it has not been very difficult to apply mobile-first thinking by focussing on progressive enhancement techniques – fancier devices get served fancier stuff. There is much more I could do here to serve fewer files to mobile devices, I am just applying the visual principles.

Mobile portrait (320×480)

Mobile portrait (320x480)

  • Linearised content
  • Default fonts
  • Small header that scrolls with the content
  • Images in the main content area are not floated

Mobile landscape (480×320)

Mobile landscape (480x320)

  • as above +
  • Images in content area are floated to allow text to run round them

Small tablet portrait (600×800)

Small tablet portrait (600x800)

  • as above +
  • Using fancy fonts in the header
  • Header becomes a fixed position so content scrolls underneath
  • Increased margin size
  • Increased font-size

Small tablet landscape (800×600)

Small tablet landscape (800x600)

  • as above +
  • Show full height header
  • Increase the size of the main site title
  • Show full drop down navigation in header

Tablet portrait (768×1024)

Tablet portrait (768x1024)

  • as above
  • Sidebar elements are shown in the footer

Tablet landscape (1024×768)

Tablet landscape (1024x768)

  • as above +
  • Sidebar elements flow down the right hand side of the main content

iPhone Voice Memos Redesign

Inspired by the post When Visual Style Gets In The Way, I sat down for an hour and worked on these designs for the iPhone’s Voice Memo app.

I wanted to increase the user feedback, make the interface easier to understand and ditch the 50’s microphone. I like labels on my icons and wanted to exploit the crisp display on the device.

iPhone Voice Memos monitoring audio levels

Monitoring audio levels - the default state on opening the app

iPhone Voice Memos - recording

Recording a voice memo

Do you think it’s an improvement?

Design and the Elastic Mind @ MoMA, New York

I was lucky enough to visit this exhibition while in New York a couple of weeks ago. I took a few stills and videos of interactive works that particularly caught my eye. Most of this is documented on the Design and the Elastic Mind website, but here are a couple of extra views…

Below is a talk given by the MOMA design curator Paola Antonelli, who gives an overview of the main themes of the exhibition and a closer look at some of the works it encompasses.


Continue reading

Tips on writing a web design brief

If you are thinking about commissioning work on your existing or new website, you’re going to want to write a brief to give to your developer/designer at some point so they know what you want. Here are some topics to get you thinking in the right direction and help you do just that.

What do you need a website for?

It may sound like a daft question, but it is at the top of the list for good reason. Even if you have an existing website, ask yourself the same question again. What do you need it to do for you? What are your short and long-term business goals? Do you need to raise awareness of your product? Increase sales by widening your audience? Get your brand message across to a new audience? Once you’ve really know what it needs to do, we can start to think about how we can achieve it… This question will help us define what the key design and functionality needs to be.

Continue reading

Scripting Photoshop

If you’re involved in web production, it’s likely that at some point you need to generate a lot of graphic text – page headers are often graphics.

If you do this kind of work, it’s well worth investing some time to learn how to script Photoshop – you’ll save plenty of time and reduce your chances of RSI.

We scripted Photoshop to create all the graphic titles on the Moore At Kew website, pulling all the text from an external text file. – Photoshop Scripting