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!
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!
posted by Tricky at
1:14 PM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home