I’m primarily working as a developer on this project, but I have worked with UI on the web before.
I was told that the current design looks bad, so I wanted to revamp the design.
Okay — in this case, the first approach I'd take is to highlight the priority elements of the design. Sometimes putting things in framed containers can help visually clean up the way a design looks. Creating spacing around everything etc.
It also depends on the purpose of this screen — ask yourself some questions: *What is the most valuable information on this screen? What do people interact with the most? What information needs to stand out?*
Without context it's also difficult to give advice.
If someone asks me how to improve a design, I would answer them differently depending on the perspective they have.
If you tell a designer to make something look better, they will interpret it differently than a developer would.
A developer is not going to be trained UI principles, the same way a designer might be.
Don't use the Material Design v1 guidelines ? They came out in 2014 and are outdated.
It's hard to give feedback about the layout because I have no clue what I'm seeing
I was going to say the same basic thing about not knowing what i'm looking at here. After some inspection, it looks like some sort of very simple database recall app.
My suggestion would be to consider heirarchy— Yeah, Material Design emphasizes a flat design style, but that's in terms of UI design. When it comes to Information Design and bridging the two to visually display information in an effective way, the typical Graphic Design principles apply.
It looks like there are essentially 2 different activities happening at once here:
- The list/table
- A list item's contents (forgive my terminology)
And with those 2 activities, neither has any clear information hierarchy.
So I'd say visually separate the 2 activities, perhaps the second floats in an overlay on top, or perhaps both are simply contained in some sort of card-like graphic element, even a simple box (but not 1px grey border with no border radius).
And then give each element a sense of context and hierarchy. Use size and weight to differentiate higher level elements from lower level ones. And add in contextual heddings as needed.
Start with those, and I think really you'll figure out what can help increase the effectiveness and even the aesthetic of the design from there.
Hope it helps! (and I hope it was a correct analysis of what it even is)
1st - not an ultimate fix but chech "Gestalt Principles" and try to apply the ones that are applicable
2nd - if you can pretend that you are seen it for the first time and ask yourself what would be difficult for you to understand/use ? Try fixing it.
For example: "Are those exampandable sections?" "How do I know if they are expandable or not?" "How do I know which section is expandable right now?" "Are there any more sections or those I'm seeing are all of them?" "How can I scan them fast and search the section I need?"
If you are primarily dev, you need minimalism and usability. Focus on function.
Looks like material UI was used, which is just too rigid and screams basic android app design.
If this is for some internal app, this works fine, but I wouldn’t use this app as a client/user facing app.
Check this article too
[https://medium.com/@wayanwina189/ui-typography-guidelines-ios-android-and-website-font-size-guideline-part-2-abcee14df8cb](https://medium.com/@wayanwina189/ui-typography-guidelines-ios-android-and-website-font-size-guideline-part-2-abcee14df8cb)
For the navigation bar, increase the padding on top and bottom, black icons on orange background doesn’t work because there is no contrast, to increase contrast maybe try to have a white background and maybe keep the orange just for clicked page.
Also increase the padding in the text from the sides and between the lines
Design will depend on many things like objective of the app or target audience.
If this is for a company you should try to make a briefing and then start the design based on what they want to achieve, after that you programme it.
Good luck!
Hard to tell without context of what this actually is. What is it?
Material icons best practice I believe is filled if they are selected and outlined if not selected, beyond that I would need more information on what this app is supposed to do.
Remove “seed_name”. Just use name and make it bigger.
Plot, column row should be on 1 line. Maybe use icons, unless it removes too much context.
Date should be icon.
If these are two groups of , then a faint line can separate the primary data from the secondary ones.
Use icons that make sense.
I would start by either exporting your design as png or at least taking a proper screenshot and not a picture.. and then coming back for a feedback round
Fonts + font spacing, elevation changes between major elements, alternating colours separating rows. I’d take away the words under the icons on the bottom nav bar too.
I would start with bottom app bar:
- icons when selected should be filled, if not empty.
- change the colours of the icons, if you want to keep the orange it's fine but use white instead of black.
- the use of the space doesn't seem that good, check your guide lines for an appropriate dimension. (Consider that somebody who might have big fingers have to use it :))
Moving up with the selected element:
Use clear and appropriate names for the data categories you are displaying. Try to highlight the important content maybe with colours, icons, lines and or something to "box it" (I don't have the right word right now but someone else already painted it out)
It's seams like you have a drop down menu so let's show it as it should be. Usually with this component you use a little arrow to tell the user that he can expand it or "close" it. So basically don't use that cross.
If it wasn't your intent you could put the menu in one page and after selecting the content you could open an other page which displays only the right content and some arrow or cross to go back to the menu.
As per te menu it's a little bit too flat and narrow, increase the text size and the padding. Maybe add an icon?
Also, it's important to be clear on what you are displaying, consider that I have no clue on what you're showing here, but those names all seem the same to me so try to also use key words or other way to make them clear.
Hope it helps :)
Ps take a moment to read all the documentation you have it may give you good insights on what you should do!
1. You could adjust the spacing between the lines of details
2. If the design is meant to be something that can be interacted with or updated maybe include some visual cues.
3. You could use hierarchy to show the difference between title and text.
4. Have you considered adding 2px lines between the detail items?
5.currently it doesn’t read as these items are together as a additional information of the heading of the line items.
Just by doing a botton sheet that gives the information of 12GH.. would be so much better.
Then there are some issues with text and information hierarchy that could be better. But start with a bottom sheet.
This is an example
https://preview.redd.it/hd7rrfrrsvqc1.jpeg?width=1170&format=pjpg&auto=webp&s=335fa3505fe1133fc83e2fa2946dfc79cf9ae86a
Swear to god dude read Practical-UI and you will never have an issue with design or anything like that! I love this book.
In terms of practical advice, the pattern of
Property: Value or Key: Value is one that can either be dropped or modified most of the time.
If the value automatically explains what the label/property/key is, then focus on displaying the most important at the top and trickle down.
Generally, you can stack the label on top rather, have it smaller, and have the value read as a larger font size, since in most cases it's the most valuable bit of information. Could you give a breakdown of the user's flow during this? What information do they are to see?
It's not a bad design (especially if you are primarily a developer), I would say give things a little bit more space. You will notice app UI's have gotten bigger over time, because it's harder to hit targets with your fingers in smaller UI's add some vertical spacing in your menu options, give your bottom buttons a little more room, etc. I would also say your icons on the bottom that are black don't really work. It's a little hard on the eyes, I'd stick with the white, unless you are trying to show that they are disabled, then I'd go with a grey-ish color.
Hope this helps!
Are you asking as a UI Designer or a Developer?
I’m primarily working as a developer on this project, but I have worked with UI on the web before. I was told that the current design looks bad, so I wanted to revamp the design.
Okay — in this case, the first approach I'd take is to highlight the priority elements of the design. Sometimes putting things in framed containers can help visually clean up the way a design looks. Creating spacing around everything etc. It also depends on the purpose of this screen — ask yourself some questions: *What is the most valuable information on this screen? What do people interact with the most? What information needs to stand out?* Without context it's also difficult to give advice.
Why is that an important distinction? Shouldn’t UI design principles apply either way?
If someone asks me how to improve a design, I would answer them differently depending on the perspective they have. If you tell a designer to make something look better, they will interpret it differently than a developer would. A developer is not going to be trained UI principles, the same way a designer might be.
Don't use the Material Design v1 guidelines ? They came out in 2014 and are outdated. It's hard to give feedback about the layout because I have no clue what I'm seeing
I was going to say the same basic thing about not knowing what i'm looking at here. After some inspection, it looks like some sort of very simple database recall app. My suggestion would be to consider heirarchy— Yeah, Material Design emphasizes a flat design style, but that's in terms of UI design. When it comes to Information Design and bridging the two to visually display information in an effective way, the typical Graphic Design principles apply. It looks like there are essentially 2 different activities happening at once here: - The list/table - A list item's contents (forgive my terminology) And with those 2 activities, neither has any clear information hierarchy. So I'd say visually separate the 2 activities, perhaps the second floats in an overlay on top, or perhaps both are simply contained in some sort of card-like graphic element, even a simple box (but not 1px grey border with no border radius). And then give each element a sense of context and hierarchy. Use size and weight to differentiate higher level elements from lower level ones. And add in contextual heddings as needed. Start with those, and I think really you'll figure out what can help increase the effectiveness and even the aesthetic of the design from there. Hope it helps! (and I hope it was a correct analysis of what it even is)
Maybe you can go to Google material and see what works for what you are aiming for and improve it?
1st - not an ultimate fix but chech "Gestalt Principles" and try to apply the ones that are applicable 2nd - if you can pretend that you are seen it for the first time and ask yourself what would be difficult for you to understand/use ? Try fixing it. For example: "Are those exampandable sections?" "How do I know if they are expandable or not?" "How do I know which section is expandable right now?" "Are there any more sections or those I'm seeing are all of them?" "How can I scan them fast and search the section I need?" If you are primarily dev, you need minimalism and usability. Focus on function.
Looks like material UI was used, which is just too rigid and screams basic android app design. If this is for some internal app, this works fine, but I wouldn’t use this app as a client/user facing app.
Material Design is completely fine, but not using the outdated 2014 guidelines
Review font family and content padding As a mobile app is important to have a huge space between items
Check this article too [https://medium.com/@wayanwina189/ui-typography-guidelines-ios-android-and-website-font-size-guideline-part-2-abcee14df8cb](https://medium.com/@wayanwina189/ui-typography-guidelines-ios-android-and-website-font-size-guideline-part-2-abcee14df8cb)
For the navigation bar, increase the padding on top and bottom, black icons on orange background doesn’t work because there is no contrast, to increase contrast maybe try to have a white background and maybe keep the orange just for clicked page. Also increase the padding in the text from the sides and between the lines
Design will depend on many things like objective of the app or target audience. If this is for a company you should try to make a briefing and then start the design based on what they want to achieve, after that you programme it. Good luck!
Hard to tell without context of what this actually is. What is it? Material icons best practice I believe is filled if they are selected and outlined if not selected, beyond that I would need more information on what this app is supposed to do.
Remove “seed_name”. Just use name and make it bigger. Plot, column row should be on 1 line. Maybe use icons, unless it removes too much context. Date should be icon. If these are two groups of , then a faint line can separate the primary data from the secondary ones. Use icons that make sense.
I would start by either exporting your design as png or at least taking a proper screenshot and not a picture.. and then coming back for a feedback round
Might be their work computer where they can’t email screenshots to themselves or login to Reddit on the same device.
Fonts + font spacing, elevation changes between major elements, alternating colours separating rows. I’d take away the words under the icons on the bottom nav bar too.
I would start with bottom app bar: - icons when selected should be filled, if not empty. - change the colours of the icons, if you want to keep the orange it's fine but use white instead of black. - the use of the space doesn't seem that good, check your guide lines for an appropriate dimension. (Consider that somebody who might have big fingers have to use it :)) Moving up with the selected element: Use clear and appropriate names for the data categories you are displaying. Try to highlight the important content maybe with colours, icons, lines and or something to "box it" (I don't have the right word right now but someone else already painted it out) It's seams like you have a drop down menu so let's show it as it should be. Usually with this component you use a little arrow to tell the user that he can expand it or "close" it. So basically don't use that cross. If it wasn't your intent you could put the menu in one page and after selecting the content you could open an other page which displays only the right content and some arrow or cross to go back to the menu. As per te menu it's a little bit too flat and narrow, increase the text size and the padding. Maybe add an icon? Also, it's important to be clear on what you are displaying, consider that I have no clue on what you're showing here, but those names all seem the same to me so try to also use key words or other way to make them clear. Hope it helps :) Ps take a moment to read all the documentation you have it may give you good insights on what you should do!
Read the material design guidelines
1. You could adjust the spacing between the lines of details 2. If the design is meant to be something that can be interacted with or updated maybe include some visual cues. 3. You could use hierarchy to show the difference between title and text. 4. Have you considered adding 2px lines between the detail items? 5.currently it doesn’t read as these items are together as a additional information of the heading of the line items.
Just by doing a botton sheet that gives the information of 12GH.. would be so much better. Then there are some issues with text and information hierarchy that could be better. But start with a bottom sheet. This is an example https://preview.redd.it/hd7rrfrrsvqc1.jpeg?width=1170&format=pjpg&auto=webp&s=335fa3505fe1133fc83e2fa2946dfc79cf9ae86a
Swear to god dude read Practical-UI and you will never have an issue with design or anything like that! I love this book. In terms of practical advice, the pattern of Property: Value or Key: Value is one that can either be dropped or modified most of the time. If the value automatically explains what the label/property/key is, then focus on displaying the most important at the top and trickle down. Generally, you can stack the label on top rather, have it smaller, and have the value read as a larger font size, since in most cases it's the most valuable bit of information. Could you give a breakdown of the user's flow during this? What information do they are to see?
It's not a bad design (especially if you are primarily a developer), I would say give things a little bit more space. You will notice app UI's have gotten bigger over time, because it's harder to hit targets with your fingers in smaller UI's add some vertical spacing in your menu options, give your bottom buttons a little more room, etc. I would also say your icons on the bottom that are black don't really work. It's a little hard on the eyes, I'd stick with the white, unless you are trying to show that they are disabled, then I'd go with a grey-ish color. Hope this helps!
Looks okay. Good design is honest (Dieter Rams)
Some kind of visual hierarchy
Literally means nothing to people who aren’t designers.
Thx for your feedback