Design Ideas for a project - Dashboard Layout

HTML-CSS
1

I am working on a react project for a fitness app and struggling with design ideas.
Here you can see 2 different workout cards.

There is a date header (blue background), the a workout header which shows the activity, distance (or duration) and some editing icons (save/edit/show). This part looks OK to me.

My issue is when I go to edit them. I’m trying to emulate another site that edits each item in place, with no shifting of the elements around when you click into the edit field. Yet at the same time I want to create a concise display.

Maybe I need to do this a totally different way. I’m using grid to place the elements and am overriding default input styles to get the gray background for editing.

Another issue is for the swimming workout. “Lap Swimming” takes up 2 lines in show mode, but only 1 line in edit mode. I don’t like the visual jumping around.

Any suggestions or ideas.
Cycling workout, show mode

54
54954×170 4.45 KB

Cycling workout edit mode

03
03976×334 15 KB

Swimming workout show mode

10
101026×316 9.55 KB

Swimming workout edit mode

20
20952×204 15.5 KB

2

Yes try to focus more onto your ussers and ask people like friends, family to test it out. Design is meant to make it as easy as possible for the user but, i am getting the feeling with your project that you are to focused onto the technical side of it/

1 Like
3

It is pretty hard to judge just based on the images. Have you considered trying out using an edit modal?

4

That’s a really good point. I am the target user of this app which is why i’m making it. but it’s hard to separate the coding/creation from the design when I get deeply into the technical side. Thanks aGAIN.

5

That will be my next step to be honest. i was trying to avoid it but I think it will look and behave much better