Paul Randall » design

Make the most out of the pages QR codes link to

Paul — Sat, 21 Jan 2012 19:09:54 +0000

So, I have spoken before about QR codes, and their place in the world currently; but I do use them myself — mainly as a curiosity as to where they lead (IMO each QR code should have a URL attached, but that topic is for another day).

Follow the journey I took when interacting with this QR code from a Co-op leaflet

QR code in a Co-op leaflet

Then I saw this on my phone:

The Co-op website on my phone

Now, given that they created the QR code, they knew that people would be looking at it, most probably, on a mobile device. So why not optimise it? All the link did was take me to their website. It didn’t entice me in, they didn’t focus their message, and I lost interest.

Here is what I would have done

Mockup of a Co-op mobile website layout

It is a quick example of how much more inviting it is to a mobile viewer.

Take note where you take people to with a QR code

If you do fancy using a QR code, next time, think about if you can create a page specifically for that purpose. You might find it has more impact than a regular page.

Getting into Reading Mode

Paul — Tue, 06 Dec 2011 13:41:04 +0000

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.

http://prandall.com/experimental/focus-mode/

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.

Redesigning, Again

Paul — Mon, 29 Aug 2011 14:42:20 +0000

…and this time it’s personal.

Another month, another redesign. I think this all stems from the fact that I have never really been 100% happy with my website.

So, it is back to basics. With an update of WordPress comes their default theme, so I can concentrate on the content before I work on a custom design.

It’s all about the content

From day one, I have really used this site as a dumping ground, posting anything on here, not really thinking about the audience and so for this new era, I want to focus the content and deliver something of use (hopefully) to the people reading it.

Get out the statistics

I had never really looked into the popular sections of the site, so I dug out the page visits over the last few years, to see which elements were the most visited; here they are:

/2010/01/19/dribbble-invite-giveaway/
/2009/04/28/six-high-resolution-cloud-images/
/projects/
/2009/10/16/the-kitchen-sink-of-html/
/2009/07/30/august-2009-wallpaper/
/about/
/2009/06/25/july-2009-wallpaper/
/category/wallpaper/
/2009/02/06/the-h1-debate/
/2009/05/28/june-2009-wallpaper/
/2009/10/13/good-design-is-invisible/
/2009/04/24/london-2012-coin-design-competition/
/2010/03/19/css3-multiple-backgrounds/
/2009/08/31/september-2009-wallpaper/
/2009/07/17/creativity/
/category/downloads/
/contact/
/2010/01/10/type-the-secret-history-of-letters/
/2010/02/22/should-the-grid-be-visible/
/2009/11/15/thinking-with-type/
/category/design/
/2009/10/29/november-2009-wallpaper/
/2009/01/19/if-you-make-everything-bold-nothing-is-bold/
/2009/08/14/background-alignment-bug-fix/
/2009/12/04/december-2009-wallpaper/
/category/freebies/
/2009/07/01/the-one-song-sketch/
/2009/01/11/how-i-got-into-web-design/
/2009/04/22/five-simple-steps/
/2009/01/12/design-work-on-footytweets/

So, what can I learn from this:

Giving away free stuff interests people and drives an audience to your site
The ‘about’ page is very important
Design-centric posts are most popular

So having analysed this, I want to expand a section with HTML/CSS code snippets, further develop my profile on the site, and spend time writing some posts on design, something I have always wanted to do more of.

Timescale?

My first mistake would be to set a limit of this. The only times I have pushed the development of this site forward is during several hours at the weekends (or on a bank holiday like today). I don’t want to rush it, because the chances are that I haven’t thought about it enough, and it’ll mean I want to redesign it again too quickly, so for now, I will concentrate on writing more, and will slowly develop the plans for the site in the next few months.

Good Design Doesn’t Date

Paul — Fri, 11 Feb 2011 20:41:30 +0000

Classic packaging—Chanel No. 5 ( designed in 1925)

Centre Aligned List Items

Paul — Thu, 03 Jun 2010 21:17:33 +0000

This post has come from a quick bit of experimentation, trying to centre align list items.

