Creativebits.org

an All Creative World site
natobasso's picture
3953 pencils

HealthLine Systems, Inc. New Website

Creative brief: Improve navigation and design of existing corporate site. Make information easier to find, especially for current paying clients (Help Desks).

HealthLine makes online credentialing software (look it up on wikipedia! ha ha) and is near the top of the industry, right below several big, publicly traded companies. So the industry is tech/software.

I worked on this site off an on, by myself, for about 11 months and it's finally live! View it here live: http://www.healthlinesystems.com

I designed the site using HTML and CSS in the asp.net framework (2.0) and with some C# codebehinds. Yes, I did this all on a PC. Shock Horror! :)

Please let me know what you think. I'm sure some of you are itching to get a crack at my work since I'm so available for critiquing other's stuff. :) I'm looking forward to your perspectives on this.

Commenting on this Image is closed.

Leaky Penny's picture
2616 pencils

But please drop the scrolling banner! I don't really see the need for the "Top" button at the end of shorter paragraphs. The lime green of the hover states stands out a little too much, I'd do it with a blue like the site itself, with white text. I like the contrast between the blue and orange though.
The gradients look good IMO, they add a little texture to the page that is welcome.

All in all I like it, and it's very professional looking.

Leaky Penny
Aka Artfiend Part Deux
www.leakypenny.com

Leaky Penny
Check out what I've been up to lately!
http://petersonjoseph.com

I'm going to print it out and eat it.

-Unknown Artist

natobasso's picture
3953 pencils

Ha ha, agreed about the banner, but it's the one thing my boss made me put in the site. The rest is pretty much me, for better or worse.

I'll investigate the link color change; it's easy to do with css. Love css. Thanks for checking it out.

----
Powerpoint is not a design application

KellyR's picture
525 pencils

Overall, very clean and nice.

My nitpicks: I'm not digging the blue text and logo on the grey background. If it were me, I'd just drop the text and logo out to a white color. Not too sure what it is that's bothering my eyes about the blue on grey though... it it's like one of those contrasts that if my eyes were really tired, I could see that logo and text wobbling around on the background (I get the same thing when I look at a bright turquoise blue placed on top of a bright orange-red or pure red background, for instance).

Same thing with the grey gradient stroke around the "echocredentialing.com" logo... I think it starts to blend in too much with the color of that green circular logo.

I think the grey, green, blue and orange are all right and compliment each other very well, just not when some of them are on top of each other.

I also agree the lime-green in the drop-down menus just looks out of place with the more toned-back greens you see in the logo and that grassy looking banner. I'd maybe sample the green from that "echocredentialing.com" logo and try that out as the background in the drop down menu highlights instead.

Any reason in particular for switching to a serif font for the orange sub-header?

I sound like I had a laundry list of things I'd change, but really, it's overall very pleasing to the eyes. Nice balance and color palette.

Thanks for sharing! :)

natobasso's picture
3953 pencils

Not at all, I actually agree with a lot of what you're saying. I think I had a lot of subtle clashes in the design along the way that had to be resolved and I may have erred on the side of bland rather than contrast. Good points all.

I'm contemplating changing that sharp green to a mellower one. It's an easy fix thanks to CSS.

I have had more than one comment that the blue in the header is hard to read. I fixed it in the footer by making the gray lighter. Maybe I should do that in the header as well.

As for the serif font, I wanted to not have all sans serif fonts and also wanted those h2 headlines to be legible. The h1's I have as big, bold serifs for display purposes. Maybe I'm breaking my rule of too many fonts though?

Thanks for the perspective!

----
Powerpoint is not a design application

alissa's picture
65 pencils

I think it looks great. One thing I might think about is the type size of the text at the bottom. Maybe it's just my mac, but it looks pretty small—my 21-year-old eyes could barely read it, and I have a feeling that your audience is a bit older.
Besides that (and the required scrolling banner), awesome job!

natobasso's picture
3953 pencils

Thanks!

You wouldn't believe how much I've agonized over font sizing. I am using 80% and 1em for regular text, .75 for footnote text and it looks great in IE but tiny in FF. It's either too large or too small -- maybe there's a better way?

Definitely an older crowd, credentialing specialists. They are usually found in the admin offices at hospitals. :)

----
Powerpoint is not a design application

alissa's picture
65 pencils

What a pain in the butt. If only we didn't have to worry about IE.
Being as your audience is an older crowd, it'd probably be better to err on the larger side... Good luck to you!

jchromatic's picture
1 pencil

natobasso,

Good work on the site. :) Everyone else covered the big things, but I wanted to echo two things in particular, and add one myself.

