UI Mockups for your website

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! 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?

Any mockup starts with a browser. Whether its Firefox for Chrome we got you covered. Follow the below instructions to add a browser to your diagram.

• Drag-n-Drop a Browser from "Web Controls" library found in Creately’s Left Panel, and click on it to change the URL.

  

• You can drag for the edges to make it larger or smaller so it will fit your mockup.

• You can change the operating system the browser is viewed by going to the "Operating System" drop down in the properties panel. At the moment we support MS Windows and OSX.

  

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.

  

• You can style your menu bar by using the "Style" or "Fill" button at the top.

How do you insert Calendars in your Mockups?

Looking to add a calendar object to your web mock-up? We have a calendar object which you can customize to your hearts content.

And, now create one yourself by following these steps!

• Drag-n-Drop the Calendar Object from "UI Controls" library 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? Whatever you prefer we got you covered with Creately.

• Drag-n-Drop the Slider (Vertical/Horizontal) from the UI controls library in 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.