

Ask HN: How do you design your web pages? - JeremyChase

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.
======
huhtenberg
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...](http://www.flickr.com/photos/chibbell/2415207558/in/set-72157604540028078)

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

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

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

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

~~~
mattyfo
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

~~~
mahmud
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 ;-)

------
nailer
* Draw it on paper

* Photoshop

* Send it to the PSD2XHTML guys

* Add DJango template tags

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

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

~~~
tokenadult
How do you test each design?

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

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

See also

<http://www.useit.com/alertbox/9605.html>

------
falldowngoboom
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: <http://960.gs/>

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

------
dualogy
Start ugly, refine until you love it.

~~~
dualogy
It's the "fast track to everything", if you humbly accept that is not going to
be fast AT ALL -- depending on for how much perfectionism you strive.

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

------
noodle
whats wrong with emulation?

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.

whats wrong with doing the same with respect to design?

~~~
ErrantX
Agreed. Take Facebook; one of the biggest sites in the world, is changing not
so subtly to emulate Twitter.

~~~
dasil003
I don't like the example. Facebook is a master of interactive design, and is
pushing the envelope of large-scale AJAX design while remaining surprisingly
agile. Twitter is just a utility.

~~~
larrywright
Regardless of how you feel about Twitter, the example is still applicable. To
anyone who uses both, it is very obvious that the the latest version of the
Facebook home page is very much inspired by the Twitter home page. Facebook
has certainly added it's own touches to that concept, but it's hard to deny
the influence that Twitter has had on Facebook.

With that said, I concur that Facebook does interactive design very well. They
are a good source for inspiration for your own applications.

------
tzury
<http://99designs.com/>

~~~
callmeed
I tried them for a logo once (side-project). The candidates I received were,
for the most part, amateurish and weak.

I'd worry the web designs coming from there would be the same.

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

~~~
huhtenberg
"Perfection is achieved, not when there is nothing more to add, but when there
is nothing left to take away." -- Antoine de Saint-Exupery

i.e. minimalism rules :-)

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

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

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

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

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

