Online t-shirt design store, enquiry
Customers enquiry:
I want to have a web presence that’s hip and cool and offers something different from the typical t-shirt site. Two sites that have inspired me are:
What follows are detailed descriptions of what I’d like each individual page to achieve. These descriptions accompany and coordinate with the “Page” attachments that I sent you. Although I am pretty resolute in the particular graphical components of the overall site I leave to you the specific details such as the color palette and those components that I have not considered or overlooked entirely.
Page1
- The door in the mock-up is at an angle I would like the door on the homepage to not be at an angle (flat) as if viewed from straight on.
- The door should have a handle and the number 2 on it, but not the knocker and post/mail slot.
- The number 2, the window above the door and the word ENTER below the door should be illuminated outwards as if a white light were shining from within.
- Is it possible to code this page so that season specific graphics could be added around/to the door i.e. holly or Christmas lights at Christmas time, shamrocks for St. Patrick’s Day, pumpkins for Halloween, etc?
Page2.1 & 2.2
- [1] The outline of the DoorNumber2.com component should be illuminated in someway. The DoorNumber2.com component also serves as the HOME button. The All Items Thumbnail View, FAQ, Contact, About Us, Email Updates, News and View Cart component should not be illuminated. These two components make up the “Header” and should be situated at /towards the top of each page.
- [2] The Previously Viewed and Merchandise components should appear as if made of neon lighting and enclosed by a rectangular shaped neon light. The Merchandise component would always be lit and the Previously Viewed component would only light when there was an item(s) in the Quick View (to be explained next) component.
- [3] The Quick View component is the area where t-shirt/garment choices that had been examined in greater detail and possibly customized on Page 3 would be re-located so that the customer could reference them quickly. Those t-shirts/garments that were viewed in detail, but not customized would appear in their default state and those that had been customized would be in their customized state. You will determine the number of columns and rows available for “archiving” before a slider of some kind would appear. This area would be free of graphics until a t-shirt/garment had been examined.
- [4] The Description component is where a caption/quip that explains the t-shirt design in greater detail appears. The caption/quip would only appear when the mouse pointer was on a t-shirt either in the Dry Cleaner Conveyor (to be explained next) component or the Quick View component.
- [5] The Dry Cleaner Conveyor component. This would be modeled after a real life Up and Down dry cleaner conveyor, that being one with a conveyor belt that comes out of an aperture in the ceiling at a 45° angle, levels out to a 0° angle, continues straight until it makes a 180° turn, continues straight until ramping up to the original 45° angle and going back up through the ceiling aperture. If the top of a browser is north and the bottom south then the orientation of the straight/level portion of the conveyor belt at 0° would be east and west. The user would then only see the logo/slogan of the t-shirt that was about to go around the 180° bend. In so doing, if a t-shirt had a logo/slogan on the back, the user would see said logo/slogan after it had gone around the 180° bend and was heading away from the user.
- [6] The Dry Cleaner Conveyor Advance/Reverse component. This component has an up and down button each representing either advancing the t-shirt selection forward or reversing the t-shirt selection backwards and a stop button. Both arrow buttons would be illuminated at all times, but the stop button would not. If the mouse pointer was position directly over the up or down button quickly that button would depress part way (middle position) and then release to the top start position and the selection would advance or reverse one position. If the mouse pointer remained over the up or down button, that button would depress fully with a CLICK sound. At this point the conveyor would advance or reverse continuously. The middle stop button would then flash on and off until it was depressed. When the stop button was depressed the up or down arrow would return to the top position, as would the stop button (as if it were spring loaded).
- [7] The Gender/Age/Maturity Level Selection component. The circular buttons of this component would appear as if chromed and slightly raised/rounded. When depressed they would recess similar to metal elevator/lift control buttons, first at the bottom position then returning to the top position. The icons would be black and represent adult male (mature content), youth male (kid safe), adult female (mature content), youth female (kid safe), geek content and political content and would be ordered the same in descending order. When a button was depressed the corollary t-shirt selection would be displayed on the Dry Cleaner Conveyor component. This component would be on the right hand side of every page except AlternatePage2.1 & 2.2.
AlternatePage2.1 & 2.2 (All Items Thumbnail View)
- [1] See Page2.1 & 2.2.
- [2] The Thumbnail Description component is where a caption/quip that explains the t-shirt/garment design in greater detail appears. The caption/quip would only appear when the mouse pointer was on a t-shirt/garment. Unlike the Description component which remains in one static area, the Thumbnail Description component would line up/be centered between the two t-shirts/garments, one of which was being scrutinized/chosen/viewed. Therefore the user could scroll down the page and the Thumbnail Description component would orient itself with the position scrolled to.
- [3] The Thumbnail Gender/Age/Maturity Level component. The circular buttons of this component would appear as if chromed and slightly raised/rounded. They could not be depressed. The icons would be black and represent adult male (mature content), youth male (kid safe), adult female (mature content), youth female (kid safe), geek content and political content and would be ordered the same in descending order. All the garments related to that specific button/icon would be displayed in rows of two. This component/its constituent parts would be in the middle of the page.
Page3
- [1] See Page2.1 & 2.2.
- [2] See [7] Page2.1 &2.2.
- [3] Real World Picture component. This component would consist of three or four pictures of individuals wearing the particular t-shirt/garment selected from the Dry Cleaner Conveyor component or Thumbnail Gender/Age/Maturity Level component. The pictures would cycle every interval i.e. every 5, 6, 7, etc, seconds.
- [4] The Customized Quick View component is the area where t-shirts/garments that had been viewed in detail or customized would situate so that the customer could reference them quickly. Those t-shirts/garments that were viewed in detail, but not customized would appear in their default state and those that had been customized would be in their customized state. Whatever appears here will be duplicated on the Page2.1 & 2.2 Quick View component. You will determine the number of columns and rows available for “archiving” before a slider of some kind would appear. This area would be free of graphics until a t-shirt/garment had been examined.
- [5] The Detailed View component. This is where a large example of the logo/slogan, front and back could be viewed. This is also where a user could customize the look of the t-shirt/garment. They could pick the style, color and size and an example would be displayed.
- [6] Customization component. This is where a user would choose the style, color and size of the garment they were interested in. The size choice would be locked until the style and color were chosen and the color choice would be locked until the style was chosen.
- [7] The LED Indicator Light component. For this component the green LED above the style option would blink on and off until a choice had been made, at which point it would stay lit. The green LED above the color option, which had been off, would then begin blinking on and off until a choice had been made, at which point it would stay lit. The green LED above the size option, which had been off, would then begin blinking on and off until a choice had been made, at which point it would stay lit.
- [8] The Shopping Bag component would appear the moment that the three lights of the LED Indicator Light component were all on. The bag would remain lit and the arrow would blink on and off until a different garment selection were made.
The pages for the FAQ, Contact, About Us, Email Updates, News and View Cart I leave to your discretion. Use tshirthell.com and bustedtees.com as a starting point. In coding this project please keep in mind that if you are not able to maintain this site going forward, that I will need to contract someone else to do so and such maintenance will require that that person understand what you did and why. Use of templates (?) and stubs (?) where possible would be appreciated.