a web design portfolio

karinne · #1 (**permalink**) Jan 6th, 2007, 18:23

This is my web design portfolio. I've rolled it out a few weeks ago. I think it's the best one I've done so far. The only think I'm still not too sure about is the menu. It's plain ... very plain but I'm not sure how to design them.

I would love some opinions on the site. Anything you can think of ...

TIA

Lchad · #2 (**permalink**) Jan 6th, 2007, 19:15

Hi Tia!
Your site looks nice. I love that it's very different from anything I've seen recently. It's easy to navigate. I don't really think the navigation is too plain. I think it's fine with the rest of the design. This site has an "old world" feeling to it.

The only thing I see that I'd like to comment on is a bit of the text. This is being really picky but I think you could improve certain areas. If I may...

Quote:

I'm a 29 year old web design, coder and developer. I've been designing web sites for 7 years now.

I think I would prefer if you didn't put your age in the text. Years of experience is good enough.

Quote:

Clients have come and gone and so I only keep recent projects to showcase. Information on launch details or when the work was done, are available for every "Site designed" project.

I wouldn't advertise that clients have left you. Maybe switch the text to. Please see my recent projects. Other sites are available for viewing ... etc.

Very nice imo!

masonbarge · #3 (**permalink**) Jan 6th, 2007, 19:15

Sorry, Karen, but those colors, to my eye, just aren't good together. The site function seems good.

Also, I don't know whether the offset background (the horizontal green stripes) of your logo is intentional, but the effect is that it's simply not aligned correctly.

snow · #4 (**permalink**) Jan 6th, 2007, 23:54

I disagree about the colours - as you know, I think they're pleasing and different

- I'm not so keen on the green stripes at the top... it kind of reminds me of the 'under construction' signs that you find on some sites

The site doesn't look great at my resolution - I've provided a screen shot at:
http://www.cs.stir.ac.uk/~snw/kdesk.JPG
This also illustrates the off alignment on the title, that mason barge was talking about - make it transparent, perhaps?

The other problem with my resolution is on the 'latest work' popups:
http://www.cs.stir.ac.uk/~snw/kdesk2.JPG
I always have to scroll down to close the images and it gets a very tedious very quickly! (Maybe you could have the close button at the top?).

I also think the tone of your site probably isn't at the right level. In some places it sounds very personal and too informal, and in others you scare possible clients with things they don't need to know. The text on the portfolio page, for example, explains the technologies used first, and goes on to state what they were used for. The client will likely blank out the whole paragraph - all the time you want to be selling and demostrating the features you can offer them and this is what the focus should be.

Hope this helps,
Snow

karinne · #5 (**permalink**) Jan 7th, 2007, 16:04

Lchad: Thank you very much for the text changes. I've fixed those up.

masonbarge: What res are you looking at the site with?

snow: Same question as mason's ... what res is that? I know the text is crappy ... I totally suck at writting so ... any of you would like to help with that, just tell what you would change.

Thank for reviewing guys. Let me know about those res...

snow · #6 (**permalink**) Jan 7th, 2007, 17:29

I'm using a 14" monitor at 1024 x 768, and using FF, on Windows XP.

karinne · #7 (**permalink**) Jan 7th, 2007, 21:53

Thanks snow. Seems the problem with the pop-ups is that the actual image is 780x585 so ... when you add that little text is goes over the 768 of the 1024x768 res.

I've changed them to 600x450 so that should be pretty good. Let me know!

Thanks!

snow · #8 (**permalink**) Jan 7th, 2007, 22:18

The ones you've changed are much better for me now! I think you need some kind of markings to show which ones cause pop-ups and which ones don't if you're going to have some acting differently...

Ryan Fait · #9 (**permalink**) Jan 8th, 2007, 00:35

The Design:

Personally, I really like the color scheme, including the stripes at the top. That little difference in texture varying from the rest of the page does wonders for the design in my opinion.
As for the main page, I have to agree with a few opinions expressed earlier in that the content is too far down on your page.
You've already made use of JavaScript for the lightbox thingy (I think that's what it's called...), why not add another little function that hides the thumbnails until you click on the "Latest Work" bar. Having a nice smooth animation where the bar extends downward revealing the thumbnails would look very nice.

