New Profile Card Design #17

Ghost commented 2020年08月14日 15:14:41 +02:00

Dear Codeberg developers!

In the first place, I'd like to thank you for creating Codeberg. It's a wonderful place for collaboration and it's the only place where I've found people whom to I could hel with their project development.

I wanted to offer you a new design for profile card which is displayed when visiting someone's profile page. In my humble opinion, it looks cleaner and uncluttered rather than Gitea's. Not going to lie, I was inspired by GitHub's current profile page.

The first image shows current Codeberg's profile card design. The second picture shows profile card design used on my own instance.

Dear Codeberg developers! In the first place, I'd like to thank you for creating Codeberg. It's a wonderful place for collaboration and it's the only place where I've found people whom to I could hel with their project development. I wanted to offer you a new design for profile card which is displayed when visiting someone's profile page. In my humble opinion, it looks cleaner and uncluttered rather than Gitea's. Not going to lie, I was inspired by GitHub's current profile page. The first image shows current Codeberg's profile card design. The second picture shows profile card design used on my own instance.

mray commented 2020年08月15日 11:17:18 +02:00

Hi there!

Can you share your thoughts about what you changed and why? My feedback would depend on what your goals are.

Hi there! Can you share your thoughts about what you changed and why? My feedback would depend on what your goals are.

Ghost commented 2020年08月16日 21:00:39 +02:00

Hello!

I suppose I should have cropped the pictures to show exact changes of profile page. I'll attach them right with this comment.

I've made changes to Profile Card which represents person's profile on Codeberg. For example, when I visit your profile, I can see a profile picture, nickname, location, account creation date and etc there.

I've played with CSS of this profile card and, as a result, got a cleaner look on it: removed these gray/white borders around the whole card, made background to match page's background, put description right under the profile picture and nickname, made profile picture rounded and made nickname/name fonts bigger a little bit so other users wouldn't be overwhelmed by profile picture's sizes. Also I removed icon from profile description because I though it'd look cleaner without any icons, except the ones included in profile description itself.

Why had I done so? Well, to be honest, I can't fully answer to this question. Not because I have something to hide or pursue my personal goals but because I did so just because I had a feeling of GitHub's UI looking somewhat stylish and clean. Not going to lie, I really like how GitHub looks like. That's why this profile card UI reminds GitHub's so much - I made it with minimalism and informativeness in mind while being inspired by GitHub's design decisions.

Another goal here is that with new Codeberg icon design changes and upcoming Gitea 1.13 release, I had an idea in mind: "With upcoming changes to Codeberg, there should probably be some changes in UI, shouldn't there?" I do really like Codeberg because of the community feelings and easiness of use - I appreciate all your efforts in Codeberg's development. Codeberg does have a potential to become not "yet another Gitea instance" but a brand new development hub with its community and sustainability in mind, without bloatware and privacy-invasive features and without any compromises to development process. And I though it'd be cool to distinguish Codeberg from Gitea instances by using its own UI elements - I don't mean that the whole UI code should be refurbished and made from grounds up - but by doing little changes and tweaking its UI, making it pleasant for our eyes and inner feelings.

Thank you for replying. I'm looking forward to reading your thoughts on this topic.

P.S. The first picture shows current Codeberg's Profile Card on person's profile page and the second picture shows a new Profile Card - rounded picture, no borders and everything described above.

