12 ms·

Ask HN: What "Hello World" is for programmers, _____ is for designers

11 points by orlandop 16y ago

Working on startups (and any webapp), the general advice says that if you are a designer, you should have at least the basics of programming so you have some understanding of what they are expecting and vice versa. As a designer, it is pretty easy to find a "Rails 101" with a "Hello World" and learn the basics in a few days. In my case, I'm a programmer and want to know the basics of design. What would be the best approach? Most of the tutorials I see about design, seem to consider that you know the basics. So, basically, I want the "Hello World" of web design. Where is it?

dholowiski 16y ago
That's tough. A lickable logo?
- PsyVisions 16y ago
  "lickable" sounds good...
- brudgers 16y ago
  What flavor?
  - dholowiski 16y ago
    Apple.
revorad 16y ago
Align things on a page only using divs (no tables). I'm still trying.
brudgers 16y ago
The hello world of web design would be along the lines of: <html> <h1>Hello World!</h1> <p>Just Saying.</p> </html>
- orlandop 16y ago
  Actually, I was talking more about graphic design than web design per se. As programmers, we mostly know where to put stuff, my problem is when it comes to "prettifying" it for simple projects where it might not be cost-effective to hire a designer.
  - brudgers 16y ago
    That's more functionality than one would find in a "Hello World." The simplest approach is Picasso's - steal it.
dekomote 16y ago
"Lorem Ipsum"?
pdelgallego 16y ago
I have been teaching the same to myself. So far, I have learned: - how to do low def wireframes (mokingbird, balsamiq, etc) - from wireframes to psd files (fireworks, photoshop, etc)/ - learn how to slice a psd to css. What to learn: - UI/UX Desing Patterns [1] - Css Positioning [2] - Grid Systems [3], [4] [1] http://developer.yahoo.com/ypatterns/about/libraries.html http://developer.yahoo.com/ypatterns/about/libraries.html [2] http://www.alistapart.com/articles/css-positioning-101/ http://www.alistapart.com/articles/css-positioning-101/ [3] http://960.gs http://960.gs [4] http://www.dexigner.com/news/22052 http://www.dexigner.com/news/22052
- orlandop 16y ago
  Thanks! Just bought the "Ordering Disorder" book from link 4 on Kindle for iPad. That's a great start, doing the first layout seems to be my main problem.
d5tryr 16y ago
You'll probably have to read a book. The design discipline, for all it's pretensions at least admits that 'Hello World' is a fallacy. Visual design works by playing on emotions, perception and psychology. There is no simple reducible formula that governs what people find engaging and attractive. I'd suggest starting with 'Universal Principles of Design', it's written in a very easy to digest manner, but isn't dumbed down. Then move on to 'Grid Systems in Graphic Design'. These two should give you enough grounding to 'prettify' for simple projects.
limedaring 16y ago
The problem with design versus programming is that there is no "right" way of doing something. There is a right way of doing the Hello World program, because otherwise the program won't work. But no matter how your design looks, you're still designing. What you're asking for is the basics of designing well, which is a lot harder, since it's so subjective. Start looking at the basics of graphic design: http://en.wikipedia.org/wiki/Design_elements_and_principles http://en.wikipedia.org/wiki/Design_elements_and_principles I'd also look at well known web designers and note what works and why you think it works in their designs. If you see a website that's particularly readable, try to notice all the reasons why. Pay attention to elements that you like and don't like. Read about web design elements like grids, then when you get more comfortable, try breaking the grid (helps with emphasis — I find a lot of programmers who start using grids treat them like hard and fast rules that they should never break). Bottom line, there isn't a yes-or-no answer to design, just building up your "design eye".
gallerytungsten 16y ago
Lorem Ipsum. http://www.lipsum.com/ http://www.lipsum.com/
alanthonyc 16y ago
Buy this book: http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321534042/ http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... EDIT: It's a great book. It's not a "Hello World," but it will help you get to the point of being able to make one. It covers a lot of fundamental design concepts that I, as a developer, didn't know but am now glad I did.
proexploit 16y ago
I started doing a series of blog posts on Design for Coders and only finished one before putting the other drafts off to the side. Live post is here: http://blog.minim.co/design-for-coders-less-is-more http://blog.minim.co/design-for-coders-less-is-more. Shoot me an email and I'll send you the drafts for a couple other articles. If you (or anyone else reading this) has specific questions or topics, I'd be happy to answer/blog about them.

11 points by orlandop 16y ago

dholowiski 16y ago

That's tough. A lickable logo?

PsyVisions 16y ago
"lickable" sounds good...
brudgers 16y ago
What flavor?
- dholowiski 16y ago
  Apple.

revorad 16y ago

Align things on a page only using divs (no tables). I'm still trying.

brudgers 16y ago

The hello world of web design would be along the lines of: <html> <h1>Hello World!</h1> <p>Just Saying.</p> </html>

orlandop 16y ago
Actually, I was talking more about graphic design than web design per se. As programmers, we mostly know where to put stuff, my problem is when it comes to "prettifying" it for simple projects where it might not be cost-effective to hire a designer.
- brudgers 16y ago
  That's more functionality than one would find in a "Hello World." The simplest approach is Picasso's - steal it.

dekomote 16y ago

"Lorem Ipsum"?

pdelgallego 16y ago

I have been teaching the same to myself. So far, I have learned: - how to do low def wireframes (mokingbird, balsamiq, etc) - from wireframes to psd files (fireworks, photoshop, etc)/ - learn how to slice a psd to css. What to learn: - UI/UX Desing Patterns [1] - Css Positioning [2] - Grid Systems [3], [4] [1] http://developer.yahoo.com/ypatterns/about/libraries.html http://developer.yahoo.com/ypatterns/about/libraries.html [2] http://www.alistapart.com/articles/css-positioning-101/ http://www.alistapart.com/articles/css-positioning-101/ [3] http://960.gs http://960.gs [4] http://www.dexigner.com/news/22052 http://www.dexigner.com/news/22052

orlandop 16y ago
Thanks! Just bought the "Ordering Disorder" book from link 4 on Kindle for iPad. That's a great start, doing the first layout seems to be my main problem.

d5tryr 16y ago

You'll probably have to read a book. The design discipline, for all it's pretensions at least admits that 'Hello World' is a fallacy. Visual design works by playing on emotions, perception and psychology. There is no simple reducible formula that governs what people find engaging and attractive. I'd suggest starting with 'Universal Principles of Design', it's written in a very easy to digest manner, but isn't dumbed down. Then move on to 'Grid Systems in Graphic Design'. These two should give you enough grounding to 'prettify' for simple projects.

limedaring 16y ago

The problem with design versus programming is that there is no "right" way of doing something. There is a right way of doing the Hello World program, because otherwise the program won't work. But no matter how your design looks, you're still designing. What you're asking for is the basics of designing well, which is a lot harder, since it's so subjective. Start looking at the basics of graphic design: http://en.wikipedia.org/wiki/Design_elements_and_principles http://en.wikipedia.org/wiki/Design_elements_and_principles I'd also look at well known web designers and note what works and why you think it works in their designs. If you see a website that's particularly readable, try to notice all the reasons why. Pay attention to elements that you like and don't like. Read about web design elements like grids, then when you get more comfortable, try breaking the grid (helps with emphasis — I find a lot of programmers who start using grids treat them like hard and fast rules that they should never break). Bottom line, there isn't a yes-or-no answer to design, just building up your "design eye".

gallerytungsten 16y ago

Lorem Ipsum. http://www.lipsum.com/ http://www.lipsum.com/

alanthonyc 16y ago

Buy this book: http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321534042/ http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... EDIT: It's a great book. It's not a "Hello World," but it will help you get to the point of being able to make one. It covers a lot of fundamental design concepts that I, as a developer, didn't know but am now glad I did.

proexploit 16y ago

I started doing a series of blog posts on Design for Coders and only finished one before putting the other drafts off to the side. Live post is here: http://blog.minim.co/design-for-coders-less-is-more http://blog.minim.co/design-for-coders-less-is-more. Shoot me an email and I'll send you the drafts for a couple other articles. If you (or anyone else reading this) has specific questions or topics, I'd be happy to answer/blog about them.