Hello HN: I am quitting school for freelance, here's my portfolio | Hacker News Reader

Hello HN: I am quitting school for freelance, here's my portfolio

ivzhao.com

105 pointsivanzhao85 comments

Good luck! A few bugs/suggestions:

* 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

Thank you for your suggestions (especially the one about Opera). I have darkened the text, now working on other issues.

Also note that most non-aesthetic mouseover interactions are pretty broken in modern usability models.

Agree. This page is unreadable with NoScript.

I knew about 'Mystery Meat Navigation', but this site offer 'Mystery Meat Text': Text that only becomes readable if you hover over it.

Also, tiny grammar nitpick: "all the times"

I think it should be "all the time" or "at all times". I might be wrong though, English is my 4th language :)

This is correct.

After reading this and some of your previous posts, I can see that your English is excellent. There's no need to second-guess your corrections.

Is this what it is supposed to look like? http://imgur.com/LOHRG

For somebody like me (I have pretty terrible vision), this is almost unreadable.

If you mouse-over, I think it's supposed to get darker.

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.

Hello HN,

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.

Thanks,

Ivan

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!

1-604-603-1454

Why'd you rip off the original Wiki Game website wholesale and turn it into an iPhone app?

http://thewikigame.com/

http://wikipediagame.posterous.com/

I don't see your name anywhere on either of those pages.

Do you plan to keep ripping off websites/web apps and converting them to iPhone apps in order to boost your portfolio?

Edit: I didn't link his version because I didn't want to add fuel to the fire.

Edit2: Wiki Game creator says it's cool, then I have nothing to be annoyed about. S'all good. :)

alnayyir,

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).

I intent to make it an app for learning.

Hope this answers your questions.

Ivan

Did you at least have consent from them to rehash their idea?

http://hackerne.ws/item?id=1981552

Boom-shaka. You're in good shape chief.

Why does he need consent?

There are already 5 other apps in the app store that do the same thing as the wiki game, his is at least has a twist.

So it's more like WikipediaMaze then...

http://www.wikipediamaze.com/

But I doubt that it matters that it's similar game play. How many roll the dice & go around the board games are there?

Hey there! I'm the creator of http://TheWikiGame.com, and the first thing that comes to my mind is:

"New Competitors Help Validate Your Market"

So, I'm totally cool with ThreeWiki.com! :-)

Good enough for me.

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.

edit: language

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).

Enjoyed your photography.

Don't worry about these dorks; if you'd founded Google, they'd accuse you of ripping off Yahoo.

Good work, and good luck.

Ditch the "clever" text mouse over stuff.

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.

Good luck.

Ditto on the mouse over, it's very annoying!

+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.

I have a suggestion:

Start with all of the text at full darkness and lighten non-focused columns on mouseover. (Instead of starting lightened and darkening on mouseover.)

This achieves the same thing, but without the many of the usability issues.

Edit:

Some other suggestions:

* Copy-edit and grammar/spell check your writing.

* Refactor your bio and put your professional pursuits in the first paragraph: "I'm Ivan Zhao and I design things."

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.

Looking over the comments here I'd like to say... welcome to the world of web design. ;)

I find that the low contrast between the text and the background make this site awfully difficult to read.

Mouse over for proper contrast. It took me a minute to figure it out.

But people with tablets or Mobile phones won't be able to do that.

It's a play of "low-lighting". Mouseover to highlight it.

EDIT: thanks for the suggestion. I just darkened the text a bit.

It's pretty non-obvious. I'd recommend making the text readable without mouseover if you want people to read it at all.

Consider users on touch devices, too. I'd generally avoid using hover effects, and if you must, keep them subtle and don't rely on them for usability.

Sorry, meant to upvote you but arrows are way too close/small and fingers too phat.

Somebody please give stephen an upvote.

You could up vote some of his old comments to compensate.

There is no mouse-over in iPads and iPhones

* Sent from my iPad

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)

But I like the site overall though, very pretty

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).

Your site is broken in IE7. http://min.us/mvbDq8b

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

You don't have the real url?

Be pragmatic! Now you're saying you have skills with the Web and iOS, but you're website says otherwise.

* If you're advertising skills in web dev, using invalid HTML appears sloppy and unprofessional. http://validator.w3.org/check?uri=http%3A%2F%2Fivzhao.com

* 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.

My favorite shots were these:

http://ivzhao.com/photography/pics/randomone15.jpg • http://ivzhao.com/photography/pics/light2.jpg • http://ivzhao.com/photography/pics/randomone16.jpg • http://ivzhao.com/photography/pics/people1.jpg • http://ivzhao.com/photography/pics/randomtwo2.jpg • http://ivzhao.com/photography/pics/randomtwo5.jpg • http://ivzhao.com/photography/pics/randomtwo7.jpg •

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.

He quits grad school (he has a degree already). Big difference.

No, I'm not trying to knock you off either.

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 : )

i suggest you learn about the role of contrast in readability/usability

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.

no offense taken, thanks for asking.

i did this quick search which provided a number of resources, including a jakob nielsen (year 2000) citation, plus some more academic studies.

http://www.google.com/search?sourceid=chrome&ie=UTF-8...

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.

My take was that low-lighting allows me to pack in more information without cluttering the page, so all can be fit into one page.

I think that would be good if it was 'eyeover' rather than 'mouseover'. But requiring the user to expend effort just to read is frustrating.

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.

IE8 is very unsatisfied with your site. So much so, the only way I was able to read the main content was via the page source.

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.

Unfortunately I'm not an employer :) Good luck!

From your stylesheet: html { min-width: 1080px; }

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?

Hi mlgrinshpun,

Really appreciate your careful observation.

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.

Thanks,

Ivan

If you intend to make a living I would suggest you heed the GPs advice and make it work on as many devices as possible.

$ trumps function trumps design in the real world.

Check out Apple (the company whose product you just ruled out) to see how it's done.

The correct way to deal with such issues is graceful degradation.

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 like your layout, it stands out.

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. :)

http://ivzhao.com/belmont/imgs/11.jpg

Maybe I'll check out the place, a bit pricey for me though.

It's a really nice looking site but it's not obvious to me what you are offering, and how I go about getting it.

A clearer, less busy, highlight Services and 'Contact Me', perhaps. My 2c.

Well I think:

- 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 don't see any iOS projects on your portfolio site.

If you could email me what apps you have worked on at the email in my profile, I might have work for you.

It's on the page. Here's the link: http://www.threewiki.com

Thanks.

Might I suggest making it 1024px friendly?

The font on your website (even mouseovered) is hard to read, and not weighty enough.

good work in taking action and pursuing other opportunities. I am quitting my awesome pay job and pursuing my dream today. Good luck!

I got to your web site, but I couldn't read the text easily, so I left within 3 seconds.

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

Reply on news.ycombinator.com