As far as functionality goes, the navigation/sidebar/footer text is way too hard to read, especially in FF. I think the current size that you have for the main text now should be the size for the footer/nav, and bump up the size of the main text itself entirely. I do notice that for some reason, it's much smaller in FF, so you may have to include IE specific rules in your CSS to compensate.

The highlight on the nav is also a bit bright. I don't mind the color itself but it does stand out in a way that doesn't compliment the rest of what you're trying to do. Perhaps you could mellow it out like you said, so it matches the shade of green in the logo more?

Lastly, I was just wondering about the curved inset on the bottom of the masthead and nav bar. I know it's centered, but because the elements aren't symmetrical, it looks off-balance. Maybe if you also had the nav centered or right-aligned to balance out the logo? Just a thought, and this last one is just my personal taste in design. But the fonts for sure have to get bigger to become readable. You did a great job on the site overall though, I clicked on random pages and didn't find anything wrong. :)

natobasso's picture
3953 pencils

Thanks for your comments jHouse! Taken all to heart.

1. Descenders are set
2. FF and IE handle this top spacing differently. I'm going to add this to my "bug list" for the site. It's bugged me since I completed the actual layout and haven't had time to fix.
3. I grabbed code from dynamic drive and tried to do rollovers for the buttons but it just didn't work. Any suggestions? I updated the link color to the site blue, background site gray e1e1d7.

Great critiques all!
----
Powerpoint is not a design application

mbennett2's picture
425 pencils

All of your rollovers and drop downs can be done using any number of pure css options, which would help you in several ways, not the least of which being eliminating that large chunk of code in your html that deals with the existing dropdowns.

I think you could really benefit from putting some type of a background color or image behind your page. It seems really lifeless to me. It would also help to define the user area. Right now, the content stops short (in the home field) and there is an awkward gap below it before you get to the header. Adding a bit more definition might help that. www.valleywateralliance.com is a site I did a while back, (previously posted here), which comes to mind as a good example because of a similar color scheme.

Also, you have a lot of artifacts on your images. I would suggest saving them as higher quality. Especially around the logo. Lots of fuzzies.

Edit: One last thing, your menu bar has gaps between the images on Safari and Firefox on my computer. I am not sure if that is a glitch or done on purpose. Just letting you know.

natobasso's picture
3953 pencils

Good ideas all.

For the navigation: I won't have time for a few months to re do it, but when I do I'm going to make it more css based and text based as it's less bandwidth using and quicker. Easier to code too.

Agreed on the "floaty-ness" of the site. In a way I like it, but also I see most sites have defined areas of content/no content. Ie. CreativeBits... :) I'll check out your link.

The gap was a thorn in my side and it's not intentional. Had to use a * hack in IE to get it working since IE is helpful and NOT at teh same time. I wish everyone would just adhere to the same standards?!

Artifacts are prob from the blend around the letters. I'm rethinking this as well as a design update.

As always, thoughtful comments mbennett!

----
Powerpoint is not a design application

mbennett2's picture
425 pencils

I also noticed that your "help desks" link is stuck in a hover state on all pages that I clicked on. At first I assumed it was a page indicator, but if it is, then the other page indicators are faulty as well (i.e. "site map" link on the site map page). Hope you understand that.

On the sitemap page, you have a bunch of links in the middle of the page. You need to change the hover state of the text to white like the rest of the site. Right now the just disappear into the background hover color. Also, "Ads" at the bottom of that set of links is black, and the rest of the page is blue.

natobasso's picture
3953 pencils

Yep, a lot gets missed when an entire corporation's website is entrusted to one person. :) Good catches all (scribbling them on my list right now!) I do understand what you mean about the sitemap page. It's an xml file formatted to an asp control and styled with css. The css was a bit tricky so I have to revisit that.

Help Desks is supposed to be that way because it matches the old site's state...users have come to expect the look and position of that link.

Again, thanks for the sharp eye.

----
Powerpoint is not a design application

Leaky Penny's picture
2616 pencils

Ship it out! :P

Leaky Penny
Aka Artfiend Part Deux
www.leakypenny.com

Leaky Penny
Check out what I've been up to lately!
http://petersonjoseph.com

I'm going to print it out and eat it.

-Unknown Artist

natobasso's picture
3953 pencils

Oh it's live already. :)

----
Powerpoint is not a design application

Creativebits is a blog about creativity, design and Macs. We also have a critique section where you can post your work to get opinions and a forum to discuss any design related topics.

Recommend us on Google

Latest critique

Marketplace