Tricky Business

Screenedit at Mix!

2007-09-09T02:36:00.000-07:00

This weekend we re-launched the screenedit.com website. With a lot of hard work from the whole team, but especially Dr. Neil, we have massively improved the website in time for Mix, Microsoft’s premier web design/ development event on Tuesday 11th-Wednesday 12th September. We really hope to see you at the event, I especially hope that you will visit the ‘community’ area that we are supporting, and more importantly attend my session on ‘Branding’ and ‘User Experience’ on the Wednesday ;-)

This blog has moved to:http://trickydesigns.spaces.live.com/

blog moved to: http://trickydesigns.spaces.live.com/

2007-09-03T05:57:00.000-07:00

I am moving my blog to: http://trickydesigns.spaces.live.com/

Expression tutorials on Lynda.com

2007-06-27T09:44:00.000-07:00

As we've actually started working on commercial WPF and Silverlight projects, I took some time out this afternoon to brush-up on my blend skills! You can currently access hours of 'Blend' and 'Design' tutorials at Lynda.com, for FREE! I highly recommend them as a 'getting started' guide.

I'm back...

2007-06-14T04:21:00.001-07:00

Link for Virtual Black Country: http://www.virtualblackcountry.com

'Soft' launch of screenedit.com

2007-04-07T02:26:00.000-07:00

This weekend we have opened the doors to screenedit.com, please vist the site as this is where I will be focussing my blogging energy in the approaching months.

Introducing screenedit:
Screenedit is the magic antidote for designer's block. As designers, you understand that interaction design is not about pushing pixels around a screen, it is imperative to 'create a place'. We have created 'a place' for designers to find both inspiration and peer approval. We believe that Screenedit is the only creative network that adds real value. We promise to look at technology objectively and is focus on the people and their philosophies. At its core Screenedit provides an arena to discuss interaction design.

Our goals
We will interview the evangelists of our industry and ask them: 'What does interaction design mean to you?'

We will create a resource that uncovers the meaning of interaction design and user experience.

We will encourage discussion, we believe that everybody's opinion matters.

Be sure to contact us and submit something today!

What makes you unique?

2007-02-02T01:31:00.000-08:00

These days most major brands are converging towards the 'middle ground' - here's an opportunity to think differently...

See if you can fill in the blanks:

____________ is the only ____________ that ____________

ie: 'Dyson' is the only 'filter-free vaccuum cleaner' that has a 'cyclone'.

netvibes.com

2007-02-02T01:24:00.000-08:00

I came across netvibes.com recently whilst trying to find a decent and unobtrusive rss feed reader, it has to be said, I am really impressed with the ajax-style programming on this site. It is really slick, intuitive and feels like a solid webtop application.

January news...

2007-01-31T06:24:00.000-08:00

If you missed the January newsletter here it is, you can sign-up by sending an email to: news@trickybusiness.co.uk.

We hope that you have all had a fantastic break and have started 2007 on a high. Please read on for this month's update...

Opportunities
Having successfully launched a number of marketing activities for our clients over the Christmas period, we remain extremely busy and there is a real buzz in our studio. We are searching for 'Junior Interaction Designers' to join our team so please email us if you know somebody who has lots of positive energy and is passionate about digital design.

Events
Coinciding with the UK launch of Vista and Office 2007, Microsoft will be showcasing their new 'Expression' design tools at Designertopia in London this week. We intend to take them up on the offer to explore the new design possibilities, check out our blog: trickybusiness.blogspot.com in February for a review of the event

Books that we have read this month and recommend
'Designing Interactions' by Bill Moggridge & 'ZAG' by Martin Neumeier.

