Hicks

You’re reading all articles on The Hickensian tagged 'hicksdesign'

DuckDuckGo Stories

Some more of my work for DuckDuckGo went live this week. This is a series of illustrations to tell the story of why you should use this alternative search engine. Working with the design team, we developed some quirky takes on the concepts; a lab creature burning documents (they don’t store personal information), a ghost chasing a runner (they don’t follow you around with ads) and someone’s private bath time being watched (they don’t track in or out of private browsing).

The workflow for these was sketching ideas on the iPad Pro with Pencil, and then taking the sketch into Illustrator for the final render. Sketching on the iPad makes it quick to try different versions of a sketch, but also helps refine the ideas. I just keep drawing, erasing, tracing, refining in a way that would be much harder to do on paper.

I also dabbled with some simple SVG/CSS animation on the periscope illustration. It was great fun working for DuckDuckGo, and I’m particularly pleased with how these ones came out!

Recent Work: DuckDuckGo

Hicksdesign has been working with the alternative search engine DuckDuckGo recently, on a series of illustrations for their site. The first of these, the ‘private balloonist’, is live on their homepage :

I’m particularly pleased with the series we did after this one – the style is even more improved and I feel is some of my best work to date. Can’t wait for that to go live so that I can share it!

Celebrating 10 years of Hicksdesign with The Icon Handbook!

YAY!!!

What a way to celebrate 10 years of Hicksdesign (to the very day) – my advance copy of The Icon Handbook arrives! I’m actually holding it in my hands! It has pages that turn with words (what I wrote) and pictures on them!

It looks and smells flippin’ gorgeous!

Excuse me, I think I need a sit down…

If you’ve been waiting for the print version to be available before purchasing, now is your time to pick up a copy!

No 73

It was over 5 years ago that decided it was time stop working from home and find an office. Since then I’ve been working from 3 different locations:

  1. Renting a desk at local design company Miller, Craig and Cocking in Long Hanborough.
  2. Sharing office space with John Oxton, Jon Dennis and Simon Clayson at Upper Rissington (where the Rissington Podcast was of course born).
  3. Sharing office space with the Rissington crew, plus my wife Leigh, and Tim Barry at the idyllic ‘Webble Mill’ in Burford.

Sharing with other freelancers is a great way to get company, share the costs (and therefore get a nicer place to work than you could alone) and confuse others who can’t understand how people ‘in competition’ can share together. The nature of freelancing is that people move on and move away though, and it’s all change again. It’s been an absolute joy to work with John, Simon and Tim – you’re top chaps, and I miss you all.

Now, after 5 years of working at places only accessible by car, we’ve (Jon Dennis and new office mate Matt Hamm) found a new studio just over a mile away in the centre of Witney. From now on, when I refer to ‘No 73’ I’m talking about the new office, with a nod to the 80s children’s TV series for those that remember it.

I can now walk (20ish mins) or cycle (just under 10 mins) to work. No traffic jams or petrol station stops. Apart from the financial savings, the pace already feels better, and once again I’m sharing with people that make me feel lucky. I also love living and working in Witney – it’s a great little market town.

Finally, a fluid Hicksdesign

I’ve been wanting a fluid layout on this site for about 5 years. I had a brief redesign back in 2005 where I flirted with it for a few months, but it was soon switched back to fixed as I couldn’t get it right.

Last year, I discovered CSS media queries while working on the internal pages of the Opera Browser, and tried to implement it here. It was half-assed and was removed, again after a few months.

It took Ethan Marcotte’s excellent article for A List Apart Responsive Web Design to motivate me to do it properly, as well as know HOW to do it properly. I don’t think I’ve read anything as exciting and inspirational for a long time. So I started from scratch, working on the basic skeleton of the layout, getting the various resolution dependant layouts in place, before re-implementing the design (making a few changes long the way of course).

So now, you’ll see the layout and type size change depending on the available width. From a narrow single column (which should be the view you’ll see on mobile devices)…

1: Hicksdesign Small

To a 2 column…

2: Hicksdesign Medium

to the more familiar 3 column style I’ve had here for a while…

3: Hicksdesign Large

and finally to an x-large 4 column layout…

4: Hicksdesign XLarge

For now, only the journal has been re-jigged, but all the other sections will follow as soon as time allows. It won’t be perfect, and I expect there to be plenty of fine-tweaking for a while yet. Waiting until it’s perfect before launching just means it won’t happen!

The next project for the site is implementing SVG icons

Change of Face

Over the last couple of weeks, I’ve had a chance to do some housekeeping on Hicksdesign. Implementing Matthew Tretter’s genius new approach to Vertical Centering, updating the portfolio and improving images like tree footer on this page (that were a bit too slapped together initially). I’ve also been considering a redesign, which I’ve since abandoned, but elements from that are sneaking in. There’s still a lot I want to do, but I’ve had a couple of emails asking about the change in corporate typeface, so I thought I explain that.

For a while now, I’ve been unsatisfied with my use of Chalet Paris 1970, the curvular font used previously on Hicksdesign. Instead, I’d been looking for something that would be unashamedly ‘British’ in feel, without relying on Gill Sans. I purchased the DF Ministry family to use as a body face in all my documents, but still felt I needed a stronger identity for headings and the logo.

P22 London Underground Sample

In the end, I went with ‘London Underground’ by P22. It’s a faithful reproduction of Edward Johnston’s original typeface, developed in 1916, rather than the ‘New Johnston’ redesign conducted in the late 70s. It retains the character of the original, which I felt was lost a little in the later redesign. While there were a few sans-serif faces back in 1916, they were rare, and the I still find it hard to imagine that such a radical typeface was created during WWI.

I’d always lumped this typeface along with Gill Sans, for being ‘too obvious’ a choice, but I’ve changed my mind, and I’m really happy with it!

Recent Work: Mahalo

Mahalo

Logo design for Mahalo, the human powered search engine. Hicksdesign also consulted on the site design as well as creating its icons. ‘Mahalo’ is Hawaiian for ‘Thank you’, and various related imagery was explored before settling on the Plumeria flower from a Leis.

New Business Cards are here!

Its always exciting to get new 'stuff' printed - more so when its for yourself, and there are no mistakes (unlike the last lot had done 4 years ago)!

On the recommendation of a few people (like Kate Bolin), I had them printed at Aubergine. Great quality (Litho - not digital), fast, and the logo has a Spot UV varnish to make it shine against the matt laminate. I really can't express how pleased I am with these! :D

Now I've got to spend the weekend with the rounded corner punch (available from here) to get them all rounded like this!

I'll be handing them out liberally at @media...

Tiger Theme for Omniweb 5.5

I’ve finally updated my Omniweb theme to work with the sneaky peeks

Tiger theme for Omniweb 5.5

Changes for this version include:

  • New Icons: Mark page, Next Mark, Previous Mark, Favourites Folder, News Feed Folder. Thanks go to Dan Carson who created the ‘Mark page’ and ‘Favourites folder’ icons.
  • Added ‘small size’ icons for the main toolbar icons.
  • Improved close tab icons.
  • Added the large bookmarks image for the tab drawer.
  • Redone splash page.
  • It no longer replaces the Omniweb application icon.
  • Downloads window – tweaked to allow it to be resized narrower (like Safari). This may compress text when smaller, but I prefer a narrower window
  • Workspaces window- Changed from a ‘utility’ window to a normal one, with margins removed.
  • New Change (4.5.06)- Improved the smoothness of the Safari-esque buttons. Please re-download and re-install to get the improved icons.

As before, if you want to pick and choose which icons you want to install, all the original files are included, as well as goodies folders of applescripts and sample workspaces. Don’t forget to back up Omniweb first.

Download the Tiger theme for Omniweb 5.5 (888k)

New desktop wallpaper

I’m still slowly doing site updates, bit by bit, and one of the changes I want to make is refreshing the desktops I have on offer. These are 3+ years old now, and they need updating to new identity.

The first of these is Bloody Hippy, available here in enourmo-scope 1920×1200 resolution:

preview image of the bloody hippy wallpaper

I have a question for anyone listening – do I really need to supply all the different resolution versions like Veer do? My Intention is to design them to be centred – so that it doesn’t matter if edges are cropped. Is that enough? Let me know if I’m missing a trick here!

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.

Many referred to the 3 leaf logo as some peak of my career. The irony is, if ever I spent 2 minutes slapping a logo together, that was it. Seriously. Zero thought went into it at the time, and the execution was less than slick, but it’s seemed very popular with wives! I never change logos just for the hell of it though. A logo should be something that is in place for very long time, but I’ve already talked about my reasons for changing. Time to move on.

Maybe I shouldn’t have enabled comments (its not as if the logo was up for debate or anything), but people were emailing me to tell me they thought it was ugly anyway (which was nice), so it makes little difference.

So basically, stuff you. It’s staying. This is what I want.

What I wanted:

After I’d convinced myself that I needed to move on, I drew up 4 goals for myself as my own design brief:

  • The key was something so completely different from previous logos, and from everything else I’d seen out there. Part of that is colour – there’s a lot of muted, conservative tones at the moment.
  • A shape that could be used with different colour combinations, and still be recognisable. Thus, I could have a seasonal variation if I wanted. The current one is deliberately bright (these colours are very IN this year), but could be anything I wanted. This would allow me flexibility, which in turn, would give longevity.
  • To highlight a different interest to nature.
  • If it had a 70’s in feel, with a modern edge, I would be happy too!

I’d been searching for new ideas for a long time, but finally at SXSW I got inspiration. Glenda the Good Witch took a small group of us off to for a preview of the yet-unopened Blanton Museum of Art. It was there that I saw a piece of art that inspired the new logo:

Filles de Kilimanjaro III for Miles, 1976 Acrylic on canvas

Its called “Girls of Kilimanjaro III” by Kazuya Sakai, and was intended as a homage to Miles Davis. I was hooked, and not just because I like Miles Davis.

On the flight home, I did a few sketches, and knew that this was what I wanted:

New Logo Sketches

Apart from achieving all my goals, I think the logo also suggests constant movement, which wasn’t intended, but I like that fact that it does. The shape is also pointing/moving/leaning forwards, which suggests direction. Others have suggested it reminds them of scalectrix, race tracks and roller discos, which is great. Its the music connotations that I particularly enjoy though – vinyl records and infinite movement.

