I started looking into useful material to help improve my non-design skills, because well... they are non-existent.
I started with Twitter Bootstrap but I don't think it is the way forward if you want to learn design the proper way. I recently bought this book: The Non-Designer's Design Book (http://www.amazon.com/Non-Designers-Design-Book-The-Edition/...) and would warmly recommend it to anyone who wants to put one foot or their whole body into the design world.
I now try to spend more time analyzing the design of websites, brochures, menus, etc. It is very fun and I believe it is my observing and analyzing other peoples' work (mistakes included), then practising, that you can improve your eye(s) for design.
You can't just put in a bid that looks the same as theirs except for the dollar amount. You have to differentiate yourself:
- Communicate clearly. Before you've even put in a bid, ask questions and discuss the technical challenges you foresee. Be prompt; respond within hours rather than days. Make it clear that they're getting a whole different level of ability with you than with the bottom of the barrel.
- Be willing to offer a quick turnaround on a sub-project, as a proof of ability. It's a big risk to commit thousands of dollars to you sight-unseen, but if a client can commit $50 to have you fix a smaller problem, this can give them confidence to go with you for the full project.
- learn some rudimentary design (something like http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... ). "Full stack" isn't full enough; your clients don't want to put together a team, they want to pay their money and get a complete product. Coders who can make an ugly website are all too prevalent; separate yourself from them.
- if you're going through a freelance site that has certification tests or similar, take a day and go through them. It shows you're willing to put in the effort -- or, rather, not having done so shows the opposite.
http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
The author simply reorganized the principles, and that's dishonest. http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
Papaerback - http://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Will...
Kindle - http://www.amazon.co.uk/Non-Designers-Design-Book-3rd-ebook/...
What you're observing is probably the lack of a strong line on the left side. The right edge of the Y Combinator logo ought to form a guide line down the page, with the voting arrows' right edge X pixels to the left and the text X pixels to the right of that, and this line should also propagate through the text entry box and the reply button and so on. Instead, there's the logo, the link, the textbox and reply button (which do at least line up with each other), and the first layer of comments, each of which has its own individual vertical line. (I think. Comments and the title text are close but I'm not sure it's quite right, and there's so much interference in between it doesn't matter.) I Am Not A Designer but I know enough to know that's wrong.
Also, the bottom of the Y in the logo should form a horizontal line that the rest of the text in the title bar lines up with, whether or not that happens for you appears to depend on the zoom level of your browser. (For me right now the "Add Comment" is visibly above the Y, but when I zoomed in to look closer it actually dropped below that line. By the way, designing on the web is hard. Also my website sucks and I know it. It's on the list.) Something should probably also be done with the horizontal line the voting arrows line up on.
Cleaning that stuff up would be a start. It probably wouldn't be enough, and then I'd be stuck, because I only get the really basic mechanical stuff. Everything I've phrased as fact in this comment should be taken to be opinion, it would just be very tiresome for me to type and you to read the same caveat over and over.
http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
After you finish that, you'll be able to put together great wireframes and layouts.
For the color part I'm reading a book on color theory. The very first thing I learnt in this book was that there is a reason that beginners cant work with color - because they cant "see" true color. This takes a while - google for "Color constancy"
These are the very basic steps that I wish someone had pointed me to ... everyhting else builds up from here.
Landing page:
make the logo bigger upper left. make the logo subtitle a phrase that is formatted as a direct answer to the question "Why are you here?" make the logo aligned with the body text to make the left axis of alignment on your page stronger. Consider changing the background gradient to something radial rather than linear and more stylized. Maybe a darker luminosity to emphasize that the notebook page is the foreground. Do not use centered alignment in your content page. Always use left or right alignment unless you have a really good reason for making it centered. There isnt much repeated style between elements Uh... I'm going to stop mentioning design stuff and just say you should either hire a designer before a programmer\hacker or get this book for some really easy to act on practical advice: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
App: On notes under an idea I like how it hides unnecessary interface features unless you mouseover..... I think you need to incorporate this design methodology in more places with cruft on the site. I am allergic to cruft, squint until your eyes go blurry and see how many different "chunks" make up the page and try to limit it to 5-7. Tags is plural but only seems to accept one thing. You need to show "state" better. For example you know how some sites use breadcrumbs? Like it will say "Metamemetic's Ideas > A First Idea > Notes" or something and they are all links to navigate back and forth, and they are all the same style in the same location and instantly convey where I am in the site. You don't have to use breadcrumbs just make it super obvious for the user to tell where they are and what they are doing at all times with no clutter around whatever the "state" indicator is. and don't have multiple "state" indicators, just one all informative one.
overall it's a good idea though with a good code foundation! Props for getting something out there
I would try and leverage the fact that you are creating tree data structures with ideas and notes to do some interesting things in the future, but just improve the UI and UX first.
[I don't know if I would use the site personally because I use Git to version control my local repository of random ideas, but there could be a good target market. Not sure who your target market is... you should pick one and post on whatever forums they are currently sharing ideas on and see what features they would need\want to use your site. Or if your site ends up functioning better as a personal planner\to do list than a collaborative editor, maybe market it as increasing ones organization and productivity]
a. The look: the graphic design of the page.
b. The interaction: Usability and UX
c. Designing and coding with good software design principles.
d. Some thing else?
I can point you to some good books for b. or c., however a. is the holy grail. I have never found a good book on web design from a graphic design perspective. That said Ill share with you what I would consider the closest I have found.
----------------------------------------------------------
a. (Web site Graphic Design)
* The non Designer's design book - http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
* Visual Language for Designers - http://www.amazon.com/Visual-Language-Designers-Principles-U...
* Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...
* I have found some good online articles http://delicious.com/csmeder/ux
----------------------------------------------------------
b. (Usability and UX)
* Web Form Design: Filling in the Blanks - http://www.lukew.com/resources/web_form_design.asp
* The Design of Sites: Patterns for Creating Winning Web Sites - http://www.amazon.com/Design-Sites-Patterns-Creating-Winning...
* And again Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...
* Information Design Workbook http://www.amazon.com/Information-Design-Workbook-approaches...
----------------------------------------------------------
c. (software design and coding)
* Bulletproof Web Design - http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro...
* Handcrafted CSS - http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Desig...
* jQuery in Action - http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...
1. Read "Non Designer's Design Book" (amazon: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...).
2. Subscribed to a lot of web-design blogs (try Six Revisions, NetTuts etc.).
3. Learned to work well with Photoshop. I especially loved Lynda.com's Photoshop courses.
4. Designed, designed, designed. As with everything else, actually doing is the most important thing.
It covers the basics of design, color theory and typography. It's a great start.
Non-Designer's Design Book
http://www.amazon.com/Non-Designers-Design-Book-3rd-Designer...
It was written without the web in mind. It's mostly about typography and spacing for posters, business cards, flyers, etc. But it translates suprisingly well to web design.
http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
It's short and to the point, so it won't take long to read, yet it covers all the basics of design to just the right level for the average developer.
"Design for Hackers" by David Kadavy is also quite popular, but IMO it just takes longer to say the same things.
Amazon links for the lazy:
https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Wil...
https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133...
Edit: Since several of the latest comments seem to be saying similar things about programmers not "getting" design, I think one thing that may come as a bit of a revelation is that design starts with a hierarchy of information and there are certain rules for how that information should be presented. There is an artistic aspect to compelling design, but when it comes to things like wireframes and UX modelling, your average programmer probably has more design skills than they realise.