scientific and technical website design projects news

Articles on art and photography

SPINNER logo design

Part of our remit for designing the Spine repair training website (SPINNER) was to develop a new logo and icon for them. Their initial ideas had focussed on a web spinner in medical greens – which was quite attractive, and reflected the name of the programme, but not its role…

We therefore looked at introducing a more’spinal’ quality to the logo design: Our initial design sheet investigated using ‘s’ shaped spine as the initial ‘S’ in spinner, printing the spinner name with each letter on a separate vertebra, and placing the initial ‘S’ on a single vertebra.

Through discussion with the client, and many itterations, we came to the final design, in which the spine is used as the body of the ‘i’, with the dot at the head.

The final SPINNER logo
Above: the final version of the SPINNER logo.

The logo was built as a vector format (SVG) image, and is used on all pages of the site. The logo is also used in the site icon, and the apple-touch-icon. The best format for the latter is a subject of some debate amongst web professionals (see Apple touch icon: The Good, the Bad and the Ugly from Favicon’s blog), we create a 120x120px square icon as a standard for our website clients.

The vector format allows us to scale the image without distortion, permitting us to easily create versions for high resolution print work.

Icon design for Lochaline Dive Centre

Dive icon designs

Above – three from a set of twenty icons indicating types of dive site for Lochaline Dive Centre. The image shows the initial sketches, used to check concept art with the client, and the final icon. The final icons reflect the site colour scheme, and the the wreck dive icon is based closely upon the Dive Centre logo to reinforce brand image.

New dive site pages being prepared to extend the current single page description of sites in the Sound of Mull (linked below) – which will become the diving home page with map and links to all sites. The plan is that visitors will be able to click icons to visit all sites of that type, simplifying the job of planning a sequence of dives.

The client will be able to select the appropriate icons from the WordPress control panel, and add a map position for the dive site, making it very easy to add and update sites.

Diving the Sound of Mull / Lochaline Dive Centre

Art attack – a tsunami in Morecambe Bay

A tsunami in Morecambe Bay...

Recently we set up Twitter and Facebook accounts for the local Marine Conservation Society (Lancashire MCS), and as part of this process we wanted some graphics for page backgrounds. My immediate design idea was to create line art of rolling waves that would tile seamlessly across the page. The best line art waves that I am familiar with come from Japanese art – so a little web hunt was in order to get some background, and see how the masters had tackled the subject.

The image that I dimly remembered was by Hokusai, from a print called the ‘Great Wave off Kanagawa’ (see Hokusai’s Wikipedia entry for more background, and a reproduction of the original print). This is really quite a masterful depiction of a breaking wave, and just a little research will show that it has been reproduced and changed countless times by different people.

As the first stage of creating the tiling background I worked very closely with the original in Flash, my preferred vector art package, to create the image shown above. The form of the wave has been retained, with simplification of the foam, which I feel is only partially successful. The main changes are to the sky – using diagonal hatching to suggest rain. I also removed the reference to mount Fuji, and while a view of the Lake District hills might have been nice, it would have been an interesting tiling problem!

During the development, however, we switched direction with the art-work, and went for a simple underwater photograph – so the line-art became redundant. As the image is rather nice, however, I worked up the concept as the simple circular icon shown (click for larger version).

If you are interested the social network pages are:

Flash in the pan?

Flash is probably the most maligned bit of software on the web, most recently being excluded from Apple’s mobile platforms (iPod/iPhone and iPad), as a security risk (though as it also competes directly with ‘apps’, Apple gains a commercial advantage in banning it from the platform). As it is no-longer able to reach all browsers, we have been forced to review our own association with Flash, an association that goes back to version 3 in 1999…

First, it is important to understand why we got involved with developing Flash applications in the first place. Back in ’99 it was just becoming popular to have a phone modem: Capable of transfer rates of up to 56kB/s, these devices restricted the desirable size of a web page to a total of 20kB – and that included your images! If you could get under this magic number you could more-or-less guarantee that your visitor would get the home page of your site within a second of making the request. This placed a premium on tiny, grainy graphics with the life compressed out of them.

Anything that allowed you to fill the screen with colour and movement was simply a killer app., and that killer app. was Macromedia’s Flash. Working in a vector graphic format to keep the download file size small, simple tweening algorithms allowed you to move graphics about within the Flash player window, and respond to mouse commands. As a quick comparison, a recent site banner we’ve designed has a total file size of 4.57kB in Flash, compared to 24.9kB as a compressed bitmap graphic. We can beat the 1999 total web-page download size rule with ease! In addition to a fast download, however, Flash offered the opportunity to stream your download – this means that you could put something simple up quickly, and download bigger files in the background – and so the loading screen was born…