The biggest setback was the discovery that Firewheel Design were using the same typeface – Egret. If they didn’t have the word ‘design’ in their name too I would’ve thought sod it, and left it. However, I didn’t feel comfortable with that, so I’ve switched to the other typeface I was considering during development – House Industries’ Chalet. I’m very happy with this, and it doesn’t feel like a second choice. It fits the logotype just as well, and has the added benefit of bolder weights.

Finally – I see this current site design as being a transitional phase – a clean minimal style (much like Doug Bowman did with his ‘whitespace’ phase) to give me time to evolve and develop it. While I intended the logo to be a complete departure, I wanted keep parts of the design that I felt still worked, and didn’t clash with the new identity.

Hicksdesign's Found Sounds

Here’s another of those small steps.

I’ve been wanting to dip my toes in the podcast pool for such a long time now, not to bring my droning about OS X browsers to an audio format, but to share music that I’m into. Podcasts are too much like hard work, but I loved the way that Buzz Anderson has done his – ad-hoc linking to single track mp3’s in de.licio.us. So Found Sounds is in effect, a complete and utter steal of his idea, sorry Buzz.

Whereas Buzz looks like he’s going to be using Odeo in the future, I wanted to use Textpattern for mine, with Feedburner converting the feed, providing the support for enclosures. I just add a rel=”enclosure” attribute to the mp3 link and away we go. Thanks go to Tom Martin for the method.

The criteria of Found Sounds is simple. If a band or record company has provided an mp3 free on their site, and I love it, it goes in. Occasionally, there may be crossover with those provided by 3hive, but I hope to avoid repetition if possible.

So, here’s the first post, here’s the second post, and here’s the feed to grab for it. Feel free to use the comment fields on each post to tell me what you thought.

P.S – I also got around to adding tags to posts, thanks to this wonderful plugin

What I'm doing at the moment

I keep being asked why I’m so busy, so I here’s a quick summary of what’s going on at the moment:

First of all, what I’m not doing…

  • I’m not writing a book. I’ve been toying with the idea of self-publishing for a couple of years now, but it’s come to nothing.
  • I’m not preparing to speak at any conferences (although I am on a panel at @media). It has to be said, speaking is not where my skills are.
  • I’m not redesigning my branding and site, although I desperately want to. I have various ideas, but after sitting on them for a week or two, I always reject them. Then everytime I see another leaf logo, I get embarrased that I haven’t done anything about it yet.

Now, what I am doing…

What I am doing is working for Attap (which stands for ‘All things to all People’). As well as Riffs (which I worked on) and PersonalDNA (which I did a little work on), with another site to follow, as well as the biggie project LifeIO. My favourite part so far was the Attap ‘wee guy’ logo as he/she is affectionately known. It came together very quickly (once I’d turned the ‘a’ on it’s side).

I can’t say more about LifeIO than what the holding page does, except that I’m very excited to be given the chance to a project like this. It’s design is something to really get my teeth into. I know the amount of web apps being released is getting past silly, to the point where apathy is setting in. Barely a day goes by without another ‘Sign up, and we’ll tell you when we’re ready to Beta test’ goes by, or someone else drops the last vowel in their name. Its a harder market to release apps into than it was when Basecamp or Flickr started. This doesn’t put me off though, it just makes it more a challenge to do the best job I can on LifeIO.

I am also getting psyched up for another SXSW. I fly out next Thursday with other Britpackers, and I am so looking forward to it, despite my usual find-it-hard-to-leave-the-family-behind sadness. If you’re there, please come and say hi!

I’ve also been trying out Feedlounge and Wordpress (not as a replacement for this site, but as a CMS for a new site). More on those soon!

Four

No, not another meme. It took my wife to remind me that last weekend marked four years as a freelancer. Four years under the name Hicksdesign. I can’t believe its that long, it feels like only yesterday that I took that leap.

Its been wonderful, and I don’t think I could go back to work for someone else, but why didn’t anyone tell me:

  • You would be working A LOT. More than you thought.
  • That dealing with emails, quotes and enquiries would be more time-consuming than doing the accounts
  • That you have to keep a photocopy of each VAT return – not just a printout from your accounting software, but of the actual return. Whoops.
  • That strange distant mumbling is the sound of you talking to yourself.
  • That in the first couple of months I would be so nervous and lacking in confidence that I would be sick.

Never mind, I soon found out.

I have to say, that I would never have gone freelance, or have survived so long, if it wasn’t for an encouraging, understanding and completely supportive wife. I tried hard to make that last sentence not sound trite, or like some embarrassing acceptance speech, but its the truth.

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:

Similiar Logos

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)

Flock & Hickr

There are two questions I get asked a lot at the moment, so I thought I’d answer them here, rather than in the FAQs.

Did you do the Flock logo?

No, that was Bryan Bell. I was fortunate to be involved in the early stages of creating the Flock browser theme, and some of that work is still in there, but since starting a large project in June, Bryan has been handling all that too. Its come a long way since then, I might ask Bart if if I can post some of the odd ideas we had at the start.

How did you do the Hickr bit on your site?

