My latest Squarespace website project was a site makeover for nu funk record label Boogie Boutique. Having already created and managed their website with the Squarespace platform, they wanted me to give the site a fresh new look with a bit more polish and design flair than their existing site had. My job was to bring to light the great content (photos, audio tracks) that they already had, and to create a framework which they could easily work with moving forward. They also wanted to integrate Facebook like buttons, embedded audio and video players, and generally smarten things up with a bit of subtle animation/movement. Before & after screenshots are below…

After: new homepage – the fruits of our labour
(click to check out the live version with subtle animation – hover over the boxes on their homepage)

Before: their old homepage

The only real struggle was getting Squarespace to play nicely with some of the more advanced additions such as the fancy Jquery sliders. We had to do some workarounds, but the overall result still looks good. I am really looking forward to the release of Squarespace Version 6 – which apparently is coming very soon – as I hope that the new version will have addressed some of the current system’s limitations and make it even easier to create professional-looking, easy-to-use websites in future.

If you’re like the Boogie Boutique guys – finding it hard to make Squarespace look pretty, or stuck with a boring cookie-cutter template – drop me a line and I’d be happy to work with you to help improve your site’s look and/or user-friendliness.

My lovely and rather clever client Helen from Where There’s Smoke contracted me to help her showcase the work that they do in a fun, engaging way on their website. Rather than just telling in words what they do, how they do it, why and for whom, we worked up a tabbed slideshow which uses toys and other objects to not only illustrate these concepts, but also reflect what Where There’s Smoke is about: thinking creatively and coming at problems from a different angle.

My job was not only to design and build the website, but also to help figure out how to structure the site and to create all of the slides – as well as feeding back whenever certain bits of text content might be tweaked or improved in order to make things really simple for people to understand. This is my favourite kind of project: something I can get involved with at many different levels, calling upon my photography and artworking skills, as well as my web brains. It’s nice to get to flex all those muscles in one go

I used a handy jQuery slideshow rather than Flash, so it’s smartphone friendly and can be easily updated in future. jQuery is so cool, it’s my new favourite thing. I love how such a small, lightweight little bit of code can produce pretty animation. It makes both my tech geek and my design geek happy.

The site is built on Squarespace once again, and you can check it out here.

If you need to replace your Flash website with something more mobile-friendly and easier to update, or if you like the look of Squarespace, why not drop me a line.

Recently I was contacted by Sarah Louise Dix, a rather chic couture upholsterer and designer of stunning bespoke furniture. Like many small businesses/sole traders, Sarah had a website which had been created by a friend, and she got in touch because her friend was no longer able to update the site. Although she initially wanted me to take over the updating, after a chat over hot chocolate, it became clear that the best approach in the long run was for Sarah to move to a system where she could control the site herself, without having to pay someone to do the updates for her. With the increasing popularity of iPhones and iPads, it also made sense to move away from Flash, which her site used for its image galleries, as Apple still seems dead-against supporting Flash on these platforms. It’s no good creating amazing furniture if people can’t see it.

While there are many low-cost tools out there that could have done the job, Sarah wanted to keep most of her existing site’s design, and these tools would not have been able to replicate certain features such as the style of the image galleries she had for her products. And as she makes bespoke high-end products, she needed the site to keep its polished and professional feel, which is not easy to achieve with something like Google Sites or ClickPic. And I like to ensure that even the little things are covered when it comes to design, such as the little favicon which appears in the browser next to the web address… to me, details like this are what set apart professional sites from ‘off the shelf’ sites. And it’s all about detail when it comes to Sarah’s target market.

Luckily, the style she had on the site closely matched what Squarespace could do, with a little tweaking. So I created a custom Squarespace template, migrated her existing site content into the new system, and took the opportunity to also freshen up a few things and add some functionality like a News section. We also added a private area for Press, which meant she could direct media contacts to her own site rather than sending them emails and large files via DropSend.

A couple of hours of training, and Sarah was all set to take control of her site in future. I’m sure I’ll still pop over to the site from time to time, if only to drool over her amazing creations.

Now that the internet as we know it has been around a while, you’d think that people would have stopped making truly horrible, un-usable, unreadable and downright ridiculous websites. You’d THINK that, but you’d be wrong. The aptly named Webpages That Suck has pulled together their top 25 worst websites of 2010, which is a great place to look for some holiday season laughs. My favourite has to be number one on the list: Yale School of Art (pictured above).

