Printable View
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
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
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
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
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
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
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
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
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
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.
Hi,
I would like to contribute just a few lines to this interesting thread.
I usually start my layouts for websites away from the computer. (and sometimes I make simple mockups using a drawing or painting app, such as CorelDraw or PaintShop Pro 4)
A good way to organize the design is using a "hidden" grid structure, let's say, divide a typical screen (800 px wide) in, say, ten columns, and use them to organize your layout. You can merge the basic columns, etc.
Once I have a basic idea, I use grid paper (it's better to use "technical" paper) since you can work more accurately.
Then I work out which table structure will be needed to place the pages' elements.
Finally, I recreate the structure and add the content in the html/site editors (by the way, it's Fusion, Homesite and 1stPage 2000 at home, and Dreamweaver at the office.)
You can go the easy way -- put the elements in layers (or "layout boxes" in Fusion), and then reconstruct the page using tables. Both programs will do it automatically for you, but the code tends to be over-inflated.
Other designers use a mockup image, then autoslice it, and often they get a structure that falls to pieces when you resize the font in the browser!
These are good reasons for a simpler hands-on-html approach!
My own sites are http://www.typephases.com,
http://www.mundofree.com and http://pagina.de/vigital
Best to all,
Joan
"At some point, if you continue to design sites you will have to know HTML"
-----------------------------------------
I must disagree here ... I don't think one 'needs' to know a scrap of actual coding to make good webpages. I suppose it can't hurt but I have no desire or apparent need to learn how to code from scratch.
I work purely with software ( PhotoImpact6, XaraX , Namo Web Editor4, Swish and others ). With PI6 I can slice a design I make into a page with table data and image slices already set. I can make javascript rollovers with WE4. I can open exact sized windows with WE4 (etc...etc). I don't know any real html and couldn't make a page with notepad at all ... but why bother when there is software that does it so fast and easy.
Apart from some bizarre Netscape problems, my sites don't have any real problems (that I have found) and I'm learning what not to use that won't work right with Netscape.
David K
www.dkingdesign.com
Hi David
<BLOCKQUOTE><font size="-1">quote:</font><HR>I don't know any real html and couldn't make a page with notepad at all ... but why bother when there is software that does it so fast and easy.<HR></BLOCKQUOTE>
- <LI>Control over what you're doing and adherence to standards.<LI>Satisfaction.
I challenge you to check your webpages against HTML Tidy or the W3C validation service and deal with the results!
And I'd like to turn your question on its head and ask why bother to learn to use fancy tools when I enjoy working with HTML and create leaner, meaner, standards compliant webpages as a result?
Peter</p>
Peat Stack or Pete's Tack?</p>
It's all what you want to do really. If you enjoy coding by hand, that's great. But people who don't shouldn't think they can't create good sites if they know no html. Likewise there are tons of hand coders who's skills may be lower than your own and can't produce the desired effects or have the control you have with your hand-coding skills. I enjoy using the programs and hand-coding is something I really have no desire to do at all.
I check my sites using Internet Explorer 5.5 and Netscape 4.7 (argg!) and Opera 5.11 and if they work in these without errors then that's fine with me. I usually don't use complicated effects so they should work in most browsers. I know they might have some supposed "errors" but I can't see where they are any problem if they have no observed detrimental effect.
Anyway, I don't wan't to argue but my point is that it is not "needed" to make good web sites (ie... ones that work in the types of browsers which they were designed to work in)... I didn't say you couldn't make good web sites by coding by hand but good sites are made using software-only methods all the time.
As far as "leaner sites" goes, I'm very aware of optimizing my graphics to be as small as possible while looking good as well as trying to make the sites simple. If I use image slices for a design , all of my slices are optimized by eye separately to reduce the page size as much as possible.
I guess each to their own applies but I have no desire to learn to code by hand which would probably take me longer to do than my present methods anyway.
You said
"I challenge you to check your webpages against HTML Tidy or the W3C validation service and deal with the results!"
Below is a list of sites with numerous errors after checking with http://validator.w3.org/
http://www.dkingdesign.com
http://www.xara.com/
http://www.ulead.com/
http://www.adobe.com/
http://www.macromedia.com/
http://hotbot.lycos.com/
http://www.yahoo.com/
http://hotwired.lycos.com/webmonkey/
http://www.creativepro.com/front/home
http://www.dictionary.com/
http://www.ebay.com/
http://www.cnn.com/
http://www.networksolutions.com/
Of course www.opera.com had no errors as they have a goal of adhering to exact standards.
Many of these sites are visited by millions of people daily.
David K
www.dkingdesign.com
Hi again David...
I could point you to some 'Sibelius Scorch' pages on my own site that don't validate, but I could also point the finger at Sibelius for producing a very useful plug-in and supplying templates for webpages with proprietary code! And I already knew that many, many sites out there don't validate (including a number of those you've listed) because I enjoy looking at code and running checkers over it! I don't boycott sites just because their code doesn't validate, but I do believe that if all sites, browsers and authoring software adhered to standards then we wouldn't have problems with things like Netscape 4.7 (which I hate every bit as much as you do!)...
If you're happy with the web being full of things that don't comply with the official standards so be it, but remember that there lies part of your problem with things that don't work. When I can work out how to make my Scorch pages validate I'll have a completely compliant site and I'll be happier with that. I see 'a goal of adhering to exact standards' more as a road to a better web than as an end in itself, and don't see why the web should be any different in this respect than anything else in life for which there are set standards. Just because millions of people visit sites with bloated, proprietary code (oh yes, my 'leaner' comment was directed at code), missing or incorrectly nested tags and myriad other faults that may or may not limit their experience in two or three major browsers doesn't mean that all's well with these sites or the web.
But I don't want to start an argument any more than you do, so I'll leave it at that for now!
Peter</p>
Peat Stack or Pete's Tack?</p>
My reason for not liking them isnt totally because I perfer hand coding, its because programs like those make it easier for people to make bad and I mean REALLY BAD sites. Just look at Geocities and Tripod, 90% of it has to be pages created with one of those programs.
The other thing that irritates me about programs like the ones you have mentioned, is that I have worked very hard to attain a level web development knowledge, to learn the ins and outs of building a page and to get to where I am now, so to go out on the Net and see people who just figured out how to use these brainless products calling themselves web developers and charging for their services is a slap in the face to me. I understand that alot people just use the programs to have fun, and that Im ok with, but when they cross that line and start thinking that just because they know how to work a software program that they can start a web development business, thats when I get pissed.
Matt
The above wasnt directed at anyone person.
thats a fair enough point, but one of the main probs with the web (apart from a zillion "my pet hamster" sites!) is that most of the ppl who 'create' such items have no idea of design and this is their downfall. virtually anyone can learn to use a package and a lot can learn to code but design is something special, something inside, thats what i believe anyhow.
such packages should be thought of as making the lives of the knowledgable (spelling!) easier, rather than teaching the newbie how to produce a "masterpiece" in ten minutes flat. it's a tool, _not_ an answer.
just my bit, thats all. no offence intended to anyone.
p.s. i generally doodle a rough design and then work it through in photoshop, but my brain is working in tables anyhow coz i'm kinda odd like that [img]/infopop/emoticons/icon_smile.gif[/img]
I agree but there are still those who learn a sofware package and think thats it.
heheh, i couldn't agree more, but well.. guess we all have our faults.. [img]/infopop/emoticons/icon_wink.gif[/img]
(or as the great m$ calls them, "features"!)
Well I'm not going to sit here and argue this (except this last time unless something is said which really pisses me off!) .... my initial point was that one doesn't "need" to learn html to make nice websites but since some people have strict opposite opinions I'll drop this useless code issue right here ... it's really pointless trying to argue. I feel if you hand code ... great ... I'm glad ... I have nothing against people doing so to make great websites.
Certain negative things which were said in regard to people using software to make sites ARE taken as a 'slap in the face' to me personally regardless of the last closing statement on that post. Sure some people using this software make not-so-great sites with them but likewise many hand-coders make equally pathetic examples of websites. I don't consider myself to be in either catagory.
"there are still those who learn to hand-code and think thats it"
David King
www.dkingdesign.com
We all know that you attempted to learn how to hand code and it was too much for you so your trying to validate your self by posting needless messages in unrelated topics.
Truth of it is, and any web developer will attest, software solutions are the easy way out. They were never intended to be used in a perfesional manor nor will they if they keep using proprietary code or meesing with preexisting code. Software solutions were developed for people who dont arent developers could make a simple personal site for themselves, not so people, and this time it is directed to you, can make a quick buck without putting out any effort. To be put in real world terms, would you rather have a frozen TV dinner or a fresh home cooked meal.
I believe this quote sums it all up: "You can't polish a terd" In this case the terd refers to sites brainless less manufactured or spit out by software solutions.
I am yet to find a site done completely in software that looks good, without the person who developed it having no prior knowledge of hand coding and all the in's and out's that come with it. I mean face it dude, you must not know a whole lot about the field considering you arent even using web safe colors on your own site.
Matt [img]/infopop/emoticons/icon_smile.gif[/img]
Well, this is getting interesting.
All I can say is that I've seen too many sites on the Web done in FrontPage and similar programs. If FrontPage was meant to be a tool for professional-quality Web pages, it wouldn't be sold for $79 at CompUSA. Same for most any other WYSIWYG tool.
Programs like that were made so that people with no knowledge of computers could post pictures of their kid's second birthday party on the Web so grandma and grandpa in Spokane could print them out on the $99 inkjet and share them with all the other geezers on the tour bus as it heads for the Indian bingo hall. They were not made so that Lizabeth the rude secretary could do the company Web site using font tags that call fonts named FUNSMILES and RAINBOWLETTERS and save the company from having to hire a professional developer.
You get what you pay for. [img]/infopop/emoticons/icon_rolleyes.gif[/img]
Well rather than reply with a series of equally unconfirmed and useless personal attacks about someone's knowledge or degree of effort, I will do the civil thing and step out. Regards to all those who have a positive outlook on things (even those with a different outlook than myself).
David K
www.dkingdesign.com
David, I agree with your last post on this subject. There are ppl who can produce exception work with software tools and those that can without. To be honest, at the end of the day, as long as the result is acceptable (beautiful?) and functional to those concerned, does how it is made really matter? By making something that fits the requirement they have produced the required solution.
I used to hand-script sites, spending many an hour being "picky" about the whole thing. I was then recommended to try dreamweaver by a close friend and after fighting with the concept of it for many an hour, have not put it down since, it's fabulous. I generally design my sites with paper and photoshop, combining this with the power of dreamweaver and my life is so much simpler. Plus, if I want to hand-script parts, I can. All this makes me live life a little easier.
I'd like to end this post by apologising if I upset any member here, it was not my intention at any point.