{"id":3440,"date":"2010-11-10T17:16:50","date_gmt":"2010-11-10T06:16:50","guid":{"rendered":"https:\/\/creately.com\/blog\/?p=3440"},"modified":"2024-09-12T17:02:52","modified_gmt":"2024-09-12T06:02:52","slug":"wireframes-and-mockups-are-they-worth-getting-to-know","status":"publish","type":"post","link":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/","title":{"rendered":"Wireframes and Mockups. Are they worth getting to know?"},"content":{"rendered":"
<\/div>
\n

There\u2019s a reason why we\u2019ve implied (above) that both wireframes and mockups share a close relationship.<\/p>\n

But before (we explain, and) you get your brain all jittery with definitions, remember that figuring out what a wireframe and a mockup is a simple deal. The former is basically a skeleton of an interface minus the aesthetic details. The latter, on the other hand, is a model of the website in real life complete with fonts, colors, buttons, and the whole nine yards.<\/p>\n

While a wireframe is commonly used to establish the basic structure of a site, so that a client is aware of how it will look, a mockup is just one step before the site is launched (for real) – see the relationship? There\u2019s nothing like a diagram to show this, so take a peek at the wireframe below.<\/p>\n

\"\"<\/a><\/p>\n

Now, sneak a peek at a mockup, again below.<\/p>\n<\/div>\n

\n

\"\"<\/a><\/p>\n

Of course, with Creately offering an online platform, you are at the receiving end of a whole host of advantages. Not only do you get to create interactive mockups, but you also get to share them with your team & clients by inviting them to review & comment. You can also engage clients to iterate over your mockups to reduce project turnaround times.<\/p>\n

So with Creately<\/a> being a real diagramming-meister, you can betcha we\u2019ll be back with more (and varied!!) wireframes and mockups in no time. Till then, run amok with them mockups!<\/p>\n

Wireframe Objects and Their Usage<\/strong><\/h3>\n

This is an overview of all the wireframe objects that you will use when drawing wireframes and web mockups.<\/p>\n

Table<\/h4>\n

Table object from Creately’s UI Mockup tool<\/a> is a real ease to use! It can be used for anything as simple as a datasheet, a complex sudoku game, or even a word puzzle.<\/p>\n

\"table_object\"<\/p>\n

Accordion<\/h4>\n

Completely customizable, collapsible Accordion pane is just a few keystrokes away. Get started right away.<\/p>\n

\"accordion\"<\/p>\n

Tree View Control<\/h4>\n

Tree View control is a real child’s play with Creately. Use it in your UI mock-ups to execute hierarchical data sets, folder views and other similar data structures. This is the most simple Text-driven Smart KObject from the list. Go give it a spin!<\/p>\n

\"treeview\"<\/p>\n

Tab Control<\/h4>\n

Are you looking for a solution to create multiple tab pages in seconds? With Creately’s smart KObject improvements you can create as many Tabs as you might inside the Tab Control. Check this for some usage examples of Tab Controls.<\/p>\n

\"tab_cntrl\"<\/p>\n

Star Rating<\/h4>\n

Creately’s Star Rating object provides an easy rating experience that allows users to select the number of stars that represents their rating. Wanna see some examples?<\/p>\n

\"star_rating\"<\/p>\n

Browser<\/h4>\n

Have you designed a mockup, and want to see how it’ll appear in a browser? This is simple with Creately’s Browser object! Simply drag-n-drop a Browser object and configure the properties to create your browser.<\/p>\n

\"browser\"<\/p>\n

Dropdown Menu<\/h4>\n

Create stylish Dropdown Menus in just a few minutes! Make a few text edits on the Smart Dropdown Menu object to configure your Dropdown Menu. Then select a suitable Dropdown menu style and attach it to your Menu bar.<\/p>\n

\"menu_bar\"<\/p>\n

More Example Templates<\/p>\n

UI Mockups – Star Rating<\/a>
\nAMOn+ Ontology Suite<\/a>
\nUI Mockups – Calender<\/a>
\nUI Mockups – Table<\/a>
\nUI Mockups – Slider<\/a>
\nUI Mockups-Tab<\/a>
\nUI Mockups -Breadcrumbs<\/a>
\nUI Mockups-Tree<\/a>
\nUI Mockups-Menu Bar<\/a>
\nBuild tools <\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

There\u2019s a reason why we\u2019ve implied (above) that both wireframes and mockups share a close relationship. But before (we explain, and) you get your brain all jittery with definitions, remember that figuring out what a wireframe and a mockup is… Read More<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[681,686,683,115,85,94],"class_list":["post-3440","post","type-post","status-publish","format-standard","hentry","category-diagrams","tag-diagrams","tag-examples","tag-features","tag-mockups","tag-web-design","tag-wireframes"],"yoast_head":"\nWireframes and Mockups. Are they worth getting to know? - Creately Blog<\/title>\n<meta name=\"description\" content=\"Wireframes are basically a skeleton of an interface minus the aesthetic details. Mockups, on the other hand, is a model of the web site in real life.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wireframes and Mockups. Are they worth getting to know? - Creately Blog\" \/>\n<meta property=\"og:description\" content=\"Wireframes are basically a skeleton of an interface minus the aesthetic details. Mockups, on the other hand, is a model of the web site in real life.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Creately Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/creately\" \/>\n<meta property=\"article:author\" content=\"http:\/\/facebook.com\/nishadha\" \/>\n<meta property=\"article:published_time\" content=\"2010-11-10T06:16:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-12T06:02:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png\" \/>\n<meta name=\"author\" content=\"Nishadha\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nishadha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\"},\"author\":{\"name\":\"Nishadha\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291\"},\"headline\":\"Wireframes and Mockups. Are they worth getting to know?\",\"datePublished\":\"2010-11-10T06:16:50+00:00\",\"dateModified\":\"2024-09-12T06:02:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\"},\"wordCount\":557,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png\",\"keywords\":[\"diagrams\",\"examples\",\"Features\",\"mockups\",\"web-design\",\"wireframes\"],\"articleSection\":[\"Diagrams\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\",\"url\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\",\"name\":\"Wireframes and Mockups. Are they worth getting to know? - Creately Blog\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png\",\"datePublished\":\"2010-11-10T06:16:50+00:00\",\"dateModified\":\"2024-09-12T06:02:52+00:00\",\"description\":\"Wireframes are basically a skeleton of an interface minus the aesthetic details. Mockups, on the other hand, is a model of the web site in real life.\",\"breadcrumb\":{\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage\",\"url\":\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png\",\"contentUrl\":\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creately.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wireframes and Mockups. Are they worth getting to know?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/creately.com\/blog\/#website\",\"url\":\"https:\/\/creately.com\/blog\/\",\"name\":\"Creately Blog\",\"description\":\"Latest Product Updates and Tips on Working Visually\",\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/creately.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/creately.com\/blog\/#organization\",\"name\":\"Creately\",\"url\":\"https:\/\/creately.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"width\":430,\"height\":237,\"caption\":\"Creately\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/creately\",\"https:\/\/x.com\/creately\",\"https:\/\/www.instagram.com\/creately_app\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291\",\"name\":\"Nishadha\",\"description\":\"Software engineer turned tech evangelist. I handle marketing stuff here at Creately including writing blog posts and handling social media accounts. In my spare time, I love to read and travel.\",\"sameAs\":[\"http:\/\/facebook.com\/nishadha\",\"https:\/\/x.com\/rumblinglankan\"],\"url\":\"https:\/\/creately.com\/blog\/author\/nish\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wireframes and Mockups. Are they worth getting to know? - Creately Blog","description":"Wireframes are basically a skeleton of an interface minus the aesthetic details. Mockups, on the other hand, is a model of the web site in real life.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/","og_locale":"en_US","og_type":"article","og_title":"Wireframes and Mockups. Are they worth getting to know? - Creately Blog","og_description":"Wireframes are basically a skeleton of an interface minus the aesthetic details. Mockups, on the other hand, is a model of the web site in real life.","og_url":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/","og_site_name":"Creately Blog","article_publisher":"https:\/\/www.facebook.com\/creately","article_author":"http:\/\/facebook.com\/nishadha","article_published_time":"2010-11-10T06:16:50+00:00","article_modified_time":"2024-09-12T06:02:52+00:00","og_image":[{"url":"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png","type":"","width":"","height":""}],"author":"Nishadha","twitter_misc":{"Written by":"Nishadha","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#article","isPartOf":{"@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/"},"author":{"name":"Nishadha","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291"},"headline":"Wireframes and Mockups. Are they worth getting to know?","datePublished":"2010-11-10T06:16:50+00:00","dateModified":"2024-09-12T06:02:52+00:00","mainEntityOfPage":{"@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/"},"wordCount":557,"commentCount":0,"publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"image":{"@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png","keywords":["diagrams","examples","Features","mockups","web-design","wireframes"],"articleSection":["Diagrams"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/","url":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/","name":"Wireframes and Mockups. Are they worth getting to know? - Creately Blog","isPartOf":{"@id":"https:\/\/creately.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage"},"image":{"@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png","datePublished":"2010-11-10T06:16:50+00:00","dateModified":"2024-09-12T06:02:52+00:00","description":"Wireframes are basically a skeleton of an interface minus the aesthetic details. Mockups, on the other hand, is a model of the web site in real life.","breadcrumb":{"@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#primaryimage","url":"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png","contentUrl":"https:\/\/creately.com\/blog\/wp-content\/uploads\/2010\/11\/mock-up1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/creately.com\/blog\/diagrams\/wireframes-and-mockups-are-they-worth-getting-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creately.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Wireframes and Mockups. Are they worth getting to know?"}]},{"@type":"WebSite","@id":"https:\/\/creately.com\/blog\/#website","url":"https:\/\/creately.com\/blog\/","name":"Creately Blog","description":"Latest Product Updates and Tips on Working Visually","publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creately.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/creately.com\/blog\/#organization","name":"Creately","url":"https:\/\/creately.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","width":430,"height":237,"caption":"Creately"},"image":{"@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/creately","https:\/\/x.com\/creately","https:\/\/www.instagram.com\/creately_app\/"]},{"@type":"Person","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291","name":"Nishadha","description":"Software engineer turned tech evangelist. I handle marketing stuff here at Creately including writing blog posts and handling social media accounts. In my spare time, I love to read and travel.","sameAs":["http:\/\/facebook.com\/nishadha","https:\/\/x.com\/rumblinglankan"],"url":"https:\/\/creately.com\/blog\/author\/nish\/"}]}},"_links":{"self":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/3440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/comments?post=3440"}],"version-history":[{"count":31,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/3440\/revisions"}],"predecessor-version":[{"id":31339,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/3440\/revisions\/31339"}],"wp:attachment":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media?parent=3440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/categories?post=3440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/tags?post=3440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}