What is Your Design Process BEFORE Coding?

should be:

So, so, so many things are wrong with slicing. The spaces are (by default) made with an image, which is absolutely pointless, there are always tonnes of unneeded <td>s and <tr>s, the amount of code is just....sad. The images are much bigger than they need to be, often using images instead of background colours, or tileable images. Won't work well if you use a screenreader, or with images disabled. For users with slower connections, it means a long time waiting, resulting in frustration and people leaving to use accessible sites.

Using Fireworks or Photoshop to slice is a gauranteed way to get you laughed right out of a job.

 

I always get a template from oswd.org then spend a few days customizing it to suit my needs and in the end it looks completely different from the onwd template so I can remove the links.

 

I would hope so, but judging by the sites (the newer sites) I see out there, this is still considered a valid technique by too many. People are still getting hired to slice and dice.

 

I generally consider starting with anything LESS than the CONTENT that's going into the site a total miserable /FAIL/ - Layout/design shouldn't even HAPPEN until you've got the content in code marked up semantically. Then and ONLY THEN do you use CSS to apply/create the layout, then and ONLY THEN do you boot up the goof assed paint program to create the presentational images to hang on the layout with CSS, and finally implement javascript for any behaviors that simply don't exist otherwise.

People do not visit websites for the goof assed graphical borders and banners. They visit websites for the CONTENT - as such the content should be dealt with FIRST. Designing a layout before you even have content is putting the cart before the horse, and usually results in the content being shoe-horned into a layout that results in piss poor navigation. Get the content in there in order with sensible division of categories with proper headings, then apply your styling to create the layout.

Starting with a psd or other image is a waste of time and effort that usually results, as Stomme Poes noted, in poorly coded websites. This gets worse when you get FAT BLOATED CRAP with the brand name 'adobe' on it involved in the process of doing ANYTHING that might produce code. Fireworks and Dreamweaver - the fast track to /FAIL/... Only way you could /FAIL/ faster would be to break out Frontpage.

Let's use kangaroored's first page in his footer as an example: spacer.gifs - what is this 1997? Entire TR row of nothing but spacer.gif's - total miserable /FAIL/ - that STUPID MALFING mm_swap routine, made of /fail/ before it even starts.

 

Well, now, you know that a lot of designers aren't given content to start with. The boss of some company says, I want a website, what can you do? And so you are indeed starting with, I dunno, a really vague idea for a corporate site, colours, and the logo. And the boss often decides WHO will build his site based on the mock-up, not the content... so you get a PSD with Lorem Ipsem instead.

 

So they ask for a website and you give them a PSD?

So many people on here work with PSD's as websites.

I find it much easier to actually put all of the divs in place so you have the structure, then once I like how the page will be laid out I can start adding images here and then, backgrounds and then once I have this I will sort out the font and decide what font I will be using

 

That is a joke right?

It only has about 402 errors found by the W3C Validator. Nice.

It takes ages to load!

It takes 2 minutes to make an image and slice it.

The 80's just called and they asked for their website back.

 

I personally don't, as first I'm usually rewriting old websites so I can just copy the existing content, but many others do, yes. And of course we can also be talking about two different kinds of "designers"-- some people ONLY do the PSD, while others do only the code or both. And there are people who don't want to do the work of building in HTML and CSS several designs so that management can pick one.

Remember a company who does not work with websites cannot tell if they are getting a good product or not. A corporate boss often only wants to know if the design fits with the company. Based on only a PSD and some vague ideas, he may say "Yes" and afterwards he decides if it still looks good once it's on his computer.

Me, if I were working for freelance or making sites for other companies, I'd rather ASK for the psd and make for them the site-- it guarentees that the site fits the corporate image and generally fits what they expected, while I only have to worry about how it's built and works. If I had a client tell me they have NO friggin clue what they want it to look like, I'd get kinda skittish because I don't want to necessarily waste my time making either a bunch of mockups in GIMP OR a bunch of html templates.


Instead, I draw on a napkin, do a bit of Crayola marker here and there, and write in the margins what things do. Paper is cheap, quick, and can get everyone on the same page pretty fast before you start spending major time on a design. Kangaroobin is right about that.

 

You ask the same question you would selling burgers at the King - "What do you want on it?"

If you aren't talking about what's going on a page before slapping together a layout with the client, you're already starting out on the wrong foot. You ask their marketing department for copy, you ask their existing design/graphics department for their print media source files... You gather materiels from the company called "CONTENT" before you even THINK about some goofy graphics.

Hell, most of the time if you mimick their existing brochures they're happier than a pig in slop... or the outside of thier building...

But then, since appearance is ENTIRELY done at the CSS level, you should be able to reskin the entire site with minor CSS modifications without even touching the HTML - which is why getting it PROPERLY done and out of the way FIRST is what I consider the best approach.

 

^ ideally, yes. I know you'd just throw up your hands and walk out if the client simply didn't have any content (I dunno, I prolly would too), but plenty of people here are willing to start with a PSD instead. Whether it's wrong or not, just like letting dreambeaver do something with slices, doesn't seem to be stopping anyone.

 

