View Full Interactive Version Of This Page : Website critique wanted.

2007-06-11, 12:30pm

Before my hiatus, my website graphics matched the graphic in my signature line - Black, pink and green, lots of gingham, roses, and polka dots.

I can't quite afford to hire a website designer just yet, but I'd like to move to something more simple and sophisticated and WAY less cutesy. The design I came up with is simple and a *little* less cutesy, but still not sophisticated. I'd eventually like to get to more professional black/gray design, but we'll see.

The links don't work yet, but each page will have the same header and left navigation tables, and will have either product or information depending on the page.

I also need to get a new URL for my beads/jewelry, as the "nicholebyers" url is going to be used for a blog relative to my career pursuits. I'm thinking of something simple like "nicholebeads dot com" or "nicholebyersjewelry dot com" but of course I need to check availability.

2007-06-11, 12:45pm
Hi Nicole!

I like the layout and the clear and simple design.

A few things right came to mind though:

1) You designed for a screen 800 pixels wide. At this day and age you are better off designing for 1024 pixels wide (minus browser borders of course).

2) The background is very distracting. It makes things hard to read.


2007-06-11, 1:13pm
Nichole, I like it. I find that the blank space to the left of your name is a bit large, though, and a bit "symmetrical" with your name in size (ie it's about the same size as your name).


2007-06-11, 1:19pm
That blank space, I was thinking about adding a bead photo there. Not sure, though. Would it be best just to have my name and the byline centered? I need to make a few other page layouts, but the problem is I'm not a graphic designer. :???:

2007-06-11, 1:22pm
Could you try stretching your name out maybe? "Floating" string of beads? Something "light"/"airy" visually? Not boxed in...


2007-06-12, 3:53pm
I just switched over to Pappashop and I had a web designer switch over my old website and insert it into pappashops template. She was VERY reasonable. She might be willing to insert your "concept" into a server for you with a few extra graphics. Here is her link

Plus I love her style. :)

2007-06-13, 9:34am
I agree with Jeff about the background. It is too intense, can you tone it down some?
I do like the size of your bead. One of my gripes is when people start with teenie tiny thumbnails and you have to click to see it. I usually move on.
RE: your name, you might try making it bold.

You know that different monitors can dramatically change colors too.


2007-06-13, 10:08am It overwhelms that beautiful bead! Have you played with other shades?

2007-06-13, 10:23am
Isn't that weird? On my other computer, the green was not bright or intense at all, but on this computer it is extremely so :shock:


2007-06-14, 2:16am
When I first looked at your site, I thought, black and grey. Then I noticed you mentioned that in your post. I agree, black and grey would look great. It shouldn't be hard to do either. Something like this on a plain black or dark grey background? This was really easy to make, if you like it I can make you one of the correct size and font. Or tell you how and you can make one yourself. It took about 5 minutes with photoshop.


2007-06-14, 7:17pm
How Teresa? :D


2007-06-15, 1:33am
Hi Janice, ok here is a mini tutorial, this really is easy with photoshop.

First open a new file. The dimensions are usually around 770px by 217px for most website banners, I'm making this one 766px by 213px because I'm going to add a border. Next I add a black border around it of about 4px using the canvas size tool.
Then I use the paint brush tool set at around size 7, and just make squiggly lines and dots in shades of black and grey. So I end up with this.


Then I use a few filters. First I use Gaussian Blur (set at around 4.4) and I get this.


Then I use the brush strokes filter set on crosshatching and I get this.


Then I use the noise filter and add noise which gives me this.


The noise filter has a range of settings as do all of these filters, just play around with them until you get the look you want.

Ok, so now the background is ready, save it and then open a new file approximately 690px by 170px. This will become the inside box on the banner. If you want more of the outside border box to show, then make this inside box even smaller.

Next, use the gradient tool to color this inside box with a gradient from black or dark grey to lite grey. You have to use the color selecting boxes
on the left side tool bar. In the top box select black or near black, then in the bottom box select lite grey. Then when you use the gradient tool you will get a gradient of these two colors, like this. (I also added a black border around this box of about 2px. using the canvas size tool)


Next, save this box, in case you mess something up later, you will have both of these boxes saved as they were before putting them together. Ok with the move tool drag the small box onto the larger box and position it, then flatten it when you have it centered. Save this.


Now you can add text. Select the fond of your choice and write what you want.


And here is another one, these always turn out different, this one is not so heavy on the squiggly lines in the background so it's lighter. And the font is different.


There you have it. You can do this with lots of different color combinations, font styles, or even background images that you then distort with the filters and you get a kick butt banner!

2007-06-22, 7:19am
OMG Teresa...I just saw your post now! Thank you so, so, so much for taking the time and effort to do this!!!! I cannot tell you how much I appreciate it -- I've been trying to figure this out for years (literally :lol: ). I can be such a dummy :roll:

Thank you!!!!!!!!!


2007-06-23, 10:04am
I'm glad you found it, I hoped that someone would get something out of it before it got buried.

2007-07-03, 3:33pm
Great tute!!! Glad I stopped by! The green is pretty shocking/distracting to me too. I don't really like BLACK sites, but I see how grey would really compliment the bead. Just don't make it so that the black is shocking/depressing, etc.