Grid Layouts.com

Last week, I put out a plea on Twitter:

This was something I needed at that moment. To be able to toggle the grid on and off quickly, without having to comment/uncomment a line of code each time. In particular, I was working in Coda, and was looking for something that didn’t require a bookmarklet to toggle.

I’m absolutely gobsmacked by the response! Stephen Hallgren jumped to the challenge first, and has set up Grid Layouts.com where you grab the javascript. I used the script earlier today, and it worked exactly as I hoped it would! No more making background grid images, no more fiddling with css to toggle it on/off. The way the variables are set up mean that I can easily experiment with different grids on the fly,

This is now one of my default tools when creating a site, thanks Stephen!

Tags: design, grids, javascript

Be a Creative Sponge

I’m just back from @media Europe where I talked about the importance of maintaining design collections and how to use them, under the banner “How to be Creative Sponge”. Having only ever resided on panels before now, and with the exception of a 15 minute talk at Oxford Geek Night 2, it was my first ‘proper’ speaking engagement. I was concerned that what I had to say was too obvious, too common-sense, but feedback so far has been good, and I’m really appreciative of those that took time to tell me they got something from it.

Tags: atmedia, design, presentation, sponge, talks

New Design Blogs

With the exception of NetDiver, I don’t go to CSS/’cool website’ showcases for ideas – I’ve discovered a raft of great design blogs that are providing me with a fresh source of inspiration.

Here are my current favourites:

• Happy Mundane -celebrating good design in the ordinary and everyday. Hits the spot everytime.
• Waterhalo – A sketchbook based journal. I wish I could find time to do something like this!
• design*sponge & MocoLoco – biased towards furnishings. Great for colour and shape ideas especially.
• notcot.org – this probably doesn’t count as a blog, more of showcase (hah!) of well designed products. Don’t bother with the bizarre RSS feed, I have this saved as my homepage to check it regularly.

Plus, from the comments, there’s another gem! A big thanks to Rachel for Prints & Pattern, and awesome supply of colour, shape/pattern ideas. Also, Dan Malls link for Daily Type. Yum!, my iPhoto scrapbook is bulging!!

Tags: blogs, design, inspiration

Friday Question: Can you get Great Design on a budget?

This was one the questions we imposed on ourselves during the @media panel last week. My answer at the time was emphatically no, as design is as much about ‘thinking time’. In a way, it’s a hard one to answer, as it depends on the scope of the project and the size of the budget.

Since then I’ve been wondering more about this question. Is it fair to make a client pay for ‘thinking time’? Should a ‘Great Designer’ be able to produce ‘Great Design’ quickly? Or is it just possible to get ‘Good Design’ on a budget, rather than ‘great’?

Tags: design, discussion

Explaining the new logo

I wasn’t quite prepared for the generally negative response to the new identity. Looks like it was a bit of a shock to most people! Comments ranged from positive to lukewarm to negative but constructive to downright condescending and rude. I think the worst were the suggestions that my colourblindness explained the logo colours, as if somehow it was a mistake (or an April Fool’s joke). That hurt! There were also those who proclaimed it ‘wasn’t me’. What the hell do you know is ‘me’? I think people have got this image of an ale-loving tree-hugging hobbit, and that such a design can only mean I’ve had too much old tovey.

Tags: design, hicksdesign, logo, updates

Origami

Is it just me, or is there something of the late 90’s about Microsoft’s Origami site?

Somehow, this reminds me of the kind of thing I was doing when I first started designing for the web. Circles on lines, black backgrounds and ‘digitised’ type. Also check out that cool ‘rSS’ link!

Tags: design, microsoft

What have you done Walkers?

Walkers Crisps are a solid British tradition (Fact Fans: Britains biggest selling brand for the last 2 years), with a branding that has been developed over the last 100 years to what was recently this:

I nearly spluttered over my sandwich today when I saw the ‘new’ Walkers branding:

What ugliness is this? Shiny gold effect gradients on blocky italic text? And what has happened to the Walkers typeface? What was once a bold, contemporary, yet with a sense of its tradition, typeface has been replaced by some skinny monstrosity! The whole effect says to me “Late 80’s Sci-fi action film’, not crisps.

Tags: design, logo, packaging

Dream Commission

A recent hicksdesign enquiry, included a line that irked me rather.

“And I guess you are only interested in multiple digits contracts…”

I’m currently involved in The Big Project for Attap which is keeping me busy for quite a while, but busy doesn’t mean money grabbing. I have, do, and will hopefully continue to, work for charities and causes where the satisfaction comes more from the subject than the budgets. Which brings me to this:

Tags: design

Time to redesign the logo methinks

Whether its leaf logos, logos that have similar 3 shape patterns or both, I’m starting to think its time to redesign. I’m not crying ‘copy cats’ here by the way, I’m just starting to feel run of the mill:

I think I’ve taken the leaf theme as far as I can – its time for a rethink. A rethink that I’ll do in all that spare time of course ;o)

Tags: design, hicksdesign, logos

Riffs: your social recommender