This question still bemuses me, as its nothing more than the basic HTML Flickr badge, with a bit of css, but it definitely ranks as the most asked question at the moment.

The javascript is wrapped in a div with the ID of Flickr. Just in case the javascript has recently changed (and adds unwanted ‘stuff’) here it is:

<div id="flickr">
<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=yourflickridhere&count=12&display=latest&name=0&size=square&raw=1"></script>
</div>

I manually altered the ‘count’ to get 12 images. Here’s the css I use on that:

/* Flickr */
#flickr img { width: 50px; height: 50px; }
#flickr a { padding: 3px; display: block; float: left;}
#flickr a:hover { background: #ddd; }

Do I blog for profit, backhanders or Scotch Eggs* ?

No.

Sometimes I’ve been sent ‘stuff’. Mac apps, BBEdit window stickers, someone even sent me 4 CDs from their record label! I often get asked to link to, or promote, something. Sometimes I’m fortunate to have been a beta tester for various apps – desktop or web based. I love getting a sneaky peek of things, and having an opportunity to make suggestions.

I don’t always like them or find them worthwhile. You don’t get to hear about those (and there are quite a lot).

Sometimes I see something that I love, and I do want to use. I like it so much that I want to tell others about it. You get to hear about those – those are the things I like writing about.

Its taken me much deliberation before I even added Google Ads to a side-project ($4 over 3 months!! Wahey!!).

My point is: I don’t hype for the sake of it, or because I get some ‘deal’. I resent any implication of that. I just pimp things that I like, and that I want to tell others about. There’s never anything ‘in it for me’.

You know what I’m talking about.

(*Well maybe for Scotch Eggs.)

The office is closed on Fridays?

This line in my contact details often raises a smirk, usually combined with a sarcastic “Enjoy your day off”. The word ‘Part Timer’ is inferred, but never uttered.

So why is this? Do I just work a 4 day week? I wish it were true!

When I first took the plunge to go freelance, there was one thing driving it. Samantha had been born 6 months previously, and Leigh’s maternity leave was nearing an end. She managed to get a 4 day week so that she could look after Samantha on a Thursday, but we still didn’t want her seeing more of nursery than of us. Nursery is a great environment, they learn social skills, have more riotous fun than they could at home, and pick up enough illnesses to make their immune systems as tough as old boots by the time they start school. However, Nursery is not a parent.

I had been thinking about freelancing for a while, but this was the catalyst. So the plan was hatched – going freelance would give me the flexibility to help out. Originally I had Samantha for 2 days a week, but the work just wasn’t getting done, even though I was working weekends. After a few months, we settled in a routine of Mummy on a Thursday, Daddy on a Friday, and work weekends/evenings to make up time.

So there you go. If you’ve ever wondered what I do myself on my day off, I’m looking after the wee ones, a 2 year old and 4 year old and its a rewarding time without a doubt.

Just to update you

I have a habit of asking questions and pronouncing apps on my blog (and some people have been asking for follow-ups), so I just wanted to take a moment and tie up some loose ends…

Deskspace

Remember I was looking to get out of the house? Original Post

I am finally back in the land of the real people, and renting deskspace at a local print design company. I have my own little corner, but still have other creatives to talk to. I think it was Dave Shea who recently advised freelancers to never work from home, and I can see why. My productivity has really improved since moving out (and Daniel can finally have his own room).

Accounting App

Trying to find a cocoa app to do the job of MYOB – Original Post

In the end, I discovered that there is no one app that will cover all of MYOB’s functions, so there’s a gap in the market there for an indie developer to get their teeth into! Instead, I decided to hire an accountant to do my bookkeeping, and have gone over to iBiz for my project management/invoicing needs. Don’t let the name put you off, this is a great app. While its not perfect, and Billings definitely has the better interface, it offers vital features such as invoice customisation and being able to start invoice numbers from a number other than 1. It integrates with iCal and Address Book, and makes emailing invoice pdf’s a snap. Its the one I wish I had when I first started freelancing.

To pep up its interface, removing the metal with Unifier instantly makes it a whole lot nicer to look at. I like metal, but I think this is one instance where I think its irrelevant.

Safari RSS

The best thing about Tiger? Original Post

OK, so run Safari as your RSS reader for a while, and it does start to slow down, even if you set articles to be removed after a day or week. Once more, Safari becomes unresponsive – click a tab, wait for it show. I’ve whittled my feeds down to about 200, but even then, “View all RSS Articles” increasingly becomes a drag. That whole clicking twice thing is starting to grate too.

Webby Awards 2005

For reasons I just can’t fathom, Hicksdesign is a nominee in this years Webby Awards in the blogs category. Its a huge ego boost, and I expect the phone to ring very soon with offers of local superkmarkets that need to be opened. Think of all the cheese I could buy now!

Who am I up against? Amongst others, the glorious photo blog The Snowsuit Effort, and the one that undoubtedly be the winner, Flickr. Its a foregone conclusion, but nice to be nominated all the same, and I won’t let the fact that I don’t deserve it get in the way of enjoying the honour!

the webby award spring

The Hicksdesign family album

