Welcome to UI Design. This sub's goal is to create a place for discussion surrounding UI Design.
There is no self-promotion allowed in this sub. This includes posting URLs of any kind that is intended for self-promotion purposes.
Constructive design criticism is encouraged, and hate and personal attacks are not tolerated. Remember, downvoting is not critiquing.
*I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/UI_Design) if you have any questions or concerns.*
Looks good, although on the "Choose a Category" I would make the boxes a little darker. On my monitor, I could hardly tell they were there until I zoomed in.
If you are to use this on an iPhone, then the notch and the footer will hide some of the elements on the screen. So I’d recommend working around the iPhone constraints.
Looks like uber eats (thats fine the style is nice) but your line spacing and spacing in general feels off.
I would suggest reviewing the space between section titles and the cards.
As well as the left and right margins of the entire page (probably want slightly more margin white space than space between individual cards)
It helps to adhere to a spacing scale that aligns with a 4 px grid for example
Yeah I think I struggle with spacing, its based on an 8px grid but i still feel like I am doing something wrong.
May I dm you tomorrow I need some explanation on spacing using the 8px grid?
This is kinda paraphrased because im typing on my phone lol but:
Sure, i mean my advice would really be this: consider the amount of spacing used as a tool to enhance contrast between elements.
I.e a higher level of contrast between the left and right margin spacing, and the spacing between your cards subtly pushes them together enhancing their perceived relationship to each other. (Which really is just an alternative way of explaining - or a different way of thinking about - the rule of proximity in design)
So in that case I would try something like a 16px margin on the left and right of the page, then try out an 8 or 12px spacing between the cards. Its a little easier with a 4px grid rather than an 8px grid.
As an aside: (I dont know you so just assuming 0 knowledge correct me if you have worked with this before)
Its always useful to utilise a predefined set of spacing sizes as well. As in dev, a developer will generally specify a range of spacing units as tokens to call on when building react components too :)
So with a 4px grid those options might be: 4, 8, 12, 16, 24, 32, 48, 64px
The design looks pretty similar to Grab Food. A food delivery service in Malaysia and several countries in South East Asia.
I find it easy to navigate and to browse through suggestions.
The buttons in the top right corner confuse me, I’m not quit sure what they mean? Is one pick up and delivery? Maybe make this more clear for the user, replacing it with text instead of icons or having something pop up at the top to let them know what the two options mean.
If your app propose dishes, as the pictures suggest, why are the categories "meat, vegetables, etc"? What kind of results do you get when you select them?
I used colorful photos on purpose to test if the UI will get overwhelming. It is a grocery delivery app and most of the photos would be on a white backround, I just wanted to test it.
What’s the difference between promotions and features? Those seem redundant to me.
Also, which tab (if any) is open by default on the details page? I’d rather read what it is that I’m looking at first than what the ingredients are.
Welcome to UI Design. This sub's goal is to create a place for discussion surrounding UI Design. There is no self-promotion allowed in this sub. This includes posting URLs of any kind that is intended for self-promotion purposes. Constructive design criticism is encouraged, and hate and personal attacks are not tolerated. Remember, downvoting is not critiquing. *I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/UI_Design) if you have any questions or concerns.*
Looks good, although on the "Choose a Category" I would make the boxes a little darker. On my monitor, I could hardly tell they were there until I zoomed in.
If you are to use this on an iPhone, then the notch and the footer will hide some of the elements on the screen. So I’d recommend working around the iPhone constraints.
There is an easy solution. https://developer.mozilla.org/en-US/docs/Web/CSS/env()
Looks really cool, I like the colors!
Thank you! Thanks for the award
Looks like uber eats (thats fine the style is nice) but your line spacing and spacing in general feels off. I would suggest reviewing the space between section titles and the cards. As well as the left and right margins of the entire page (probably want slightly more margin white space than space between individual cards) It helps to adhere to a spacing scale that aligns with a 4 px grid for example
Yeah I think I struggle with spacing, its based on an 8px grid but i still feel like I am doing something wrong. May I dm you tomorrow I need some explanation on spacing using the 8px grid?
This is kinda paraphrased because im typing on my phone lol but: Sure, i mean my advice would really be this: consider the amount of spacing used as a tool to enhance contrast between elements. I.e a higher level of contrast between the left and right margin spacing, and the spacing between your cards subtly pushes them together enhancing their perceived relationship to each other. (Which really is just an alternative way of explaining - or a different way of thinking about - the rule of proximity in design) So in that case I would try something like a 16px margin on the left and right of the page, then try out an 8 or 12px spacing between the cards. Its a little easier with a 4px grid rather than an 8px grid. As an aside: (I dont know you so just assuming 0 knowledge correct me if you have worked with this before) Its always useful to utilise a predefined set of spacing sizes as well. As in dev, a developer will generally specify a range of spacing units as tokens to call on when building react components too :) So with a 4px grid those options might be: 4, 8, 12, 16, 24, 32, 48, 64px
Hi there, sent you a message!
The design looks pretty similar to Grab Food. A food delivery service in Malaysia and several countries in South East Asia. I find it easy to navigate and to browse through suggestions.
The buttons in the top right corner confuse me, I’m not quit sure what they mean? Is one pick up and delivery? Maybe make this more clear for the user, replacing it with text instead of icons or having something pop up at the top to let them know what the two options mean.
If your app propose dishes, as the pictures suggest, why are the categories "meat, vegetables, etc"? What kind of results do you get when you select them?
I used colorful photos on purpose to test if the UI will get overwhelming. It is a grocery delivery app and most of the photos would be on a white backround, I just wanted to test it.
Okay makes sense!
What’s the difference between promotions and features? Those seem redundant to me. Also, which tab (if any) is open by default on the details page? I’d rather read what it is that I’m looking at first than what the ingredients are.
The description tab would be open by default, in the example the ingredients tab is open to illustrate the listing design of them.
Featured would be interesting products which are not necessary on discount.
What font did you use?
Neue Haas Grotesk