At last, I can finally talk about what I’ve working on for the last 5 months! It’s so hard to work in stealth mode, and when everyone asks you why you’re so busy, you have to say “a thing”. Anyway, today, Riffs has gone live in ‘public alpha’ mode.

Riffs is a recommendations engine, a place to rant and rave about anything, recommend and get recommendations. My main use for it will probably be to give music recommendations, but you could use it to rate and review a gig, movie, conference or meal you’ve just had. Perhaps you want to get users opinions of a certain digital camera? While this is the early life of riffs, there are already over 10 million items in the database, and we’ve tried to make the process of adding a new item as quick and easy as possible.

Tags: attap, design, riffs, updates

Branding with Arial

Many before me have expressed their feelings about Arial, and I’m sure you’re all sick of hearing how it’s a badly made derivative of Helvetica and Grotesque. You all know that to use Arial in print, means that you may as well go the whole hog and use Comic Sans.

However, over the last 4 years I have come across too many ‘branding guidelines’ where the company’s typeface specified has been Arial. Not by CEO’s or administration staff, but by the “creatives” that the company hired! In some cases, it’s been respected, supposedly experienced branding specialists.

Tags: design, rants, typography

Is 1024 OK?

Can we really ever stop designing for lower screen resolutions?

Tags: design, webstandards

An explanation of colorblindness

A get a lot of people asking me what its like to be colourblind. It usually takes the form of “Can you see this colour? Can you see this one ? Is everything black and white??? ”.

This is the best explanation I’ve come across yet:

Courtesy of David Shrigley

Tags: art, colourblind, design

The Hicksdesign family album

Like some nostalgic curmudgeonly grandfather, I’d like to take you through a wee history of the site, from the first embarrassing baby photos to present day…

Tags: design, hicksdesign, versions

Spot the difference

When I mentioned that ABC News used the ‘older version of the logo’, there were a few people wondering just what was so old about it.

After the initial rush to get the Firefox logo out for v8, it was soon enlarged for use in the situations such as the windows installer graphics, and its many flaws were enlarged too. I recreated the logo in Illustrator, this time paying much more attention to detail. This was going to be a version that would hold up to being printed large (like this!).

Tags: design, firefox, logos

Please refresh your browser

OK, I promise, this really is it now. No more fiddling around.

Tags: design, hicksdesign

Dr Comfy Chair (Or how I learned to stop worrying about originality)

I don’t like it, I want the other one.

Tags: design, hicksdesign, updates

Survey Results

The votes for comp apps and text editors have been counted.

Tags: code, comps, design, osx, surveys, texteditor

Survey: What app do you use for comps?

When making comps for website designs, I usually use Fireworks. There are many advantages to this, such as setting up each page of site on a separate frame, and having constant elements (like navigation) on a shared layer. Underlining text is a cinch too. The only downside I’ve found is that it can run quite slow, especially when editing text. Sometimes, it’s slow to the point of wanting to throw myself on a fork.

So what do you use? I know that Illustrator and Photoshop are the popular choices. Is there an ideal, but unheard of, app out there that I’m missing out on? Or an everyday “who would’ve thought it could be used for that’ type app? Only one condition – must work on OS X.

Tags: comps, design, surveys

The ones that didn't quite make it

A look at some of the ideas that were floating around for the redesign.

Tags: design, hicksdesign, updates

The Redesign has landed

OK, I’m finally done around here (for now). I’m in danger of turning this into a blog about a blog, but I feel I need to give some more information about the redesign, and the changes I’ve made in the last week, so please bear with me. Let’s get this out of the way…

Tags: design, hicksdesign, updates

Invasion of the Bandwidth Suckers

An explanation of why the site was down for a while, and wee rant while I’m at it.

Tags: design, hicksdesign, rants

Its not quite finished...

But it’s not far off. Sometimes, even though you’re not finished, it has to happen. The old has to go. The thing is, a site is never finished, so its either take the plunge, or it’ll never happen.

There are rough edges, IE bugs, and not-thought-about-yet-bits aplenty. Give it time, think of this as the starting point, and like the last design, it will evolve over time. Oh, and you’ll probably have to delete stored ‘style’ cookies again – sorry about that. In the meantime, 2 changes of note are the (sort of) fluid layout and relative font sizing rather than the old pixels. More on all that later.

Tags: design, hicksdesign, updates

Design in Flight #2: Creating Interface Icons

Issue 2 of the excellent PDF magazine Design in Flight is now out, including my article on creating the interface icons for NetNewsWire 2. This is my first ‘proper’ article, and I found the process rather daunting, especially after reading the first issue, where the quality of the articles was so high.
The question I get asked the most is ‘How do you create icons?’, so hopefully the walk-through will be useful.

Tags: design, icons, magazines

NetNewsWire 2

The public beta of NetNewsWire 2 is finally available. Go and get yourself a copy, and enjoy new features like (amongst many others) the in-built tabbed browser, with rendering powered by the Safari webcore. Version 2 is also a free upgrade if you’re already a registered user.

With this release, NNW’s welog editor becomes a separate application called MarsEdit. While this doesn’t have the large feature set of Ecto, I prefer the way the interface is laid out and find it much more intuitive. In my last month or so of using Movable Type (before switching to Textpattern), I was using this to write to my journal. One important feature of Ecto’s it does have is the ability to assign your own stylesheet to the preview, to get a better idea of how the article will look. Textpattern is going to include MetaWeblog support soon, so I hope to be back using this when that happens.