Hello! I suppose I should have cropped the pictures to show exact changes of profile page. I'll attach them right with this comment. I've made changes to Profile Card which represents person's profile on Codeberg. For example, when I visit your profile, I can see a profile picture, nickname, location, account creation date and etc there. I've played with CSS of this profile card and, as a result, got a cleaner look on it: removed these gray/white borders around the whole card, made background to match page's background, put description right under the profile picture and nickname, made profile picture rounded and made nickname/name fonts bigger a little bit so other users wouldn't be overwhelmed by profile picture's sizes. Also I removed icon from profile description because I though it'd look cleaner without any icons, except the ones included in profile description itself. Why had I done so? Well, to be honest, I can't fully answer to this question. Not because I have something to hide or pursue my personal goals but because I did so just because I had a feeling of GitHub's UI looking somewhat stylish and clean. Not going to lie, I really like how GitHub looks like. That's why this profile card UI reminds GitHub's so much - I made it with minimalism and informativeness in mind while being inspired by GitHub's design decisions. Another goal here is that with new Codeberg icon design changes and upcoming Gitea 1.13 release, I had an idea in mind: "With upcoming changes to Codeberg, there should probably be some changes in UI, shouldn't there?" I do really like Codeberg because of the community feelings and easiness of use - I appreciate all your efforts in Codeberg's development. Codeberg does have a potential to become not "yet another Gitea instance" but a brand new development hub with its community and sustainability in mind, without bloatware and privacy-invasive features and without any compromises to development process. And I though it'd be cool to distinguish Codeberg from Gitea instances by using its own UI elements - I don't mean that the whole UI code should be refurbished and made from grounds up - but by doing little changes and tweaking its UI, making it pleasant for our eyes and inner feelings. Thank you for replying. I'm looking forward to reading your thoughts on this topic. P.S. The first picture shows current Codeberg's Profile Card on person's profile page and the second picture shows a new Profile Card - rounded picture, no borders and everything described above.

mray commented 2020年08月17日 00:51:57 +02:00

I'm beyond mad. Sorry for that. I just replied in detail to your post and Firefox/Gitea just swallowed everything. It is late and I only have few battery life left...

First of all thanks for your clarifying reply. I'm in a much better position to give feedback now.

I generally like your work for those reasons:

• The icons you removed are indeed unnecessary and making the page too heavy
• I guess I like the rounded version of the avatar a bit better
• I like how you replicate things that made you enjoy other things!

I just wonder why you don't want to approach Gitea with this.
While I appreciate your likemindedness in terms of goals of Codebergs project, I think UI enhancements are certainly an advantage we wish on all users of gitea – including non-Codeberg users.

I'm currently working on establishing a new logo, a color palette and a house font, and think those are better examples for how to differentiate Codeberg from other gitea instances.

I think the best thing would be to help gitea to make theming easier, and then work on an awesome Codeberg theme (with the new color-palette and font ;) ).

In terms of your screenshots: I think you could start by creating mockups in Inkscape and not mess around with css to get feedback to save yourself time/effort. That way you can more quickly react on feedback. Another suggestion would be to make comparison easier: maybe include a screenshot of github that shows what you like, and a screenshot from gitlab - just for reference. It would also help to use the same info on all mockups, and make clear where and why you added/removed information. Those changes exceed a simple UI overhaul and are particularly interesting for coders and UX people. A bit back and forth, and looking around would probably neatly refine your suggestions even more.

Take this as simple personal feedback. I'm not a coder and also quite new to Codeberg. For what it is worth: I think I would accept a merge-request if it meant to switch from one of your screenshots to the other, though! :)

I'm beyond mad. Sorry for that. I just replied in detail to your post and Firefox/Gitea just swallowed everything. It is late and I only have few battery life left... First of all thanks for your clarifying reply. I'm in a much better position to give feedback now. I generally like your work for those reasons: * The icons you removed are indeed unnecessary and making the page too heavy * I guess I like the rounded version of the avatar a bit better * I like how you replicate things that made you enjoy other things! I just wonder why you don't want to approach Gitea with this. While I appreciate your likemindedness in terms of goals of Codebergs project, I think UI enhancements are certainly an advantage we wish on all users of gitea – including non-Codeberg users. I'm currently working on establishing a new logo, a color palette and a house font, and think those are better examples for how to differentiate Codeberg from other gitea instances. I think the best thing would be to help gitea to make theming easier, and then work on an awesome Codeberg theme (with the new color-palette and font ;) ). In terms of your screenshots: I think you could start by creating mockups in Inkscape and not mess around with css to get feedback to save yourself time/effort. That way you can more quickly react on feedback. Another suggestion would be to make comparison easier: maybe include a screenshot of github that shows what you like, and a screenshot from gitlab - just for reference. It would also help to use the same info on all mockups, and make clear where and why you added/removed information. Those changes exceed a simple UI overhaul and are particularly interesting for coders and UX people. A bit back and forth, and looking around would probably neatly refine your suggestions even more. Take this as simple personal feedback. I'm not a coder and also quite new to Codeberg. For what it is worth: I think I would accept a merge-request if it meant to switch from one of your screenshots to the other, though! :)

