[francine87]

Hi there!

I'm new to this forum but have been lurking around here for the past year. I have recently completed a digital media course and have finished my portfolio site in which will be displayed in front of an industry panel within the next few weeks alongside my other classmates.

I'm relatively new to coding as I have only done this for a year but please feel free to review my site as I would like to touch up on anything strange. (I've been staring at it for too long!) Any criticism would be greatly appreciated-whether it is design or code related!

http://francine-chong.com

p.s.-try resizing the browser or checking it out on a smartphone/iPad...it should change (and it may look a little weird looking on smaller devices as I've hidden lots of things!)

Thanks!

This post has been edited by francine87: 04 January 2012 - 11:22 PM

[TheNickyYo]

If i were you i would make the navigation sidebar background black and keep it like that, maybe make the whole left hand side of your site black maybe 200px wide? use the CSS position:absolute;

This post has been edited by TheNickyYo: 06 January 2012 - 05:19 AM

[WBC]

It's nice and different, has a print media (pop art inspired magazine) feel to it. The mouse curser infuriates me though.

[D.Schuster]

WBC, on 06 January 2012 - 05:37 AM, said:

It's nice and different, has a print media (pop art inspired magazine) feel to it. The mouse curser infuriates me though.

This, love it tho, the scrolling seems a bit slow at times

[funsella]

I Like it, I think its awesome!!! but will second the vote on the mouse cursor.

[brightonmike]

This is one of the best websites I've seen posted up here in a very, very long time.

Visually, it is an absolute treat and to be honest I think you will have most people on here green with envy.

There are a few issues, such as the cursor and the shuddery scrolling - but the positives far, far outweigh the negatives.

[oakleaves]

You have a nice unique style. Overall I applaud you and I am sure you will be successful when you present your work.

I also agree with the mouse pointer and the scroll action of the page. The scrolling could be smoother and that mouse pointer isn't great.

On the whole, I believe you will go far.

[KCooper]

First impressions are good, its a nice looking site.

However, as mentioned above, the cursor is more of a hindrance than anything else. It will only serve to confuse people and is anti-accessible.

The images in your portfolio section are way too small, and do nothing to show off the work you have done; the main aim of a portfolio website. I appreciate that when you click on an image, information is displayed (and I like the way this is done), but I think the initial view of the portfolio section could use some definition.

[francine87]

Wow thanks for the helpful feedback everyone! Once I finish my client's site I'm going to work on my dodgy jquery code for the scrolling action-it's probably not as efficient as it could be as I realize it lags on certain browsers.

Will definitely change the cross-hair cursor (though I used it to match the other graphic elements on the site, it does annoy me when using the ruler in the web-developer tool-bar! Lol..

KCooper -thanks! That was an initial comment from the tutor too, so will look into doing something with those triangles....not sure what yet though! I did want to keep it looking like a piece of graphic/print work though..hm.

[kree8or]

It's quite nice, but i have some issues with it. When the background is the red part, its hard to read the menu. also when you go to the portfolio, the navigation buttons aren't very clear.

[PseudoRoots]

Wow that's a gorgeous site, you've got a true eye for design.

I also dislike it when sites change my cursor...

The scrolling is also a little laggy like others have noted.

Viewed on Win7 x64 in Chrome 16.

[oysterdesign]

Hi,

This is a very brave site design and it really works - well done. I love the changing backgrounds and the fluid feels that the movement has.

The only comment I would make is that you have also this lovely layout and interactivity, and them I click 'download CV' and I'm thrown into downloading instantly. Maybe you could have a page with your CV as text with an option to download from there? Might be me, but I think this would be nicer for the user...

Hope this helps!

Anna

[Pedro]

Good work, I like it. Nice to see more people doing RWD too.

[francine87]

oysterdesign, on 09 January 2012 - 09:32 AM, said:

The only comment I would make is that you have also this lovely layout and interactivity, and them I click 'download CV' and I'm thrown into downloading instantly. Maybe you could have a page with your CV as text with an option to download from there? Might be me, but I think this would be nicer for the user...

Hope this helps!

Anna

Very true! Didn't like the 'jumpiness' of clicking the CV either-but it was a requirement to meet the breif at the time. Will be looking into how I'll integrate it better into the flow of the site soon (either in a new section on the existing page or like you suggested-on a new page). Thanks again everyone for the great feedback!

[Malyo]

Hello

First of all take a look here: http://www.marklawrencedesign.com/ - looks familiar doesn't it ?
Not sure if there's template for that, but if no, i wouldn't suggest copying such original works (it's a bad practise)

If we go for the design itself:

• fix typography (remove italic from menu headings
  
• NautikExtralight seems like a really bad font
  
• mouse changing isn't good looking solution imo (usability pov, you don't wanna change something that feels unnatural for user, especialy if it's your potential client)

Hope that helps

[porkchops]

Overall, this is a very well-designed piece. Very aesthetically pleasing and compelling.

Some comments:

You should rarely change mouse cursors. It's a usability problem. People expect the pointy finger for clickable links and the arrow for everything else. The only exceptions would be when you need to signify that something is draggable or scrollable. Or, if you need to make something that doesn't have a link cursor by default look like a link.

Menu hurts my brain to read. Whatever that Bodoni-esque font you're using is a display face, shouldn't really be used for stuff that size, and the italics beneath it are not really legible.

Those little "+" icons that expand more information are hard to see and on a touch device won't be easy to use (since there is no hover state to indicate that it DOES anything). Might want to make it looks more like a clickable object, add the default link cursor and make the touch/click target MUCH bigger. I feel like I'm testing my motor skills by trying to click that tiny target. It would be much worse trying to tap with a finger.

Need hover states on those form fields. It's hard enough to see the form field on a low-contrast display, but without a hover state an unwitting user won't know that it's a form.

It's bad UX practice to display one error at a time. If I don't fill out the form and hit send, you should provide ALL the error messages at once, preferably with noticeable form field styling to indicate there is an error.

Reset buttons are useless and tend to reduce conversion rates. Having a negative button so close to a positive button punishes sloppy clickers, and that leaves a bad taste in the user's mouth.

Scrolling is slow and on FF9 W7 it takes two clicks to get the menu to do anything.


Okay, I think that's it. Sorry if I come across as a pedant, I don't want to discourage you, this is a solid piece already and the praise you've received is well-deserved, I just think you could really polish it up with some of the aforementioned things. And some of the UX/Usability stuff is just best-practice.

I'm always happy to provide clarification if you need any.

This post has been edited by porkchops: 11 January 2012 - 02:36 AM

[francine87]

@porkchops:

thanks for that, I realize the mobile version doesn't work too well (esp. with mobiles with no hover states)- will definitely be considering delivering a different website altogether (or having the + boxes opened when it reaches mobile sizes..& the un-user-friendly aspects of form too! Didn't realize how annoying that was till you mentioned it lol...

@Malyo:

As part of our course we are asked to provide a reference list which we hand in of all our design inspiration as well as code/readings etc (if only I could do what Mark Lawrence does!). So you'll probably see a lot of elements on a lot of different awesome sites if you follow CSS Design Awards/TheFwa/Strange Fruits/Awwwards or the likes. Here are some more awesome designs I've used as inspiration:

ManufactureDessai
My Wonderland
Wixel
Reinhold
Emile Portenart
..the list goes on & on but I'm sure you get the point.

I'd be very surprised if to find an institution where research isn't required. 'Originality' - to be honest I don't believe there's such a thing - I'm all for the argument where everything is socially constructed and as designers we re-appropriate/re-define/represent pre-existing meanings (symbols/elements) simplistically speaking (now I just sound like my art tutor...). You can see this already from those few links I've posted above - which some use the same parallax effect, fixed navigation, and aspects/graphic elements from high fashion/graphic design/print (lines, font type Didot etc). You could even say I used VOGUE Magazine as another form of inspiration-it's all pretty subjective but it's a visual style/choice I wanted to go for and am trying to push (though I'm no where near where I'd like to be-especially in terms of coding skills). In regards to copying code, just view source. Feel free to disagree though-not trying to sound defensive, but just wanted to put that out there.

This post has been edited by francine87: 11 January 2012 - 08:36 AM

[Pedro]

Malyo, on 11 January 2012 - 01:05 AM, said:

Hello

First of all take a look here: http://www.marklawrencedesign.com/ - looks familiar doesn't it ?
Not sure if there's template for that, but if no, i wouldn't suggest copying such original works (it's a bad practise)

If we go for the design itself:

• fix typography (remove italic from menu headings
  
• NautikExtralight seems like a really bad font
  
• mouse changing isn't good looking solution imo (usability pov, you don't wanna change something that feels unnatural for user, especialy if it's your potential client)

Hope that helps

Hey man, what's your problem? Have you never heard of inspiration? Both sites are different, from design to coding.
This is probably the first nice website we've seen here in MONTHS, and you come and say it's a rip off?

Some people... God... unbelievable!
And it's practice!

[brightonmike]

Her design and website is different enough from that other one. I also found that other one, whilst visually great, is an absolute pain in the arse to "use". It was very much a case of a designer who for me clearly values aesthetic over usability which I don't think looks good. Whereas with this girls design she's made a pretty decent compromise between the two and whilst her website is very visual too, it's far easier and less frustrating to use.

Her use of parallax is much better too simply because it's more restrained. That other website, everything is moving every time I scroll and I have one word for that - "clusterf*ck". It's too much, and for me over-use of parallax is as bad as over-use of flash. It's horrible and just gives you a headache.

[Pedro]

brightonmike, on 11 January 2012 - 09:38 AM, said:

Her design and website is different enough from that other one. I also found that other one, whilst visually great, is an absolute pain in the arse to "use". It was very much a case of a designer who for me clearly values aesthetic over usability which I don't think looks good. Whereas with this girls design she's made a pretty decent compromise between the two and whilst her website is very visual too, it's far easier and less frustrating to use.

Her use of parallax is much better too simply because it's more restrained. That other website, everything is moving every time I scroll and I have one word for that - "clusterf*ck". It's too much, and for me over-use of parallax is as bad as over-use of flash. It's horrible and just gives you a headache.

Well said

[Malyo]

Pedro, on 11 January 2012 - 09:29 AM, said:

Hey man, what's your problem? Have you never heard of inspiration? Both sites are different, from design to coding.
This is probably the first nice website we've seen here in MONTHS, and you come and say it's a rip off?

Some people... God... unbelievable!
And it's practice!

I don't have any problem. This is place for sharing opinions, as i respect your's, you should respect mine. Anyways i think you understood me wrong. What i mean is that if i'm the potential client of yours, and i see REALLY original work of yours, that i've seen it on the other side, I would acuse you of lack of creativity. I think that the sites flow and structure is magnificent, that's for example why i would feel bad copying that pattern (i mean exact with triangle etc.). It doesn't mean it's a bad habbit etc. it's just my opinion