Prototyping a web application is more about ideas than mere sketching wireframes. The biggest barrier to effective prototyping is time and cost. idea2Life is an AI powered rapid prototyping to lower the barrier of prototyping.
With idea2Life, you can create fully functional static websites by just clicking a picture.
Speed is key for fast prototyping and that tenet has been followed in all aspects of the applications. It takes only one command the run the application.
How to install/upgrade idea2Life
- Install docker.
- Clone the repository from github
git clone https://github.com/keplerlab/idea2life.git3. Change your current working directory to idea2Life repo folder
4. Build the application
docker-compose buildHow to run idea2Life
We have used dockers to manage the application environment consistently.
To run the application, you just need to run the dockers.
docker-compose upHow to use idea2Life for prototyping
Idea2Life builds a prototype using components cards. you can think of components card as UI elements for e.g. video, images, paragraphs. You assemble the components to build your prototype. In order to ensure consistency and standard process, idea2Life comes with a predefined set of component cards. You can check the complete list of component cards here
The process of prototyping a screen is pretty straight forward. You assemble the cards on a table or a wall like a screen and take a picture from the app. Please check the detailed steps here.
During prototyping workflows or user journeys are required as well. idea2Life allows linking of pages so that full workflow can be prototyped. It has a light weight page editor that allows editing of html pages. Here is how the editing page looks like and you can read the details further here.
Customizing idea2Life
We understand that generated pages UI style will vary and hence idea2Life offers a theme based UI. Theme defines the look and feel of the generated screens. By default idea2Life comes with a theme but new themes can be added too. Keeping in mind the speed principle, new theme addition is quite simple. All you need to do is to create a copy of the default theme and then make changes to the new theme matching your design needs. Since the final generated pages are html, it can be modified to any extend.
Integrating idea2Life with 3rd party systems
Majority of the web development are CMS (content management system — wordpress, drupal etc.) based and prototyping needs to done in the context of these platforms. CMS can treat idea2Life as an API and write custom page/workflow generation logic. A lot of our internal use cases reflects this reality. Check out the guide for details
Why idea2Life was built
One of the main reasons for building the tool was to enable people to collaborate during brainstorming sessions in a seamless way. There are prototyping tools like adobe envision but they are individual oriented and requires a learning curve. Think of situations where marketing team and designers can collaborate and brainstorm on the new product home page.
In order to ensure tool adoption, it had to be ensured that it didn’t interfere too much with the free flowing brainstorming sessions. Rather drawing the screens on white board, now components cards had to be placed. In between they had to take pictures to generate versions or ideas options. To the best of our knowledge we couldn’t find tools offering end to end fully customizable unobtrusive solution for prototyping.
You can read the project documentation here and find the project on github here.
If you have any questions about the tool, please raise them by filing a bug on this project.
Happy prototyping!
