Grow your CSS skills. Land your dream job.

How am I doing so far?

  • # May 6, 2008 at 9:12 pm

    Below is a screen capture I took from Firefox. This is a site I am working on for a client that sells filing and storage products. The company is kind of small but covers a large physical territory. I tried to keep it clean and simple in a corporate kind of way. Do you think I am on the right track? The sub-pages will remove the light blue subcontent box at the bottom and give me more whitespace for content. The "our clients" tab is a background image only appearing on the body id=home page ;) Anyway, I’d like to hear what you have for criticism. The links have not been styled yet, and therefore will appear in their standard blue. I have added an .external class with a small graphic on sub-pages.

    Design isn’t my strongest suit, but I am trying like hell. I will post the URL to the test site as soon as I get a few approvals for upcoming changes. Thanks in advance.

    [img]http://www.ceramichetile.com/images/sdg2007_1.png[/img]

    For a full-size capture click here!

    # May 7, 2008 at 12:11 am

    Start to think about what you are doing, why, and how it works with the rest of the page. You do have a lot going on there. Also think about how you are separating the information and what the hierarchy is.

    As far as the information layout your placement of things as well as sizing needs to be a little more thought out. The logo occupies a large grey area witch is fine but that area is unlike anything else on the page. It also includes ‘webmail | archi…’ The placement of these objects now feels arbitrary and these two completely unrelated elements are floating in this ambiguous space. Also with this header, mind the grid. Your alignment and grid throughout this is not consistent. As far as text, keep consistent size and font rules and keep it cohesive. Why is the phone number important enough to be the largest font size on the page and yet not important enough to be placed all the way at the bottom of the page?

    As far as the visual effects go, you should probably start to make some decisions on what direction you want to go. You have a number of gradient and color variations in various sections of the page but nothing holding it together. Think about why grey why have no gradient at the top and yet have gradients throughout the project. Also you are using some reflection effects that may be all in style now but you need to decide weather they really work. I think the reflections don’t work here because there is no sense or reflectivity anywhere else in your design.

    # May 7, 2008 at 6:59 am

    Scott, thanks for all of the insight on the design. I was trying out the reflection thing, but was weary of it, you just helped me make a decision there. As for the grey at the top I wanted to separate the logo from the rest of the site. I found that logo doesn’t work well on many backgrounds so I just tried the grey and thought it might work. The links in the header section are more utility links, so I thought I should keep them separate. Maybe I can bump them up some and try to keep them alligned. I know my grid is a bit off on this, i.e. the main picture and the blurb (2/3 and 1/3) then breakdown into units which don’t align at the bottom.

    As for all the things going on, I was trying to give the company some presence. They wanted to seem larger than they are, so I thought by adding more info on their home page this would accomplish the task… again, missed the boat. The footer was an experiment as well. I thought about just going to a solid background or even a small graphic along the entire bottome of the footer, adding some padding, and keeping the links above.

    I guess you’re right about the phone number too… if it is that big, and important, then why so low. I will have to re-think that as well.

    OK, now time to go rip my hair out and make this thing work.

    # May 7, 2008 at 7:45 am

    How does that "Search for solutions"-input work? Do you select a solution, or a search option then type in what you’re looking for? If users can’t type anything in, it’s more of a "Select a solution" than searching for it.

    Apart from that I like the design. It’s easy to navigate and understand.

    # May 7, 2008 at 8:12 am

    It is a selection not a true search box. It is more of a quick jump navigation dropdown. This way they can go directly to the solution or market that they are looking for. Thanks for the comments.

    # May 7, 2008 at 8:27 am

    If it’s a quick jump navigation dropdown, I’d not call it search at all, as it is annoying if you expect a search-input and instead get a drop-down selection. Why not call it "Select solution"?

    # May 7, 2008 at 11:39 am

    After reading your original "search" post I was already looking for new titles for that box. I think "Select" is the winner.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".