Ask HN: How do you design websites?

#1

Post by lukeqsee » Tue, Oct 26, 2010, 5:07 PM UTC

Here's how I design websites: http://twitter.com/#!/lukeqsee/status/28807917273

After using pen and paper to design several ideas, I'll put that into basic HTML markup, and get it functioning with jQuery. Doing that allows me to see if the interface is plausible and workable. Only after having most of the working HTML do I add any sort of graphic design. (I'm a horrible graphic designer anyways.)

What methods do you use to get from brain to product design? Start with a snazzy graphic design? Start coding and figure the design will come eventually? Use pen and paper? Tear up photoshop? HTML & CSS? All of the above?

We love to learn from each other's methods. Tell us your way. I'm sure it's the best. ;)

Re: Ask HN: How do you design websites?

#2

Post by RDDavies » Tue, Oct 26, 2010, 5:15 PM UTC

I try to do everything at once. It doesn't end well, so there should be plenty I can learn from in here.

Re: Ask HN: How do you design websites?

#3

Post by tgrass » Tue, Oct 26, 2010, 5:16 PM UTC

I'm a newbie and have been designing from the code up. I'm starting to design pages now from a blank sheet with red pen and I agree with you, it seems to allow for more options.

Re: Ask HN: How do you design websites?

#4

Post by madhouse » Tue, Oct 26, 2010, 5:21 PM UTC

While I'm quite terrible at design (I'm a coder, if anything at all), when I do end up designing websites, the first step is sitting back and figuring out what I really want: what kind of content will go there, who's the expected audience, what are my priorities (display speed, download size, bling, you name it).

Once I have that down, it's a lot easier to figure out a design. It's either pen & paper, but I can't recall the last time I actually drew a design on paper (I'm even worse at hand drawing than I am at design), or I fire up a tool I can make a mockup with: gimp, inkscape, dia - either works, and it depends on how detailed or how quick I want the mockup.

Once that's done, I convert it into HTML + CSS, and sprinkle it with javascript magic if so need be.

Meanwhile, since I do design iterations in bursts, more than likely, I will have the backend code ready aswell, and I will only need to convert the mockup to a template, and done.

Re: Ask HN: How do you design websites?

#5

Post by byoung2 » Tue, Oct 26, 2010, 5:36 PM UTC

One thing I used to obsess over when I did freelance web design was getting the design perfect. Every site had to be a work of art...just the right size buttons, just the right radius on the round corners, just the right opacity for a drop shadow. Then I realized that for the most part, users don't care. If they did, there wouldn't be so many people using Internet Explorer. And the search engines really don't care (...yet). More important than having a pretty design is having useful and relevant content.

Now that I realize that, I take a utilitarian approach to design. As long as the design is clean and the information is presented logically, I don't really stress over design. These days I use a lot of templates from ThemeForest.net, or quickie templates my team in the Philippines can do in about 3 hours for about $12.

Re: Ask HN: How do you design websites?

#6

Post by jenn » Tue, Oct 26, 2010, 5:57 PM UTC

When designing something from scratch, my process goes from a bit of sketch on graph paper to a Photoshop mockup. I'll let that stew for a day or so and tweak it here and there, maybe share with some friends for feedback, and then start coding it. I generally put all of the main elements into a structure and use FireBug to push things around to where I like them!

For redesigns of existing sites, it's more an exercise of rearranging elements that are already there so I -may- go into Photoshop and see what I come up with or I might just go straight into FireBug and move things around to get a general sense of where I want to go with it. This is especially helpful for proposing (quick) design changes to a client.