Ask HN: How do you design your web pages? | Hacker News Reader

Ask HN: How do you design your web pages?

15 pointsJeremyChase39 comments

For years I have emulated the look and feel of other websites because my design skills are lacking. I want to be able to make my web-apps look attractive on my own, and would love to hear the experiences you all have had.

View on HN

What works for me is this:

(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.

(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.

(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.

(d) Fix stuff based on the feedback. Repeat (c), preferably with other set of people so that fresh eyes would look at it.

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.

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.

In short - do not 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.

Secondly - if you are lacking the inspiration, have a look at sites like http://minimalsites.com, http://pattertap.com and similar.

Thirdly - unless you do this professionally, it is 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.

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:

http://siglerdesign.com/blog/article/jivesite_20_its_alive

Specifically have a look at this photo and its title :)

http://www.flickr.com/photos/chibbell/2415207558/in/set-7215...

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.

I do the same thing, and store them in iPhoto. I sometimes take screenshots of an entire page, if I like the layout of the overall thing, but I also frequently just take screenshots of individual page elements: comments, a sidebar, a well done chart, etc.

My iPhoto library is synced to my iPod Touch, so I always have that library of design elements with me.

i do the same but save them in LittleSnapper http://pstam.com/i/66d19e0143126fadb748220c5c642ef1.png

Good tip. This is something I should be doing but I always neglect, and then when I really need a particular design element, I end up thinking "I once found something suitable, but where was that again..."

This might sound strange but here is my process:

- 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.

- 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.

- 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.

- Wake up the day after and check if it still feels okay.

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.

I have also accepted that I am not good at designing but I will not accept that I cannot get good at it.

In the last couple of months I've come along decently (working in the few spare hours I have!). I recommend that you narrow down to ONE package, IE Photoshop, and then start doing online tutorials.

There is a wonderful collection available to start with, my favorite place are the *tuts.com sites. psdtuts.com or nettuts.com

I have gotten good at following tutorials, but I can't make anything original. This might have been made worse when I visited a designer friend of mine at his work place; if the pro spends a whole day on one logo or photo, what hope do I have? life is too short, and my "friend" is affordable ;-)

I agree that learning a new design application can be done, and is even a worthwhile activity. However, I don’t think that knowing a software suite equates to being good at design.

Knowing the tools is a part of the package, yes, but there is more to design than knowing how to use the software. A designer with an eye for aesthetics and an understanding of both your product and your target users can be a very valuable asset.

"having accepted that I, for once, am not good at something"

This is an excellent point. I am in the same boat. At a pinch, I can bluff, hack or brute force my way through pretty much anything to do with programming, sysadmin, databases, whatever. Not as fast as an expert, ugly as hell, but it'll work. Mostly, heh.

This doesn't cut it for graphic design, however. When we're talking about the aesthetic appeal of a web site, it needs a real artist, an aesthete, a professional. It needs to be done well, and it needs to be done right - mashing stuff together is not an option. "Ugly but works" is inapplicable and anyway unacceptable.

Know your limitations. The front end is not the back end, and "good enough" is not good enough. Hire a pro, choose them carefully, and get opinions from non-techies before you commit. If you're serious, nothing else will do.

* Draw it on paper

* Photoshop

* Send it to the PSD2XHTML guys

* Add DJango template tags

Which service do you use? Do you have any sample sites they've done to take a look at?

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.

How do you test each design?

Here are two things have been useful for me:

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.

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:

"4. Understand your users."

http://paulgraham.com/13sentences.html

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.