Dr. Neil's new clothes

Dr. Neil’s new clothes

This article is the first in a series of tutorials revealing the design techniques used on content rich internet sites. ’Dr. Neil’ is a programming genius and fortunately a friend of mine, as an example of the possible uses of Microsoft’s Windows Live Local service he created a fun ‘mash-up’ which lets us all know exactly where he is at any given time. You can check out the alpha version of the ‘Where is Dr. Neil’ website here. If you are technically minded you can also work through the ‘how to’ article that Dr. Neil has written which explains how to build the ‘mash-up’, view this here.




Most of the tutorial screenshots will click through to larger versions.

Dr. Neil’s technical prowess is not in question but I knew that the webpage could be improved upon aesthetically, the objective of the project was to improve Dr. Neil’s branding, increasing the perceived value of his services, also to make the page easier to navigate and to improve the quality of the user experience.

The first step in any online development is to set out the parameters based on the target audience; it was our intention to make the webpage viewable to the maximum amount of web users so I decided upon a screen size of 1024x768. To accurately set your browser to emulate a screen resolution of 1024x768, you can use a neat little ‘add-on’ for Firefox called: ’Web Developer Toolbar’, using the resize menu you can set your browser size to any pixel dimensions that you choose, avoiding the lengthy process of physically resizing your desktop (Most Creatives will invariably be working on a desktop size larger than the average web user).




Next I focussed on the layout of the page from a usability point of view. The foundations of any design project are crucial and I would recommend that you always allow time to ‘sketch out’ a concept before opening Photoshop (Or your application of choice), you can do this on paper but I am fortunate enough to own a Tablet PC, if you have a similar input device I highly recommend investing in Alias Sketchbook Pro, an extremely intuitive drawing application.

Sketchbook Pro allows the designer to bring a screenshot into the application and set the opacity to approximately 40%, this is fantastic as it enables you to ‘sketch’ over the top of the existing design.




Sketching out my ideas; I chose to use a navigational bar aligned to the left of the web-page. This allowed for the maximum viewable area of ‘map content’, as the idea behind ‘Where is Dr. Neil’ is to encourage viewers to play with rich internet mapping applications. Important information like the logo is in the top left corner of the screen, other important details are contained in this content bar aligned left, this should be on-view even on computers with smaller screen resolutions.

On commercial projects this is the point at which I present ideas to the client, it is crucial that interaction design projects are a team effort, most clients will not appreciate you creating a whole website without showing them visuals and involving them in the thought process.




I knew that Dr. Neil had been working on his corporate identity already but I wanted to take his new logo and tweak it to differentiate this webpage from his other sub-brands. When working with logos, especially for ‘blue chips’, this is normally a no-go area, however in this instance Dr. Neil agreed. If you are building a logo for a sub-brand I would recommend tweaking the logo no more than 10% visually.

As the theme of the webpage is ‘Where is…’ I decided a magnifying glass on the Dr. Neil logo would be a suitable design tweak to differentiate the brand, there are a number of applications in the market place for this kind of illustration but I still love illustrating using Flash’s ultra-simple drawing tools.




Once I was happy with the look of the magnifying glass icon, I took it out of Flash and into Photoshop , using an opaque gradient and highlight for the glass area before finally adding a drop shadow as a layer blending option. I also increased the size of the logo below the magnifying glass to complete the magnifying effect.

TIP: When moving vector graphics form Flash to Photoshop I use Illustrator as an in-between step. ‘Copy and paste’ into Illustrator , then ‘copy and paste’ into Photoshop , this will allow you to paste the image into Photoshop as either pixels, paths or even a shape layer.



For the rest of the design I continued to work in Photoshop , taking the graphical elements of the original webpage one by one and ‘re-skinning’ them. If you are designing a webpage of any kind it is always useful to work on a canvas that represents the final delivery of the interface, this way you can see your design evolve ‘in-context’ with it’s final surroundings. With any website design I always take a screen-grab of a browser window first, place this on the top layer in Photoshop and then delete the central content area, creating a window to design the webpage within.




When working on a rich interface always pay special attention to the details, it’s the little things that make the big difference to the online experience.

I took special care to ensure that details such as the ‘Controls’ (below) were branded similarly to the rest of the page. Other graphics that required this kind of attention included the pushpin graphics, calendar and photograph. As we are using the Windows Live Local Beta API for free, it is also important to credit Microsoft by placing their logo on the webpage.



The original alpha version of ‘Where is…’ had a pushpin graphic to indicate where Dr. Neil would be located at that specific time but I was keen to add some extra value to the webpage. I made the suggestion to include some extra pushpin graphics to represent other ‘places of interest’, with any interaction design I think that it is important to ‘make a place’ and interact emotionally with the user. Adding ‘places of interest’ adds value to the user experience, it makes it easy for the user to relate to the location.



To stylise the graphics that appear within the pushpins I used a well-known technique within Flash called: ‘Trace Bitmap’. This transforms a bitmap image (JPG) into a vector image (Similar to EPS or Illustrator file). Simply select the imported JPG file in Flash and choose: Modify > Bitmap > Trace Bitmap.




The final design needs to be spliced and delivered to the developer as gif/ jpg files. The final delivery of graphics will be specific to individual developers but there are a couple of basic rules regarding gifs and jpgs. I always use Image ready to export my graphics, it is part of Photoshop CS and can be accessed as follows: File > Save for web…




As a general rule; when you export to web formats (gifs/ jpgs) the images are always compressed so usually you have to make a decision based on how well different images will compress, the exception to the rule is when you require transparent areas within the graphic, in this case a gif is always used. (Above)

I make my compression decisions a follows:

Gif compression (above) works by reducing the number of colours in the palette of the image, as an indication most web ready gifs will use less than 64 colours. So if the clarity of your image is not dependant on the amount of colours within it, use gif compression.

Jpg compression (below) works similarly to broadcast video compression in that it actually distorts the image, however you can use as many colours as you like (some colours do compress better than others though!). The more that you compress the image the more it distorts, this kind of compression works best on photographic images and as a general guide I would recommend exporting at a jpg quality of ‘50’. It is also advisable to apply a tiny blur to help with the compression.




I hope that this tutorial has been useful and look forward to your feedback!

Adobe FLEX their muscles...

Anybody following my posts on ‘Web 2.0’ and the opportunities that it offers for designers will have noticed no mention of Flash and it's part in the revolution. I have long been an ambassador for Flash since it's inception nearly ten years ago, in fact when I first picked up the product it was called Futuresplash. Flash has been bridging the gap between interaction designers and developers for quite some time now, and you could argue that sites like Nike ID already offer Rich Internet Applications, however it seems that Adobe have been busy in their laboratories working on their ‘Web 2.0’ offering: FLEX.

Be sure to follow this link for an exciting preview of the product.

An online time and place for everything

I noticed an interesting article in The Guardian newspaper this morning, written by Jack Schofield, it talks about last weeks launch of Google's new calendar. This is an interesting follow-on from my Web 2.0 articles:

'Google Calendar is faster and easier to use. Like Gmail, Google's email service, Google Calendar downloads and runs JavaScript code in the browser (Internet Explorer and Firefox only), which makes the user interface much more responsive. Google has also exploited the iCalendar internet standard, which has superseded the old vCal, and XML, the eXtensible Markup Language. The first makes it much easier to share calendar data; XML makes it easy to add a button to a web page, which users can click to add an event to their Google Calendar.'

View the full article here.

The web is in renaissance, your industry needs you…

Perhaps ‘Web 2.0’ is a buzz-word, but it represents a seismic shift in the area of interaction design, after all it will dramatically affect the way that consumers interact with websites. ‘Web 2.0’ is undefined within the designer community, the only thing that is certain about this new technology/ philosophy is that you are not the only creative to be puzzled by the concept. Whatever it actually is, it seems to be gaining momentum pretty rapidly and the lack of definition is probably a good thing, who needs creative boundaries anyway?

“Web 2.0 is often considered a name in search of a technology”
Andrew Betts, Assanka

Thousands of column inches have been crammed with the opportunities that ‘Web 2.0’ presents but 99% of this content is aimed at developers, reminiscent of the early days of ‘Web 1.0’; it feels like the ‘techies’ are having a party and everybody else is on the outside looking in. After the orgy of money thrown at the birth of the internet and the following dotcom crash, perhaps a more conservative approach isn’t so unrealistic.

I have had the privilege of working closely with technology companies including Microsoft and will be writing some project specific articles and ‘how-to’ documents once these developments are released to the public. The murmurs escaping the developer-occupied ‘Web 2.0’ festival have a familiar ring: “It’s not just about data; it’s about interacting with it”.

So, the revolution is about websites interacting with each other as well as the consumer, a ‘social web’ where websites are created by more than one editor? A fantastic example of this is ‘Flickr’, a leading ‘Web 2.0’ site which clearly illustrates how a community can build functionality. Another, more familiar example of the ‘social web’ is Amazon who utilises passive features such as: “People who bought this book also bought…”

