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.

How do I know my design will fit on mobile if I don't make my wireframe somewhat detailed?
How do I communicate the meaning of my design through gray boxes?
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.

querpOP•5/26/24, 9:30 PM

Without annotations, the meaning of these boxes is only known to me.

querpOP•5/26/24, 9:30 PM

querpOP•5/26/24, 9:32 PM

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.

querpOP•5/26/24, 9:33 PM

Making my low-fi wireframes detailed defeats its purpose... help

ghostmonkey•5/28/24, 9:14 AM

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

ghostmonkey•5/28/24, 9:14 AM

for your specific questions:

ghostmonkey•5/28/24, 9:15 AM

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

ghostmonkey•5/28/24, 9:16 AM

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

ghostmonkey•5/28/24, 9:17 AM

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.

Ἔ

ἔρως•5/28/24, 11:02 PM

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

Ἔ

ἔρως•5/28/24, 11:03 PM

why not start backwards?

Ἔ

ἔρως•5/28/24, 11:03 PM

i mean, to make it good on mobile you have to do absolutely nothing

Ἔ

ἔρως•5/28/24, 11:03 PM

and on desktop, you have to decide how it layouts

Ἔ

ἔρως•5/28/24, 11:04 PM

with a simple layout like this, maybe it can be worth it to do it backwards

ghostmonkey•5/29/24, 8:05 AM

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

ghostmonkey•5/29/24, 8:06 AM

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.

Ἔ

ἔρως•5/29/24, 11:36 AM

thats a very good point

querpOP•5/31/24, 7:21 PM

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.

Gghostmonkey 3. Don't think of it as a static image so much as a snapshot of the data you are...

querpOP•5/31/24, 7:24 PM

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:

querpOP•5/31/24, 7:24 PM

querpOP•5/31/24, 7:26 PM

Should I treat the low-fi design as a quick step to help me make an interactive mockup?

querpOP•5/31/24, 7:28 PM

Alternatively, I could explain the low-fi design in more detail by doing some sort of exploded view of all the different parts?

querpOP•5/31/24, 7:28 PM

ghostmonkey•5/31/24, 7:29 PM

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?

querpOP•5/31/24, 7:33 PM

The first.
There are 3 main types of users that share some functionalities, but use the site in different ways.

querpOP•5/31/24, 7:33 PM

general user, admin and client

ghostmonkey•5/31/24, 7:35 PM

in that case, you can make a lo fi layout/design for each user type, that highlights what it will focus on

ghostmonkey•5/31/24, 7:35 PM

although, if you can think of a clever implementation of this exploded view, that would probably look really awesome

ghostmonkey•5/31/24, 7:36 PM

just don't sink too much time into these early iterations

querpOP•5/31/24, 7:36 PM

You're very good at explaining things simple

querpOP•5/31/24, 7:37 PM

I'll post the result June 14, 2024

querpOP•6/11/24, 9:05 PM

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.