Ghost commented 2020年08月17日 13:38:44 +02:00

Thank you for your reply! I really appreciate the feedback you gave me.

I just wonder why you don’t want to approach Gitea with this.
While I appreciate your likemindedness in terms of goals of Codebergs project, I think UI enhancements are certainly an advantage we wish on all users of gitea – including non-Codeberg users.

I suppose the main reason was my own misunderstanding of Codeberg's goals. I though Codeberg would like to distinguish itself from other Gitea instances yet I was wrong and I apologize for such mistake made by me. Maybe these were my own ideals who actually did distinguish Codeberg from others in my mind because I recognize this platform as a place where I found my ideals and goals in terms of development. I've found a place which absolutely fulfills my own needs(lightweightness, functionality, GAFAM-free, eco-friendly[Whois told me you're using Hetzner which uses hydroenergy and I really love this fact!]). It fulfilled my own long-term goals to change my Web usage to GAFAM-free platforms which support curiosity, creativity and eco-sustainability. I've made a request for design changes to main Gitea's repository on GitHub and we'll see whether these will be accepted or rejected.
I had thoughts on publishing my custom code for Gitea's interfaces which would be considered as "theme" - I've removed some annoying elements from there and added rounded corners to some elements(I love them). If Gitea's main team rejects these changes, I'll just publish the custom CSS code and update it so all Gitea users would be able to apply those to their own instances.

I’m currently working on establishing a new logo, a color palette and a house font, and think those are better examples for how to differentiate Codeberg from other gitea instances.

Cannot agree more - I love new logo design, it's so polished and clean. I wonder what kind of color pallete you'll be using - is it similar to Nord Pallete which is presented on nordtheme.com website?

I think you could start by creating mockups in Inkscape and not mess around with css to get feedback to save yourself time/effort

I had thoughts on recreating designs through Inkscape because it sounds like the fastest and easiest solution out there. Nevertheless, I am new to designing website and Web Development in general, therefore I decided to just use DevTools(F12) to customize Gitea a bit because I'd get immediate result on the webpage. Nevertheless, thank you for the advice, I am going to give Inkscape a try in terms of website designing!

Again, thank you for your feedback, I highly appreciate each advice you've given to me and even used some right now. For example, while creating a request on GitHub, I've included screenshots from multiple sources - GitLab, GitHub, Codeberg and my own Gitea. I'll probably imply those in real life. Even now I have thoughts on creating pull requests for multiple sources - Codeberg and Gitea, so both sides would be able to apply design changes I've made. Thank you again, I am looking forward to hearing your thoughts on this :D

Thank you for your reply! I really appreciate the feedback you gave me. >I just wonder why you don’t want to approach Gitea with this. While I appreciate your likemindedness in terms of goals of Codebergs project, I think UI enhancements are certainly an advantage we wish on all users of gitea – including non-Codeberg users. I suppose the main reason was my own misunderstanding of Codeberg's goals. I though Codeberg would like to distinguish itself from other Gitea instances yet I was wrong and I apologize for such mistake made by me. Maybe these were my own ideals who *actually did distinguish Codeberg from others in my mind* because I recognize this platform as a place where I found my ideals and goals in terms of development. I've found a place which absolutely fulfills my own needs(lightweightness, functionality, GAFAM-free, eco-friendly[Whois told me you're using Hetzner which uses hydroenergy and I really love this fact!]). It fulfilled my own long-term goals to change my Web usage to GAFAM-free platforms which support curiosity, creativity and eco-sustainability. I've made a request for design changes to main Gitea's repository on GitHub and we'll see whether these will be accepted or rejected. I had thoughts on publishing my custom code for Gitea's interfaces which would be considered as "theme" - I've removed some annoying elements from there and added rounded corners to some elements(I love them). If Gitea's main team rejects these changes, I'll just publish the custom CSS code and update it so all Gitea users would be able to apply those to their own instances. >I’m currently working on establishing a new logo, a color palette and a house font, and think those are better examples for how to differentiate Codeberg from other gitea instances. Cannot agree more - I love new logo design, it's so polished and clean. I wonder what kind of color pallete you'll be using - is it similar to Nord Pallete which is presented on nordtheme.com website? >I think you could start by creating mockups in Inkscape and not mess around with css to get feedback to save yourself time/effort I had thoughts on recreating designs through Inkscape because it sounds like the fastest and easiest solution out there. Nevertheless, I am new to designing website and Web Development in general, therefore I decided to just use DevTools(F12) to customize Gitea a bit because I'd get immediate result on the webpage. Nevertheless, thank you for the advice, I am going to give Inkscape a try in terms of website designing! Again, thank you for your feedback, I highly appreciate each advice you've given to me and even used some right now. For example, while creating a request on GitHub, I've included screenshots from multiple sources - GitLab, GitHub, Codeberg and my own Gitea. I'll probably imply those in real life. Even now I have thoughts on creating pull requests for multiple sources - Codeberg and Gitea, so both sides would be able to apply design changes I've made. Thank you again, I am looking forward to hearing your thoughts on this :D

mray commented 2020年08月17日 18:49:06 +02:00

Sounds great that you approach both development teams with your ideas – I'm looking forward to see your changes enrich gitea/Codeberg :)

Inkscape is really an awesome tool, I know my way around it and if you ping me on the #codeberg.org:matrix.org matrix channel I can certainly help you with issues you'll encounter.

I proposed a palette that seems to be relatively close to the nordtheme project: #2 (comment)

But in order to find its own vibe I think it isn't a good idea for a project like Codeberg to adopt a general palette. Codeberg needs to find its own voice in the hosting space, unique colors certainly help a bit there :)

I don't know how you introduced your ideas along the screenshots in issues towards other teams – so let me just mention: try to back up your suggestions along with your rationale, but keep in mind that most of your audience won't be designers. Oftentimes you need to convince with good arguments that speak for a measurable and tangible enhancement that has an impact on things like "UI-UX" – but don't take criticism from the loudest in an audience too serious. You might be the one with the best clou, but look out if you're not and learn! :)

Sounds great that you approach both development teams with your ideas – I'm looking forward to see your changes enrich gitea/Codeberg :) Inkscape is really an awesome tool, I know my way around it and if you ping me on the #codeberg.org:matrix.org matrix channel I can certainly help you with issues you'll encounter. I proposed a palette that seems to be relatively close to the nordtheme project: https://codeberg.org/Codeberg/Design/issues/2#issuecomment-75749 But in order to find its own vibe I think it isn't a good idea for a project like Codeberg to adopt a general palette. Codeberg needs to find its own voice in the hosting space, unique colors certainly help a bit there :) I don't know how you introduced your ideas along the screenshots in issues towards other teams – so let me just mention: try to back up your suggestions along with your rationale, but keep in mind that most of your audience won't be designers. Oftentimes you need to convince with good arguments that speak for a measurable and tangible enhancement that has an impact on things like "UI-UX" – but don't take criticism from the loudest in an audience too serious. You might be the one with the best clou, but look out if you're not and learn! :)

Ghost commented 2020年08月19日 19:58:41 +02:00

I have moved the whole discussion to #30 so I will be closing this issue now. There are presented new examples of profile cards. Looking forward for your comments on the discussion and, again, thank you for your advices!

I have moved the whole discussion to [#30](https://codeberg.org/Codeberg/build-deploy-gitea/pulls/30) so I will be closing this issue now. There are presented new examples of profile cards. Looking forward for your comments on the discussion and, again, thank you for your advices!