Creating wireframes is the first step in the UI design process. It’s where you take all the research and discovery you have completed and start to put it into an actual product. Wireframing concentrates on the layout of each screen, what components need to be there and how those screens will interact with each other. It allows you to focus on the building blocks of the product without being distracted by visual elements such as colour, illustrations or even actual text. This enables you to inspect the foundations and ensure they are correct before investing the time in adding all the other elements.
From the work I have done so far, I have realised that while my product may require many screens, many of them would be variations of a much smaller group of designs. It therefore made sense for me to create templates for these overall designs, which I would then only need to change the minor variables on to give me all the final screens required. This would be a significantly more time-efficient way of building my mock-ups and prototypes than creating each screen from an empty frame. I used the user flows I had created earlier to create a list of templates required.
My wireframing started on paper, as you can iterate quickly and don’t need to worry about losing a lot of time if you need to throw away a lot of ideas.
I came to making digital wireframes with a strong idea of what my screen layouts needed to be, from my sketches. I decided to create my wireframes digitally on Figma. This had the advantage of making them easier to share with others for feedback.
I started by creating my own initial wireframe from primitive shapes (see below), but without making these into components, I would need to create the primitive shape each time, and this would be extremely time-consuming. It would also increase the risk of inconsistency in shared components, which would defeat the purpose of my wireframes.
Thankfully, after some research, I found a ready-to-use wireframing library on the Figma Community, which I could import. This provided a range of components I could use to create my wireframes and ideate on my template layouts.
I took these components and started to arrange them into layouts for each of the templates, reviewing each and creating iterations. In some cases, following industry standards and best practices, there was only one way to lay out the screen; others had multiple options, and I would need to decide on which one would best suit my product.
At this stage, I created versions for both mobile and desktop screen sizes. Below you can see a snippet of my Figma file, which can be viewed here: https://www.figma.com/design/EiV9a9OayvK3BkGjV4u6Sc/same-different---wireframes?node-id=2-2&t=V5xllvaay0eBRF9k-1
Once I had completed wireframes for each template I required, I was able to review them and decide which would be the template I would take forward. I also realised at this stage I could reduce the number of templates further, and alongside changes to my overall service design based on feedback, I didn’t require as many templates as I had initially thought.
I therefore moved the final chosen templates to a page of their own within the Figma File.