Do's and Don'ts for Effective Web Design

Can't really comment on that, considering I have a bias...I am the left brain designer.

Designers and developers have never gotten along, in the four years I have been doing web design there has never been a web design company where there is inner peace between designers and developers.

Both make valid points, but a lot of it is preference. I have seen plenty of websites in my day that have full functionality with little issues in development and it originated from an "image" first. I have seen piss poor developers try to make poor design websites with amazing front/back end work, dynamic and compatibility...but in the end no one cares because it looks like garbage. Also I have seen it vice versa. Someone who is amazing at both programming and design is just not possible, it is like when Micheal Jordan tried to go pro in baseball. You are either a jack of all trades, master of none or you focus on one vertical and really hone your skills.

Inter office communication between the lead designer and senior developer is always interesting to watching it is like two territorial predators fight over a mate. They try to be civil, but I see the underlined hatred....haha.

 

"If you try to "Do your design as you go", you'll find alot of issues along the way."

Code
Code

- client briefing

re-Code
re-Code

- client briefing

re-Code
re-Code

etc etc


When i present...
1 - draw
2 - mockup
3 - psd
...and the final design is aproved, i know (and client knows) what he is getting.

Then i can code.

But hey, this is just me. No intention of changing the world.

And yes, i design templates before coding them, BUT i design them i strict rules and never, ever as a full template. CSS rules aply also in my PSD designs.

Header, left, right, main, bottom or footer are all my friends in PSD design.

 

As opposed to draw, briefing, re-draw, briefing, re-draw, briefing without even producing anything USEFUL?

Much less, how do you deal with the mis-matched fonts from your paint program and production copy, previewing behavior for small(96dpi) and large(120dpi) font settings,
etc. etc. What about the headaches of resizing content areas and spending hours dicking with 'layers' when you could just be slapping four or five lines of CSS in to change a section's appearance?

I guess it comes down to how comfortable you are (or aren't) with the paint program... I can usually produce markup with a CSS layout in less time than sitting there with the paint program fiddling around with trying to line stuff up by hand. Even with snap to grid it's just faster for me to say "margin:4px 8px 24px;" than to sit there dicking with trying to drop the layer box exactly where I want.

... and that's coming from someone who regularly also works designing 2d cutouts for a flowjet and in 3ds max. (though I spend a LOT of time manually moving points by coordinate - which is why to me truespace is a tinkertoy)

 

I don't think Scubita uses dreambeaver, just Photoshop.

Same here. If there's something to be changed in briefing (luckily I have the boss sitting right next to me most of the day; this is a good thing), a simple change in the CSS changes the layout or the look. If there's to be a change in CONTENT there's just not much you can do as a developer except wait until they change the text they want, etc.

If I'm starting on a completely fresh site, the closest thing to a mockup I usually do is draw some boxes on a piece of paper, label them (header, footer, etc), and keep any other ideas like logos just sitting in the back of my mind so I can add sandbags as I go. Heck, the site that's got the two different stylings was diddled on a scrap envelope. So far, it's my best as far as teh pretties/design (ds would disagree with the giant header image taking up too much space but that's why the menu skips to the page header instead : )

This makes sense as far as when you have business clients who only know how they want the site to look and act. They do indeed expect a PSD much of the time (which is too bad, because what they see there isn't what they'll get necessarily). Clients want the good-looking Yugo instead of the trustworthy but plain-looking Toyota.

 

Design is still effective for human visitors. This design and link structure must go hand and hand.

If the design is great and it is friendly for SEs and visitors surely your site is superb.

 

Yea I just threw together a mock up today for a potential client (I am the designer not the coder...there is no code, just a simple template image, no making fun)

Surf Island - Mock Up

 

Hmmm, I started out like you, Lurker. I was asked to work for the company to make their old site not so teh uglie (and whaddaya know, it's still not done a year later as things have changed), so I learned GIMP. I made a mockup, talked about how the menu would be restructured, what a sidebar would have in it, blah blah. But since nothing became of my mockups, I learned HTML and CSS. I ended up changing a lot of things after I learned how a site works.

Another company in the UK I know of has a designer who only does design, and I was talking to the coder about the menu, and he wasn't as up-to-par with all the latest tricks and stuff out there, and he was like, I don't know how to make these funky fancy tabs he's got, and I asked, Did he intend for you to use Sliding Doors on them for text enlargement? And he was like, "no, I haven't heard of that, he just figured I'd fix it somehow."

The designer I think can only be better at what s/he does if they know both the possibilities and the limits of what code can do, how people surf and change screen rez/browser size/fontsize, so that the designer can anticipate problems the coder may run into. If you know a one-colour border is simple code but a multiple-coloured border takes x-more work, bloat, filezise etc then you may be in a better position as a designer to know whether the extra colours are worth it or not, instead of doing the mockup and then hearing from the coder all the hacks and extra's something's created.

 

I agree with this point. It is so disappointing when noobs buy this software but eventually find out that notepad is just as good, if not even better.

 

Notepad is all I have, hahaha.

However internally we use a lot of visual studio software, it has worked excellent for us (a little costly), but allows our applications guys to quickly do things. It also allows for some great team collaboration especially since all five of us are not under one roof. We constantly use our VOIP service to community as well as our visual studio team software to collaborate and communicate to one another when certain files have been changes and or updated.

We are fairly new at ASP.net applications and development (which is the reason we have not advertised our knowledge in it). My development guys have been going to Microsoft held convergences, read up on the latest trends, and more.

However, all I know is the limitations of coding and a novice amount of what the code ajax, jss, etc. can do for my design (whether good or bad, bloated or not). This is a whole that I am currently working on in my design knowledge. Before start my own company, I worked as a web designer for three different major internet marketing firms here in the states. That is where I learned my limitations as well as where I need to improve. I am not afraid of change nor am I afford to admit my short comings, however I never have let that stop me from learning more.

 

A good point of what I was talking about. Those kinda things are incredibly <lie>fun and easy</lie> to code well.

 

That's being polite - with a full on image encoding expert you are going to be LUCKY to bring that page in under 512k from images alone, easily four times what I consider the upper limit. Double nested sides, no obvious height tiling, content layering outside the content area.

It reeks of being done by a designer who knows nothing of code - and any responsible coder is going to tell you "No".

... and your typical irresponsable 'line coder' is going to give you a fat bloated mess a meg in size using 60-80 images while you sit there wondering why the page takes two minutes to download on 3mbps BROADBAND.

 

They are a great visual starting point and a great number of top design firms use them. They depend on designers to come up with these types of ideas, however developers are never happy when it comes to have to work with designers, you made a good point about what I was talking about today with communication between developer and designer.

All my design ideas were discussed prior to development, we only have a few issues with this current layout, which is the reason why we go threw two or three mocks before we come up with a finished model.

Developers can't design and designers can't develop, period. As I said before, you can not be the best of both worlds. If you can't see that then you will loose the unique appeal that helps separate one clients website from another. Ever client in computer parts are all selling the same thing, have a unique/eye catching design, streamlined accessibility, and flawless database can mean the difference between being just another site or being a successful one.

Ever developer wants it "easy" and ever designer wants it to "stand out" it is just the nature of the beasts.

Actually we are looking at just about 80-90k for the home page, and for each side page about 30-40k since it will not have all of the imagery of the home page. Also, there are a few changes that need to be made (that is why it is "mock 1"), you are all so quick to judge...there is a linear order to how we progress through each project, each team does things slightly different.

 

When I come across a page that hard to read I move on.

 

I have some trouble believing that, unless Deathshadow worked his magic on it. Show me the page when its done. Those surfboard links would be physically impossible to do without Javascript (if you wanted the links to follow the shape of the surfboard) - and since for about a week of every month, I browse without images disabled (Most regional Australian internet gets reeeealllllly slow when you download too much, so you do everything you can to make pages load faster) - so I would not be able to see more than half of that. Then you have the older/disabled people who use really big fonts, or don't use CSS/Javascript - so you have to apply "workarounds" for that. Dan Schulz and Deathshadow are the only people I have seen who consistently make their pages/sites ultra accessible to anyone.

In my business (I call it a business, but its really just me and 5 others) - I have 3 coders (one is me), 2 people in charge of the paypal balance/finance stuff and one "designer". When we are presented with a site to make, a coder (not me) and the designer get together to start on the site together. Meaning the coder starts to code the initial template with no images - just a skeleton of the design, making it valid xHTML 1.0 Transitional and coding it reasonably well.

The designer then makes the images and the coder implements them to the page, and makes any modifications he feels is necessary.

Then the design is shown to the client over MSN, if they don't like it, edits to the images and CSS are made (very rarely does the HTML have to be changed). If the client does like the design, the coded version is emailed to me. I clean up the code a bit, as well as the images (implementing sliding doors and other CSS jazz), validate it xHTML strict, then boot in Linux, make sure it works in Konqueror and then implement it into my CMS core, and extend the CMS to the client's needs. I then wait for payment to be sent, then set it all up on the clients server.

If the designers and coders work together, there is no real need for bad things to happen to good coders.

<random>
Once I turn 16 I think I can apply for a trademark and start up a real business, focussing on my real love of scripting and programming.
</random>

 

Bah, I could do that page, but there would be at least one large image (very large), and the header and menu would have to be rather unscalable as far as text and possibly absolutely positioned, which I rather dislike. The photographs would simply be part of the large background image of content container, with the h1 holding the shell image and surf text header, a normal paragraph, both floated left, and a display: block <a> on the right (floated left I think with a large left margin to center it) with enough height and width to cover a wide area around the text-- include a lot of the photograph maybe.

The normal page text could be enlarged, but there's a problem with the cart/etc text; it won't be able to enlarge much. Make it as large as you can get away with then. The surfboard menu would just be a normal menu, a's are floats and the whole surfboard wouldn't be clickable (waste of code, and no way would I use an image map, a fake CSS image map, or any JS on that thing-- just normal links), just a good portion of the area around the imaged text (which will have to be a little trickier than usual to use image replacement since it has to blend well into the background menu image...

Yeah it would be big, I dunno how big, but with a little finagling it could be done as fairly semantic and whatnot.

I gotta say, Lurker, if your guys can pull this one off, they're damn good. I think the design is doable but it will have many many tradeoffs. Some more work than usual will be needed to keep this page accessible.

I'd call it a fun page, but fun as in challenge, not fun as in easy.

 

I think this is pretty much the same "tips" that have been circling the web for a few years now (well..).

 

I could also do that page, but:

Which is no good for us 10kbps people. I'd just exit it if it was over 80kb in total, it took me enough time to load this thread...

 

Dang deathshadow, didn't realize I would actually learn something from this thread.

 

It's too bad there isn't a way to set the download order on a page (or is there?) so that the text and smaller images load first, so people on slower connections can still view the site and scroll etc... when the big image comes, it comes whenever.

 

I am also working on another site (it is a completely fake website) but again for pure fun for design experience and development challenges. Here is my next layout (again it is not done yet), but I enjoy making a new design ever day or two....or when I have some down time.