
Ask HN: Do you design your own website? - MisterWebz
I've been trying to learn some CSS to design a website i'm working on, but all my designs turn out to be horrible and on top of that, i really don't like web design nor do i like learning CSS. However, i do know that the design of a website is very important and i believe that it can make or break your app. So do you guys design your own website or do you hire/ask someone else to do it?
======
oneplusone
Well first off, CSS and design are related by they are not the same thing. You
could be the best CSS guru out there, and still not know how to design.

Don't believe what 37 Signals say, if you skip the Photoshop step in the
design process then you will end up with crappy looking designs, and most
likely, badly functioning ones as well.

If you do hire a designer you should know that there are really two different
classes of design when it comes to the web.

First off, there is the normal web designer guys. If you are looking for
quality 99 Designs is not the place to go, but it is where a lot of people end
up anyways. Go there is you want them to just rip somebody else's design off
or use a cookie-cutter template with a few modifications because that is all
you are paying them to do and they do not care much for quality. It is a
volume business.

A great website designer will run you around $50-75 per hour. D don't expect
to get a great website for less than $5,000 if it is a small one and $15,000
if it is medium sized. Good design takes a lot of time and iteration.

The second class of designers are interface designers. While web designers
care about the marketing of a product, interface designers care about the
functionality of the product and how to make it easy to use. Just because you
are good at one doesn't mean you will be good at the other.

Interface designers are rare and go for $100+ an hour if they are really good.
The most I have charged for a job doing interface design is $225, but it
averages at around $100.

~~~
zacclark
I agree with most of your points, except that you can't skip photoshop.

Depending on your skill levels in various tools, it might be way better to
simply start into html + css. I know a couple designer/developers who can go
from an idea to visuals dramatically faster in code than they could using
photoshop (myself included). Additionally, you get the advantage of being able
to style simply effects in right away (ie, hover states, focus states, etc)
instead of having to create extra layers or version of a PS file.

~~~
oneplusone
Sure, if you don't know Photoshop very well then you could code it faster.
Except you will end up with sloppier code and a weaker design.

It is the equivalent of building a house without blueprints. You can do it,
but if you take the time to plan things out before you break ground you will
end up with a stronger product.

Now, if you already have a design style locked down and code you can just
puzzle together then sure, go ahead and skip Photoshop. I do that as well.
But, as soon as I need to design a new UI element I am back in Photoshop
making dozens of variations.

~~~
unavoidable
I understand your general gist... but I find sketching the design by pencil
and paper much faster than photoshop - obviously I don't get pixel perfect
results, but the intricacies of CSS mean that it's difficult to match a
photoshop design pixel-by-pixel anyway. I agree that it's much better to have
a visual plan in place first, but photoshop would definitely slow me down, and
I've designed dozens of web sites.

~~~
oneplusone
Pen and paper should be used as a tool to help in the thinking process, but it
is not a replacement for real computer mockups.

Sketching doesn't give you a realistic sense of space and feel for web design.
Very often you can sketch something that looks good on paper, but once you put
it on the screen it just doesn't translate well to a pixel medium.

Sketching is great if you are working with a physical medium like brochures or
posters though. Then it doesn't suffer from the same translation cost.

------
iamwil
I'm an engineer, but I design my own. I'm not a great designer, but most
importantly, it's usable. I mainly stay away from too many fancy things, and
stick with a general color palette, the right font, and most importantly,
spacing and vertical rhythm.

I suggest you take a look at a book called design for non-designers by robin
williams (not the actor).

And this post has really helped me.
<http://www.betaversion.org/~stefano/linotype/news/169/>

~~~
MisterWebz
I think i should do the same thing. I always try to make fancy web 2.0
buttons, but they usually turn out ugly which is really discouraging.

~~~
anurag
With Compass you get fancy buttons for free: <http://github.com/imathis/fancy-
buttons/>

------
newmediaclay
We've done both. For our corporate site, we designed it and for our product
site, we went to an outside designer. We're getting ready to redesign our
corporate site again, and I think this time we'll definitely look to outside
help.

The reason isn't that we can't handle it (we're a web design and development
firm), but because there are several immediate, key advantages gained by going
with an outsider:

1\. It doesn't come second to other client/product work. When doing the site
for ourselves, it takes 3x as long, because we'll push it off when a new
client project comes in or we need to make enhancements to our product. By
hiring someone we avoid this conflict.

