The Future of the Web

a still from the movie Minority Report

In the 2002 film, Minority Report, one of the many futuristic scenes places Tom Cruise in a shopping mall while being assailed by targeted 3 dimensional ads as he passes a barrage of malevolent, big brother like, retina scanning CCTV cameras. It’s always tempting to wonder about the likelihood of such a scenario considering the phenomenal pace of technological change over the last 10 years since the movie was shot. How near are we to that imagined future? The answer is, probably closer than you think. If that seems far-fetched, then consider the dramatic global expansion of broadband penetration (and its projected reach) and the seemingly exponential increase in data traffic over these networks.

Global broadband penetration 2011 Graphic
Global broadband penetration 2011, Source: TelegeographyITU/BBC

The communications industry watchdog, Ofcom recently announced the beginning of the auction process for the new 4G mobile spectrum that will bring mobile data speeds inline with those available from landline ADSL and cable networks. The action takes place next year with 4G services likely to roll out in 2013. Placed in context, we can see this as part of a huge global expansion in broadband connectivity, with an estimated 3.8 billion mobile broadband subscribers worldwide projected by 2015.

read more »

Business coursework Web Design

Webonomics: The Evan Schwartz 9 Web business principles & their relevance today

Webonomics

Webonomics book cover

Written in 1997 by business journalist Evan Schwartz, Webonomics was an attempt to help define a set of rules to guide business development in the rapidly expanding Web economy. Schwartz coined the term Webonomics, in order to emphasize that the established practices in pre-web businesses did not necessarily apply or readily transfer to the Internet.  Webonomics was thus the study of the production, distribution, and consumption of goods, services, and ideas over the World Wide Web. Schwartz organized his ideas under nine headings, or principles, which form the main chapters of the book. Many of his arguments were remarkably prescient, although when seen in today’s light, with the benefit of hindsight, he often appears to be stating the obvious. That is probably more down to the fact that so much of what he described has just become the established norm, so it is worth looking at the principles he set out nearly 15 years ago and seeing which of them are still valid today.

“Traditional economics is based on the notion of scarcity – that human desires will always exceed available resources such as food, clothing and shelter.

On the Web, the main commodity in limited supply is the attention of the busy people using it.”

1. “The quantity of people visiting your site is less important than the quality of their experience.”

Schwartz argues that for any website to fulfil its function, the goal is not simply visitor numbers, but visitor returns. This can only be achieved by provided rich, engaging experiences or by creating a community of users who will want to come back again and again. He gives examples of websites that were failing this basic rule of thumb in 1997, but 14 years later, I would argue that this has become a well established principle guiding good web design practice. There are still plenty of examples of bad websites being made today, but it is clearly understood that any successful website will try to hold onto its users and the idea of social web communities and blogs using comments and RSS feeds to drive visitor returns has become well established. (Shivapurkar, A., 2009)

Schwartz goes on to observe that companies offering a web presence for their off-line business often fail to make the distinction between mass or broadcast media and the interactive medium of the Web. This point is crucial as it is essential for a web business to first, clearly identify its users in order to communicate effectively with them.

“The Web as both medium and market is more likely to be successful if it frees consumers from their traditionally passive role as receivers of marketing communications, gives them much greater control over the search for and acquisition of information relevant for consumer decision making, and allows them to become active participants in the marketing process. Firms have the opportunity to reap the benefits of this innovation in interactivity by being closer to the customer than ever before.” (Hoffman, D. & Novak T., 1996)

read more »

code coursework music Thesis project Uncategorized Web Design

Vitruvian analysis of cognate / non-cognate websites

The sites I am looking at are:

  • nin.com –  the Nine Inch Nails industrial rock band website and brainchild of founder, Trent Reznor
  • indabamusic.com  – a cloud music collaboration service and social network
  • Subtraction.com – a blog run by a New York designer

read more »

coursework Design SEO Uncategorized Web Design

