Themes

From experience, this is the thing most people are interested in to begin with.

How to Install a Theme in Firefox

There are two places you can choose themes from. The first is the Firefox Add-Ons site and the second is the Firefox Personas site.

To Install a Theme From the Firefox Add-Ons Site

• First off, visit the Firefox Add-Ons site
• Click on the image of your desired theme
• When the page loads, click the button that says ‘Add to Firefox’
• When prompted, accept the software installation
• A Firefox dialogue box will open up after it has finished downloading. Click the button that says restart.
• Your browser will open up, sporting the new theme that you just installed. Easy :)

If you want to switch back to another theme you have installed, go to Tools > Add-Ons and click the Themes tab. Select ‘Use Theme’ for the theme you want and hit restart again.

To Install a Theme From the Firefox Personas Site

• First off, visit the Personas site
• The cool thing about this site is that once you install their plugin, you can hover over any of the themes and it will automatically change your browser’s theme on the fly, so you can see what it would look like without needing to restart
• So click the button that says ‘Get Personas For Firefox’ and when prompted accept the installation
• Click the button that says Restart Firefox
• Your browser will open up with the theme you selected and you can also hover over any other theme in the gallery to see what it would look like and click ‘Wear It’ to install it.

Optionally Customise the Layout of Your Buttons and Toolbars

So now your browser looks just the way you want, save for a few buttons that you’d like to have in different positions. You can alter this to some degree too. To do so, right click on the toolbar and select ‘Customise’. A dialogue box will open up and you’ll be able to drag your buttons around your tooolbar until everything is where you want it to be.

How to Install a Theme in Google Chrome

• First off, visit the Chrome Themes Gallery
• Choose the theme you’d like and hit Apply Theme
• The theme will be applied instantly without a need to restart

If you want to revert to the default theme, go to your ‘Settings’ icon, then ‘Options’ and then the tab named Personal Stuff.

Add-ons

Add-ons can improve your browser in just about any way imaginable. I use Firefox as my main browser because it has by far the widest range of addons and plugins available and is a very secure browser. But Chrome has a decent set of extensions and more are appearing all the time, while extensions are even being developed for IE8 now.

How to Install an Add-on in Firefox

• First, go to the Firefox Add-Ons site and pick on of the hundreds of helpful plugins available
• Click on ‘Add to Firefox’
• When prompted, accept the software installation
• Click Restart browser and your addon will have been installed

To see a list of all installed add-ons at any time, go to Tools > Add-Ons and click the ‘Extensions’ tab. While add-ons are very helpful, try not to get carried away installing everything under the sun as they will eventually slow down your browser!

How to Install an Add-on in Chrome

• First, visit the Chrome Extensions site
• Choose your extension and select ‘Install’
• A dialogue box will appear telling you what info it needs access to. If you trust it, select ‘Install’
• The addon will be pinned to your toolbar

To manage your addons, go to your Settings icon and select ‘Extensions’.

How to Install an Add-on in Internet Explorer 8

• First, go to the Internet Explorer Addons site and pick and choose one of the addons
• Click on ‘Add to Internet Explorer’
• When prompted, click on ‘Add’
• The addon should now be installed, though, rather unhelpfully, IE won’t give you a success message

You can view all of your IE8 Add-Ons by going to Tools > Manage Add-Ons

So, you can see how quick and easy it is to install an extension or add-on to whatever modern browser you’re using to add a bit more power or customisation and makes things a little more personal.

In the next post I’ll be writing a brief breakdown of the plugins I use and why they help me during every day tasks.

Check out the other posts from this series:
The Power of the Browser – Choose Your Weapon (Part 1 of 3)

So what is a browser?

For most of you, it’s likely to be that little blue ‘e’ you click on your desktop that magically brings the internet to your fingertips. Right now, there are 5 major browsers that are used by around 99% of the UK population online (Source: StatCounter Global Stats). Which prompts me to ask the question: how many of you know what browser you’re using right now? My guess is that about 50% of you are aware of whether you’re using Internet Explorer, Firefox, Chrome, Safari, Opera or another. For those of you that are aware, how many of you know what version of that browser you are using? Probably half again. Maybe less.

Click the image to view the chart from StatCounter

Just tell me which is the best one so I can move on please

I will. Well, I’ll give you my opinion. But before the bias, it’s a good idea to get your head around some of the vital differences across various browsers and why some are limiting what you can do on the web, while others are opening up opportunities to do things which may just blow your mind. At which point you’ll be able to walk around with the same sense of smugness as me ;)

I’m sure some of you are thinking “I’m not a web designer so why is this even important?”. And it’s a good question. I understand why you might think that. But perhaps the best way to answer it is to talk about the benefits of knowing your browser better.

Performance – You Have to Have it

