cookandkaye

scientific and technical website design projects news

Articles on Website logos and icons

A Boy Was Born – a celebration of the work of Benjamin Britten

TUOS Concerts icon - a singing note

Our work involved upgrading a set of templates developed a few years ago in Joomla 1.6, and changing the slideshow on the home page from being Flash driven to a Javascript feature that is compatible with most modern mobile browsers.

Our client added new banners and content, along with a number of Spotify links so visitors can listen in to snippets of Britten’s work as teasers for the series of concerts to be held in Sheffield in 2013.

Above right: Icon design for the new site – a ‘singing note’ in Sheffield blue on a white ground.

Portable GIS icon design

Design options for the new Portable GIS logo

Rugged and extremely portable – how do you represent the world on a USB stick? The option finally chosen was based on that top left, and is used as an icon in the loader and system tray.

More about Portable GIS (download your free copy!):

Portable GIS v3 The Geographical Information System on a USB stick

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

SMARTdiving

SMARTdiving icon

The SMARTdiving website is live – after some months of hiding it away behind a ‘register interest’ form, all of the paperwork has been done, and funds have been secured to start the first stage of their project: A feasibility study into sinking a decommissioned Royal Navy Frigate in the Sound of Mull. This is a really exciting project, partially because it raises a lot of issues, which I hope are covered pretty well on the project website.

The site itself is a variation on the current WordPress standard template – ‘twentyeleven’, which features a lot of really nice tricks straight out of the box. It was chosen to allow the client to use all of the features of WordPress to take on board comments and post progress reports. This will be an important part of the project as keeping divers and the local community informed and on side is vital to the project’s success.

Above right: We designed the icon (shown above right) and the banner for SMARTdiving site.

One of the interesting challenges has been to keep the twentyeleven flexible templates working through the design changes. The new templates are all HTML5, and make use of this to offer offer is mobile support, so the site automatically ‘appifies’ to display on iPods, Androids and RIM machines (other devices are available – the system relies on the device screen width, rather than being specific to any operating system). Being an old hand it is easy to forget and insert template images with fixed widths (previously best practice), w/o catching them in percentages in the stylesheet, that will allow them to shrink in proportion to the rest of the site when it is displayed on a small screen…

Anyway, the hope and expectation is that the new artificial reef will contribute an interesting and exciting new site for divers, and so bring additional employment to this part of the West Coast of Scotland. Having previously studied some of the existing sites in the Sound, I am particularly interested in how the site will be colonised, and how this process influences the deterioration of the structure – there should be a good hundred years of study and interest in this project!

All the best to Annabel and the rest of the SMARTdiving team!

If you have an opinion about artificial reefs in general, would like more information about this project, would like to offer support or have concerns about the program, you can register these online at:

SMARTdiving.co.uk – a new artificial reef for the West Coast of Scotland

bbCareers

bb careers logo

bbCareers is a new business that aims to help people facing an uncertain career future. The new company offers 1:1 tailored support to help clients re-evaluate their life prospects, and get to grips with the nitty-gritty required to ensure they get the job and life prospects that we all want!

bbcareers banner

The project was built in WordPress, and employed the latest features available in the 3.1 templates. Many of the client’s own photographs are used in the site banners, and these can be switched or added to by the client. This allows the website to match the range of images shown on the client’s business cards (printed by Moo). The graphic bb logo (also developed by us) is superimposed on the main banner graphic, so the client does not need to worry about adding this to a new banner before it is uploaded.

There is a clear need for this type of careers help in these uncertain times, and we wish Bridget and bbCareers every successin the future!

bbCareers – careers advice for grown ups

Targeted drugs – released!

Still from targeted drug release feature, with apoptin icon inset. We’ve just released the new Nanofolio feature on protein transduction (we spoke about some of the design issues in our last post). We developed four interactive Flash items for this feature. Two look at processes in the cell, and two follow development of the smart polymer agent that gets the protein based drug into the cell.
The interactive components of the Nanofolio features are highlighted by being inset in the screen – we are taking our audience behind the web page to view what is going on, at a microscopic, nanoscopic or molecular scale. In this instance we chose to go behind the web page through a view reminiscent of that through an optical microscope. This puts the action clearly in context.
To get the feel of an optical microscope we used some low contrast sketches of a cell and its internal structures, and overlaid these with a granular texture, created using Flash’s background tiling capabilities, to keep the file size small.
We retained the optical microscope view for following the activity of smart polymers, watching them change configuration with changing pH (clearly this is a conceit, but in context it is an effective means of visually indicating a degree of magnification). The chemical structure of the polymer, however, was a simple map, with appropriate portions lighting up when the visitor’s mouse tracks over them, along with the portion of the chemical name related to those portions.
There is a reduced scale image of the ‘cell under the microscope’ above right, along with the icon we developed for apoptin – the smart drug that is delivered by the smart polymer system.

Targeted drug release on the Nanofolio website

Animated icon evaluation

Web icons (‘favicons’) offer a simple graphical reminder for bookmarks, and have become very popular since they were introduced with IE 5. Most recently FireFox has introduced support for animated icons in .gif and .png formats. Currently these are only visible to people running FireFox, so we’ve taken a poke under the bonnet to check code that promises to offer a static icon as an alternative for visitors who don’t use this browser.

Our full review is available through the link below:

Testing animated favicons

What is in a favicon?

A favicon is a small graphic that appears by your web page address in a visitor’s browser, or in their bookmarks list, and helps to identify your site. As such it is a very important piece of web real estate, and contributes strongly to your online brand image. Being only 16 by 16 pixels in size, however, there is quite an art to getting a meaningful design into a ‘favicon’.

For most of us, one favicon is enough, and we would not want to re-brand this part of our identity any more often than we have to, as this may confuse visitors! For a complex brand like Google’s, however, changing the favicon has been a common event over the last eighteen months, culminating in the latest, a stained glass ‘g’. Where will Google go from here – does the new icon more accurately reflect their core brand? Or is the Google ‘spirit of innovation’ simply incompatible with a fixed brand image?

The image (above right) shows a 16 by 16 icon expaned 10 fold. The original icon held the word ‘icon’, and now appears in the dot of the ‘i’!

For more on the Google favicon, and an opportunity to have a go at designing your own favicon, see the BBC Magazine article linked below:

BBC: What’s with Google’s new mini icon?

Previous post on favicon design

Bookmark icons

Some site icons designed by CookandKaye

Returning visitors are important to most websites, so helping them find the bookmark they make to your site is only sensible. After all, your competitors only gets a look-in when they re-do the search! The bookmark icon is an important visual cue for links in the bookmark folder. Bookmark icons are always simple by necessity, as the artwork is constrained to a 16 by 16 pixel square. We will normally create a bookmark icon for a website as part of the development process, where possible this is based on the site logo (whether or not we have developed that component), but occasionally we need to take a tangential approach to design to get something that is memorable, related to the site, and possible to render at the required resolution! A few examples of our work are shown above.

OMEC

The OMEC logo in green and gold, in the form of a printed circuit. The logo for OMEC (the Organic Materials in Electronics Consortium) reflects the role of the consortium, which is to develop organic, carbon based alternatives to metal and silicon circuitry used currently in the electronics industry. It is in the form of a printed circuit board, which is duplicated symmetrically above and below the acronym.

The acronym ‘OMEC’ has an antique meso-american sound – similar to ‘Aztec’ and ‘Toltec’ – and we have played to this in the design and font choice (Miandra). The printed circuit boards bear some resemblance to the feathered crowns that used to be worn by the rulers of these countries!

The OMEC logo was created in March 2006