Wireframes Tool Recommendation

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: heatherlaine, Klaus, FourthWorld, kevinmiller

Post Reply
kespears
Posts: 10
Joined: Sat Aug 04, 2018 2:07 pm

Wireframes Tool Recommendation

Post by kespears » Fri Aug 10, 2018 8:17 pm

Hello, anyone have recommendation(s) regarding a wireframe and flow tool that could be help me design the app before coding. Free or inexpensive tool is preferred. Thanks in advance for any recommendations.

Thanks
Keith

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 2669
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria
Contact:

Re: Wireframes Tool Recommendation

Post by richmond62 » Fri Aug 10, 2018 8:38 pm

help me design the app before coding
I tend to do that with a set of wooden bricks or LEGO from my childhood, a notebook and a pencil.

kespears
Posts: 10
Joined: Sat Aug 04, 2018 2:07 pm

Re: Wireframes Tool Recommendation

Post by kespears » Fri Aug 10, 2018 9:27 pm

Thanks. :-)

bogs
Posts: 2073
Joined: Sat Feb 25, 2017 10:45 pm

Re: Wireframes Tool Recommendation

Post by bogs » Fri Aug 10, 2018 9:38 pm

I think it would depend on what your looking for in one. Open Office/Libre Office (both free/open source/multiplatform) could fit the bill easily if your only looking to create flow charts, or even a bit more than that. For that matter, any drawing program could do the same thing on a basic level.

However, if your looking for specifically a wireframes tool, you might look at doing a general search for "programming wireframe tool", which would produce results like this one :)
Image

kespears
Posts: 10
Joined: Sat Aug 04, 2018 2:07 pm

Re: Wireframes Tool Recommendation

Post by kespears » Sat Aug 11, 2018 4:40 am

Bogs, Thanks for the various options. Very helpful. Keith

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6105
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Wireframes Tool Recommendation

Post by FourthWorld » Sat Aug 11, 2018 4:59 am

I tend to use paper in early stages, moving to LC for sketches, then at some point taking the most refined of the LC layouts and start development by adding code to it.

Only when working with stakeholders unfamiliar with the software process do I find true wireframes particularly useful.

For everything else, it's usually quicker to do layout in LC than just about anything else, and going from early design to prototype to development in a single tool keeps the process fluid and efficient.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 2669
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria
Contact:

Re: Wireframes Tool Recommendation

Post by richmond62 » Sat Aug 11, 2018 10:50 am

Actually, in spite of my "kinkyness" re LEGO and other table toys,

the vast majority of my prototyping is actually done directly in LiveCode as it lends itself to this
in a marvellous way.

For me, at least, I can go from a really crude prototype all the way
to a polished product inside LiveCode.

However, I do tend to 'cheat' a bit by bunging prototypes out on this Forum
so others can be coerced into doing some of the "heavy lifting".

You will find that this Forum is almost the best feature of LiveCode; only beaten, as far as I am concerned
by the BBC Micro lovers' Forum:

https://stardot.org.uk/forums/index.php

But, then, I'm kinky in more ways than one. 8)

kespears
Posts: 10
Joined: Sat Aug 04, 2018 2:07 pm

Re: Wireframes Tool Recommendation

Post by kespears » Sat Aug 11, 2018 1:28 pm

Thanks richmond62 and FourthWorld. Great insight. Appreciate the feedback. Keith

ghettocottage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 271
Joined: Tue Apr 10, 2012 9:18 am

Re: Wireframes Tool Recommendation

Post by ghettocottage » Sat Aug 11, 2018 2:56 pm

I do some website development and I have recently started using a tool called Pencil for basic layouts.
https://pencil.evolus.vn/

bogs
Posts: 2073
Joined: Sat Feb 25, 2017 10:45 pm

Re: Wireframes Tool Recommendation

Post by bogs » Sat Aug 11, 2018 4:18 pm

kespears wrote:
Sat Aug 11, 2018 4:40 am
Bogs, Thanks for the various options. Very helpful. Keith
My pleasure, glad it was helpful :)

I myself use just a simple list, breaking down what the program is, needs to do, etc and then refining that.

I often start out as Richard mentions with nothing more than pencil and paper if I am away from my computer, as I find it easier and quicker to not only put the list, but sketch out concept designs using paper. Other wise using any text editor, often the code portion of the IDE as a series of comments. I'm sure you've seen similar TODO: style statements. As I complete each one, it is marked off in the comment so I don't loose my place or do it twice :wink:

The main stack holds the main list of requirements, noting where a new card or stack has been introduced and why, then I branch all the requirements for that part of the code to the new object. When I add a control, an event handler, function, etc I just put an outline of why it is there.

I've found that to be the easiest and cleanest way for me, it always tells me where I am (in the program) and what I need to accomplish for any given location in the program.

Thankfully, I have not yet produced anything that looks like this -
Image
Image

mrcoollion
Posts: 328
Joined: Thu Sep 11, 2014 1:49 pm
Location: The Netherlands

Re: Wireframes Tool Recommendation

Post by mrcoollion » Tue Aug 14, 2018 6:45 am

I find using LC for making 'mock-up' layouts to be the easiest and fastest way (WYSIWYG), but any of the applications mentioned in the following website could be used. It just depends on what suites you best. It might be a better idea to use any of those applications to 'describe' the workflow and actions of your application in combination with a LC mock-up. However the Pencil suggestion from ghettocottage is one i have used in the past and works well as a quick draw alternative to LC.

https://www.maketecheasier.com/5-best-f ... oft-visio/

Regards,

Paul

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”