2\. It's important to get an outside perspective. We're so ingrained in the
day to day that we can lose site of how to present ourselves to our customers.
Things that may seem really important to us may not matter at all to people
shopping for web dev. A good designer is able to look past our subjectiveness
and come up with a design that meets our consumers needs.

3\. You care more when you're paying someone. When we do it ourselves, we
often say "well, that's good enough for now, we can tighten it up later" --
later almost never comes. When you're paying someone $5,000 out of your
pocket, you'll make sure they hit the nail on the head the first time and be
more willing to critique them than your own team.

------
jamii
I found this guide incredibly useful:

<http://www.betaversion.org/~stefano/linotype/news/169/>

It gives step by step instructions on building and refining a design.

~~~
PStamatiou
Thanks for this. Just learned about css_browser_selector. This will be super
handy for me.

<http://rafael.adm.br/css_browser_selector/>

~~~
eagleal
You can also do it directly from useragent, or jQuery.browser (maybe with
$.browser.version). (other js frameworks should have it under utils)

------
duck
I design my own, but I realized on my last project that I spend _way_ too much
time doing it. So I have told myself that next time I will work with a
designer. Patrick (patio11) had a great idea on one of his articles about
getting a designer just to do one page and then take and modify that for the
rest of the site. That of course depends on how complex the design is, but in
general one could get the best of both worlds by going with that approach.

------
hopeless
I'm comfortable with CSS and HTML but I'm not very good working from a blank
slate so I tend to grab a plain HTML theme from ThemeForest
(<http://themeforest.net>) and then modify it myself (usually: recoding it to
use Blueprint, removing excess elements etc, changing some styles). I find
their themes to be generally of good quality and amenable to such
modification.

~~~
wenbert
Blueprint CSS is really good. I have saved to much time using a CSS framework
rather than coding all the CSS myself.

------
cperciva
I designed my own website, but I'm sure tptacek will tell you that I shouldn't
have done so. :-)

~~~
wwortiz
I admire tarsnap's design it is clean and rather functional (except for maybe
the tables for usage).

I don't mind websites trading style for functionality

~~~
cperciva
_except for maybe the tables for usage_

What's wrong with them?

~~~
wwortiz
Personally I find them hard to read without any padding and it is much easier
to read tables when they have alternating colors (I think some people like to
call them zebra tables).

That is about it though, just a nitpick with my tastes.

------
davidedicillo
I'm a designer so yes. The point is knowing CSS doesn't make you a good
designer just as much owning a Nikon D5 doesn't make you a good photographer.
Some people have natural talent for balance and aesthetic, some others acquire
that with lot of practice. I say, if for you the design of your site is
important, hire a professional. I develop simple stuff I do it myself, but if
I need things to be solid and scalable I hire a developer.

------
techiferous
I'm a developer but I love design so yes, I design my own.

------
generalk
I design my personal website, for the experience. I'm not great, but I'm okay,
and I can redesign whenever I feel like it. But since I'm not stellar yet,
I'll either use a quality template service or hire a designer for projects
where it matters.

------
Scott_MacGregor
We both do front end and back end coding and design, and have the tools (and
knowledge) needed to do it properly.

As advice from someone with experience, I would say do not expect to hit
anything close to home run on your first attempt. It might be easier for you
if you can find a front end that you like and do a screen capture as a jpg and
try to build that verbatim using your own code. Then modify that code to do
what you want. Dreamweaver might be a decent tool for doing this. You could
pull all of the code and pics from a working site and rebuild that as your
first model, but you can probably code it yourself quicker and better.

If you want to build from scratch, knowing how to use Photoshop or a similar
tool might make your vision for the site easier to implement. Plus you can
give the jpg you make to someone who can write code in your desired language
and have it implemented by that person.

Anyone can build a webpage but, if you are trying to do this in Notepad or
something similar, it is going to be a tough uphill climb, and you may never
fully reach your desired goal. So make sure you have some good tools for the
job.

------
jsarch
As someone who is about to have gone through the process twice of starting
from scratch and launching (with a team of at most 3), I recommend that you
_use your time wisely_.

The first time through, we had my design up for the first 1.5 years followed
by a professional overhaul from a close friend when it started to gain some
traction. The difference between the two designs was night-and-day.

