As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Website layout help

Penguin_OtakuPenguin_Otaku Registered User regular
edited July 2012 in Help / Advice Forum
So I have a website with the width of 800px. It's a pretty simple website for a guy that just wants to showcase some of his projects for clients.

Some of the stuff I'm thinking about consolidating into the header (his e-mail, twitter instead of having a small contact page.)

Some of the other stuff such as his background and other info aren't going to take up a whole lot of space. I'm just having a hard time knowing what the standard layout/spacing/padding is... or whatever you guys might suggest.

sig-1.jpg
Penguin_Otaku on

Posts

  • JdNoaJdNoa Registered User regular
    As a non-designer, what I've generally done when setting up a website with no real guidance from the client was to look at websites belonging to competitors or serving a similar purpose, and find ones that look good and work well. Then I steal borrow am inspired by the layout there.

  • AftyAfty Registered User regular
    Standard width for a desktop site is 960px, this accounts for the majority of web users having 1024px resolution and leaving room for scroll bars and browser real estate.

    Depending on the expected audience you can modify this though, for example if your audience are all gamers, they are likely to have larger screen sizes.

  • MagicToasterMagicToaster JapanRegistered User regular
    There is no standard layout and padding, you design according to your audience. Additional elements that will dictate the layout is how you want your users to navigate the web page, where you want to create emphasis as primary information and what is secondary.

    Before I design, I ask myself "If they only see it for a couple of seconds, what do I want them to remember", then I design around that.

    Can we see the design? It's hard to be specific on general descriptions.

  • DisrupterDisrupter Registered User regular
    960 grid system is pretty common. There is no "right or wrong", but there is "common and accepted" and it is pretty widely used. You wont break new ground, but you will keep things clean and appealing.

    http://960.gs/

    616610-1.png
  • Penguin_OtakuPenguin_Otaku Registered User regular
    The design is mainly for a portfolio and while I have my own design ideas, I'm saving what I consider the best ones for when I actually get around to making my own portfolio site.

    I understand about determining how important elements are and how I should base how I layout my information based on that.

    But it's a lot of copy. And I think I'm come up with an idea for his twitter/contact information as a side bar because otherwise it's 800 wide of all text (and not a lot of it.)

    I'm not sure who exactly is going to be viewing this website specifically (clients) but I don't see the need of making it wider just for the sake of making it wider.

    sig-1.jpg
  • wmelonwmelon Registered User regular
    what you're really asking about is called "information architecture". There's quite a bit of stuff you can read on the web that should help you figure it out. Here's on ok tutorial series Wired

  • ArikarindokutaArikarindokuta Registered User new member
    better download the 960 grid templates found on the web, pretty helpful for starters :) and also grab a copy of default templates used today

  • AtheraalAtheraal Registered User regular
    I always found the 960 grid system more of a pain in the ass to work with than it was worth. Honestly, if you're looking to get into professional web development, you'd be better off investing that time into learning your way around one of the three big CMS's. (Drupal, Joomla, Wordpress)

    They give you a good basic layout to start with, that you can get to tweaking and rearranging for your needs via CSS.

    But if you just want to get this one simple project done, just make things consistent. Any size margin within reason can look good as long as it's consistent across your elements. Just start somewhere, and tweak it until it looks good. As JdNoa said, looking at competitors' sites is a good starting point if you really want a reference to work from.

  • [Michael][Michael] Registered User regular
    This doesn't really answer anything specific, but you've made other threads involving web design in the past, so here's a ridiculously good resource:

    http://www.smashingmagazine.com/

    They cover just about everything you could imagine related to web design. The Web Design, Typography, CSS, and Javascript categories are great. Other categories can be hit or miss. Even the "miss" articles usually have examples of great design you can learn from.

    Once or twice a week, read through the articles that interest you and you'll be surprised how much you pick up after a few months.

  • AftyAfty Registered User regular
    Atheraal wrote: »
    I always found the 960 grid system more of a pain in the ass to work with than it was worth. Honestly, if you're looking to get into professional web development, you'd be better off investing that time into learning your way around one of the three big CMS's. (Drupal, Joomla, Wordpress)

    I find all three of those cms to be bloated and overly complicated. Silverstripe or Concrete5 or even expression engine are much nicer.


  • AtheraalAtheraal Registered User regular
    Depends on the features you want, but yeah, I could see that. Learning one of the ones I listed is going to be much more likely to be useful if you get a job with a web dev team, but if you're just planning on freelancing you should go with whichever one meets your needs and feels good.

    But overall, I'd say definitely pick one to go with, unless you really want to be stuck doing ongoing tedious content updates for your clients.

Sign In or Register to comment.