: What software do you use to design website layout mockups? 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

@Kaufman565

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.

Adobe Photoshop

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

Vote Up Vote Down

@Si6392903

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.

Vote Up Vote Down

@Murphy569

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.

Vote Up Vote Down

@Rivera951

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.

Vote Up Vote Down

@Shelley591

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)

Vote Up Vote Down

@Speyer780

Photoshop for me, although I know several designers who mock up in InDesign. Depends on what bells and whistles the site needs, I suppose.

Vote Up Vote Down

@Pope1402555

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.

Vote Up Vote Down