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.
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.
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.
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.
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.
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.
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 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.
web designers absolutely should use photoshop, because they are essentially providing the "theme" around the wireframe, that may be designed by the UI designer.
On the other hand, if it's more graphical (eg: http://www.ubuntu.com/desktop) then I'd agree that Photoshop is absolutely necessary.
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?
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 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.
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).
http://24ways.org/2009/make-your-mockup-in-markup
QED
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 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/
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.
http://www.betaversion.org/~stefano/linotype/news/169/
It gives step by step instructions on building and refining a design.
I don't mind websites trading style for functionality
What's wrong with them?
That is about it though, just a nitpick with my tastes.
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.
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.
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.
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.
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.
Just don't let the template you choose influence your decisions about what should and shouldnt be in site....let form follow function.
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.
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 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!)
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.
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.
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.
For the next venture I will be outsourcing the design to that it looks a lot better.
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.
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).