4

I read a lot about grids and how they make the websites look good (needless to say I agree)

though I have not been able to work with them. Have not been able to "feel" the advantage whilst using the grid system (I'm always talking about the photoshop stage).

So I was wondering if there were some resources on how to take advantage of the grid system. Preferably, I'm looking for tutorials (better still video tutorials) where the author says "this is how I use this everyday" NOT "this is what you can do". Basically, I know how to use the grid system. but I am looking for good practices, Something (for example) I would get by looking over the shoulder of an expert.

Hope you can help, thanks

Improve this question
2
  • 1
    Designing to a grid is a basic concept of graphic design. Do some research on grid based design in general...it's all applicable to the web as well. Publication design resources would be a primary source of reference materials.
    – DA01
    Mar 15, 2011 at 19:52
  • A this is a good idea, I do actually collect any printed designs I find but never got around in analyzing them; So ye maybe looking at grid design at its primary source would be good. Though I don't know about others but I work better when I first learn what I need - and then go in to the subject in more detail. with me, is like learning about WW2, fist get the basics, then dive into heavy book. but thanks, if you have any references for this, please share
    – aurel
    Mar 16, 2011 at 3:57

4 Answers 4

Reset to default
2

Aurel,

A benefit from using grids helps you apply even spacing of elements in your composition. When you're working with information and text elements, like a web page, it's highly important that one places elements onto the layout with a structured, visual hierarchy. Information of course, is the backbone of the web so creating structure of this information is just as important as any other informational design project.

One of the many things I learned from graphic design school was that visual elements need room to breathe and white space is just as important as visual elements on the layout. Try to experiment with your layout. Make one composition with arbitrary padding and then make another following the guidelines of the grid. I can guarantee you that the layout that is more regulated, in terms of placement of information, will look more professional. Somewhat bizarre if you think about that you're using the same exact elements and the only difference is the spacing between them!

As stated in the previous posts, you can use 960grid system to help you with the web/photoshop stuff. You can also check out this grid system book at the library (yes, a library) to gain more knowledge about it. Other resouces: The Grid System, Grid System Wiki

Good luck!

Improve this answer
4
  • ironical the book is not in any of my local libraries, not even at uni :) if that's what you meant, but I really like the idea of a book, so of course I ordered it on amazon. your grid system link, is that related to the book? What do you think, should one think about taking a graphic design course when they do not have any artistic ability? As there are lots of articles related to web design which reference (like you) to the authors graphic design course - thanks for the great contribution
    – aurel
    Mar 16, 2011 at 1:41
  • A question, believing that grid based web design is very good, once you have the skill, would you ever work without the grid (I know that braking the rule here and there makes the element stand out but I main, just design the whole thing without the grid (even though you would be GREAT with the grid)) - Basically is it like table layout (ie. no grid) VS. CSS layout (ie. with grid). So once to know css table layout is way way bad; therefore, now that you know the grid, there is not designing without it; or is this more relaxed
    – aurel
    Mar 16, 2011 at 4:06
  • You do not have to be a good artist to be good at graphic design. Learning the fundamentals and obtaining a solid foundation in graphic design is significantly more important than skills in drawing.
    – Mike
    Mar 16, 2011 at 21:20
  • I understand that these questions may go over the top but, do you know where I can start to learn these fundamentals? graphic design is the topic which I mostly want to learn about and the one that I have not been about to find anything solid on (by saying that knowing how to use photoshop does not mean you know the essence of graph design)
    – aurel
    Mar 17, 2011 at 9:18
2

I like to just look at websites for inspiration and study "the grid". I can't think of any 'everyday practice' other than to just play with it. Here is nice website with 50 Good Grid Websites
Good Luck!

Improve this answer
3
  • thanks, I wander, do you krrp a sketch book for you grid (web) experiments? if you are a graphic designer then that's different, but from a web designer (no artistic ability) would a sketchbook be useful? I started to use one, but it has not been long for me to notice an extreme benefit. but ye thanks
    – aurel
    Mar 15, 2011 at 11:23
  • web designer - yes... I consider myself a hybrid of web/graphic/designer/developer and I find it very useful to just sketch and draw (with no artistic abilities) I may not even look at the sketches once i have it figured out in my mind but it's a lot easier than just trying to get straight in photoshop (although i have a wacom tablet). I see other people do it too: leticiasanc.files.wordpress.com/2009/04/site_sketches1.jpg
    – Miro
    Mar 15, 2011 at 11:58
  • that ia exactly what I am doing. me too, there are times that I don't see what I have sketched, or come back to them in a months time and see them from a different state of mind. Thanks for sharing :) - I ready about this but never asked anyone about it
    – aurel
    Mar 15, 2011 at 12:31
0

I would check out this resource: http://www.designinfluences.com/fluid960gs/ & http://960ls.atomidata.com/#usage

It gives you a lot better learning material, then poking around other published sites.

Improve this answer
2
  • this is much better. how about you, do you have any "good practice" routines when starting to design in photoshop. I am at a stage where I know the fundamentals; and I am now trying to learn the good practices, from more experienced people
    – aurel
    Mar 15, 2011 at 19:06
  • sorry aurel but i mostly use CSS to design the majority of my sites, and I use adobe illustrator for logo, images, etc.. there are some great resources out there for photoshop. i would just get a book or something. i learned most of my chops from html, css books, and practicing
    – debug
    Mar 15, 2011 at 19:32
0

I'm also starting to learn about grids and stuff like that when it comes to web design, I found a book that is quite usefull and cheap(if you want to buy it, a quick tip for low budget students like me, you can also find it on torrents).

The book is called " Ordering Disorder: Grid Principles for Web Design " by Khoi Vinh . Here is the link if you want to buy it from Amazon.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.