This time through, I put up a quick landing page with some basic "coming soon"
boilerplate at the beginning. Since I enjoy a minimalist and clean design, I
can hack together a site rather quickly. Yes, it is functional. Yes, it
appeals to me. No, it doesn't look professional. But most importantly,
updating and maintaining it occupied a lot of my time that I could have spent
working on the back-end.

The 2nd design was crafted by a designer. Unfortunately, because I had spent
all of my time doing the design the first time, I now had no content to give
to the designer to work with. I'm sure that he hated the fact that I kept
changing my mind on the public pages every other week. To his credit, he
created a very impressive set of internal pages for the web-app even though
that wasn't his strong suit.

With some content finally available, I hacked the public pages to create the
3rd (and current) site to accommodate the new content.

With an imminent launch, I've finally done what I should have done first:
place an ad in Smashing Magazine and hire a designer! In fact, I was able to
find a gfx/web designer for the front 4 pages (home, features, tour, signup)
_and_ a usability designer _in our scientific discipline_ to evaluate the
internal pages. Best of all, I get to launch the company sooner!

Long story short, our launch is imminent because I get to focus on what I do
best (HPC back-end) and the front-end gets done by an expert.

------
faramarz
Ideally if you have a designer friend in your circle, you should go to them
for a discounted/better rate.. but there's no question that you need somebody
with an _eye_ for great design coupled with skills and experience who can
design rather than "put together" a template.

I personally think your first step in having a great design and web experience
for your application is to approach it from an Interaction Designers
perspective.

Get on the white-board and start putting together all the necessary elements
you need for every process of your app flow.

Once you have a clear picture of what you need and don't need, and how the
user interacts with your application, then you can easily communicate those
needs to a creative talent or a design shop. This way every design decision is
made with a purpose, not just because it looks nice.

------
tworats
I'm an engineer, but picked up enough design sense and CSS to be dangerous.
After designing several sites I can confidently say I suck, but not more than
50% of the professional designers out there.

Good design is hard. The problem is it's hard for many who claim to be
designers as well, so unless you're willing to pay for a good designer you'll
end up with crap.

\- Read the "non designer's design book" by Robin Williams. Pay particular
attention to typography, spacing, and keeping it simple and minimal.

\- Don't go for the gradients and other fancy techniques; just concentrate on
getting the basics right.

\- Get your color scheme and spacing right and apply it consistently.

\- Use a grid.

To sum up: hire someone good to do it for you. If you can't afford that then
read/learn and stick to a minimal design and you'll be ok.

------
drewbuschhorn
They're pretty bad, but you might consider: <http://www.freecsstemplates.org/>

Just don't let the template you choose influence your decisions about what
should and shouldnt be in site....let form follow function.

------
revorad
I am using help from a graphic designer friend. You might find the CSS Mastery
book helpful. Copying other pro sites seems like the easiest and most
efficient way if you don't want to spend too much time on it.

------
kno
I tried and realized quickly that its not just about knowing css, javascript
and html and all; you have to have the designer touch. So I quit web site
design and hired a kick ass designer to do it for me.

------
paul9290
Have you look into hiring a graphic designer to create a PSD design for you in
which you can then splice and code up? This is generally how design works;
something I learned, after hiring a guy who said he was a web designer but on
finished project he only gave me a PSD and said I dont code.

My 1st attempt at design was not great, so I have learned for me to create a
sharp looking site, it's best I hire a graphic designer to do all the artwork
(buttons, drop shadows, etc). I then modify their work(the PSD) and then
splice & code the PSD.

------
zavulon
The most important quality for the designer is to have artistic taste. Try to
objectively figure it out if you have it. Do you regularly get complimented on
your clothing choices? Do you always match colors? Does your apartment look
cool (if you did your own decoration)? If you're not sure, ask some non-family
members for their objective opinion.

If you find out that you don't have much artistic taste, don't worry - most
geeks don't. That just means you have to hire a designer, because yes, a good
design is VERY important.

------
zeroxsys
We are a Web development service provider. We design and develop our own
website, as a proof to clients what we can do. But sometimes, when it comes to
your own website, you tend to put everything you know in there - make it the
best one you did. As a result, you take too much time doing it, instead of
others doing it for you. So if you have a specific launch date, develop your
own website within that period only. Otherwise, hire someone to deliver your
website at your desired deadline.