3 Websites – Analysis of SEO

For this assignment I will start by looking at a couple of websites that are relevant to my thesis project.

1. nin.com

nin.com is the website of Trent Reznor’s band, Nine Inch Nails. Reznor has pioneered innovative approaches to digital distribution of music as well as allowing non-restrictive interactivity with original audio content. This is particularly relevant to my current thesis project. read more »

architecture coursework critical theory Deconstruction Design Essays graphic design Jacques Derrida Politics typography Web Design

Deconstruction and Web Page Design

Deconstruction and Web Page Design

The term “Deconstruction” which rose to prominence in the mid-1980s, has become a convenient label to pin on unorthodox design approaches within a seemingly diverse range of creative disciplines. From architecture to fashion and graphic design, asymmetric, chopped-up and fragmented forms are often the hallmarks of designs which are categorized by the term. Yet the concept of  ‘deconstruction’ is notoriously difficult to pin down and arose from the often difficult and at times, seemingly impenetrable work of a French philosopher and theorist, Jacques Derrida. How did deconstruction, with its origins in philosophy and literary academia, come to have such a profound effect on the wider spheres of art and science? And does deconstruction still have anything to offer the web designer looking for critical approaches to well established standardised industry practices? In attempting to answer these questions, I will show that deconstruction, if not in practise, then at least in spirit, still lives in some of the more exotic corners of the Web.

Jaques Derrida (1930 – 2004)

In many ways, Derrida, who experienced the institutionalized anti-Semitism endemic in French colonial Algeria as a young man 1, had a special sensitivity to the themes of identification and the marginal which are at the core of his philosophical arguments 2.  For him, most of Western philosophical thinking was founded on a series of generalized assumptions, which accorded a bogus privileged status to particular modes of thought and lines of enquiry. Deconstruction subjects to scrutiny many of these foundational concepts of Western “metaphysical” thinking. Derrida defines metaphysics thus:

“The enterprise of returning “strategically”, ideally, to an origin, or to a “priority” held to be simple, intact, normal, pure, standard, self-identical, in order, then to think in terms of derivation, complication, deterioration, accident, etc. All metaphysicians, from Plato to Rousseau, Descartes to Husserl, have proceeded in this way, conceiving good before evil, the positive before the negative, the pure before the impure, the simple before the complex, the essential before the accidental, the imitated before the imitation, etc. And this is not just one metaphysical gesture among others: It is the metaphysical exigency, that which has been the most constant, most profound, and most potent.” 3

Such enquiries into abstract notions of essential being and truth are centred on a fundamental grounding principle, a fixed origin, or logos, hence logocentrism: a “system of speech, consciousness, meaning, presence, truth etc, which is itself an effect – an effect to be analysed – of a more and more powerful historical unfolding of general writing.” 4  5

Derrida built on the work of Structuralists such as Swiss linguist, Ferdinand de Saussaure, who identified the tendency for humans to establish meaning by thinking in terms of hierarchical opposites in his work on semiotics. These binary oppositions are key relationships in Structuralist analysis but Derrida takes them further: it is in the nature of metaphysical thinking, having established an opposing hierarchy, to favour one over the read more »

coursework Design Food layout Web Design

Website Makeover: biscuit recipes

Biscuit Recipes: A preamble.

I decided to have a crack at the biscuit recipe sight because a, I like baking and b, the site is so awful & I’m up for the challenge. I like bikes too, so I could have gone for the cycle shop option but enough of that. So first off a bit of site analysis.

