Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 2 down vote favorite

I've long done this using photoshop, but lacking photoshop skills this takes me ages and is little more than a poor sketch. I'd like a program that has all the common interface elements, theme styling stuff and so on, so I can make a really comprehensive vision of what a finished site should look like (including look & feel).

Any ideas?

share|improve this question
11  
Wireframing tools by definition should not be able to design a finished layout. (If necessary, see this question for a list of wireframing tools) – John Conde♦ Aug 26 '11 at 14:36
1  
A rapid prototyping tool is closer to what you want, but if you don't want to take the time to learn design and don't want to pay for professional design services or templates, then you're gonna have to settle for very generic and/or overused themes. – Lèse majesté Jan 29 '12 at 2:51
Timely advice, @Lèsemajesté. I was just last night looking for something like "prototyping", but couldn't come up with the right terminology. By timely, obviously I mean for me, since your comment is nearly a year old (to a 1.5 year-old Q). :) – akTed Jan 25 at 20:22

5 Answers

up vote 0 down vote

As John has mentioned, wireframing tools should not design a finished layout, although having said that there are many advocates of the idea that we should do away with wireframes and move to designing in the browser, which is kind of what you are talking about.

A quick and nasty way to do this would be to use an IDE like Dreamweaver which has all the elements in a drag and drop style, but this will leave you with crappy code.

My suggestion would be to use CSS, HTML and JavaScript frameworks to create your mockup site, good frameworks can do most of the legwork for you and you will have something to work with once the 'wireframe' is signed off.

share|improve this answer
Who is saying you should skip wireframes or design in a browser? That's like saying you should design a building using plywood and nails and skip the blueprints. It's wrong on so many different levels. – Lèse majesté Jan 29 '12 at 2:48
Pretty much anyone who advocates responsive design - do a quick Google and you will see. – Toby Jan 29 '12 at 20:57
I think you may need to reevaluate your concept of what responsive design is. Almost every responsive design workflow I've encountered includes at least sketching wireframes on paper. In fact many responsive design framework (e.g. 1140, skeleton, etc.) even come with PSD or other templates for wireframing. And Front/designbyfront, the people behind Goldilocks Approach, also include wireframes in their UX deliverables. It is quite literally insane not to wireframe before you start coding. – Lèse majesté Jan 29 '12 at 21:38
Here is one such example of what I mean by 24 ways - 24ways.org/2009/make-your-mockup-in-markup I am not saying don't wire frame, I am saying do it in the browser. – Toby Jan 30 '12 at 6:43
While I'm not sure I trust the judgment of someone who still hasn't figured out why Photoshop can't do subpixel AA, I'm pretty sure she's talking about designing in the browser after you've already got a wireframe set up. After all, she cites Dan Cederholme, one of those "design in the browser" proponents, but even Dan is talking about _re_creating wireframes sketches in your browser or using the browser for the mockup. It's just not practical wireframing in code from the start when you can sketch about 50 UI layouts in the time it takes you to code a single one in HTML+CSS. – Lèse majesté Jan 30 '12 at 7:02
show 1 more comment
up vote 0 down vote

I really like Fireworks. It's similar to Photoshop and also by Adobe, but is more suited for website mockup and mobile designs.

If you look at their templates (click File->New From Template) there are wireframes for jquery, iphone, ipad, and some sample web design layouts. They also have a Common Library with menus and design elements that you can drag and drop into place.

You can get a month free right now with their Adobe CS6 Cloud offer. Hate sounding like an advertisement, but it's worth checking out if you want the final wireframe to look like a real website.

This is a wireframe I'm working on for an application I'm writing. I'm more of a programmer than designer. I may use this just to measure pixel widths. It may end up as a WPF app... I'm not sure, but this has been a great way to get started. Wireframe

share|improve this answer
up vote 0 down vote

I use Illustrator - NOT Photoshop, as that is for editing photos.....

I find illustrator perfect for mocking up very close to complete website layouts as its vector based, you can apply fades to vectors, shadows etc etc, in a very similar way to how a browser would render it.

share|improve this answer
Maybe I'm missing something... but in what way is Illustrator more appropriate than Photoshop? Pretty much all commonly used image formats on the web (png, jpg, gif) are raster graphics. Photoshop works with raster graphics. Fireworks is the most suited choice from the Adobe suite IMO, though you're entitled to your opinion and I'm not trying to start a holy war. – Anonymous Sep 27 '12 at 8:12
its far easier in illustrator to do a quick mock-up. if im doing a layout, the last thing i want is a rasterised image where i cant move parts about. – Darkcat Studios Sep 27 '12 at 12:58
up vote 0 down vote

Have you tried Axure RP? That's the tool of choice for conception and UX/UI folks in larger agencies. Creates clickable html prototypes and can look like a finished product, your mileage may vary though. It really depends on how much time you actually put into the design of your prototype.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.