------
Mz
I did a redesign on a couple, using some of the graphical elements and CSS
originally created by someone else who did the designs for free but
rearranging the page more to my liking. One I designed completely on my own
looks pretty bland and crappy to me. Most recently, I started a blog and went
ahead and used a free premade "style". So I do a combo of things, I guess. I
like being able to arrange the page the way I want it but visual design is
something I am quite weak at.

------
mshafrir
On my next serious project I'll look to collaborate with a designer. My
problem is that I never know how to pick a good one, and what a "good" rate
is.

------
lsc
I did... <http://prgmr.com/xen>

I'm profitable.. does that mean design doesn't matter? or does that mean that
a minimalist, web 1.0 looking design can lend credibility in some markets? I
don't know.

I used the YUI css and layouts, and probably spent maybe an hour working on
the design, including setting up ssi include files to pull in the content.
(haha. xbithack on!)

------
loupgarou21
I have designed all of my websites, but I'm not trying to make money on any of
them. I have been happy with the way some of them have ended up, disappointed
with others.

I currently rely heavily on CSS for the layout of my websites, but truth be
told, I'm only doing it as a learning exercise. I also actually enjoy figuring
out how to get my websites to look identical in as many browsers as possible.

------
matt1
I recommend picking up a few of SitePoint's design books--they're quite good
and helped me pick it up quickly.

Also, I'm building an HTML5 canvas-based mockup tool called jMockups, which I
plan to eventually have export to quality HTML/CSS. The mockup tool will be
ready in two to three weeks. If you're interested in helping test it, sign up
for the mailing list on the jMockups.com homepage. Cheers.

------
foxtrot
<http://themeforest.net?ref=motlive> Try This Website - Now it will completely
circumvent the need for you to learn CSS, however if this is a one off website
you are doing it would be much easier and save your a lot of hassle. The
templates can be as little as $8 so wont break the bank either.

------
bgrohman
I've tried my hand at design, and I'm not very good. Of course, I don't really
have any experience with design, and I'm sure I could improve with practice.

I am good at the development side of things, and I enjoy it, too, so I tend to
lean towards having someone else do the design and then do the development
myself.

------
Yaa101
Design is about functionality first, you will see that the most functional
websites have very minimal design, but don't think that minimal design comes
easy in the planning stage (investment), it does however often come very easy
in the implementation and maintenance stage (reward).

------
exline
I should hire someone instead, but have not in the past. I grab a free
template and modify it as best as I can. I have had a few users say they
really like it, which always surprises me.

For the next venture I will be outsourcing the design to that it looks a lot
better.

------
AndyKelley
I've had success with this technique:

1\. Sketch it on paper.

2\. Draw it using <https://addons.mozilla.org/en-US/firefox/addon/8487/>
without regard to how hard it will be to actually implement with CSS and html.

3\. Make it so.

------
bearwithclaws
You need the right, one book to learn CSS -> CSS Mastery.

For design, start developing some design sense by visiting site like
<http://styleboost.com/> every one in a while.

Then you are good to go (that's how I started, until now).

------
jpdbaugh
I am all for hiring someone else to do the design. I am interested in
eventually doing it myself but I just don't have the time to learn at the
moment. It is just a more efficient use of my time and money to collaborate.

------
megaman821
I definitely can't design but I do code my own CSS. I try to avoid div soup
and keep my html as semantic as possible. This is made a lot easier if you
don't care about targeting old versions of IE.

------
nailer
I use PixelMator to draw the website, then send the PSD and fonts to p2h.com's
slicing service, which was reocmmended to me on HN. They work until I'm happy.
Turnaround is fast, prices are decent.

------
ntulip
i tend to go for purchasing a template and making it fit. Simply not enough
time to design everything and i suck at design.

------
allwein
Check out themeforest.net, which has tons of templates for any kind of site.
The prices are incredibly reasonable.

------
faust1
I develop the idea myself and then sit down with my designer to put it into a
web form.

------
zephjc
When all else fails, find a Wordpress theme and adapt it for your site's
purposes.

------
spencerfry
We designed our website. Product design and web design go hand in hand.

------
singer
If you're a one-man-shop, then shouldn't design in general come naturally?
Perhaps someone should be designing your software GUI too.

~~~
MisterWebz
I don't see why it should come naturally. Sure, i can position elements in a
web page and have a colorful navigation and background, but it looks far from
professional.

------
sabj
Of course. Personal branding.

