I recently worked on the ‘front end web design’ for a web developers community called GAWDs (Guild of Accessible Web Developers), you can view the full design below;

The original website design:

The new website design:
When creating the new design it was clear that as well as the web design requiring a brush up, so did the logo really so this was given a freshen up without actually changing it too much. As shown below;

Usability layout issues aside (but of course taken into account when designing), from a design perspective it was my aim to create something that had an air of stylish geekism.

What came to mind for me was the Channel Four sitcom ‘The IT Crowd’ (hilarious show – a must watch), and the amusing pixelated characters I remembered from the opening sequence of the show.

The IT Crowd Pixelated Characters Above

If you’ve ever worked in a big company and relied upon an IT department, or any any sort of tech geek yourself, this show will just have you howling.

“Have you tried switching it off and on again”

Anyway, I digress….

So I decided to experiment with a pixelated design feature because all web designs and indeed all website images full stop are ‘pixelated’. To create this feature I first sourced a photo that offered a wide range of colours because I wanted it to cover a good spectrum of shades, and therefore searched for flower photos until I found the one that was just right. The pixels you see in the design orginate from the pixels within a flower photo.

What I then did is meddled with the edge of the pixelated rectangle I had made, by inserting small grey pixels of my own so that the pixels would blend artfully (I hope!) across the grey area which is the area of the header that will expand to the width of the browser window.

I was also inspired by the notion described by David Airey (popular and influential design blogger) that nature is a great source of ‘colour palette’ for design and as the website is a community for web developers and designers, this seemed appropriate also.

David says on his blog:
“Nature provides some of the most striking and beautiful color palettes imaginable! You don’t have to look far to find great inspiration.”

What Is Front End Web Design?
There are two terms used commonly in the industry for people who work together to build a website, those are;

Web Designer, and
Web Developer

A web designer (myself) is the person who creates the ‘design only’ of the website; this involves creating a visual layout, graphics and icons/imagery to make up how the website looks. It’s an image only and nothing more, you can’t click it yet and it’s not a working website.

A web developer (also sometimes called web programmers) are people who build websites using coding languages such as .html, .php, .java and .sql. It’s common for a web developer to use a visual image based design created by a web designer to build a website from.

They literally cut the design into sections and ‘build’ the website, including placement of the links within that imagery in .html so that it becomes a working website. It’s usual that the web ‘designer’ would include in their visual design an indication of where the links should go within the design framework. You can see that in the GAWDs web design above.

The design is what it looks like to visitors, and the coding (web development) is how it works when you are actually clicking from page to page and using it’s functionality as a working website.