Each browser has different strengths and weaknesses. I won’t go in to the details which you can see in the following extremely helpful browser performance graphic. But in a nutshell, Chrome is the fastest overall when it comes to displaying websites, blowing away the competition. In second place is Firefox, closely followed by Safari, then Opera, and lagging way back in fifth is the world’s most popular browser – Internet Explorer. For a lot of you, that alone will mean that you choose Chrome as your go-to browser. For others of you, it may prompt a lightbulb moment that maybe IE isn’t necessarily your best bet, even though it comes bundled with Windows on most new PCs (until recently).

Click the image to view the chart from Six Revisions

As you might expect, all these figures show is how quickly they display websites and load various elements of a page such as images, videos, Javascript animations, Flash etc. Although this is very important, as people want more and more instantaneous access, there are other things to consider when choosing your browser.

Security – Do Not Compromise

This section, unfortunately, needs to be dominated by one browser vendor in particular. Microsoft’s Internet Explorer has been well documented in the last few years for having major security issues in versions 6, 7 and even their most recent version – 8. In fact, these security issues have become so prominent and severe that both the German and French governments have publicly advised against using the browser. Ouch.

Click the image to view the story

It seems hackers target IE browsers more than any other partly due to its global dominance and partly because of its closed source nature. What I mean by ‘closed source’ is that IE browsers don’t allow Joe Bloggs to look at how it is put together. Only Joe Microsoft can do that. While you might think that this level of secrecy should make it more secure than an open source browser such as Google Chrome or Mozilla Firefox, the opposite is actually true. How can that be, I hear you ask. Well, open source is, as the name suggests, open. Which means that anybody can look into the code behind the browser and spot vulnerabilities or security flaws and offer suggested fixes to the makers of the browser. Not just the guys at Microsoft. It’s a self-improvement cycle and it’s aided by the thousands of developers around the world who are allowed to contribute to it.

The very nature of open source software and the community behind it is what drives true progression in this extremely competitive environment. This is why you’ll find very few web designers and developers who use any version of Internet Explorer as their primary browser.

Why, then, does IE still manage to dominate the browser market today. The answer, quite simply, is that it is bundled with every version of Windows. At least it was until February this year. But that’s an entirely new topic.

Graphics – Display Beautiful Things Beautifully

Different browsers have different capabilities when it comes to displaying images, graphics, text and various other elements. Just like all TVs are different, so are browsers. These interesting benchmark tests – Text Rendering and Image Rendering (Source: graphicrating) show that this is an area where Internet Explorer finally does something right, topping the table ahead of the other 4 main browsers in text rendering and coming in second for image rendering. With images, Firefox surprisingly lags behind in last place. Although, since these tests were carried out, Firefox has made significant improvements to it’s graphics engine. Another example of community-lead development. Chrome features well in the images test but not so well with text, while Opera and Safari come in no higher than third in either test.

Click the image to visit the graphicrating website

Supporting Web Standards – Build it Right

This may sound like a really boring subject, but when you see it in action, you’ll understand why it’s important, so bear with me.

Many people look at websites and believe they are not dissimilar to printed works. Draw a blue box, stick it there. Write out menu links, stick ‘em over there. And everything will stay where it is. If it were that easy, I would do it for free :)

Unfortunately, it isn’t that easy. The way a website displays relies on various different coding languages used by the web designer. The language that controls the visual layout of all modern websites is called CSS (cascading stylesheets). Now, the problem with this is that all browsers interpret CSS slightly differently.

As a visual example of what that means to you as the end-user, let’s have a look at some screenshots of this website displayed in Internet Explorer 6 – which has notoriously poor support for web standards.

Extra white-space is thrown in, things are mis-aligned and the main body background image has disappeared altogether

IE6 doesn't support transparency in images and instead puts an ugly grey box around them. More white-space is thrown in and some floated elements drop below eachother

If you’re viewing this site in recent versions (at time of writing) of Firefox, Opera, Safari or Chrome, it should look pretty much as intended.

This inconsistency across browsers means designers often need to spend many hours correcting bugs and issues in older, poorer browsers (quite possibly for a very small user base), even though it may display perfectly well in modern ones. This usually means writing a general stylesheet, then another one for IE6 and sometimes even one more more for IE7, because each one displays websites differently. But with so many people still flogging the dead horse of IE6, can you really afford not to design for it?

The end result, as you might expect, is that the designer needs to offset the extra hours against the client by charging more. It’s a necessary evil and will never be completely eradicated unless it can be guaranteed that all browsers will behave consistently. But with the rate at which new technology and devices are coming into the market, it looks as though there will forever be this necessity for fixing things across different platforms.

Incidentally, WHD renders reasonably well in IE6 – I just turned off the IE6 stylesheet for the purpose of this post :)

