devlarabar / 100freelancers

100freelancers is a tool to keep track of freelance clients. It is a community, open-source project in the early stages of development.
https://100freelancers.vercel.app
MIT License
15 stars 11 forks source link

Design #6

Open devlarabar opened 11 months ago

devlarabar commented 11 months ago

We need to collectively discuss and decide on an overall design for the app, including color palette, layout, logo, and anything else that can bring the app to life visually! Suggestions are welcome and encouraged.

This issue specifically involves designing the app and creating a design/style guide. Issues for specific design implementations (using Tailwind or re-arranging components within the app) will come after the app design has been decided.

ka-lange commented 11 months ago

I really like the grey scheme direction that you started with because it can easily be switched between a dark and light theme. We just have to make sure to pick shades different enough to contrast with each other for web accessibility - right now some are hard to see on others. That plus choosing an accent color for buttons, logos, and things the user will interact with. All depends if we want a more bold palette or more subtle. Here's a couple ideas I thought of:

Screenshot 2023-09-12 at 2 44 38 PM Screenshot 2023-09-12 at 2 33 10 PM
devlarabar commented 11 months ago

I really like the blue, it's more subtle and has more of that professional feeling. I'm a big fan of cool and neutral colors for these kinds of apps; that first palette you posted looks perfect to me! Do you think it could work well to use some brighter or more vibrant colors as very small accents throughout the app? Designing seems to be your strength so I trust your judgment here.

ka-lange commented 11 months ago

I like the blue/grey theme too sweet! here's a mockup homepage to start with: *edit: I see that I misspelled freelancers oh boy what a day haha

Screenshot 2023-09-12 at 8 51 48 PM
devlarabar commented 11 months ago

Really loving this so far! I especially like the client cards, they're simple and easy to read. My only thought there would be to maybe add a small section to them that shows if they've been contacted or not, and if they have been, show the date. That way it's easy to see at a glance. This could also be done with a little icon perhaps? Like maybe a little checkmark or phone icon or something similar? I'll leave that up to you!

I also really like your use of icons all around the design, to me it's much easier to look at an icon than actually have to read the content. We just have to make sure we're still following some accessibility guidelines there but it's not tough to do.

Thanks so much for all your work on this so far! It's so exciting to see it come together - it looks fantastic!

ka-lange commented 11 months ago

Thank you! I can add some to the project today just have to figure out React a bit more! Also thought of adding a little check mark with a date but that can be another front end issue once the initial design and database is done. I will add it to my front end design on Miro so someone can see what it oculd look like and tackle it when we get there. And lastly, I agree about the icons, I made sure the colors had enough contrast but just put in placeholder icons for mockup purposes :)