{"id":22493,"date":"2020-09-09T01:06:13","date_gmt":"2020-09-09T08:06:13","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=22493"},"modified":"2023-03-28T06:51:47","modified_gmt":"2023-03-28T13:51:47","slug":"conceptual-model","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/","title":{"rendered":"How To Use Conceptual Models for Better UX and UI Design"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1-1024x513.png\" alt=\"BlogHeader ConceptualModels 1200x600 1\" class=\"wp-image-22495\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1-1024x513.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1-599x300.png 599w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1-768x385.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When you\u2019re designing for a friendly user experience and user interface, you start with a concept. You have an idea of how it should work in the real world. You just need to communicate it to the rest of the design team.<\/p>\n\n\n\n<p>Welcome to the world of what we call Conceptual Models. In this article, we will explain what Conceptual Models are and how to use them.\u00a0<\/p>\n\n\n\n<p>Design interactive prototypes in UXPin and make your concept palpable and easy to grasp. UXPin is an all-around prototyping tools that covers every part of UX process, from conceptualization till design handoff. Check it out. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-conceptual-model\">What Is a Conceptual Model?<\/h2>\n\n\n\n<p>A conceptual model is a representation of a system. It shows how people, places, and things interact. They show the real-world features and interactions of your design idea.<\/p>\n\n\n\n<p>In other words, a conceptual model is an abstraction of a piece of the real world or a design you plan to bring into the real world.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conceptual-models-that-you-already-know\">Conceptual Models That You Already Know<\/h3>\n\n\n\n<p><strong>Google Maps<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.46.42-1024x877.png\" alt=\"Zrzut ekranu 2023 03 28 o 15.46.42\" class=\"wp-image-43982\" width=\"550\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.46.42-1024x877.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.46.42-350x300.png 350w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.46.42-768x657.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.46.42-1536x1315.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.46.42.png 1584w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When you pull up <a href=\"https:\/\/maps.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google maps<\/a> on your mobile phone or another device, you will see a representation of the roads, bridges, intersections, restaurants, fueling stations, retail stores, and points of interest.<\/p>\n\n\n\n<p>Let\u2019s say you want to visit <a href=\"https:\/\/www.carnegiehall.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carnegie Hall<\/a> in New York City.<\/p>\n\n\n\n<p>You enter \u201cCarnegie Hall\u201d into the search engine. It brings up a map of the area around 7th Avenue and West 57th Street in New York, New York, USA.<\/p>\n\n\n\n<p>You\u2019ll see that the 57th Street Subway Station is across the street from Carnegie Hall, so you can just take the train to get there..<\/p>\n\n\n\n<p>You\u2019ll also see that there are restaurants, diners, and hotels nearby in case you get hungry during your visit or want to stay overnight.<\/p>\n\n\n\n<p>These facilities appear on the map as sketches of buildings with labeled markers showing their location. Cartographers at Google maps that show you the concept of the area of New York near Carnegie Hall.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>A Planetarium<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.48.56-1024x877.png\" alt=\"Zrzut ekranu 2023 03 28 o 15.48.56\" class=\"wp-image-43984\" width=\"550\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.48.56-1024x877.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.48.56-350x300.png 350w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.48.56-768x657.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.48.56-1536x1315.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Zrzut-ekranu-2023-03-28-o-15.48.56.png 1584w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Take an orbital model of the <a href=\"https:\/\/solarsystem.nasa.gov\/solar-system\/our-solar-system\/overview\/#:~:text=Our%20solar%20system%20consists%20of,of%20asteroids%2C%20comets%20and%20meteoroids.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">solar system<\/a>. It has spheres that represent the Sun and planets. They\u2019re mounted on arms that hold the \u201cplanets\u201d at a distance from the \u201cSun\u201d that\u2019s proportionate to the distances of the real-world planets.<\/p>\n\n\n\n<p>Within a complex system of gears, wheels, cogs, and sprockets, the spheres revolve around the \u201csun\u201d and rotate just as the real-world planets.<\/p>\n\n\n\n<p>It\u2019s not the solar system, but it shows you how the planets move.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>A Flowchart<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/flowchart-example-751x1024.png\" alt=\"flowchart example\" class=\"wp-image-43986\" width=\"350\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/flowchart-example-751x1024.png 751w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/flowchart-example-220x300.png 220w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/flowchart-example-768x1048.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/flowchart-example.png 1024w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/figure>\n\n\n\n<p>A flowchart represents processes. You have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ovals signify the beginning and end of the process.<\/li>\n\n\n\n<li>Rectangles represent steps of the process.<\/li>\n\n\n\n<li>Diamonds symbolize a decision.<\/li>\n\n\n\n<li>The text describes the steps and actions.<\/li>\n\n\n\n<li>Document icons that could mean \u201cprint invoice\u201d or \u201creview sales report.\u201d<\/li>\n\n\n\n<li>Input, output, merge, and other symbols.<\/li>\n\n\n\n<li>Arrows show the direction of the process flow.<\/li>\n<\/ul>\n\n\n\n<p>As you can see that conceptual modeling can take many forms.<\/p>\n\n\n\n<p>And they\u2019re not media dependent. That is, you can create them with a sophisticated design program or draw them on a piece of paper.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conceptual-model-entities\">Conceptual Model Entities<\/h2>\n\n\n\n<p>Conceptual modeling entities are the symbols of real-world objects in a system. Let\u2019s take Google Maps again as an example.<\/p>\n\n\n\n<p>You\u2019ll see that it has lines to represent the streets. Two parallel lines represent West 57th Street to show that it\u2019s a 2-way street.<\/p>\n\n\n\n<p>7th Avenue is a single line because it\u2019s a one-way street. It has arrows to show the direction of traffic flow in the real world.<\/p>\n\n\n\n<p>We\u2019ll talk more about entity interactions later.<\/p>\n\n\n\n<p>In the case of the planetarium, we have spheres that represent the sun and planets. The entity that signifies the sun is at the center of the model. It\u2019s usually a yellow-colored sphere that\u2019s larger than the others.<\/p>\n\n\n\n<p>Closest to the \u201csun,\u2019 you have the entity (a small sphere) that depicts Mercury. The second-largest entity is farther out and symbolizes Jupiter. And so on with the other planets.<\/p>\n\n\n\n<p>In a flowchart, entities appear as icons with text descriptions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-entity-classes-and-instances\">Entity Classes and Instances<\/h3>\n\n\n\n<p>Entity classes are the universals. Instances are particulars.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Class &#8211; Street\n<ul class=\"wp-block-list\">\n<li>W 57th St<\/li>\n\n\n\n<li>7th Ave<\/li>\n\n\n\n<li>Broadway<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Class &#8211; Restaurant\n<ul class=\"wp-block-list\">\n<li>Chai Thai Kitchen<\/li>\n\n\n\n<li>Brooklyn Diner<\/li>\n\n\n\n<li>P.J. Carney\u2019s Pub<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Class &#8211; Hotel\n<ul class=\"wp-block-list\">\n<li>Park Central Hotel<\/li>\n\n\n\n<li>The Wellington<\/li>\n\n\n\n<li>Courtyard by Marriott New York<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conceptual-model-relationships\">Conceptual Model Relationships<\/h2>\n\n\n\n<p>Conceptual model relationships depict an interaction between entities.<\/p>\n\n\n\n<p>It\u2019s like forming a sentence where you have a subject, a verb, and an object. The relationship is the verb. The entities are the subject and object.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Karen Smith (entity) checks in (relationship) at Park Central Hotel (entity).<\/li>\n\n\n\n<li>The box office (entity) sells (relationship) tickets (entity).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conceptual-model-constraints\">Conceptual Model Constraints<\/h3>\n\n\n\n<p>Constraints govern entity relationships within a conceptual model. You may recall that there are entity classes and instances. One instance might interact with a whole class. A class may interact with other classes. Or an instance may interact with only one other instance. A class might not interact with any other classes. Some possible constraints are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>One and only one.<\/strong> This indicates that only one entity of this type is in the system. For example, an orchestra has one conductor.<\/li>\n\n\n\n<li><strong>Zero or one.<\/strong> You can think of this as a yes\/no or an on\/off constraint. For example, one customer attending a performance at Carnegie hall has a season pass. Another does not. The entity that we call \u201cseason pass\u201d has a constraint value of 1 in its relationship with the first customer. With the second customer, the value is 0.<\/li>\n\n\n\n<li><strong>More than one.<\/strong> You express this as a minimum and maximum value. An orchestra might need a minimum of 4 violinists. A full-sized symphony orchestra has no more than 34. The constraint value for the entity labeled \u201cViolinist\u201d is 4 to 34 in relation to an entity named \u201cOrchestra.\u201d<\/li>\n\n\n\n<li><strong>One or more.<\/strong> Here you have to have at least 1. An entity named \u201cMusicians\u201d must have a value of at least 1 to have a relationship with the entity \u201cMusical Performance.\u201d<\/li>\n\n\n\n<li><strong>Zero or more.<\/strong> This says that it\u2019s possible to have none of this kind of entity and that you can one or more. You might not sell any tickets to a performance. But if the performance hall has 3,671 seats, that\u2019s the maximum value.<\/li>\n<\/ul>\n\n\n\n<p>Suppose you\u2019re creating a conceptual model for a database for Carnegie Hall. Some of the constraints might look like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>People\n<ul class=\"wp-block-list\">\n<li>Musicians\n<ul class=\"wp-block-list\">\n<li>Conductors &#8211; 1 and only 1<\/li>\n\n\n\n<li>Violinists &#8211; 4 to 34<\/li>\n\n\n\n<li>Violas &#8211; 4 to 12<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Customers\n<ul class=\"wp-block-list\">\n<li>Season pass holders &#8211; 0 to 1,000<\/li>\n\n\n\n<li>Robert Johnson &#8211; 1 and only 1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Performances\n<ul class=\"wp-block-list\">\n<li>Event on 5 April 2021\n<ul class=\"wp-block-list\">\n<li>Sold tickets &#8211; 0 to 3,671<\/li>\n\n\n\n<li>Unsold tickets &#8211; 0 to 3,671<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>And relationship constraints might be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Conductors (1 and only 1) to violinists (4 to 34).<\/li>\n\n\n\n<li>Customers (0 to infinity) to seats (0 to 3,671).<\/li>\n\n\n\n<li>Robert Johnson (1 and only 1) to season passes (0 or 1).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-putting-it-together\">Putting It Together<\/h2>\n\n\n\n<p>You have an idea for a system, and you know what you want it to do in the real world. Now you need to communicate the idea to your teammates. So far, you\u2019ve looked at the parts of a conceptual model.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Entities &#8211; the people, places, and things.<\/li>\n\n\n\n<li>Relationships &#8211; how the entities interact with one another.<\/li>\n\n\n\n<li>Constraints &#8211; the number of entities interacting.<\/li>\n<\/ul>\n\n\n\n<p>You want to keep it simple. Start with the drawing tools inside UXPin. That way, you can quickly share your idea with the entire design team, clients, investors, and other stakeholders.<\/p>\n\n\n\n<p>The great thing about UXPin is that you won\u2019t need to export your design file to another program when you move from concept modeling to prototyping.<\/p>\n\n\n\n<p>Use the box tool from the editor to add entities to your model. Add text inside of a box to label the entity.&nbsp;<\/p>\n\n\n\n<p>You can include the constraints inside the box or add text outside.<\/p>\n\n\n\n<p>Use lines to show entity relationships. If the interaction only goes one direction, draw an arrow. Add text to describe the relationship.<\/p>\n\n\n\n<p>Suppose you\u2019re making a conceptual model for a system to sell tickets to an event at Carnegie Hall. It might look something like this.<\/p>\n\n\n\n<p>You may have noticed that the entity \u201cPeople\u201d has no constraint value. It\u2019s omitted to keep things simple. It could easily carry a value of \u201c0 to infinity\u201d or the current earth\u2019s population. You don\u2019t have to show every detail, as long as everyone concerned understands.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tips-for-success\">Tips For Success<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Establish the goal<\/strong>.<strong> <\/strong>Who is the product for? What does it do for them?<\/li>\n\n\n\n<li><strong>Brainstorm<\/strong>. Create a simple model. Get input from team members. Add details as needed.<\/li>\n\n\n\n<li><strong>Evaluate<\/strong>. Do you understand the concept? Do team members understand the concept? Does the model communicate it clearly?<\/li>\n\n\n\n<li><strong>Iterate<\/strong>. You may need several versions before finding the best way to convey the idea.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-final-thoughts\">Final Thoughts<\/h2>\n\n\n\n<p>When you kick off a UX\/UI design project, conceptual modeling can be valuable to any design team.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Establishes entities. It defines the people, places, and things represented within the model.<\/li>\n\n\n\n<li>Defines project scope. How big is it ? How much time will it take to build it?<\/li>\n\n\n\n<li>A springboard for creating more concrete models.<\/li>\n\n\n\n<li>Keeps everyone on the same page. Some team members might not work with code. But everyone needs to understand what\u2019s going on.<\/li>\n<\/ul>\n\n\n\n<p>For UX and UI designers, a conceptual model is a first step in communicating what you want the system to do for the user.<\/p>\n\n\n\n<p>Keep your model simple. You don\u2019t have to include every possible entity, relationship, or constraint value. Covering every detail can lead to a lot of time waste.<\/p>\n\n\n\n<p>When you create your conceptual model in UXPin, your teammates and stakeholders have instant access. That lets them input their ideas and give feedback. And there\u2019s no need to export to another design tool when you\u2019re ready to move to the next stage of the project. Take your design to another level. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When you\u2019re designing for a friendly user experience and user interface, you start with a concept. You have an idea of how it should work in the real world. You just need to communicate it to the rest of the design team. Welcome to the world of what we call Conceptual Models. In this article,<\/p>\n","protected":false},"author":156,"featured_media":22495,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-22493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Conceptual Models for Effective UX and UI Design | UXPin","yoast_metadesc":"Any UX\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Conceptual Models for Effective UX and UI Design | UXPin<\/title>\n<meta name=\"description\" content=\"Any UX\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use Conceptual Models for Better UX and UI Design\" \/>\n<meta property=\"og:description\" content=\"Any UX\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-09T08:06:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-28T13:51:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"601\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"How To Use Conceptual Models for Better UX and UI Design\",\"datePublished\":\"2020-09-09T08:06:13+00:00\",\"dateModified\":\"2023-03-28T13:51:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/\"},\"wordCount\":1650,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/BlogHeader_ConceptualModels_1200x600-1.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/\",\"name\":\"Conceptual Models for Effective UX and UI Design | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/BlogHeader_ConceptualModels_1200x600-1.png\",\"datePublished\":\"2020-09-09T08:06:13+00:00\",\"dateModified\":\"2023-03-28T13:51:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"Any UX\\\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/BlogHeader_ConceptualModels_1200x600-1.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/BlogHeader_ConceptualModels_1200x600-1.png\",\"width\":1200,\"height\":601,\"caption\":\"BlogHeader ConceptualModels 1200x600 1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/conceptual-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Use Conceptual Models for Better UX and UI Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Conceptual Models for Effective UX and UI Design | UXPin","description":"Any UX\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.","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:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/","og_locale":"en_US","og_type":"article","og_title":"How To Use Conceptual Models for Better UX and UI Design","og_description":"Any UX\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/","og_site_name":"Studio by UXPin","article_published_time":"2020-09-09T08:06:13+00:00","article_modified_time":"2023-03-28T13:51:47+00:00","og_image":[{"width":1200,"height":601,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"How To Use Conceptual Models for Better UX and UI Design","datePublished":"2020-09-09T08:06:13+00:00","dateModified":"2023-03-28T13:51:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/"},"wordCount":1650,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/","name":"Conceptual Models for Effective UX and UI Design | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png","datePublished":"2020-09-09T08:06:13+00:00","dateModified":"2023-03-28T13:51:47+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"Any UX\/UI project starts with a concept. Concept modeling is about communicating how the design should work in the real world.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/09\/BlogHeader_ConceptualModels_1200x600-1.png","width":1200,"height":601,"caption":"BlogHeader ConceptualModels 1200x600 1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/conceptual-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How To Use Conceptual Models for Better UX and UI Design"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=22493"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22493\/revisions"}],"predecessor-version":[{"id":43989,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22493\/revisions\/43989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/22495"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=22493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=22493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=22493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}