Moqups — Another HTML5 App for Wireframing

August 1, 2014 at 9:26 pm

After my post the other day about wireframe.cc, I received a new fol­low­er on Twitter by the han­dle @moqups. That led me to their web­site and it impressed me.

I’m still lean­ing towards wireframe.cc because of it’s min­i­mal­ism. I like to have the bones and blocks, then move to cod­ing a work­ing pro­to­type. I would get bogged down in Moqups try­ing to over­work things that I could do when coding.

But if you like to be fur­ther down the user inter­face water­fall — clos­er to a pro­to­type than a wire frame — Moqups is a good solu­tion. It’s quick to setup, quick to add ele­ments in, and pro­vides more options for cus­tomiz­ing and tweak­ing ele­ments. This gets you some­thing more like the end prod­uct. There’s a lot of options that need at least a free account to work; that includes sav­ing, shar­ing, and export­ing your project. All in all a good option for mock­ups, just not my workflow.

Moqups - HTML5 app for wireframes, mockups, and prototypes

Wireframe.cc

July 22, 2014 at 7:15 pm

I played around with a rather nice wire-framing tool today. Wireframe.cc takes a min­i­mal­ist approach to its inter­face and user inter­ac­tion. Simple ele­ments and a lim­it­ed color palette keep your wire frames clean and allow faster iter­a­tion. You can lay­out brows­er, tablet, and mobile screens. Easily share your wire frame with a gen­er­at­ed URL, or book­mark it to come back and edit later. And all that for free.

I like that it adds just enough pol­ish over my hand scrib­bled mock­ups but is still fast and easy to work with.

Wireframe.cc Screenshot - minimalist mobile, tablet, and browser wireframing app

Responsive Web Design Sketch Paper

January 17, 2012 at 11:32 pm

Responsive Web Design Sketch Paper Blank - Wire-framing, Design sketching, Layout drawingResponsive Web Design Sketch Paper Interface - Wire-framing, Design sketching, Layout drawingI sat down today to start sketch­ing some ideas for a respon­sive web site design. Imagine my sur­prise when I searched for a sim­ple, letter-sized tem­plate of win­dow sizes only to find one result. I want­ed some­thing a lit­tle dif­fer­ent, so I made my own.

These pages are for early stage wire-framing and sketch­ing since the win­dows are scaled 25% — 50% of what they will actu­al­ly become. I found it use­ful to have them all on one page so I could eas­i­ly see the dif­fer­ences in aspect ratio and size. I did­n’t spend much time sketch­ing on these pages before mov­ing to larg­er sheets with grids, but they helped me get ideas start­ed for fur­ther refine­ment in that next stage.

There are screen sizes of 1440 x 900, 1024 x 768, and 800 x 600 scaled down to 25%. Then there is a smart­phone and tablet size (based on the res­o­lu­tions of the iPhone4S and iPad2) scaled to 50%. There is one PDF with blank out­lines and a sec­ond PDF with gener­ic scroll bar and head­ers blocked in for consideration.

Let me know if you find them as help­ful as I did in the comments.