Sintamo

Not sure if it's more relavant to Creative or Technology, so cross-posting here from: https://beehaw.org/post/743965

Exactly a week later, hello again!

I was so flattered by people's reaction to my last post - thank you for making me feel so welcomed by this community! I'm still toying with icon redesigns, but I noticed that people were equally (if not more) interested in the theme ideas I posted - so I've spent the last week trying to make them a reality! I call them Hive Light and Hive Dark, and I think they're ready to share with you all.

I was able to incorporate lots of tweaks to Beehaw's UI, including:

• Customisable levels of minimalisation
• Consistent padding and spacing site-wide, increasing legibility and cleanliness without sacrificing too much information density
• Repositioned various UI/UX elements to make Beehaw easier and more intuitive to navigate
• Consistent bee-themed colors! Lots of yellows, browns, and blues that play nice with each other and pass accessibility standards
• Hover effects to reduce unnecessary line breaks with long hyperlinks
• And more! But not that much more, it's just some CSS after all ;)

Hive Light:

Hive Dark:

There are more screenshots on the GitHub!

Installation is pretty simple as well:

• Install Stylebot - this was the only CSS extension I found that worked reliably across browsers and consistently applied settings. YMMV with other extensions - Stylus just didn't work well for me :(
• Check your Beehaw settings and select "darkly" if you want to use Hive Dark, and "litely" if you want to use Hive Light
• Copy and paste the contents of either Hive_Light_Theme.css or Hive_Dark_Theme.css from the GitHub page into the "code" section of Stylebot
• Et Violà!

This isn't my first time designing a UI, but it is my first time doing it with CSS edits, so I fully expect there to bugs and inefficient code. I would love to hear your feedback and incorporate new ideas into future versions. And feel free to copy my homework! If I can figure out this CSS stuff in a week, so can you, and I'd love to see what other people create.

One caveat: the Lemmy v0.18.0 release includes lots of (really awesome) updates to Lemmy-UI that will break this theme. I don't know when Beehaw will update, but I imagine it's imminent, so there will be more work to be done soon I'm afraid.

Thanks for reading, and take care!

Exactly a week later, hello again!

I was so flattered by people's reaction to my last post - thank you for making me feel so welcomed by this community! I'm still toying with icon redesigns, but I noticed that people were equally (if not more) interested in the theme ideas I posted - so I've spent the last week trying to make them a reality! I call them Hive Light and Hive Dark, and I think they're ready to share with you all.

I was able to incorporate lots of tweaks to Beehaw's UI, including:

• Customisable levels of minimalisation
• Consistent padding and spacing site-wide, increasing legibility and cleanliness without sacrificing too much information density
• Repositioned various UI/UX elements to make Beehaw easier and more intuitive to navigate
• Consistent bee-themed colors! Lots of yellows, browns, and blues that play nice with each other and pass accessibility standards
• Hover effects to reduce unnecessary line breaks with long hyperlinks
• And more! But not that much more, it's just some CSS after all ;)

Hive Light:

Hive Dark:

There are more screenshots on the GitHub!

Installation is pretty simple as well:

• Install Stylebot - this was the only CSS extension I found that worked reliably across browsers and consistently applied settings. YMMV with other extensions - Stylus just didn't work well for me :(
• Check your Beehaw settings and select "darkly" if you want to use Hive Dark, and "litely" if you want to use Hive Light
• Copy and paste the contents of either Hive_Light_Theme.css or Hive_Dark_Theme.css from the GitHub page into the "code" section of Stylebot
• Et Violà!

This isn't my first time designing a UI, but it is my first time doing it with CSS edits, so I fully expect there to bugs and inefficient code. I would love to hear your feedback and incorporate new ideas into future versions. And feel free to copy my homework! If I can figure out this CSS stuff in a week, so can you, and I'd love to see what other people create.

One caveat: the Lemmy v0.18.0 release includes lots of (really awesome) updates to Lemmy-UI that will break this theme. I don't know when Beehaw will update, but I imagine it's imminent, so there will be more work to be done soon I'm afraid.

Thanks for reading, and take care!

Edit: I posted the first release of my theme based on the ideas in this post here!

Hi everyone!

I'm an Industrial/Product Designer in my professional life, and I was so inspired by @UrLogicFails's fantastic new community icons that I wanted to try out some of my own design ideas for Beehaw.

First, I tried my hand at an icon for Beehaw. I'm endeared to the little pixelated bee-cowboy we have now, but my background is in cleaner, more minimal designs that are easy to deploy to lots of different devices. A good logo sets a good first impression, and I want new users to see Beehaw as a real, legitimate alternative vision for social media. I've tried to recreate the back of a bee, and used the wings to form a subtle letter "B." My personal favorite is the ~~hexagon~~ bestagon, but I have both iOS and Android variations. Icon design is always really contentious, but it's also really fun - I'd love to see other people's ideas!

Second, I took a stab at tweaking the design of Beehaw, with the goals improving the layout and padding, introducing a more consistent color scheme, increasing legibility, and (of course) incorporating more bee elements. I'm working on a CSS theme that incorporates some of these changes, but others are beyond the scope of CSS injections and will require actual work on Lemmy-UI.

Light Theme:

Dark Theme:

I'd love to hear your thoughts, and I'm happy to share more if people are interested :)

Thanks for viewing, take care!