Your turn to take part. Go to this website and wait a few seconds until the number stops increasing. That number is the generic score given to your browser for its adherence to web standards. The Acid3 test is:-

…the third in a series of test pages written to help browser vendors ensure proper support for web standards in their products.

(Source: The Web Standards Project)

Given that the Acid Test is the standard to which many developers and designers build websites to, it would help if all browsers were made to support the same high standards. Unfortunately, no matter how well built a website is, some browsers such as IE6 have such poor support for web standards, that until there is a major shift in the amount of people using it, the web will never fulfill its potential. Unsurprisingly, there are plenty of designers, developers, companies and organisations taking action and trying to hasten the demise of IE6. Here are just a handful -

• Bring Down IE6
• IE6 No More
• IE6 Funeral
• End 6
• Hey IT
• Stop Living in the Past

Of course, not everybody is able to upgrade their browser. Some companies won’t allow you to for fear of breaking their outdated systems that rely on it. Which is fair enough. But you have to ask the question of whether it can really be safe/productive running systems on a browser with such well-documented security and performance issues and whether the benefits of running a more modern and powerful browser outweigh the cost of upgrading aged systems.

There is so much more that can be said about the merits and drawbacks of designing for antiquated browsers. But to keeps things light, we’ll leave those for another day.

Customisation – Make it Yours

If I lost your attention in the previous section, this is where I’m hoping to get it back. When I talk to people about browsers (yes, I do talk to people about browsers), this is normally when they actually start to listen!

Providing you’re using a browser that supports add-ons and extensions you can do just about anything you can think of with it. Currently, the most highly customisable browsers are Firefox first and Chrome second. You can give your browser a theme, install countless helpful tools, edit the layout of your buttons, block pop-ups and ads and much much more.

Want to publish Facebook updates without having to visit the Facebook site? You can do that from a toolbar. Want to keep track of Twitter feeds without visiting the Twitter site? You can do that with an add-on. Translate entire websites into any language? Instant screenshots? Export saved passwords? Sync bookmarks across computers? Instant messenger in the browser? Customise Google’s appearance? Share news within 2 clicks? Email notifier? Whatever you can think of, somebody has built an add-on just for that. Not to mention the hundreds of themes you can install to give your browser a completely personalised look and feel.

Click the image to view the different themes available for Firefox

In the next post I’ll go into a little more detail about ways you can customise and improve your browser through the use of add-ons and plugins.

Check out the other posts from this series:
The Power of the Browser – Make it Yours (Part 2 of 3)

So, with that in mind, I’ve put together a question and answer post based on some of the questions I’m regularly asked about SEO. Hopefully it will help to explain some of the more basic ideas behind this tricky subject.

Right, you mentioned SEO – what’s that?

Well, let me give you a quick definition by someone who is an expert:

SEO is the active practice of optimizing a web site by improving internal and external aspects in order to increase the traffic the site receives from search engines

(Source: SEOmoz)

Essentially, it’s making your website popular/useful enough to people to warrant it appearing higher up the search engine rankings.

That’s a strange way to start a conversation. Anyway, I get that, but what does ‘active practice’ mean and what does it actually entail?

Well, this is where I need to exercise a degree of self-control and refrain from attempting to explain every single aspect of SEO. There are hundreds of ways I as a web designer and you as the client can contribute to improving your website’s SEO.

I can:

• ensure content is correctly and efficiently structured, ie – the main content’s title uses heading level 1, the second uses heading level 2 etc
• use alt and title tags for all images and give them meaningful descriptions
• write clean, accessible code that adheres to web standards
• provide a sitemap of all pages on the site
• submit the website to multiple search engines

You can:

• promote your website through various social media channels, such as Facebook and Twitter
• attempt to get other related or mutually beneficial websites to link to you
• write keyword-rich and relevant content for your pages (content is king)
• include a regularly updated blog documenting useful news and information about your business/website
• get involved in other blogs in your field to drive traffic to your site

These are just some of the basic ways to go about it, but none of them will guarantee you a top spot in search engines.

Our sitemap showing our site's structure

Why can’t you guarantee me a top spot in search engines?

Well, let’s think about it. If you have a website that sells pink teddy bears (for example) and you want to be number 1 in Google for when somebody searches on the term ‘Pink teddy bear’, you have to take into account everybody else who wants to be number 1 for the same term. If I search that right now I’m told there are over 3 million results. All of them want to be number one. So why should yours be rated higher than anybody elses?

What affects my position in search engine rankings?

The short answer is more things than I care to look into. A slightly longer answer is that nobody knows exactly how results are calculated. And certainly nobody, other than the search engines themselves, can guarantee ranking positions. Not only do they change all the time but they are also different depending on which search engine you are using. so if you search for ‘pink teddy bear’ in Google, you’ll get different results than if you’d searched for it in Bing. And none of it is controlled by us.

