A look back and a look forward at web design trends
The year is 2011 and we have again found ourselves at dawn of a changing web. Emerging technologies like smartphones and web-enabled tablets have left us unsure of how users are browsing our websites, and new coding standards like HTML5 and CSS3 are turning web design into something more like print design. With all of this change comes massive opportunity for growth, but only for those who are prepared…
The big question is…
Just what is the future of web design?
The future of web design is a hot topic right now, with many designers voicing their hopes and wishful thinking; some realistic and some bizarrely out there. Let’s start with a bit of perspective by refreshing our minds to web design in past, old trends and styles.
A Blast From The Past
We all know about the disaster that was the majority of websites in the 90s, so let’s get the animated gifs, iframes and trailing cursor effects behind us so we can look at some actual design
Remember Yahoo Geocities? if you don’t you missed one of the most controversial things to ever happen to the web, Geocities defined websites in the 90’s by giving average users the chance to create their own free websites using an online WYSIWYG editor.
Yahoo announced the end of Geocities in 2009 but there are still tons of websites archived for everybody’s viewing pleasure.
This website in particular has everything a Geocities site needed, an eye burning colour scheme, a guestbook, ‘under construction’ graphics, a ‘best viewed in’ disclaimer advising Internet Explorer and a list of best friends and pets!
Year: 2004 (embarrassingly)
I tried really hard to find an archive of one of my own personal websites from back in the day for this rather than just picking on others, but unfortunately I had no luck.
However I did manage to find a mostly intact version of Snackfoam.tk, a slightly offensive, surreal humor website that myself and my friends (who I won’t mention until they specifically state they’d like to be associated with this) worked on during high school.
My favourite bit is the insight into the design process from the FAQ:
Q: What’s with all the orange?
A; It’s chronically, vomit-inducingly, annoying, so therfore a good choice for a webpage.. [well that’s what I gather from most pages on the net Annoying=Good]
Adobe appeared to taking magazine-like layout inspiration for their site way back in 1996, and although limited by graphics, and not quite as adventurous as some layouts today it can be argued that Adobe were way ahead of the ball.
What you see here is really not far off the web design we see today over 10 years later, and is quite impressive compared to Microsoft’s effort 3 years later (as seen below).
In 1999, Microsoft’s website despite being less offensive to the eyes than most at the time was the epitome of dull.
A serious lack of effort on the visual appeal of the website means it left almost no impression at all
When Amazon.com first surfaced it showcased a layout that is almost the standard for online stores today, top level links displayed as tabs along the top of the page and categories listed down the left hand side of the page.
Amazon is by no means the best looking site out there, not now nor then but it has stuck with it’s look consistently and it does work very well for it’s purpose, probably due mostly to familiarity by now but nevertheless.
Apple.com in 2001 was hardly any different to today in terms of layout. The only differences you’ll find are in trends and aesthetic appeal, for example I don’t know about you, but those pinstripes at the top of the page turn my stomach a little.
Today Apple has deployed a much sharper, refined and modern look, keeping well up to date and sometimes ahead of modern web design trends.
The good the bad and the ugly:
Historically the websites that were attractive to look at and easy to use were sparse generally owned by the big companies, the ones who had the money to employ people with design experience to make their websites for them.
There was very little community feedback from users in the past compared to today’s plethora of blogs and social networking (excluding your treasured guest book entries of course). So average users seemed to focus on making websites mainly for themselves and close friends or family not mass consumption.
The trends of the nineties and early 2000s:
- Animated GIFs
- Things that follow your mouse
- ‘Under construction’ graphics
- ‘Best viewed in Internet Explorer’ badges
- 100% Flash websites
- Scrolling text marquees
- Background MIDI music
- Frames & Image Maps
WHERE WE ARE NOW
The most recent major changes to the web.
Social media is the ‘in’ thing at the moment, users of the web want interaction and want to voice their opinions. As of the beginning of 2011, Facebook has 500,000,000 users, that’s about 1 in every 13 people on earth. Everybody has their use for social media websites, whether it’s keeping in touch with friends, promoting your business, following your favourite celebrities or an array of other uses.
Blogging & Content Management
The static website is dying, long live Content Management Systems! Todays web designers start most of their projects by heading to wordpress.org or their CMS of choice’s website to download the latest version of the software that will be the base of their project. Using free blank themes such as: BLANK, Whiteboard and Starkers for WordPress; designers can start with a clean slate and build their designs around the workings of the CMS.
High Quality Templates
Pre-made website templates have always been around, but with the popularity of Content Management Systems today getting a website online is a lot more accessible for average users and this works in advantage of the designer, especially for those designers who make their living building ultra high quality premium templates.
The result of this is a veritable smorgasbord of beautiful templates for your blog, CMS or online store just waiting to be installed.
Accessibility & Usability
Usability has been a buzz word in the web design industry for a long time now, so long in fact that even clients have cottoned on to it and are telling us which standards we need to meet, and how they should be easy to use and coded semantically; well the latter not so much but I’d definitely be a little better off if I had pound and/or dollar for the amount of times a client has told me to make it “all web two point oh” and “use The HTML 5”
Pixel Perfect Design
Yes, Designers all over the world are spending more time than ever getting their designs pixel perfect and beautiful down to every last detail; some common trends at the moment are heavy use of textures to achieve authentic looking effects, indenting text into backgrounds to create a sense of depth, more creative use of type, and big and bold web elements.
The Future of Web Design
Based on what we’ve seen so far and pure speculation, here are our top 5 predictions for the future…
1. HTML5 & CSS3
2. Resolution-Adaptive Design
Designers aren’t just designing for the personal computer now. The range of devices used today that can browse the web vary from tiny mobile phone screens, to tablets and huge HD displays — the modern web designer will need to take all of these into account and create a website that can adapt and display beautifully regardless of the display resolution.
The future solution to this problem is a single website that can adapt dynamically to the device it’s being viewed on depending on factors such as screen resolution, orientation, device size, internet connection strength and hopefully more factors.
3. Machine Personalization
Personalized design is a concept in which websites will adapt to suit your browsing habits or preferences. For example, if a user clicks on a specific heading multiple times it can automatically be given a higher design priority and improve the browsing experience for that user. Hints of this can already been seen in the wild on sites like iGoogle and the BBC. If you want to see how the future could really take off, have a good look at Genetify.
4. The Death of Flash
A very controversial topic right now is the future for Adobe Flash on the web. We’re not going to say Flash will disappear any time soon (look how long it took for people to forget IE6) but it will almost certainly happen at some point in the future unless Adobe can make some pretty radical changes. Flash is like a dying technology; a relic from the 90’s era that has managed to survive the nuclear explosion (of lethal Web 2.0 gases) that killed off the animated gifs, and cursor glitter. HTML5 is now able to perform most of the same tasks as flash much more efficiently, with far less effort and some of the more advanced tasks with too (with far more effort at the moment but hey it’s still early days)
Thankfully Flash intros are already an endangered species and full Flash websites are getting rarer too as people begin to truly realise the importance of search engine optimisation, not to mention how Apple have taken a stance of “leaving the past behind” concerning Flash.
5. A Multi-Touch Web
Multi-touch is a technology originally pioneered on the iPhone but now found in most modern smartphones, tablets and even computers. Multi-touch gestures work great on phones and on the track pad, the recently released “Angry Birds HD” game for the Mac is a great example as it let’s you play through the entire game using just a multi-touch track pad, gestures such as swiping 2 fingers to pan the camera and 3 finger swipes to pause the game make playing through the game a thoroughly enjoyable experience.
Hopefully in the future we will be able to see interactions like this on the web too, going beyond just swiping to go back and forth from pages and giving us the control to pinch and zoom individual elements on the page, double tap to highlight particular areas of text, and interact with photos in a gallery as if they were real photos on a table.