Barcode Hangtag Site Design

[diabolo]

Hey guys! Its me again. This time I've come back with a new design for my employer. He runs a printing business and wants to create a website for production of barcode hangtags (the tags you get with the price and barcode on shirt that you buy). So this is what I have pulled out of my head filled with nothing.

Splash Page [attached] [rev1.png]
`I don't really like how I did the barcode fade at the end. Probably going to take it out and replace it with a faded background tiling in the back.
`Need to fix the leather rope

Home Page [attached] [rev2.png]


(also Im going to be needing to use alot of image maps to create the links for the tags. so if anybody can direct me to a good, easy to understand, and "web 2.0" compliant tutorial, that would be helpful!)

• Recycled Cardboard Texture - http://jacbm.deviantart.com/art/Recycled-Cardboard-Wallpaper-83083567
• Tag Tutorial - http://pshero.com/archives/custom-hang-tag
• Leather Rope - http://jonthander.deviantart.com/art/NC-Adventure-hang-tag-61840190

Unauthorized use or duplication of Template or it's design elements is a violation of applicable law and is subject to prosecution.

 

[zen-r]

Looks pretty good so far, diabolo.

My only thought would be why have you chosen that particular brown patterned colour for the tags? It looks like something rather unpleasant may have been sploshed on them!

 

[Elesarr]

Hey guys! Its me again. This time I've come back with a new design for my employer. He runs a printing business and wants to create a website for production of barcode hangtags (the tags you get with the price and barcode on shirt that you buy). So this is what I have pulled out of my head filled with nothing.

Splash Page [attached] [rev1.png]
`I don't really like how I did the barcode fade at the end. Probably going to take it out and replace it with a faded background tiling in the back.
`Need to fix the leather rope

Home Page [attached] [rev2.png]


(also Im going to be needing to use alot of image maps to create the links for the tags. so if anybody can direct me to a good, easy to understand, and "web 2.0" compliant tutorial, that would be helpful!)

Hey diabolo!

I'm responding to your Web 2.0 inquiry

Web 2.0 is basically making things as simple as possible and ensuring interoperability.

Things like AJAX, CSS, anything that makes the site uncomplicated and end-user friendly, and at the same time giving the end-user a rich experience.
While I did not find a tutorial per se for you, I did find some info that will certainly give you resources and the "concept of" Web 2.0:


Tim O'Reilly: "What is Web 2.0" (while a long read it is extremely informing)

Web 2.0 on Wikipedia

Rich Internet Applications

Web 2.0 and Cloud Computing

Web 2.0 on Wikipedia

(click the image for site)



I hope you find at least some of this useful - Good Luck with your project!


EDIT:

I should have mentioned that you have a good start on your layout - it is very Web 2.0 imho

 

[diabolo]

Looks pretty good so far, diabolo.

My only thought would be why have you chosen that particular brown patterned colour for the tags? It looks like something rather unpleasant may have been sploshed on them!

I guess you can not really see the texture in the brown. It was suppose to be recycled cardboard (http://jacbm.deviantart.com/art/Recycled-Cardboard-Wallpaper-83083567)
and the splats i was trying to get a distressed grunge paint splatter. like the thing was hit with acid and it faded somewhat. I guess I'll have another go at this.
Thank you for your comments! +REP

Hey diabolo!

I'm responding to your Web 2.0 inquiry

Web 2.0 is basically making things as simple as possible and ensuring interoperability.

Things like AJAX, CSS, anything that makes the site uncomplicated and end-user friendly, and at the same time giving the end-user a rich experience.
While I did not find a tutorial per se for you, I did find some info that will certainly give you resources and the "concept of" Web 2.0:


Tim O'Reilly: "What is Web 2.0" (while a long read it is extremely informing)

Web 2.0 on Wikipedia

Rich Internet Applications

Web 2.0 and Cloud Computing

Web 2.0 on Wikipedia

I hope you find at least some of this useful - Good Luck with your project!

Hey, Elesarr.
I wasn't really looking for the definition of web 2.0. I was more looking for a tutorial that was updated and did not use deprecated tags. Because I am not sure if image maps were or were not deprecated.

But thanks for those links. I will have a look into them during the summer. =]

 

[Elesarr]

sorry my bad - multitasking a bit too much on my end :happysad:

Image:

http://en.wikipedia.org/wiki/HTML_element#Images_and_Objects

and the HTML 5 overview (deosn't seem to have added anything new about <img> tag so I think it is still in use:

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

and though it doesn't appear freshly updated a good overview of how images are handled as <objects> here:

http://www.ibm.com/developerworks/library/wa-xhtml/

 

[sourfacedcyclop]

I'm not sure I am a big fan of the template. I don't really know what it is, but it just doesn't look right and looks a little flat.

 

[diabolo]

I'm not sure I am a big fan of the template. I don't really know what it is, but it just doesn't look right and looks a little flat.

Hmm.. I see what you are saying. I actually agree too, it is somewhat plain. I'll see what I can spice it up with. Check back again for a new one, sometime.....

 

[jayuk666]

Nice home-made feel to it! I did something similar in my portfolio!