7 ms·

Resources to Hack Design

119 points by jhdavids8 15y ago

iusable 15y ago
A good round up of design resources.
- iusable 15y ago
  lol i got downvoted cause i gave props?! :)
  - jhdavids8 15y ago
    Yeah, not too sure why that happened for you. Regardless, I appreciate the props and gave you a vote for it :)
jcarden 15y ago
This is a great list. You've nailed all the major resources. Good job!
- jhdavids8 15y ago
  Thanks!
zeynalov 15y ago
This site doesn't work properly an iPad 2 safari. CSS is not valid.
- jhdavids8 15y ago
  Hmm, if you don't mind me asking, what exactly is happening (I don't have an iPad at my disposal). The site uses Bootstrap heavily, and I just ran it through a CSS3 validator, which brought up no alarming custom CSS errors.
  - zeynalov 15y ago
    İt looks like there is no css just html. Maybe sizes of boxes are not adjusted right. Therefore the boxes ( logo, categories, post) are in one column. İ don't have a pc now to look its original version.
  - irollboozers 15y ago
    Try resizing the browser and making it smaller...
pazimzadeh 15y ago
I'm curious as to why you list things that you haven't used - I think the list should be a little more curated. I would add these to the list, which have been essential to my learning iOS design: http://pttrns.com http://pttrns.com http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/ http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-displa...
- jhdavids8 15y ago
  Mainly because I came across them from reputable sources (usually from others on the list like Smashing Magazine). Additionally, the list is more aimed towards web apps, so your recommendations wouldn't fit (many thanks though). With all that, if you don't like the list having things I haven't used, why recommend that I add other sites I haven't used? Not being an ass...just curious
  - pazimzadeh 15y ago
    Haha good point. I worded that badly, I was adding to the list in general for other HN readers, not saying that you should actually add them to your post.
geuis 15y ago
Thanks for this. Perfect timing, as I'm getting close to launching something.
kwellman 15y ago
A good set of resources. Thanks. Here's a few more that I've found useful: http://iconfinder.com http://iconfinder.com (or the similar http://findicons.com http://findicons.com) http://365psd.com http://365psd.com (free photoshop file everyday) http://www.colourlovers.com/ http://www.colourlovers.com/ (great for picking a color scheme) http://graphicriver.net http://graphicriver.net (really cheap graphics) http://themeforest.net http://themeforest.net (themes)
- jhdavids8 15y ago
  Thanks! I added a few to the post and attributed you. I'll be sure to use the icon sites in the future.
duhoang 15y ago
I commend you for your effort, but you can get a designer for cheap, and that can elevate your product tremendously. Without you having to hone your design skill if you are not interested in it.
tiddchristopher 15y ago
These are all great resources, but remember: The most important part of design is sitting back and thinking about the impact your choices will make. What will a given element say about your product? How will it affect functionality? If you can ask these questions, you can achieve great design. It easy to be distracted by glossy aesthetics, but a simple, well-thought-out, polished, application is what your goal should really be. So pay attention to every detail. No pixel should go unexamined. It sounds hard, and at first it's tedious, but it quickly becomes habitual. You start to look at the corners of boxes, or unfocus your eyes after you read a logo. If you're going to take this one step further, learn about typography and negative space. Specifically vertical rhythm and the use of 6. Just like you can't "hack" a well-designed API, you can't "hack" good design. It takes effort, attentiveness, and the willingness to try ten variations before you choose an option.
- tomatohs 15y ago
  I'm working on a framework based on standardized spacing and the number 6, specifically concepts from design or developers. http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong http://www.slideshare.net/Wolfr/design-for-developersonlinev... http://getrawr.com/ http://getrawr.com/
- soonisnow 15y ago
  Absolutely agree re: typography. Or to quote this great post from @iA, "Treat text as a user interface" http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period http://www.informationarchitects.jp/en/the-web-is-all-about-... It includes its own great list of other resources, including A List Apart and Thinking with Type. I think a vast majority of websites ignore even basic principles like spacing, negative space, readability, and rudimentary concepts about typeface pairing.
rglover 15y ago
I commend the author for pulling together these resources, but sorry, if you're not a designer (and have very little interest in being one) don't try to be one. Why? If I wanted to learn development (I'm a designer), I wouldn't look at a quickie primer on popular languages and frameworks or look at a list of code snippets. I'm sure to some design is a joke, but if you truly care about your product/whatever, you'll pay for it to be done properly (and whether subconscious or not, your customers will take notice).
- jhdavids8 15y ago
  That's not the point of the article. Developers frequently launch a startup and do so bootstrapping it. They can't always afford professional design help (I can personally attest to that). I listed these resources mainly to help that developer pull together a decent looking site, so they can maybe attract investors and subsequently a full-time designer. Also, I'm very much interested in design. And I by no means think it's a joke. Notice at the end I say this is no substitute for professional design work...it's simply a medium.
- brightghost 15y ago
  ...and it shows in the SkipScotch site.
danecjensen 15y ago
This list is great. Design is a lot like hacking. Keep making small improvements until you have something presentable. Don't be afraid to throw something out and start all over.
colinm 15y ago
Can't you put it altogether in a single cheat sheet for us lazy folk :)
janus 15y ago
Thank you for these great resources. Are there any recommended books for backend developers / hackers / programmers, about introduction to design?
nonrecursive 15y ago
Here's a quick intro tutorial on design that I put together: http://www.visualmess.com http://www.visualmess.com It was #1 on HN for a little while a year ago, and I still get positive comments on it. Hopefully it will be useful.

119 points by jhdavids8 15y ago

iusable 15y ago

A good round up of design resources.

iusable 15y ago
lol i got downvoted cause i gave props?! :)
- jhdavids8 15y ago
  Yeah, not too sure why that happened for you. Regardless, I appreciate the props and gave you a vote for it :)

jcarden 15y ago

This is a great list. You've nailed all the major resources. Good job!

jhdavids8 15y ago
Thanks!

zeynalov 15y ago

This site doesn't work properly an iPad 2 safari. CSS is not valid.

jhdavids8 15y ago
Hmm, if you don't mind me asking, what exactly is happening (I don't have an iPad at my disposal). The site uses Bootstrap heavily, and I just ran it through a CSS3 validator, which brought up no alarming custom CSS errors.
- zeynalov 15y ago
  İt looks like there is no css just html. Maybe sizes of boxes are not adjusted right. Therefore the boxes ( logo, categories, post) are in one column. İ don't have a pc now to look its original version.
- irollboozers 15y ago
  Try resizing the browser and making it smaller...

pazimzadeh 15y ago

I'm curious as to why you list things that you haven't used - I think the list should be a little more curated. I would add these to the list, which have been essential to my learning iOS design: http://pttrns.com http://pttrns.com http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/ http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-displa...

jhdavids8 15y ago
Mainly because I came across them from reputable sources (usually from others on the list like Smashing Magazine). Additionally, the list is more aimed towards web apps, so your recommendations wouldn't fit (many thanks though). With all that, if you don't like the list having things I haven't used, why recommend that I add other sites I haven't used? Not being an ass...just curious
- pazimzadeh 15y ago
  Haha good point. I worded that badly, I was adding to the list in general for other HN readers, not saying that you should actually add them to your post.

geuis 15y ago

Thanks for this. Perfect timing, as I'm getting close to launching something.

kwellman 15y ago

A good set of resources. Thanks. Here's a few more that I've found useful: http://iconfinder.com http://iconfinder.com (or the similar http://findicons.com http://findicons.com) http://365psd.com http://365psd.com (free photoshop file everyday) http://www.colourlovers.com/ http://www.colourlovers.com/ (great for picking a color scheme) http://graphicriver.net http://graphicriver.net (really cheap graphics) http://themeforest.net http://themeforest.net (themes)

jhdavids8 15y ago
Thanks! I added a few to the post and attributed you. I'll be sure to use the icon sites in the future.

duhoang 15y ago

I commend you for your effort, but you can get a designer for cheap, and that can elevate your product tremendously. Without you having to hone your design skill if you are not interested in it.

tiddchristopher 15y ago

These are all great resources, but remember: The most important part of design is sitting back and thinking about the impact your choices will make. What will a given element say about your product? How will it affect functionality? If you can ask these questions, you can achieve great design. It easy to be distracted by glossy aesthetics, but a simple, well-thought-out, polished, application is what your goal should really be. So pay attention to every detail. No pixel should go unexamined. It sounds hard, and at first it's tedious, but it quickly becomes habitual. You start to look at the corners of boxes, or unfocus your eyes after you read a logo. If you're going to take this one step further, learn about typography and negative space. Specifically vertical rhythm and the use of 6. Just like you can't "hack" a well-designed API, you can't "hack" good design. It takes effort, attentiveness, and the willingness to try ten variations before you choose an option.

tomatohs 15y ago
I'm working on a framework based on standardized spacing and the number 6, specifically concepts from design or developers. http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong http://www.slideshare.net/Wolfr/design-for-developersonlinev... http://getrawr.com/ http://getrawr.com/
soonisnow 15y ago
Absolutely agree re: typography. Or to quote this great post from @iA, "Treat text as a user interface" http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period http://www.informationarchitects.jp/en/the-web-is-all-about-... It includes its own great list of other resources, including A List Apart and Thinking with Type. I think a vast majority of websites ignore even basic principles like spacing, negative space, readability, and rudimentary concepts about typeface pairing.

rglover 15y ago

I commend the author for pulling together these resources, but sorry, if you're not a designer (and have very little interest in being one) don't try to be one. Why? If I wanted to learn development (I'm a designer), I wouldn't look at a quickie primer on popular languages and frameworks or look at a list of code snippets. I'm sure to some design is a joke, but if you truly care about your product/whatever, you'll pay for it to be done properly (and whether subconscious or not, your customers will take notice).

jhdavids8 15y ago
That's not the point of the article. Developers frequently launch a startup and do so bootstrapping it. They can't always afford professional design help (I can personally attest to that). I listed these resources mainly to help that developer pull together a decent looking site, so they can maybe attract investors and subsequently a full-time designer. Also, I'm very much interested in design. And I by no means think it's a joke. Notice at the end I say this is no substitute for professional design work...it's simply a medium.
brightghost 15y ago
...and it shows in the SkipScotch site.

danecjensen 15y ago

This list is great. Design is a lot like hacking. Keep making small improvements until you have something presentable. Don't be afraid to throw something out and start all over.

colinm 15y ago

Can't you put it altogether in a single cheat sheet for us lazy folk :)

janus 15y ago

Thank you for these great resources. Are there any recommended books for backend developers / hackers / programmers, about introduction to design?

nonrecursive 15y ago

Here's a quick intro tutorial on design that I put together: http://www.visualmess.com http://www.visualmess.com It was #1 on HN for a little while a year ago, and I still get positive comments on it. Hopefully it will be useful.