Hacker News new | past | comments | ask | show | jobs | submit login
Ask HN: basic web design for small projects?
34 points by Tichy on June 1, 2009 | hide | past | favorite | 38 comments
As I am seriously hampered by my lack of design skills, I wonder how others cope with those small projects (like small demos) that don't warrant hiring a designer. Are there some tricks to make simple sites look good? I remember one guy writing on HN how he just found a free web design template on the web, but even that approach failed for me so far. Did I just not look in the right places?



Basic design competency can be learned. Sure, you may not be able to learn to be a brilliant designer, but anyone can learn how to use Photoshop and CSS and how to produce a decent design.

I'm no designer either, yet I can make some decent designs (e.g. http://danieltenner.com) that, imho, look far from horrible.

The key is to practice and to get comments/criticisms from other people. It also helps to join a web designer forum and offer critiques of other people's designs. What you need is basically to train up your own internal critical engine so that you can point out the flaws in your own designs and correct them.

Being able to make things look good is a pretty useful skill in all walks of life, I'd recommend learning it rather than trying to outsource it.


Is there an alternative (on OSX) for this application (designing website/app layouts) to Photoshop? I've used Gimp in the past but they seem like completely different animals and the tutorials for Photoshop were all but useless.

I have a hard time swallowing the price of Photoshop for such a limited application, when I'd probably be using less than 25% of what it does...


There are viable options for a subset of photoshop's functionality. As you note, you can get 80% of the functionality for a huge difference in price, which is fine if you don't need that last 20% for whatever reason.

You can try pixelmator(1) (mac only) or pixel(2) (cross platform).

1) http://www.pixelmator.com/

2) http://www.kanzelsberger.com/pixel/?page_id=12