From 1999 to the present Flash has been a stable platform for images, animation and interactives – very much more so than the HTML standard (or lack of it) offered by different browser incarnations! This is important as the development of interactive media is undoubtedly one of the most expensive parts of your website, as long as a browser offered Flash we could get content out to it and expect it to behave in a reproducible manner. It is only with ‘Web 2’ that Javascript has offered the same level of dependability and some of the interactive capability. Prior to 2006, adding any significant amount of Javascript to a website to allow core functionality simply increased the cost of developing it, as it had to be tested in every browser that your visitor might use. Commonly Javascript development multiplied the cost of a ‘simple’ site by a factor of 2 or 3; Flash was cheap by comparison!

As a killer app. Flash is used everywhere on the web, and familiarity has bred contempt: Far from being a sign of something exciting to come, the loading screen is the kiss of death for many websites whose designers have not realised that the rotating whirly wotsit and the message ‘please wait…’ is not what most visitors want to see! Plus the banner (and skyscraper and pop-up) advertisement. They pay for the content you are looking at, but you don’t want to see them, we browse with NoScript turned on to stop these things downloading stuff we don’t want onto our computer.

But has Flash evolved over this time? – Is it still just a way of making clean graphics with tiny download sizes? Behind the scenes Flash has evolved, slowly. Its scripting engine has undergone three significant overhauls, each of which has imposed significant learning barriers to existing developers. At the end of this process, however, it does not have anything better than the most primitive 3D support. It has lost its capability as a document reader (FlashPaper). Due to its long term stability as a platform, solid set of video compression codecs and progressive download capability, however, it has taken centre stage as the app of choice for launching video.

How much of a future does Flash have as a web platform? HTML5 offers many of the abilities that were Flash’s killer apps: Vector graphics and progressive video download, at the moment these are supplementary to the Flash object, but are likely to compete more aggressively as HTML5 becomes an accepted standard (it is worth noting that there is no HTML5 standard yet, though there is agreement on what a lot of this standard should look like when it is completed!).

A lot will depend on Adobe’s commitment to keeping Flash going. Here the commercial analysis is pretty straight-forward: The Flash player that works in people’s browsers is paid for by Flash developers buying the application that creates Flash content, so if developers start looking at alternatives in significant numbers, then the writing is on the wall… Is Adobe doing enough to keep us on side, is Flash still the killer app?

There is some good news: A recent hook-up between Google and Adobe carried out very extensive security tests on Flash as it is deployed in the field. This has resulted in some important security updates for Flash Player over the last week or two (so if you get the notice to upgrade your version of Flash player – do so!). Will this be as secure as the HTML5 enabled browser? – A visible commitment to testing for vulnerabilities is a good sign for the moment, but might the Flash development application make a move to authoring HTML5 directly? – That would be a very interesting development, and one that looks to be under consideration, judging by Adobe’s Wallaby and Google’s Swiffy projects…

3D molecular structures in Flash

A number of years ago we created a simple website for the Polymers and Biomaterials Chemistry Laboratories research group, and as part of this we used Flash to show a chain of atoms that could be viewed from a restricted range of angles using our ‘pop-up’ 3D effect – much like the bathymetry of the Stirling Castle. As part of our recent update of this site we thought we’d go one better, and create a full 3D molecule of a real polymer chain…

3D molecule staticAbove, a still taken from the 3D interactive. Sorry, you really do need Flash to get much out of this!

Above: ‘Frogspawn’ or electron cloud molecular model, an early version of the 3D molecule we built for PBCL. Elements are not distinguished in this model (C, N and O are all represented by the same grey blob), and hydrogens have not been included, making the model rather smaller and easier to manipulate (see link at the foot of this story for the final version).

The modelling is done entirely in Flash, so unlike the existing Java-based molecular viewers such as Jmol and RasMol, there is no need to download an application before the molecule appears! For the site we used a molecule consisting of over 300 atoms, which seems to be a sensible upper limit, as older machines are beginning to gasp a bit at rotating the thing in real time! Clearly in creating this we’re using smoke-and-mirrors to keep the project manageable within the confines of the Flash environment. So, while the positions of the atoms are mapped in 3D, they are represented by 2D graphics. This results in a small amount of flicker as the molecule rotates, and atoms jump in front of each other along the z (out of plane) axis (the frogspawn model above was an early attempt we made to escape this effect, unfortunately plotting semi-transparent atoms takes more processing power, so we hit the molecular size limit sooner with this approach). In creating this molecular viewer as a one-off, we have unashamedly used artistic license to foreshorten the image to give it a more dramatic depth of field.

