Blog site layout: Be Brutally Honest!

TerranRich · Wed 21/05/2008 21:44:05

This is what I have so far for a new blog idea I have:

(Click to enlarge.)

The "Diagrams" link is colored to show what a mouse-over effect would look like.

I want brutal honesty. I know I can count on the AGS community for that! Is it too plain? Too excessive? Too colorful? Not colorful enough? Too big? Too small? I mean I know it's bare right now, but it's just the beginning and I'd love feedback on how it looks so far.

Thanks guys!

Jack Sheehan · Wed 21/05/2008 21:50:54

I really like it, reminds me of Australian Gamer. Colours are nice and I like the slightly over sized Icons.

TerranRich · Wed 21/05/2008 22:05:32

Yeah, I was going for a certain style with the oversized look of it all. Though I don't know if it will carry well throughout the entire site.

pslim · Thu 22/05/2008 01:37:53

I really like it. One of the things I hate about a lot of sites is how freaking difficult it is to find what you want. I don't forsee that being a problem with this layout, and as was already said, the colors are very nice. I also like the cleanness of the shapes and text.

The only small issue I have is that some of the icons inside the buttons don't seem to be ideal for what they represent. The letter 'A', for example, doesn't really convey the idea of charts.

Darth Mandarb · Thu 22/05/2008 01:47:39

I rushed this a bit (so some colors need to be normalized and such) but I wanted to throw down my idea(s) here. I really liked what you started with ... I just wanted to punch it up a bit!

The one thing I felt was wrong is that it felt too pushed together (losing spacing and margins).

Here's my take:

The PSD File (2.8MB) if you want to edit/work with it

- moved things around a bit (kept the icons which I liked!)
- added a web2.0 type reflection to the icons
- put the content together in one section

As was mentioned by pslim I too have some issues with the iconography not really representing the section they're supposed to! Other than that I think you had a really good start! I just stuck my nose in

I know I changed it quite a bit so I totally understand if it's too far away from what you were going for!

If you'd like to keep it more like you had it I'd suggest maybe just lowering some sizes and increasing the spacing/margins a bit!

Hope it helped!

Hudders · Thu 22/05/2008 10:12:28

Personally I would change the icons so that they represent what they stand for a little better, (e.g. the icons for "Charts" and "Diagrams" aren't right), and then remove the text above the icons completely, maybe replacing it with a title when the icon is moused-over.

You could also get rid of some of the sections, leaving you room to include "Random", "Links" and "Contact", (maybe even "RSS Feed") with the larger icons on the menu. For example, "Charts" and "Diagrams" could be combined into one section, I don't know what content you're going to have on the blog but from other blogs I've seen I'll bet you anything that at least one of those sections will go unused for the most part.

Other than that it looks really cool.

Pet Terry · Thu 22/05/2008 11:21:29

The black outer glow around the logo looks bad. I suggest you drop the outer glow altogether. You could also try replacing it with a simple stroke instead, for example. Also, I don't like the gradient in the background. You might want to try a simple pattern background there instead, or just a single background colour.

I like what Darth did with the menu and spacings in general, in your version everything looks a bit crammed. This is a common mistake actually, I've made it myself way too many times.

Other than that, I quite like it. The bright orange highlight colour is good and I like it, just remember not to overuse it. I don't know how you're planned the content area, but using the orange as a highlight colour there somewhere could work (links, headers). Then again, orange against light blue background might not be a very good combination. I guess you'll just have to try several and things and pick the one that looks the best for you!

TerranRich · Thu 22/05/2008 15:36:54

@Darth: Your suggestions are spot on and very helpful. I hadn't thought about giving it a "Web 2.0" look mainly because I'm against it as a web designer... but if it appeals to the masses, and actually looks pretty damn good, I should go in that direction. I love your "paint-over", it looks really good. Something about the border and division between content area and sidebar seems off, however. I'll have to give that some more consideration.

Your layout also reminds me of the Mac OS-X icon bar where icons grow as you mouse-over them, and shrink as you move away from them. I've heard it's possible to do with just CSS and JavaScript, but I might not go that route.

I forgot to tell you guys that there would be ads in the layout, hence the empty space one either side of my original content area.

I do tend to cram things together in my designs, and I need to work on that. And about the icons, you're all right; they do need to better reflect their destination. I used a free stock icon set for them... funny thing is, it included a blank icon so you can put whatever you want. I'll definitely take advantage of that.

I will also definitely keep colors in mind when planning out headers and links.

You guys are awesome. I'll work on it some more and show you guys what I get!

Darth Mandarb · Thu 22/05/2008 16:16:08

I don't like a lot of web2.0 crap either! Good to hear I'm not flyin' solo on that route!

As for a macOSX look ... well 2 things.

1) I was doing design like that quite a bit before them

