[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post:ux-portfolio-mockups-case-studies":3},{"post":4,"related":113},{"id":5,"title":6,"slug":7,"excerpt":8,"status":9,"publishedAt":10,"updatedAt":11,"coverImageUrl":12,"coverImageAlt":13,"readingMinutes":14,"wordCount":15,"source":16,"focusKeywords":17,"category":22,"tags":27,"author":42,"html":45,"toc":46,"coverImageCredit":26,"coverImageCreditUrl":26,"seoTitle":94,"seoDescription":95,"faq":96,"noindex":112},"cmvxhoxxh000308jmhtr2slpk","UX Portfolio Mockups: How to Present App Designs in Case Studies","ux-portfolio-mockups-case-studies","UX portfolio mockups work best as packaging, not proof: use one angled 3D device mockup for the thumbnail and hero image, flat front-facing frames for flows and detail screens, and keep the process work (sketches, research, iterations) visible.","published","2026-11-02T02:00:03.334Z","2026-11-02T02:00:03.407Z","https:\u002F\u002Frzg4dr9ak9vfbaym.public.blob.vercel-storage.com\u002Fblog\u002F2026-11\u002Fux-portfolio-mockups-case-studies-cover-mvxhovvs-JK6EYCD0MXi9RbrPvPlQKfmwaD0MrE.jpg","UX portfolio mockups of an app case study on a MacBook Pro, iPad Pro and iPhone 17 Pro",7,1615,"auto",[18,19,20,21],"ux portfolio mockups","ux case study visuals","present app designs in portfolio","portfolio device mockups",{"id":23,"name":24,"slug":25,"description":26},"cmvxbz973000108kxliuusz0h","Design","design",null,[28,32,34,38],{"id":29,"name":30,"slug":31},"cmvxhoxws000208jm3nzksssj","case studies","case-studies",{"id":33,"name":25,"slug":25},"cmvxhoxvb000008jmm7x8nxwe",{"id":35,"name":36,"slug":37},"cmvxbz972000008kxigja0le6","device mockups","device-mockups",{"id":39,"name":40,"slug":41},"cmvxhoxwl000108jmfylfrstq","ux portfolio","ux-portfolio",{"name":43,"avatarUrl":44},"Nexa Admin","https:\u002F\u002Flh3.googleusercontent.com\u002Fa\u002FACg8ocKzKKV0Gu7poiUhGY6esfYHXiH2keN4ZMNY5yT6GmMFCLgg624=s96-c","\u003Cp>UX portfolio mockups work best as packaging, not proof. Use one polished, angled device mockup for each case study's thumbnail and hero image. Show flows and detail screens in flat, front-facing frames. Keep your sketches, research and iterations visible, because that process work is what hiring managers are actually evaluating.\u003C\u002Fp>\n\u003Cp>This guide is for UX and product designers putting together or refreshing a portfolio. It covers where device mockups help a case study, where they get in the way, and how to produce a consistent set quickly.\u003C\u002Fp>\n\u003Cimg loading=\"lazy\" decoding=\"async\" src=\"https:\u002F\u002Frzg4dr9ak9vfbaym.public.blob.vercel-storage.com\u002Fblog\u002F2026-11\u002Fux-portfolio-mockups-case-studies-mockup-mvxhox2t-JbaZskQBYvqU4Gk60I2s8e8Wedb631.jpg\" alt=\"Case study hero showing the same app screen on an iPhone 17 Pro and Pixel 9 Pro in a consistent portfolio style\" width=\"1200\" height=\"630\" \u002F>\n\n\u003Ch2 id=\"what-are-ux-portfolio-mockups\">What are UX portfolio mockups?\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>A device mockup is an image that places a real interface screenshot inside a rendered phone, tablet, laptop or monitor frame, so viewers see the design in the context where people would use it.\u003C\u002Fstrong> In a UX portfolio, mockups usually appear in three places: the case study thumbnail on your portfolio's home page, the hero image at the top of each case study, and the final-design section near the end.\u003C\u002Fp>\n\u003Cp>Mockups are a presentation layer. They make a screen feel like a shipped product, and they make a grid of projects look consistent. But they don't show how you think. The Nielsen Norman Group puts it plainly in \u003Ca href=\"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fux-design-portfolios\u002F\" target=\"_blank\" rel=\"noopener\">5 Steps to Creating a UX-Design Portfolio\u003C\u002Fa>: \"the final screenshots only tell part of the story.\" That article also quotes a hiring manager who said, \"Don't just show me the finished product. I want to see the messy process.\"\u003C\u002Fp>\n\u003Cp>So the useful question isn't whether to use mockups. It's which parts of the case study they belong in.\u003C\u002Fp>\n\n\u003Ch2 id=\"where-should-mockups-go-in-a-ux-case-study\">Where should mockups go in a UX case study?\u003C\u002Fh2>\n\u003Cp>Put device mockups at the entry points (thumbnail and hero) and in the final-solution section. Leave research, sketches and wireframes as plain artifacts. Here's how that works out in a typical case study:\u003C\u002Fp>\n\u003Cdiv class=\"table-scroll\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\u003Cth>Case study section\u003C\u002Fth>\u003Cth>Best visual\u003C\u002Fth>\u003Cth>Mockup style\u003C\u002Fth>\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Portfolio thumbnail\u003C\u002Ftd>\u003Ctd>One recognizable key screen\u003C\u002Ftd>\u003Ctd>3D angled device (hero left\u002Fright) on a consistent backdrop\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Case study hero\u003C\u002Ftd>\u003Ctd>Key screen or 2–3 screens of the main flow\u003C\u002Ftd>\u003Ctd>Angled single device or duo\u002Ftrio layout\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Problem & research\u003C\u002Ftd>\u003Ctd>Interview notes, affinity maps, analytics charts\u003C\u002Ftd>\u003Ctd>No device frame\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Ideation\u003C\u002Ftd>\u003Ctd>Sketches, whiteboards, low-fi wireframes\u003C\u002Ftd>\u003Ctd>No device frame, or a flat frame for mid-fi tests\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Final solution flow\u003C\u002Ftd>\u003Ctd>Consecutive screens of one task\u003C\u002Ftd>\u003Ctd>Front-facing frames, side by side\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Detail \u002F interaction callouts\u003C\u002Ftd>\u003Ctd>A single screen with annotations\u003C\u002Ftd>\u003Ctd>Front-facing or plain screenshot, readable at full size\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Responsive or multi-platform work\u003C\u002Ftd>\u003Ctd>Same feature on phone, tablet and desktop\u003C\u002Ftd>\u003Ctd>Mixed devices, same angle and lighting\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>The pattern is simple. Devices go where you need to grab attention, and they come off where you need people to read and understand the work. For a more general take on that tradeoff, see \u003Ca href=\"\u002Fblog\u002Fwhen-to-use-device-mockups\">When to Use Device Mockups (and When Plain Screenshots Win)\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2 id=\"should-portfolio-mockups-be-angled-or-flat\">Should portfolio mockups be angled or flat?\u003C\u002Fh2>\n\u003Cp>Use angled 3D mockups for thumbnails and hero images, and flat, front-facing mockups for any screen a reviewer needs to read. A perspective view adds depth and makes a thumbnail grid feel premium. It also foreshortens one side of the screen, which makes small text and dense UI harder to read.\u003C\u002Fp>\n\u003Cp>Many designers argue that angled mockups hurt communication because they distort hierarchy and crop screens. That criticism is fair when every image in a case study is tilted. It matters much less for a single hero shot whose job is to say \"this is a mobile banking app\" in half a second.\u003C\u002Fp>\n\u003Ch3 id=\"a-practical-angle-rule\">A practical angle rule\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Thumbnail and hero:\u003C\u002Fstrong> a moderate hero-left or hero-right angle, or a gentle float. Avoid extreme rotations.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Flows:\u003C\u002Fstrong> front view, all devices at the same scale, in task order from left to right.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Annotated details:\u003C\u002Fstrong> front view or a plain screenshot, large enough that the callouts line up with the UI.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>We compare the two styles in more depth in \u003Ca href=\"\u002Fblog\u002F3d-vs-flat-mockups\">3D vs Flat Mockups: When Each Style Works Best\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2 id=\"how-do-you-keep-ux-portfolio-mockups-consistent\">How do you keep UX portfolio mockups consistent?\u003C\u002Fh2>\n\u003Cp>Pick one visual system for every project's mockups: the same backdrop family, the same lighting, the same angle for thumbnails and the same device generation. Consistency is what makes a portfolio grid look curated rather than assembled. It also lets the projects themselves stand out instead of the frames.\u003C\u002Fp>\n\u003Cp>The Interaction Design Foundation's guide on \u003Ca href=\"https:\u002F\u002Fixdf.org\u002Fliterature\u002Farticle\u002Fhow-to-create-visuals-for-your-ux-case-study\" target=\"_blank\" rel=\"noopener\">how to create visuals for your UX case study\u003C\u002Fa> makes the same point: \"your case study's visuals should align with your portfolio's visual identity.\" In practice that means:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>One backdrop style.\u003C\u002Fstrong> For example, a soft gradient in your portfolio's accent color, or a neutral light gray for every thumbnail.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>One thumbnail angle.\u003C\u002Fstrong> If project one uses hero-left, they all use hero-left.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Current devices.\u003C\u002Fstrong> An old phone frame can make a recent project look dated. Match the device to the platform you actually designed for (iOS, Android, iPadOS, web).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Same canvas size.\u003C\u002Fstrong> Export every thumbnail at the same aspect ratio so your grid doesn't jump around.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Real content.\u003C\u002Fstrong> Replace lorem ipsum and placeholder avatars before you render. Fake content is easy to spot in a hero image.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2 id=\"how-do-you-show-nda-work-in-a-portfolio\">How do you show NDA work in a portfolio?\u003C\u002Fh2>\n\u003Cp>You can still show NDA-protected work if you remove identifying details or rebuild the screens with generic branding, then present them the same way as your other projects. NN\u002Fg's portfolio article suggests showing workshop photos, sketches or black-and-white wireframes, blurring identifying details, or recreating designs with generic branding.\u003C\u002Fp>\n\u003Cp>Device mockups are useful here. A rebranded, anonymized screen in a clean device frame looks just as finished as public work, so your NDA project doesn't stick out as the \"lesser\" case study in the grid. Check your contract first, though. Some agreements forbid showing any screens at all, even reworked ones, and in that case process artifacts and a written walkthrough are your only option.\u003C\u002Fp>\n\n\u003Ch2 id=\"how-large-should-case-study-images-be\">How large should case study images be?\u003C\u002Fh2>\n\u003Cp>Export images sharp enough for high-density screens, then compress them for the web. Heavy images slow your portfolio down on the exact devices hiring managers use to skim it. The Interaction Design Foundation recommends keeping each image under 100KB where you can, and points to ImageOptim (JPEG), TinyPNG (PNG) and the WebP format as ways to get there. The authors also suggest roughly 60–80% text and 20–40% images in a case study.\u003C\u002Fp>\n\u003Cp>A workable approach for UX case study visuals:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Render mockups at 2× so they stay crisp on retina displays.\u003C\u002Fli>\n\u003Cli>Export hero and thumbnail images as WebP or JPEG. Use PNG only when you need transparency, for example a device floating over your portfolio's own background.\u003C\u002Fli>\n\u003Cli>Run the files through a compressor, then check text legibility at 100% zoom before you publish.\u003C\u002Fli>\n\u003Cli>Use descriptive alt text (\"Checkout flow of a grocery app on an iPhone, three screens\") instead of \"mockup1.png.\"\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch2 id=\"how-to-create-portfolio-mockups-in-mockiso\">How to create portfolio mockups in mockiso\u003C\u002Fh2>\n\u003Cp>mockiso is a browser-based tool that turns screenshots into 3D device mockups with WebGL, so there's nothing to install. Here's how to produce a matching set of thumbnails, heroes and flow images for every case study.\u003C\u002Fp>\n\u003Ch3 id=\"1-set-up-one-project-per-case-study\">1. Set up one project per case study\u003C\u002Fh3>\n\u003Cp>\u003Ca href=\"\u002Fregister\">Create an account\u003C\u002Fa>, click \u003Cem>New project\u003C\u002Fem>, and pick the device that matches the platform you designed for: an iPhone 17 Pro or Pixel 9 Pro for mobile work, an iPad Pro or Galaxy Tab S9 for tablet, a MacBook Pro 14″ or Studio Display for web apps. The full list is on the \u003Ca href=\"\u002F#devices\">devices section\u003C\u002Fa> of the home page.\u003C\u002Fp>\n\u003Ch3 id=\"2-add-your-final-screens\">2. Add your final screens\u003C\u002Fh3>\n\u003Cp>Upload screenshots by clicking, by drag and drop, or by pasting straight from Figma with Ctrl\u002FCmd+V. Use real, final content, not wireframes.\u003C\u002Fp>\n\u003Ch3 id=\"3-lock-in-your-portfolio-house-style\">3. Lock in your portfolio \"house style\"\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Choose an angle preset: \u003Cem>hero left\u003C\u002Fem> or \u003Cem>hero right\u003C\u002Fem> for thumbnails, \u003Cem>front\u003C\u002Fem> for flows.\u003C\u002Fli>\n\u003Cli>Set the camera lens. A longer focal length (around 85–135 mm) flattens perspective and keeps the UI more readable than a wide 24 mm lens.\u003C\u002Fli>\n\u003Cli>Pick studio lighting, a subtle screen reflection and a soft shadow, then use the same settings in every project.\u003C\u002Fli>\n\u003Cli>Choose a backdrop (solid color, gradient, image, transparent, or one of the 70 ready-made templates) that matches your portfolio's palette.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"4-build-the-flow-image\">4. Build the flow image\u003C\u002Fh3>\n\u003Cp>Switch the layout to \u003Cem>duo\u003C\u002Fem> or \u003Cem>trio\u003C\u002Fem> to place several devices with consecutive screenshots. This works well for \"before → during → after\" moments of a single task. Skip the App Store style caption for portfolio images. Your case study text already provides the context.\u003C\u002Fp>\n\u003Ch3 id=\"5-export-for-the-web\">5. Export for the web\u003C\u002Fh3>\n\u003Cp>Choose a canvas size, then export PNG, JPEG or WebP. Paid plans include 2× export, no watermark, and ZIP export of all angles at once, which is handy when you need the same screen as both a thumbnail and a hero. The Free plan exports at 1× with a watermark. Current limits are on the \u003Ca href=\"\u002Fpricing\">pricing page\u003C\u002Fa>, and every new account gets a 24-hour Pro trial with no card required.\u003C\u002Fp>\n\n\u003Ch2 id=\"key-takeaways\">Key takeaways\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Use angled 3D device mockups for portfolio thumbnails and case study heroes. Use front-facing frames or plain screenshots for flows and annotated details.\u003C\u002Fli>\n\u003Cli>Mockups don't replace process: NN\u002Fg recommends 3–5 detailed case studies that show the problem, your role, the solution, its impact and what you learned.\u003C\u002Fli>\n\u003Cli>Use the same backdrop, lighting, angle and device generation for every project so the portfolio grid looks curated.\u003C\u002Fli>\n\u003Cli>NDA work can still appear as anonymized or rebranded screens in a device frame, if your contract allows it.\u003C\u002Fli>\n\u003Cli>Render at 2×, then compress. IxDF suggests keeping case study images under about 100KB each and using formats like WebP.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2 id=\"make-your-next-case-study-look-finished\">Make your next case study look finished\u003C\u002Fh2>\n\u003Cp>Good UX portfolio mockups take minutes, not an afternoon in Photoshop. Set your house style once, reuse it for every project, and spend the time you save on writing about your process. \u003Ca href=\"\u002Fregister\">Start your free 24-hour Pro trial\u003C\u002Fa> and render your first case study hero in the browser.\u003C\u002Fp>",[47,51,54,57,61,64,67,70,73,76,79,82,85,88,91],{"id":48,"text":49,"level":50},"what-are-ux-portfolio-mockups","What are UX portfolio mockups?",2,{"id":52,"text":53,"level":50},"where-should-mockups-go-in-a-ux-case-study","Where should mockups go in a UX case study?",{"id":55,"text":56,"level":50},"should-portfolio-mockups-be-angled-or-flat","Should portfolio mockups be angled or flat?",{"id":58,"text":59,"level":60},"a-practical-angle-rule","A practical angle rule",3,{"id":62,"text":63,"level":50},"how-do-you-keep-ux-portfolio-mockups-consistent","How do you keep UX portfolio mockups consistent?",{"id":65,"text":66,"level":50},"how-do-you-show-nda-work-in-a-portfolio","How do you show NDA work in a portfolio?",{"id":68,"text":69,"level":50},"how-large-should-case-study-images-be","How large should case study images be?",{"id":71,"text":72,"level":50},"how-to-create-portfolio-mockups-in-mockiso","How to create portfolio mockups in mockiso",{"id":74,"text":75,"level":60},"1-set-up-one-project-per-case-study","1. Set up one project per case study",{"id":77,"text":78,"level":60},"2-add-your-final-screens","2. Add your final screens",{"id":80,"text":81,"level":60},"3-lock-in-your-portfolio-house-style","3. Lock in your portfolio \"house style\"",{"id":83,"text":84,"level":60},"4-build-the-flow-image","4. Build the flow image",{"id":86,"text":87,"level":60},"5-export-for-the-web","5. Export for the web",{"id":89,"text":90,"level":50},"key-takeaways","Key takeaways",{"id":92,"text":93,"level":50},"make-your-next-case-study-look-finished","Make your next case study look finished","UX Portfolio Mockups: Present App Designs in Case Studies","Learn where UX portfolio mockups help a case study and where they hurt it: thumbnails, hero images, flows, NDA work and file sizes. Includes a step-by-step workflow.",[97,100,103,106,109],{"q":98,"a":99},"Do hiring managers care whether I use device mockups in my UX portfolio?","Mockups mainly affect first impressions: they make thumbnails and hero images look polished and consistent. Hiring managers evaluate your process, decisions and impact, which mockups cannot show. Treat mockups as packaging and make sure the case study content carries the substance.",{"q":101,"a":102},"Which device should I use for a web app case study?","Use a laptop or desktop frame such as a MacBook Pro 14″, Dell XPS 13 or a 27-inch monitor, and match the screenshot's aspect ratio to the device. If the product is responsive, add a phone frame in the same angle and lighting to show the mobile breakpoint side by side.",{"q":104,"a":105},"Can I use mockups for concept or unshipped projects?","Yes, as long as you label the project clearly as a concept, a course project or an unbuilt proposal. A realistic device frame makes the work easy to read, but presenting a concept as a shipped product can damage trust in an interview.",{"q":107,"a":108},"Should my portfolio thumbnails have a transparent or colored background?","A colored or gradient backdrop is usually easier because the thumbnail looks the same everywhere it is shared, including LinkedIn and Dribbble previews. Transparent PNGs make sense when your portfolio site places the device over its own designed background.",{"q":110,"a":111},"Is it okay to use the same mockup template as other designers?","Common templates are fine, but customizing the backdrop color, angle and lighting to match your own visual identity makes your portfolio more recognizable. Consistency across your projects matters more than being completely unique.",false,[114,147,175],{"id":115,"title":116,"slug":117,"excerpt":118,"status":9,"publishedAt":119,"updatedAt":120,"coverImageUrl":121,"coverImageAlt":122,"readingMinutes":14,"wordCount":123,"source":16,"focusKeywords":124,"category":129,"tags":130,"author":146},"cmvxfbv3s000008laxxudp6p6","App Store Screenshot Trends 2026: 8 Styles Worth Using","app-store-screenshot-trends-2026","The biggest App Store screenshot trends in 2026 are outcome-first hero frames, panoramic sets, angled 3D devices, frameless UI crops, dark mode frames, Liquid Glass UI, multi-device sets and bold color blocking. Use each one only where store rules allow it.","2026-11-01T06:03:14.087Z","2026-11-01T06:03:14.105Z","https:\u002F\u002Frzg4dr9ak9vfbaym.public.blob.vercel-storage.com\u002Fblog\u002F2026-11\u002Fapp-store-screenshot-trends-2026-cover-mvxfbswd-UOXv8F72iD9KsroJvKVVlI6aS3E1h8.jpg","Designer reviewing app store screenshot trends on a smartphone",1706,[125,126,127,128],"app store screenshot trends","device mockup styles","app screenshot design","google play screenshots",{"id":23,"name":24,"slug":25,"description":26},[131,135,138,139,143],{"id":132,"name":133,"slug":134},"cmvxaybuh000207icl8qm96nh","app store screenshots","app-store-screenshots",{"id":136,"name":137,"slug":137},"cmvxaybuz000507ichpv2j0iu","aso",{"id":35,"name":36,"slug":37},{"id":140,"name":141,"slug":142},"cmvxaybtd000107icufwenxb9","google play","google-play",{"id":144,"name":145,"slug":145},"cmvxbz975000208kxi3iyhypr","marketing",{"name":43,"avatarUrl":44},{"id":148,"title":149,"slug":150,"excerpt":151,"status":9,"publishedAt":152,"updatedAt":153,"coverImageUrl":154,"coverImageAlt":155,"readingMinutes":14,"wordCount":156,"source":16,"focusKeywords":157,"category":162,"tags":166,"author":174},"cmvxdcd9n000108ie52zhuyou","App Store Screenshot Rejection: 12 Mistakes to Fix First","app-store-screenshot-rejection-mistakes","Most App Store screenshot rejections come from a few fixable mistakes: splash or login screens instead of the app in use, prices or \"free\" claims, other-platform imagery, real user data, and wrong sizes or transparent PNGs. Google Play adds bans on rankings, awards and promo text.","2026-11-01T05:07:38.406Z","2026-11-01T05:07:38.411Z","https:\u002F\u002Frzg4dr9ak9vfbaym.public.blob.vercel-storage.com\u002Fblog\u002F2026-11\u002Fapp-store-screenshot-rejection-mistakes-cover-mvxdcaal-ub0WBB8VDHnDSXyybdr1RF0PiD9W1e.jpg","iPhone and Pixel 3D mockups illustrating how to avoid an App Store screenshot rejection",1671,[158,159,160,161],"app store screenshot rejection","guideline 2.3.3","google play screenshot policy","app screenshot checklist",{"id":163,"name":164,"slug":165,"description":26},"cmvxaybv0000607icji6ezyp6","App Store Optimization","app-store-optimization",[167,168,169,170,171],{"id":132,"name":133,"slug":134},{"id":136,"name":137,"slug":137},{"id":35,"name":36,"slug":37},{"id":140,"name":141,"slug":142},{"id":172,"name":173,"slug":173},"cmvxce04r000708kx59ilvqys","launch",{"name":43,"avatarUrl":44},{"id":176,"title":177,"slug":178,"excerpt":179,"status":9,"publishedAt":180,"updatedAt":181,"coverImageUrl":182,"coverImageAlt":183,"readingMinutes":184,"wordCount":185,"source":16,"focusKeywords":186,"category":191,"tags":192,"author":198},"cmvxd9hwr000008ieqz0egwe3","3D vs Flat Mockups: When Each Style Works Best","3d-vs-flat-mockups","Use flat mockups when the interface has to be read: the first App Store screenshots, documentation and UI walkthroughs. Use 3D mockups when you need atmosphere and depth: hero images, launch posts, landing pages and later screenshots in the set.","2026-11-01T05:05:24.452Z","2026-11-01T05:05:24.459Z","https:\u002F\u002Frzg4dr9ak9vfbaym.public.blob.vercel-storage.com\u002Fblog\u002F2026-11\u002F3d-vs-flat-mockups-cover-mvxd9ftz-c3k0Epl1aqu4M8NidiHM2Fpi44N79r.jpg","Designer comparing 3D vs flat mockups of a mobile app on a smartphone",8,1912,[187,188,189,190],"3d vs flat mockups","3d device mockups","flat device mockup","app screenshot mockup style",{"id":23,"name":24,"slug":25,"description":26},[193,194,195,196,197],{"id":132,"name":133,"slug":134},{"id":136,"name":137,"slug":137},{"id":35,"name":36,"slug":37},{"id":140,"name":141,"slug":142},{"id":144,"name":145,"slug":145},{"name":43,"avatarUrl":44}]