Thanks to web archives and old dusty zip disks, I’ve managed to find all but one of the previous versions of Hicksdesign. I’ve not been a good archivist, and tended to dump old versions along the way, but I’ve found enough to give you a slideshow. Its been interesting for me to see how the logo has changed, and how my skills have slowly matured.

So 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…

Version 1: Dec 1999 – May 00

version 1

My very first website – ever. Only the about page still existed, which is a relief quite frankly. Created with a free demo of Adobe Pagemill (!) and hosted on tripod. This was before I found out that you could use tables to create more than one column.

Version 3: Jan 01 – Oct 01

version 3

Found on the web archive, there are a couple of missing images, but enough there to get the idea. The rounded squares were all animated gifs.

I’m now using Dreamweaver 2, and targeting sites for Netscape 4/IE 4 and above! The cheek! Frames a plently too. This is the first time I started using ‘hicksdesign’ (a year before going freelance) with the chemistry symbols logo. I’d just bought my first domain name, so ‘hicksdesign’ sort of stuck from then on. Its highly unimaginative, and sometimes I wish I’d spent more time over it, but I can’t go back now. I still like the logotype, and may bring it back someday.

Version 4 Oct 01 – June 02

version 4

The ‘now I’m going freelance proper’ version. Everything is laid out using Dreamweaver layers – hated using tables, I could never get the hang of the whole spacer gif thing. Layers were more like the text and picture boxes I was used to in DTP apps like Quark. However, very little plain text, most type is set as images. This was also the first appearance of the flower logo, and no more black backgrounds.

Version 5: June 02 – Nov 03

version 5

This was my first and only Flash site, and can still be seen here. Cobbled together with guidance from Flashkit.com

When I first tried using Flash, it was at v5, and I was enthralled. I wondered why all sites weren’t created in Flash (I know now). I still haven’t given up on Flash, but I really need the time to learn actionscript.

Version 6: May 03 – Oct 04

version 6

Finally discovered web standards, learnt what CSS is all about, and created my ‘personal site’ exp.hicksdesign.co.uk with Movable Type. People started to come to the site for the first time via Zeldman and the CSS Zen Garden. By November 03, I had scrapped the Flash portfolio site, and bought everything in together under one roof.

I still really like this design, but by October 04 I really felt the need for a change.

Version 7: Oct 04 – Dec 04

version 7

The vertical tree one – it didn’t last long. I couldn’t do the layout I wanted in my head, because of a certain browser that the majority use. It went after a few months, although it seems as if it was better ‘received ‘ than the current design.

hicksdesign

hicksdesign

So, any skeletons in your closet? Early versions of your site, created when you were still learning? Its time to share them! Post them on your blog, and leave a link here – it’ll do you good!

Looking for desk/office space in Oxfordshire

Ideal desk space is somewhere with natural light

Please note : This is an old post – and I have since found a good office – thanks!

Just like Dan Cederholm I’ve decided it’s time to move out and find some local desk or office space. In the slim chance that someone reading this will know of any workspaces, I have only a few needs:

  • Must be in the Witney or West Oxfordshire region (That’s the UK folks)
  • Broadband access (or the facility to install it)
  • A window too look at outside land.
  • Sharing with other creatives would be ideal, but not essential.

I’m very clean, and come with my own furniture if need be. If you do happen know/have somewhere available, please let me know. If you don’t, please spread the word anyway.

2005 Bloggie Awards

Well jigger me sideways into a stove pipe hat. It would seem that someone has nominated me for the ‘Best British or Irish Weblog’ category in this years bloggies! I’m up against the likes of Tom Coates though, so I may have to concede and buy my own four fingered Kit-Kat. What a heart-warming piece of news for my first day back at work, thankyou to whoever voted!

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

Ever since I changed the layout of this site back in October, I’ve not been happy with it. It just hasn’t sat comfortably with me, and its an odd feeling – like my teeth being on edge.

The whole reason for the tree/landscape image was to do something in the ‘dead area’ on the right. It wasn’t intended to be seen by all, more a filler for those with larger screen resolutions. However, looking at the site on 800×600 brings the horrible realisation that it looks very dull indeed, and the landscape has become the focus.

So, the design will evolve again soon. Don’t expect anything radical, but the landscape’s days are numbered. In fact, if anything it will end up looking very unoriginal. But hey, I’m getting older, I want a pipe and slippers site, a comfy chair with the indentation of my rear in it. My attempt at making a slightly quirky chair is something I just don’t want to use.

The ones that didn't quite make it

Clearing out my ‘dev’ folder on the new site, I came across some of the site comps (created in Fireworks) that didn’t make it. They’re just the initial ideas, but here they are if you’re interested…

I quite liked this one, but The Missus felt that the whole retro/worn look is getting quite common, and others do it better. I’ve got a thing about 1940’s-1960’s car magazines, and I’ve been desperately wanting to use that MG illustration somewhere

This one was trying to get away from everything. I’d found an illustration of a boy holding a prism up to the light, and again, really wanted to use it. This wasn’t it though.

This is the one I created in July, that parts were taken from for the new design. Too bland, odd hierachies of headings. You can see some of the elements that made it into this new design though.

This was the next attempt. A refresh of the previous design – rounded corners, more colours. I still like this one, and who knows, it may appear again. There’s that boy illustration again…

The Redesign has landed