and
2) I will give that to mac, they do make things pretty!!

Glad it helped! If you need anything else ... you know my number

TerranRich · Sat 07/06/2008 22:07:59

So, between projects and my kids, I finally found the time to revamp this layout, using Darth's awesome suggestions and paint-over.

I wanted a serif font for the body text of the site, and Impact for the headers. I loved your idea for italicized headings, so I incorporated that into the design. I also added reflections to the logo and the menu icons, as well as rearranged the layout. I didn't include outlines around the rounded-corner content boxes, because I want the code to be clean and minimal, and having outlines would mean three background images (top, middle, bottom) instead of just two (top and bottom, with the middle being a solid color).

I don't know, would it look better with a 1 pixel black outline around the two content boxes?

The sidebars are incomplete. I plan on adding three text boxes for entering in friends' email addresses, a note that promises not to share or use the email addresses for any reason except sending a single email telling about the site.

So what do you guys think of it so far?

Dualnames · Thu 19/06/2008 09:45:50

It looks awesome, but I can really be a fool for colors..any colors. But I like it.

Darth Mandarb · Thu 19/06/2008 17:59:07

Score!

I really like what you did here! I love the new tables (and actually like it better without the dark outline!) The "step" down to the table on the right is excellent! I like it much better than what I came up with!

There are only two things that naggle at me a bit:

1) the variant font styles (hops back and forth from a serif to a sans-serif font) it just feels a bit ... inconsistent to me! But it certainly wouldn't keep me from viewing the site!

2) the side table (with latest additions); the background is just a bit too dark and makes me feel the need for a bright text color instead of the dark. Or lighten the background color and keep the dark text. It doesn't need much lightening up, just a little to pull those colors apart just a bit more!

Other than that I dig it!

Peder 🚀 · Sun 22/06/2008 16:20:44

I only got one issue with this design and its the "welcome" text.
I think it would look better to put it more to the left like this:

TerranRich · Mon 23/06/2008 04:07:13

So here is a "live" version of the site:

http://www.2muchinfo.net/

I haven't added the footer yet, and I might just abandon the "Welcome" text, which seemed a bit tacked-on to me.

Also, I went with outlined content boxes just to see how it looks. I think I may go back to non-outlined content boxes, but how does it look outlined? Should I go back to non-outlined as originally planned?

And good point on the Sans-Serif/Serif font switches. I can easily switch it to all Sans-Serif for a more consistent look.

Finally, there was no way for me to put all of the top menu items (RSS Feed...Search) together, so I opted to float one part to the left, and the Search part to the right. I think it actually looks better.

Peder 🚀 · Tue 24/06/2008 15:32:11

Quote from: TerranRich on Mon 23/06/2008 04:07:13
Should I go back to non-outlined as originally planned?

Yes!

Quote from: TerranRich on Mon 23/06/2008 04:07:13
Finally, there was no way for me to put all of the top menu items (RSS Feed...Search) together, so I opted to float one part to the left, and the Search part to the right. I think it actually looks better.

It indeed look better like that!

TerranRich · Fri 27/06/2008 00:48:30

So I played with the colors a little bit, but I totally forgot about my plans to get rid of the outlines. How does the color scheme look right now? Did I mess it up a bit too much?

Darth Mandarb · Fri 27/06/2008 01:45:21

This is really shaping up.

I don't usually like the gradient/title bar thing ... but it works rather well on this site.

There is one thing I realized that is missing; a home button/link. I discovered that clicking on the 2muchinfo logo took me back to the homepage, but that might not always be clear to all users! Up top, between the search box and contact there's enough room (I think) to add another link "home"

Just a suggestion! I really like how this turned out!