Mar 31
One of our latest projects just went live!
2005 at 04.46 am posted by Veerle
Maybe you remember my Illustrator tutorial about freshening up bad source material that I did a while ago. It’s my pleasure to show you the final result because the website went live a few days ago. The project is for patients who suffer from Multiple Sclerosis and want to find out more about the disease and its treatment.
It’s a site that contains a lot of text (in Dutch) but with the power of CSS we tried to make it as engaging as possible. A few examples of graphics that had an overhaul are found here and here. In this project we had accessibility on our mind most of the time and I think the end result isn’t that bad. There is always room for improvement but this is our best effort yet.
58served
1
It has become a very nice, clean site. My compliments!
2
Nice work Veerle - very slick!
3
Nice job ! Clean, crisp and easy to use. What more could one ask for ? Kudos.
4
A nice & clean indeed.
It’s good to see you make improvements with every new project. Keep up the good work !
5
Very nice indeed.
Some of the gradients look a little choppy, but not enough to make a difference. Then again, I don’t have this computer running on the most colors. The coding’s pretty extensive. Another great job again.
6
Very pretty. It shows respect towards the visitors.
7
Simple. Very functional. Brilliant....
Congratulations.
8
Veerle,
Beautiful work. There’s some very cool innovation going on - I particularly like the roll over effect on the images on the home page - very slideshowPro (in the best possible way).
Would you mind sharing with us how long you worked on this project? I’m interested to get a sense of the development cycles various designers experience.
9
Yep, very nice, and very ‘you’.
The site is a very text orientated one and I like the way you have done a different homepage, kind of like a splash screen, and also kept it usable with the stripped down menu. I remember when websites always used to have some nice photoshop imagery and a ‘Enter’ link. I think you have taken this ‘nicety’ and turned it into something useful.
Splash screens always seem to be more about design/layout than text content and I like this, as long as it is done properly, because I think it helps lead the user into the site. Otherwise you run the risk of bombarding the user with a mass of content and illiciting a ‘where do I begin’ feeling.
10
lovely - two thumbs up!
11
my two cents, take it or leave it, but the first thing I thought when I saw the logo was it looked pornographic. Maybe its because the Arlington Pediatric Center logo ruckus happened so recently.
12
Chris T, I second that notion. I read this post in RSS, noting “new website… something about MS...” When I clicked through the link and saw the logo… Let’s say I did a double-take.
Maybe it can be chalked up to cultural differences. The rest of the project looks just awesome.
13
Chris and Questionable: If you start to see porno in this then I would recommend turning off your computer and find yourself a date now! ;-)
14
I just noticed that the fill spaces inside the logo spells out MS. I guess it looks a lot better. I was wondering the significance of two people in that position, and how it was relevant at all to MS. At first I thought of a human chair, I dunno.
again, good job and keep up the good work. I would also like to know how long it took to do. and I know it’s kind of rude, but how much do you usually charge for your work? I just started my own web design company, so I’ve been trying to find out how other companies work. No need to answer if you don’t want to. my curiosity gets the best of me
15
Wonderful! I love how your designs are peaceful and blend so well.
In RE. accessibility, you might want to to take another look at those alt attributes. “Risicoplaatsen in zittende houding” doesn’t seem to convey the information from the wheelchair picture.
16
Hi,
Inspiring product. Engaging illustrations, and masterful execution of the sub-navigation.
17
Very nice design! But I think you could have left out those little w3c buttons. However, I really like the style!
18
I like the site overall, good job! I have to admit that the logo threw me off...it does look pornographic in nature at first glance.
Question...I noticed that the width is 900 pixels wide, is there a reason for designing at that particular width?
I really enjoy your work and writings.
19
It’s beautiful.
20
Veerle,
No doubt this is fine website. I havent seen the source material the client gave to you. I think we agree that for this sort of clients you can’t use a more colorful palette. And if they gave you permission to do so, it wouldn’t work anyway. I dont like the color of the logo but without that it’s very nice. Easy navigation is the most important thing am i right. mr haerick & mr loosveldt would be proud :) i dont now if you have known them in higro (your bio mentioned an education on that school) i’ve been there too :) anyway keep on the good work :-)
ciao d:me3
21
Veerle, as the others have been saying, a very good looking website! I really like it!
One question: when you say ‘we’ at Duoh, how many are there? Also how many did it take to design the MS website? Just wondering! : )
22
Great design, Veerle.
Interesting logo.
23
Thanks everyone… I wasn’t after compliments but of course they are welcome :-D It was a challenging project to create something beautiful from ‘nothing’ (read ‘not so nice material’).
To avoid confusion, I didn’t create the logo. But I tried to implement it as nice as possible. About the ‘pornographic’ remarks : I don’t agree at all, this is seriously over the top. It’s obvious that people are influenced by the Arlington Pediatric Center logo that has been going around in the blogosphere. It reflects people in a wheelchair, invalid people, you can also see the M and the S in it and the fact that these people are in need of aid/care. The position of the 2 persons is also chosen this way to create the M and the S… And last time I checked this is not how you make love :-D
@Matt Hampel, I guess I should have added all words that are on the picture since they would also give extra information ... You got me there ;-) Unfortunately I have no FTP access to correct this :-(
@Peter Flaschner, it took around 100 hours of work in total.
@Simon Davies, thanks for putting this so nice ;-)
@Zeerus, yes the gradients gave me a bit of a hard time, in some way I could get the transition go more smoothly. Even if I would have used a 256 color gif or jpeg the little choppy effect was still there.
@Marc Kohlbrugge, the site is built with web standards and accessibility in mind. The more people know about it the better the web will be. That’s the intention.
@Timo, the only reason I have is that my client asked me to design the website for a screen resolution of 1024 x 768 (or higher).
@D:Me3, yes I know Loosveldt (layout teacher)… according to him I was his worse student, he always gave me the feeling I couldn’t do anything right.
@Soroush, 3 in total and a regular freelance team we work with. We worked with 2 people on this project.
24
I’d love to read a gradient tutorial from you, or even just some thoughts. Gradients are my greatest weakness :-|
25
Veerle - i second all the kudos given to you. I liek the site because of clean cool simple interface. my only crictism is the logo colour in combination with the background. for me it doesn’t work. not enough contrast. i may change my mind if i view it on a mac which has better colour display. but agian overall it’s a beaut!
26
Very nice work Veerle, but I have 2 remarks:
The logo is not clickable.
The photo on the homepage: wouldn’t it be nicer to change the perspective so that the edge of the building’s wall is vertical?
27
is the site done with a cms such as pM?
28
Yes, gradients are tricky. I haven’t found a program yet that can make them without some type of dithering. I like to use Paint Shop Pro sometimes (came free with a web design class I am taking), and the problem is, it slightly dithers images in every format. I also have Photoshop CS, but that isn’t best either. back onto Paint Shop Pro
The only file type I can save as without dithering is png, and, as you know, that creates some problems for IE users. So basically, I either have crappy looking graphics, or I ignore the idiocy that is Internet Explorer.
Other than that, I like gradients, and combining them to make cool fade effects is always fun. One thing I like doing is putting one gradient as a background, then, use that same gradient flipped for the text fill, so they fade into each other
29
Zeerus: I haven’t tried it, but came across a PHP script to fix PNGs for Internet Explorer: http://koivi.com/ie-png-transparency/
30
Veerle, this site is very very good.
I like sites with lot of text. I don’t understand dutch but it’s just refreshing to click through even though I don’t understand.. I think this is something very very few sites have. Congratulation!
31
About that “pornographic logo” thingie. I second that. I never saw that Arlington Pediatric Center logo. Here in switzerland we have had similar aids prevention poster advertising..
And I have a real wife and we are in love.. :-)
32
I also like the design, I like clean sites.
Veerle, if you don’t mind me asking how long did it take you guys to put the site together?
I’m asking because I’m finding it difficult sometimes to cost sites based on time. Usually, I end up underestimating and getting burnt. And experience with this?
33
@james Kevin: It took about 100 hours in total. In days or weeks it is difficult to say because sometimes there were serious gaps while I was waiting for feedback. Estimating how much a job will cost is always difficult, it took me a while to get the hang of it. Don’t worry I have been burned also in the past and I guess everybody has been down that road ;-)
34
Nice site. I noticed little bug in Opera 7.54 - characters MS from H1 heading are visible on the left margin of logo area. Probably text-indent: -9999px doesn’t work as expected.
35
I thought i was the only one going crazy re:compromising position logo.
At least now I know i’m not. Love the site tho :)
36
very clean site,great job !
my mother works @ that hospital :)
37
Great job Veerle! I like the look & feel… it’s very professionnal!!
38
@Bas: The logo is not clickable because there is a home button there. Personally I don’t see why changing the perspective would improve the photo.
And to close the logo discussion, The only thing I can say Is that most people don’t see a good logo. In my work I have dealt with logos that are 100 times worse then this one. I have no beef with this logo and didn’t had the urge to convince the client that it needs a re-styling.
A logo is bad in my opinion when it totally breaks the message or design feel of the site and that’s not the case. I’m afraid is a bit of sheep thing if one says it the others follow ;-) Maybe I’m different.
The site is not powered by pMachine btw.
39
Check out the logo of A-Style, a company making clothes in Italy. Their logo has a real “sexy” second way of looking at it but in their case, it is voluntary! ;-) Personally, I like the logo… and I know by experience (I did the one of my company) that it is not easy at all to design a good logo for a company (especially for a guy like me who is not a graphical designer)
40
@pat: what “sexy” second way??? (hihi)
@veerle: one small technical question: was there a specific reason there are spans surrounding the next and back links on the information pages? i’m working on a site with next and back floated links like that, and what I did was float the a-tags left and right, give them a certain width, and voila. Is there some browser bug i’m missing?
Very nice site btw. For an information-rich site the design and layout work very well I think.
41
“it is voluntary! ;-) “ oh yeah? how where is it sexy?
42
hi,
first: this is a brilliant design, i really love it.
but: you may test it in opera/win, because i got some problems with the text indents (eg: i see constantly four characters on the left of my screen: “et MS”, which may be the end of “Behandelcentrum voor personen met MS”, and it’s a bit confusing.)
btw, it’s a great design, i truly love your works.
wbw:
attila talpai
43
@Matt Hampel: Thanks for that script Matt. I tried playing with it for a while. It works partially, but it still messes some parts of the image up. Like when you put the official W3C validity logo on a black background, and it isn’t completely transparent. It does that a lot. I have my companies PHP developer working on it to see if he can make it better. Thanks again though.
44
@pat, indeed, you first see the A but then ... it’s a funny twist. ;-) Very obvious which can’t be said about the MS logo.
@Lubos Kmetko and ati, thx for mentioning this. It’s because it is such a long title, a text-indent of even -9999px is not enough. I’ve adjusted the CSS (added a font-size: 14px in the h1 style) and it should be fixed soon in Opera.... problem is I don’t have FTP access so my client needs to upload it (I still see the old CSS).
@Matthijs, you asked: “was there a specific reason there are spans surrounding the next and back links on the information pages?”
Maybe I’m missing something here but how do you float an a tag both left and right? I used a span class .prev to make it float left the .next class sits in a p tag that has a text-align: right.
45
Hey Zeerus, that’s awesome! Would you be willing to release your improved version of the script?
46
@Veerle: well, that answers all of my questions. Could you possibly add a separate line height element to that part of the page where the letters show up. Make it high so the letters are pushed off the page, if you can. Or just change the font color to match the page background.
@Matt: once my PHP developer finishes messing with it I’ll send you an email with the file URL. He should have it by the end of this weekend. I’ve got to check the copyrights on the original first though.
47
Okay, he finished the tinkering, but he couldn’t improve on it. The code just ended up getting a little longer. The same effect was achieved, although the quality of the images seemed to improve. He added something to it that allows the user’s screen brightness and contrast to adjust to the image for optimal viewing. He’s being stingy and decided not to release it.
If he changes his mind I’ll send it to Veerle, and maybe she’ll write an article around it or something
48
Thanks a lot!
49
That wasn’t sarcastic, I must have crossposted. Thanks for trying though.
50
@veerle:
What I mean is that the same effect can be created without the spans, by giving the first a tag a class .prev, the second a tag a class .next, and put something like this:
.prev {
float:left;width:10em;
padding:5px 10px;
}
.next {
float:right;width:10em;
text-align:right;
padding:5px 10px;
}
in the styles. It seems to work. At maxdesign it’s done with a list http://maxdesign.com.au/presentation/butterfly/index15.htm
I’m not trying to nitpick, it’s just that i was wondering if the spans are necessary, and that there’s some problem I’m not aware of with the method I describe.
51
@Matthijs, that’s very interesting. It’s certainly not nitpicking at all if people share their experiences :-) Only criticizing without any constructive basis is what I like less. And no, there isn’t a particular reason, the span is there because I thought this was the only way of doing this. Both techniques you are suggesting are better (cleaner) solutions then mine. I’ll keep these tips in mind for future projects, thanks a lot for sharing this here.
52
thanx for your answer Veerle. I’m learning more about css every day, and certainly looking at how websites are coded and at the methods being used helps a lot. it’s all these little things one cannot learn from a book.
Anyway, really appreciate you sharing all this with us. Now I have to get a copy of illustrator and start on those illustrator tutorials of yours ;)
53
Browsing through the site I found a little “bug”. I you open this page you will see the “Nieuws” element, in the left bar, floating on top of some other element.
The good is that it is a very clean and minimalistic site, the way it should be. It is very well structured and browsable in even a text based web browser (e.g. lynx). Was that a recuirement or was it something you got for free?
54
Hi Veerle,
I was interested too in this discussion about your new site.
I looked at it, and thought it was very nicely constructed, and just wanted to add a couple of things:
The accessibility buttons at the bottom left on your pages are kind of a neat idea, because here people are very aware now of trying to make their web pages Section 508 compliant and accessible for people with disabilities. It is good that you include these for that reason, to make other web designers more aware of the need, and also since it is a medicatl site for Multiple Sclerosis, so it is very appropriate for that reason as well.
I am trying to learn more about CSS, too, so will have to look more at your code. I just took a class this week, and there is a lot to learn on CSS, so that is a big accomplishment to take that on and construct your whole site with it. It seems to be the way of the future. Here is a site recommendation that people here use a lot on CSS tutorials: www.lynda.com Don’t know if you already know that site, but it is a good one for online learning.
Also, regarding the logo - I could see right away that the logo was supposed to represent the M and S in Multiple Sclerosis, so as far as logos go, that is what a logo should do, and this one does it very nicely, using the abstract people figures. I guess that that is the mark of a good logo, one that can say a lot or represent what it is supposed to, in an abstract, simple, or symbolic way. I like the logo. If you ever decide to do a tutorial on your site - you should do one on Logo Design - best practices.
Although I was curious about the color scheme - why you chose the dark red - was it to make it show up well on the light background? Or was it because that is what your client wanted. Or did you and your design firm suggest the colors? I didn’t know if it was because the Medical organization wanted simple conservative colors, or if you just thought they would be appropriate.
Here I think that people use a lot of color, less conservatively, so that I thought was more unusual. I think you could have used more color, and still the site would have the nice, clean look and functionality!
well, I guess I am going back to watching the T.V. coverage on the Pope in Vatican City.
Have a good weekend.
_ Jackie
55
@HugoBoss, thanks for reporting the bug. I have fixed this. My client has to upload the styles again (since I have no FTP access).
“It is very well structured and browsable in even a text based web browser (e.g. lynx). Was that a requirement or was it something you got for free?
No it was no requirement, we just find that this site requires this. I also try to do the same for each site we create from now on (since I use CSS).
@Jackie, thanks for the enlightening comment and for the link, I didn’t know this one ;-) About the logo. This, and 4 pictures (except for the ‘ugly’ scanned illustrations) is all we got to start from to make a design. The color of the logo was already set by the client (we didn’t design it), we were obligated to use that color. At first I used grey, in different shades. The client didn’t really liked that idea, he wanted some color. For me it seems that this kind of green gave the best result. I didn’t want to use much color for the site because nothing matched with the logo. I think it makes the logo stand out more. Also first I used nice royalty free images which made the look very ‘modern’ but the client preferred to have their own images: the swimming pool, the garden and the building. I’ve used a few smaller stock images in the underlying pages, they all have a bit of ‘green glow’ which I like. To achieve the same color effect I use the ‘Match Color’ feature in Photoshop CS (Image > Adjustments > Match Color), a real God’s gift ;-)
56
Hi Veerle,
Thanks for replying and for the explanation about your colors. I thought the pictures you used that they gave you for the front page were one of the best features of the site.
I guess that clients are often hard to please, but I think the green color you chose wasn’t bad at all for the background. I am also dealing with a client that has a medical - orthopaedic doctors’ site. Their logo is very bland-looking. It is an image of a runner, in a dark burgundy or maroon color. It’s not too bad, but just a little boring-looking, so I tried to enhance it by placing colored ovals behind it, since that shape worked with it. At first they wanted light colors for their site, so I tried to use a green, teal and lighter blue. Then they decided that they didn’t like that as it was too bright, and wanted to go with darker colors like navy and burgundy (with some gray) to incorporate the logo. I guess this makes sense, but it is hard to work with things when you are just starting with the logo and it is set in one color. I asked them about getting it redone in a different color, but that option was too expensive. Oh, well. I think that pictures help though, to make things look better. I also used some royalty-free pictures, since they didn’t have any except for some of their doctors.
57
I like the site (I don’t like the logo though ;) ) I’m totally in awe of your work, and you are a great inspiration.
And this site also made me realise how pretty dutch is in writing. What is the type you used for the headlines?
Thank you for sharing your work! It’s a great help. Hey, I’m out of my lurking-box :D
58
@niinis, I’ve used Clearface Gothic Light (from Adobe).