I don't always get asked to build completed sites: in the case of 10 Clarendon Crescent - residential apartments for visitors - I was asked to build a site-shell that can be added to easily over time.

Part of the reason for this was the ongoing development of the apartments themselves (being converted from an old hotel) but also the marketing was already beginning and a web address / site needed to be set up to supply more information at this early stage.

Therefore the site needed to be easily updated, simple to use and also easy to edit repeatedly as content may well change as the development entered different stages. So, it may be a shell, but feel free to check out the design - what was required was a striking, classy and informative site, with clearly defined sections and big buttons to make each page obvious.

The page also needed to incorporate a nice hand-drawn picture of the building (a remnant of the old hotel's design work), as well as a new logo for the establishment, all blending in to a high-contrast look.


The homepage of the 10 Clarendon Crescent website

One aspect of the site that I was asked to build was the mapping elements. In the end we went with a simple locational map, with a smaller inset-map on the homepage, leading to the map / address details. In time, a directions box will be added, but as the apartments aren't ready yet, we felt this could wait a while.


Detail of the maps on the 10 Clarendon Crescent website

So that's a bit of detail on a (relatively) recent project - I've been working away on a major project that is nearing its release date, but I can't give any more information out until that point - but I'll be sure to do a profile of it once it's done. Due to the reduced amount of time I have on design work, it makes it easier taking on one-off large projects than multiple small ones as I did before.

Beats! Design Project: 10 Clarendon Crescent
 

 

 

I was recently looking at a few links to one of my services - The UK Webcam Map - and found a blog that had discussed the service a year or so ago. The post was on the Mapperz Blog and discussed the map and possible future directions:


So, some nice comments there and an interesting suggestion to take the map further. First off, GeoRSS is a good suggestion - but this was limited at the time by the amount of data released in this format. The UK Webcam Map updated weather icons 3 times a day, whilst GeoRSS was only published once a day.


A GeoRSS feed imported to a Google map to show the weather forecast

The example they give is a BBC Backstage project called BlueGhost UK Weather (see screenshot above). This is an interesting project and one I may well take a better look at in the future. Recently, the way the UK Webcam Map gathered its data became defunct (Met Office site redesign) so a new method is required. It may still mean that there are less updates each day, but it would be an interesting project to develop.


The UK Webcam Map helps predict weather forecast accuracy across the UK

Just to round off this mapping-themed update, I thought I'd finish off with an interesting map I saw via the StrangeMaps Blog. It's a map of world ring roads, placed on top of eachother, to show the varying sizes of these roads across world cities. As can be seen from the map below, a lot are of similar size, but Houston (whose Rice School of Architecture the map was commission by) shows just how big these roads can be with its mammoth effort (in black):


© Rice School of Architecture (2009)

As a very brief aside, it's worth visiting the Rice School of Architecture website - mainly as I rather liked their top menu system and Flash site - shows how Flash can occasionally be used in a stylish, usable fashion:


Rice School of Architecture Menu System

Anyway, back to the road map - I thought it was a nice piece of work, partly as an interesting global comparison and partly as it looks good - a combination that always works well! I'll leave it with the funders of the work to explain the work:


Thumb Porjects: Ring Roads of the World
StrangeMaps: Does My Metro Area Look Big In This Ring Road?
Rice School of Architecture, Houston
 

It's nearly that time of year again, where the Edinburgh Festival takes over the city and people flock to visit the huge variety of performances on offer. And as always, the website / booking service is getting a bit of abuse across the web. They say the online booking system is greatly improved this year, but the website still remains the same design (shame). I haven't fully checked this year, but usually there is also a major lack of a decent, interactive venue map.

Last year I decided to tackle this problem head on by creating the Fringe 2008 Map - I did this project as a 24 hour app or Mashed 2008 - and although I've not done anything this year for Mashed 2009, I'm happy to say I've given the Fringe Map a few tweeks and a redesign for 2009.


Screenshot of the newly-designed Fringe Map 2009.

So, if you'd like to take a look at this years map, click the link below. As always, the map is fully interactive, with users being able to update and edit venues as well as being able to sort the map in a large variety of ways, depending on your needs. And just as a bonus, a few of my favourite food/drink venues are on there too, in case you're unsure where's good to go!



And just to show the Fringe website services aren't all bad, I was pleased to see a nicely designed Flash "game" used to promote this year's festival. It's called "The Fringe Thing" and is an experiment-based discovery tool, whereby the "thing" (it looks much like an egg) can be interacted with in a number of ways, with the ultimate aim of finding out what it is. Some of the experiment videos are great fun as well - and although it has no real purpose, it's a nice little app to kick things off :)


