I use Adobe Photoshop but I find it kind of buggy sometimes. When I import what I do in photoshop to Flash the quality of the design drops down a notch...
A little late to be answering this question but just an update really.
- Wireframe with pen and paper first but keep it very rough.
- Then slowly build it in Adobe Muse but again keeping things rough.
- Now perform some usability testing and record the results.
- Perform steps 1, 2, and 3 over and over until it's right.
Now finish the design in Adobe Muse or build it in a HTML editor. Just remember that you can publish your final website by using Muse and not write a single line of code but you will create a far better built website if you code it yourself, plus you will only become more employable and have a better chance at learning more web languages.
in addition to the above some web designers believe you only ever should design in the browser and avoid using graphics programs and yes to be honest they're not wrong; pen and paper > design and build in the browser > done! But I also love graphic design and like I said before: you always want to be more employable.
If you can't afford the Creative cloud but you might be able to stretch to buying one programme then buy Photoshop. For me personally this is the last tool I would ever use for building websites but this software can do almost everything; it's like Adobe's one size fits all solution but if you can afford the Creative Cloud then I recommend:
- Adobe Muse = Website, wireframing and layout design
- Adobe Illustrator = Creating icons, logos and other illustrations
- Adobe Photoshop = Use this to manipulate and edit photos
I am assuming you mean some sort of charcoal sketch? (I call those wireframe plus:) )
It depends on the level of detail you are aiming for. If you want production quality go for the software you do the final design or production in (I.E. Photoshop / Fireworks / Xara /Flash).
If it is for illustration purposes only, to show a client how the website will function and to show the basic lay out, you could sketch it out in a program like Balsamiq Mockups. It gives a basic representation of elements which will not interfere with graphic design ideas and is very suited for functional representation. Of course if you take that route, it will be a starting point only and you will still have to do the real design in your production software.
Depending on the project I use:
- paper + pencil/pen
- Inkscape/Freehand (AI, begrudgingly)...often for detailed wireframes.
- Photoshop (in a PS office)
- Fireworks (I much prefer it over PS for web graphics)
- Pixelmator/GIMP (trying to wean myself off of PS whenever I can)
- HTML/CSS/JS (my preferred medium)
I tend to start with paper to get a rough idea of what I need. Then, retool that in InDesign as a graybox. This step is about typography and hierarchy as a value study. Then I'll take that into either HTML or Photoshop and iterate between those two until it's "done". Get to HTML as soon as you can, but no sooner.
Well if you are a beginner and not a photoshop expert we always recommend Adobe Fireworks because of its small learning curve. Its extremely easy to design in it and is 100% compatible with Dreamweaver. You can even slice and export your web pages right from inside Fireworks.
Photoshop for me, although I know several designers who mock up in InDesign. Depends on what bells and whistles the site needs, I suppose.
More often than not:
Pen & Paper -> Photoshop/Fireworks -> HTML
If I use Flash (very seldom these days) I make sure I do everything in Flash to begin with. Moving bitmaps from Photoshop into Flash is inevitably going to cause quality (and file-size) issues.
I design in PS then cut it up into separate images to prepare in Dreamweaver. Images moved from PS to Flash do not transfer as simply as you would like, so you need to export the elements separately.