The Code:

Where are the meta tags at?! Get those keywords and descriptions in there. Some old search engines still use meta tags, but more importantly, Google uses them for in-url searches. Do not create universal meta tags; each page should have its own unique list of keywords and a description.
Taking out the commented code would be a good idea.
This chunk of code is horrible. Lists should only have <li>'s inside. No headers, paragraphs or <div>'s.

Code: Select all

<ul>
	<li><h3>New site! Better services!</h3>
	<div class="latestdate">December 23rd, 2006</div>
	<p class="latesttext">Winter is here and so is work. While the last version of the website was uploaded merely as a way of keeping my portfolio alive, it is now time to get down to business. It took me quite a while to get this site re-design but it's finally here.</p></li>
	<li><h3>New service</h3>
	<div class="latestdate">December 23rd, 2006</div>
	<p class="latesttext"><strong>PSD-to-HTML</strong> is a new service that I'm offering now. If you have a mockup of your site all done in PSD, I will hand-code it in XHTML and CSS in only a few days.</p></li>
</ul>

Move the counter code to the bottom of the page. It's holding up the content from being loaded immediately.
Put free-standing text inside <p> tags. Always.
You should only have one h1 tag. Think of your site like a newspaper. There is only one main header per page. Stick an <h1> near the top of your page and don't use it again. You can use <h2-6> as many times as you want.
For accessibility purposes, place a hidden link at the top of your page that links to the content. For example: <p class="hidden"><a href="#content" title="Skip to the Content">Skip to the Content</a></p>

Design: 4 out of 5
Code: 3 out of 5
Functionality: 4 1/2 out of 5
Accessibility: 3 out of 5

For the most part, you've got a beautiful site. You're coding isn't top-notch, but it's definitely better than a lot of sites I've seen. Fix a few of the coding things I mentioned, and your site will be more accessibile and SEO friendly.

karinne · #10 (**permalink**) Jan 8th, 2007, 16:10

Quote:

Originally Posted by snow

The ones you've changed are much better for me now! I think you need some kind of markings to show which ones cause pop-ups and which ones don't if you're going to have some acting differently...

Yeah ... I've been toying with that idea for a while ... might just add an extra border of some sort to the ones that have a pop-up.

Or ... the reason I don't have pop-ups on some of them, is because I didn't do the design. I just coded (or re-coded in one case) the site. So ... I don't want to show the "design" of the design of the site since I didn't do it.

What would you suggest I show in the pop-up? Or should I just leave it like that and only give pop-ups to the ones I designed?

karinne · #11 (**permalink**) Jan 8th, 2007, 16:14

Quote:

Originally Posted by Ryan Fait

You've already made use of JavaScript for the lightbox thingy (I think that's what it's called...), why not add another little function that hides the thumbnails until you click on the "Latest Work" bar. Having a nice smooth animation where the bar extends downward revealing the thumbnails would look very nice.

Oh yes ... the moo thing. I forgot about that. Good call and good idea. Thanks!

Quote:

Originally Posted by Ryan Fait

This chunk of code is horrible. Lists should only have <li>'s inside. No headers, paragraphs or <div>'s.

Code: Select all

<ul>
    <li><h3>New site! Better services!</h3>
    <div class="latestdate">December 23rd, 2006</div>
    <p class="latesttext">Winter is here and so is work. While the last version of the website was uploaded merely as a way of keeping my portfolio alive, it is now time to get down to business. It took me quite a while to get this site re-design but it's finally here.</p></li>
    <li><h3>New service</h3>
    <div class="latestdate">December 23rd, 2006</div>
    <p class="latesttext"><strong>PSD-to-HTML</strong> is a new service that I'm offering now. If you have a mockup of your site all done in PSD, I will hand-code it in XHTML and CSS in only a few days.</p></li>
</ul>

I totally forgot I still had that in bullets!

Thanks for spotting that!

Thank you for this very detailed review! Very appreciated.

