Super-Mockup My Website
November 3, 2014 8:32 AM Subscribe
I am a person with an idea for a website and zero web design expertise. The mockup tools that I've been using lack the functionality I need.
I've been making a mockup of my site using Mockflow.com, and my plan is to pass this mockup along to a web developer. I want my mockup to be as clear and as functional as possible, so that my web developer knows exactly what I want.
To that end, I want to do much more with my mockup than Mockflow.com (or any other mockup tool I've seen) allows me to do. Basically, I want to be able to make clickable elements that do more than just link me to another page (for example, an element that upon click, brings up a dialogue box that might again contain more clickable elements, or a resize button that actually resizes an element on the page).
What kind of tool should I be looking for? I'm willing to tolerate a bit of a learning curve, but I don't have months to learn a new technology.
I've been making a mockup of my site using Mockflow.com, and my plan is to pass this mockup along to a web developer. I want my mockup to be as clear and as functional as possible, so that my web developer knows exactly what I want.
To that end, I want to do much more with my mockup than Mockflow.com (or any other mockup tool I've seen) allows me to do. Basically, I want to be able to make clickable elements that do more than just link me to another page (for example, an element that upon click, brings up a dialogue box that might again contain more clickable elements, or a resize button that actually resizes an element on the page).
What kind of tool should I be looking for? I'm willing to tolerate a bit of a learning curve, but I don't have months to learn a new technology.
On preview, what humboldt32 said.
But, if you're just looking to replicate the look and feel of the site, not the functionality, Bootstrap -- a HTML/CSS framework (with some JavaScript functionality) meant to look great in all browsers and screen sizes -- might work for you. There'd be a learning curve but the documentation is great. It would be a few days to learn, not a few months.
(Although a resize button that actually resizes an element on the page is not mockup territory.)
posted by rogerrogerwhatsyourrvectorvicto at 9:10 AM on November 3, 2014
But, if you're just looking to replicate the look and feel of the site, not the functionality, Bootstrap -- a HTML/CSS framework (with some JavaScript functionality) meant to look great in all browsers and screen sizes -- might work for you. There'd be a learning curve but the documentation is great. It would be a few days to learn, not a few months.
(Although a resize button that actually resizes an element on the page is not mockup territory.)
posted by rogerrogerwhatsyourrvectorvicto at 9:10 AM on November 3, 2014
A UI suggestion/thought - while dialog boxes are surely handy, make sure all functionality/information on the site is accessible _without_ using a dialog box (you may be doing this already). So, you can use a mockup tool to make sure all your information is covered in the basic structure and navigation of the site.
For dialog boxes etc. you could use any drawing program or flow-charting program. If you're not a UI professional, please keep an open mind about what will work best for users; it's sometimes difficult to get inside the experience of someone who doesn't spend as much time with your business/passion/art as you do. Good luck!
posted by amtho at 9:36 AM on November 3, 2014
For dialog boxes etc. you could use any drawing program or flow-charting program. If you're not a UI professional, please keep an open mind about what will work best for users; it's sometimes difficult to get inside the experience of someone who doesn't spend as much time with your business/passion/art as you do. Good luck!
posted by amtho at 9:36 AM on November 3, 2014
You don't need a tool, you need a person. A UX designer.
This is the person you want to create the prototype that your developer needs. It will be a smoother transition to the developer and you could even end up with some improvements that you never considered.
posted by oxisos at 4:15 PM on November 3, 2014
This is the person you want to create the prototype that your developer needs. It will be a smoother transition to the developer and you could even end up with some improvements that you never considered.
posted by oxisos at 4:15 PM on November 3, 2014
I think you're describing making a clickable prototype, which is exactly what Omnigraffle does. Tutorial.
On reread, Omnigraffle and prototyping would let you build clickable windows and dialogue boxes, but probably not resizable elements. If you really want that level of functionality in your prototype, I nth what humboldt32 said.
posted by danceswithlight at 9:26 PM on November 3, 2014
On reread, Omnigraffle and prototyping would let you build clickable windows and dialogue boxes, but probably not resizable elements. If you really want that level of functionality in your prototype, I nth what humboldt32 said.
posted by danceswithlight at 9:26 PM on November 3, 2014
This thread is closed to new comments.
Just my 2 cents.
posted by humboldt32 at 9:08 AM on November 3, 2014 [2 favorites]