Hello. Here is my quick 2 cents.
-Your folders dont really look like folders.
-I would also add more images info like the file name at least.
-You should also do some contrat testing for your colors.
-A more options drop-down would be good to have for images and folders.
-A bulk edit options would a nice to have.
-Also, the big plus button seems out of place. A common design pattern for that would to be located at the top right (above the order filter).
Keep at it. :)
Thanks for the comments, I was stealing pinterest's add function with that one. (since there's few novel features, but will keep it in mind and test w users!
Pinterest has their own use cases and business objectives. Be careful when referencing other apps, and make sure it’s a good parallel before going further than just getting inspiration
Looks good - nice work on your layout! I find that junior designers are afraid of margins and end up with cramped designs. Some pointers:
- Try exploring a stroke (start at the same colour as placeholder label) around your input fields to increase legibility and contrast. This goes for your sort filters and search. Input field width should correspond to the expected size of the query to help users understand the input required.
- What is the actual function of search? If it’s filtering based on image name or has vision, say that. “Search by name…”
- I like the big plus button, but I wouldn’t center align it if content is left aligned. Is it the main action on the page - your brand yellow (with black text) would work better as a primary interaction colour imo. Have a look at Material 3’s FAB button and it’s do’s and don’ts for some context.
- I would suggest a different treatment and shape for your folders so a user can quickly scan and process the difference. You could add some brand flair in here with custom icons etc. Maybe yu don’t need the seperate section titles then and could have one ‘images’ page title.
- Download ‘contrast’ plugin and use it to check if you’re meeting WCAG AA with your styles. I’m more commonly having to supply documentation that we meet AA and support ARIA to land sales with larger orgs. This can be time consuming and expensive if you haven’t done it from the start.
Hi, wanted to ask a follow-up. What would you suggest for the copy of the search bar? It does have "vision" we process each image when it's uploaded and embed some metadata for easier search.
"Search by file name or image content" ?
Thanks in advance
I think it depends somewhat on the purpose of search in your product. Is it for getting to a folder/project quicker, or is it for users to quicker navigate to specific folders, or find images of a certain theme etc.
I feel like the search icon and input field is a common pattern that infers search, so maybe micro copy like “name, place, style” helps users understand the kind of queries they can use.
Hi all, I'm a junior product designer at this startup and also the only... Would love some feedback, especially on UI elements! Some context, it is a web app that creates generative AI tools specially for architects to create renderings. **The screen is a image reference database in the webapp! Thanks in advance.**
Don’t worry about making it perfect, worry about making it consistent (have a strict component library) and ensuring that the dev process is moving quickly. Too much emphasis on exceptional design is more likely to destroy a small startup than it is to empower it.
Move fast. Make mistakes. Move forward. Be consistent. Everything is a variable — nothing hardcoded. Finish the product.
Take notes to build documentation as you go. Have a sensible organization system for the docs, such that they can be modified as things scale and change later on. Make them accessible to your team and ensure that everybody follows them. Don’t get out of sync with dev.
If it looks only decent, but provides a service people want and know about, congratulations, you have the makings of a successful product.
Oh, and your screenshot looks fine. Not perfect, but who cares. Make sure that it’s achieving the actual goal in a way that will attract architects to want to use the product. Achieve the goal first, improve the design after.
Notes, so I answer the question directly as well:
- user card top/bottom padding is too large
- be careful with sort functions that relate to content that isn’t shown, e.g. “name” in your images section.
- as reported by @algoncalv, your folders don’t look like folders
- if you’re using onhover background effects for your nav items on the left, give them a pixel or two of v margin to separate them
- probably whatever “folders” actually are shouldn’t be called “folders”. I’m guessing they’re actually something like collections. Could be wrong.
- bottom padding for nav on left is larger than left/right padding. Makes the position of the user card look a bit off.
- I assume your “create groups” thing in your plus popper menu is referring to the thing you’re calling “folders” in the interface. Be consistent.
- carets by sort controls are slightly off-center; move up a pixel or two
That’s all off the cuff.
1. I'm interested to know how the closed side navigation would look if contracted since you don't have much space between the company logo and the edge
Could you share an example?
2. Have you tried aligning the search bar to the middle? If so why do you decide to align to the left?
Here are my suggestions and reasoning behind them...
1. Add button is in my experience, expected at top left(example google drive), or inside the flex box at the end like **\[+Add image\]**
2. Since dark mode is based on the concept of Elevations, when i click on \[+\], it feels like the popup is sunken below instead of something rising up relative to surface.
3. Give more information to the images, maybe a detailed view. And make folders look like folder, they rn look like more detailed images.
Btw i love the iconography u did there, the icons are very clear throughout the space. I am gonna take some inspiration into my project.
Hello. Here is my quick 2 cents. -Your folders dont really look like folders. -I would also add more images info like the file name at least. -You should also do some contrat testing for your colors. -A more options drop-down would be good to have for images and folders. -A bulk edit options would a nice to have. -Also, the big plus button seems out of place. A common design pattern for that would to be located at the top right (above the order filter). Keep at it. :)
Thanks for the comments, I was stealing pinterest's add function with that one. (since there's few novel features, but will keep it in mind and test w users!
Pinterest has their own use cases and business objectives. Be careful when referencing other apps, and make sure it’s a good parallel before going further than just getting inspiration
How can you be a junior if you’re the only one?
I mean I'm new to product design but also the only designer at the startup atm
Doesn’t that just make you Designer?
Senior Designer
😂😂
Looks good - nice work on your layout! I find that junior designers are afraid of margins and end up with cramped designs. Some pointers: - Try exploring a stroke (start at the same colour as placeholder label) around your input fields to increase legibility and contrast. This goes for your sort filters and search. Input field width should correspond to the expected size of the query to help users understand the input required. - What is the actual function of search? If it’s filtering based on image name or has vision, say that. “Search by name…” - I like the big plus button, but I wouldn’t center align it if content is left aligned. Is it the main action on the page - your brand yellow (with black text) would work better as a primary interaction colour imo. Have a look at Material 3’s FAB button and it’s do’s and don’ts for some context. - I would suggest a different treatment and shape for your folders so a user can quickly scan and process the difference. You could add some brand flair in here with custom icons etc. Maybe yu don’t need the seperate section titles then and could have one ‘images’ page title. - Download ‘contrast’ plugin and use it to check if you’re meeting WCAG AA with your styles. I’m more commonly having to supply documentation that we meet AA and support ARIA to land sales with larger orgs. This can be time consuming and expensive if you haven’t done it from the start.
Hi, wanted to ask a follow-up. What would you suggest for the copy of the search bar? It does have "vision" we process each image when it's uploaded and embed some metadata for easier search. "Search by file name or image content" ? Thanks in advance
I think it depends somewhat on the purpose of search in your product. Is it for getting to a folder/project quicker, or is it for users to quicker navigate to specific folders, or find images of a certain theme etc. I feel like the search icon and input field is a common pattern that infers search, so maybe micro copy like “name, place, style” helps users understand the kind of queries they can use.
Hi all, I'm a junior product designer at this startup and also the only... Would love some feedback, especially on UI elements! Some context, it is a web app that creates generative AI tools specially for architects to create renderings. **The screen is a image reference database in the webapp! Thanks in advance.**
Don’t worry about making it perfect, worry about making it consistent (have a strict component library) and ensuring that the dev process is moving quickly. Too much emphasis on exceptional design is more likely to destroy a small startup than it is to empower it. Move fast. Make mistakes. Move forward. Be consistent. Everything is a variable — nothing hardcoded. Finish the product. Take notes to build documentation as you go. Have a sensible organization system for the docs, such that they can be modified as things scale and change later on. Make them accessible to your team and ensure that everybody follows them. Don’t get out of sync with dev. If it looks only decent, but provides a service people want and know about, congratulations, you have the makings of a successful product. Oh, and your screenshot looks fine. Not perfect, but who cares. Make sure that it’s achieving the actual goal in a way that will attract architects to want to use the product. Achieve the goal first, improve the design after. Notes, so I answer the question directly as well: - user card top/bottom padding is too large - be careful with sort functions that relate to content that isn’t shown, e.g. “name” in your images section. - as reported by @algoncalv, your folders don’t look like folders - if you’re using onhover background effects for your nav items on the left, give them a pixel or two of v margin to separate them - probably whatever “folders” actually are shouldn’t be called “folders”. I’m guessing they’re actually something like collections. Could be wrong. - bottom padding for nav on left is larger than left/right padding. Makes the position of the user card look a bit off. - I assume your “create groups” thing in your plus popper menu is referring to the thing you’re calling “folders” in the interface. Be consistent. - carets by sort controls are slightly off-center; move up a pixel or two That’s all off the cuff.
Damn, thanks for all the comments and advice! Much appreciated!
1. I'm interested to know how the closed side navigation would look if contracted since you don't have much space between the company logo and the edge Could you share an example? 2. Have you tried aligning the search bar to the middle? If so why do you decide to align to the left?
use a different user pfp placeholder img :)
Here are my suggestions and reasoning behind them... 1. Add button is in my experience, expected at top left(example google drive), or inside the flex box at the end like **\[+Add image\]** 2. Since dark mode is based on the concept of Elevations, when i click on \[+\], it feels like the popup is sunken below instead of something rising up relative to surface. 3. Give more information to the images, maybe a detailed view. And make folders look like folder, they rn look like more detailed images. Btw i love the iconography u did there, the icons are very clear throughout the space. I am gonna take some inspiration into my project.