SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Zealot WebEminence's Avatar
    Join Date
    Jan 2012
    Location
    Chicago, IL
    Posts
    129
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by MikeWD View Post
    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.
    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.
    4. A Basic Look at Typography in Web Design A three part article at Six Revisions
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by MikeWD View Post
    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!
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome post and very informative answers about typography.

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could add stuff like this to the stylesheet for those pages if you need to leave that width there:

    #reviewsDefault .content {width:560px;}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •