Designing for the web

Mort · 10 Sep 2007 at 13:49

Hey all

Got asked a question today by someone on the design team at work. She asked if there was anything specific to bear in mind when doing designs for a website.

I said that things wont appear pixel perfect (damn IE!!), plus different form elements look different across multiple browsers. Apart from that I was at a bit of a loss as what to say, as my design skills are pretty low (I am a PHP / CMS specialist), but can anyone offer any decent tips for me to pass on?

I want to make it easier for the design team here to design sites for me to build, which in turn will make the whole process easier for everybody.

Cheers :cool:

SiriusB · 10 Sep 2007 at 13:56

They need to try and keep things simple - as overly complicated graphics/buttons/whatever can make coding the site a nightmare. It's also a good idea for them to keep a note of all the colours being used, as sometimes you can avoid using an image and set the colour through the css.

Having said all that, the designers really need to speak to the poor sod who has to create the website. Afterall, it is him/her who has to turn that design into the finished thing.

Mort · 10 Sep 2007 at 14:06

Couple of good points there nice one

I guess as well as hex colour values, font names, and possible backup fonts would be a good idea too.

And ahha, that poor sod you speak of unfortunatley is me

SiriusB · 10 Sep 2007 at 14:50

And ahha, that poor sod you speak of unfortunatley is me

Oh dear!

Just tell the designers not to be too precise and not get too attached to anything. It's one thing to draw a pretty picture in Photoshop but sometimes it is just to hard or time consuming to recreate some effects in XHTML and CSS. When I create a website I only use Photoshop to do a basic mockup and test colour combos. Most of the fine-detail work and tweaking is done while coding.

Fonts are also important. Designers like fonts. Tell em they can only use what everyone is reasonably expected to have.

If they are dead set on a font for a header or title then you can always use image replacement to put it in [Google throws up plenty of info about image replacement using CSS].

Glaucus · 10 Sep 2007 at 14:53

if it's for a company remember access laws.
also remember not everyone has high res and remember low res on high res screens suck.

Make sure the navigation is simple and standardised throughout the website. Nothing worse than a website you can't find anything on. As they use there artistic license on navigation. Keep it simple and the same as 95% of all over websites.

SiriusB · 10 Sep 2007 at 15:53

AcidHell2 said:
if it's for a company remember access laws.
also remember not everyone has high res and remember low res on high res screens suck.

Make sure the navigation is simple and standardised throughout the website. Nothing worse than a website you can't find anything on. As they use there artistic license on navigation. Keep it simple and the same as 95% of all over websites.

Good points. Just to expand on that, you should find out who your target audience is and tailor the site to their needs. You shouldn't alienate everyone else though!

Have the designers take a look at other companies' websites and see what they have done. Obviously making sure not to outright rip the site off. Take a look at the competition and find what works and what doesn't. Then build on that to make a better site.

All of this kind of stuff should be second nature to designers though, but no harm in reminding them!

Mort · 10 Sep 2007 at 15:59

nice one

thanks again!

yeah my colleague is a perfectly good designer, just has more experience with print, branding, etc and is fairly new to the web side of things. she seems very keen though so just wondered if anyone else in the industry had any good tips

simisker · 10 Sep 2007 at 16:27

Speaking as a professional [la-di-da!] web designer, I'd say the single most important thing a web designer can do is learn both sides of the medium; the aesthetic and the coding.

Creating flat layouts in Photoshop without sufficient knowledge of how these layouts will be coded is akin to, say, creating print work in RGB and hoping/assuming it'll come out okay from the hot end of an offset litho printer. You can't call yourself a competent designer until you consider all aspects of your medium. At least not in my book

It's more long-term advice than short-term advice, I realise, but: tell her to get to know the medium fully if she wants to take this up as a career. I know this is tricky for a lot of graphic designers, as not only are they schooled in the visual, but also they tend to have a brain that leans heavily towards creativity at the cost of the logical bit of brain that's conducive to coding.

Thankfully, there are lots of great books on the subject out there

UTTER_FILTH · 19 Sep 2007 at 10:48

Simisker,

I dont suppose you could recommend any specific books please?

Thanks

Ricky

Sic · 19 Sep 2007 at 10:59

also, remember that you're not designing for 300dpi - more like 72. so don't use dumb fonts, stick to websafe (preferably Georgia because it's my favourite) and don't make them too small, because it'll look 'orrible.

also, design and build the site with blatant disregard for IE6 - act like it doesn't exist. People have to stop using it eventually, why not now?!

SiriusB · 19 Sep 2007 at 18:44

Sic said:
also, remember that you're not designing for 300dpi - more like 72. so don't use dumb fonts, stick to websafe (preferably Georgia because it's my favourite) and don't make them too small, because it'll look 'orrible.

also, design and build the site with blatant disregard for IE6 - act like it doesn't exist. People have to stop using it eventually, why not now?!

IE7 is steadily becoming more popular. According to the W3C - http://www.w3schools.com/browsers/browsers_stats.asp - IE7 makes up a 5th of the browsers used. IE6 is, however, still used by the majority.

Completely disregarding it would alienate over a a third of all browser users.

The best approach is to design your website so it looks and behaves spot on in a compliant browser, such as Firefox, then go back and deal with any IE issues. When IE6 is eventually in the minority you should be able to easily remove any hacks/workarounds you have used.

IE7 still isn't fully compliant to my knowledge so the OP will still need to deal with IE on occassion.

Sic · 19 Sep 2007 at 19:01

IE7 is still a lot easier to deal with - although a complete 'tard at times. I tend to make sites look acceptable in IE6, but not make an amazing amount of effort to make them look exactly right - as long as they function, that's all I really care about. Although it's probably 'incorrect' to do that at such an early stage, I can't stand spending all my time fixing crap in IE, as long as they work.

Eriedor · 19 Sep 2007 at 19:45

Approach I take to IE6 is to use a conditional comment after the style sheet include that includes an extra stylesheet with all hacks for IE6. That way all hacks are centralised and when IE6 dissapears its merely a case of deleting the redundant IE6 stylesheet.

For a designer I would imagine, what resolution the final site is to be coded into is important, especially if the site is going to be proportional to screen size, as that would drastically change how imagery can be used.

allllec · 19 Sep 2007 at 20:42

Probably mentioned above but think about user resolutions.. and uhm. amount and size of images etc. regardless of host its always nice to keep this things to a minimum. if you can avoid using an image and achive what you want in CSS then go for it.

just 2 things that popped into my mind reading your post