OK, I’m finally done around here (for now). Clear out your caches, refresh, and make sure you’re seeing the most recent version. 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…

Why Redesign?

The previous design seemed to be well liked, and I had received death threats after I mooted the possibility of removing those sacred leaf images. However, I felt that that design was a little cramped, and after seeing Fireondesign I was struck by how much I preferred viewing the portfolio images as one page, rather than clicking back / next links. I’d also just felt it was time to move on.

At the same time, I wanted to keep the elements I was happy with, such as the journal entries style. I’d started to introduce new elements into this anyway (such as the wee icons) that stem back to a design idea I had back in July, which I then later shelved, prompting me to write this. However, a few weeks ago, I realised what needed changing to make it work, so I dug it out again, and introduced the vertical landscape image that became the dominant part of the new design. I liked it, so I set to work with a duplicate of my textpattern database, and css files wiped clean.

Fixed, then Fluid, then back to fixed again

One thing I really wanted to acheive with this was a fluid layout. The old site had a lot of grey-space that looked bad on large resolutions. Although I’m not a fan of fluid layouts normally, I realised it would avoid having a large expanse of blue to the right of the tree, but the more I fiddled, the more I realised that the layout I really wanted to acheieve wasn’t possible. Originally, I used a technique devised by Cameron Adams, dubbed Resolution dependent layout. Basically, once the window was larger than 1170px (a minimum size of 770px for the content and 400px for the side image) a new stylesheet takes over thats fluid. However, in IE this conflicted with the live comment preview, where every key typed caused the large tree to reload. Ouch! This also had a knock-on effect on my bandwidth.

Having tried every other possibility since then, I’ve still not been able to produce the flexible layout I really wanted. Solutions that looked good in most browsers broke in either IE or Opera. While it was tempting to cut out IE and just send it plain, unstyled text, you just can’t go doing that sort of thing (not if I want clients anyway). So, for now, good ol’ fixed width it’ll have to be. I’ll still keep looking for solutions…

That big background image

I also wanted to use the background image without creating unnecessary horizontal scrollbars. This was made hard by the fact that I had a background repeating image, and a single tree image to overlay that (so that there wasn’t a big repeating tree every 600px or so). To get around this, I applied the repeating image to the <html> tag, and the single tree image to the <body> tag like so:

html {
background: #fff url(tree.jpg) repeat-y 770px 0 fixed;
}
body {
background: url(solotree.jpg) no-repeat 941px 0px fixed;
}

If you’re interested, the photo was taken in Swainswick Valley, part of the Cotswolds. Unfortunately, I didn’t take it, its a stock image.

Whether I keep it is under review. Its been problematic to implement, and I may decide to remove it a later date. If I do, it does mean I’ll have to redesign again…

Relative font sizing.

I’ve been using percentages and ems on clients sites for a long time, but I’d never given up control on my own site. I still haven’t. My precious designer head just can’t cope with the inconsistencies. Again, something to work on in the future. Then again at the rate at which Firefox is being adopted, maybe it won’t be a problem using pixels in the not-so-distant future.

The new corporate font is called Monark, and its available from the Identikal foundry. They make beautiful typefaces.

The ‘nearly there’ launch

Then for some reason, late one Saturday night an hour or so before I hit the sack, I decided to just dump the current site design and replace it with the new, unfinished, barely tested, design. Too tired to have the foresight that this might be a bad idea, it wasn’t until I woke up the next morning, that the panic started.

Despite this, it still got picked up by StyleGala and the CSS Vault (137 submissions for an unfinished site – what kind of madness is that?), followed by much bug reporting their comments. In hindsight, it may have been unwise to progress the design in public, but it has given me the impetus to get it finished. Had I not taken this leap, it may never have been done.

Since then…

In the last week I’ve polished, bug fixed, changed from siFR to traditional FIR (for more control over the typography), tidied up the hierachies (so there’s only one <h1>, followed by <h2> and <h3>). There was also a lot of really useful feedback, a lot of which has been implemented.

So, there we are. Now is the time to report any annoying bugs I’ve missed. For this post, ignore the ‘please email bug reports’ message, and leave any problems you’re experiencing.

Invasion of the Bandwidth Suckers

To say that I’m fuming right now would really be an understatement.
Its bad enough having a live but unfinished site, and not getting time to work on it, but this took the biscuit, the teacup, and whole sweet trolley.

Earlier today, I had an email warning that I was currently 7gb over my 25gb a month bandwidth limit. WTF*?! In a panic, I added a new .htaccess file to redirect all pages to a basic holding page to try and slow it down a bit (please note: this was me, not SegPub. I didn’t get ‘cut off’). I later removed this after I’d calmed down a bit, but the fact remained, something fishy was going on.

Jeremy at Segpub tracked down the cause to a single IP address requesting the landscape image on the right, every second for the last 2 days! Thats over 700,000 times!

*Please note, thats the closest I’ve ever come to swearing on my blog.

Update: The admin of the network concerned contacted me to (sort of) explain what had happened – “I’m told he had found your page in a google search about BBedit, and had left a browser open at that page. I have no idea why the browser continued to download your image. I am convinced that it was an unfortunate accident,
though, and not done to cause you any harm.”. It also appears to be have been over 16 hours, rather than 2 days, and that it was someone who went home, leaving the page reloading.