biscuit recipes screen shotAt fist glance we have an unattractive, barely designed site ostensibly offering a list of recipes in alphabetical order sitting in a hugely oversized table, the left column of which contains a bunch of Google ads. “Great biscuit recipes for everyone to enjoy” runs the tag line sitting beneath a horizontal navigation bar leading to the blog, forum, contact, store area etc. The most striking feature, other than the tacky heading is a large link to 2 further sites sharing remarkably similar URL structures, namely bun-recipes.co.uk & kids-cookbook.com. So what’s going on? I delve a little deeper. The site author is apparently a geography academic who has hit on the wheeze of a bit of income from a small network of sites with clever domain name choices and a bit of fluffy content to help further bump the sites up Google’s site rankings. And he’s not done a bad job: a Google search for ‘biscuits’ finds the site at no 7 and first if you search for ‘biscuit recipes’. So plenty of click through traffic and a bunch of ads & a tie in with the Amazon associates aStore program to sell biscuit themed recipe books. Much the same formula is followed by the sister sites, jam-recipes.co.uk, bun-recipes.co.uk etc. I find myself asking wether the Web really needs sites like these – after all there are so many great food & baking blogs out there, hosted by people with a genuine passion for whatever it is that they are writing about & many of them are a delight to read. More on that word later. And what do you get with this site? A dull, joyless experience, lacking any life or soul. Or passion. That’s really the word, passion. But  a cleverly selected domain name (no doubt in the days when not many people were onto this kind of thing) and you have a highly ranked website with no content of any real worth to offer but a slightly cynical attempt to earn a few beans.

So, next, an assumption. This guy, the geography academic has had a change of heart, a sudden Damascene conversion if you will. One day he wakes up & realises what his mission in life is and yes, it’s biscuits. In short, he now has the passion – he wants the world to know about his great love. Biscuits. And he knows how to make them, how to store them, what to make them with, the cultural significance of a warm, milky tea-dunked digestive, the best recipes from all nations. And for this man – I will happily re-design a website, because together, the two of us are gonna bring biscuits, TO THE WORLD!

Now that I’ve got that out of my system, let’s see how we can help to improve things; well it will be hard not to really.

Target Audience & Benchmarking

More assumptions: since the current site’s only apparent aim is to generate income based on click impressions with associates, we need to assume that the owner wants to completely refocus  & to compete in the wider foods-related website market. So there isn’t too much point in analysing our existing site as it stands, as a complete redesign and rebranding strategy is required: we need to take a look at our competitors. And we can narrow the competitor analysis down to baking related sites for brevity’s sake.

Let’s take a look at the following sites:

joyofbaking.com

bakingmad.com

bakespace.com

nigella.com

and the slightly more modest biscuitrecipes.net

A look the analytics stats using Alexa confirms that the overwhelming percentage of users of these sites are female, mainly in the 25-44 age group, with varying educational backgrounds, mostly in the middle income bracket both with and without kids. So these considerations should govern the design of the new site.

The other obvious feature of all these sites is a good deal of high quality photographic content – an absolute necessity on all food related sites if they are to be attractive to users: people want an idea of what they are going to be baking or at least what they are might aspire to bake. A look at recipe books confirms this: expensive high production books contain great amounts of detailed heavily stylised photography, though for us, we don’t have to worry about the associated printing costs.

Information Overload

The design as it stands is simply an alphabetical list of recipes. Assuming that we want to expand the recipe database, we will need to decide on some sort of taxonomy to make finding our way to recipes simple. Also a search feature should be prominent, the current one is broken, needless to say. The forum feature of the current site seems an unnecessary add-on and one that will be dispensed with in the new design, at least for the time being: the blog will allow for user feedback and commentary. Ads should be kept separate from the main content to help keep the design un-cluttered, so maybe in a side column. I think that a daily changing recipe (pulled in from the recipe database with PHP)  appearing in the main column would give the site a focus and identity as well as provide impact. A secondary navigation menu will contain the recipe headings, with drop-down menus leading to the individual recipes while the primary navigation will link to each web page section:  home, blog, shop, index, tips & technique, about. There should also be a social network link box, with links to Facebook, Twitter  & an RSS blog feed.

So. Now to the sketch book.

colour coursework Design graphic design layout Web Design

