Category Archives: design

Design is a form of problem solving

Design is thinking made visual(*), it is problem solving. But this process takes time. Things cannot be ‘designed’ overnight. That is styling. Unfortunately many don’t know the difference.

It takes a real understanding of the problem to provide the right solution. This means designers need to be involved at the very early stages of a project. Thinking that a designer can come along at the end and ‘design’ it basically means that they are looking for someone to simply style their solution.

Design is not simply styling.

If this happens, and if you willfully let it happen then you are harming the profession you work in. To get away from this situation, you need to educate those you work with.

Designers should be involved at the very beginning. This avoids a ‘chinese whispers’ effect of others interpreting the requests a certain way and relaying them. It is best to be with the client or stakeholder to understand their requests firsthand. Afterwards, write a brief and have all parties agree to it. This will be the brief that the design solution is marked against.

This is the start of getting away from simply styling other peoples’ solutions.

A designer’s “Bucket List”

For a while there have been a couple of things in my designer’s “Bucket List”. Things I would absolutely love to work on. They include:

  • Skateboard deck
  • Racing car livery
  • Movie poster
  • CD cover
  • Football kit
  • Book cover (OK, so I have done something from the list. Here it is)

So what is stopping me. Well, nothing. Since having this list I haven’t actually tried my hand at any of these.

I think this need to design physical products comes from my tendency to appreciate physical items more than digital ones. Yes, interacting with websites or apps is great (and I love the fact that thousands of people are able to see your work), but seeing a printed business card or poster to me has always given me more joy than the launch of a website.

So I am going to work on producing some concepts just for fun, but maybe with a real product in mind. 2013 is a year for acting on the things I’ve been putting off, so blogging about this now seems like the perfect catalyst, because what is a bucket list for if you don’t act on it.

Do you have a design bucket list? If you do I’d love to hear about them. Leave a comment below or tweet me @paulrandall.

Always show your working out

Remember hearing your maths teacher say that?

There’s a good reason for it; It gives you the opportunity to demonstrate how you solved the problem. You would be marked on the working out, and not just the final answer.

It’s the same with design work, if you can’t describe how (and more importantly why) things are done a particular way, then the client should (quite rightly) think of it as just a guess. Continue reading

The antidote to over-stimulation

Whilst reading, the quote antidote to overwhelm and over-stimulation struck a cord with me. Quite a lot of home pages try to do everything, but by doing this they overwhelm the visitor. The absolute antithesis of that has to be the new WorkFu site, and to say I was impressed with their new homepage was an understatement:

I was blown away. I’d just never seen anything like it on a homepage recently.

Again, I think this comes back to confidence in design. Knowing that you’ll be able to convey the desired message in such a simple way without additional clutter Continue reading

Using SVG Icons

With high-PPI devices such as the iPhone 4 and the new iPad, great resolution is changing how we think of the pixel. Increased resolution means that traditional pixel-based icons won’t be able to take advantage of this, so people are looking for vector-based solutions.

Because of this, more people are talking about SVG, or Scalable Vector Graphics. These XML-based images can store vector data, and so can be upscaled. Other options include creating special icon fonts, such as Pictos. I prefer the idea of using SVG over font solutions because the font method is just like using Wingdings; plus it adds non semantic letters to your code, even if you can hide them.

I was aware of SVG back in around 2006 during my college course. I naively thought at the time that was little point in learning about them, as I couldn’t see the advantages. If you want to see my first creation 6 years ago – this was it (if you view the image separately the text should zoom in):

So this weekend I decided to go back to my college work and create some SVG by hand. Luckily, for more complex designs, you can use something like Inkscape but I thought it would be interesting to hand code the icons I wanted to create.

First I started by drawing some very simple shapes on an 8×8 grid:

I then created a very simple XML file, and started adding the paths:

Note: The M stands for move, the L stands for line and the Z closed the point. That is as far as I got, but suffice to say that more complex icons won’t be created in this way. You can see the final version here:

For the next part, I used this post as a tutorial: and the traditional process of displaying a background image. I ended up using an empty span because I found it easier to play around with, but as you can see from David’s tutorial this doesn’t have to be the case.


Seeing the browser support for SVGs, support is varied, but for progressive designs it is worth considering in your next designs. Do have a play, experiment and look into the new ways of constructing sites, because it is an interesting time to create websites.

See the finished article: (and make sure you upscale/downsize it to see the full effect)


Getting into Reading Mode

I have always found it hard to read a lot of content online. There are numerous reasons for this: poor layout design, bad typography and a lack on concentration on my behalf.

It is clear that this is a problem not unique to me. There have been many attempts made to make the experience a better one. From Safari’s built in Reader mode to Readability, designed to ‘zap online clutter and save web articles in a comfortable reading view’.

Focus Mode

The purpose of these systems is to remove the other distractions of adverts, additional links or related stories. At a much deeper level, Information Architects understood this whilst building their iA Writer they created what they called Focus Mode:

Thought goes into writing, not using: Focus mode allows you to think, spell and write one sentence at a time. This lowers the temptation to cross edit and keeps you in the flow.

I like the idea of keeping people ‘in the flow’ and so created a very quick mockup of a ‘focus mode’ for reading posts, not just writing them.

This could be made into a JS snippet, or as an idea for someone to use on their own site.

Because the script uses :hover this wouldn’t currently work on a phone, but I’m open to suggestions.

Context in Design

I recently bought 79 Short Essays on Design (which is awesome by the way). One of the articles that really talked to me was this one called The Mysterious Power of Context.

“We decided to recommend a straightforward sans serif font. Predictably, this recommendation was greeted by complaints. It was too generic, too mechanical, too unstylish, too unrefined. I had trouble responding until I added two more elements to the presentation.”

Continue reading