Ask HN: How do you design your web pages?

What works for me is this:<p>(a) Routinely keep an eye open for nice website designs. If I see something I like, I take a screenshot and put a little note on it as not to forget what exactly I liked. So far I have about 70 shots, and this covers a lot of ground.<p>(b) When sitting down to design the page/site, I'd pick the one that seems to fit the best and then start evolving it by changing elements that don't fit or that I don't like. This is purely subjective process, and it takes a while to converge to a stable point. All sketches are done in Photoshop, no HTML/CSS work at this point, none.<p>(c) When I have a sketch, I show it to at least 3 people, usually my wife and friends, describe the project and what feelings the design should evoke. Then ask for an overall 3-second impression as well as what "sticks out" or doesn't look visually pleasing. You'd be surprised how much people actually like to critique when asked.<p>(d) Fix stuff based on the feedback. Repeat (c), preferably with other set of people so that fresh eyes would look at it.<p>Additionally, I frequently need to decide between multiple (smaller) options, like the fonts, sizes, minor color variations, etc. For these I put together a side by side comparison sketch and simply ask people to tell me their preferences.<p>The feedback loop is helpful and incredibly important, because after first few sketches I cannot objectively evaluate design anymore and need fresh eyes to look at it.<p>In short - do <i>not</i> hesitate to start off someone's work. It is an A-OK. Building a portfolio of inspiration pieces is a standard way of kick starting the design. Iterating over the design tend to evolve it quite dramatically and get you to a design that is uniquely your own.<p>Secondly - if you are lacking the inspiration, have a look at sites like <a href="http://minimalsites.com" rel="nofollow">http://minimalsites.com</a>, <a href="http://pattertap.com" rel="nofollow">http://pattertap.com</a> and similar.<p>Thirdly - unless you do this professionally, it <i>is</i> a lengthy and sometimes tedious process. It takes me on average 4 to 6 weeks to decide on a general look and feel for the site.<p>Lastly, here's a post on the subject written by a professional designer. Have a read, it gives a nice view into the process as employed by other people:<p><a href="http://siglerdesign.com/blog/article/jivesite_20_its_alive" rel="nofollow">http://siglerdesign.com/blog/article/jivesite_20_its_alive</a><p>Specifically have a look at this photo and its title :)<p><a href="http://www.flickr.com/photos/chibbell/2415207558/in/set-72157604540028078" rel="nofollow">http://www.flickr.com/photos/chibbell/2415207558/in/set-7215...</a>

I routinely take screenshots of design elements that I like on the web and when brainstorming on some design work I have to do I first check out my small collection.

This might sound strange but here is my process:<p>- A couple of days before I need to start work on a feature (or a section), I start visualizing what my ideal end result should look like. I tell myself "Imagine there were no constraints and I could build any type of an interface I can". I do this while I walk around, shower, before I go to bed, after I get up etc.<p>- During this time I critique designs over and over again. I think less about if I can do it and more about will I like it. By now I have an idea of what goes where and what type of UI elements to use and when I browse around I have a clear idea of what to look for.<p>- When its time to work on it, I but the basic stuff together. If it looks promising then keep building it up part by part until its finished. I play around with it for the day.<p>- Wake up the day after and check if it still feels okay.<p>Its funny because the last step is purely to help me reject bad designs. For example, lets say I'm on the fence about this new design. After I'm done working on it, I'm usually tired and feel terrible about scrapping it. So I walk away and comeback next morning and I'm more likely to scrap it now that I feel ready to give it another shot.

I am budgeting to hire a designer, having accepted that I, for once, am not good at something. Graphic design traumatizes me: I have photoshop, gimp, paint.net and inkscape. It will take an act of God to help me figure any of it out.

* Draw it on paper<p>* Photoshop<p>* Send it to the PSD2XHTML guys<p>* Add DJango template tags

An important thing is to try multiple radically different ideas. Oftentimes I'll feel like a design is okay, then try a new one and realize how much I would have regretted staying with the old one. So now I always try to create at least 3-4 different layouts/designs before I settle on using one.

Here are two things have been useful for me:<p>1. Looking at a bunch of nicely designed sites and inspecting the background images and source code so that I can see conceptually how effects are achieved.<p>2. Using a CSS framework that abstracts many browser-specific idiosyncrasies away.

I'm amazed that all answers posted as I post this don't refer to one of pg's key ideas about making a successful start-up:<p>"4. Understand your users."<p><a href="http://paulgraham.com/13sentences.html" rel="nofollow">http://paulgraham.com/13sentences.html</a><p>I would think that the very most important thing to do in designing a website is to build in usability and user-friendly information architecture, and to have a process to test how well the users like the site for getting their tasks done.<p>See also<p><a href="http://www.useit.com/alertbox/9605.html" rel="nofollow">http://www.useit.com/alertbox/9605.html</a>

You might like the more rational grid approach to web design. Once you familiarize yourself with it, you'll start seeing it everywhere... A good place to start is: <a href="http://960.gs/" rel="nofollow">http://960.gs/</a>

Keep emulating but start studying design principles as well (color theory, composition, typography, UI fundementals, etc.). That way you'll be able to identify the elements in the design and why they work.

Start ugly, refine until you love it.

Either you have the sense of aesthetics or not ... if yes you'll learn &#38; love designing as coding ... if not you'll have to find a very good designer because the user interface matters more and more

whats wrong with emulation?<p>even in building a slick, new, innovative startup, you're rarely striking out into purely uncharted, untouched territory. (for example, if you use a framework, a big chunk of your code will look exactly the same as a lot of others out there). odds are you're just taking solutions and concepts that previous people have pioneered and combining them in an new/innovative way, possibly throwing in a unique idea/element or two into the mix.<p>whats wrong with doing the same with respect to design?

<a href="http://99designs.com/" rel="nofollow">http://99designs.com/</a>

"Good artists copy, great artists steal." -- Picasso (attributed to)

I have a library of over 1000 Web page screenshots in iPhoto (am transitioning to LittleSnapper though) that I use as an inspiration/swipe file. That said, I've often found just "making it up as I go along" to have the best ultimate results. I tend to throw down something really bare and then iteratively spruce it up with inspiration from a variety of sources.

I have a friend who is a designer. I help him with some basic code for clients (newsletters, wordpress installation, etc.) and he does design stuff for me.

OP here.. Thank you to everyone for the feedback.

Firstly, read about design theory. Designers would love to convince you that what they do is magic, but if you read or even browse through books like "The Art of Color" by Johannes Itten or "The Elements of Typographic Style" you'll have a better understanding for the mechanics of establishing a visual style/rhythm, and to me that's the majority of design...establishing a balanced, consistent rhythm.

Although this is the more hands off approach, if you have a mac, get familiar with RapidWeaver. I actually started learning web design with RapidWeaver and it was great. Since then I moved onto writing my own code and I discovered that using custom code inline with RapidWeaver is a great approach. Rather than rip off other ideas, gain powerful functionality and create your beautiful design.