Soon,(Brands from the future
This month's futuristic brand has been created by Adrian Baker. Someday soon, 'New Year's Diets' could be made easier with this fictional soft drink

Wishing you the best success in 2007

Microsoft make Expression Blend Beta2 available..

2007-01-31T06:14:00.000-08:00

Microsoft have today made the BETA2 version of Expression Blend available for download, in my opinion the most exciting of the Expression tools.

The installation isn't exactly intuitive, especially as the product is aimed at creatives. Uninstall .NET 3.0, install .NET 3.0, install blend...etc

When this dialogue box appeared, I just had to screengrab it so that it could sit next to my previous example of interaction design...

Multiple fonts, bad typography, poor logo design, unintuitive & uninspiring.

C'mon guys - what happened to designers and develpers working together on interaction design?

Creative Review Jan '07 issue... (Interaction Design)

2007-01-20T04:32:00.000-08:00

Inside the cover of this month's Creative Review,I found this photgraph, on the subject of designers and developers working together, and the role of the interaction designer, I think that this picture really is worth a thousand words…

Photograph by Nicolas Zurcher, IDEO

Revealing your new brand identity...

2006-12-14T02:40:00.000-08:00

Just in case you are considering tweaking your identity in 2007, I have produced a simple workbook: 'Revealing your new brand identity'. Within this short document I have included some of the questions that we often ask our clients to meditate on when they are uncovering their brands. Enjoy...

Flash on the beach...

2006-12-06T03:41:00.000-08:00

I've been fortunate enough to take some time out and attend the 'Flash on
the Beach' conference in Brighton, so far it has been a fantastic event with
some great speakers and a good vibe, here are some of my highlights...

It was a great keynote featuring Mike Downey, Mike Chambers & Mark Anders,
technologies that were presented included an overview of the Flex framework,
Apollo, (A kind of WPF equivalent), and 'Device Central' an application that is sure to make developments for mobile devices in flash a hell of a lot easier, allowing you to emulate and test in well designed GUI.

'Graig Swann's session on alternative methods of interaction with Flash was truly
inspiring and one of the most talked about sessions at the event, his passion
for his work is unbelievable. It focussed on kiosk-style use of flash and he
used all kinds of devices from microphones to webcams to tin foil to interact
with flash. His final slide featuring a quote from Einstein summed-up the
session:

"Imagination is everything, it is the preview of life's coming
attractions".

Aral Balkan had some interesting theories on workflow - based on XP.

Snow Dowd and Robert Reinhardt on 'writing your way to the top, was an inspiring and incredibly honest insight into the pros and cons of writing and the minefield of agents and publishers, check out more at:
http://www.flashsupport.com/forum/

John Harris presented Microsoft's new creative direction excellently, and
showcased their new portfolio of technology and software, 'blend' being the pick of the bunch, more info at:
http://www.microsoft.com/design

Hillman Curtis presented his recent work and his attitude towards his recent
video-for-web projects. It was an inspiration, yet again he has set the
benchmark for an emerging format, more info at:
http://www.hillmancurtis.com/

Random day out...

2006-10-27T03:26:00.000-07:00

Paul Clarke has brilliantly mashed together a whole bunch of technologies to create: 'www.randomdayout.co.uk'. A really nice use fo technology.

PC World - The conclusion

2006-09-24T07:08:00.000-07:00

A quick post to inform you that PC World finally came through, my M200 has been replaced with a Fujitsu Siemens T4210, needless to say I am extremely happy - thank you PC World, it's been a struggle but you delivered in the end!

Toshiba M200 / PC World... ...A result could be on the horizon...

2006-09-11T07:09:00.000-07:00

Just a quick update on the PC World saga, after 9 weeks their customer service team have agreed to replace my laptop- fantastic news! I won't celebrate until the goods are actually received but as it stands it looks as though customer service may have prevailed, what a great win/ win result!

Toshiba M200/ PC World - the saga continues...

2006-08-31T01:47:00.000-07:00

Incredibly PC World failed to return my Toshiba in proper working order, it was in fact returned with screws hanging out of the back of it, threaded into the casing, unbelievable! I returned the machine to one of there stores and am still being refused a replacement, even though I haven't had my laptop for nearly 8 weeks, incredible that they consider this good service.

The PC World instore/ online brand doesn't hold up at all, apparently if you buy something online but want help instore you'll be informed: 'that's a different company'. As the laptop was purchased over 14 days ago PC world are suggesting that they should repair it - how ironic.

Not sure what can be learnt from this episode, other than avoid the superstores and give your trade to the reliable smaller businesses.

Flash on the Beach...

2006-08-29T03:15:00.000-07:00

I have just registered for Flash on the Beach, which has a fantastic line-up of speakers and looks like it is shaping up to be a great event.

Toshiba M200 - repair status.

2006-08-29T03:05:00.000-07:00

I should have guessed that my colleagues ad co-tableteers, (Neil, Hugo), would only suffer so much complaining before taking things into their own hands and posting on my behalf, for which I do thank them because I have been far to friendly on this one, both PC World and Toshiba.

I have refrained from writing anything because I have found it difficult to write anything positive about the situation, I do have a few learning points which the ‘pc-buying’ community could learn from so here’s the facts:

Having had the Portégé for a couple of months and fallen for it, our relationship took a turn for the worse on July 3rd when the screen failed. Having taken advantage of a free extended warranty until 2009, (Registered online immediately after purchase), I called Toshiba, unfortunately they informed me that I would have to take this issue to the reseller, PC World.

Having spoken to 4 or 5 different departments within PC World, the laptop was finally collected for repair on July 17th, I was told that it would be returned within 5 working days.

Between July 21 and August 14th I called PC World no less than 9 times enquiring about the repair without one call back. I was told a number of different stories relating to my Portégé, ranging from multiple LCD screens failing to harnesses being required and Toshiba failing to deliver.

Finally on August 17th, I asked PC world how much they would be charging Toshiba, (Under warranty), for the repair, I was told that the bill would far exceed the cost of the laptop – dowahh!

On August 17th, I called Toshiba to let them know this, I also told them that I was an industry professional and it was getting extremely embarrassing, (for me and for them) that I was visiting the tablet team at Microsoft on business and having to explain why I was using a Mac Powerbook.

A helpful and efficient lady at Toshiba, Suzanne, took control of the situation and has been chasing PC World ever since, apparently the laptop will be returned today, before midday. If not I suppose that I will be writing to PC World for a refund, apparently if they take more than 6 weeks on one repair you are entitled to this... …I was told this by an in-store sales representative, I wonder if it will stand up?

OK, so here’s the positive learning points.

1- Don’t be lazy, get registered after purchase and take full advantage of extended warranties.

2- Talk directly to the manufacturer, even if at first they are not keen. I have managed to find a valuable ally in Suzanne, although I had to get past a few ‘gate-keepers’ first.

3- Journal everything, as soon as you find a fault start writing.

Original Signal...

2006-08-29T01:11:00.000-07:00

Another great link from Bob Bassett, Check out Original Signal, which aggregates the top stories from 15 of the most popular Web 2.0 blogs.

Web 2.0 company for sale (on ebay)

2006-08-17T14:10:00.000-07:00

I was sent this link today by Bob Bassett, it looks like the latest 'Web 2.0' trend is to sell your company on ebay: Google, slayer of Web 2.0 start-ups

Blogger widget

2006-08-17T14:00:00.000-07:00

As my tablet PC (Portege M200) has been retained by PC World for over a month whilst they attempt to repair the LCD, long story best left for another day, I have rekindled my relationship with my G4 laptop. Having had the first chance to surf in ages I stumbled across this blogger widget which I am using to write this post: http://www.google.com/macwidgets/index.html

Creating Celebfavorites.com

2006-06-21T02:02:00.000-07:00

This is the second in a series of tutorials revealing the design techniques used on content-rich internet sites. In the first article, 'Dr Neil's new clothes', I included some interactive design basics such as selecting the parameters of projects and the importance of sketching initial ideas. If you have not already read the previous tutorial you may want to do so before you continue.

When we were asked to design an interface for a fun new celebrity-focussed website which embraces the Virtual Earth API and promotes the 'Windows Live' service http:// local.live.com, I was extremely excited. This article explains how we set about the task of designing and developing Celebfavorites.com and deals with the brand-issues involved with this type of project.

A few years ago I read: 'Making the invisible visible' by Hillman Curtis, it is an amazing book. One of the chapters focussed on something that has stuck with me ever since, Hillman mentioned that you should never set out to simply design a page, you should in fact 'make a place'. I always think about this when I begin a project, I enter every development with the intention of creating an expressive experience for the end-user. I want to create an emotional tie that links the website to its audience. The easiest way for me to explain this rule and the most obvious example is the Apple Ipod packaging, clearly when the product designers at Apple thought about how to package the Ipod they did not say: "Hey, lets make a box!"

With this project one of the first steps was to create a unique and memorable name, when I first got involved the project was labelled: 'View From The Top'. Whilst this may have worked as an offline brand we were not convinced that it was a suitable name for the website. For an online brand (or '.com' if you are still comfortable with that 'Web 1.0' term), the name stands alone, so it better be good! Here are five tips to help you choose great names for your projects:

1. The name needs to be available. Use a service like 'whois.net' to check this.

2. It must be a proper name; all of the success stories of web 1.0 had proper names. AOL, Amazon.com, eBay, Priceline.com, Yahoo! have all been proper names rather than common names.

3. Keep it short, in general the shorter the better.

4. Keep it simple. Simple is not the same as short; a simple word uses only a few letters of the alphabet and arranges them in combinations that repeat themselves.

5. The name should be speakable and sticky. When you have to choose between several brand names that seem equally good, the smartest name to pick is usually the one that also has a good nickname. Examples: Chevy not Chevrolet, Coke not Coca Cola, Fed Ex not Federal Express, Mac not Macintosh.

Before we arrived at the name Celebfavorites.com the development team and the client bounced a number of potential ideas around the table. This process can take a few days to resolve itself, it is very difficult to reach a solution any faster. Finding a name is a process that is made even more difficult by the necessary requirement to keep a project like this 'under wraps', the danger being that any security leaks could lead to somebody else registering the name first!

Before we finally settled on the name 'Celebfavorites.com' there were a number of alternatives that didn’t quite make it, to give you a unique insight into the project I have listed them here: Celebspaces.com, Starfavs.com, Celebhood.com, Celebrityspaces.com, Thecelebritymap.com, Starmapped.com, Allstarmap.com, Starfavourites.com

The reasons for not selecting any of the above names vary. Often the '.com' suffix would not be available, and occasionally it was just 'political reasons'. We are all extremely happy with the final result.

Next we began the process of 'branding' Celebfavorites.com, identifying the objectives of the project and ensuring that these goals are reflected in the design. I believe that the secret to uncovering a brand identity is in asking the client excellent questions; here are some of the questions that I posed, (If you click on the screenshot you can see my original Powerpoint presentation which includes and early design 'mockup').

Q. Who is your audience?
A. View from the Top uses 'The Power of Celebrity' to target a broader online audience than has previously accessed the 'Virtual Earth' technology.

Q. Who else is competing in your arena?
A. Celebrity Big Brother, MTV Cribs, Celebrity Maps, Hello Magazine, Heat Magazine

Q. What sets you apart from your competitors?
A. Unique technology, Location orientated, Exclusive celebrity information

Q. What is the objective?
A. Make MSN members aware of the 'Virtual Earth' technology and encourage them to use Windows Live Local.

With the initial artwork for Celebfavorites.com we set-out on a zesty and colorful design-route with the intention of capturing the celebrity vibe, these initial concepts were well received by the client. One of our ambitions for the project was to ensure that women were included in the target audience, we always envisioned Celebfavorites.com as a project that would appeal to both sexes, for this reason we pushed on with a colorful and kitsch look.

Once the client had 'bought-into' the direction of the project, we brainstormed features internally. As a global team this involved lots of Skype calls and OneNote shared sessions. At this stage of the development we needed to decide how far we could push the boundaries, one area of contention was navigation and usability, we loved the concept of an Apple style dock (Fig.4), but knew that this wouldn't sit well with the Microsoft Live brand, so eventually we opted for a 'Start Menu' style navigation which included image rollovers (Fig.3).

One of the unique features that made it into the first version of the site was 'tabbed' dialogue boxes; this was something that was previously unseen on a Virtual Earth mash-up before this project launched. 'Tabbing' is now a feature of the V3 release of Virtual Earth which also includes features such as ‘collections’.

At the next milestone the project had an interesting change of direction; large companies have special departments that act as brand guardians and Microsoft are no exception. The value of the Microsoft brand is estimated to be in the region of US$65,000,000,000, so you can forgive them for being a little protective! To our team this special branding department is affectionately known as the 'Brand Police', they are consulted on all of our projects to ensure that everything adds value to the Microsoft brand and doesn't damage it, everything has to meet with their approval and Celebfavorites.com would need a makeover before it went live.

Some substantial changes that brought the Celebfavorites.com website in-line with the Windows Live branding included neutralising the colours to meet with the Windows Live brand guidelines, removing the graduated banner at the top of the page and also removing the coloured stars from the Celebfavorites.com logo. As the design evolved we had to be especially careful that the functionality remained the same, the development team had already begun assembling the site. Essentially we were 're-skinning' a existing functionality.

Once the branding team were completely satisfied that the new direction was on-brand, we continued to work with the marketing team to collate the celebrity data, this trickled in right up to the live date. The final designs were 'spliced' using Adobe Photoshop and sent to the development team, I have included a zip file (click here), this shows how the web graphics were supplied to the developers. You can find out more information about exporting graphics in my previous article; 'Dr Neil's new clothes'.

An update to the Virtual Earth API was carried out shortly after the Celebfavorites.com site was launched. This meant that immediately we had to execute a tactical update to protect the site against any down-time, below is a screenshot of the holding page that we created to launch visitors into the latest version of Celebfavorites.com.

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

local.live.com - Version 3 released

2006-05-24T01:32:00.000-07:00

Microsoft have just released version 3 of their local.live.com platform.

From the ViaVirtualEarth.com blog:

'This release includes a number of improvements such improved searching, print support, traffic data, and shared collections. The team have also expanded international coverage, including birds eye imagery in the UK and street level mapping for Western Europe, Australia and a few other areas. We will be releasing a number of new articles over the weekend regarding development on the new platform. Luckily, the v3 servers are fully compatible with any v2 mashups you have already developed. Stay tuned!'

Out and about...(1)

2006-05-23T07:25:00.000-07:00

I have been engaged in some interesting conversations lately, I recently had the pleasure to meet Wayne Smith who 'heads-up' the Microsoft Expression Webdesinger product,(Previously known as 'Quartz'). He is clearly passionate about his product and at first glance I can see why, I will be looking in detail at the Community Technology Preview (CTP), available for download (A whole month ahead of schedule?). The free trial will expire in February of 2007.

Earlier this year, Eric Meyer commented about the web design software in his Mixed Impressions post about his experience at MixO6, click here to read more.

Microsoft offers a preview of the software features at Web Designer Product Tours and Demos and more info at the Features link.
Microsoft has also set up a Discussion Forum.

re:merged.com

2006-05-04T05:03:00.000-07:00

I am pleased to announce the soft launch of an exciting new project that I am involved in - 're:merged'.

I have been extremely fortunate and managed to hook-up with some other industry experts, together we are creating a community site enabling designers to showcase their ideas. re:merged is focussed on the new wave of interaction design, commonly described as ‘Web 2.0’. If you want to gatecrash the party and mix it with developers that strive to create amazing content then we sincerely hope that you will jump on-board.

re:merged.com was born on May 1, our mission is to catalyze the fusion of designers and developers, enabling version 2.0 to be everything that version 1.0 dreamt about.

live.com image search

2006-05-04T04:59:00.000-07:00

I've been playing around with the live.com 'beta' image search, I use the google image search untold, so was excited to see a 'webtop' search in action. First impressions - very nice;-)

Simply beautiful...

2006-05-04T04:43:00.000-07:00

...creative programming; is there nothing the poly9 boys can't do on a map? Checkout their ascii maps.

Dr. Neil's new clothes

2006-04-25T13:14:00.000-07:00

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...

2006-04-25T06:48:00.000-07:00

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

2006-04-20T03:21:00.000-07:00

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…

2006-04-11T10:57:00.000-07:00

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

2006-04-11T06:21:00.000-07:00

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

2006-04-10T14:21:00.000-07:00

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

Certificate Artwork

2006-04-10T14:13:00.000-07:00

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?

2006-04-10T03:22:00.000-07:00

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.

2006-04-09T13:15:00.000-07:00

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!

2006-04-05T03:12:00.000-07:00

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

Easy Truetype Font generation for tablet users...

2006-04-01T22:41:00.000-08:00

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.

Visiting Microsoft in Redmond USA / Expression

2006-03-31T22:17:00.001-08:00

I've been visiting Microsoft in the USA this week, amongst other things we've been discussing Web 2.0 technologies, most of which is under NDA but as information is made public I will keep you informed.

Something that Microsoft are currently promoting is their new suite of creative tools: 'Expression', well worth a look, In the next few weeks I'm hooking-up with Wayne Smith, Senior Product Manager for Microsoft responsible for the new Expression Web Designer product, so hopefully I will have some interesting info coming up on that product.

This morning I had a quick play with one of the cool features in Microsoft Expression Graphic Designer, it is called: 'Photo Montage', I took the following photos this morning of my colleague Dr. Neil, and used this automated feature to seemlessly blend the images into a panorama, the process took less than five minutes from start to finish... well worth a look!

Tablet pays off!

2006-03-21T13:25:00.000-08:00

Last week I completed my first piece of commercial work using my new Toshiba Tablet PC, I have been focussing on generating 'Ideas & Concept' work which is the bit that I really enjoy, with a background in illustration it was only a matter of time before I would make the switch to 'Ink' and there is no looking back, I'm really pleased I opted for the Tablet PC over a Wacom.

Now that the client has approved the concepts, I am pleased to include some images. The process I used involved 'Sketching' in Alias Sketchbook Pro (Image on left). Rendering in Macromedia Flash, (I am still a fan of Flash's ultra-simple vector drawing tools), then laying-up the final artwork in Adobe Illustrator CS (Image on right).

The biggest problem I came across was that Flash doesn't cope particularly well when drawing the outlines using the tablet pen - there is quite a lot of lag. If anybody has any ideas on this I'd love to hear about them. Also I am looking for outlets to write articles on these techniques and processes, please drop me an email if you are looking for this type of content for your site/ magazine.

sketchbook pro - backgrounds

2006-03-18T03:53:00.000-08:00

Just found a neat set of backgound templates that Alias provide as a free download to compliment their Sketchbook Pro application (Registration Required).

This download contains a bunch of background templates (tiff format so can use in photoshop too) including storyboards, graphs, timelines, perspective graphs, architect templates and even hangman…

I think any tablet/ wacom users could find this download extremely useful.

Ways to get creative with software development

2006-03-17T04:15:00.000-08:00

Listen to this morning's Podcast with Dr. Neil Roodyn: Click Here

Show notes:

'Ways to get creative with software development'

Fantastic brands have a unique point of view, if you can establish your brand-alignment your product will become a circle that people want to join AND tell others about.

If you make branding a part of your product development you will: Increase the perceived value of your product, make your software easier to learn/use and broaden your market, increasing sales.

3 Goals:

1) Don’t set out to create a software tool – ‘Make a Place’
This creates an emotional tie between your product and your customer, great brands have practised this historically, an obvious example is the Apple iPod experience.

2) Keep usability at the forefront – pay special attention to buttons and navigation, Keep It Simple Stupid. Model techniques that the big software developers have used for navigation, they have invested millions of pounds getting it right. Where possible test your product on non-techies.

