Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Very nice job. I like the feeling you are going for and the illustrations. I've marked-up this image ( http://i.imgur.com/HWiw7.jpg ) with some suggestions and things I would cleanup. Notes transcribed below. Hope these help!

1) Center the headshot vertically with the bubble.

2) Don't use an image to round corners, use CSS3 property border-radius instead.

3) This font is unique to this callout, use the Amethysta font face used on the rest of the page.

4) This isn't centered on my screen. Use font-align to center this text, not a static margin.

5) Using a large typeface for the first line/paragraph of text works well to call attention to detail. Make the following paragraphs the same font size.

6) The background colors of the images and the box they sit in are all slightly different.

7) I wasn't sure if this title was supposed to be sitting on the right margin. Centering it would work better I think.

8) These are links, but do no look like links. Use color to show they are clickable.

edit: spelling, grammer.



Thank you, great suggestions. Point by point: 1) Why is this better? 2) Started out using CSS3, but found this easier to accommodate older browsers. Maybe I should do both? 3) Tried to make it look like the Google Map bubble, that's why it's different. 4) OK, will test. 5) Second paragraph is somewhat of a subtext to come to the conclusion in the third paragraph, but you're right in that it screws up rhythm. 6) Yep, that's a non-designer trying design for ya. 7) It has the same left-margin as the other headers and most paragraphs, but the leading dots give a somewhat false illusion, I think. 8) Thanks, good suggestion, will do.


Responding to 2) in my experience as a web developer divs are generally no longer used to round corners because the market share of the browsers which don't support css3 rounded corners is increasingly negligible.

Personally I prefer CSS3 rounded corners because they do a better job of decoupling design, functionality and content (which in a perfect world would each fit completely into css, js and html respectively).

Most developers I know followed suit with Google after they dropped support for ie7 in Google Apps back in 2011: http://googleenterprise.blogspot.ca/2011/06/our-plans-to-sup...

EDIT: Looks like rounded corners only got added to ie9 so Google's ie7 stuff is irrelevant, my guess: a degraded experience on ie8 is generally taken as acceptable.


For a fluid layout with rounded corners I would have probably gone with CSS3 (versus corner divs), but since the block is fixed-size I could just suffice with one bubble.png as the background to upgrade the ie8 experience. And left it at that, being pragmatic and all.


I thought those were some really great suggestions to a really already great resume.

I didn't know you can round the corners of an image in CSS ...


Not the image itself, but the box that holds the image. Check out this quick tutorial: http://www.css3.info/preview/rounded-border/ .


You can make arrows as well in CSS: http://cssarrowplease.com/

wouldn't recommend it too much though, doesn't work on Aurora.


Do you have any resources for studying up on design concerns?

It's easy to find software examples and instructions online, but I really have no idea where to start with building my eye for design.

Thanks.


Hey, that was cool of you to do. I don't agree with #4 or 7, though. The text is aligned to elements other than the center and I think they look good.


So that's what you do with a wacom!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: