As we discussed in What is a SiteMap? A SiteMap is a categorisation of pages, a kind of table of contents outlining what pages relate to which content on a website. A SiteMap allows users to see the layout of your pages and the order of their hierarchy.
If you open a book, it will begin with a title, chapter and title names of each of the chapters, showing the reader where to locate what information. A wireframe, instead, is a visual design blueprint of what your site will look like and is used by designers before the website is created.
A Wireframe and SiteMap can be sometimes confused as they both relate to the layout of a website. However they have one major difference; a Wireframe relates to the visual design of a website whereas a SiteMap shows the process of which pages relate to each content.
A basic Wireframe often starts out very rough on a piece of paper and then later developed using software tools to make it more concrete.
At the design stage, a wireframe allows designers to locate the make-up of the website, where to put what buttons, what colours to use, how the user will interact with content (UX or UI) and how the interface might work.
Often a SiteMap begin this way but is then developed using various tools into a diagram that shows the flow of the website pages.