I built a website for a tattooist friend. He had a professional web-developer as a customer who tried to trade him web-work for a tattoo. My friend deferred and showed him the site I built him.
The guy could not believe it was my first website. It’s not quite my first, I’ve built little one-off pages for in-house use at my jobs, but this is my first true on-the-internet web page.
I built it using a combination of Mozilla’s Composer with a few tweaks done with Frontpage Express. No Dreamweaver or full-fledged Frontpage (they’re damned expensive).
So - what do you think? Anything I could do to improve it?
Content, by the way, was supplied by my Tattooist friend, I fixed the english up and tightened a few things but basically it’s his. I did the logo & graphics & all with GIMP. He took the pictures but I cropped & sized with some shell scripts built around Cygwin tools.
IANAWeb developer, well, not primarily - anyway… To be brutally honest, white text over a patterned dark background image just turns me right off and if I happen to have turned off background images in my browser, the white text is all simply invisible.
The layout and content isn’t bad though - I would imagine that, were I in the market for a tattoo, I would be able to find everything I needed to know without any excessive clicking or frustration. I’m not sure of the section detailing hygiene wouldn’t be better off on an easily-found FAQ page - seems a bit ‘he doth protest too much’ on the front page there, but I could be wrong about that - i don’t know the market.
Need to do something about those jaggies on your logo/banner - remember, the clientelle are, almost by definition, art and design-oriented.
I originally had one little thing to add, but it snowballed. Please don’t take the below to be utter criticism or nitpicking, it’s just what immediately jumped out at me. I’ve been making sites for more than 10 years now, and for a close to first attempt yours is pretty good… my first site resembled Homer Simpson’s animated catastrophe in “The computer wore menace shoes”.
Instead of having the words “Click Image to Return” and putting the link back on the image, why not just have a link that says “Back to Gallery” AND put the link on the image?
It seems odd to have a text direction for finding a link, when the text itself as a link would do the job really well.
Also on the gallery, would it be easy enough for you to put in a “page x of y” on each page. I went up to page 10, and stopped. I don’t know how many there were left, so I might have missed the best ones.
And, finally for the gallery, I promise. The return link on the full sized image does not actually always return you to the thumbnail gallery it started in. For example, in gallery 06, the first row second image is the dude’s shoulders. I clicked on that image, and it viewed it in full. Clicking on the image to return to the gallery returns me to gallery 05. Some were larger jumps (one in gallery 10 took me back to gallery 6).
I agree with Mangetout about the text color, but I think that telling people the safety procedures is a good idea… I’ve known a few people who got infections from a tattoo place, and there’s nothing worse than bad word of mouth in an industry like this that revolves around recommendations of customers.
Honestly? It looks amateurish. However, with that in mind, and it being your first pro site and web design not your primary job, it works well. Everything is in a clear place and nothing is ambiguous.
Ok, I’m not a bona fide web dev (not by far). I’ve had like ten years of experience making webpages, but never anything that looked good or anything that people actually visited… so think of that what you will, heh. Here are some comments, take 'em or leave 'em!
-It’s really cool that you stayed away from the glitzy and flashy stuff. Lots of people go all-out on their first site and throw in every animated GIF they ever saw in the last ten years and then embed two simultaneous background songs and overlay dancing alien Flash strippers everywhere. Ugh. Glad you didn’t.
-You got the basic, important stuff all there. It’s informative without being overly verbose, it’s divided into easy-to-understand sections and the links actually work (except maybe some gallery pages, according to Khadro).
-With that said, I agree with kushiel in that it looks “amateurish”, or rather, like a personal website – like something I would make. Are you an artist? If not, could you work with one? Or if you’d rather do the design yourself, maybe think of some sort of theme to the site, something creative that ties it into his work? Don’t just go with a semi-cookiecutter design style where you choose three colors and two background images and use that everywhere. I guess what I’m saying is… come up with a vision and use that to give the site a distinct “look”.
-Give both Phat Tat and his site a personality. Visitors should experience an immediate “wow!” or “cool!” moment as soon as they open the page, or at least be intrigued/interested by something there. The first few seconds are critical to grabbing their attention, so make them count. Some visitors won’t care about how your page looks if they already know about Phat Tat and just want info, but others who are just browsing around the net will close the site without a second thought if it doesn’t look interesting at first glance.
For a site like this, where art is the main attraction, it may be ok to use a few more strategically-placed images, both for information and as pure decoration.
-You might want to be careful with columned text layouts (like in the “Contact” and “More” sections). Unless the data logically belongs in a tabular/columnized format, such a layout can accidentally make text seem like toolbars or otherwise secondary to the main/center area.
-Divide the gallery into broader sections, like tattoos vs piercings, simple and complex, etc.
-Font – have you experimented with different fonts and sizes to see if any might be a better fit? If possible, specify a few primary choices and then gracefully degrade to more common or general ones. Using CSS, it’s easy to specify {font-family: favorite font #1, fav font 2, helvetica, arial, sans-serif}. People with your first choice will see that font, otherwise their browsers will go to one of the backup choices.
-So, in a sentence: Good job with the site, but see if you can make it look better!
I recently created a website and yours is a hellofalot better than mine was!
I too asked for critique and got some brutally frank, but valid, comments. Luckily, a very kind, talented person took pity and helped me re-do the site - well, to be honest, he totally re-did the site himself from scratch, and now the difference is night and day.
Still, for a first shot, you did a fairly decent job, but I would agree the background is a bit too busy and dark for my tastes, but that is more of a style choice so if it works for you…
And just thinking aloud here, but putting his (home?) address on the site? I think the phone number alone might be better for people to call for an appointment, as I don’t know if I would want four drunk dudes showing up at my door at 3:00 AM wanting to get tats of X-men…
A contact info link is always helpful, but you need to remember that tattoos are a face to face business, and the Web is a worldwide marketing tool. The content on the homepage should contain some information about where this guy is.
I turned off images and reloaded the page and got a broken picture link, a couple of lines, and a sea of whiteness. Some people may still have slow connections, or have images turned off for other reasons.
Speakingof images, I liked the fact that he wanted his picture on the front page. Tattoo shops have a seedy reputation, and he has an honest face. You need to give your image elements “alt” attributes with text describing what should be there in case the image doesn’t load, ESPECIALLY for the link buttons. Those should also have width and height attributes or css styles associated with them.
The patterned background is the real killer here. I’d lose it.
I’d also lose the header that says, “Welcome to Phat Tats and Piercings”. It’s redundant, and has that, “Hi, this is my home page!” vibe.
For a site that showcases someone’s art, you want to go mellow on the site visuals so that the art itself stands out. Look at the web site for The Louvre Museum. It’s clean and understated. So when you see the art, it’s the art that jumps out at you instead of being buried in visual noise.
Also, consider that 90% of your casual surfers will not click through to your gallery. The front page of your web site is therefore your sales pitch. If you don’t grab the reader immediately, he is gone. You need to halt them in their tracks before they click through.
Think about what you’re doing conceptually. Tattooing is a visual art. Yet your home page is all words. Get the art in the reader’s face. It if were me, I’d process some of the images in your gallery so that the art itself is visible, but the skin and shadows and background are not. If you can get it one a white background, so much the better. Then use the actual art to decorate your front page. Even better would be if the artist has a portfolio of art that he’s drawn on paper. Scan it, and use it. You need to impress people with the talent as soon as they hit the site.
I also agree with scotandrsn - if this is a local or regional business, get the address prominently on the front page.
Finally, unless the artist is well known, having a huge picture of him and a bunch of text just isn’t going to sell the product. Move that stuff down to an ‘about the artist’ section with a smaller picture, and use your most valuable real estate to sell the actual product.
I’ll happen to guess the bulk of the people looking for tattoo work with hit 50% of those images. My last tattoo was done by an artist I found on-line. I studied every single picture on their website looking to see if they could do the work I wanted.
Like others have said, I’d loose the background image or mellow it our a great deal with a contrast adjustment.
I have a pet peeve about table borders. If you want to define the table cell I think it looks much nicer to give that cell a background colour and a touch of cell padding/spacing to give a bit of the colour around your object. I just think it looks cleaner.
One way to avoid the problem Khadro pointed out in the image gallery is to not hard code the link back to the gallery. Instead use a -1 history javascript.
I also wouldn’t have them click the image to return. Clicking images is commonly used to pull a larger side of the image.
I would consider adding a basic textual navigation at the bottom of each page tagged with the name of the company, city and state. Something simple like… .
HOME | TATTOO GALLERY | CONTACT | MORE
Phat Tats & Piercings - Arvada, CO
I would make sure to leave it text and write out “tattoo gallery” for search engine reasons. Very little real websites come out of a google search for “Arvada, CO tattoo”. You’d be a shoe-in to capture that one. Take advantage of the < title > tags as well. Each page should have some extra info in the title tag to help searches.
<title>Phat Tats and Piercings, Arvada Colorado - Custom tattoos, piercings, body art.....</title>
Well, you get the idea. Don’t go over the top but don’t be shy either.
I didn’t look at the after guide care docs, but convert them to html. It’s easy and there really isn’t a need to have a doc file to download.
The content is pretty good. I like seeing the image of Adam right on the main page. I also like having aftercare info on the site.
I’ve been to a bunch of tattoo websites and one thing I always wished they had was a walk-through on how the tattoo process works in their shop. This gives the visitor a better idea on what to expect. For those of use who have more than a few tattoos it is old hat. But I think this info would be nice for a tattoo newbie. I think many people expect to always just be able to walk in and get a complex tattoo. The last one I got it took the guy several hours to just trace out the transfer. I went in, got the appointment, left the art, he traced it sometime before my tattoo date, I went in, he shaved the area (I pre-shaved the night before but he gave it a quick swipe for good measure), put the transfer on the area, inspected the placement, and then when everything looked good he spent the next 3 hours putting in ink. That info in a bit more detail might be helpful to some people.
Thinking about it, the “more” section could be a complete tattoo primer complete with the aftercare instructions. I dunno, just a thought.
Outside of those few things, I say it’s a pretty good first wack. It’s simple, basic and very easy to find what you’re after. I think with a few tweaks you can rank it fairly high for local tattoo searches (which is really more important than how the page looks).
I keep thinking this would be a good idea, but I can’t quite decide if it would be corny or not. Certainly if it were me, I’d have designed the graphical elements of the site to look a bit like tattoos; there are plenty of great free fancy fonts out there (including tattoo emblem dingbats and the like) that you could use to render the various buttons etc.