Having been to art school myself, I totally understand that they are doing a post-modern interpretation of a website, parodying those early 90s websites with the same tongue in cheek that Duchamp, Warhol or Koons had when making their art. I get it, OK? But the difference between a website and a piece of art is that a website such as this has to perform a functional duty: to disseminate information to the viewer in an accessible way. Art doesn’t have to perform this task. Art can therefore be as sublime or ridiculous as the artist wants it to be, without necessarily infringing on its raison d’etre in any way. Sure, art can disseminate information, but usually this is not essential factual information that the viewer has come to the art piece looking for; generally, the message of art is that of conveying the artist’s viewpoint or evoking emotions on something.

Websites are different. Now, I am not saying that all websites have to conform to the norms of usability and accessiblity. But websites that act as the one and only online interface for any business, organisation or individual should. There are laws about this stuff for a reason; defying these on informational websites doesn’t make you clever or creative in the eyes of your audience: it simply makes you annoying and stupid. Can you read – or even FIND – the school’s address on the page shown in this image on the right? Click it to view a larger image…

Don’t get me wrong: I *love* online art. I have contributed to sites such as SITO’s HyGrid (one of the earliest online art collaboarations) and I think The Johnny Cash project is a brilliant combo of art and wiki culture. And there are plenty of great sites which push the boundary between art and design. But the boundary between these two areas is really quite important when it comes to websites such as the Yale one. I would have no problem whatsoever if the Yale folks decided to make an online art piece. And I’d be fine with them creating a website as unreadable as the one they have, so long as they made it easy for people to opt out of that design and view the site in an alternate version.

My problem with the Yale site is that this illegible beast is the only place you can find the information, and they have made getting it pretty damn difficult and frustrating. I don’t care how cool or PoMo it looks, to me, this is bad design. The goal of design should be to enhance the use of an object, not get in the way of it. If you bought a can opener designed by a product designer, no matter how beautiful it was, if it didn’t open cans you’d be chucking it in the bin. If not, you could hang it on your wall and call it art. Art isn’t meant to be useful; design is. Anyone who has ever clicked ‘skip intro‘ or ‘view HTML version‘ buttons on a Flash website knows this.

The funny thing is that the Yale site used to be even worse: it used to have a flashing animated background (check it out here – warning: may cause seizures!). I am guessing some poor unsuspecting epileptic made the mistake of visiting their site, and the resulting lawsuit* forced them to change it

* I don’t really think this, but it sounded more intriguing than what probably actually did happen.

One of the things I love the most about my life as a self-employed freelancer is the variety of work I get to do. Having spent most of the last year working with a longstanding client on a large-scale SEO project, it was really rewarding to get to flex my design skills – not only in terms of website design, but also in creating a logo and Powerpoint template. Although this new client already had a clear idea of the overall logo design he wanted, I helped him take the ‘back of the napkin’ concept and develop it into a proper logo. He had also expressed an interest in a more illustrative (rather than photo-driven) website, so I sourced some illustrations and built a website around his ideas. You can see the fruits of our labour at www.zeddcap.com so have a looksie if you fancy learning about a new kind of investing that’s now available. The site is built in Squarespace once again, as it’s such an easy product for clients to easily use. Having worked on a lot of WordPress sites recently, it’s nice to get back into such a really simple tool again. I’ll always have a soft spot for Squarespace, I think.

This year Diamond Light Source (the UK’s rather fancy and very shiny synchrotron scientific facility) is exhibiting at The Royal Society’s Summer Science exhibition, and they decided they’d like a microsite to help educate people about the talks they will be giving at the exhibition, as well as keeping the dialogue going with visitors, reporting on each day’s highlights and showcasing photos taken at the show.

Because they wanted to be able to easily update the site remotely from the exhibition, and to allow scientists (not just web people) to be able to contribute without needing training, we opted for Squarespace as the platform for the site. The ability to upload a zip file of photos straight from the camera, and have the system automatically unzip and resize them all was a real plus.

I designed the site to match their exhibition stand, and also incorporated some Flash and interactive elements that help people understand more about what the heck a synchrotron is. Have a play around in the Machine section of the site yourself: it’s not quite the same as playing with a real particle accelerator, but it’s definitely a lot safer for us non-scientists!

