|About us||RCL 20||Projects||Colour Selector||Library|
We worked with Jones Design Associates to design and build a small web site for the photographer, Scott Morrison. The purpose of a site was to generate interest in his work by people are sent a mailer, seen an ad or who have heard about him through word of mouth.
We started the project by reviewing other photographers' web sites; we wanted to see how photos could be navigated and what steps photographers took to protect copyright.
The site was to contain photos grouped by theme. We suggested the addition of an information pages and that thumbnails link to pages with the photo in a large size.
Each section of the site was icon- and colour-coded. Every page included Scott's phone number and navigations links to the home page, the three photo theme pages and the information page. These links were implemented in a combination of a graphical button (to convey the section icon and colour) and an HTML text link.
The section colour was applied to the button, page tile, text label (unlinked) and telephone graphic. The section icon was applied to the section button and a section graphic.
The combination of graphic with an HTML text link has several advantages:
We asked the designer to make two version of the buttons, showing "clickable" and "unclickable" and made the decision that button labels would be implemented as separate HTML text links rather than be part of the button graphic.
When we constructed the web site, we used formatting of bold and section colour to denote the level of a page in the web site:
Separate HTML text links have several advantages:
To present the photos at their best whilst not making them easy to copy, we decided to split each photo into four pieces.
Photos could still be copied by making screenshots; slicing the images made it cumbersome to save images from the page. It also thwarts robots which take copies of web site graphics and search engines which provide an image search facility.
Photo pages showed photos with a drop shadow - these weren't part of the photo graphics but were separate 16-colour graphics that were appropriately stretched and placed alongside the bottom and right edges of photos.
The advantage of this implementation is that the drop-shadow graphics could be cached and the photo compression level could be lower.
File size targets were set for thumbnails (5K) and larger photos (50K).
The design called for a cropped circle in the top-left corner of the page. Although Scott wanted pages to work with minimum vertical scrolling, we created tileable page tile images so that circles would appear complete at large screen resolutions.
The manual also documented the file-naming convention used for web pages and graphics. We've used similar filenaming conventions for many years with web sites, for instance using a prefix b- for buttons and h- for headings in combination of a section name (or 4-letter id).
The advantages of a naming scheme include being able to locate specific images quickly and to be able to reference groups of files by their name parts.
The web site was to be hosted by Scott's ISP and maintained by someone else so we prepared a maintenance manual and style guide.
The maintenance manual explained how pages were constructed and highlighted mark-up conventions; the style guide gave details of the section colours and how they were used. Step-by step instructions were given how to update or add new photos to the site.
After the site was made public, we spent a day registering it with the main search engines, sending a summary report to Scott. Scott commented that the quality of the large photos on his site were better than the ones he had at a well-known stock photography web site.
Copyright © Limitless Innovations 2018