How to make a low-fi wireframe for an SPA?
I am remaking a website with 14 pages to be a single page app.
It is for tracking work hours across projects.
But I am stuck designing a low-fi wireframe, and could really use some help.
1. How do I know my design will fit on mobile if I don't make my wireframe somewhat detailed?
2. How do I communicate the meaning of my design through gray boxes?
3. How to go about drawing a static image of something that is so incredibly flexible?
There are 3 types of users that are shown a different UI and content.
There are 2 media queries for tablet and laptop that change the lay-out.
This feels like trying to capture a movie in 1 frame.
17 Replies
Without annotations, the meaning of these boxes is only known to me.
But only when I add some more detail I notice that I run out of space, and there is no room for the project names. Because the form requires more space, there is no space for the log.
Making my low-fi wireframes detailed defeats its purpose... help ๐
my first suggestion is to just ditch wireframing altogether. I dont' see it as a necessary step any longer, and it leads to tons of confusion for clients that can just be avoided. I would start with a low fidelity layout in figma or penpot abd iterate from there
for your specific questions:
1. the secret to making a mobile layout always work, is to design the horizontal layout from your desktop in a way that it can be broken up into boxes and stacked vertically. in that way you never have to worry if it will fit, only to make sure everything can be grouped into box shapes even when it is a wide layout
2. Unfortunately, you really can't, except to other designers. This is primarily why i stopped wireframing. Clients need to see images and text and stuff or they can not comprehend the final output
3. Don't think of it as a static image so much as a snapshot of the data you are displaying, and any given snapshot is the equivalent of a user seeing the page on load.
the secret to making a mobile layout always work, is to design the horizontal layout from your desktop in a way that it can be broken up into boxes and stacked vertically. in that way you never have to worry if it will fit, only to make sure everything can be grouped into box shapes even when it is a wide layoutwhy not start backwards? i mean, to make it good on mobile you have to do absolutely nothing and on desktop, you have to decide how it layouts with a simple layout like this, maybe it can be worth it to do it backwards
sure you can do that, but they started with a desktop design so i'm not going to say to delete all this work and start over
but also, when you work freelance or in agency where you are dealing with clients, they don't want to see a bunch of stacked boxes in a mobile layout, they want to see their big flashy desktop design. So, it's still a very good skill to learn how to do desktop layouts that automatically fold down into mobile without having to think about it.
thats a very good point
The way you both explained mobile design is the most clear I have ever heard.
I just started using Figma and immediately fell in love.
So I will explore its options and use it to communicate my design with low-fi designs and interactive mockups.
I need to clarify a few things.
This design is for mobile. The width is 375px and the font size is 12.
I am working with other designers together, but most are new to front-end.
The way you are talking about it makes me think this won't work on mobile.. hueuhe yes it's very small.
This I don't get. It just doesn't really explain 'enough' in my opinion.
Imagine you don't know what an OS is, and I show you this:
Should I treat the low-fi design as a quick step to help me make an interactive mockup?
Alternatively, I could explain the low-fi design in more detail by doing some sort of exploded view of all the different parts?
is your concern for #3 question, that you have different layouts for different user types? Or is it that a static snapshot of your page would not accurately portray what the end user will experience on your page when it is 100% done?
The first.
There are 3 main types of users that share some functionalities, but use the site in different ways.
general user, admin and client
in that case, you can make a lo fi layout/design for each user type, that highlights what it will focus on
although, if you can think of a clever implementation of this exploded view, that would probably look really awesome
just don't sink too much time into these early iterations
You're very good at explaining things simple โค๏ธ
I'll post the result <t:1718373000:R> ๐
Update
Things are finally coming together. ๐
I started with dividing the content into sections.
Then I drew a ton of sketches with pen and paper.
Now I have most of the content in Figma for mobile, using components and prototype features.
I make video's of me using the prototype to share my idea's.
Figma is a very good tool, it allows me to turn low-fi wireframes into interactive mockups in seconds.
Not sure if we're going to make the deadline, though. ๐
