This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.
Fetching your projects, please wait…
Fluid UI is a prototyping tool used to design mobile apps, websites and more.
.
Some of the heroes who have contributed so much to Fluid UI.
.
If you have ideas about how to improve Fluid UI please share with us using the feedback tab on the right. If you require technical support or notice a bug please check this list of
.
© Copyright 2011-2012 Fluid Software Ltd. All rights reserved.
Tutorial Videos
Watch short tutorial videos to get started. Fluid UI videos…
Projects
Projects Tab
Click the “projects” tab in the Fluid menu to access your projects.
Open Project
Click on a folder to open a project. Alternatively, drag the folder onto the canvas to open the project. Open projects are indicated by an open folder with a little page sticking out.
Add Project
Click the “add project” button to create a new project. Click on the project label to edit the name.
Delete Project
Drag a project to the bin to delete that project.
Active Projects
Newly created projects are active by default. Depending on your account type there are limits to the number of active projects you can have at any one time. When you reach your active project limit, delete an existing active project, or make the project inactive. To make space for more active projects, drag-and-drop the active project folder in the inactive area.
Inactive Projects
Inactive projects are read-only archived projects. To make an active project inactive, drag-and-drop the project folder into the inactive project area. This project may be viewed but not edited unless made active again.
Canvas
Click and drag anywhere on the canvas to move it around. Pages and links move with the canvas. If you drag the canvas far enough in any direction you will reach the outer boundary, indicated by a dark border.
Pages
Add page
Double-click anywhere on the canvas to create a page at that location.
Move page
Zoomed out: Click and drag a page to move it around on the canvas.
Zoomed in: Click and drag the “move page” area on the page frame to move the page around.
Edit page
Click on a page to zoom in and begin editing.
Delete page
Zoomed out: Click and drag the page to the trash area (bottom right corner) and drop there to delete.
Clone page
Zoomed in: To clone a page click on the “clone page” button above the page, on the page frame, an exact copy of the page is created to the right of the original page.
Page notes
Zoomed in: To add design notes click the “page notes” button above the page on the page frame to open the notes text area begin typing. Click the page notes button again to close the text area.
Page settings menu
Zoomed in: Click the “page settings” button above the page to open the page settings menu. Click the button again to close the menu.
Device
Set the target device for your mockup. iPhone and a range of Android resolutions are provided. Custom allows you to specify the screen size of the target device. Full tablet support coming soon.
Page Orientation
Select page orientation – choose from landscape or portrait.
Page Size
Set the page size. The page can be larger than the screen size of the target device – for example, tall scrolling pages. The page size cannot be smaller than the screen size.
Links
Add link
Select a widget. From the toolbox menu, click the link button to start a link – move the end of the link connector to another page and click to complete the link.
Remove link
Hover over the link to display the link settings button. Click the button to display the link settings panel. Click the “remove link” remove the link. Alternatively, delete the widget where the link originates.
Touch gestures
Hover over the link to display the link settings button. Click the button to display the link settings panel. From the drop down menu select a gesture.
Page transitions
Hover over the link to display the link settings button. Click the button to display the link settings panel. From the drop down menu select a transition.
Zoom
Zoom In
While zoomed out click on a page to zoom into that page. Alternatively, mouse-wheel up to zoom in.
Zoom out
While zoomed in click the ‘zoom out’ button (in the top right of interface to zoom out). Alternatively, mouse-wheel down to zoom out.
Library
Click a library heading (Sketchy, Android, iPhone, Uploads) to switch between libraries and to manage image uploads. Use the search box to search for any widget in the library. To adjust the width of the library click and drag the right edge beside the scroll bar. Click the hide/show button to quickly hide the library and click the same button again to show the library.
Widgets
Place widget
Drag a widget from the library and drop it on a page to begin creating your mobile mockup. Double-click a widget in the library to add it to the current page with automatic positioning.
Select widget
Select a widget by clicking on it. To select or deselect widgets hold down the control [CTRL] key (CMD key Mac) and click each widget to add or remove it from your selection. Alternatively, click and drag a selection box around the widgets you want to select. Multiple widgets can be moved at the same time and aligned relative to each other.
Toolbox Menu
When a widget is selected the toolbox menu is shown. The toolbox provides access to the following functionality.
Link
Create a link from the selected widget
Clone
Make an exact copy of the selected widget
Copy
Copy the selected widget to the clipboard
Cut
Cut the selected widget to the clipboard
Paste
Paste the selected widget from the clipboard
Delete
Delete the selected widget
Align
Align widgets vertically or horizontally (two or more widgets)
Order
Reorder the height (z-depth) of the selected widget
Shape
Display shape property inspector – modify colour, opacity, border and radius sizes
Text
Display text property inspector – modify colour, font style, opacity and alignment
Preview
Click the preview “play” button (top right of interface) to preview your mockup. Click the same button again to exit preview mode.
Share
There are several ways to share your mobile mockup with your team.
QR Code
Capture your mockup code with a QR reader app to test mockups on a mobile device.
Mockup Link
Copy the generated link and share your mockup as a standard web link.
Email Mockup
Send your project link by email to project collaborators.
Print Mockup
Generate a print-ready version of your mobile mockup, ready to save in PDF format.
HTML Export
Export your mockup in HTML5, store locally on your computer, great for archiving or offline presenting.
Image Export
Export your mockup screens in image format, great for documentation. Images are emailed to you directly.
Social Share
Share your mockup with your social network for instant reaction and feedback.
Trash
Drag a page or widget to the trash area in the bottom right of the interface and the trash drop area will appear – drop the item there to delete.
Undo / Redo
At present undo and redo actions are limited to text edits. Full support for undoing and redoing all other actions will be added soon.
Image Uploads
To upload your own images drag the image files from your computer and drop them directly in the browser window. Alternatively, click the Choose file button in the uploads library to browse for images on your computer and upload. To delete an uploaded image, simply drag it from the library directly to the trash area.
Keyboard Shortcuts
Fluid UI has the following keyboard shortcuts. Need more? Let us know.
Direction Keys
Nudge selected widget or widgets 1 pixel left, right, up or down
Delete
Delete the selected widget
CTRL/CMD+D
Duplicate the selected widget
CTRL/CMD+C
Copy the selected widget
CTRL/CMD+X
Cut the selected widget
CTRL/CMD+V
Paste the selected widget
CTRL/CMD+A
Select all content while zoomed in on a page
CTRL/CMD+Left-Click
Hold control and left-click to select/deselect multiple widgets
CTRL/CMD+ALT+SHIFT+0
Access developer menu to reset Fluid – Please use with caution.
Saving
Fluid UI uses the latest HTML5 technology meaning your work is automatically stored locally and online. Please sign up for a new account or sign in to your existing account to save automatically.
Tooltips
All major buttons have tooltips. Hover over a button to display a tooltip that will help you identify what it does. If you notice any controls without tooltips please let us know using the feedback tab.
via Hacker News https://www.fluidui.com/editor/live/
Ameya Karve's Weblog 