Perhaps the most exciting emerging technology is APIs (Application Programming Interface), a frame of reference that allows third-party developers to produce sites or applications that draw on data presented by the other site. An example of this is the Microsoft local.live.com API which lets you embed maps on your own site and overlay your own data, almost as if the maps were stored on your own local server. To see a number of examples of this visit the gallery at ViaVirtualEarth.com.

APIs allow application-style functionality to move from the ‘desktop’ to the ‘WebTop’ and so a richer internet experience is born. There are obvious implications for companies who rely on license upgrades to desktop applications so we can expect some action there; Microsoft is radically overhauling office, what’s next? From personal experience and contrary to popular belief I expect that they will embrace the ‘WebTop’, a quick look at ideas.live.com will give you some insight into Microsoft’s plans, especially when you consider that the official name for these services is Windows Live.

The reanimation of Explorer is another indication of Microsoft’s intentions, it is understandable that they will protect the Windows platform but at the same time they are well positioned to compete in the ‘WebTop’ arena. They have even moved into new markets with their ‘Expression’ suite of applications, clearly aimed at designers and specifically interaction designers. Each of the three products are clearly positioned to steal market share from Adobe, ‘Graphic Designer’ takes on Photoshop and Illustrator (a more than impressive objective), ‘Interactive Designer’ takes on Flash, although it exports to XAML rather than an executable format and Web Designer goes head-on with the formidable Dreamweaver. All of the above are available as Beta versions except Web Designer which is expected to be the ‘cream of the crop’.

The largest opportunity for Microsoft and other leading technology companies is to embrace the design community, most designers will not be aware of these products, they were launched in Vegas at Microsoft’s Mix ’06 conference which also failed to embrace or invite the design community.

Google are firing on all cylinders with their own set of Web 2.0 services that include: Talk, Sidebar, Mail, Local and Desktop. With ‘Desktop’ they could be just a few steps from a Google OS. They are definitely riding high and cannot seem to do wrong in the eyes of the investors.

The battle-lines are drawn in an exciting new arena and the wealth of choice can only be a fantastic opportunity for interaction designers, after all we will be the ones interfacing directly with the clients and their advertising agencies, seeking out the developers that are not only interested in open-source developments. The sooner these Web 2.0 services can be monetised the sooner a Win, Win, Win solution can be realised.

For the interaction designer, the only limits will be our imagination, even with new technologies or technology combos such as AJAX, the visual real estate is familiar. Providing the idea is good enough and the developers are interested, the opportunities are endless, hold on – it’s going to be one hell of a ride!

Web 2.0 defined

UK Design mag: ‘Webdesigner’ have run a feature on Web 2.0, they asked leading industry experts what Web 2.0 means to them – here are the responses:

“If you missed out on Web 1.0, then here’s your second chance to be in the right place at the right time. That’s why Web 2.0 is extremely exciting. It’s not just for technology suppliers like Actinic. Online retailers are going to cash in big time. In Web 1.0 stores were dumb; they told you the price and they took your order. In Web 2.0, however, they’re smart and they relate to you. Imagine going to a clothes shop and only being shown what fitted and what was in stock. What if the store knew what you shouldn’t wear (making Trinny and Susannah redundant)? That would be better. It might even tell you what you could afford. The end result would be smart in every way.” Chris Barling, CEO, Actinic

“Web 2.0 will greater resemble the original concept of the internet, with ubiquitous access and easier interaction. Whilst Web 1.0 has been dominated by large corporate sites, Web 2.0 will be defined by the personal user, by their participation and by the collective intelligence that collaborative platforms will generate, Today’s teenage generation takes email, instant messaging, personal homepages and MMOs [multiplayer online games] already for granted. Web 2.0 is just a ‘signpost’ along the way to even more integrated digital lifestyles in the future. Andreas Gauger, CEO, 1&1 Internet

“The only thing new about Web 2.0 is the name. Everything claimed for the internet in the dotcom boom is now coming true, so perhapsthis new era should be called ‘Told you so’ 1.0. The curse of the dotcom boom was not that the ideas were wrong but that the orgy of money thrown at the birth of the web attracted the wrong kind of business player. Finally the web has entrenched itself in enough lives to start rewriting the rules. ‘The visionaries’ dreams of ‘free information’, ‘network computing’ and ‘business at the speed of thought’, are exploding into the mainstream from their early-adopter lairs.” Clem Chambers, CEO, ADVFN

Thankyou - www.designers-who-blog.com