karinne · #12 (**permalink**) Jan 9th, 2007, 11:49

Quote:

Originally Posted by Ryan Fait

Taking out the commented code would be a good idea.

Where are you seeing this?!? 'Cause I went through my pages and there's only one little piece that's commented out and it's my horizontal banner that I had

Quote:

Originally Posted by Ryan Fait

This chunk of code is horrible. Lists should only have <li>'s inside. No headers, paragraphs or <div>'s.

Code: Select all

<ul>
    <li><h3>New site! Better services!</h3>
    <div class="latestdate">December 23rd, 2006</div>
    <p class="latesttext">Winter is here and so is work. While the last version of the website was uploaded merely as a way of keeping my portfolio alive, it is now time to get down to business. It took me quite a while to get this site re-design but it's finally here.</p></li>
    <li><h3>New service</h3>
    <div class="latestdate">December 23rd, 2006</div>
    <p class="latesttext"><strong>PSD-to-HTML</strong> is a new service that I'm offering now. If you have a mockup of your site all done in PSD, I will hand-code it in XHTML and CSS in only a few days.</p></li>
</ul>

Fixed!

Quote:

Originally Posted by Ryan Fait

Move the counter code to the bottom of the page. It's holding up the content from being loaded immediately.

Done

Quote:

Originally Posted by Ryan Fait

Put free-standing text inside <p> tags. Always.

Not sure what you mean here!??

Quote:

Originally Posted by Ryan Fait

You should only have one h1 tag. Think of your site like a newspaper. There is only one main header per page. Stick an <h1> near the top of your page and don't use it again. You can use <h2-6> as many times as you want.

Done

Thanks again.

Ryan Fait · #13 (**permalink**) Jan 9th, 2007, 12:31

Code: Select all

	<div id="usualfooter">
		<a href="/">Home</a>  |  <a href="/about/">About</a>  |  <a href="/services/">Services</a>  |  <a href="/portfolio/">Portfolio</a>  |  <a href="/contact/">Contact</a><br />
		Valid XHTML and CSS. All code written by Karinne Legault.<br />
		Proudly hosted by <a href="http://www.bluephyre.com">BluePhyre</a>.
	</div>

This should be:

Code: Select all

<div class="footer">
	<ul id="usualfooter">
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/services/">Services</a></li>
		<li><a href="/portfolio/">Portfolio</a></li>
		<li><a href="/contact/">Contact</a></li>
	</ul>
	<p>Valid XHTML and CSS. All code written by Karinne Legault.</p>
	<p>Proudly hosted by <a href="http://www.bluephyre.com">BluePhyre</a>.</p>
</div>

Don't let text be unbounded; put it in a header, quote or a paragraph.

masonbarge · #14 (**permalink**) Jan 9th, 2007, 13:45

Quote:

Originally Posted by karinne

masonbarge: What res are you looking at the site with?