The Fringe Thing - Experimental Game [click to visit]

Beats! Design Blog: Fringe 2008 Map - Mashed!
Fringe Map 2009 - A Beats! Design Project
Official Fringe 2009 Site
"The Fringe Thing" Game
 

I decided to tinker around with StreetView and make my own client, with a number of tools not available on the official site. I've developed a system that chooses a random location in the south of Edinburgh and allows you to explore it.

Although I made this a few weeks ago, it's taken me a while to write it up. I've testing out a new system for projects where some of the more technical details are hidden until you click to expand. Sorry for the delay, but hope it works!

The following code highlights a few excerpts from the StreetView client above, but certainly isn't comprehensive - for that, just check out the source code. First off, you need to declare your variables: var panoClient; var map; var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var marker; var guyIcon; var mapCentre = "55, -3";   Next up, we need to create a basic StreetView client and panorama to display and parse the data [note the ¶ symbol shows an unintentional line break]: panoClient = new GStreetviewClient(); panoClient.getNearestPanorama(mapCentre, showPanoData);   panorama = new GStreetviewPanorama ¶ (document.getElementById("pano"));   Then the panaroma div needs to be sent a location, yaw, pitch and zoom - in this case, the last three variables are given 'current' values so data can be gathered from the user's selection: panorama.setLocationAndPOV(new GLatLng ¶ (mapCentre), {yaw: currentYaw, pitch: ¶ currentPitch, zoom: currentZoom});   The ability for the client to smoothly rotate the map is gained from only two small functions, one to set the parameter changes and one to set the timer changes. These values can be tinkered with to change the speed and movement of the rotation. function spiralslow() { currentYaw += 0.75; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); }   function spinslow() { clearInterval(timer); timer = window.setInterval (spiralslow, 50); }   In order to stop the rotation at any point, a simple stop function is created that resets the timer to zero: function stop() { clearInterval(timer); }   Finally, you can set up the marker icon to look like the little StreetView man used on the Google Maps site. Other sites may well have missed out the .shadow and .shadowSize lines, but without these the marker will be given an extra shadow - the PNG file for this marker has a shadow in it, so you need to set the default shadow to 0 to end up with it looking right: guyIcon = new GIcon(G_DEFAULT_ICON); guyIcon.image = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man_arrow-0.png"; guyIcon.transparent = "http://maps.google.com/intl/¶ en_us/mapfiles/cb/man-pick.png"; guyIcon.shadow = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man-pick.png"; guyIcon.shadowSize = new GSize(0.0, 0.0); guyIcon.imageMap = [26,13, 30,14, 32,28, 27,28, 28,36,¶ 18,35, 18,27, 16,26, 16,20, 16,14, 19,13, 22,8]; guyIcon.iconSize = new GSize(49, 52); guyIcon.iconAnchor = new GPoint(25, 35); guyIcon.infoWindowAnchor = new GPoint(25, 5);   So that's some of the key functions in this StreetView client - take a look at the source code if you want to find out more. The above code presumes some knowledge about embedding Google Maps, but it's all relatively simple stuff that can be picked up in numerous online tutorials.

- The StreetView Icon doesn't show view direction - Each random view is calculated in JavaScript, within a bounding box - The Panorama function helps find the nearest StreetView - Google Maps Blog: StreetView Panaromas - Google Maps API: Street View Objects - Solving StreetView Issues in IE

 

OK, so I was expecting something 'April-foolish' from Google but didn't expect it to be quite this subtle - I was thinking maybe a re-designed logo or an unusual search result, but it seems they've plumped for a Street View panda icon (that old chestnut!).