This still leaves the issue of the reloading page. I’d seen this happening in IE only at the weekend. If anyone else can confirm that this is still happening, I’d be grateful. The image will probably reload on resize though.

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.

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.

For this version of NetNewsWire, Brent Simmons had asked me to redesign the interface icons. A new set was created, although later on in the beta cycle these were redrawn by Bryan Bell to keep them in a family feel with MarsEdit (which had already been finished by that point). So that my icons didn’t go to waste, Brent has added a way of swapping themes via Terminal:

  1. Quit NetNewsWire if it’s running.
  2. In the Terminal, type: defaults write com.ranchero.NetNewsWire toolbarTheme JonHicks (Hit return.)
  3. Launch NetNewsWire.
  4. To get back to the default set, step 2 should be: defaults write com.ranchero.NetNewsWire toolbarTheme default

Here are those icons:

Final NetNewsWire Icons

I’ve had a lot of requests for a write up on how I go about creating icons, so I’ve written an article, using the process from designing the NNW icons from sketches to finals as the basis. This will hopefully be published soon, more on that later.

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.

Looking at sites like JustwatchtheSky, Jason Santa Maria and Airbag with their attention to detail and originality makes me lust after some of what they’ve got. They’ve thought their sites through, and it shows in the execution.

Why bother redesigning? Redesigning is the new staying in, its where its at. Its two turntables and a microphone. Dave Shea(twice), Doug Bowman, Ryan Sims, Ethan Marcotte, Adam Polselli, Zeldman and Nathan Borror have all unleashed excellent redesigns so far this year. Doug Bowman even released a ‘limbo’ redesign, a plain white minimal space inbetween designs. In a strange sort of reversal-of-the-universe, Scrivs has conversely kept the same design for at least a couple of months!

Seriously though, its nothing to do with any of that. As a designer, I like to keep things fresh. When I look at sites I’ve designed for clients, after a while I wish that I could improve this, redo that, introduce X feature. I can’t, but I can do that to my own site! You just feel the urge to change sometimes. I also look at my site a lot (usually when responding to comments) and I get a bit sick of the sight of it. Problem is, no new design I do looks good enough!

A few weeks ago I announced I had a new design almost ready to go. Then after taking advice from Leigh and a mysterious one-eyed sock monkey, I dumped it. There were many things wrong with it, but basically it came down to this. Why replace a design with something not so good, just for the sake of keeping things fresh? I still like what I’ve got here, whereas all my new ideas just looked like a copy of someone else’s site.

So this is the plan. There’ll be no radical change at hicksdesign, I’m going for a Simplebits approach now. Keep the general look and layout, but freshen it up. Not reinventing the wheel, but polishing it certainly. A print css file here, new images there.

Thats all I’m going to say on the matter. I don’t want this to become a blog about a blog!

Computer Arts Projects