I wouldn't even bother with a PSD or layout until you have got past the stage of actually planning the website (i.e. navigation & flow). The fanciest design/layout is wasted until then. Ditto for building for the 'here & now'.... build for what they might want you to add on later. So the type of content, rather than the immediate amount of content, would be the primary concern. Design/layout is the very last chapter of the book.

 

Much of this debate depends entirely on whether you are a designer or a developer. It is quite obvious to a designer that they begin graphically to build a layout. It is by the same token quite obvious to the developer that you shouldn't think about graphics until a good code base is established.

Needless to say, great websites have been designed using both methods. I am mindful of content when I begin to develop but I tend to let the design dictate the layout and therefor start with Fireworks to provide a base by which to begin markup. This is the most reliable way for my brain to process the job.

Part of what's so discouraging on these boards is that instead of debating over whether or not to implement standards (which is a useful dialog) it usually becomes an arguement for how to work (which is only useful for pissing people off). If it is obvious to everyone that an html export from Fireworks does not give you standards based code, then it is ok to dismiss it as a tactic but why beat people over the head about what methods or tools they use to get the same results you do?

Silly....

 

So very true. The structure of the site, and every page and its content must determined before there is any point to graphic design. Putting graphics before planning is analogous to choosing the furniture before knowing whether it's going into a narrow shotgun design or a sprawling ranch. It would be asinine to build the house to fit the furniture.

Needless to say, the only way a commercial site built around the graphic design can be great is serendipitously.

A site that is effective will be planned right down to the structure of the site, wide, deeply ensiled or somewhere in between, the content that will go on each page to meet the users' needs and the company's goals, the structure of the global navigation, the local navigation and the contextual navigation that best aids in helping the user find his way, the structure of each page to create a natural order for the eye to scan and bunches more.

All the design work is based on the discovery process. The developer must know about the customers, the company, the industry and anything else that will affect the site. The graphic designer is a part of this discovery process, concerning herself heavily with the branding of the company and all its parts. As structures become more concrete, the designer can start applying her skills to adding the company look and feel to the pages with color, images and fonts. More importantly, she will increase affordance. To the extent that the graphic design enhances the user experience, it's successful. To the extent it does not enhance the user experience, it is a failure.

The poorly architected site cannot be saved by graphic design, no matter how wonderful. A bad graphic design can destroy even the best architected site. A well architected site with no graphic artistry at all is still a well designed site.

cheers,

gary

 

My point wasn't so much that the graphic elements dominate the design process. If you read my post detailing the design process I develop the site entirely, including the user experience and content flow in a graphical medium. I find this is a more rapid way to sketch the idea prior to coding the site. It is not uncommon to have customers ask for several design proposals prior to commiting to development. If I were to fully code the layout for every one of these proposals I would be spending more time and achieving basically the same result.

Again this is a subjective debate. What's works best in your brain is not always what works for others....

 

im new at design so im soaking all this up lol

 

See, for me doign different proposals is FASTER since I'm not spending time dicking with dragging boxes around, and instead can just type in my widths, switch the float orders around and be done with it.

You find out what goes on the page (even if it's just a general), you do the semantic markup for the content (even if it's just test content) - and you do four or five different layouts in a flat color with no graphics... Then you show the layouts (none of which should be more than 7k of CSS for just the template) to the client, along with some graphics based on their product line/brochures/whatever the site is about, and discuss. I can usually do this in under a day for four layouts. THEN you start hanging the graphics/colors they approve on the layout, send it and get final confirmation. This approach also helps bring the customer into the process making them feel like they have more say.

... and if they say they want to swap column orders, or change the header placement, menu placement, what have you - that's changing a few lines of CSS instead of cut/paste/pray to god the grid snap lines up where you want or worse, sit there dicking with it trying to get the pixels to line up, dicking around with layer merging/splitting, etc, etc.

... AND the customer can see it in the fonts of an actual browser with actual normal rendering, instead of the rendering of a paint program which does jack for 'accurate' font sizes.... AND I can present screencaps in 'large fonts' and 'small fonts', AND show the dynamic layout at multiple resolutions - since fixed layout is also made of /FAIL/

 

You obviously have a strong opinion. I don't care enough to argue with you about it......

I'll do it my way, you do it yours.....

 

So at the end of the day you are not a web designer if you just make a PSD

 

I did read your post. My comments stand.

:shrug: Maybe I do a better job in the discovery process than you. My (potential) clients know that graphic design can't even be guessed at, much less implemented, until the site's architecture has been determined; and site architecture is beyond the purview of the graphic designer.

No, it's quite objective. Graphic design is an enhancement layer on top of the page's structure, and structure belongs in the realm of the information architect. To fit the structure to the design, is to ensure a less than optimal solution. I don't object to a visual approach, but at the structural design level, these are Crayola on Kraft paper sketches, "with circles and arrows and a paragraph on the back of each one[1]", and are not even remotely for proposals to the client.

gary

[1] With apologies to Arlo Guthrie.

 

Let us all bow to the majesty of kk5st. He most assuredly knows the one single way in which web design can be approached and deserves our utmost respect and attention.