3) Stay focussed on your brand alignment and what your product is trying to achieve, take every opportunity to get your message across, this could include the packaging –even if it is a downloadable product it can have packaging – an installer screen for example.

Most importantly stay passionate about your products, all brand leaders have this in common!

Have a fantastic day!

Tricky

Web designers still failing disabled people

2006-03-16T00:17:00.000-08:00

The Disability Rights Commission have today anounced that 80% of websites surveyed failed to uphold basic accessibility requirements, while research carried out by The Society of IT Management last year showed that only one in seven English local authorities met the WAI (Web Accessibility Initiative) conformance level A standard.

It is obviously still easy for designers and comissioners to be seduced by the opportunities that software provides to create visually stunning designs, while forgetting about the audience.

For a full article on this:
The Guardian Newspaper

For advice talk to Jason@Antanova.com who is passionate about this... (His blog)

Sketch Book Pro

2006-03-15T10:49:00.000-08:00

I have been experimenting with the following software: Alias Sketchbook Pro, If you are a creative and using a tablet I SERIOUSLY suggest that you download the demo and have a play: Click here to download demo

As you would expect form Alias it is a truly intuitive piece of software, they have put tonnes of thought into the gui, and it is a joy to use on the tablet PC. Expect more on this topic!

Secrets of Successful Brands (This is a fantastic exercise that I use to help people discover their brand values)