Among the many factors affecting a website’s search engine performance are:

• keyword use in titles
• keyword density of main content
• quality of inbound links
• relevance of outbound links
• site structure and hierarchy
• click-through rate from search engine pages

For a (much) more detailed look at what can affect your search engine rankings, take a look at this excellent article on ranking factors by SEOmoz.

Holy crap, there’s a lot more to it than I thought. What else should I keep my eye on?

So we’ve touched on search engine optimisation. But with the continual rise and increasing involvement in social media, what people say and do online is becoming easier and quicker to spread across the web. Whether you mean it to or not. This has given rise to a new wave of thinking and, unfortunately, yet another abbreviation. This time known as SMO – social media optimisation. Without getting too deep into social media (another cavernous subject) it basically revolves around being active on websites such as Digg, Facebook, Twitter and the like. But more than that, it’s about being active with the purpose of driving traffic to your site by being influential, controversial, insightful, helpful or just about any other way you can think of that will peak people’s interest and tempt them to check out your site.

SMO is going to grow and grow, especially as leaders in the web world such as Google adapt their methods and algorithms for throwing up new and popular content. Let’s look at an example. If you were to search the term “world cup results” in Google right now (at time of writing), you’ll be shown a list of live scores right on the results page. A little further down there is a section called ‘Latest results for world cup results’ which gives you a real-time feed of articles about the World Cup from respectable websites around the globe. Try this with the term “#worldcup” and you’ll get a bunch of live Twitter comments.

Real-time results for '#worldcup'

Conclusion

If your business functions primarily online and that’s where you get most of your exposure, SEO and SMO are areas you have to address. You may not want to or you may not see them as sustainable or viable options, but this is the way the web world is going. As with everything in life, it’s about striking the perfect balance. A balance between a good, solid, search engine friendly website and active online promotion. Cloud computing, real-time search, person to person interaction, personal views and opinions. It cannot be ignored. And with all the benefits and excitement it can bring, why would you want to?

4Leisure Recruitment commissioned us to design a poster at A3 and A4 and a DL leaflet for a campaign they wanted to run aimed at attracting NPLQ (National Pool Lifeguard Qualification) lifeguards. The designs were to be placed around multiple universities and leisure centres across the UK and needed to stand out and be noticed. This is what we came up with. We used typical lifeguard colours with the different shades of orange and also squeezed in some design aspects in line with the 4Leisure brand to promote brand consistency. The poster was printed to A4 and A3 sizes.

The type of logo he was after was a combination mark (a combination of both the brand name and a recognisable symbol), and it needed to include a particular shade of blue, for which Jamie sent us the colour swatch. He also had a preference for a sans-serif font, but other than that, pretty much left us to our own devices.

When we got back to Jamie, we offered 3 quite varied design concepts, all of which were well received. He picked the one he was most drawn to and we then made a slight amendment to move the symbol from centered above the brand name to the left of it. We also made sure the text was neither bottom aligned with the bottom point of the blue box or centred with the right point. Otherwise it would have looked too symmetrical and unnatural. This is the finished article, supplied to Jamie in 7 differing formats, depending on where he chooses to put the logo. Best of luck, Jamie.

I’ve been lucky enough to acquire one unexpectedly through work :) and have been playing with it for about 3 weeks now. It’s the 16GB, WiFi (no 3G) version. And I still don’t like putting it down. What follows is a brief(ish) rundown of what I like and what I don’t like about it.

What I like

1. Screen clarity

   The very first thing you notice when you fire it up is the quality and resolution of the screen. It boasts a “138 PPI high quality screen” which quite frankly, is nothing short of sensational. You can zoom…and zoom…and zoom some more into just about anything and it will still look pinpoint crisp. Try it with any text that has a dropshadow and you’ll be amazed at the clarity. Viewing photos and videos on it is especially satisfying.

2. Startup speed

   For me this is one of the the key selling points of the iPad. Picture this: you’ve just stepped into the office of an important potential client and he/she asks to see some websites that you think might be similar to what they need. What follows is an excruciating 10/11/12/more minutes of impatience while you both wait for your laptop to startup, find your profile, load all of its proprietary applications, load your antivirus software, load any custom applications you use such as Gtalk or iPlayer, find your Mobile wireless device and connect to a network, before finally allowing you to open up your browser. Of course, since it was last closed with 25 tabs of websites your potential client might like open, you have to wait a further 5/6/7/more minutes for it to load. Ouch.

   Break out the iPad and in less than 10 seconds, assuming you have wifi access, you’re ready to roll. No exaggeration. The iPad loads websites ‘on click’, basically when you go to the tab. It doesn’t bulk load them all together as soon as you open up the browser. Ok so it’s not quite as powerful as a laptop or standard computer, but it’s a mobile device. It’s not meant to be. Everything is geared towards speed and agility. This is a smart move.