1024 x 768 (19" using FF 2.0)

karinne · #15 (**permalink**) Jan 9th, 2007, 13:50

Quote:

Originally Posted by masonbarge

Also, I don't know whether the offset background (the horizontal green stripes) of your logo is intentional, but the effect is that it's simply not aligned correctly.

Quote:

Originally Posted by snow

The site doesn't look great at my resolution - I've provided a screen shot at:
http://www.cs.stir.ac.uk/~snw/kdesk.JPG
This also illustrates the off alignment on the title, that mason barge was talking about - make it transparent, perhaps?

Quote:

Originally Posted by masonbarge

1024 x 768 (19" using FF 2.0)

Alright, I just noticed that the "logo" isn't properly aligned at my res either

Thanks for that last reply mason ... I'll have a look at that.

daygon · #16 (**permalink**) Jan 9th, 2007, 19:25

Wow that’s a lot of quoting. But anyways...
First off I would like to say that the overall feel of the page is good but it’s just to plain. I don’t think you've put everything you know how to do into your page. Personally I think you can do better. I mean I’ve only been designing for like a year and a half and I believe I could duplicate that within an hour or two. And your new service isn’t really all that smart because all you really have to do is take into image ready and splice it up and call it hard work, don’t get me wrong its a good idea because I just did that with my school site and my own company site (not splicing but changing it into html/css) but its not really all that hard. And in the menu you could have made a drop-down menu with your portfolio that says something like recent and archive so you don’t really have to worry about saying that customers have left you can just put there stuff on there and keep your lips sealed. I would never delete stuff that i had worked on, because if you look at it from a clients stand point they look at your old work and then compare it to your new work because you’re going to put certain features in different pages that that client wants in their page. Its pretty much your shopping mall and their going to pick out things they like and leave out the things they dislike. Saves them the time from looking up different features and saves you time from learning how to create the different features. That’s how you keep business flowing. What your clients don’t know won’t hurt them. That’s how I’ve taught everyone that i work with at my company.

Ryan Fait · #17 (**permalink**) Jan 9th, 2007, 22:59

Quote:

First off I would like to say that the overall feel of the page is good but it’s just to plain. I don’t think you've put everything you know how to do into your page. Personally I think you can do better. I mean I’ve only been designing for like a year and a half and I believe I could duplicate that within an hour or two. And your new service isn’t really all that smart because all you really have to do is take into image ready and splice it up and call it hard work, don’t get me wrong its a good idea because I just did that with my school site and my own company site (not splicing but changing it into html/css) but its not really all that hard. And in the menu you could have made a drop-down menu with your portfolio that says something like recent and archive so you don’t really have to worry about saying that customers have left you can just put there stuff on there and keep your lips sealed.

Saying you could duplicate a site in a matter of hours doesn't make it a poor site. I just thought I'd throw it out there that I disagree with just about everything daygon said, and I think you have a stunning, elegant website.

Ryan Fait · #18 (**permalink**) Jan 10th, 2007, 02:57

Oh my god, I've forgotten to post this up about 8 times.

The doctype should be this (with the proper line break and tab):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

karinne · #19 (**permalink**) Jan 10th, 2007, 12:35

Quote:

Originally Posted by daygon

And your new service isn’t really all that smart because all you really have to do is take into image ready and splice it up and call it hard work, don’t get me wrong its a good idea because I just did that with my school site and my own company site (not splicing but changing it into html/css) but its not really all that hard.

Of course it's not hard to do ... for us ... some people are just designers and don't give a rats ass about knowing how to code. If you look around the net, you'll notice a slew of these PDF-2-HTML companies popping up. It's easy money to do and takes only a few hours of your time.

Quote:

Originally Posted by daygon

And in the menu you could have made a drop-down menu with your portfolio that says something like recent and archive so you don’t really have to worry about saying that customers have left you can just put there stuff on there and keep your lips sealed.

Why a drop-down? It's totally useless on this site. The structure of the site is too simple for this.

Quote:

Originally Posted by daygon

I would never delete stuff that i had worked on, because if you look at it from a clients stand point they look at your old work and then compare it to your new work because you’re going to put certain features in different pages that that client wants in their page. Its pretty much your shopping mall and their going to pick out things they like and leave out the things they dislike. Saves them the time from looking up different features and saves you time from learning how to create the different features. That’s how you keep business flowing. What your clients don’t know won’t hurt them. That’s how I’ve taught everyone that i work with at my company.

Alot of my work is freelance of course. And alot of it is helping out companies that are overloaded with work and need help. So ... tell me this. If you were a company looking for help on designing/coding a site, would you go for the guy/gal that has nasty/90's looking site with deprecated/table layout code? Or the one that have appealing/2.0/2006 looking sites with XHTML/CSS layouts?

Thank for the review, but I'm sticking with what I have.

karinne · #20 (**permalink**) Jan 10th, 2007, 12:39

Quote:

Originally Posted by Ryan Fait

Oh my god, I've forgotten to post this up about 8 times.

The doctype should be this (with the proper line break and tab):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Does it really matter? I have yet to find a document that states that the DOCTYPE needs to be on 2 lines?

		Webforumz.com > Main Forums > Design Your Website > Free Web Site Critique
a web design portfolio