What is ForeUI?

ForeUI is a handy UI prototyping tool which can help you on UI and Interaction design for web/desktop app. More info are available on http://www.foreui.com/

How to Use This Site?

This site is tightly integrated with ForeUI software. You can upload your plot file, custom element or library form ForeUI and share them with others. You can also download resources shared by others from this site or via ForeUI.

User login

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
15 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Sign in using Facebook
Powered by Drupal, an open source content management system

Facebook like button which updates the number when a user clicks on the button.

A popup element that can be used as a container. You can embed as many elements as you like into it, and show/hide them together by clicking the cross icon on top right.

This page navigator element can be placed in any page in your plot. Placing it in a master page is a good practice. You can press the "Previous Page" or "Next Page" button to switch page, or you can click the middle area and choose the target page to go. This custom element will automatically dock itself to the edge of the page. The default behavior is dock to right top corner; you can change this behavior by changing the values of "TextBox_HorDock" and "TextBox_VertDock" elements.

You will need ForeUI V2.80+ to use this custom element.

A simple number mark element for annotation. You can place it anywhere in your page. You can change its number value and background color to meet your requirements.

This is a refactored example from ForeUI V1.xx. It shows how to detect the current selection within the element. It also demonstrate a very useful trick: use a new page to simulate the popup menu or window, just use the main page as master page and all new page will have the same background. This trick can reduce the overlapping of elements and make your pages more editable.

It is an example to simulate the folder structure in mail client application.

Clicking the buttons at bottom can change the value of unread mails, or show/hide the number.

This example demonstrate how to use the newly added "Section Expanded Flags" property on V2.72. By handling the "Section Expand/Collapse" event and checking the "Section Expanded Flags" property, you will be able to know which section is expanded (shown) or collaspe (hidden).

PS: You would need ForeUI V2.72 or above to run this example.

From V2.72, ForeUI supports the actions to append/insert/delete data row of Table element.
This example shows what can we do with the newly added feature.
Remarks: this plot needs V2.72 or above to run.

I create this element as I need color picker in my prototype. It behave like a real color picker except that it doesn't update the current selected color on the button.

Looking forward to a real color picker element from ForeUI dev team :-)

From V2.57, the ComboBox element can hide its decoration. That means you can make it fully transparent after changing its opacity to 0. This feature is suggested by Ulrich at this thread: http://getsatisfaction.com/easynth/topics/new_attributes_of_the_combobox...

This feature allows you to create your own combo box element. You can use other elements or images as the background of combo box, just like what I did in this example.

Please make sure you are running ForeUI V2.57 or above to see the correct effect.