Visual Design for the Web: design principles underlying 3 chosen web pages

1. Emigre.com

This visually pleasing design uses a symmetrical grid layout to great effect. Although the design appears to be a simple 3 column layout, it can be also thought of as a 5 column grid where content spans 2 columns for the right-hand and central columns. This manages to create a feeling of balance and harmony and allows the varied and constantly changing images that appear within the various content boxes to convey the visual information without creating confusion.

The arrangement also allows the eye to be drawn to each of the distinct content boxes and to rest there without any sense of needing to find a focus elsewhere in the page to distract from what’s being observed. The design is flexible in that other pages within the site can revert to any layout in based on the grid, be it 3 column, 5 column or whatever.

The colour scheme enhances the function of the site; namely to showcase the beauty of the various typefaces and artworks in a naturalistic way. The bright red of the navigation box is brave – normally a warning colour, here it signals priority and a place to bring your attention to easily when needing to find textual navigation cues, although each box too offers a purely visual, clickable pathway to further content.

The ratio of the height to width of each box also appears to be governed by the golden mean as can be seen in the image below.


This further enhances a sense of order and harmony allowing the overall design to function in a highly successful way, despite the wealth of visual information on view at any time. But the dimensions of the boxes are also chosen to lend a strong diagonal rhythm to the design. Together with carefully selected graphic elements, such as the diagonal spot motif & the photograph of the potter at his wheel  in the picture, these further aid the eyes in guiding them comfortably around the page between the various component blocks, never feeling inclined to spend too much time resting in a specific location, constantly scanning the ever evolving landscape of visual information.

2. eyemagazine.com

An altogether more complex grid arrangement appears to be in place with eye magazine’s website.

If we examine the central content area we can see a grid of thirds, each divided into 2 further columns so that there are 6 columns, alluded to by the vertical graphic elements in the centre of the page. This determines the placing of the main navigation text, much of it revealed only on mouse rollover with accompanying sound effects. However, on closer inspection  another grid appears to be superimposed on top of this to provide other text cues and an alternative navigation structure, such that we have 2 overlapping grid block layers as it were. This is reinforced in the use of distinct fonts for each seemingly competing layer of information.

This then is a bold design – challenging accepted visual norms concerning symmetry and order but one which is aimed at the community it serves, namely graphic designers. In this context, such a highly complex and visually unorthodox approach makes complete sense and the message appears to be that conventions and ideas about standardised web design practice are there to be challenged and when necessary, broken. The use of ‘click here’ cues is telling and clearly the advertising content is kept distinct through the use of colour, the main section remaining resolutely monochrome. But design elements within the page are clearly following the classic rules of proportion as can be seen by the shape of the book, the outline of which fits neatly inside a Fibonacci spiral!


3. Hill Farm Design Project

Obviously, I’d love to be able to claim that my design for the Hill Farm site was based entirely on strict rules of structured grid design and golden ratios, only it wasn’t. It’s a fairly simple 2 column layout – I intended the ratio of the main to the right-hand column to follow the golden mean, but I found that the images looked too small and I settled on what I felt was a happy medium.

You can see from the graphic that certain blocks of information do fit nicely within the golden spiral, though this is by accident really, although I did follow an intuitive sense of proportion and composition.

One element of the design that I think works is the graphic illustration v-shape drawing the viewer’s attention downwards towards the main content. I also kept this asymmetric as it seemed to make more visual sense to me.

Clearly, I hope that some of what I’m learning now would pay off in a more coherently thought through design solution for my future projects

coursework graphic design humour software Web Design

In Defence of Fireworks

Not the sort you lob at your neighbour’s cat, but the Adobe software version which was somewhat dismissed in a recent discussion we had of graphic design tools. I posted something up on the forums recently about Matt Inman’s article on how he built a dating website from scratch in 38 minutes, or something like that. So that led me to look at bit more at Matt’s work and find out some more about him which I did, including this hysterically funny 5 minute presentation he did for Ignite, Seattle. The best part of this research was discovering Matt’s site, The Oatmeal, which is a depository for his own particular brand of twisted graphic humour and something of an earner for him too.

