Kirstie Kate’s Ten Tips When Producing Wireframes

Wireframes are produced to give the client a visual understanding of what their digital service could be in order to ensure the business and user expectations are met before committing further, whilst providing a foundation for creatives and developers to progress from.

As a UX designer, I consider myself to be responsible for ensuring the client and the rest of the team have a full understanding of the intended digital service from the conversations I have, the wireframes I produce and the presentations I conduct.

Consequently, a number of actions and thought processes have been ingrained into my practice to ensure the highest standard is met throughout the UX design phase. To enable to pass these on to others, I have translated them into ten tips that I hope will give you something to think about and maybe action next time you are producing wireframes and documentation.


My Ten Tips

Sketch. Don’t rush into producing digital wireframes as ideation materialises more freely and efficiently with a pen, some paper and a rapid ideation process (if needed).

Explore. Concept different options, either that gets the user to the same end result but via a different journey or allows the user to complete the same task by using different functionality. Your first idea mostly likely won’t be the one you end up pursuing with.

Initial Sketches for Sallyhansen.com

Consider the situation. Where will the digital service be used? What devices and screen sizes will it be used on? How does it transition from one device into another? Don’t leave it up to the creatives or even the developers to visualise, work with them to find the most ideal solution.

Consistency. Be consistent across your screen sizes, site structures and functionality. All the screens should feel like they are part of the same family even in greyscale.

Tablet and Mobile Orientations for the Matchday Experience on the Man Utd App

Hierarchy. Show the hierarchy of components through the use of the greyscale, deconstructed layer visualisations and transition behaviours.

Mobile wireframes and user flow for Katyperrymadlove.com

Provide the detail. Ensure your wireframes contain the detail before progressing to design as it provides more context to the visualisation and encourages more extensive feedback. Whether this is a gradual process or from the get go, it’s up to you. Also, take into consideration defining the different states that might occur through the use of micro user flows. They both have the potential to reduce some of the hiccups that could occur in design and build.

Real content. The use of real content will help you to determine the space you require for copy and imagery. If you are using data such as names, it’s worth using the longest variation you can acquire or imagine to determine the maximum lengths and heights.

League Tables on the Man Utd App

Colour Highlights. If you are creating wireframes in grayscale without the presence of a style guide, don’t be afraid to add a hint of colour to highlight importance, such as CTAs and actions.

Purchasing Bingo Tickets on a Smartphone Bingo Site

Annotate. Describe the purpose of the screen/diagram and add any additional information that will help the clients understand what is being shown on the page without the need for your presence to walk them through the document. Depending on the project, annotations have the potential to guide creatives and developers through the envisioned structure, functionality and behaviours alongside additional accessibility requirements where necessary.

Communicate. Get everyone on the project (& team) involved throughout the process: UX and creative colleagues to bounce ideas off, leads for their thoughts, clients and users to gather essential feedback and developers to clarify what can be built.


It’s up to you if you think these tips could be useful to your practice. If you don’t think they are relevant, take one thing away from this post…

Take care in what you practice, produce, share and present. It will go along way in helping the project progress through the different phases.

Thanks, KK