Tags: design, hicksdesign, icons, rss

Bare Bones means Comic Sans

Bare Bones have some explaining to do with their new BBEdit icon…

Tags: design, logos

Redesigning is hard to do

Since November, I’ve been attempting to refresh the design of this site, particularly the journal section, but each time I keep coming back to the same design.

Each of my redesign attempts has resulted in just a little tweak here, or image added there – nothing on the scale I was intending. The leaf illustration on the left is one such result of the one of these attempts.

Tags: design, hicksdesign, updates

Are web sites identical?

François Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Tags: css, design, surveys, webstandards

Recycled CSS

Kenichi Design believe in recycling CSS. I love the copyright line in the code:

- All site contents, HTML, XHTML, CSS, XML, images, code, and text are copyright © 2004, kenichidesign. All Rights Reserved Forever.->

Forever! Final word! Zip! Apart from the bits I nicked from Hicksdesign…

Updated: Kenichi design have now removed their style sheets. The guy didn’t discuss it with me (I was perfectly happy as long he removed the copyright line), but I guess there’s a language barrier that would make discussion hard. Shame.

Tags: design, rants, ripoffs

Thunderbird

Following on from the branding of Firefox, comes the new logo for Mozilla’s email client, Thunderbird. When Stephen Desroches sketched out the orginal idea for Firefox back in December, he had in mind how this affects the other applications, and Thunderbird was sketched out too:

After Firefox 0.8 came out, I started work on fleshing theses sketches out, trying various bird types. Early on we decided to keep the envelope metaphor, and include a globe. At this point I couldn’t find any reference to a real Thunderbird, so I didn’t have a starting point. I tried a few approaches:

Tags: design, logos, mozilla

branding firefox

Shortly before Christmas, I had an email from a chap called Steven Garrity, who works for Silverorange, and runs a blog called ‘Acts of Volition’, in which he publishes a radio show on regular basis. (really worth a listen BTW). He asked if I would like to join a recently created Mozilla branding team, with the immediate aim of producing a new logo identity for the Firebird browser, soon to be renamed firefox (Ben Goodger has written up the reasons and process for the name change). The branding team came into being after Steven wrote an article recommending changes to Mozilla’s existing branding. I jumped at the chance, and today Firefox 0.8 is finally released, and the work is no longer confidential.

Tags: design, firefox, logos, mozilla

yay or nay?

I empathise with Paul Scrivens (see ‘Sometimes I get bored’). Designing your own site is very hard, especially when you work on your own, and don’t have any easy way to gauge whether something is a good idea or not.

Cut the chase: to improve the readability on the journal and articles pages, I’ve tweaked the CSS. This means no viewing long pages through a letterbox and support for your mousewheels. (There are display issues in IE 5 Win and Mac, but everyone else should be OK). So what I’d like to know is: do you find it easier and more readable, or do you prefer things the way they were?

Tags: design, hicksdesign, updates

Highlighting current page

Just recently I’ve realised how useful adding an id to the body tag of page can be. I’d always wondered why others had done it, and now I know. It gives that extra bit of flexibility to layout a page and set variations in page style depending on its id. So, I’ve just added another wee article on how to highlight the current page with CSS in your navigation.

Tags: css, design, webstandards

Highlighting current page with CSS

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

Tags: css, design, webstandards

ch..ch..changes

After what seems like far too long a process, my personal and portfolio sites have merged as one, and the design has evolved a wee bit. From now on everything is accessed via www.hicksdesign.co.uk, although I have spent a long time setting up redirects in a .htaccess file. Hopefully, the transition will be easy – if you’re reading this, then it has. The new location for the RSS feed is now http://www.hicksdesign.co.uk/feeds/rss/index.rdf

Tags: design, hicksdesign, updates

Live from Dorset

Last weekend I came across a rather nice blog, Dunstans Blog (who also runs 1976Design), via a link at the CSS Vault. Apart from an appealing clean layout, the site has an addictive feature – a ‘live weather image’ from his house in Dorset. This takes the form of a beautiful atmospheric illustration that gets updated, depending on type of the weather and time of day.

Tags: blogs, design

accessible drop downs

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

• I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future
• I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential
• It had to show all links ‘flat’ if the user had javascript disabled
• Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.
• I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible
• I wanted to control the look completely with CSS
• And the moon on a stick please

Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Tags: css, design, menus, webstandards

new adfam websites

2 new microsites have just been launched for Adfam, the UK charity supporting familes facing drugs/alchohol problems. One site is to support parents, and the other for partners. Hicksdesign designed the site templates using XHTML and CSS, and London-based company Clarity provided the content management system using asp.net.

This is important for me as this is the first commercial site that I’ve built completely web standards and no tables. My personal site was the first time I had used (and got to grips with) the methodologies of XHTML and CSS, and I was keen to use them on future sites that I created. This was project was ideal.

Tags: design, hicksdesign

vertical & horizontal centering 2

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing