

Ask HN: Design tools and software.  What can I buy? - brador

My web designs look way too web 1.0 and I'm hard coding css in notepad++.  It's proving detrimental to quality.<p>What software and tools can I buy that real designers use to improve the quality of my web designs and make nice looking websites faster? (soft and hard solutions please!)
======
anujkk
While developing web applications and doing every part of it myself(design,
coding, everything), I have noticed that I design my web apps in three stages:

1\. Interaction Design: In this stage I design my web app's UX - mainly
wireframes. The focus is on usability and not on look and feel. For this the
only useful tools are paper, pen, whiteboard and an open, creative mind.
Knowledge of html,css,js will help you in determining what is feasible and
what is not.

2\. Illustration(optional):In this stage I take wireframes as input and create
a design that will look exactly like final desired product. I use vector
graphics tools to create design and then export it into png files. If some
heavy graphics is needed I also use raster graphics programs. Tools
recommended:

1\. Vector : Adobe Illustrator or Inkscape(open source)

2\. Raster : Adobe Photoshop or GIMP(open source)

I don't use anything else.

3\. Web Design : In this stage, I do actual front end development. I take png
mockups created in previous stage and make webpages by coding html,css,js in
my editor. Tools used :

a good editor(vim/emacs)

css reset(<http://meyerweb.com/eric/tools/css/reset/>)

jquery library(and some plugins)

Browser(Chrome/firefox for development/testing. IE8+ and Safari for testing)

Some browser plugins - Firebug, Color Pick, Resolution Test, etc.

Some sites - 0to255.com, kuler.adobe.com, ui-patterns.com,
smashingmagazine.com

That's it. Anything else isn't really necessary.

One more advice. Get inspired. Find sites that inspire you, sites with good
design. Learn from those designs. Keep learning. Keep improving and keep
designing.

Some recommended sites : <http://www.cssmania.com/> <http://dribbble.com/>
<http://www.awwwards.coam/> <http://themeforest.net/>

------
noahc
Buying tools or software isn't going to make you a better web designer. What
you need to do is practice and practice some more. If your goal is to be a
good web designer, then that's the only way.

Now, the question I think you're asking is how do I make my websites not look
like crap. Revorad answers that question and it basically is don't reinvent
the wheel.

~~~
brador
It's hard to practise when I feel what takes me 8 hours could be done in 1
with better tools. Like hammering a nail with a spoon. Yes, you can say
practise more, but I am using a spoon. I should be using a hammer since that
is what a person skilled in hammering would use.

So, I guess the question is, what "hammers" do designers use? Frontpage?
Dreamweaver?

~~~
roam
Look, noahc is absolutely right. If you think Notepad++ is holding you back
when coding HTML and CSS, you're wrong. You need practice. So practice.

Have a look at PatternTap (<http://patterntap.com/>) to find inspiration for
specific bits of the UI. Find out how you would create your own in
Photoshop/Gimp/Illustrator/Pixelmator/Paint. Maybe add a texture, find a
better color scheme or change around the font.

Then build it with HTML/CSS/JS. Use Frontpage, Dreamweaver, Eclipse, Vim,
Notepad++ or, hell, even regular Notepad. It does not matter.

Great designers use the tools they are comfortable with. Most use a tool such
as Photoshop to build something tangible (a PNG, PSD or, if you're management-
material, PPT). That let's them define the way the website should look under
ideal circumstances without getting to hung up on the correct HTML and CSS.
Then they cut that up and code it in HTML and CSS to create something useful.

That's what you need to practice. And if you're worried your designs look too
"Web 1.0", you need to focus on the first part of that process: defining what
it should look like, before opening up your editor of choice.

~~~
brador
It's not holding me back in terms of skill, it was a speed issue. I was
looking for drag and drop/tick box shadow drop style design rather than hand
typing #menu everytime etc.

However, thanks for the details! I've now got what I needed (some software
options to try out) so thanks for that.

------
revorad
WooThemes is awesome. It really is worth the money -
[http://www.woothemes.com/woomember/go?r=48107&i=l16](http://www.woothemes.com/woomember/go?r=48107&i=l16)

ThemeForest is cheap and cheerful - <http://themeforest.net/>

And of course, now there's Twitter Bootstrap -
<http://twitter.github.com/bootstrap/>

Check out David Kadavy's Design for Hackers book too, for more general design
learning.

~~~
brador
Cool, I'll check those out! Any tips on software and hardware to roll my own?
Do professional web designers use Wacom tablets or other specific hardware?

~~~
peng
I'm a professional web designer. I spend 95% of my working time typing in Vim
and refreshing Chrome. =)

Wacom tablets are generally for illustrators, not web designers. Freehand
drawings do not map well to the rectangular web.

~~~
brador
What do you use for images? Take your own or source somewhere?

What software do you use to lay things out correctly?

As a programmer, how do I best prepare a html page for a designer? Is putting
everything in a div with a unique id enough?

~~~
peng
Images: usually client provided, or none. Stock photography is awful in
general.

Layout: Content is divided into columns. Twelve colums, six colums, and three
columns are the usual suspects.

Preparing HTML for a designer: Use semantic HTML. For anything that's even
vaguely list-related, use <ul>. Do not put links in a div by themselves, but
sort them into a structured list. Do not use <br> for paragraphs.

------
pdenya
Pixelmator ($30) is a cheaper alternative to photoshop and much more pleasant
to use than gimp. It has tools for vector and rastor too.