Take a look at Acorn (http://www.flyingmeat.com/acorn/) by Flying Meat. It lacks some of the more esoteric PS/Gimp features, but overall is substantially easier to use and has all your critical features (layers, filters, color adjustment, etc.). Oh, yeah, and it's cheap, too (free demo, $50 to buy)...


For designing the layout: http://en.wikipedia.org/wiki/Pen http://en.wikipedia.org/wiki/Graph_paper

For working with images: http://flyingmeat.com/acorn/


I have yet to find a comparable alternative to Photoshop. There are many attempts at duplicating it, but none of them are nearly as powerful as Photoshop.

I believe there are some "lite" versions of photoshop out there for cheaper prices, though...


Gimp?


Any pointers for getting started? I have occasionally used Photoshop and Gimp, but it doesn't help me much at the moment.


Yes. One of the best ways to acquire basic photoshop skills is to follow some photoshop tutorials.

There were numerous sites full of these on the web when I got started, and I'm sure there still are. Here's an example of what you're looking for:

http://psd.tutsplus.com/tutorials/tools-tips/use-over-40-adv...

Basically, it shows you how to create a concrete effect or object. The point is not to create the object itself, but to learn the techniques used to create the object so that when you want to create your own stuff, you have enough of a repertoire of techniques to achieve what you want.

As for places to get design critiques, I'm afraid I'm a bit stumped for that for them moment, since all the design communities that I belonged to back when I got started (around 1998) have died out since, but I would guess you can find them by starting with designer-oriented sites like smashing magazine or this psdtuts, and locating the forums attached to them.

Edit: I assume that you know where to learn CSS.


Thanks - I already know HTML and CSS, just don't know where to start with design.


Do this: go to delicious.com/popular/design. Find a site of which you love the design. Kick up photoshop, then push the pixels of the other site around till it looks like what you want. Find several sites and mix the elements. Pay attention to the fonts.

When you're done, get someone to convert it to HTML. Doing so yourself is a waste of your time.


I think where one's design skills can be considered lacking, as I very much consider my own, simplicity becomes increasingly important and attractive as a design philosphy.

Plenty of white space, clear typography, showing only what is needed, and aligning vertical and horizontal edges helps hugely.

Two tools that also help enormously: http://www.906.gs - a grid system for layout and http://www.colourlovers.com - Colour Lovers for awesome colour palettes.


I think you mean http://www.960.gs (Highly recommend it by the way). http://smashingmagazine.com has some great articles on design.


Thanks for the correction, voltageek! And Smashing Mag is an excellent resource indeed.


You should learn basic design principles first. Start reading this book:

Non-Designer's Design Book

http://www.amazon.com/Non-Designers-Design-Book-3rd-Designer...


I recommend Non-Designer's Design Book too. Its the best starter book on designing.

Combine that with making a few trips to colourlovers.com for selecting your site colours - and you're set.


If the template didn't work for you - perhaps you do just need to look around a bit - there are tons of good solid templates out there. here is 100 for starters: http://www.smashingmagazine.com/2008/12/01/100-free-high-qua...

Learn illustrator for the web or fireworks before photoshop if you want to do it yourself and nice curves work wonders.

I'm doing a slinkset site up at the moment (in my profile) which I haven't promoted yet as it need some finishing touches but it's going to be somewhere you can post for jobs like this, look for advice or find templates etc.


This depends on the project. I'm a non-visual person myself. If it's open source or non-commercial then I recommend http://www.oswd.org -- I have to admit your site will look very Web 1.0 but I've had luck outfitting my open source projects from here.

I'll second what others are saying: you should learn HTML, CSS (properties, selectors, box model, etc.), and become competent with Photoshop or The GIMP.

These skills let me modify (with mixed results) existing templates. They also save me money when working with a designer. I'm able to provide direction by modifying his mockups saving time (= $$$) and confusion in the process.


Any pointers for good existing templates? I already know HTML and CSS, and basic Photoshop/Gimp (even created title graphics with glow and shadows and stuff back in the day). But the only "template" I have available is YUI reset-fonts-grids.css, which looks worse than nothing at first, as it removes all styles.


Don't confuse a framework with a template. I would not consider YUI a template, and even basic CSS layouts (the common 2-column, 3-column, etc.) are not complete templates. Using a true template the design decisions (graphics, colors, etc) are made for you.

I'd recommend determining what content you want on the site, find similar sites, and then that will provide a basis for design. Look at oswd.org and smashingmagazine.com as mentioned above. Do a google search for css templates, etc. Even consider templatemonster.com.


If you use YUI reset, you can use YUI Base to get a consistent style as a starting point.

http://developer.yahoo.com/yui/base/


Minimalism can get you pretty far. Good examples: Cutline by Chris Pearson, Daring Fireball blog, Google.


Most color wheels will help you pick three colors, but this isn't really necessary in basic sites. One of the things I've used to overcome this is to just use two colors. Even better is to just stick to the grey scale.

From there, learn a bit about typography. Typography can make a huge difference on whether a site looks great or looks like utter crap. I've seen a few sites that kept color choice really simply without a lot of fancy graphics that truly looked beautiful.

Another thing that will definitely help is practice. Do a couple practice mockups and breakdowns. You can follow along to a tutorial like http://is.gd/Lpx4 or just wing it. The first design I did was a royal pain, but by the second or third design, the process became much more natural and a lot easier. Each subsequent design has gone a lot smoother as well, and I can only attribute this to practice and reading about design.


The advice above is great if you have a real passion and talent for design or if you really need to save the $$$. However, as a counterpoint I'll share some compelling reasons to hire/borrow a real designer, even if that means paying some $$$ for a short-term contract: (1) It takes time to learn design skills. Can you really afford the opportunity cost? Wouldn't that time be better spent on business/hacker work? (2) For a credible product, you need a professional finish. Sure, you can go for a simple look like Google but even doing that well takes serious skills. Design is like DIY in your home - it's easy to 'get by' but hard to do a real professional job. (3) You will probably take longer to do this work than a professional. This means that not only are you spending valuable business/hacker time but you're spending even more time than a professional would.


One problem I see with hiring a designer is that it becomes hard to change the site after the deed is done. It is difficult to make incremental improvements.


It's a good point. You can mitigate this by asking your designer to leave a PSD file with various UI components and teach you the basics of how, for example, to create new buttons in the site style. Of course, this doesn't help with brand-new innovative features or artwork in the same style. Artwork is where you feel this problem at its worst!


Photoshop, GIMP, CSS, etc. ara just tools. You should first get some good taste. It can be learnt. And it will pay well in the future (for example, you'll avoid hiring a bad designer).

Learn a bit of color theory, as to avoid creating horrible mashups. Don't trust just pre-baked palettes. The proportion you use of each color is even more important.

Learn some composition, read a pair of introduction books on design. The more you learn, the better.

Good design is hard to come by. In programming and in arts.


Design is a subject to be learned like any other - there's whole books and schools dedicated to it. Go to the library, look through some art and design books, if you see a style you like then write it down and emulate it (don't copy it outright, just use it as a framework or guidance). If you're into what a lot of people here are calling "minimal", look at modernism and the swiss-style. Browse published graphic design poster histories and start to pay attention to how the compositions are put together and what makes styles similar and different, and typography. In no time you'll have a greater appreachiation of the craft and your own designs will look a lot better. It's a lot like programming actually.


It sounds like you'd like to hire a designer, but the size of the project doesn't warrant paying for one. In this case, I'd recommend 99designs.com. Have a simple custom design created for a very reasonable price. Best of both worlds!


If you are in a hurry and do not have the patience, then you will only get frustrated if you try to learn from scratch. I suggest you go with ready-made stuff - like for CSS, take a look at BlueprintCSS (it makes CSS a hell a lot easier) -- go for minimalism with nice typography. Then get a good photo and in some minimalist design and it should be good.

Or better yet, ask your friends to do it ;-) there are guys out there who are trying to build up a portfolio and will be willing to do simple jobs for free.

Just curious, do you have a URL for your site?


Probably unrelated, but I could whip up a design comp for you quickly, minus the coding (I'm REALLY busy at the moment). Nothing in return, I just like to help :)


http://blueprintcss.org/ is much like 960.gs - a clear concise framework designed to give you nice typography with easy layout - look into it. It will save you serious time.

Get someone else to do graphics if that's not your thing.

Make sure any content (phrasing, wording, etc.) is TARGETED towards your users. As a developer, you will think you have the right content, but likely you won't.


Gotta like their sneaky "Sites using Blueprint" section that makes it look like a dozen high-profile sites are using it, when in fact it's only two little ones.


I'm in the same boat and while I will ultimately design a web site for the project, right now I am using WordPress which has a lot of really nice themes.


Use "Google Design": as simple as possible, no fancy css / photoshop / effects.

If worked for Google it will work for you.


No question, but I still see a big difference between my layouts and the average Ruby on Rails generation layout.


There you are with the Ruby on Rails web app theme :D http://github.com/pilu/web-app-theme/tree


If a small demo, as you put it, is important enough that you need to show it for your career, it's important enough to either spend the time learning web design basics to make a decent looking demo, or else to enlist outside help.

(This doesn't necessarily mean hiring an expensive web designer or design firm; I regularly consult on projects for cheap or free in order to help clients, business contacts, and friends, and have found that it almost always pays off in terms of establishing better relationships with people, who in turn refer projects back to me, etc.)

So, I guess what I'm saying is, if you're not the greatest at design but need design services, then, uh, try to make friends with a good web developer with altruistic tendencies.




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

Search: