Content layout frustrations

Hi everyone, my first post here. i’ve finally decided to join a forum in order to discuss some of the issues im having with my work.

I’m currently working as a web designer for a large online retailer and the majority of my work involes making banners and landing pages for different products and manufacturers. Pretty mundane if I’m honest but its my first job roll and I’ve learned alot so far in terms of html and css.

One thing im really struggling with and which leaves me stewing in photoshop for far too long is the layout of content. For each landing page were given textual information and are then asked to mock up a design layout, this is then approved and has to be coded up(which I’m finding relatively easy and rather enjoy).

I’ve always used a grid system within photoshop to help with layouts and spacing/aligning content but lately I’ve been finding the laying out blocks of text, headers and lists effectively to be frustratingly difficult.

Do you guys have any advice? A subject i should look deeper into, a book I should read etc.

Thanks in advance.

I’m not a graphic designer myself but I have a innate sense of what looks good and what doesn’t. I think people are just born with it or not. If you find layout of basic elements frustrating, that may be a sign that it’s not a natural talent. Nothing wrong with that. You just have to know your strengths. I’m sure there are great books and advice on best practices but I just don’t think it’s something that can be learned. For example, I’m not an artist so I never to graphic design. I also don’t think I can learn to be an artist because I’m not gifted in that way. You gotta play to your strengths.

Whenever I’m surfing the web and see something I like visually, I always take note of what it is that makes the site pleasing to the eye (graphics, layout, alignment, etc) and try to use that where appropriate in my own design. More often it seems, I find things that look awful and in that case I try not to repeat their mistakes.

If I was in your position, I might try working with other designers doing the same thing you are doing to see how they deal with basic layout.

You are way ahead of me! I have been doing this for over a decade and just recently started exploring typography. Here are some of the resources I’ve bookmarked:

  1. Build Better CSS Font Stacks
  2. Five simple steps to better typography - Part 4 This is part four of what was a 5-part very good article. Unfortunately he has taken some of the parts down, but some of this is still useful.
  3. Typography Guidelines & References This is a long list of typography resources published by Smashing Magazine. I have not yet explored it, but Smashing is generally a good resource for all things web development. :slight_smile:
  4. A Basic Look at Typography in Web Design A three part article at Six Revisions

Thanks for the replies, I’ve often wondered to myself if I have that talent you mention which makes this type of thing come easy, conversely I know for sure I have that innate sense of what looks good/right and what doesn’t. After all if I didn’t I think I’d be getting on with producing below par work and not spending as much time as I do stewing over my decisions on layout. I’m hoping that like with everything a certain amount of practice is required to get this type of thing right. I’ll take a look at those links, its a shame all 5 parts are not available as that content looks really useful.

Thanks again.

@MikeWD ; I tweeted to Mark Boulton that his links didn’t work and he seemed chagrined. Maybe he’ll fix them? Let’s hope so. There was some really good typography info in those other four parts!

I think both writing for the web and designing for it take a certain amount of talent, but I also believe that the ‘talent’ only grows with experience and education. Most important is the desire to do things right and from your first post, it looks to me like you are off to a good start!

Awesome post and very informative answers about typography.

You could add stuff like this to the stylesheet for those pages if you need to leave that width there:

#reviewsDefault .content {width:560px;}