Website Redesign - Layout crit

[deleted member]

alright so I'm still working on redesigning my website (its never really got past the design stage) anyways I spent a few hours redesigning the layout and color scheme... let me know what you think! I'm expecting some tough crits guys Anyways, here's the gallery layout...

[Deathdart]

"Tough critique" it is then! :P

At first glance, the most obvious problem with the layout is the grid, or complete lack thereof. Nothing is aligned to anything else. You cannot create a halfway decent layout without designing a suitable grid first, so please do look it up. I'll post a few helpful links to get you started:
http://psd.tutsplus.com/articles/web...design-theory/ - A lot of different graphic design related links, including a section on grids
http://www.designbygrid.com

Conceptually, again, it is lacking. I'm not sure what you're trying to communicate with the pastel blue-green colors. For a personal website, it doesn't seem personal at all. In fact, it creates an image of the designer as a 10-12-year-old in my mind. Try making it all about you! Pour your personality into it! People should take one look at it and know what you're all about.

The sub-navigation on the sidebar is completely unreadable, I can only read Logo. Print is somewhat OK, but I have no idea what the one in the middle is... Illo? IIIO? Liig? It could be anything... I'd suggest not covering up any part of it. Make it more readable, it'll look better and be more usable. I also don't understand the point of the large uppercase 1st character, moved from the baseline and placed randomly. Maybe you could try something else there that has a more logical relation between the 3 buttons? Or maybe something so completely random that it doesn't need to establish a relation between the three.

Another major issue is the complete absence of balance in the design. Spacing is not pleasing. It's a combination of too little and too much e.g. too little around your body text and around the copyright notice, too much around your logo; too little above and below the images in the side panel, too much on their left and right. Use white space to your advantage wherever possible. Add a lot of it to this design.

Also, the font Perpetua is not web safe and is hence not advisable for body text. If you can't use it on the final, don't use it in the draft either. It'll be much easier to set up your final font in Photoshop and then transfer the setting to CSS. Try Georgia instead if you want to use a serif font.

Also, try to limit the number of fonts to 2; at the most three, including the font you use for your logo. Also limit the different font sizes you use; try having a convention for it such as a page header H1, article header H2 and sub-headers if required H3, H4 etc. and one size for body copy, maybe one size for captions etc. The fewer different sizes you use, the better.

I guess it's a decent start, but there's a long long way to go. You'll get there though, keep posting up revisions here. There are a lot of helpful people around.

[deleted member]

ouch ;P I'm the first one to admit that website layout is not my strong point. thanks for the links I'll be sure to check them out. As for the site relating to me... idk I like minimalist design (like my logo). totally agree about the sub-nav bar I didn't really know what to put in there... I'm thinking icons that represent the different sections. I know about the 2 font size rule (not counting the fonts on the logos ) and perpetua not being websafe... I was debating just saving the description as an image. kk I'll post a revision soon

[Deathdart]

Haha, maybe that was a little too harsh on my part, but I hope some of it helped!

[deleted member]

lol of course it helped :P so is this looking better? I'm probably going to change the colors a bit and the "1,2,3" Are just placeholders for the icons/whatever i'm going to put there.... but ya as far as layout goes is it better?

[Deathdart]

Aah you'll need to look up visual order as well... :P Right now, the first thing I see is the displayed logo, then subnav, then main logo and then main nav and my eye wants to avoid the description area because it looks a bit too crowded. IMO the order should be logo, main nav, displayed image, description, subnav, or it could be something else depending on how you want your work to be presented, but the logo and main navigation should definitely not be the last thing your viewer sees. What happens if the description is larger than the sample you've posted up? The main nav at least will move out of the visible area completely on smaller monitors.

Is there any particular reason why you're using this width and height for the design? It is possible to easily use a full 960px (or upto a max 1004px) as width and 1.5-2.5 screen heights as the height of your website. There's no need to stick everything together with hardly any space in between or around elements, if you space things out a little, it'll give a much cleaner look overall.

Also, about all the boxes... have you tried a version without them? Boxes might create a negative impression, especially on a design website, because they create a very closed, rigid; this affects the viewer making them feel subconsciously that the designer has a closed mind/views. Of course I'm not saying don't use any boxes at all, but try not using boxes for absolutely everything, especially the logo. The logo should not be modified from its original form in any way when it is used in different media, unless the medium limits the usage of the logo.

