Designing Layouts

[mbugbee]

What are the different ways you all go about desining your layouts? I am stuck in a rut and am looking for new techniques. I have heard on other boards people talking about using a grid, can anyone elaborate on that for me? Like how its done and all that good stuff!

Matt

[mbugbee]

What are the different ways you all go about desining your layouts? I am stuck in a rut and am looking for new techniques. I have heard on other boards people talking about using a grid, can anyone elaborate on that for me? Like how its done and all that good stuff!

Matt

[edcasey]

Hi Matt,
Okay here we go. After many years of designing sites and studying page layouts I have settled in on methods that work well for most layouts.

Using the Microsoft Frontpage HTML Editor will enable you to put up a basic site quickly, but you wont learn HTML. Most serious Webmasters use a program like Homesite by Allaire Corp. Homesite will do what Frontpage will do, but Homesite is designed for the person that wants to have precise control over the site.

At some point, if you continue to design sites you will have to know HTML. That is accomplished by using a program like Homesite which will teach you HTML as you go along. You won't even have to study very much, there are drop down lists that show you the html code to insert and how to use it.

That being said, it is best to learn all you can about tables. That is the key that enables you to have control over the page layout. Cascading Style Sheets should be studied, but CSS is not supported very well by Netscape. Tables are supported by just about every Browser. CSS should be used in conjuction with Tables. But tables should be studied first.

Tables allow you to place objects like pictures, or a line of text, exactly where you need them on the page. They do this by setting up your page in a grid like fashion. Using the table tag allows you to view your page as though you were in an Excel spreadsheet.

You place the object (picture or text) in a table cell and then there are attributes in the table cell that allow you precise control over exact placement of the object.

You can color precise areas of the grid in design view and you can do it quickly. You can complete a simple table in a few minutes. There are wizards that set up the tables on the fly, in the Homesite HTML Editor.

Once you set up a table that will render say... half of your page, an excellent technique is to then copy and paste the same table directly underneath your first table.

Your design view of your page starts to look like nothing more than identical tables placed one on top of the other. There is good reason for laying out tables in that fashion. Each table gives you exacting control over a specific section of your page.

Some designers use tables with many dozens or hundreds of cells in one table. That method is inferior in many cases because changes that you make to the table will effect the entire page. When you want precise control over every area of your page you will want to design a complete table with only a few cells. There are exceptions but that topic is for more advanced use.

Another reason for using tables is that you can set the tables to spread across 100% of your page, regardless of the monitor resolution that is being used by the viewer.

The selling point for those that want to use CSS only...is that CSS provides for precise control over the placement of objects. That is true only if all Browsers support CSS. Unfortunately, only Internet Explorer and Opera (of the major browsers) support most of the CSS implementation. Even I.E. does not support the exact placement of objects under CSS, only tables will do that.

So, whether we want to or not...currently the only way to have exacting control over layout is to use tables. They are not very difficult to learn. If you study them take one page at a time and become well grounded in the basics.

If you would sit down and draw a rectangle on a piece of 8 1/2 by 11" paper. Then draw small squares inside the table...about 4-8 of them.
That rectangle with the squares inside would be one table.

You can then take that same table that you just drew and create a 2nd rectangle under the first one. That 2nd rectangle is a 2nd table and each table can have a different number of squares inside of it. This should give you an idea of how a layout would proceed.

Regards,
Ed Casey

[mbugbee]

I appreciate your very indepth reply, but I am already well aware of the inner workings of HTML and tables ans css and what not. My question was aimed towards the actual designing of the interface. I use Photoshop and Draw and all the others but there has to be some method to the madness when laying out an interface. People on the CoolHomepages.com board were talking about a grid system that is used in print design and is now making its way to web design. After numerous attempts to get someone to explain it, I finally gave up and came over to this board to seek help...so if anyone knows anything about the "grid system" please point me in the right direction.

Matt

[edcasey]

Oh I see Matt,
Maybe it is the philosphy of the design that you seek. Artists who draw with paint and charcoal...that do landscapes and such, study composition and I have taken classes on the subject myself. Without those classes I wouldn't know much about why a given set of objects should be arranged a certain way.

Regards,
Ed Casey

[mbugbee]

Thanks brutha man, I hope my last reply didnt come off as harsh I just didnt want to give people the idea that I have no clue what Im doing!

Matt

[Jen Worden]

The grid system defined here :

When the edges of objects line up, they create continuation in a design. In graphic design, the artist uses the structure of the grid system to help achieve this effect. Horizontal and vertical lines are assembled, on a page or computer monitor, to form a framework (a foundation) that will be used on all subsequent pages that relate to the main topic. The resulting space and overall design is consistent and orderly. Still, a great amount of variety is possible within the grid’s structure.

Master pages and templates (used in many desktop publishing programs), are used to create grids. Accomplishing visual unity through the application of grids and margins are common techniques used by magazines and newspapers.

This system develops an underlying structure for text and graphics. Over time, the viewer becomes accustomed to the appearance of a particular lay out and immediately recognizes the source. In many respects, this simple device helps to create an identity for a publication.

<font size="-1">Source : http://cg1.ccsn.nevada.edu/diamond/e...ptereleven.htm</font>

The inventor was Josef Müller-Brockmann in the '30s and his book, Grid Systems in Graphic Design: A Visual Communications Manual is still considered essential reading for the publishing set.

Finally, an easy-to-follow primer - and probably what you were looking for, Matt - read Grids: Flexible Options.

Even though I have multiple tools available to me, I still find that my best work comes from sketching on paper - graph paper [img]/infopop/emoticons/icon_wink.gif[/img]. From there, I move into Photoshop, slice'n'dice in Image Ready and then into Homesite for final code tweaking.

I'm in the process of trying to integrate Dreamweaver into this muddle - but, so far, haven't relied on it heavily.

Hope this is what you were looking for!

cfn ... Jen
Jen Worden
Web Developer
www.meadoworks.com

[mbugbee]

That was right on the mark...thanks Jen!
I have almost the same process as you except I have never put a pen to paper before hitting photoshop, that may be the source of my hang-ups. I then slice and dice then its off to HomeSite, the worlds greatest HTML editor! I too have tried to throw Dreamweaver in the mix but can't stand the way it has the nerve to change my preexisting code! The one good thing that I have found about Dreamweaver are it's DHTML tools...simply amazing, combined with the fact that you can download extensions and what not you can add alot of cool, cross-browser layer effects to your presentation, for which I gladly over look Dreamweaver changing my code!

Thanks again and I hope I can be of assistance to you in the future

Matt

[Jen Worden]

No problem, Matt!

+1 on DW's DHTML. God help me if I ever had to hand code that. Reminds me of the early days, doing image maps. Ack!

I've recently heard of another interesting use for Dreamweaver using Templates/Library items in wire frames.

Essentially, you create blocks that represent graphics - ie. type in "Logo goes here" - create all required elements - navigation, mission statements, pics etc. - and move them around until you have a cohesive layout. Update the library items when you get the permanent images, then update the Template. This allows multiple people (particularly those filling in content) to work during the design process rather than after.

Sounds like it might be a way of keeping the creative juices flowing without getting bogged down in "I want 6 nav links, not 4".

I'll let you know how it goes!

cfn ... Jen
Jen Worden
Web Developer
www.meadoworks.com

[mbugbee]

Please do keep me informed on your progress with DW. It show great promise to become a designers best friend but because I started out as a coder I just hate it changing the formating of my code, as I have already bitched about in arlier posts. But I am very excited about this program and what it holds for designers in the future.