Ask HN: Do you design your own website?

58 points by MisterWebz ↗ HN
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?

73 comments

[ 3.0 ms ] story [ 152 ms ] thread
I designed my own website, but I'm sure tptacek will tell you that I shouldn't have done so. :-)
For whatever it's worth, I personally really like your site design. You likely don't remember my feedback on my difficulty navigating it, but I actually appreciate its simplicity and lack of overweening bells and whistles.

I'm far more likely to be in your target market (despite not being an actual customer) than your average "web app" guy; so I think you're on the right track.

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

except for maybe the tables for usage

What's wrong with them?

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.

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

If you're a one-man-shop, then shouldn't design in general come naturally? Perhaps someone should be designing your software GUI too.
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.
I'm a developer but I love design so yes, I design my own.
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.
i tend to go for purchasing a template and making it fit. Simply not enough time to design everything and i suck at design.
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.

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.

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.

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.
Blueprint CSS is really good. I have saved to much time using a CSS framework rather than coding all the CSS myself.
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.

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

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

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

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

You can also do it directly from useragent, or jQuery.browser (maybe with $.browser.version). (other js frameworks should have it under utils)
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.
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.

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.

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.

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

It depends a lot on where you're iterating. If you're iterating concepts and structure, sketches work perfectly. If you're iterating the size of a shadow, the exact color pallet, the exact shape of a logo then you'd better be in Photoshop.

For all 37s likes to talk about not using Photoshop they don't have pixel-perfect design at all and yet still had somebody slaving over Adobe products while putting those logos together.

Maybe the goal of working in Photoshop isn't to mimic the design pixel-by-pixel, but instead to "sketch."

Mocking things up in Photoshop can be really productive because everything you sketch (all of your background images, buttons, and art) can be used as an asset on your site with minimal effort.

I think what unavoidable is saying is that photoshop, specifically, isn't a necessary step. Personally, I hate mockups in it. I try to use paper and pencil, if it needs to be formal, I use balsamiq.

I do agree that you need SOME sort of mockup, but I actually think low res mockups are more effective because people aren't distracted by the fact that an underlined link in PS doesn't quite look right.

thats not a mockup thats a wireframe

web designers absolutely should use photoshop, because they are essentially providing the "theme" around the wireframe, that may be designed by the UI designer.

It depends on the specific design. If it's wordy and document-like (eg: http://www.w3.org/TR/html5/) then it may be better to bypass Photoshop and start writing the HTML/CSS, since Photoshop is ill-suited for mocking up those kinds of designs.

On the other hand, if it's more graphical (eg: http://www.ubuntu.com/desktop) then I'd agree that Photoshop is absolutely necessary.

Don't you mean GIMP? ;)

And no, I still disagree slightly. It's not about the kind of design the final product is, it's about what function your role is fulfilling. Are you designing the way the people interact with the application, the way the application looks and feels, or both?

It's a lot easier to refactor a website midway through designing it than it is to move the walls of a house midway through building it.
I would tend to think of HTML semantics as the blueprints, with Photoshop as an artist's sketch, but perhaps that's just me.

As to the general feasibility of jumping straight to code, you might find this post by Andy Clarke interesting: http://forabeautifulweb.com/blog/about/designing_the_cannybi...

The design was all done in HTML & CSS. And I, at least, find it more compelling than most Photoshopped web designs.

I want to second the point about not skipping the photoshop/fireworks/illustrator/etc. step like 37 signals does. The reason they are able to do it is that they have already established a fixed set of agreed upon design patterns that appear in their apps.

If you skip directly to css and html, it's very difficult to think like a designer because you feel all the constraints of css and html. You'll think things like "oh, yes, I'll put a 5px border here and make it have 5px margin from the element above because it's easy" instead of "wow, this block would be interesting if it overlaid the top block".

In photoshop, it's easy to experiment visually by moving around blocks. In CSS and HTML, it's a pain. (Although, tools like firebug and web inspector have made certain things easier, not all of it is).

If your website is more like an application, think of gmail, then a framework like cappuccino (http://cappuccino.org/) come with pretty good design defaults. And no css/photoshop skills required. It will require learning obctive-j and a couple of cocoa though.
99 Designs is not the place to go

you know, if I am at that point, I just go buy a template and am done with it. at least a good portion of the templates, on reputable sites, have clean code underneath them. I saw some work from a 99 gig and it was the most atrocious thrown together, to save time, job I have ever seen.

Sometimes you need cheap and fast, I am of the opinion that when you do, it is better to adapt to a purchased template than to try to fix slop code from 99.

Anyone care to list any reputable sites they have used in the past?
I use http://themeforest.net/ when I need a template for a throw together site. Most of the ones I have purchased have been well organized and their prices are better than some of the other sites. The down side is that they do not seem to have as extensive of a collection as some of the other sites. That being said, I have never seen a template on their site that looks like it was meant for geo-cities or myspace either, so that could account for the fewer templates.
I second that.
> 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.

This is totally true, I paid $12,000 for a top of the line design on a site ~5 years ago, but that was after the business was already profitable and the better design/domain/branding would pay for itself. If you're not profitable, funded, or growing really rapidly, just get a functional CMS and a functional, decent design to start. The better design will help later, but it's the wrong place to put your resources if you have no users and no money.

Edit: Wordpress is totally decent and more versatile than people think. I was introduced to GetSimple recently by Yifei Zhang, it's open source and it looks pretty decent out of the box. http://get-simple.info/

Edit2: Also depends on what your business or app is. Share more details? Maybe a link if you have a rough version somewhere?

You can definitely skip photoshop.

http://24ways.org/2009/make-your-mockup-in-markup

QED

The one you linked, is a design of a blog. (That problem has already been solved, and it's a memorized pattern.)

Try designing the entire UX of a web application, from idea (how about we do X ...) to every single case, directly in HTML and CSS. Designing for GUIs it's more difficult when you don't have direct visual feedback.

(I do this from time to time, but only for very simple things.)

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

FWIW I think people over design their websites sometimes. Too many shitty looking websites do too well for me to worry about every little detail on my page.
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.

When all else fails, find a Wordpress theme and adapt it for your site's purposes.
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.

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