Wish i could get some help with starting up prototyping (wireframing) using fw?

 

All i see is theory on-line!

Wish i could get some help with starting up prototyping (wireframing) using fw?

 

All i see is theory on-line!

 

Good Wireframing advice

Just getting use to the idea of this concept.. i know html etc so most probably be a progression.

Why not use good 'ol HTML and CSS for wireframing, that's how we used to do it last century and a lot of new designers are "discovering" it again.

 

http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain

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

i agree with what Bluedreamer said still if u need to see u can check this

50 useful wireframimg tools for web and userinerface design

Even do it with paper, simples.

paper and pen is good! only problem is there's no undo and it's more difficult to move stuff around

 

i was using mockingbird while it was free but now moved onto http://app.mockflow.com/mockflow/ and an open app called pencil http://pencil.evolus.vn/en-US/Home.aspx

Why not use good 'ol HTML and CSS for wireframing, that's how we used to do it last century and a lot of new designers are "discovering" it again.

 

http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain

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

 

i kind of already know how to.. using div tags... but any chance of an example please?

 

Thanks

There are 2 things that are confusing me about wireframing:

 

(1) With so many programs and ideas out there, which is best for a semi-novice?

 

(2) If say i knocked out a mock up in say GoMockingBird.How would i control this in say Adobe fireworks.

 

Sometimes i feel im confusing myself.

 

Thanks

whiteboard / pen and paper FTW!

whiteboard / pen and paper FTW!

Agreed! I find a plain white wall and a bunch of post-it notes are brilliant for wireframes too!

most/all of those wireframing apps export to png or similar. just open in fireworks and use it as a guide

OP:

 

You should be doing all your initial work on paper. Quickly sketch up a bunch of concepts that solve the problems you need to address and see what works and what doesn't.

 

After you're comfortable with a general idea of how things are going to look, using a wireframing tool is a good intermediary step between sketching and visual design. I use Balsamiq and love it, but it's up to your preference.

 

Once you have a wireframe, it's best to use it as a guideline on how elements should be laid out and their relative size. Start with all the text elements, get them on the page and tweak the typography first, then start building elements around the text in Fireworks (or Photoshop, or the browser, whatever you use).

Notice how all the experienced voices are saying the same thing? I'll add my vote that way too. My workflow is:

 

paper > browser

 

I used to use all that other good stuff; PS, FW, Mockingbird, Balsamiq, myBalsamiq, etc. But, then I realised I can iterate faster and more reliably in a browser. Time *wasted* on creating mockups on my PC is time I can just be coding up the design. It's also pretty easy to share stuff with a client when it's in their browser

Just to add to what everyone else has said: HTML wireframes can be responsive.

Get a pin board, scamp on paper, throw your scamps up and *profit.

 

*maybe.

 

But in all seriousness it's refreshing to use pen and paper once in a while, especially at the start of a project when you're presented with a blank screen.

I'm surprised no-one has suggested photoshop. Having done some wireframe sketches, I open Photoshop and do the mockup designing. Does anyone else do this?

Wireframes and concept work are two different things though?

Notice how all the experienced voices are saying the same thing? I'll add my vote that way too. My workflow is:

 

paper > browser

 

I used to use all that other good stuff; PS, FW, Mockingbird, Balsamiq, myBalsamiq, etc. But, then I realised I can iterate faster and more reliably in a browser. Time *wasted* on creating mockups on my PC is time I can just be coding up the design. It's also pretty easy to share stuff with a client when it's in their browser

 

I think you need to work at least a few workflows. Paper - Visual - Browser. So Visual could be Photshop/Fireworks or even putting some ideas on a Moodboard, whether it be paper or electronic. But unless your very clear about the design your shooting for you owe it to the people your working for to make sure you're getting the best results possible which means lots design work and creativity.

 

I tend to sketch on paper first (as I said) Wireframe on paper or even in Photoshop where I'll have the wireframe on one group of layers and the visual mockup on another.

 

I'm surprised no-one has suggested photoshop. Having done some wireframe sketches, I open Photoshop and do the mockup designing. Does anyone else do this?

 

Sketching on a piece of paper helps fuel my imagination and plan ahead what I might do on Photoshop. When starting with a blank canvas in Photoshop, it's so easy to get lost in the tremendous array of tools and techniques you can do. I'll follow a tutorial if I'm faced with something new but if you don't plan ahead a design then you could be sitting for hours scratching your head trying to make something nice.

Edited September 5, 201214 yr by webDesignerJon

I think you need to work at least a few workflows. Paper - Visual - Browser. So Visual could be Photshop/Fireworks or even putting some ideas on a Moodboard, whether it be paper or electronic. But unless your very clear about the design your shooting for you owe it to the people your working for to make sure you're getting the best results pUossible which means lots design work and creativity.

I do my visuals in the browser. For me the intermediate steps in FW or PS are simply a waste of time. When I mockup a design in-browser I simply expand on that to complete the job. If I mockup in another tool, I have start at square one again in the browser. That's not an efficient workflow.

 

It's also impossible for a client to explore interactions when they are looking at a flat mockup. An in-browser mockup allows them to explore pathways and interactions on a variety of devices, their devices. Saves a lot of surprises down the line

I do my visuals in the browser. For me the intermediate steps in FW or PS are simply a waste of time. When I mockup a design in-browser I simply expand on that to complete the job. If I mockup in another tool, I have start at square one again in the browser. That's not an efficient workflow.

 

It's also impossible for a client to explore interactions when they are looking at a flat mockup. An in-browser mockup allows them to explore pathways and interactions on a variety of devices, their devices. Saves a lot of surprises down the line

 

Do you not have to use photoshop to create your visuals anyway? The way I see it you're going to need your visual tools for much of your design work and was encouraged to do this throughout my degree. It's not too hard for me to figure out who I build my browser design when I'm building my visual. But we all work in different ways. What works best for us and all that.

Do you not have to use photoshop to create your visuals anyway?

Nope. Rough wireframe on paper > wireframe in-browser > design in-browser.

 

Agreed. Horses for courses. Like I say, I used to use a load of intermediate tools like PS. Then, I learned how to become more efficient