Maybe this is just in the UK (we've only just got Street View after all) but if you go to Google Maps drag the yellow man onto a blue street as normal, now he magically turns into a panda in the overview map:


Google Map Panda with multiple positions (insets, left) and classic yellow man (inset, middle). © Google (2009)

I'm about to launch a new Street View service on this blog (next post) so watch out for that - in the mean time, you'll have to make do with some bamboo-fuelled goodness!

Google Maps with Panda Icon (only working today, I imagine)
 

I've posted a couple of times about things I've seen on the Strange Maps Blog (see: Old School GPS & Hoaxe Island and Pop vs Soda (USA)) and another post recently caught my eye. It's a decent blog, but occasionally things stand out - I'll try to add some context here too.

This time, it's a map of the world using typography to fill in the land area with the name of each country. It was created by Vlad Studio (a wallpaper design guy) and some countries were obviously considerably harder to work with than others. Firstly, some of them have awkward shapes, secondly, a lot of countries are way to small to fit readable type inside and thirdly, some countries names are way too long! It seems people didn't have such a task in mind when creating their states.

Looking at the image in detail (click to enlarge), It's fair to say any country smaller than Ireland has little chance of making the readability grade - leaving 111 countries out of the picture. As there are around 230 countries (too disputable to be 100% accurate!), this leaves only half the world's countries on the map - but I still love the look of it:


© Vlad Studio (2009)   [link]

After seeing this, I thought it would be fun to find some other unusual maps - and not just modern designs but a few older maps that saw the world in a slightly different way.

First up, here's a map of the world with north at the bottom - and as space doesn't really have an up or a down, this map is just as accurate as any other - but it's strange how wrong it looks. Growing up in the UK, I also find it weird seeing maps that don't have GMT (and hence the UK) in the middle:


© Wall-Maps.com (2007)   [link]

In fact, the first map of the world - The Fra Mauro Map of 1459 - used a similar system, although as was commonplace in the 15th century, a circular space was used rather than a more modern rectangular projection system. Fra Mauro was obviously a pretty impressive mapmaker though, as his map is not only beautiful, but he was described as "geographus incomparabilis":


© Wikipedia, Creative Commons (2006)   [link]

The next map is from a similar period - 1550 - and is 'upside down' in part - as the site I discovered in on explains:




© Philip Print, London   [link]

Finally, here's a map that doesn't invert any display directions, but simply inverts land and sea - it's hard to imagine us all living on one massive chunk of land with a few huge lakes in the middle - but it might be fun:


© Asenka, Picasa (2008)   [link]

So that's a little round up of some unusal maps - I'm sure there are plenty more examples out there and the Strange Maps blog is always a good place to start!

Strange Maps: Typogeography, Illegible and Otherwise
Vlad Studio
 

I saw a story on the BBC website yesterday about Google.org creating a map of influenza activity in America based on recent Google search terms alone. The concept is relatively simple - keep track of the prevalance of certain search terms (for example "buy flu rememdies") and track the locations they are coming from to produce a map of current flu patterns across America.

This system wasn't designed to replace any current data (obviously, cases of Flu can be tracked by official health data) but instead could provide an early warning system for health professionals about where the virus is spreading and where its activity is strongest. Using this system, flu activity can be predicted 2 weeks in advance of officially released data.


© Google (2008)

The idea has been tested against the official data when it is released and the search terms being tracked tweeked to give the best results. As Google say on their "about" page:

"We've found that certain search terms are good indicators of flu activity. Google Flu Trends uses aggregated Google search data to estimate flu activity in your state up to two weeks faster than traditional flu surveillance systems.

Each week, millions of users around the world search for online health information. As you might expect, there are more flu-related searches during flu season, more allergy-related searches during allergy season, and more sunburn-related searches during the summer. You can explore all of these phenomena using Google Trends. But can search query trends provide an accurate, reliable model of real-world phenomena?"


© Google (2008)

As you can see above, the data from Google and the official data match pretty well and the system can offer a useful pre-warning. I'd be interested to see how this idea can be taken further - the possibilities seem almost limitless!

Google Flu Trends: Flu Map
Google Flu Trends: How does this work?
Google Flu Trends: Original Manuscript (PDF)
BBC News: Google searches track flu spread
 

Google Maps recently released the functionality to make PolyLines follow the shortest path across the globe, rather than a straight line across the map projection. This will follow a curve showing the shortest distance between any points and will equate to roughly the route a plane would take to get between two points.

To see what I mean, here is an example. Move the two points to see the quickest route and also the route distance:



You might be wondering how to do that and it's really quite simple. You need to set up two points and have set up a PolyLine between them and then it's just a case setting the line to geodesic:true and you're in business:

 marker1 = new GMarker(52.166,0.966,{draggable: true,
   icon:iconStart});
 marker2 = new GMarker(37.4328, -122.077,{draggable: true,
   icon:iconDest});
 poly = new GPolyline(line,"#843718", 3, 40,
   {geodesic:true})
 map.addOverlay(poly);
 

Another nice feature and pretty simple to implement :)
 

I think I've posted about the Strange Maps blog before, so I just revisited it and thought I'd link to a couple of recent stories.

Firstly, there's the great story of a made-up island, used as an April Fools hoax by The Guardian newspaper. The headline is worthy of an award, but I'm not sure if that's of the blog's creation or The Guardian's!