You may or may not find any of The Oatmeal’s content funny – if you have ever owned a cat then you should. I do, but that’s not really the point. I subsequently found out in another interview that Matt almost exclusively uses Adobe Fireworks to create his cartoons and all the graphic content for his web designs, so I thought I should have another look at this somewhat underrated application. My only previous experience with Fireworks involved knocking up a couple of shiny buttons for something-or-other, and I had pretty well dismissed it as what got thrown into the box with Photoshop, Dreamweaver, Flash etc: i.e., a bit of filler.  A bit like those rubbish tracks no one particular likes when they buy an album – does anyone still do that?

Well Fireworks is a lot more than that, and I’ve discovered that it’s a really nice way of quickly knocking up good looking web graphics. What I particularly like is the way it achieves a balance between the detailed vector and type facilities provided by Illustrator, and the bitmap intensive image manipulation of Photoshop. Don’t be fooled by the relatively simple interface and toolbox – there’s a lot of power in this bit of kit. If you want any of the more advanced image manipulation features that Photoshop provides then you can always save the Fireworks file you’re working on and choose which layers you want to appear in the resulting PNG24 output. You can then just open the file in Photoshop and away you go. I’ve found that anything involving text or vector shapes looks so much better in Fireworks, and I’m increasingly switching back and forth between it and Photoshop for any graphic elements I’m working on. Anyway, don’t take my word on it: web designer, Jonathan Snook has a good article about working in shapes in Fireworks and there are quite a few other resources out there too.

For what it’s worth, I started working on a possible banner / header for the Hill Top farm project and came up with this. Now I’m no expert designer, actually more of a novice, but I think it looks pretty good. Not sure if it’s appropriate or even if it will make it into the finished design, but it was a worthwhile exercise, an enjoyable bit of prevarication and certainly made me realise that there’s more to Fireworks then shiny buttons and garish outline text. I recommend you to give it a try.

Sermon over. 

Uncategorized

A short paragraph on The Uncanny

scary doll

The Uncanny can be thought of as an unsettling, discordant and strangely empty feeling of apprehensive anxiety about the familiar or outwardly comfortable and everyday. Although considered at length by theorists such as Freud and later Lacan, perhaps we are most familiar with the uncanny through its creative exploitation in the works of filmmakers such as Hitchcock, who was an expert in the art of loading everyday events and objects with overtones of suspenseful menace.

Design layout typography Uncategorized Web Design

Bad typographic examples

1. Express.co.uk

The website for the Daily / Sunday Express is a bit of a mess: a mish-mash of poorly laid out  headlines, subheadings, links, ads & minuscule,  difficult to see photos.  The fonts are absolutely sized, hence accessibility is poor, which for a national news title is unacceptable. The endless reams of home page content means a lot of scrolling up and down to take everything in: it could really do with drastically slimming down with huge chunks of content moved off to appropriate sub-pages. It seems to be a case of a poorly executed attempt at translating the columnar print newspaper layout to the web. The placement of ads is also particularly obtrusive .

2. Ryanair

Ryanair home page

The world’s least favourite airline seems to pride itself on its no-frills approach and the website falls under the same design ethos. Ugly layout, difficult to read mixture of absolutely sized fonts, distracting and obtrusive flashing ads, a header that spills over the column layout: horrible. Budget airline sites don’t have to be this grim: just check out Easyjet or Monarch.

3. Things Mac OS X

things mac osx web page

A seemingly endless list of Mac OS X related links divided in to sections with no navigation provided. It’s hard to get too bothered about a site that’s probably some geeky fanboy labour of love. That is, until you consider the use of the utterly hideous Papyrus font. Give me Comic Sans any day.