My new design blog

**aatiis** · 03-13-2009, 05:41 PM

Please care to review my new design blog - http://darckdesign.blogspot.com/. Apart that it's quite new with only a few posts, I'd like someone to point out my mistakes. I'm not an expert, you know...

Thanks in advance.

**vangogh** · 03-13-2009, 07:43 PM

Looks pretty good overall. It's not my style, but not everything is.

Some thoughts:

Try optimizing the image in your header. It took a long time to load. If you have Photoshop save the image for the web. It looks like it's close to 450kb and you should be able to get it down to something like 30kb

See if you can make the navigation links text instead of having to use an image. You can use a background image for the hover effect, but using real text is better for search engines. If you want to keep the images add a text only navigation in your footer. By the way I like the short text that appears when you hover over the links. I thought they were all clever and add a lot of personality to the site. Really nice touch.

The posts themselves all look good visually. I wouldn't indent the first sentence in each paragraph, though there's nothing specifically wrong with it. It's a visual aid that helps when reading print, but it doesn't really help the same way online. I prefer a stronger alignment with everything to the left.

The sidebar appears a little crowded to me. It's not that there's too much in there, but I'd like to see a little more space between the sidebar and the content. You can probably open up the whole page for 1024px instead of 800px.

I only scanned your posts, but they seem pretty good so far.

Instead of going with the black background I might go for a dark gray. Again just a personal preference, but using #111111 instead of #000000 creates more interest for me.

**aatiis** · 03-13-2009, 08:05 PM

Thanks a lot vangogh, for being the firs to comment. I like your posts, even though I'm not very active on the forums, I like the stuff you write.

So before I start correcting glitches, probably the best thing to do is to widen the whole page to 1024, so there's more space for the text and it probably won't look so crowded. I'll make the improvements and see what it looks like.

By the way, it's not really my style either, I like clear designs without much animation/images, but I wanted to make a web design blog, so that's why I tried to show off

Thanks for your help, I'll start working on the design.

**aatiis** · 03-13-2009, 08:21 PM

And btw, I don't have Photoshop, I use the GIMP. The header is a compressed png, that's why it loads so slowly. I'll see how it looks like if I change it to a 90-95% jpeg.

**vangogh** · 08:40 PM

Glad to help and thanks for the compliment. When you're designing for 1024 use something between 960px and 980px. You want to leave some room for the scrollbar and the browser window. The numbers above are a little arbitrary. 960 is getting used a lot because it leads to a lot of nice combinations for grid based layouts. 980px should still be safe.

The GIMP should work fine. What's the resolution of the image? Anything over 72ppi is a waste online. I'm guessing you're at 72 already. In Photoshop I usually go for a medium jpg or I'll reduce the number of colors in pngs and gifs if I can without losing quality. There's always a bit of a compromise with compression, but usually you can find a balance where the image size is as small as can be without any but other designers ever noticing.

You're image is pretty big so the file size is going to be big, but I know it can be reduced a lot from what you have now.

One thing I just noticed is the image is 860px wide. You can crop it closer to the border. Although if you're going to make the whole site wider the image will inevitably get wider too. When I design I look for ways to reduce images where I can. For example you could have kept the border at right angles and kept your image inside the border and then used code for the border instead of an image. I'm not suggesting you do that since I like how the sunflower breaks out of the border. It's a nice design touch. Just using it as an example of how you can cut down on images and image file sizes in general.

There are a lot of images online that could easily be reproduced in code. A pet peeve of mine is any time I see an image for a flat background color.

Looking through most of your images I think they could all probably be optimized a little more. Even the smaller images. If you can save a few kb here and there it all adds up.

**aatiis** · 03-13-2009, 09:08 PM

Thanks again. Right now as I have some time, I'm starting to widen the image, but I think I should make it a little shorter in height. And a new, cleaner border would be nicer then this smooth one. I'll go for #111111 background this time, see how it looks like.

As soon as I'm finished with this logo/layout design, I'll fine-tune the posts and clean up my css. Also I'll make a new menu with text (the old one uses tables - I know, I know... Back when I made it I used to use tables to position elements.)