The current issue of Computer Arts Projects (“Typography”, #57 April 2004) features an article on icon design, which includes a couple of excerpts from an interview with me, next to luminaries such as Susan Kare and Gedeon Maheux (Iconfactory). I feel like a bit of an imposter next to these gurus, but its real nice to get my first ‘real’ bit of press.


(I got a very wee mention in MacUser last month, but this one feels like the first.)

lists of 2003

The end of the year is nearly upon us, and the time is ripe for a nostalgic look back over the year. In true boy-fashion, this reminiscing is reduced to a series of lists:

Events:

  • Daniel HicksThe main joy this year was the birth of my son Daniel (my mini-me) back in April. We are now a family of four.
  • Started playing with XHTML and CSS properly at the same time, I’d no idea where it’d lead…
  • Being linked to by Zeldman, Shea and everyone else kind enough. I’ve been overwhelmed by the sense of community and just plain nice folks out there.
  • Finally getting an iPod. As our American cousins would say, ‘It rocks’. It goes with me everywhere, in the car, on walks, even the loo. My life now has a soundtrack.

Songs:

  • “Growing on me” by The Darkness
  • “Light and Day” by The Polyphonic Spree
  • “Am I wrong?” by the Mull Historical Society
  • “The supermarket strikes back” by the Mull Historical Society
  • “Second Sight” by Placebo
  • “The Laws have changed” by The New Pornographers
  • “Natural Anthem” by The Postal Service

Typefaces:

Strong Bad Emails:

Inspirational Websites:

There are so many sites that visit/read and enjoy, so this is slightly unfair. But these are the ones that I wish I’d done…

I’d love to know what you’d have in your top lists…

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?

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

The personal site was a public learning space. The design of it evolved as my knowledge of XHTML/CSS methodologies improved, which meant that the CSS contained redundant styles and was larger than it needed to be. This time, I started completely from scratch.

The portfolio section has been rebuilt using Movable Type, and whenever I get a chance, I’ll write up the templates so that others can use the code. Updating it should now be easier than the old flash site.

This is sort of a ‘phase 1’, which means I’m too busy with paid work to do everything I was wanting to. There are still some rough edges, and there will be more slow evolution of the design to come. My plan is to add another style option that works better under 800×600, but not as plain as the ‘diet’ style. One thing I have been able to improve on, is the look of the search results page. Under MovableType, this is a .cgi page, and can’t contain any of my php includes that make the site easy to maintain. A few days ago, I finally found a fix on a site called MT-Stuff, and all is well.

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.

The sites were designed in a bit of a hurry – just over a week from flat jpeg mock-ups to final site templates with images and CSS. First, flat mock-ups were created in Fireworks. As well as an easy place to fiddle and experiment, this allowed me to use a frame for each page I was designing, and have all common navigation/logo elements on a shared layer. If I modified the nav on one page, it updated throughout. Each frame was labelled (e.g ‘homepage’) and when the layouts were all ready I exported with the option of ‘frames to files’. The frame label becomes the filename, and Fireworks will automatically replace any spaces you’ve used with an underscore, ready for the web. This is often how I create images for elements like titles, and makes updates and changes easier to find and execute.

Once the design was agreed, these layouts were then converted into XHTML and CSS. The Fireworks slice tool was used to isolate areas on the designs that needed to be images – titles, special bullets etc. I keep a basic site template which has a folder structure, an index XHTML page with doctype, blank meta tags etc. It also has commonly used snippets of css, javascripts and php. This gives me a good basis to start working on, and saves trying to find the same old bits of code.

The 2 microsites are almost identical. Using CSS to control the design meant that resources could be shared and easily updated. Elements such as the option of ‘hiding the logo’, enabling users to be less conspicuous. This is just a stylesheet switcher, and re-uses all the css already used in the site, and just adds a line over-riding the background-image attribute of the logo DIV, removing the logo. It also uses a lot of CSS Image-replacement, including rollovers with pixys no-preload method. Why use such new techniques on a commercial site? Well they work, they allow the page to be more accessible, and they cut down on code. I’m currently writing an article on how to use css image rollovers on horizontal menus, as I’ve been getting a lot of questions about that.

The coding side was all done in BBEdit, but my recent discovery of skEdit means I’ll be using that in future.

Inevitably, when these templates are handed over, the content of the site isn’t final. At the very last minute, elements are changed or removed, occasionally to the detriment of the design or the code. Please – no ‘this page doesn’t validate’ reports on this one – little things like uppercase tags will creep in. This isn’t ideal, but it is the real world. Unlike my personal site, I don’t have the luxury of making adjustments ‘mid-flight’.

What I didn’t foresee were the problems this caused with the content management system. It contains its own rendering engine, which hasn’t got the rendering capabilities of a modern browser. Therefore anyone using the CMS couldn’t see the styles when they were applied to new text. It required a leap of faith on the part of the client that everything would look OK in the browser. Fortunately, both Clarity and Adfam were pleased with the benefits of a css driven site.

gettin' all strict

I’ve just changed the site from being XHTML Transitional to Strict, and I was surprised how little work was involved. What follows is a list of everything that didn’t validate, and had to be changed:

  • remove target=”_blank” from <a> tags. Opening new windows breaks the back button anyway, which is an accessibility problem. You can always use a simple javascript to open new windows, which is what I’ve done for the desktops section
  • remove border=“0” from <img> tags (use css instead – img {border:0} )
  • add <fieldset> tags around form elements. (You can actually use p, h1 etc, to validate, but fieldset makes more sense.
  • remove language=“javascript” from javascript tags
  • change any remaining name=” “ attributes to id=” “

The last 2 were leftovers from the original Movable Type templates. In a matter of an hour the site was converted. The search and replace function within Movable Type meant I didn’t have to go through every entry individually.


Why bother? Well, apart from a chance to be even more anal, it was education. My reason for creating this site in the first place was to practice and try out new things. While it doesn’t mean I have a thorough understanding of all the nuances of the XHTML strict spec, I know more now than I did a few hours ago. (There may well be the odd entry page that doesn’t validate – let me know if you spot one.)

Its all about butterflies

entomology, Zen Garden entry

More good news! I’m very happy, because my first submission for the CSS Zen Garden has been accepted and now up on the Zen Garden Site. Its called ‘entomology’, for reasons that will become obvious. If you use Camino/Mozilla, you’ll get to see everything, as there a few pseudo CSS elements that aren’t essential, but just add a little something.

The Zen Garden is a good challenge for CSS designers – you can only change the stylesheet (although the HTML page is well marked up) so it really hones your skills. I’ve learnt more about CSS selectors by doing this, and how they can really cut down on coding.

hicksdesign is sexy!

I was chuffed beyond belief that Zeldman put up a link to my site under the heading ‘sexy standards based sites’ – it really made my day. Then the fear came – I remembered all those niggly issues with the site that I hadn’t solved yet (Couldn’t get to all the content in IE for Mac or 800×600 screen resolutions, and missing scrollbars in Opera 7). There were also some issues that I hadn’t come across, but folks were kind enough to let me know without being overly critical.

I’ve spent time on all these issues, testing it to death, and I reckon they’re now all sorted. When I get a chance I’ll write up my findings for a future article on vertical centering in CSS and the workarounds I discovered.

Please continue to leave comments if you come across any other problems. At the moment this is just my personal site, but my intention in the future is to move my portfolio site into here as well. I’d like the place to be as tidy as possible when it comes…