How do you design?

[Tim Lancaster]

I was wondering how other designers come up with the sites you do. I usually use photoshop and just start designing elements. I thought about sketches on a piece of paper first, but it seems to just take longer than. Any thoughts?

Tim

[brotherhood of LAN]

I design with minimalism. If its of no use to the user, then it goes.

I try to keep the layout uniform, in the interests of easily adding to the site, and keeping it easy on the readers eyes and 'perception' of the navigation. In light of this, there are some templates that have the "usual HTML" that is used from page to page

I also use minimalism because I think my visual designing/drawing skills are immature ;) I try to pick up the "look" of pages that I see and attempt to incorporate their pleasing aspects alongside my design.

Im not to into the programming palaver yet, so Im using some suspect packages to fill in my ignorance while I learn about programming from the bare bones

The only shining factor about my minimalism is that it ranks me high and doesnt cost me a bomb for it :) This approach shouldnt pull too many surprises in regards to costs until I am more confident in the areas of experience that I lack :)

Wide topic, lots to learn

[HyperGeek]

I design on basis of what type of site it will be.

CORPORATE WEB SITES

I go with a more "branded" concept if it's for a product or business... this is most important since your client will be looking to expand their "brand recognition". When you see the Coca-Cola logo without the words in it, you still recognize it as Coke - and not Pepsi. This is what your client will wish to achieve through marketing their brand - and the site can be an big extension of those eyes that get "branded" and recgnize the product or company as an industry leader.

PERSONAL WEB SITES

I usually go completely thematic, keeping in mind three things:

1. Ease of navigation.
2. Content - and lots of it.
3. Aesthetic consistency.

Navigation is important, because you can have all the content in the world, but if the user doesn't have an easy way to access it, it might as well not exist.

Content will keep your user coming back to your site, as well as making them "stick" to your site when they decide to visit.

Aesthetic consistency makes every page on a web site look like it belongs to that web site. Choosing two main colors to design around, and then creating a logo using those colors is a good start. Then you can make it "thematic" by, lets say the site was about pirates, creating a cross-bones and skull bullet, downloading a couple of public domain graphics with priates in them, etc. You will also want to make the tables, ect consistent with the colors you have chosen for you logo - but lighter tones. A good method is to go into Photoshop (or a program like it where you can control the opacity of a color) - throw your colors onto a white background and then make them 50% lighter. This technique makes for a great table BGCOLOR - with the borderline being the same color at 100%.

As for the actual creation of the site - I would suggest making a new template for each site (unless you just want to "design dump" a single template for multiple sites). I would also suggest using a text editor for HTML. WYSIWYG editors throw SO MUCH extraneous code into a single page that it can sometimes quadruple the work that you would do by hand.

EX: I code HTML, VBScript (asp), JavaScript, DHTML, PHP, etc. all by hand in notepad.exe.

My pages come out about 40k LESS than those that Dreamweaver creates - and these are WITH style sheets and dynamic code.

Also, if something craps up, you'll have a better understanding of how to fix it.

I also design in HTML.

I used to be a big fan of drawing out concepts - including designing spreadsheets of database tables for more complicated sites. To be honest with you - drawing and planning this way can be more work than it's worth because you will ALWAYS run into a design issue you overlooked when not using the actual design tools.

I write HTML, keep IE and Netscape 4.5 running, and view the code as I go - tweaking it here and there.

Especially when you decide you want more control over fonts (using CSS) and things of that nature - there's no way you can be SURE of how something will turn out without testing it (unless you're pasting a graphic into the middle of a page and centering it - but even then; did you type the correct SRC of the graphic :) ?)

Be creative. Have fun. Get inspired by looking at good web designs - AND NEVER think you know everything...

Think you mastered tables? Find out what the <TH> tag and COLSPAN attribute are.

You know all there is about the <BODY> tag? Try adjusting margin widths.

Pretty much have basic fonts down... find out what is also MAC compatible - and apply that to an external style sheet using CLASSes to define your fonts faster.

STEVE

[idiotgirl]

I use a program called Ulead PhotoImpact to comp out the elements of a site. But the elements will depend on how the site will be structured and the type of site, my target audience, content flexibility, back-end scripting, etc.

I like Ulead PhotoImpact because it makes it so easy to change a color, a font, move an element, move a menu, etc. that it's nearly brainless. It lets you get a full sized view of how things will relate on the page once you decide what functions they must serve. And it's cheap, too, at around $100. I use it almost daily, right along PhotoShop and other more expensive programs.

When all else fails... an adult beverage may be in order for inspiration.

[lorax]

Adult beverage! With a few of these and only a few hours of sleep I can accomplish amazing feats of brilliance. Of course the next day leaves my creations open to some serious reconsiderations. But hey, the walls of criticism were laid to rest if only for a few hours.

[mivox]

the next day leaves my creations open to some serious reconsiderations

Better to have some material to reconsider than be still staring at the same blank paper or monitor the next day... ;)

[lorax]

Hello mivox,
Your point is well taken. I had an English professor who once told me there are two rules to creating.

