Figma
API
Web to code extension
Adobe XD
Discord
Twitter
GitHub
'/%3E%3Cpath%20fill='%23b2b2b2'%20d='M241%20382q0%2016%2017%2026%2017%2011%2042%2011t42-11q16-11%2017-26V269H241'/%3E%3Cpath%20fill='%239f7e00'%20d='M241%20379q0%2014%208%2023%209%209%2021%209%2014%200%2021-9%209-9%209-23V269h-59'/%3E%3Cpath%20d='M241%20339v-70h59v110q0%2014-9%2023l-6%205v-68h-15v72q-8%200-14-4v-68zm59%2040c0%2022%2015%2032%2029%2032%2021%200%2030-18%2030-32v-40h-59'/%3E%3Cpath%20fill='%239f7e00'%20d='M266%20277v5h2v12h-3v-5h2v-5h-9v5h2v5h-4v9h3v18h-5v10h34v-10h-5v-18h3v-9h-4v-5h2v-5h-9v5h2v5h-3v-12h2v-5zm42%20101q0%2010%206%2017%206%206%2015%207%2010-1%2016-7%206-7%206-17v-29h-43'/%3E%3Ccircle%20fill='%230044ad'%20cx='329.5'%20cy='372'%20r='6'/%3E%3Cellipse%20fill='%230044ad'%20cx='300'%20cy='340'%20rx='16'%20ry='21'/%3E%3C/svg%3E){kind=small}
'%3E%3Cpath%20stroke='%23000'%20stroke-width='4'%20d='m-35-37-13%2020m5%203%2013-20m5%203-13%2020m63%2042%206-9m1-2%206-9m5%203-6%209m-1%202-6%209m5%203%206-9m1-2%206-9m-96%200%2013%2020m5-3-6-9m-1-2-6-9m5-3%2013%2020m63-42-6-9m-1-2-6-9m5-3%2013%2020m5-3-6-9m-1-2-6-9'/%3E%3Ccircle%20r='24'%20fill='%23cd2e3a'/%3E%3Cpath%20fill='%230047a0'%20d='M0%200a12%2012%200%201%201%2020%2013%2024%2024%200%201%201-40-26A12%2012%200%201%200%200%200'/%3E%3C/g%3E%3C/svg%3E){kind=small}
'%3E%3Ccircle%20r='92'/%3E%3Ccircle%20fill='%23fff'%20r='80'/%3E%3Ccircle%20r='16'/%3E%3Cg%20id='c'%3E%3Cg%20id='b'%3E%3Cpath%20id='a'%20d='m0-80%203%2048L0-8-3-32M21-77%2011-30%202-8%205-32M40-69%2019-26%204-7%2013-29'/%3E%3Cuse%20href='%23a'%20transform='scale(-1)'/%3E%3C/g%3E%3Cuse%20href='%23b'%20transform='rotate(45)'/%3E%3C/g%3E%3Cuse%20href='%23c'%20transform='rotate(90)'/%3E%3C/g%3E%3C/svg%3E){kind=small}
'/%3E%3C/svg%3E){kind=small}
'/%3E%3C/svg%3E){kind=small}
'/%3E%3C/g%3E%3Cuse%20href='%23b'%20transform='rotate(45%20140%20300)'/%3E%3Cpath%20d='m299%20285%2046%2015-46%2015%2028-39v48M59%20510l-36%2032%2010-47%2020%2043-42-24m22-409L23%2058l36%2032-48-4%2042-24'/%3E%3C/svg%3E){kind=small}
'/%3E%3C/svg%3E){kind=small}
What Is a Wireframe? Definition, Types, Examples and How to Make One
Reading Time: 6 minutesA wireframe is a simple, low-detail blueprint of a screen. Learn what wireframes include, the three fidelity levels, how they differ from mockups and prototypes, and how to make one.
