* I understand the goal of the mouseover highlight, but the light grey text is a little too light, I think. I didn't realize at first that I was supposed to mouse over, and assumed the styling was broken.
* The tooltip hover thing on thumbnails has some unintuitive behavior - specifically, mousing over where the tooltip would appear causes it to appear. So if I put the mouse just above "Contax T2" I get the tooltip for your barber's website. This only seems to happen after the tooltip has been shown once already.
* The thumbnails move down a pixel or two when their tooltip shows up - but once I mouse over the related link, mousing over the thumbnail itself no longer causes it to move.
You might want to darken it some more, It's quite hard to read. On a touch device, like the iPad, there is no mouse-over. Even if I touch the text, it stays light gray. My personal rule of thumb is to think twice about every onmouseover design decision because of the proliferation of touch and mobile devices.
I still can't read the text. As a developer who has spent a lot of time working with designers, this screams to me that you're unrealistic and don't think about your actual audience. So I'd fix the damn text contrast. And if that requires a complete reshuffle of your design, so be it!
Also - I only noticed that there was mouseover effect while I was mousing from the middle of the page to the back button. My mouse started in the middle of the page, I scrolled, read some text, and moused over to leave - at which point I discovered there was a better way to read.
You've got to be kidding. It's completely unreadable. Here is the text color you want to use: 0x000000. Here is how many mouseover effects you want to use: 0.
After 6+ years in university (undergrad + graduate + research), I have decided to put aside my interests in science and to pursue a career in the web (enough academia bureaucracy)
I do iPhone & web development, and quite capable with design. I would prefer to stay in Vancouver and work remotely, but also open to other options.
Very nice site, ivanzhao. As you have already heard previously, I wasn't immediately aware of the mouseover intensiveness of the site- something that left me pondering - "surely, there has to be more"... This said (and said without having viewed on a mobile device), your portfolio was fun to peruse.
Since the logical leap to be made - considering this is a portfolio post on HN - was "surely, there must be more", I quickly discovered a lot of visual click fun to be had. Considering my typical click-in-click-out viewing patterns, the fact that your site inspired me to spend .6 seconds to learn to use it and then to also stick around to take it in speaks volumes about your creative presentation (IMHO).
Hey, do you have a phone number i can reach you at? My buddy is starting a wedding registry business in Vancouver (he's very well connected in that industry), and we're looking for a web designer to work with us!
As his friend, I'm surprised that you would accuse him of ripping off a competing site. Since you don't know him, I'll tell you straight up that it's not in his character to do something like that.
When Ivan showed me the initial prototype of his app (over 6 months ago), neither of us had heard of The Wiki Game. We had however, heard of Six Degrees of Kevin Bacon (http://en.wikipedia.org/wiki/Six_Degrees_of_Kevin_Bacon) before though, and I'm sure many others have too.
If you've ever worked on an idea, especially for the internet, you'll find that nearly all of them have been thought of before in some shape or form, so it's not surprising that they came up with this independently.
I did not rip off The Wiki Game, at least wasn't intent to do so.
In The Wiki Game, problems are randomly generated.
In 3 Degree of Wikipedia (my app), they are created by other players, and limited to 3 degrees only, so each connection puzzle can actually encapsulate a concept that's meaningful and worth learning. Besides, all puzzles are dynamically ranked to filter out the bad ones (like HN).
Also, you're wrecking your information hierarchy by putting your right bar vertically level with your big intro blur on the top left. Let that intro blurb sit on its own with nothing to the right of it.
+1 this a good first step, but in terms of visual appeal and clarity of message, you've got a long way to go. I found this to be one of the worst websites I've visited in quite a while. I'm looking forward to when your innovation heads in the direction of improving communication.
I should have posted earlier, but for what it's worth, here's a character reference:
Ivan is one of the most hard-working people I have ever met. He aware of what he capable of, and is constantly striving to improve his skills.
I had the opportunity to work with him on a project and would gladly work with him again in the future. He's brutally honest, but never comes off as rude. In an argument he will always give your side some fair thought even when he disagrees with you completely. Every time I meet him I am impressed (and slightly envious) by the progress he's made in his ability and projects.
So if you're looking to hire someone for a challenging and interesting project, he comes highly recommended.
Works okay as a portfolio, others have already hit on the design details that could probably be fixed.
I'd say - having just looked at your site, it's not clear to me what you are selling - it's not clear to me how quickly or accurately you can deliver a product.
Maybe I'm getting old and crotchety in my IT years - but I don't really care from a portfolio page that you just quit anything to take a new direction in life. You might just want to leave that out, and instead replace it with something about how you are passionate about website architecture and design, and all the aspects involved.
My honest impression was that you must not be very good at what you do if you can make something as basic as reading your site so frustrating. Then when I came back here and read that you have to mouse over the text to read it, my first thought was "why would someone who advertises does iOS work make their site impossible to read on an iOS device?"
I did eventually go through and check out your 3 degrees of wikipedia app, and thought it was very impressive.
> My honest impression was that you must not be very good at what you do if you can make something as basic as reading your site so frustrating.
I felt that it was overly wanky and art-bloated and neglected basic principles of Information Architecture, Usability Heuristics, and Interaction Design.
Who downvoted this? UI/UX are not terms to be bandied around lightly. Just because you can make websites pretty doesn't mean you're an interface designer. There's a difference between graphic design (an appeal to emotion and aesthetics) and interactive design (the science of making interfaces easy and enjoyable to use).
Also the page does not quite fit to the screen for some reason, on iPad. Could be fixed by adding some padding to the right of the body/container probably (about 30 pixels)
As sad as it may be, IE6 and IE7 are still the most prominent browsers used by corporate America. If you are building b2b apps you must be conscious of these antiquated beasts.
Best of luck in your freelance endeavors!
EDIT: I have found this tool to be pretty useful in testing against various versions of IE, IETester http://goo.gl/4Egz9
* If you're also advertising skills with iOS, do visit your website from iOS, like an iPad. Then realize there are no mouseover events.
* Don't use absolute sizes, like pixels. It looks horrible in everything other than your favorite resolution. Or, you could say to which resolution should the visitor switch to, so he'll know to leave the site.
Not passing W3C validator check can hardly be called sloppy and unprofessional. Try running Microsoft, Apple, Facebook, Youtube, Twitter, Google, hell even super simple sites like Hacker news through W3C and see if they validate (hint: They don't).
Agree with point 2 though, that one should be fixed.
I always believed the goal of a portfolio should be to show first, tell later.
IMO you have too much text. I think if you just showed me real examples of your work, it would be more powerful. We are lucky as designers/devs that we can communicate so much just through screenshots of our work. I'd do that! That gives you a shot at explaining everything else about yourself once your screenshots have impressed someone.
<shameless (hopefully helpful) self-promo>
You should list yourself on Tekbob.com :)
I don’t know if you’re looking for photographic composition advice, but generally, I’d say: (1) cut out elements extraneous to the core concept of each photograph, and as one means to that end (2) crop closer and fill up more of the frame with your subjects.
Glad you like the photos. However I usually don't associate concepts with my photos and like to response to scenes instinctively without thinking too much about composition. Thanks for your advice nevertheless.
Okay, I guess I could rephrase that. Try this experiment: respond instinctively and take a picture, and then move about 30–50% closer to the subject and take another picture. It is my guess that viewers (including yourself) will like the results noticeably more. (The pictures I linked are ones that I wouldn’t necessarily benefit from the closer crop, but most of the others on your site would, IMO.) If in the experiment you don’t like the results as well as your original instincts, then, of course, trust yourself.
(For what it’s worth, the vast vast majority of my own pictures suck; it’s only through culling and cropping, and lots of practice, and hundreds of hours spent staring at prints, and then more culling and cropping, that anyone ever ends up with anything presentable.)
A lot of people go to school for a very long time, and (or sometimes or) then go on to practice for a very, very, very long time to take really good pictures.
After years and years and years of practice, then those people can start to get to the point where they can just take a picture without "thinking too much about composition." But that's only because they've been practicing composition (and all the other parts of photography) for so long.
Amateur photographers who consistently think about applying even just a few of the basic rules of composition (rule of thirds, etc) often have photographs that turn out much nicer looking than amateur photographers who "let instinct take over."
I like your site. I really like your decision to quit school. I quit college after a single semester to freelance and haven't looked back. I'm not saying quitting school is good for everyone; but there's some people a university education just isn't as helpful for.
Feel free to shoot me an email if you'd like to chat, take on some of my workload or anything else. Best of luck.
I was prepared to look at this thread and produce a silent laugh to myself like most over eager people this age, but I have to say that I was really impressed with your site's visuals and content. Anyone who can land you for a project or two will hopefully get an asset.
Good luck. Check me out on Twitter @kgosser or www.krisgosser.com if you need any networking help.
With this said, there is a lot of great constructive feedback as comments; all warrant a thought. It takes a lot for someone to open him or herself up to feedback like this.
My 2¢ is that the feedback regarding hovers for mobiles is correct, but I can see why you did it. Overall, it's not far off and I can see the potential you have.
If we are going to expand this thread towards what's a good portfolio site... well text is just as an important communication device as pictures of your design work. The angle you took with your site and having more text than image is ok by me. I felt like I got to know you, and even enough to comment on this thread which I rarely do (I'm a lurker).
Thank you for your kind words. To be honest, I was a bit overwhelmed about the reactions to this "low-lighting" thing. However I'd like to stick with what I believe in, at least for now : )
Not meaning to be obnoxious but do you, or anyone else, have any suggested reading material on this and similar topics as they apply to web development?
Thanks, that is exactly what I was looking for. I'm somewhat surprised this isn't a larger topic in web design. Maybe I'm just looking in the wrong places.
I'd encourage you to reconsider your design goals and potentially run some usability a/b tests via mturk. I'd be very willing to scroll down a useful page with info. The current design makes me want to run away (no offense intended) rather than read/hire.
I think your site looks stunning. It really caught my eye and I actually read the whole thing (almost) because I kept on moving my mouse away to do something else and something would change and catch my attention. Very unique and compelling.
This strikes me as a bit radical. I browse on a MacBook Air (11.6"), and this resulted in me having to scroll my window both vertically and horizontally to read through the page. I don't have to do this, normally. Maybe shoot for 960?
I was aware of this, and it was a design tradeoff that I was willing to take (like this controversy "low-lighting" thing).
The big dilemma is always "how to pack a lot of information into a limited space without looking cluttered".
I also tried 980px but that extra 100px does make a big difference (plus considering the "flow" of the text). Therefore I gave up the relatively smaller market of netbooks/11-inches MBAs and go with 1280px screens.
There's always people who don't have large screens (even on desktops) or who don't have their browsers expanded to the size you are looking for. The goal of a website, before any sort of graphic design, is to communicate information to as many people as possible. By making the website difficult to read (or completely impossible in many situations (IE, iOS, etc)), you're alienating people. If you're freelancing, that's definitely not something you want to be doing. You never know who's going to be coming at you with a work offer.
Cross-browser/cross-device compatibility is one of the most tedious things about web design, but if you're trying to drum up business, especially _for_ web design, you need to demonstrate your competence at it. Your portfolio is really the best place to do this. I'll be honest, if I was thinking of hiring a web developer, I'd be put off by your portfolio, because you're putting form before function.
I think you are perhaps dimming the texts to make the highlights more skimmable? It's a good idea, but when I read it I spent about 1 or 2 seconds on the highlights and started skimming the rest on my own.
Perhaps you can make the main text colour static, but highlight with a bigger, bolder font, or a different colour. Maybe a significantly different-looking font face, or highlight the text background instead.
I really like your barber's web site btw. Very straight-forward, and the aesthetic choice seems to be sending the right message. I had a chuckle at the first-aid photo. :)
- The mouseover effect should be removed as soon as possible.
- The layout looks very random and seems to lack structure, I get that it can be printed on two sides of a paper, but doesn't really look good for a website imho
- Also I think it's pretty hardcore to achieve a diploma while working at the same time, quitting is like giving up.(highly subjective)
I was about to ask you whether you played ball on the Houston courts (bball, EVR) before I realized you live in Canada. Anyway, what's your hourly rate? Shoot me an email, please: zackster@gmail.cøm
* I understand the goal of the mouseover highlight, but the light grey text is a little too light, I think. I didn't realize at first that I was supposed to mouse over, and assumed the styling was broken.
* The tooltip hover thing on thumbnails has some unintuitive behavior - specifically, mousing over where the tooltip would appear causes it to appear. So if I put the mouse just above "Contax T2" I get the tooltip for your barber's website. This only seems to happen after the tooltip has been shown once already.
* The thumbnails move down a pixel or two when their tooltip shows up - but once I mouse over the related link, mousing over the thumbnail itself no longer causes it to move.
* Left column is totally broken in Opera: http://i.imgur.com/0iiNT.png