--- title: Prototypes, Mockups, Wireframes: what's the difference? description: This article explains the differences between prototypes, mockups, and wireframes in the design process. It emphasizes the importance of understanding these... canonical: https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Prototypes, Mockups, Wireframes: what's the difference? | daily.dev og:description: This article explains the differences between prototypes, mockups, and wireframes in the design process. It emphasizes the importance of understanding these... og:url: https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg og:image: https://api.daily.dev/og/posts/0nj5oDhmg.png og:image:alt: Prototypes, Mockups, Wireframes: what's the difference? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Prototypes, Mockups, Wireframes: what's the difference? **[asayer](https://daily.dev/sources/asayer)** · 12 min read · 16 upvotes · 1 comments ## Summary This article explains the differences between prototypes, mockups, and wireframes in the design process. It emphasizes the importance of understanding these differences for clear communication, efficient workflow, stakeholder expectations, user-centric design, and resource allocation. The article also provides information on the purpose, types, and characteristics of wireframes, as well as tools and methods for wireframe creation. It then explores the key features and distinctions of mockups, and their role in design iteration and client presentations. Additionally, the article highlights the unique attributes, roles, and benefits of prototypes in the design process, including usability testing and user validation. It discusses the design workflow from wireframes to mockups and interactive prototypes, and the integration of user feedback to refine designs. The conclusion emphasizes the importance of clear communication and understanding in the design process, as well as truly understanding the user experience. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@kaushikchelladurai** · 0 upvotes > Good Article! --- Tags: [#ux](https://daily.dev/tags/ux) [View this post on daily.dev](https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Prototypes, Mockups, Wireframes: what's the difference?","url":"https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg"},"datePublished":"2023-10-31T02:53:59.980Z","dateModified":"2023-10-31T02:53:39.166Z","description":"This article explains the differences between prototypes, mockups, and wireframes in the design process. It emphasizes the importance of understanding these...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5b545472ae7427571f3c0fb3e36fee81?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5b545472ae7427571f3c0fb3e36fee81?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"asayer","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"asayer","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/be8d9d38650943c8a1718ba79f23e9ac","url":"https://daily.dev/sources/asayer"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":16},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"ux","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"asayer","item":"https://daily.dev/sources/asayer"},{"@type":"ListItem","position":3,"name":"Prototypes, Mockups, Wireframes: what's the difference?"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/prototypes-mockups-wireframes-what-s-the-difference--0nj5odhmg","comment":[{"@type":"Comment","text":"Good Article!","datePublished":"2023-11-02T13:13:54.480Z","url":"https://daily.dev/posts/0nj5oDhmg#c-xVk2WuwL0","author":{"@type":"Person","name":"Kaushik C","url":"https://daily.dev/kaushikchelladurai","image":"https://media.daily.dev/image/upload/s--O1VAJ_so--/f_auto,q_auto/v1701081265/avatars/avatar_qyN7YNwdJkjcBEKislIu2"}}]} ```