[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmarvel\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":48,"showcases":309,"links":310,"dates":369},"\u002Fexamples\u002Fapps\u002Fmarvel\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Marvel product screens examples - Nicelydone","Browse Marvel screen design examples. Preview the interface screenshots and explore related UI patterns. Design and Prototyping for everyone","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_sign-in_51e9f684_nicelydone.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Marvel design examples","\u002Fexamples\u002Fapps\u002Fmarvel",{"label":23,"to":4},"Marvel product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"Marvel","marvel","Design and Prototyping for everyone","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmarvel-d04e151b.png","https:\u002F\u002Fmarvelapp.com","marvelapp",[36,40,44],{"id":37,"title":38,"slug":39},8,"Design","design",{"id":41,"title":42,"slug":43},23,"Collaboration","collaboration",{"id":45,"title":46,"slug":47},104,"User Research","user-research",[49,74,91,101,118,164,179,195,205,221,252,291],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"patterns":57,"component_categories":67,"app":72},"364d214f-0b56-44a3-9cf4-6680d6dbbe54","Marvel | Sign in","Sign-in screen where the user authenticates with email, Google, or Enterprise SSO, alongside a promotional spotlight for a new user testing player.",3072,1726,"Marvel | Sign in from Marvel","screen",[58],{"id":59,"label":60,"slug":61,"rank":62,"group":63},4,"Sign In","sign-in",0,{"id":64,"label":65,"slug":66},1,"Access & Account","access-and-account",[68],{"id":69,"title":70,"slug":71},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":73},[],{"uuid":75,"title":76,"description":77,"canonical_path":4,"image":78,"width":53,"height":79,"image_alt":80,"kind":56,"patterns":81,"component_categories":87,"app":89},"ba72fb26-9dde-4d40-9d5a-4dc34b1d7c7d","Reset your password – Marvel","Password recovery screen where the user enters their email address to receive a reset link, accompanied by a promotional panel for a new user testing feature.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_password-reset_3598fecf_nicelydone.png",1654,"Reset your password – Marvel from Marvel",[82],{"id":83,"label":84,"slug":85,"rank":62,"group":86},2,"Forgot Password","forgot-password",{"id":64,"label":65,"slug":66},[88],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":53,"height":79,"image_alt":96,"kind":56,"patterns":97,"component_categories":98,"app":99},"f69a16c7-177b-4457-b0d8-6e5fe5829542","SSO | Marvel","Onboarding Form","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_sign-in_f6d02e47_nicelydone.png","SSO | Marvel from Marvel",[],[],{"slug":30,"title":29,"logo":32,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":53,"height":106,"image_alt":107,"kind":56,"patterns":108,"component_categories":114,"app":116},"13a6b732-41bb-40ed-8bd6-51abc443a81b","Marvel | Create your free account","Signup screen where the user creates a free account using their email and password or via Google OAuth.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_42f4aa48_nicelydone.png",2106,"Marvel | Create your free account from Marvel",[109],{"id":110,"label":111,"slug":112,"rank":62,"group":113},5,"Sign Up","sign-up",{"id":64,"label":65,"slug":66},[115],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":117},[],{"uuid":119,"title":120,"description":121,"canonical_path":4,"image":122,"width":53,"height":79,"image_alt":123,"kind":56,"patterns":124,"component_categories":140,"app":162},"dfb00caf-a5d5-43dd-9c72-73a3bf4b57ad","Projects | Marvel","Projects view displaying an empty state with a prompt to check the team for existing work, alongside an onboarding request for the user's role to personalize their experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_home-product-logged_onboarding_663513fd_nicelydone.png","Projects | Marvel from Marvel",[125,133],{"id":126,"label":127,"slug":128,"rank":62,"group":129},115,"Empty State","empty-state",{"id":130,"label":131,"slug":132},12,"States & Feedback","states-and-feedback",{"id":134,"label":135,"slug":136,"rank":64,"group":137},41,"Dashboard","dashboard",{"id":59,"label":138,"slug":139},"Data & Analysis","data-and-analysis",[141,145,149,153,157,161],{"id":142,"title":143,"slug":144},284,"Modal","modal",{"id":146,"title":147,"slug":148},233,"Tabs","tabs",{"id":150,"title":151,"slug":152},174,"Card","card",{"id":154,"title":155,"slug":156},260,"Badge","badge",{"id":158,"title":159,"slug":160},169,"Avatar","avatar",{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":163},[],{"uuid":165,"title":120,"description":166,"canonical_path":4,"image":167,"width":53,"height":79,"image_alt":123,"kind":56,"patterns":168,"component_categories":171,"app":177},"3bbb8067-9de8-48d6-bbfb-4e63b744c77c","Projects list view where the user is prompted to create their first project or check their team's projects because their personal list is empty.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_empty-state_home-product-logged_11d14a74_nicelydone.png",[169],{"id":126,"label":127,"slug":128,"rank":62,"group":170},{"id":130,"label":131,"slug":132},[172,173,174,175,176],{"id":146,"title":147,"slug":148},{"id":150,"title":151,"slug":152},{"id":154,"title":155,"slug":156},{"id":158,"title":159,"slug":160},{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":178},[],{"uuid":180,"title":120,"description":181,"canonical_path":4,"image":182,"width":53,"height":79,"image_alt":123,"kind":56,"patterns":183,"component_categories":188,"app":193},"2bee7c0e-b688-4938-bcef-c1f0bf588dee","Dashboard empty state where the user is prompted to create their first project or check if their team has any available.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_dropdown-other-states_navigation_0ebd10cc_nicelydone.png",[184,186],{"id":126,"label":127,"slug":128,"rank":62,"group":185},{"id":130,"label":131,"slug":132},{"id":134,"label":135,"slug":136,"rank":64,"group":187},{"id":59,"label":138,"slug":139},[189,190,191,192],{"id":146,"title":147,"slug":148},{"id":154,"title":155,"slug":156},{"id":158,"title":159,"slug":160},{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":194},[],{"uuid":196,"title":197,"description":198,"canonical_path":4,"image":199,"width":53,"height":79,"image_alt":200,"kind":56,"patterns":201,"component_categories":202,"app":203},"d34626ac-fbd6-467f-938d-5fdc31f11ccb","Create a prototype project | Marvel","Onboarding Project management Form","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_0fe5b220_nicelydone.png","Create a prototype project | Marvel from Marvel",[],[],{"slug":30,"title":29,"logo":32,"categories":204},[],{"uuid":206,"title":197,"description":207,"canonical_path":4,"image":208,"width":53,"height":79,"image_alt":200,"kind":56,"patterns":209,"component_categories":217,"app":219},"16603c4e-c2ce-40d4-a80d-8515572fc347","Creation screen where the user names their new prototype project and selects a device resolution type from an open dropdown.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_432d3916_nicelydone.png",[210],{"id":211,"label":212,"slug":213,"rank":62,"group":214},7,"Add & Create","add-and-create",{"id":83,"label":215,"slug":216},"Actions","actions",[218],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":220},[],{"uuid":222,"title":29,"description":223,"canonical_path":4,"image":224,"width":53,"height":225,"image_alt":226,"kind":56,"patterns":227,"component_categories":246,"app":250},"a91284e6-6a5f-4618-9fa5-fd90ee996650","Paywall modal where the user is prompted to upgrade their plan to access invite-only projects, featuring four pricing tiers and a detailed comparison table.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_plans-pricing-product_54b4297a_nicelydone.png",3754,"Marvel from Marvel",[228,236,241],{"id":229,"label":230,"slug":231,"rank":62,"group":232},88,"Feature Gate","feature-gate",{"id":233,"label":234,"slug":235},9,"Plans & Limits","plans-and-limits",{"id":237,"label":238,"slug":239,"rank":64,"group":240},89,"Pricing","pricing",{"id":233,"label":234,"slug":235},{"id":242,"label":243,"slug":244,"rank":83,"group":245},92,"Upgrade Prompt","upgrade-prompt",{"id":233,"label":234,"slug":235},[247,248,249],{"id":150,"title":151,"slug":152},{"id":154,"title":155,"slug":156},{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":251},[],{"uuid":253,"title":254,"description":255,"canonical_path":4,"image":256,"width":53,"height":257,"image_alt":258,"kind":56,"patterns":259,"component_categories":274,"app":289},"f298e512-d121-4c27-bf61-be81842d017a","Homepage proto | Marvel","Empty project view prompting the user to upload designs, get a Sketch plugin, or try an example prototype, with a banner offering a tutorial video.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_empty-state_onboarding_upload_cd0839eb_nicelydone.png",1834,"Homepage proto | Marvel from Marvel",[260,262,269],{"id":126,"label":127,"slug":128,"rank":62,"group":261},{"id":130,"label":131,"slug":132},{"id":263,"label":264,"slug":265,"rank":64,"group":266},81,"Home","home",{"id":37,"label":267,"slug":268},"Pages & Content","pages-and-content",{"id":270,"label":271,"slug":272,"rank":83,"group":273},25,"Upload & Download","upload-and-download",{"id":83,"label":215,"slug":216},[275,279,283,287,288],{"id":276,"title":277,"slug":278},277,"Button group","button-group",{"id":280,"title":281,"slug":282},240,"Horizontal navigation","horizontal-navigation",{"id":284,"title":285,"slug":286},223,"Slider","slider",{"id":158,"title":159,"slug":160},{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":290},[],{"uuid":292,"title":254,"description":293,"canonical_path":4,"image":294,"width":53,"height":79,"image_alt":258,"kind":56,"patterns":295,"component_categories":302,"app":307},"1461e71b-1d97-4f4a-8391-5555a22943b8","Empty project dashboard where the user is prompted to upload designs, install a plugin, or try an example prototype.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_empty-state_upload_40232bf8_nicelydone.png",[296,298,300],{"id":126,"label":127,"slug":128,"rank":62,"group":297},{"id":130,"label":131,"slug":132},{"id":270,"label":271,"slug":272,"rank":64,"group":299},{"id":83,"label":215,"slug":216},{"id":263,"label":264,"slug":265,"rank":83,"group":301},{"id":37,"label":267,"slug":268},[303,304,305,306],{"id":280,"title":281,"slug":282},{"id":284,"title":285,"slug":286},{"id":158,"title":159,"slug":160},{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":308},[],[],[311,313,315,317,319,321,323,325,327,329,331,333,336,339,342,345,348,351,353,357,361,365],{"label":127,"to":312},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":135,"to":314},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":264,"to":316},"\u002Fexamples\u002Fscreens\u002Fhome",{"label":271,"to":318},"\u002Fexamples\u002Fscreens\u002Fupload-and-download",{"label":212,"to":320},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":230,"to":322},"\u002Fexamples\u002Fscreens\u002Ffeature-gate",{"label":84,"to":324},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":238,"to":326},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":60,"to":328},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":111,"to":330},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":243,"to":332},"\u002Fexamples\u002Fscreens\u002Fupgrade-prompt",{"label":334,"to":335},"Marvel marketing pages","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fmarketing",{"label":337,"to":338},"Marvel user flows","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fflows",{"label":340,"to":341},"Marvel UI components","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fcomponents",{"label":343,"to":344},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":346,"to":347},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":349,"to":350},"User Research app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fuser-research",{"label":352,"to":18},"All SaaS app examples",{"label":354,"to":355,"description":356},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":358,"to":359,"description":360},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":362,"to":363,"description":364},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":366,"to":367,"description":368},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":370,"updated_at":371},"2016-06-20T15:21:40.000Z","2026-09-13T13:02:39.000Z"]