The design called for centerally aligned list item links, and there could be 3, 4, 5 or more links. Initially I was stumped as to how to create this effect. I had considered a left margin to create the illusion of centre aligning for each possible number, but I knew there was a better way. I’m always aiming for a solution that works in the older browsers too, and this includes IE6. I don’t know why I do it to myself, especially as it apparently only has less than a 5% market share nowadays.

The Example

I’ll cut to the chase; here is the HTML and CSS.

http://prandall.com/experimental/centre-ul/

So How Does It Work?

On the UL, I am centre aligning the text, effectively making all the content aligning this way. That’s the real key to it, second only to display:inline on the LI, because a float will push everything to the left.

Below is all the CSS you need

ul{text-align:center;} li{display:inline;}

Simples!

On ‘Magpie Designers’

Paul — Wed, 26 May 2010 21:36:21 +0000

In an ever-changing web world, new technologies are constantly evolving. With the emergence of alternative font display systems, new CSS effects and the increased uptake on modern browsers, designers are using these new techniques more and more. Add this to a sprinkling of current design ‘trends’ such as the noise filter, and pixel perfect line details and it makes for some very similar looking websites.

It is inevitable then that these new and shiny capabilities will catch a web designer’s eye (especially after years of browser constraints) but are we turning our eagerness to use the latest styling techniques into a world of monotonous and similar designs?

A Screenshot Showing Some Modern Design Trends

It’s worth saying that there are some great sites being produced at the minute. Something I hope to write about in a future post.

I’m a Magpie Designer Too!

This post isn’t without a sense of irony, i’m all too well aware of as this site features many of the effects i’m talking about. I’m clearly a magpie designer too!

In a years time things will probably calm down when “the next thing” arrives, whatever it is.

Site Refresh

Paul — Sun, 16 May 2010 12:02:29 +0000

So, things look a little different here!

After a long period of inactivity, due to a new job, and other things the site has sat a little dorment. I thought it was time for a change, and after many, many revisions I decided to finally design something. So, after a few hours of work this weekend – here it is.

I’m hoping to tidy a few things up over the next week, and I will follow that up with a more indepth blog on the designs that didn’t make it.

If you do notice something weird, feel free to post a comment. It hasn’t been browser tested, but bear in mind that things may look a little funky for the next few days.

Should The Grid Be Visible?

Paul — Mon, 22 Feb 2010 22:06:47 +0000

A couple of recent designs have left me wondering whether we should be ‘showing our workings’ and display the grid at all, whether subtlety like Jina Bolton’s Sushi & Robots or something more elaborate, like Analog (note: press Alt+G).

Once visible, the precision of the grid acts as evidence of design credibility, and its purity of form has a mystical draw.

A Brief History of Grids, Lucienne Roberts http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=620

Having a visible grid is certainly not new; Here you can see the Vormgevers exhibition poster in 1968 by Wim Crouwel.

I’m certainly not going to say if the grid should be visible or not, but I’d love to hear your thoughts or opinions on the topic, or just to add a link to a site where you have seen a visible grid used well.

Condensed Type #3

Paul — Sun, 07 Feb 2010 21:41:28 +0000

Welcome to the third Condensed Type; A weekly roundup of typographic links from my dedicated typography account @typographylinks. Enjoy!

Inspiration

Mercedes Benz Typographic Animation
Flickr Pool of Vintage Type
Use Of Effective Typography In Logo Design
Typography Mania #13 by Abduzeedo
Vibrant Wall Typography/Graffiti from Ripo Visuals
The Best Custom Letters of 2009

Web Typography

Typechart: Preview and compare web typography. Retrieve the CSS
Revised Font Stacks
Fontspring: Hundreds of web-ready fonts at your fingertips

Fonts

Today Sans H EF Extra Light
Thirteen Ways of Looking at a Typeface by Michael Bierut
Haäfe & Haph presents a selection of custom ampersands

I am hoping to give Typography Links a dedicated website soon, where you will be able to subscribe via RSS and submit your own links. Details in the coming weeks.