And one last thing, try improving the readability of your body text. You can do this by increasing the leading on the body text and use a smaller font size such as 10-14pt for it. 18pt is more in the domain of a header, especially on a website. What is the measure of your line? When you reduce the font size, the measure will increase and you'll need to increase the leading accordingly to maintain readability. Ideal readability can be achieved at 60 characters per line at 120% leading; as your measure deviates from this value, you have to increase or decrease the leading respectively to maintain readability. Try keeping it between 50 and 80 characters per line though.


The second design is definitely a big improvement over the first one, but there's still things that can be done to make it even better. Here's some more links to help you along -

Five simple steps to better typography : Journal : Mark Boulton

mrane.com - Basics of visual order in a different context, but you should be able to study and apply it to web design

EDIT: Also, please use some dummy text instead of random characters for your body text. This gives the design a much more finished and professional look and will also allow you to judge the readability better. Try http://www.lipsum.com

[deleted member]

thanks again for the crit! (don't have a lot of time to write so i'll answer some of your questions later) this starting to look better?

[Deathdart]

Waiting for you to answer those questions before criticizing this again; I'd hate to keep bringing up the same points again and again if there's some logic behind it

[deleted member]

Alright so this layout is designed for a 1024X768 screen (which, according to some recent polls) is pretty much now the standard size. other than that I changed the layout of the gallery so that you see the logo and nave bar but the actual portfolio is still the main focus. I think I fixed the description problem (hopefully more readable) and tried to free up some more white space. any better?

[Deathdart]

Ok, first of all, designing a website for a particular resolution doesn't mean that it has to fit inside a single screen; all it means is that at that resolution, there should be no horizontal scrolling, while vertical scrolling is acceptable. If your intention is to fit the website perfectly within a 1024x768 screen, then this won't work because the height is too much. Just open Firefox and measure the height of all the toolbars + windows taskbar and titlebar and you'll see that this height subtracted from 768 will be less than the 675px that you've used. Try the same with IE; these are the two most popular browsers currently in use. This means that the site is going to scroll vertically anyway, so why not use that to your advantage and increase the height to something more comfortable? That way you have more space to work with and don't need to cram everything into a tiny space. You could have bigger thumbnails so that people have a better idea of what's in store if they click one.

Once again, I must say that you need to learn to use grids. The whole design is out of alignment and does not look very impressive because of this. Try going through the following link to get a basic understanding of this principle:
Five simple steps to designing grid systems - Part 1 : Journal : Mark Boulton

If you learn the basic design principles, you'll understand your own design much better and will be able to judge your work. Please go through the links I've posted in this thread.

I'm attaching a very simple example of how a grid could work for your current design, you could probably take reference from it and develop it further AFTER reading through the article I've posted above.

[deleted member]

Sorry I've been busy but I am still working on my layout... i Do want it to fit entirely in the screen with no scrolling so i'll be reworking the layout a bit... but i'd also like to post this image showing that everything is lined up and on a grid.... it just didn't transfer well once i got rid of all the boxes ;P. I'll post revisions soon...

[Deathdart]

Hey,
It's good to see that you've made an effort to use grids, but unfortunately that's not exactly how they work. What you've done is tried to align imaginary content boxes to the grid; instead try aligning the content itself to it. For example, the body text is not left aligned to the portfolio area, the scroll bar is not right aligned to the same.

About the navigation; it's generally not considered a good practice to use different alignments in the same area. It might look better if the navigation was left aligned.

The left column is OK because everything is aligned in the center, but if that's the grid you've used then it's the wrong usage. In general, when you use a grid to align elements, at least two edges of the element must lie on the grid. Of course there can be exceptions to this, but try to learn how to use grids before learning the exceptions. I'll say this again, go through the links posted above, they'll help you understand grids better.

[deleted member]

Still playing around with it... ( I got distracted) not giving up yet!



* oops thanks Coy!!

[Coy]

Link/pic doesn't work? (for me at least)

[johnsmith12709]

Thanks for the posting because its very interesting to see.....
............
Web Development Services | Website Designing | SEO Services