2006-03-15T10:43:00.000-08:00

Successful brands resonate at an emotional level beyond the product we buy and the
service we receive. These brands stand for something that people value. They create
the expectation of a different type of experience. They are recognised as ‘my kind of
company, my kind of people’. Their customers are proud to be associated with the
brand.

We cannot give you all of the answers, but we can give you the questions. If you
invest the time to answer the following questions we believe that you will have the
magical ingredients upon which you can develop a unique, exciting and healthy brand.

1. What capabilities do you have now, what are your core values? (A value is
something that you do, even when it hurts!)

2. It is no longer about positioning; it is about taking a position. What type of
people do you strive to be? What will you be famous for?

3. Today’s customers are more connected, more knowledgeable and
consequently more demanding. An explosion of choice also overwhelms them.
Who is your audience?

4. Who else is competing in your arena?

5. What is your destination? Which existing brands do you aspire to, what is their
brand positioning? (These could be a gadget, a beverage, a clothes label etc.)

6. What communication devices will you use? Recognise your customers for who
they are and see things from their point of view, how do they expect you to
behave?

7. How will you measure the success of your new brand positioning? What will
the Key Performance Indicator’s be?

Truly great brands have a unique point of view, this positioning will set you apart from other companies, it makes your brand a circle that people want to join and tell others about, it sets up a unique service experience.