3. Portability

   This thing is surprisingly light and comfortable to hold. In fact quite pleasing to hold. I find myself picking it up more often than I need to and just flicking it on for a casual browse. It’s just nice to use. My consumption of online media has increased since I’ve had it as well. Mostly in bed. I’ve lost the desire to allow my laptop time to load (and heat) up so I can flick through some RSS feeds. The iPad is perfect for this. Pick it up, have a read, put it down. Over and over again. It’s the perfect device for consuming media. Fast, comfortable and easy. Big pluses.

4. Email client

   In landscape mode, a thing of beauty. Works perfectly and as hoped for. Allows multi-touch so you can move up and down in your inbox (left hand sidebar) and main content area (right section) at the same time. However, when switching to portrait, things feel a little cluttered and thrown together. You can only access the inbox by tapping a link to bring up a modal box. This just doesn’t feel right. You need a permanent list of your emails somewhere on screen to make it easier to jump about. That extra action of having to open up the inbox gets a little tiresome. I can’t realistically complain about this though. Easy solution – stick to landscape mode. Overall, nice to use.

5. Instapaper

   I can’t leave this out. It’s too well put together not to include it. Those of you that own an iPad or even an iPhone will most likely have your favourite apps that you can’t live without. Instapaper is a firm favourite of mine. On the iPad’s 9.7 inch screen it gives you the perfect platform to read through your favourite blog posts online or offline (!). Plenty of the content fits on the screen in portrait mode, which is extremely aesthetically pleasing, and in landscape you have all the options you could possibly need to get to from the sidebar. If that wasn’t enough, from within any article you can edit the visual settings – font type, font size, background colour, line spacing etc until the content is as readable as you like. The iPad was made for apps like this. It’s worth paying the $5 for the pro version, believe me.

What I don’t like

1. Connectivity

   Without WiFI – it does become a bit of a brick. Once you leave the comfort of your house/office and its familiar, steady connection, you’re at the mercy of your surroundings. The majority of good apps for the iPad require some form or other of internet connection, so if like me, you don’t have 3G, it can be frustrating. However, there is a small device that is making its merry way into the market as you read this – Mifi. With it, you’ll be able to connect your iPad, laptop and up to 3 other devices simultaneously to the interwebs. Very helpful.

2. Typing

   The fundamental problem I have with the email client in particular, but really any apps that require textual input – is that you need to lay the iPad down in order to type with both hands. With a mobile phone people have come to accept that the only way to type quickly is with both thumbs. This is a bit more of an issue with the wider iPad. So unless you want to lay it flat somewhere, your only option to type comfortably is to do it one handed while holding it up…suspended in mid-air. That’s fine if you’re tweeting. But knocking up long emails or writing blog posts? It just doesn’t feel natural like a keyboard. The iPad isn’t heavy, but after a while it’ll get uncomfortable and slightly frustrating that you can’t use both hands. Small price to pay, however.

3. Tab/page handling

   I like the way tabs are displayed with the iPad. There are 3 columns and 3 rows showing a maximum of 9 tabs. That however, is a slight issue. If I was sitting at my computer or laptop, on any given day I’ll have somewhere between 10 and 40 tabs open. The iPad only allows 9 at most and after that it starts to overwrite your other pages with whatever you open next. Ideally, the thumbnail screen would either be paginated or they would shrink to fit more in. While I’ll admit, most people probably won’t need that many tabs open, there are some that do, namely designers and developers. Arguably those more likely to purchase an iPad.

What else?

The iPad is bullying its way into the market. It’s not quite powerful enough to replace a laptop and it’s not quite small enough to replace a mobile device. But it is so intuitive to use, so aesthetically pleasing to hold and so beautiful to look at that somehow you keep going back to it. After a couple of plays with it, you’ll find yourself wanting one even though you may not actually need one. So in that sense, the iPad has filled a niche that didn’t previously exist.

Like the iPhone, the iPad has the app store. And like the iPhone, this means the functionality of your device will exponentially increase. If there’s something you find it doesn’t do by default, there’s a good chance somebody has thought of it and built an app for it, so your device will get better with time. There really is an app for everything.

For those of you that are worried about the rendering capabilities of the built in browser…don’t. Initially, I was intrigued as to how it would display websites. With the option to view websites in both portrait and landscape modes, I had visions of having to re-design my sites to make them fluid width in order to compensate for the extra screen real estate that landscape mode offers. But having visited a truckload of sites, there appears to be no/very little difference in the how sites are displayed on the iPad compared with a regular computer. After all, it is essentially Safari – a webkit browser. It was always going to do a good job.