Should I simply resize the whole image to 960px (withou the margins, I'll crop them)? I tried it and the letters seem to be little too big. I'll try it and see how it looks.

Thanks for your support.

**The-Pixel** · 03-14-2009, 07:25 PM

Hello,

The design is nicely done. It's not a design you normally see on blogs and that will only help you in the end. Unique ideas, content and images will help your blog in the end. I really like how you have your navigation setup - you did a great job. I look forward in seeing more of your work on WebMaster-Talk.com. Once again you did a great job. Best of luck to you and your website.

**aatiis** · 03-15-2009, 12:03 AM

Thanks for the wishes, The-Pixel.

According to vangogh's suggestions, I've widened the website to 980px (now the header is a little bigger, but I could still reduce it's height). I've changed the text's look in the logo a little-bit, to make it look more transparent/glassy. Hope it's ok. (Actually I lost the source of the previous one - stuped me. How can I lose files, even with using dropbox?). Anyway. Now there's a little more space. I'll still need to clean up the bar on the right. It's just a placeholder for now.

Should I make it like 250+ px so it could be for two rows of 125px ads, and that way the archives and other stuff would fit in nicely. However, I'd lose more than 100px from the content div's width that way.

Also I made the navigation bar text-only, and changed the script so it won't wait for window.load to initialize. Now it's easier to add/remove items, since it's text-only. I slowed down the animation from 0.5sec to 1sec. That way everyone can see that actually it's animating

Removed the junk at the bottom, but still need to add something. I'll do it later, perhaps tomorrow...

Removed paragraph indents, and changed the body background from #000000 to #111111. It looks weird (a little grainy or what) on my lcd, but otherwise it's ok.

Thanks again for the useful suggestions, you're very kind to help me out. I'm new to web design (I'm a programmer student), so any help is welcome.

**vangogh** · 03-16-2009, 08:36 PM

It's looking good. I like the wider feeling. Much more open. If you're thinking you'll want two columns of 125x125 ads you'll want to go wider than 250px. You'll probably want some space in between then and some space between the ads and the left and right margins of the sidebar. Let's say you used 10px for the spaces then you'd want

250px + 10px + 10px +10px = 280px

You could have the space between the left ad and the content be in the content div and so the sidebar could be 270px in that case. Obviously the 10px for the space is arbitrary. Just know to include more width in the sidebar than the width of the two ads next to each other. Whitespace is good.

Don't sell yourself short as a designer. You may come from a programming background, but you're design is already better than some you see from people who do call themselves designers.

If you want to read through a great site about web design check out Web Design From Scratch. It'll probably take a few days to get through all the articles, but I guarantee you'll learn a few things you hadn't considered. Lot's of good advice on the site.

**aatiis** · 03-16-2009, 10:26 PM

Thanks again vangogh, I'll check out the site and try to apply the advice on my blog. I'm glad you're helping me out here on the forum.

**vangogh** · 03-17-2009, 07:41 PM

Glad to and feel free to ask more questions. The Web Design from Scratch site is a great site so do check it out.

**bs1** · 03-17-2009, 10:34 PM

I like it. I'm a big fan of the enlarged header. Seems like the trend now among the top 10 blogs like techrunch, boingboing, etc. is to almost completely eliminate the header, but I think larger headers are more eye catching.

I think the navigation could stand out a little more, maybe if it were placed in a solid bar of a contrasting color beneath the header, but overall I really like the design.

**aatiis** · 03-18-2009, 02:27 PM

Thanks, bs1. I'll play around with the navigation bar tonight to try and make it stand out a little more.

Thanks for the feedback.

**zeruel** · 03-19-2009, 01:23 AM

I am really not a fan of "big header blogs". But over all, it looks fine and clean.

The content looks great as well.

It's just that the header annoys me.

**jesi** · 03-19-2009, 03:23 PM

Header is too big more than my looking areas :P but finally i was forced to pay these words "Great Template"

**pacesolutions** · 03-20-2009, 06:38 AM

Nice Work Done

**TurnkeyInternet** · 03-20-2009, 11:57 AM

The design is alright. It's not my normal style. I think you have a solid base to work with. You may want to shrink the header because the content is unable to be seen when first hitting the site.

**aatiis** · 03-25-2009, 01:37 AM

Thank you guys. I'll work on shrinking the template. I have made the sidebar wider and I'll add an archive section soon.

What should be an optimal height for the header? Or could I keep a larger height and insert a few things into it, like a feed icon, or some banners? I'm afraid most people just won't see the site from the header...

**aatiis** · 03-25-2009, 01:37 AM

PS: I have registered a domain: http://www.darckdesign.com/. I hope it works for you too.