Strange Maps - Semicolonial Island



-----------------------------------

The second story is of an old-fashioned 'GPS' system, only really of use in an age of few roads, or the amount of scrolls would become rather epic! Still, a great-looking solution to a problem and one I'm pretty fond of.

Strange Maps - Old School GPS


 

Strange Maps is an interesting blog that showcases the world's weirder maps, from modern GIS works to unusual historical paper maps. When I visited, the latest post was about the differing names for fizzy drinks across the USA. I've noticed a big difference with this in the UK too and although the research is kind of pointless, it's an interesting result none the less! I suppose that's what the blog is all about - click map below to enlarge:



Strange Maps - Home Page
Strange Maps - The Pop Vs Soda Map
 

I think a draggable box to resize a map is a really useful feature and is common in GIS software. I've seen this functionality on a couple of online maps before, so thought I'd have a go at implementing it myself.

I've adapted some JavaScript code I found online and designed a couple of button to control the zoom. So this feature doesn't conflict with standard controls, you click the zoom button to enable drag zooming - and click the button again to get back to default control options:



I'll explain in more detail how it's done soon, but for now you'll just have to hazard a guess! :)
 

When designing a new site, I like to keep an eye on the latest designs to make sure the colour scheme I use is fresh and looks good. I have nothing against using whatever colour scheme you fancy and great sites can be made this way - but I do notice myself favouring sites that look good. Only if I find a site with an incomparable service will I accept it with really poor design.

I think it's fair to say that colour schemes have varied since the internet started up. One of the most obvious areas to see this change is the hyperlink - it started its life as a (unstylised) royal blue and with the advent of CSS, this blue was often toned down and eventually done away with completely.

So I thought it would be fun to have a look at the colour schemes of major websites throughout time and create a chart of colours, with the most up-to-date colour scheme coming at the end. In fact, my most recent project (Fringe 2008 venue Map) was based on the colours shown at the end of the colour chart below.



The colours have been gathered from a host of well-known websites using links to their old versions. This was made possible by the Internet Archive - Wayback Machine, a list of cached web pages spanning over 10 years of the web's history.

The general trend is from royal / bright colours to murky / pastel colours and now onto bright, funky colours - avoiding royals. An interesting exercise, maybe it will be of use some day! :)
 

Just a small round up of nice things I've seen recently. First up, a BBC radio programme that won the Sony Award for Multi-platform Radio at the 2008 bash. Now, I didn't catch any of this programme but i can see that the 'multi platform' nature of the show is stitched together using an interactive google map on the main page - the show was called Bangladesh River Journey.



This map is nothing particularly special, although I like the way separate pages can be scrolled within each map marker, allowing a lot o0f content to be added without too much clutter. However, there is nothing particularly groundbreaking here. I think what it highlights is that relatively simple maps can really help bring a diverse set of media into a coherent web of content.

BBC Blog Post about the Award
Bangladesh River Journey Homepage


Another nice site I found was a high-res flash site for Sparks (an energy drink company). I particularly liked the high quality and large image (much bigger than a computer screen) that had to be explored to find the content. Obviously, this would only work well for a website with little meaningful content (a BBC site like this would be disastrous!), but it's great for a high-impact design site and fits in with the "fun" image of an energy drink.



It also adds a bit of 'real-life' into the web as it's basically just a large photo of a wall with things pinned to it using flash. Normally, when a document is much bigger than the screen, scrolling around it causes disorientation, but here that doesn't really matter - it's fun trying!
 

I recently stumbled across a new BBC project: World On The Move which uses a Google Map to track animal migrations across the globe, showing predicted and actual routes as well as user comments - all on a nicely integrated map that can be changed along a timeline:



The nice thing about this map is how seamlessly it is integrated with the content and the webpage itself. The BBC aren't often ones to make new ground with their services, but they often take the 'old ground' and use it in a professional and interesting way.
 

Since the beginning of the UK Webcam Map (beatsdesign.co.uk/ukwebcams/), users have been adding data on a number of things. Each day, weather data is imported from the Met Office (changes 3 times daily) and each info box shows the predicted weather at that location.

Users can then look at the webcam image and say if the weather is as predicted or not. This can then be used to show how accurate weather predictions are for that location...



This is not intended to show how weather forecasting can be inaccurate, but mroe to show which areas are served well by a general weather forecast. It may be expected that big cities would have more accurate predictions as weather stations are located there, or maybe that mountainous regions are inaccurate as weather there is very changeable....but take a look at the (ever-changing) results and keep sending that data in - thank you!