Conclusion

If you buy an iPad expecting it to revolutionise the way you work and play, you’ll end up disappointed. It never promised to oust the laptop. It never promised to cover every aspect of your daily computing needs. But given time and the introduction of the right apps, I think the iPad will become strong enough to all but eradicate the average netbook. It has a lot going for it with its ease of use, speed, instant access and portability. It’s agile, it’s flexible and with the app store, it’s getting better.

It is what it is: a luxurious, web and email browser with fantastic portability, charming good looks and the sexiest interface known to man. I keep going back to it. Whether I need to or not is another question. But for now, it’s a question I’m not too bothered about answering.

This is a new feature in our Thoughts section that I’m hoping to maintain and build on reasonably regularly. I’ve grown a bit bored of the common listicle post. You know the ones. 50 websites that use photographic backgrounds. 70 websites that use big, bold typography. 1000 websites that will increase the length of your toenails.

Listicle posts can be great for a quick source of inspiration, but sometimes you want a little more. Sometimes you want to know why the author thinks a particular website stands out from the crowd. A little more info than a name, an image and a link. So in these Focus posts I’ll be attempting to look a little deeper using just one website at a time. Today I’m going to focus on Cristiana Bardeanu’s 84 Colors website.

The 84 Colors website is all about personality. It has been around in its current state for a good couple of years now, but it has such a professional finish to it that it has stood the test of time extremely well and even now, manages to look fresh and modern. Cristiana’s website is extremely unique and it’s her level of detail and consistency of the nature theme that makes it fascinating. Below are just of a few of things that I’ve picked out as inspiring elements of her site that help show it off as one of the more impressive online portfolios. Cristiana is an artist, clearly and plainly.

Menu item hints

Menu items offer little hints

Each item in the main navbar has it’s own little hint that pops up when you hover over them with a little arrow and a small indication of what each page contains. Not essential, given the obviousness of the links, but a nice touch all the same.

Subtle use of Flash

Flash is used subtly and sparingly

I’m not a big fan of Flash in websites. But the 84 Colors website manages to seamlessly blend two very subtle areas of Flash into the rest of the site. These elements are so well implemented that they are almost hard to notice at first glance. If you can’t see which bits I’m talking about, take a look at the leaves in the top right of the page and the leaves and squirrel to the left. Perfect execution and another nice touch.

Good use of fonts throughout the site

Portfolio links use nice font

Cristiana uses a combination of attractive fonts and appropriate typography all through her website. Lucida Sans seems to be the most prominent typeface used and it’s used in every way you can think of. Large, small, bolded, italicised. I particularly like the way it is used on the Previous Project and Next Project links in the Portfolio pages. Another example of the great level of detail employed in this site.

Consistent theme

Elements of nature throughout the site

Lots of websites attempt the natural/environmentally friendly theme. Not all of them pull it off quite as stylishly as 84 Colors. There are plenty of little additions – grass, a squirrel, a butterfly, flowers, leaves, a spider and some nice textured background effects that collectively make this site so interesting to look at.

Bonus: a personal touch

A bold but commendable move

It’s refreshing to see a designer with the confidence to be open about ‘failed projects’. Though in this case I’m not sure failure comes into it. Cristana has enough confidence in her work to show the world what she can do, and how sometimes the client isn’t always right. It’s done with taste and grace, and no sign of bitterness or regret. Nicely done.

Conclusion

Out of all of these beautiful touches, the thing I enjoy most about this site, is Cristiana’s use of typography. I’m not a huge typography nut like some designers, but in this particular site I find it extremely easy to identify the different sections based on the typography and fonts alone, which is a definite indication of type being used properly. Good use of bolding, italics and a consistent colour palette make that all possible.

All of the details and all of the thought that has gone into the build and design of 84 Colors make for a very complete website that is hard to take your eyes off. It makes you wonder how people can still have a misplaced sense of importance when it comes to design. And this is why 84 Colors is the first site I have chosen to focus on.

People blog for all manner of reasons. Some have something important to say and what they say is useful to others. Others have nothing important to say. And what they say is useful to nobody. The web is full of writing, good, bad and indifferent. If you own a blog or are looking to start one, finding a worthwhile reason to write consistently, with a goal in mind, however broad or narrow it may be, should be at the epicentre of it all. This post isn’t so much about the technical advantages of blogging that have been reiterated many times over, but more the theory behind some of the reasons people choose to do it.

This is my first blog. I’m already struggling to come to terms with the idea of giving stuff away for free. The stuff being knowledge and/or experience gained from 3 years or so gathering little bits and pieces of useful information that collectively help me to do my job better. I’m not a blogger. I never have been. And at this point I have no idea whether I will ever be a consistently good blogger. Why then have I chosen to start a blog?

