Review The New Template I Made for my site

[Baniboy 3]

Hi guys and gals(not sure if there are any here anymore). So, currently my site looks like this. I've, however, made a new template for my site:

This was designed and coded by me(yes, I've coded it). I used GIMP for the graphics and the almighty Crimson Editor for coding. (+ made it on Linux, so it's all open source if you don't mind my gfx driver being closed source )
I would like to hear your opinions about this template. I'm open to suggestions you may have. Still, be gentle, it took me 4 hours to code this(ZOMG).

I know the breadcrumbs aren't in an exactly perfect alignment with the text, but it looked a bit dull when I had EVERYTHING starting from the left with 20px margins. So I've centered it for now.
BTW, my first design that's automatically compatible with IE without tweaking afterwards

I'm going to change this using your suggestions that I (hopefully) will receive and then convert it to a wordpress theme to be used on my site.

Thanks in advance!

[truefusion 3]

Aside from the navigation alignment, from an eye-appealing perspective, this template doesn't compete with your current. It also seems like you keep falling back on a similar design style as some of your past designs. However, i will say the font you picked for the site's name for this new template is a whole lot better and much more fitting. Your site's icon may need to be changed to reflect the new font. But i'd recommend a few modifications, similar to this (perhaps some bevel):

 

This new template also appears slightly easier to follow, but that can be swayed when the actual content gets set in place. The area where the breadcrumbs are, it seems like a spot more fitting for sub items of the navigation, though you may not have any. By the looks of it, though, i don't think your site requires breadcrumbs at this time. Your navigation isn't multiple levels and all is accessible from every page.

 

While more related to the site as a whole, rather than having a "Home" link, have it so when the user clicks on the site's logo, it takes you home. And if "Home" is a word used by WordPress, change it to your site's name (seems odd seeing "Home > Archive by category 'GIMP'"). "Announcements" aren't tutorials, are they? It should go along with those at the top. Personally, though, i would make the navigation slightly more simpler by creating another root item called "Tutorials" and shoving "GIMP," "HTML & CSS" and "Misc" into it. That way you'd have four root items: Announcements, Freebies, Tutorials and About.

 

it took me 4 hours to code this(ZOMG).

It shouldn't have taken more than 30 minutes (assuming you have intermediate knowledge of HTML and CSS)—sounds like you are giving yourself more work than what is required. Here are a few tips to help you speed up the process:

Unless it is absolutely necessary to have rounded corners visible in all browsers, use the CSS property border-radius instead.

Don't cut out sections that don't need cutting out. Concerning this new design, it requires no more than having four parts cut out: all the gradients (3) and the site's name (1).

Keeping in mind that you'll eventually have to cut your design into pieces, design with making your job easier. (However, this current design satisfies this.)

For areas of one color, let the CSS handle it.

For borders, unless it concerns something complex, let the CSS handle it.

Some browsers support SVG backgrounds. SVG is capable of scalable gradients, and a lot of other things, something that no raster image can ever accomplish. Consider this for the next time you use gradients. (However, i think WordPress has a similar feature—which can be seen on its default template.)

[Baniboy 3]

Aside from the navigation alignment, from an eye-appealing perspective, this template doesn't compete with your current. It also seems like you keep falling back on a similar design style as some of your past designs. However, i will say the font you picked for the site's name for this new template is a whole lot better and much more fitting. Your site's icon may need to be changed to reflect the new font. But i'd recommend a few modifications, similar to this (perhaps some bevel):

Hmm, I agree. I'm just sucking in this atm, everything is slipping out of my hands... The font is tahoma. I'll try to make a logo similar to that in the image you provided, thanks for helping in that.

 

This new template also appears slightly easier to follow, but that can be swayed when the actual content gets set in place. The area where the breadcrumbs are, it seems like a spot more fitting for sub items of the navigation, though you may not have any. By the looks of it, though, i don't think your site requires breadcrumbs at this time. Your navigation isn't multiple levels and all is accessible from every page.

Okay, I'm going to make it multiple levels to fit everything I have into one bar. I made a new design(oh yes...). I have these 2 now, the other one doesn't have all the searchboxes and other "extra" stuff in it yet because I haven't coded it yet:

I forgot to change the font to tahoma in the sidebar in this one before exporting tho.

Now, I removed the breadcrumb trail in the original one:

 

While more related to the site as a whole, rather than having a "Home" link, have it so when the user clicks on the site's logo, it takes you home. And if "Home" is a word used by WordPress, change it to your site's name (seems odd seeing "Home > Archive by category 'GIMP'"). "Announcements" aren't tutorials, are they? It should go along with those at the top. Personally, though, i would make the navigation slightly more simpler by creating another root item called "Tutorials" and shoving "GIMP," "HTML & CSS" and "Misc" into it. That way you'd have four root items: Announcements, Freebies, Tutorials and About.

I was thinking of having both, just because it seems a little more standard to have a logo link and a home link. I've now changed the logo on my site to be a link also. I've shoved them all into a "tutorials" parent in the new design, but if do that that in the blog-like design, I'll only have 2 links in there and it'll look kinda empty(except if I get rid of one of the bars).

I also changed "Home" into "Tutoriary.com".

 

It shouldn't have taken more than 30 minutes (assuming you have intermediate knowledge of HTML and CSS)sounds like you are giving yourself more work than what is required. Here are a few tips to help you speed up the process:

Unless it is absolutely necessary to have rounded corners visible in all browsers, use the CSS property border-radius instead.

Don't cut out sections that don't need cutting out. Concerning this new design, it requires no more than having four parts cut out: all the gradients (3) and the site's name (1).

Keeping in mind that you'll eventually have to cut your design into pieces, design with making your job easier. (However, this current design satisfies this.)

For areas of one color, let the CSS handle it.

For borders, unless it concerns something complex, let the CSS handle it.

Some browsers support SVG backgrounds. SVG is capable of scalable gradients, and a lot of other things, something that no raster image can ever accomplish. Consider this for the next time you use gradients. (However, i think WordPress has a similar featurewhich can be seen on its default template.)

What can I say, I'm slow, though I was a bit lazy about coding when I made this, I couldn't have ever got it done in 30 minutes. I know how to do it(regarding the knowledge), I'm just slooooooooooooooooowwwww.

10 % of my visitors use IE, and with the average 8 visitors per day I have, I'm not sure if I want to leave that 10 % out by using CSS3? I'm using 5 images to get rounded corners for everything right now. The file size of all the images I use on that purple blue template is around 25 KB, with those 5 images are taking up 5 KB. I could shove them into one image to reduce http requests and use bg positioning to use them...

The problem with SVG is again, browser support, it would be great otherwise. Cutting the design to separate images is pretty much easy, I just merge all layers, press R and start cropping, saving and undoing.

 

Thanks for replying(where are all the other people, trap is so inactive nowadays), and don't forget to review the second template, too!

[Zagubadu? 0]

I'm not one to talk as my Photoshop work is terrible. But I think there is a fine line between simple that its nice sort of like your current one and then just too simple. It just looks like I can pick it apart. Which is most likely hard to understand. Its just so simple I find my self look at all the individual pieces of the template and saying to myself wow I could do that. I don't mean to be mean or anything its just what I think of it.

[anwiii 17]

well, first of all, i do like your original and new templates. i just don't like so much the placement of your navigations.whenever designing something new, i think the main purpose is to be original and to stand out a little. it's gonna get confusing to explain my idea since you now have three designs so lets just talk about the last one. something to think about is putting "home, about freebies" and "login, register" on the main menu line. next to your "tutoriary- tutorials for web designers", i would like to see some graphic or graphics so it looks less plain. my suggestion is to create book graphic for "announcements, gimp, html & css, misc" the graphics of books would relate to your site and each book would have it's title where if someone clicked on the book, it would take them to that section of your website.if you impliment that suggestion though, i don't know if the search bar will seem out of place there or maybe you can move it down to the main menu bar.anyway, that's my idea. also, the blending of the header to the menu bar seems a little off to me. i don't have any suggestions for that but i would think about blending it together better.and again, i like your designs. i just don't like the placements of the links and also i felt a graphic or graphics would spice it up a little better and make it more appealing to the eye.

[truefusion 3]

Hmm, I agree. I'm just sucking in this atm, everything is slipping out of my hands... The font is tahoma. I'll try to make a logo similar to that in the image you provided, thanks for helping in that.
Okay, I'm going to make it multiple levels to fit everything I have into one bar. I made a new design(oh yes...). I have these 2 now, the other one doesn't have all the searchboxes and other "extra" stuff in it yet because I haven't coded it yet:

I forgot to change the font to tahoma in the sidebar in this one before exporting tho.
Now, I removed the breadcrumb trail in the original one:

I will say this: You already have the structure worked out in your head (or at least i think you do), so all that is left is the design. I would rather have your limits pushed here. I won't say that designing a web template is easy; if you were to ask me which position i would prefer, a web developer or web designer, i'd pick web developer. In the real world, people don't work on just one design, they come up with as many as time allows, to in the end go with one. This is why they are done on paper first, since it is a whole lot faster designing them on paper than on the computer.

There are times where one might come across a website and declare the design (or some parts of it) as simple. But when it comes to trying to make the same thing, we realize how complex it really is. Your website deals with some graphics work (GIMP) and other design work (HTML and CSS), but these template designs don't give away any interesting expression on what to expect from these sections. And i can't say that the design of the template is suitable for a website seeking to consist of tutorials. While WordPress may be used mostly by bloggers, the design doesn't have to reflect something suitable for blogs.

10 % of my visitors use IE, and with the average 8 visitors per day I have, I'm not sure if I want to leave that 10 % out by using CSS3?

I don't think anyone would complain, especially if it is just about rounded corners. The website would still be accessible and you can do everything you can do in other browsers. Plus, if they choose to stick with IE while knowing there are better browsers out there, then they are practically asking for it.

[web_designer 7]

i think your new theme is good, simple and get the attention. but i just wander why you are insisting on using the blue color in all of your themes. a little bit of changing will be good. but if you like, you can make a gradient in colors. you have many choices either make a hue using only blue color i mean hue from dark blue to light blue or you can another color with it.
if you don't know what color to mix with, here is a website of color schema, it is very useful site that helps you mixing colors in a very beautiful way
http://forums.xisto.com/no_longer_exists/
or
http://paletton.com/
also these schema will help you decide which color to pick if you want to add logos, heading, anything to your websites

i also liked the rounded corners in your theme but i think your title should be alone in a certain area to give a strong impression so , i think you should move the header menu (home-freebies- about) to give these whole area to your title. you can add your header menu to your menu bar and make a box for register and login button. or you can keep them all but give more spaces between titile and the others.
also the description of your website (tutorials for web designers) should be more lower i mean there must be a space between the title and the description of your site.

note that, wordpress already gives you a link of description in the header of your theme. that means you will have too descriptions. so, if you want to keep yours you shouldn't let wordpress description appears you can do that from your wordpress dashboard but don't delete it from the template code because search engains will no longer can catch your website.

according to what i saw in your website , you need a fancy footer. may be, you could make your footer area more wider
you can put links, buttons, specific image and your copyrights but in a different showy color to be noticed.

also, maybe you will need more logos of images that can give life to your website. for example you can use social bookmarks. if you decided to use wordpress use widgets,it may look great.

that all, everything else is perfect. if you want any help in wordpress just let me know.
by the way i like the posts in your website it is very useful. keep the good work and good luck.

[Baniboy 3]

Hi again, everyone!
So, I've been working on the template. Anwiii, thanks for the book graphic idea. I thought about it and made it part of my logo. I couldn't make a navigation out of it, because I didn't come up how to indicate html and css with images(?). Anyway, I make a book (took a long time too, with all the details, and then got shocked for half of them disappearing after scaling ). I have decided to keep the page and category navigations separate, mostly because I'm adding more pages (feedback page, copyrights page) and maybe more categories in the future! I have seen many sites keep pagenav on top, so I've put it up there too... I know, not very unique.

@tf:
But why everyone makes it seem so easy? Is everyone copying everyone and I'm missing something?
Thanks for all the help. Anyway, I did the best (methinks) I can.

@web_designer:

note that, wordpress already gives you a link of description in the header of your theme. that means you will have too descriptions. so, if you want to keep yours you shouldn't let wordpress description appears you can do that from your wordpress dashboard but don't delete it from the template code because search engains will no longer can catch your website.

umm? I'm using a custom theme here, I only have 1 description. I build my own themes on the templates I make. And that description was included in the image. But of course search engines won't index my keywords in there, so I'll add alt text and put the whole thing in a header tag.
Thanks for all the suggestions, I'll improve that theme and share it as a freebie on my site later!

@Zagu:
I know it's simple. Improving it...

Sooo, here's the template:

I've yet to add stuff to the sidebar and make some custom buttons and other gfx, but this is a draft.
Sorry it took me so long to reply... been lazy lately :angel:
Thanks for replying everyone! Replies on the updated template are also appreciated. And don't forget to visit my site!
Edited February 23, 2010 by Baniboy (see edit history)

[anwiii 17]

your graphic looks nice and adds a better demension for your theme. to bad you couldn't add little book graphics for menu options because i think that coulda look pretty cool. where's your description under your title? :angel: also, i still don't like two menu bars in between your header. something just seems off....but that's just me. but again, the book adds better visual effects so good job on that!

[Baniboy 3]

Alright. I merged the navigations together (just for you, anwiii :angel:). The sidebar is yet to contain anything, but this is what I've come up with:

What do you think? I know the test post box' bottom gray bar is a little out of place, but what do you think of it otherwise?

[anwiii 17]

i think it looks a lot better, but you need more input than from just me. 3 things. where's your search form? where is "tutorials for web designers"? and something seems off on the right hand side. it looks lonely :angel: ummmm maybe centering your name and graphic would do the trick, or ummm put your search in the menu bar and also put "tutorials for web designers on the right across from your title and graphic. i say definately include "tutorials for web designers" or something similar. that one keyword phrase is competing with 8,000,000 websites so maybe i would add a word to it. but if you don't, that's ok too. i am one to always focus on seo though.

 

but again, i hope you get more input than just mine. everyone has their own tastes and what something should look like. this is YOUR project so it really has to make sense to YOU and whoever you are targeting to visit your website.

 

but i think it looks a lot better. and your header is smaller which is good too because you don't want the top page taking up more room than it has to.

 

Alright. I merged the navigations together (just for you, anwiii ). The sidebar is yet to contain anything, but this is what I've come up with:

What do you think? I know the test post box' bottom gray bar is a little out of place, but what do you think of it otherwise?

[truefusion 3]

What do you think? I know the test post box' bottom gray bar is a little out of place, but what do you think of it otherwise?

I like the heavenly glow of it. And is that empty grey-ish bar at the bottom for tags, comment notifications, et cetera? I think it would look better if the box had a brighter color, one that leans towards that purple-ish color in the navigation bar. And the navigation text, are those images? Or is the emboss effect a CSS drop-shadow effect? And the line between "Misc" and "Freebies" seems inappropriate.

[kleong 0]

I prefer your original masthead. The gradient looks better while the new design feel kinda "blocky". For the rest thou, it is kinda hard to comment as there isn't a proper layout of the new design to begin with.

[web_designer 7]

ok, i think you really did a great job. your theme looks now more professional. your header look clear and unique; your header menu looks compatible with the whole layout. you did good by putting a logo book in the header. also, always think that adding shadows to images and text giving them more depth and beauty. it simply makes your layout alive so go ahead your them is great.

[Baniboy 3]

Alright, so I've yet again done something to it. According to your recommendations, of course.

I like the heavenly glow of it.

Haha

And the navigation text, are those images? Or is the emboss effect a CSS drop-shadow effect? And the line between "Misc" and "Freebies" seems inappropriate.

This is in "xcf-mode", currently, because I want to design first, then code it down. But I'll make the effect CSS3 "text-shadow: 0px 1px 0px #fff;" when I do my infamous xcf -> WordPress theme- trick :angel:

 

I got rid of the line, but I still need something to divide the about page from the categories? (I've decided to make Freebies a category, btw).

 

i think it looks a lot better, but you need more input than from just me. 3 things. where's your search form? where is "tutorials for web designers"? and something seems off on the right hand side. it looks lonely smile.gif ummmm maybe centering your name and graphic would do the trick, or ummm put your search in the menu bar and also put "tutorials for web designers on the right across from your title and graphic. i say definately include "tutorials for web designers" or something similar. that one keyword phrase is competing with 8,000,000 websites so maybe i would add a word to it. but if you don't, that's ok too. i am one to always focus on seo though.

Added those 3 things. So, I'm a bit curious about adding a word to it. I was considering "Easy tutorials for web designers" or something? As for the right side, it's going to contain a RSS icon. I'm guessing it feels off because the logo has a white glow behind it. Well, the RSS icon is going to be somewhat like the navbar (graphically).

 

Alrighty then, so here it is:

 

I revolutionized the content area a bit as well as lightened up the header more. So, what do you think?

 

Thanks to everyone for replying!

 

EDIT: I changed the font of the header, because someone told me comic sans is horrible...

Edited February 26, 2010 by Baniboy (see edit history)