Use these smart UI Mockups Objects to create Fast & Easy Web Wireframes & UI Mockups

1. Table Object
2. Accordion Pane
3. Tree Control
4. Tab Control
5. Star Rating
6. Browser
7. Dropdown Menu
8. Menu Bar
9. Calendar
10. Breadcrumb Navigation
11. Slider

How do you build a Table in Creately for use in UI Mockups?

Creating a Table Object is amazingly easy! Click here to see some of the examples of Table Objects.

Now, follow these steps to create them yourself!

• Drag-n-Drop a Table Object from Creately’s Left Panel, click to edit Text to alter Table Data.



• Insert “,” (commas) to define Columns; and insert Line Breaks to define Rows.



• Insert "\n" to define a new line within the cell.

  Note - If "\n" isn’t followed by any text, an empty row will be inserted within the cell.



• Edit Table styles by clicking on Properties.

  Select the Row & Column Headers to apply gradient fills on the Row & Column Headers respectively.



• And, also don't fail to pick your favourite Table Styles.

How do you create a collapsible Accordion Pane?

Create your Accordion Pane as you follow these easy steps!

• Drag-n-Drop an Accordion Pane from Creately’s Left Panel, and click to configure the Pane Names.



• Insert Line Breaks to create Accordion Pane Headers

• Insert "*" (asterisk) to open up a Pane.

• Insert "\n" to define a new pane without a header (empty pane).

How do you configure a Tree Diagram in Creately for use in Software Designs?

Drawing a Tree Diagram is not hard as it sounds. Just follow these steps to create one!

• Drag-n-Drop a Tree Object from Creately’s Left Panel, and click to edit the Tree View.



• Insert Line Breaks to define a Node in the Tree. Every Line will be a Node! And, insert the required number of “-” (hyphen) at the beginning of the line to define the indent of the node.

• Insert “+/-” (Plus/Minus) at the end of each line to show if the node is either closed or opened.

• Insert “#,##” (Hash/Double Hash) at the end of the line after “+/-” to define if the node is unchecked or checked.



• You can also choose the type of icon you want to use in your Tree Diagram by choosing from the three available options -

How do you create multiple Tab Pages on a Tab control?

Creating multiple Tab Pages on a Tab Control is easy with these steps!

• Drag-n-Drop a Tab control from the Left Panel, and click to edit the Tab Bar Items.



• You'll have to insert “,” (commas) to separate tabs. And, insert “*” (asterisk) in front of a particular Tab Bar Item to keep it opened.

  Note - If you enter multiple “*” in different tabs, the first tab with the “*” in front will open.

  And, if you fail to enter any “*” at all, the first tab will open.

• You could choose to either show/hide close buttons on your Tabs, by simply selecting/deselecting the check-box for Show Close Button.



• And, assign fixed Tab sizes by selecting the check-box. But if you wish to leave it unchecked, you'll see the Tab re-size automatically to accommodate text.



• Finally choose the preferred Tab Style, and you've created multiple tab pages on a Tab Control.

How do you create a Star Rating while you change the rating value?

Follow these steps, it's very easy!

• Drag-n-Drop a Star rating from Creately’s Left Panel, and click on Properties to create your Star Rating.

• You’ll see 5 Stars by default. If you ever wish to have more/less than 5 Stars, use the scroll-er.

  The Star Rating Value has a default value of 4. Again, if you wish to increase/decrease the rating value, use the Rating scroll-er.

How do you create a Browser for your Web Design Mock up?

Check out our Browser Examples here! And if you're convinced get started by following these instructions!

• Drag-n-Drop a Browser from Creately’s Left Panel, and click to edit the Browser Data.



• Every new Browser field (Title, Address, Search Text) has to appear in a new Line followed by a “:” (colon).

  And, the text which appears after the “:” is considered the displaying text for the relevant Text Area.



• Choose your browser size, or set the resolution to custom to have the default Browser Size.

• You can either show/hide the Window buttons which appear on the top right corner of the Browser by simply selecting/deselecting the Show window buttons check-box.

How do you configure a Dropdown Menu?

Creating a Dropdown Menu might look very tedious, but it's not too bad if you follow these steps!

• Drag-n-Drop a Dropdown Menu from Creately’s Left Panel, and click to edit the Drop Down Menu Data.



• Each line defines a new Menu Item. Insert a “:” (colon) after the Menu Item, followed by text to define the shortcut key for the Menu Item.

  Include “*” (asterisk) in front of the Menu Item to display the currently selected Menu Item. Add “>” after the Menu Item to denote a Sub Menu availability; and insert “~” to disable a Menu Item.



• Insert “#” (hash) in front of the Menu Item to include a Checked Icon; and add “&” in front of any character in the Menu Item which requires a underline. Also, insert “.” (period) if you wish to include an Option Icon in front of the Menu Item.

  It is necessary to insert “--” (Double Hyphen) each time you wish to denote a separated Menu Section.



• And now that you’ve created the object, choose from the available Drop Down Menu Styles to give it a nice look-n-feel.

How do you create a Menu Bar for your Wireframes?

Easy to follow steps to create your Menu bar in mins!

• Drag-n-Drop a Menu Bar from Creately’s Left Panel, and click to edit the Drop Down Menu Data.



• Enter “,” (commas) to separate each menu Item. And, insert “*” (asterisk) to define the currently selected Menu!

Note - If you enter multiple “*” in your Menu Bar, the first Menu Item with the “*” in front would display as the selected Menu item.

And, if you fail to enter any “*” at all, none of the Menu Items would display as selected.

• You can insert “~” to disable a Menu Item; and add “&” in front of the character which requires a underline.



• Then, assign a nice style to your Menu Bar Object by choosing from the available styles.

How do you insert Calendars in your Mockups?

Looking for some great Calendar examples? Check them out here!

And, now create one yourself by following these steps!

• Drag-n-Drop the Calendar Object and click on properties to configure the Calendar details.

• Depending on the properties you set, the Calendar will auto update to the selected Day/Month/Year.



• But, in case you set the Day to “Do not show” - the day will not have the border around the date.

How do you configure Breadcrumb navigation Panels?

Simple! Just follow these four steps and you're done!

• Drag-n-Drop the Breadcrumb Navigation Object from Creately’s Left Panel, and click to edit the Breadcrumb Items.



• Enter “,” (commas) to separate each Navigation Menu Item.

• Adjust the padding between the Menu Items and the Arrows if required (the default is set at 10).



• Select the Breadcrumb outline check-box if you want to give an outline to your Navigation panel, and choose your favorite Arrow Style to customize the appearance.

How do you configure Slider's position?

What's the slider in mind - Vertical or Horizontal? Check out the Slider examples, and read below learn more on creating your slider.

• Drag-n-Drop the Slider (Vertical/Horizontal) from the Left Panel, and click on properties to adjust the Slider Position.

  Note - You'll find an Indicator property once you click on the Vertical Slider's properties. This indicates the direction of the arrow.

• You can then configure the Slider's Position to any value at the interval of 5 between 0-100. But the default value is 40.

• As mentioned in Step 1 above, you can select the direction of your Vertical Slider's Indicator. Default is on the Left Side, but you can select the check-box to change the direction to the Right.