Writing is theraputic

Writing provides an emotional release. To turn something that used to be intangible and liable to forgetfulness into something you can see, read and refer to can be a very refreshing feeling. Sometimes it can feel like what’s in your head doesn’t exist or isn’t true until it’s written down in front of you.

It can provide a much needed break from your daily routine. Especially if that routine involves trawling through code without a clue as to what it’s trying to do or attempting to fix CSS bugs in Internet Explorer. You get to take yourself out of that constricted environment and plonk yourself in front of an empty screen, with all the potential in the world at your fingertips.

Sometimes there are things you just have to say, you have to get them out. It’s not feasible to run around telling everybody you meet the same thing over and over. What you need is a broadcast tool. Blogging has become well known for its ability to turn nobodies into mini celebs over night through the process of a well targeted rant. It’s even been known to affect force governmental decisions.

For a lot of people, it’s how they feel most comfortable expressing themselves. Not everybody enjoys face to face communication. Even telephone conversations can be intimidating to some. When you write, there are no awkward pauses. No expectations. No social protocols. Of course, that’s not to say there aren’t any protocols at all. Just no immediate ones.

Writing helps you organise your mind

When your head is a mess with thoughts, ideas and opinions, it helps to write it all down. Working a full time job and freelancing in every spare hour leaves me with little free headspace that isn’t wholly consumed by over-ambitious ideas, cashflow stresses and a recent niggling ache to blog about something worthwhile. List-making is the only answer. I have lists on paper, lists in Excel, lists in iPhone apps, lists in Textpad files, lists on my whiteboard. Lists everywhere. I need a list of lists. That may sound (probably is) going slightly overboard, but the alternative is to let everything that goes through my head enjoy its few seconds of intense focus before fizzling out days, hours or minutes later when the short term memory finally takes charge.

The humble list is all-powerful. Simple yet refined. Easy to compile, but so heavily relied upon. Make use of him.

Good writing will bring you fame and possible fortune

Although my intention for writing this blog is for neither of these, there are, I’m certain, many people who are chasing them. It is a fact that good, consistent blogging will get you noticed. These days it seems even consistent writing alone will get you an adequately sized following. Though it is unlikely to bring you much fortune. Manipulating your thoughts and converting them into beautiful prose is what separates the good writers from the bad. For those of you that are talented and skilled literary conductors, there are plenty of options at your disposal through which to earn your lunch money. About.com is perfect example. Their entire community is built around freelance writers who write about their hobbies and passions. The site gets over 70 million visits a month. That’s a lot of opportunity to sell your content.

A chance to give something back

As I mentioned earlier, I’ve spent a lot of time collecting and collating useful info, tips and techniques and a truckload of inspiration posts from various sites around the web.  From traversing forums and knowledge bases, to directly contacting people in the know. One way or another I’ve managed to get past each and every problem encountered. I’ve had precious few real life mentors (cue tiny violin). Not a lot of people are willing to give up their time to help out those that are new to the industry. The ones that do so should be commended and kept close at hand.

My motivation for this blog, like many for theirs, is built from an amalgamation of reasons. I want to have my say. I want to give something back. I want to help others. I want to simplify the web for the casual surfer. I want to contribute to the progressive enhancement of my industry. But more than all of that – I want to write. If I can work all of these things into what I write about, I’ll be happy.

Conclusion

There are a hundred and one reasons people choose to blog. The open nature of the web makes doing so a completely free and unrestrained activity. Sometimes it can feel daunting when you look at other blogs and realise how prolific they are in hitting the right subjects at the right time. But this is no reason to be put off if you genuinely have something to offer. Passion for what you do is the strongest tool at your disposal. If you have it, you’ll hit the right subjects at the right time. Who knows what benefits you’ll uncover if you give it a go. This is my go. And my head already feels a little less cluttered :)

Having recently launched a completely redesigned and re-branded WHD website, I thought it appropriate to highlight an issue that seems to affect a lot of web and graphic designers while the dilemmas and frustrations are still fresh in my mind.

As just about any designer (web or otherwise) will tell you; you are, always have been and will continue to be the hardest client you will ever work for. This is an unavoidable truth. The pressure to come up with something that perfectly fits the wants and needs of your users, shows an awareness of current trends but still projects individuality, separates your business from those around you striving to achieve the same goals, and that still manages to satisfy your own continually shifting desires time and again is a huge obstacle to overcome for even the most accomplished of designers.

Why is it so difficult to design for yourself?

Whether you run your own company, work as part of an agency or live by the seat of your pants as a freelance, your own site will be the biggest indication of your abilities to any prospective customers or employees. Websites are your domain. This is what you do. Your website is more often that not your stone-cold introduction and first impression, which is why you work so tirelessly to perfect it. But why is it so hard to design your own site?

