Mon, 10 Dec 2007 00:00:00 +0000It's been well over a year since I compiled the original list of web cliches, so I figured it was time to revisit some of the trends currently prevalent in web design now. Things have definitely moved on since last year; Web 2.0 is not so en vogue as it was, instead being replaced with richer colours, rougher textures and (on average) fewer rounded corners. So what trends have emerged? What's hot, inspiration wise? Odd one, this. Seems the current trend du jour is to employ a cutesy vectoresque graphic character. This fits in with the tendency to use strong colour and graphical elements in the current crop of designs rather well. The human element of the cartoon also serves as a fashionable replacement for the cliched stock imagery of yore - no longer do you need a photograph of a woman talking on a phone to convey what your business is about. These days, you can utilise a cartoon character to achieve the same effect. Examples: Elitist Snob, Freelance Switch, sr28, Global Zoo, Wishlistr, and NetNova. The world of web design has seen some sweeping changes since its inception years ago - many of the limiting factors that were once such a concern are no longer in place. With far more bandwidth to play with, and a limitless palette from the full 24-bit gamut (a far cry from 'Web Safe' colours!), the once humble background image has now become the underpinning feature of many designs. Complex swirls, flourishes and rougher drips and sprays are a common choice these days, and they are a great way to add some spice to an otherwise plain backdrop. Examples: Rawnet, taDesign, Hoy puls, imlousekStudio. Creative use of backdrops has also meant a lot of designers opt to 'break out' of the conventional box model. Why bother rounding corners when you can ignore them completely? With better CSS support in browsers comes more creative use of backgrounds, absolutely-positioned elements and full transparency - perfect for breaking down hard edges and enabling freer designs. The humble basic
Sun, 02 Dec 2007 00:00:00 +0000
There's a choice of 7 individual colours (or the nifty rainbow option, pictured below), motion blur, and a few tweakable options to play around with. It doesn't work in Internet Explorer (it's only designed as a proof-of-concept, not as production code), but anything that supports CSS opacity (Firefox, Safari and Opera on Windows) should work just fine - Safari's rendering engine seems particularly nippy.
Extract the .ZIP archive somewhere and open the scroller.html file in your browser - everything should work fine there. You can edit the HTML file to tweak the various settings - if performance is an issue try setting blurLevel to 0.
Sat, 01 Dec 2007 00:00:00 +0000
Simple, versatile, great for status indicators or embellishment: 14 icons in 7 colours, representing the most common types of LED. Make your own virtual throwies, use them on a webpage or an app, do what you like with them.
Tue, 27 Nov 2007 00:00:00 +0000Intended screen resolution is a deciding factor in terms of a site design and layout - catering for smaller resolutions is a key factor for accessibility and for ensuring as many readers as possible can read your content. But how does screen size vary with locale? The general rule-of thumb is to go as low as possible - if your design works perfectly at 800x600, great - if it's operable at 640x480 or lower, even better. However, as technology progresses, screens are getting larger and the sizes less uniform - 4:3 is slowly losing favour to widescreen ratios, such as 16:9 and 16:10. In certain circumstances, the market or demographic which you are aiming at can affect your intended viewing resolution - technical and design-oriented sites can benefit from a substantially larger than average resolution. Different regions also have slightly different profiles - widescreen monitors are more popular in some regions than others, for instance. Below are statistics compiled from 18 months worth of log data from Modern Life - a sample size of well over a million visitors, from all over the world. I took the screen resolution data from the top 25 visiting countries and compiled them into two key metrics - the average screen resolution (in megapixels, calculated by multiplying the horizontal resolution be the vertical and dividing by 1,000,000), and the average screen ratio (average height divided by average width). The results show some interesting trends. Average screen resolution, worldwide Here, the green countries show a trend towards higher resolution displays, the red towards lower resolutions. India had the lowest average display size, at 0.872 megapixels - an average of slightly higher than 1024x768. The highest resolutions were found in Scandinavia and Central Europe - with Switzerland boasting an average resolution of 1.306 megapixels - about the equivalent of 1280x1024. Average screen ratio, worldwide Average screen ratio serves as an indicator for the prevalence of widescreen monitors - countries in green have wider resolutions, on average. Denmark, Belgium, the U.S. and Italy have the highest incidence on widescreen resolutions. Russia, on the other hand, despite a higher average resolution, favours 4:3 and 5:4 resolution screens - and thus are likely to have more vertical resolution available. Resolution vs. Ratio, per country This scatter graph illustrates groupings more clearly - Western Europe is concentrated on the right hand side, Asia and South America to the left. Russia is distinct in being the only country to have an average resolution taller than 4:3 - a feat accomplished by the popularity of 1280x1024 (which is in the ratio 5:4). There would also appear to be weak positive correlation between screen size and ratio - larger screens are more likely to be widescreen (which makes sense, given the increased suitability of larger screens for presenting widescreen content). Tablular Data Country Avg. Megapixels Avg. Ratio India 0.872 0.739 Brazil 0.913 0.748 Argentina 0.943 0.746 China 0.950 0.732 Mexico 0.999 0.722 Turkey 1.018 0.734 Singapore 1.035 0.720 United Kingdom 1.049 0.730 Spain 1.074 0.734 Poland 1.085 0.734 Romania 1.096 0.745 Italy 1.129 0.718 Japan 1.134 0.744 Canada 1.138 0.722 Russia 1.160 0.756 United States 1.167 0.720 Australia 1.179 0.727 France 1.184 0.723 Belgium 1.209 0.715 Netherlands 1.224 0.725 Germany 1.233 0.731 Finland 1.239 0.733 Denmark 1.264 0.717 Sweden 1.269 0.727 Switzerland 1.306 0.725 Methodology Total sample size: 1,110,495, based on data accrued via Google Analytics for modernlifeisrubbish.co.uk. Data from May 2006 through November 2007. Resolution data sample taken from the top 10 most commonly occurring resolutions taken (outliers excluded). Data collected for only the top 25 most commonly occurring countries. You may download the raw data as an Excel spreadsheet[...]
Tue, 07 Aug 2007 19:00:00 +0100
I thought I'd try my hands at WordPress tweakery, and so I thought I'd mark up my first custom theme. For whatever reason, I decided that a rendition of the monochrome MacOS from circa System 6 would be cool - with a few liberties taken for the sake of the web, of course.
It's my first real attempt at a theme, so goodness knows if it'll work on anything other than WP 2.1.2 (which is what it was developed under). Still, it's based on some of the structure behind the default Kubrick theme, so it should be relatively complete. Here's a screenshot:
And you can preview it installed here:
Or, just cut to the chase and download it here. Place it in your wordpress wp-content/themes directory and it should appear in your presentation config.
Tue, 07 Aug 2007 00:00:00 +0100Summer has always been somewhat of a quiet time on the blogging front, with folk jetting off on holiday and enjoying the sunshine - anything other than being cooped up indoors writing. But whilst we're soaking up the sun and are being generally non-productive, the feed reader addiction doesn't go away so easily. Thankfully, there are a number of great blogs, web comics and sites out there to read - and here are some of them I've been enjoying over the summer lull. Diesel Sweeties Robots, girls and a dash of nerdy in-jokes. Described as a 'pixelated robot romance web comic', Diesel Sweeties pretty much delivers everything you'd expect on that promise. Although it verges on the precipice between weird and cool, once you grok the general theme - and remove any inhibitions you may have over technosexuality - you'll love it. It's almost certainly my favourite web comic. Diesel Sweeties / RSS Feed Passive Aggressive Notes A whole site dedicated to little notes left out of sheer frustration? You bet - in full, unadulterated glory. Although not technically passive-aggressive, the notes in question are usually rather amusing - although the bile evident in some of the notes may indicate the subject in question might not share the joke. It's an all-too familiar brand of humour, and well worth a slot in your feed reader. Passive-Aggressive Notes / RSS Feed Typographica Possibly the best (if not the only) blog about typography in existence. Shame it's not updated nearly as often as it should be - but Typographica is still a favourite. Typographica / RSS Feed What The Duck WTD appeals to the photographer in me - it's a webcomic about the travails of a ill-fated but well-intentioned duck, with aspirations of making it big as a photographer. Updated every weekday, it's a somewhat humorous insight into the world of photography, photographers - and something familiar to all freelancers - the bad client. Well worth a subscription if you either a) are interested in photography, or b) like webcomics with ducks. What The Duck / RSS Feed Music Thing I have a weakness for all things electrical, covering the gamut from analogue to digital - and music-related electronic gear is certainly no exception. From analogue synthesisers to vocoders, Music Thing runs the gamut of cool musical gear. Music Thing / RSS Feed Worse Than Failure Formerly 'The Daily WTF', 'Worse Than Failure' is a unashamedly geeky look into the world of programming - from dodgy code to unhelpful error messages, to the worst interview candidates ever. Some of the code snippets might be a little obscure (particularly if you're not a programmer, or if it's in a language you're not familiar with) - but the comments are generally rather insightful as to discovering what the true 'WTF' is. Recommended, and worth subscribing to for the regular 'Error'd' posts that never fail to lighten a droll Friday afternoon. Worse Than Failure / RSS Feed So there you have it - six of my favourite RSS feeds from the last few months. Now, over to you - what feeds have kept you entertained recently?By Stuart Brown, posted in RSS and Syndication, Blogs & BloggingTags : rss, recommended, feeds, readsView/add comments on this post[...]
Mon, 06 Aug 2007 00:00:00 +0100A lot of design tutorials tend to focus on the aspect of 'inspiration' - without much emphasis on the design process itself. For all the showy gradients and web 2.0 gloss, truly good design comes from an altogether different approach. Emulating a design you like is perfectly acceptable, but you can't create a great design by solely cannibalising other sites - a modicum of the design process is needed. Here's how to get started on the road to design nirvana. Planning Before you even think about writing HTML, or opening Photoshop, you should cement the foundations for your design on paper - or whatever sketching medium you're most comfortable with - first. Planning is the first step on the road to a great design, and starting to sketch out what the final production will look like will help you gain a stronger overall concept. Simplicity The overwhelming trend for design recently has been a shift to run the gamut in regards to choices in colour, in tone, and in form. Gradients, multiple colours and swirly vector effects are very much 'en vogue'. Effective design is never gimmicky. If you wish to design something that's easier to maintain, more legible, and more future-proof then simplicity is the key. That doesn't mean you can't use vectors, gradients, and a large palette of colours - but the effects, forms and colours you do employ should be deliberate. If an element or an effect has no net gain on the overall design, remove it. Take away the superfluous parts of a design and the core components will stand out stronger, making for a more cohesive identity. Typography Typography is critical in information design. If you don't know your Helvetica from your Arial, then you're in real trouble. Thankfully, there are many, many books on the subject of type - Stop Stealing Sheep & Find Out How Type Works is a good overview, and a cursory search for 'typography' returns over 16,000 results. There is plenty of material out there. Unfortunately, there's no overnight method to learn typography - you just have to immerse yourself in it, read the books, take a course if you're particularly serious - and with time you'll become a typophile like the rest of us. I can also recommend Typographica. It's a superlative typography blog, although sadly not updated nearly frequently enough. Usability The sad thing about so many of these glitzy, overwrought designs so lauded these days is that usability is usually left abandoned on the wayside. Usability is design. It's not just about how your site looks, it's about how it works. Both of these qualities interoperate, and the best designs couple visual attractiveness with an interface that just feels 'right'. Google is a great example - Facebook, too. There's nothing outstanding, visually, but the functionally-led design makes both sites great. Be aware of how your site works, and be aware that the design runs deeper than the look of a site. Refinement Good design takes time. Deliberate over your work every chance you get, ask yourself questions - how could this be better? Is it obvious how this works? What does this represent? The entire design process is little more than the conception of an idea - your initial sketches - and the continued refinement of that idea into the finished design. When you've written the last of the CSS, tidied up all the parts you intended, take a step back. Look at what you've created. Don't be afraid of making tweaks. The final stages of a design are the most decisive - don't give up on good when you can achieve beyond. Practice Sadly, there are not often any shortcuts that pay dividends, and design is no exception. Practice is an important part of any learning process, and with so many aspects to modern design - from the backend programming to mastering the software, and the core design aspects underneath - time is critical in understanding the art. [...]
Thu, 02 Aug 2007 12:00:00 +0100
Those of you fearing that the BBC is out of touch as far as the web is concerned need worry no more - the recently-opened-private-beta of the BBC iPlayer is at the cutting edge of interactive design. I mean, just look at the Beta application page:
There never was a more timely design - it checks all the right Web 2.0 boxes:
Gradients - check. Not as many as there could be, but the grey shadow at the top definitely counts.
Official Web 2.0 colours - check. It's not an exact match, but that pink isn't a million miles away from 'Flickr Pink'.
Beta status - check. Like all good Web 2.0 applications, you can't just go ahead and launch. A good long stint in Beta should put everyone's minds at ease.
Web 2.0 name - check. Not quite as good as 'iPlayr', but at least the lower case 'i' makes it sound trendy and cool.
Screenshots floating in mid-air - check. I would have preferred the wet floor effect, but the floating screen with drop shadow is a nice touch nonetheless.
Oodles of hype - check. I'm reserving judgement on the iPlayer until I've seen it, but it's certainly had it's fair share of hype - and criticism - already.
Result: Full Web 2.0 compliance.
Thu, 02 Aug 2007 00:00:00 +0100
Blogspam is bad. It must be; it has 'spam' in it. But what on earth is blogspam?
Let me give you some context. On the social media sites, such as Reddit and Digg, self-submission of your own work is generally seen as OK - implicitly on Digg, assuming it's worthwhile content, and explicitly on Reddit.
Daniel Miessler came out strongly in favour of self-submission - under the premise that more submissions from new writers, new content sources will allow the best of those to break through where they might not have done before.
Great. So I can submit anything I churn out then? And I can be rewarded with a metric boatload of traffic if folk think it's good?
Yes. Well, sort of. Submitting everything is probably a bit much. Not every blog post is worth reading. Some lack context. Some are just a links to other blog posts. Some are just badly written.
So if I submit everything I write, is that 'blogspam'?
I suppose it could be classed as that, particularly if the reason you're doing it is solely to get traffic. Submitting everything you write, regardless of quality or suitability, will reduce the signal to noise ratio, and thus make it harder to find good content.
Another thing to bear in mind is the thorny issue of original content. Whilst it's fine to quote other blog posts or news sources verbatim, if that's the whole of your post then you should consider submitting the original link, rather than your own insubstantial blog post.
But what about the ad revenue? The traffic? The glory!?
Spoken like a true blogspammer. But at least you're not posting pictures of cats.