Wireframes – Adobe XD Experience Design

These are wireframe designs for the website I created after defining the pages needed in the sitemap.  I have created these using Adobe ‘XD’ (Experience Design) and have annotated them to give my client a feel of how the designs will work and explain the different areas to them; this is useful especially if I had to email these to my client and cannot meet and discuss them.

Home Page


















My Story Page (About)









Blog Page (First Design)

This is the first wireframe design of the blog page I created.  Once the wireframe had been created it was clear there was a lot of text on the page and not many images and possibly not as engaging as it could be.  The layout could also be classed as dated as this is a custom blog design.













Blog Page (Second Design)

This is the second wireframe design of the blog page.  Blog posts are listed in column layout each with a separate image with the option to view each post by clicking on the image.  By including images it is a way to engage with the user quickly.














I will show these to my client at our next meeting and discuss the design and layouts and get her feedback.  At this second meeting I hope to be able to see if I can go ahead with these design and if not what alterations do I need to make.