(1)Create without criticism and then (2) murder your little darlings.

These words have kept me in good stead for many years. And in case your wondering - "little darlings refers to those lovely little phrases or code snippets that just don't quite belong where you've put them.

And just to stay on top here: IMHO it doesn't really matter what tools you use as long as they allow your mind the freedom to create - that's what really matters.

[grnidone]

I guess I do it differently than everyone: I start by fitting all my topics into an outline.

Then, I take scissors and cut the outline apart and try to figure how different topics link together.

After that, I go to this link [graphicdesign.about.com]and pick out a good color combination. (After all, I don't even dress myself.)

And away I go!

[kingkelly]

For me, i think of it for a few days.. Think on the bus, in my sleep, at the dinner table.. Then i start to sketch out a few rough rough designs of the layout on my little notepad (i need a new one by the way!)

Then me go to FLASH (too cool for photoshop), and cook up some snazzy graphics, mainly the logo first. Then i start on the HTML editor (Claris Homepage 3), and plop al of the pictures and stuff in there!

Snug like a bug in a rug................ ;)

[Filipe]

Not to "sell" you on a product, but my designer would choke and die without ADOBE Illustrator as a design tool.

[visca]

I usually (especially when developing client sites) fire up Corel PhotoPaint 10, go hog wild with making the complete web page design on a 600x500 image area. Then afterwords I work to convert it into a technically functioning web page. Which means cutting up the graphic elements and turning them into icons, etc in the appropriate GIF or JPEG format. When doing that initial picture, I keep in mind the limitations of the platform I am putting it on, typically HTML. So I am thinking how I could construct the correct tables to accomodate the graphics, what the bandwidth requirements of such pictures would be, and whether its feasable to layer background and foreground objects effectively in the HTML version. So it isn't a full blown art extravaganza on the initial image, but rather a way to rapidly explore ideas, while keeping in mind what the final product will need to accomplish.

[pageoneresults]

I've been in the advertising and marketing industry for over 12 years. I've worked on a Mac since 1990 and the PC since 1995.

I've been involved in thousands of design projects from Logos to Brochures to T-Shirt designs.

With my existing clients, its fairly simple to put together their web presence for them. I just take their existing literature and mimic the look and feel from there.

After all the initial consultations on what the site should do, what the message is, and what is in it for the user, then we build.

First thing is to take the graphics, get them into ImageReady and start slicing and dicing, being very careful to name the images appropriately.

Then we export the slices as CSS. I take the CSS and the JS generated by ImageReady and put that into external files.

From there the navigation elements are placed into include files, usually three of them, top, left or right, and bottom. Basically three files that control the entire look and feel of the site.

Once the includes are finished and approved by the client, I start building my <div>'s for content. I'll usually have one main <div> and then other <div>'s where applicable. I'll make one page that I name template and that is all she wrote!

Each time a new page is added, I usually start with the template and work from there. If the page is related to another page on the site, I may start with that page and do a save as and work from that.

Working with this type of structure allows me to build pages very quickly. I could literally put up a 100 optimized pages in a day if the content was provided correctly, probably more if I tried!

Working with Includes, external CSS and JS makes site manageability a breeze.

[nwilson]

Working with Includes, external CSS and JS makes site manageability a breeze.

Agreed. I use PHPLib templates and external css and follow almost the exact '3 files fit all' scenario from page one.

• Main body file, then...
  
• Header
  
• Leftnav
  
• Footer
  

Makes consistency a doddle and you can offer free 'minor alterations' without fear ;)

Nick

[pageoneresults]

> Makes consistency a doddle and you can offer free 'minor alterations' without fear.

How about over the phone?! I wear an over the ear headset, have an 800#, edit live through FP, and have the client refresh while were making the changes. It's all part of the program I offer.

[brotherhood of LAN]

pageone...sounds nice ;)

thats what I am playing around with now...just turning the web site into includes and dynamic pages...all editable with forms.

my new slogan is gonna be "design now, so you dont have to later" :) or something to that extent

[nwilson]

How about over the phone?! I wear an over the ear headset, have an 800#, edit live through FP, and have the client refresh while were making the changes.

Yeah, but my bike's better than yours.

FP: Why?

I just ssh into the account and do it by hand, takes 2mins...

[pageoneresults]

My bike has more gears! ;)

> FP: Why?

I just click the Edit button in IE, enter my username and password, and I'm editing live with FP, all in a matter of seconds. Can't get any quicker than that! You wanna race?

If I need to import graphics, I just utilize the import command and put them right where they belong. Working on T1 here at the office and Cable at home is a definite plus in the real time editing services!

[nwilson]

I like to get stuck into it. I just ssh in from my Linux box and it's as if I'm inside the host machine.

If it's a universal change then I edit the css, or one of the template files and if it's body copy the page itself.

My wife recently took away my skate bike, but I've high hopes for a pair or roller skates this summer!

[ann]

Coffee, or tea, homesite and me. That's how my webpages are born....Good, bad or sideways, they are what they are!

And I love every minute of it :)

Ann