Optimize/Redesign layout of web app, especially mobile
- Status: Closed
- Hadiah: $140
- Penyertaan Diterima: 8
- Pemenang: prokidsillustrat
I need someone to help optimize the layout/design of my web app. The two app pages are 1) transform, and 2) artist browser. I've included pictures of my existing layout.
As a summary of what this interface is used for - people will choose an artist, select their controls, hit 'Generate Vocal', and then their resulting audio will appear under 'Output Audio'.
I've had a hard time determining how to layout desktop vs mobile, and it just doesn't feel great. For this contest, I'd like to see mockups for desktop screens, tablet screens, and mobile screens, for both the transform and artist browser pages. Wireframe is fine if it shows off everything properly. If you are good at TailwindCSS, we could also discuss further compensation to modify my existing design to fit the design that I choose.
The general issue is I don't feel the flex design works great I resize the screen. I have wondered if I should opt for a more fixed layout (with breakpoints for screen sizes) instead of the current setup.
Specific areas I need fixed/optimized:
- The 'browse artists' button feels a bit out of place to me, but i don't know if there's a better place to put it
- There's empty space below the Artist Info section, which feels wrong to me
- For desktop view: Generate Vocal button is arguably the most important button on the whole app, yet feels a bit tucked off to the side, and the Output Audio section is also very important and seems a bit pasted onto the bottom of the window. I'm wondering if there's a better way to lay this all out.
Artist Browser Page:
- The 'preview' section is where people can listen to four different audio demos showing off the artist they're interested in. The current design of that element feels bad to me, especially on mobile - it's hard to even press the play buttons. Also, it just takes up a lot of room, which is an issue on smaller screen sizes. I'm wondering if there's a way to rethink how people listen to demos - for example, maybe there could be a single small play button, and the genre selection is part of the section above the artists (the "Filter by Tags" section). Open to ideas on that.
- The filtering by tags section doesn't work well on small screens either. I'm wondering if this should be re-designed, maybe with a filter button that pops up a selection of filters. Again, open to ideas.
- The select artist button is huge on desktop, but i'm not sure how to deal with that
- The text "Find the sound you want and hit Select to view transformation controls' is currently under 'Artist Browser' and i'm wondering if it could be in a better place than being right under the title of the window.
I think that covers my issues, please let me know if you have any questions, and I just want to reiterate that I am open to modifying the entire layout if needed.
Maklum Balas Majikan
“A+, would work with him again”
vocalistai, United States.