Z Parts Home PageClassified AdsPhoto AdsSpecial Z Parts ListsParts Interchange Manuals / FicheZP Tech Tips and InformationZ Car Photo GalleryLocation Map and Address

ZCSP Interface Design

Interface template design 1b2x

Evolution and problems of design to January 31, 2005

Evolution

See Previous Interface example for comparison

  1. Line art outline graphic of each model type (S30, S30 2+2, S130, etc.)
  2. Year and model title of car shown in photo
  3. Displayed Car's History or owner's notes
  4. Drop down chart of Nissan color codes with color chips and links to photos of cars painted in stock colors.
  5. Return to ZCSP Project Index
  6. Key model group factory Specifications table
  7. Magazine Performance Test data for year & model displayed

Problems with interface template [Sample images 1 | 2 | 3 ]

Below are two transparent background GIF saves of a PSD layered file created in Photoshop. The black inner and outer borders were embossed before being saved as transparent GIFs. Center framed area was designed to be transparent with intent to slice graphic into parts that would reassemble as an html table based image with the framed area ending up as a blank table cell into which a car photograph could be dropped into which would have it's own html cell padding and image border added for finally graphic framing effect. See earlier example at

First graphic shows result of transparancy created, with anti-aliaising turned off, that left an area near embossed line (probably appears as white border edging in your browser) that will not allow web page background to show through. Also, drop shadow below color chart icon overlaps into area meant to be sliced to create empty table cell.


 

Interface Graphic Example One


Interface Graphic Example Two


Pop Up  2 colum table Text layer OEM Paint Color Swatch Chart Return to Z Car Specifications & Performance Display Index Pop Up Table Layer with Specs Pop Up table layer with Magazine Test Results Year & Model Label Car Model Series Outline Graphic