In the final version the XYZ information for the molecule is imported into Flash in a simple XML file, so whist the process is still restricted to molecules of small to medium size, we look forward to taking it further and seeing how well it can model a wider range of structures…

The final 3D structure can be found on the home page of the Polymer and Biomaterials Chemistry Laboratories website:

Polymer and Biomaterials Chemistry Laboratories

Is it a world first? – No, unfortunately not, see 3D crystal viewer !

Switchable adhesion

Polyelectrolyte chains for smart adhesion.

This research feature had rather a troubled gestation period. We started by preparing 3D models of the polyelectrolyte chains – shown right. These were animated to bring them together so that we could show salt formation between the poly(amine) and the poly(acid) at the interface. Unfortunately it was not at all clear what was going on, so we went back to the drawing board…

The final feature uses a single still graphic to show how the different polymers can attract each other at neutral pH, whilst having no affinity in either acid or base. We then illustrated this by re-producing one of the experiments described in the paper – which results in the two surfaces popping apart when they are immersed in acid.

Switchable adhesion is potentially very useful. Most things are made out of more than one material, and this makes recycling very difficult. Traditional glues are OK, but they usually require heat or organic solvents to break them up. This simple demonstration of a glue that stops being sticky in acidified water shows that this can be done easily, and in an environmentally friendly manner.

For the complete story see: Nanofolio research – switchable adhesion.

Targeted drug release feature

Sketch design for final stage of drug release feature. From our post on ‘Monopoles in magnetic ice‘ you might have worked out that we are currently developing research features for Nanofolio. The current project is targeted drug release, a technique which uses a smart polymer to unlock the cell’s endosomes, releasing a drug into the cytoplasm which would otherwise be destroyed by the cell’s defense mechanisms.

This is a development sketch from the last animation in the feature – it is the first design to be finalised, however, as we will need to re-use graphics from this animation earlier in the feature (which will probably have 3 animations in total, the others detailing how the endosome and the smart polymer work).

At the top we have a motif for the polymer – drug complex, this has to be recognisable at small scale, and we’re looking at a simple ‘dragon and ball’ sketch for this purpose. The ball in this is the drug – in this case Apoptin, and at large scale we need to make it clear that it is a functional moiety. We’ll do this with a manga-esque decal. We looked at two options – a skull and a daemon head. The skull is kind of appropriate, as Apoptin is a cell killer; but it is quite specific to tumour cells, so we though the simple death’s head didn’t really get over the fact that the drug itself is quite smart! So, we’re looking at a daemon’s head for the final production – this is a Classical Greek helmet affair – and we’ll probably go with electric blue clouration, to emphasise that it is (potentially) ‘one of the good guys’.

The drug-polymer complex is taken into the cell in an endosome, and it is pH changes in this that trigger the smart polymer to shatter the endosome membrane. As pH is not visible, we need to represent this easily to visitors. One option is ‘Universal Indicator Paper’ style colour change, but this might not mean much to a lot of people, as well as being rather too crude – the smart polymer switches on at only just below serum pH levels. To get round this we’re going to display the pH on a little meter attached to the endosome. The meter is likely to get in the way of the apoptin release when that occurs, so we’ve also got a little transition, switching sides for the meter if necessary, so the action is clear…

Now all we have to do is make it all work!

You can see other (completed) research features in nanotechnology on the Nanofolio website:

Nanotechnology research features on Nanofolio

ShrinkPic – help for CMS

Cassie in the snow - original 3.6MB

A single image from a modern camera (5+ mega-pixels) has a file-size equivalent to 50-100 text pages. Not unsurprisingly, therefore, the use of large images can slow your web-pages down to a crawl. Thankfully you don’t need large images to decorate a web page, your photos will be so much larger even than the largest modern displays, that putting them up full-size will normally just be a waste of time…

Right: ShrinkPic automatically reduces image sizes – the default setting has reduced the 3.6MB original to 85kB, which is easily handled by WordPress, where I’ve processed to a 150px square thumbnail. Click image for 800×600 full uploaded file-size.