We’ve also incorporated some audio interviews with the scientists who use the synchrotron and who will be at The Royal Society talking to visitors about their projects. There are some really interesting stories – my favourite is Joanna Collingwood’s study of metals in the brain, and their role in disorders such as Parkinson’s disease and Alzheimer’s.

I certainly learned a lot on this project… and as a side effect became slightly addicted to playing with the particle accelerator interactives (my fave is the Vacuum). If you’d like to find out more, The Royal Society exhibition opens this Friday and runs until 4 July. Or visit the microsite now… and try not to get addicted like I did!

My latest website overhaul project is for Hackney’s youth charity, Off Centre. They are a lovely organisation which helps young people who live, work or study in Hackney deal with issues such as violence, depression, neglect, sexual health, family breakdown and all the other things that can have such a huge and lasting impact on people. I was really excited to be working with them on a new site, as they have a real opportunity to make a positive difference by using the online medium to reach and communicate with young people who need support.

Having just gone through a rebranding, they wanted a new website that reflected the new brand ID as well as the vibrancy and energy of Hackney, one that would appeal to their core audience of inner-city 13-25-year olds. The site had to feel like a place that young people could identify with, a place where they would feel welcome, and most importantly, a place that didn’t feel clinical or too far-removed from the environment where they live. We opted for an urban illustrative design, allowing the colours of the new brand to stand out. Because Hackney is such a culturally-diverse area, the illustrations also ensured that no specific race, age, social or ethnic background was depicted photographically, meaning anyone in their core audience could identify with the site.

Filled with helpful information, activities and explanations, I think the new site will be a rich resource for Hackney’s young people. I think it looks really amazing, if I do say so myself! It’s definitely one of the sites I’m most proud of, for many reasons.

Oh, and in case you’re interested, the site was built on the Squarespace platform once again, because it’s so easy for non-techies to use. We’ll also be plugging in a few 3rd party tools such as Eventbrite and Polldaddy to flesh out the functionality.

As it’s Friday, here’s a little chuckle to welcome in the weekend:

Remember the heady days of the 90s, when everyone suddenly jumped onto this new-fangled internet thing, and created multi-coloured, flashing, clashing web pages that would make your grandmother’s eyeballs fall out? Wish you could relive those days now? Well the good news is that you can! Mike Lacher at Wonder Tonic has created what he calls a ‘Geocities-izer’, which converts your shiny lovely website into something that looks like it was designed by a colourblind chimp on acid.

Here it is in all its multicoloured glory: Geocities-izer a-go-go!

(make sure your sound is turned up to experience the full audio-visual extravaganza!)

My latest client WordPress site may look clean & simple, but there’s a lot under the hood. Visual Seating is a new service which offers theatre-goers the ability to ‘test-drive’ seats before booking tickets. They can click on any seat in the theatre’s seating plan, and see a real photographic view of the stage from that seat.

My job was to build this functionality, so site visitors can see the service in action. You can have a go yourself on the online seating demo. It seems pretty straightforward, but getting WordPress to play nice was a little tricky. We got there in the end…

In addition to the demo, I also customised a WordPress theme to tie in with the client’s brand. I think the result looks great, and allows the images to speak for themselves.

Well, at the January NetTuesday I managed to build a pretty decent-looking website live, in 33 minutes. The lovely Amy from NetSquared has uploaded some video of the presentation, and the videos of the actual website build will be coming soon, I’m told. But in the meantime, you can have a look at the slides from my presentation about how web apps have fundamentally changed the web design industry and web project lifecycles. Some linkies for you:

- Web design before web applications (video)
- Web design after web applications (video)
- View the presentation (slides)

I was really thrilled to see the Meetup attendees gave me a 5 out of 5 rating for the presentation, and I hope they will find the info and tips to be useful. It’s a lot to cover in an hour (both theory & practice), so the slides may be a very broad generalisation, but I do think the concept holds true: making websites today bears little resemblance to the way we used to build them even just a few years ago.

I think the really interesting thing to me is how I now tend to input content first, and do design second. This is completely the opposite of how we used to do things. But it’s a great tip when working with content management systems like WordPress or Squarespace, because it means you can create a design that you know will work with the type of content you have. So often we as designers would mock up something that looked beautiful with a couple of paragraphs of ‘lorem ipsum’, only to find that the design didn’t work so well with loads of text and several photos, which is what the client needed to have on the page. If you’re a designer, give it a try on your next project.