Your own ambition and expectations

As a designer human being, you are always pushing yourself to be better. This is human nature. People are never satisfied. It’s natural to want your next design to be sleeker, leaner and more beautiful than the last. To continue pushing boundaries. To keep stepping up the ladder. Continued professional development is not an easy thing to master, particularly in an industry that changes and evolves as rapidly and unpredictably as web design.

Other people’s ambitions and expectations

People expect you to be on top of every trend and modern movement in your field. After all, this is your profession. You are a web designer therefore anything people see on the web, they expect you to be able to recreate or improve upon. What these people often fail to take into account is the size, experience and budget behind the teams that produce these enormously popular and well-built websites.

Industry respect and recognition

The web design world is an extremely competitive one. Gaining any degree of respect or recognition from the community can be exceptionally difficult. As a new or aspiring designer you might find yourself in the position I was in with version 1 of WHD – chasing approval of my work from every avenue available to me. I had a particular appetite for web design and CSS galleries. My site found it’s way into over 50, which was remarkably satisfying at the time. But I soon realised that there’s more to it than that. Having your work featured is a great feeling, but what does it actually do for your business? How does it help you improve as a designer? Apart from the initial burst of SEO goodness garnered from these little bundles of joy that are web galleries, there is reasonably little to be gained, yet you run the risk of becoming sidetracked and placing way too much importance on what your peers think of your work, rather than your clients. You should be looking beyond this. Don’t chase recognition, good design will always be recognised. Focus your energies on improving yourself and what you do.

Choice paralysis

This is a concept I was first introduced to by Paul Boag when he spoke about the difficulties users are often faced with on eCommerce websites that have too many options or products. But the concept stretches further than this. I’m a chronic procrastinator. I think about everything. I think way too much. I think about what I’d like to do, how I’d like to do it, the possible pitfalls and potential benefits of every aspect of every action. This leaves little time for doing. When designing your own site, you are limited only by your imagination. As empowering as that might sound, when you are sitting in front of a blank Photoshop canvas, it can be excruciatingly painful attempting to get those first marks on the page. What style will you go for? What resolution will it suit? What font will you use? What kind of imagery? Two column layout or three? The possibilities are endless.

What can you do about it?

There are various ways to jog yourself out of this black hole of indecision. Hopefully one of them will work for you.

Treat yourself as another client

This is the first thing most designers will tell you to do if you ever mention that you’re having issues working on your own stuff. The theory being that if you take out your own emotional attachments and work like you would on anybody else’s site, you’ll produce better and more efficient work than you would otherwise.

Browse web galleries

Web galleries are the perfect way to gather inspiration and ideas. They are choc full of the latest, most eye-catching and well-built designs. A good indication of what is considered good or exciting design. Here are some of my favourites that I will regularly visit if I feel in need of an inspiration boost:

• www.bestwebgallery.com
• www.thebestdesigns.com
• www.webcreme.com
• www.cartfrenzy.com
• www.smashingmagazine.com

Relax

This will not be your last site redesign. You can always change it. People handle pressure differently. Some people thrive under it, while others will crumble. But it’s always worth remembering that this is your website, therefore you can change it any time you wish.

Think differently

It’s very easy to get bogged down with one particular area of the site. You can end up investing a lot time in something that was meant to be very quick. If you get stuck for too long in one area, try to tackle other areas of the site. Inspiration is an extremely unpredictable emotion and hard to control. So when you feel on top of your design game, you need to use it. You can’t afford to get stuck in one area and lose your motivation.

Shake things up

Sometimes you just need to break your cycle. Being in the same place all the time can lead to the same thought processes, even the same working patterns. Take a walk, change your surroundings. Work out of your home or office. Try coffee shops, parks, anything but your regular place of work. You might be surprised with what you come up with if you push yourself to work differently.

Example: On the way home from work every day I have a 20 minute slot on the train in which I sometimes try to break out the laptop and hit Photoshop with whatever I’ve got before I have to pack up and get off the train in a mad rush. It’s a slightly strange feeling rushing everything, but I find it forces me to just get something down on paper as it were. For me personally, getting started is always the hardest part so this works well for me.

Conclusion

Inspiration and creativity is integral to what we do as designers, yet they are some of the hardest qualities to keep firing on a continual basis. Added pressure from yourself or others can make it next to impossible to feel energised and motivated for your project and can easily lead to burnout if you aren’t careful. The trick is to use it to its fullest when it’s available to you. And when it’s not, to better understand how you can trigger it. Everybody is different. Find what works best for you.

When are you at your most creative and what are your tried and trusted methods for getting inspired? Leave your thoughts in the comments below.