The problem is then, how do you get the file size down? For a long time we have recommended IrfanView as a free (PC based) image processor, for cropping and re-sizing images for use online. While pretty straightforward, this package does need a little practice to use it effectively, so is not ideal for many people managing CMS systems, for whom the occasional image can be a bit of a nightmare…

Shrink Pic is ideal for anyone who finds image management on the web a nightmare!

Over Christmas we became aware of Shrink Pic, a new system that shrinks photos automatically when you upload them (via LifeHacker). So, is this solution going to work for you?

  • First up, the software only runs on PC’s. We are not aware at present of an equivalent program for Macs or Linux.
  • The basic premise of the software is that it runs in the background, and automatically re-sizes and compresses any image you want to upload to a website (Flickr, your blog, CMS etc.) – or email – before it is sent.
  • You can set your default image sizes or set the amount of compression to fit a file size range (as I did here).
  • Your original image is not changed.

What the software does not do is edit your images. The most recent versions of WordPress will allow you to do a bit more fine tuning after the upload – cropping and creating thumbnails. If you need to process your pictures, then you should look at doing this BEFORE uploading, in which case you might as well resize ready for upload, so you may not need Shrink Pic.

If you are want large images on your website (larger than 1000px in any dimension), then you should look at more advanced processing packages to optimise them.

Conclusion: this software is really easy to use, and I was pleasantly surprised at how well it works with WordPress here!

Resource links:

OnTheGoSoft’s Shrink Pic

For free hands-on image processing:


Directed diffusion across a surface energy gradient

Latest – image makes cover of Macromolecular Rapid Communications (Sept. 2011)

Directed diffusion across a surface energy gradient.

Above a still from the movie depicting the directed diffusion of polymer molecules across a surface energy gradient

The movie was prepared by CookandKaye website design, working directly from preprints of the authors’ scientific manuscript. The movie was released to coincide with the paper’s publication and extensive publicity by the Unviersity of Sheffield (see for example Step Forward For Nanotechnology: Controlled Movement Of Molecules in Science Daily)

The interactive movie uses a stylised polymer chain to depict the actual movement inferred by the research workers from a wide range of nanoscale analytical techniques. Visitors to the site can click through the stages showing adsorption of hte polymer to a hydrophobic surface, followed by directed diffusion towards the hydrophilic surface, and finally desorption back into aqueous solution. At each stage the polymer experiences a different degree of constraint upon its movement, which was reflected in the motion of the stylised chain in the movie. To investigate the final movie, please visit the link below to Dr Mark Geoghegan’s website:

Directed diffusion across a surface energy gradient

Reference: P. Burgos, Z. Zhang, R. Golestanian, G. J. Leggett, and M. Geoghegan “Directed single molecule diffusion triggered by surface energy gradients” ACS Nano 3 3235-43 (2009).

Polymer Centre research map

The new Polymer Centre research map has been built on an existing staff CMS that stores keywords and a précis of information about staff research interests. To create the map the keywords were first grouped into superordinate terms – for example the keywords ‘Rheology’ and ‘Optical properties’ falls under the generic class of ‘Polymer Analysis’ (or just Analysis).

To make the system as flexible as possible, the link between keywords and superordinate terms is done through a ‘plug board’ programming interface. In this, each keyword is assigned to a number of generic categories through selecting check boxes – easy!

The results are stored in a MySQL database, and this is used to power the research map itself. On first sight the map provides a coarse list of the superordinate terms – polymer analysis, characterisation and so on. On selecting one of these terms the list expands to show the relevant keywords. The keywords can in turn be expanded to display the names of research staff engaged in the work of interest.

The system therefore offers a simple visitor interface that can be quickly and intuitively navigated to find the information of interest. It offers a great advantage over an empty search box on one vital respect – it always offers the visitor a positive result! Not all sites have Google-like resources, and using a controlled language of keywords in this way allows us to guide a visitor to what we have, rather than their getting lots of failed searches.

While the research map offers visitors a neat tool for finding the information they want, it is also an engine to help ensure that search engines can tie our keywords to content on the Polymer Centre website. To do this, the meta content on each of the staff pages contains the same keywords they are associated with in the database.

In addition, however, the meta content of the research map itself is served dynamically. The page title, description and keywords are updated to reflect the level of the map that is being examined. Thus if you have opened a keyword, that keyword and the associated staff appear in the appropriate meta content sections of the research map page. As these sections are important to search engines in ascertaining the important content of a page, this design helps to ensure that the information the Polymer Centre carries about polymer research and near market activity is readily available on the world wide web.