Thankyou to designers-who-blog, who have featured my blog on their site this month, please visit their excellent website.

Certificate Artwork

A little off-subject, but I have spent the last couple of days working on some artwork for a certificate. What set out as a fairly simple project ended up with a lot of pixel-pushing. To save anybody else some hard work (Pending my ISP's bandwidth restrictions) I have uploaded a fully changeable, vector EPS of the artwork to download and use as you please, just drop me an email and let me know where you use it.

Version:1 or Version:2?

Version:1 or Version:2?

Just in case you are struggling to get your head around the differences between Web 1.0 and Web 2.0 technologies, O’Reilly Media have conveniently put together this simple but effective table:

Web 1.0 --> Web 2.0

DoubleClick --> Google AdSense
Ofoto --> Flickr
Akamai --> BitTorrent
mp3.com --> Napster
Britannica Online --> Wikipedia
personal websites --> blogging
evite --> upcoming.org and EVDB
domain name speculation --> search engine optimization
page views --> cost per click
screen scraping --> web services
publishing --> participation
cms --> wikis
directories (taxonomy) --> tagging ("folksonomy")
stickiness --> syndication

You can read more about O’Reilly Media’s opinions of Web 2.0 here.

Web 2.0 Glossary; believe the hype.

It is easy to dismiss a term such as ‘Web 2.0’ as hype, Dale Dougherty of O’Reilly Media coined the phrase back in October 2004, when he was describing how the dot.com world had crashed so spectacular three years earlier. The phrase took hold and the developer community are ‘into it’ so why aren’t interaction designers?

The name itself is reason enough for designers to steer clear of anything ‘Web 2.0’, it is a spectacularly techy choice of name, and is clearly reminiscent of the early days of ‘Web 1.0’ when designers were scared away from switching to interaction design with words like ‘JavaScript’ ‘html’ ‘gifs’ and ‘jpgs’, we remember the web before designers were invited to the party, the most exciting pages consisted of tiled brick backgrounds with lots of text (Times New Roman) and big grey buttons.

No wonder the design community were happy to stay at home and play with Quark, an old buddy that they were completely familiar with. However, with risk came reward, and the designers who made the leap to interaction design were more than rewarded! They also had a lot of fun along the way. So the real question is: Can you afford not to believe the hype?

It is my intention to fully investigate everything about the web mk II, and I will be publishing a series of articles that are related to the new ‘WebTop’ experience, beginning with a glossary of Web 2.0 terms so that designers have no excuse to stay away.

Ajax:
Asynchronous JavaScript and XML. A group of technologies that shift the burden for processing information from the server to the local PC. This allows a browser to download all of the information it needs to render the page, including database variables, and lets the visitor use and manipulate that information on their PC without having to refer back to the server. This is clearly closer to running an application, reducing site-traffic.

API:
Application Programming Interface. A frame of reference that allows third-party developers to produce sites or applications that draw on data presented by the other site. An example of this is the Microsoft local.live.com API lets you embed the maps on your own site and overlay your own data, almost as if the maps were stored on your own local server. To see a number of examples of this visit the gallery at ViaVirtualEarth.com.

Blogroll:
A collection of links, often stored in a database, so that it can be manipulated in an intelligent manner.

RSS:
Really Simple Syndication / Rich Site Summary. An XML-based document structure that presents the content, but not the formatting of a website. Tags within the file define the purpose of each piece of information in the structure, allowing it to be re-used in other pages.

Ruby on Rails:
Application framework developed by 37Signals that allows for the rapid development of MySQL –based applications. Could be the most important language in the development of Web 2.0 applications, a logical progression from PHP and a good first step for programmers.

Tag:
A descriptive term applied to any kind of data to make it easier to find. The most famous example are the tags applied to images in Flickr that allow you to search for and categorise images stored in the site.

Tag cloud:
A visual representation of the number of times a particular tag had been applied to objects in a given database.

Trackback:
A special kind of link that joins an original piece of content with derivative works, or new pieces of content that refer to, or were inspired by, the original. This is most commonly found on blogs.

Wiki:
A special kind of site to which users can add their own information, or change the information that is already stored there. Most famous example: Wikipedia. Wikis were the initial idea for how the web should run but technology limited this.

User Experience Matters!

Great post by Soma about designers and developers working together on emerging web technologies.

Easy Truetype Font generation for tablet users...

I have just downloaded a power toy from microsoft which enables you to 'ink' your handwriting into a truetyoe font quickly and easily using a tablet input device. Download it here, check out the font that I created in less than five minutes here.