rolle, to webdev
@rolle@mementomori.social avatar

Here are some of the most prominent features of 1.5.6rc3 advanced web interface.

rolle, to opensource
@rolle@mementomori.social avatar

Mastodon Bird UI v1.5.4 released! :neon_skull:

Changelog:

  • Support for multiple columns! (Tweetdeck-like advanced web interface)
  • Fix active scrollbar thumb color
  • Move compose panel to the right
  • Hide the elephant from advanced web view
  • General improvements to the advanced web view, like wider width
  • Fix duplicate class before .account__header__bar

Live demo (single column layout only): https://mementomori.social

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

rolle,
@rolle@mementomori.social avatar
rolle, to webdev
@rolle@mementomori.social avatar

The redesigned Advanced web interface is ready soon.

TiffyBelle, to tech

This is entirely how things go when you think you've designed a fool-proof UI that no one could possibly ever misuse... 😂

Users' "creativity" will never cease to impress me.

inautilo, to webdev
@inautilo@mastodon.social avatar


The problem with sticky menus and what to do instead · Sticky menus hurt UX far more than they improve it https://ilo.im/12suiu


marina, to random
@marina@toot.community avatar

How many font families do you use in one single app or website? I would say a maximum of three, better just one or two.

What’s your opinion?

rolle, to random
@rolle@mementomori.social avatar

The thing that's been bothering me in the default Mastodon UI is that I see too much information that is not needed. It's noisy.

For example, favorites and boosts don't need to have my own avatar or the action bar (why would I boost or fav my own post based on someone else's fav action, it makes no sense) and so on. Too much clutter.

The point there is to see who has favorited your post NOW and that's it.

On the left you see the original Mastodon UI, on the right . Less is more.

torb, (edited ) to random

Interesting how many Apple-platform UI design, wireframing, prototyping, animation and/or code generation tools that exists these days:

  • Sketch
  • PaintCode
  • DetailsPro
  • Drama
  • Principle
  • Origami Studio
  • Judo
  • Kolibri
  • Flinto
  • OmniGraffle
  • Keynote
  • Tumult Hype
  • Play

Would be interesting to try them out and see how they compare (I’ve only properly used a few of these.)

EDIT: Added ‘Play’

dennisl, to accessibility
@dennisl@mastodon.social avatar

Designing for People with Cognitive Disabilities and Everyone Else https://www.youtube.com/watch?v=9Ae8bUlSSXU

WebAxe, to accessibility
@WebAxe@a11y.info avatar

Great new article on hover, color contrast, and WCAG: "A Whole Lot of Bovver Over Hover" https://www.tpgi.com/a-whole-lot-of-bovver-over-hover/ by @lloydi

inautilo, to random
@inautilo@mastodon.social avatar

“The best way for you to become a better designer is not looking at Dribbble or Behance. It’s looking and playing with real products and seeing how they handle certain scenarios and flows.” — Denislav Jeliazkov


rolle, to fediverse
@rolle@mementomori.social avatar

I would like to endorse other minor web apps in the , but most of them are full of UI glitches, are incomplete and downright buggy looking odd things.

From my designer point of view and are the only effective ones, because they speak to people who are used to proper visual design language (read: Non-nerds, non-engineers, the regular people and design oriented people).

Things like , , and newer niche apps cause reactions like: "What is this?", they look like back end is fine but nobody is in charge of the design and the UI has no direction whatsoever. It's the general culprit in the programming world: A back end developer thinks everything is fine when we add a CSS framework and that's that.

If we just get the UI right everywhere, we get more people to the . I just wish there was more /design people willing to contribute.

rolle,
@rolle@mementomori.social avatar

I've been always attracted to beautiful things. I always list pros and cons in the things I use. I go through dozens of options.

The user interface has HUGE value for me and it can weigh so much it can even top some of the downsides. But even if ALL of the other features are fine and the UI is bad, I have no desire in using the software. It's just the way it is and I'm pretty sure bad UI is a big turn-off for most of the people. Who doesn't love nice looking things?

#Apps #UI #UserInterface #UIDesign #Mastodon #Fediverse

rubicon,

@rolle Unfortunately this is very true. Having tried several, they are not ready for prime time. They are buggy, too loaded up with features that don't all work, and way too busy with things like a riot of color and dancing emojis. When you spend a little time actually trying to use them, you get a real appreciation for the difficulty of clean UI design, and the importance of testing testing testing testing before rolling out capabilities. Mastodon is sort of a bulky dated UI, but it works.

Every little UI decision is critical to a platform's success, and the initial user experience is vital. It could be argued that defaulting to dark mode and 16:9 image clipping is in large part responsible for people bouncing off Mastodon, because it makes the UI look junky. That said, Mastodon works really well, and the more you use it the more you appreciate the functionality decisions.

jaykul,

@rolle yes, but open source people are all busy writing more of those CSS frameworks...

rolle, to fediverse
@rolle@mementomori.social avatar

I keep getting quite a lot of positive feedback about my . Even @Gargron liked my post where I explained the design choices made. Thank you everyone so much about the input. I'm kinda surprised so many prefer mine over the default. I lost count in how many instances enabled it for all their users.

I've been thinking about rewriting the Mastodon base SCSS. I'm a CSS/SCSS guy after all. The new base framework would have

  • CSS variables instead of SCSS variables with SCSS function modifications: Easier to manage
  • Simpler style base: Less nesting, less hacks, less everything: Cleaner code
  • Better and more efficient modularization
  • Accessible and flexible SVG graphics instead of icon fonts like Font Awesome

However, it would be a lot of work. I created my version of the UI in a couple of weeks, then been improving it daily.

Worth noting is that not everyone prefers this choice of design as it's way too close to a site we all hate. That's why I'm afraid if I do all the work and send a PR, it would go in vain. It could still be a good start though.

I have high hopes for to improve the UI themselves and look forward to it to get better over time. I just have ideas. Will keep the choices open here.

Sketch, to random
@Sketch@mastodon.design avatar

It’s time for a recap ⏪ We’ve got 28 small-but-mighty Sketch gems you’ll definitely want to know about. There’s a ton to cover but Joseph is here to walk you through them all ⚡

If you want to follow along, head over to our blog:

🔗 https://skt.ch/Blog_TinyGemsM

Joseph Todaro, black shirt and glasses, walks you through 28 new Sketch gems. Visuals of the different features appear on screen as he describes them. To follow along, please visit: https://skt.ch/Blog_TinyGemsM

stevegranshaw, to random

Hey Fediverse 👋 I’m a Lead Product Designer, so I’ll mostly be talking about and following people who are interested in the craft of product design (or whatever we’re calling that discipline this week).

Technology and leading product teams will probably come up a lot too. Let's chat.





WebAxe, to accessibility
@WebAxe@a11y.info avatar

Chasing rainbows—apparently, the very idea of colorblindness is hard to visualize. Take a shot at looking thru my eyes. https://www.theverge.com/23650428/colorblindness-design-ui-accessibility-wordle

Sketch, to random
@Sketch@mastodon.design avatar

Hey Mastodon 👋

We’re super excited to be here and connect with our amazing community. Give us a follow for the latest Sketch updates, useful tips, and inspiring designs! ✨

WebAxe, to accessibility
@WebAxe@a11y.info avatar
rolle, to fediverse
@rolle@mementomori.social avatar

I have created a Twitter-inspired UI theme for Mastodon. I call it Mastodon Bird UI.

Demo available on my instance: https://mementomori.social

Background and origin in the blog post: "The day I decided to build my own “Twitter”" https://rolle.design/the-day-i-decided-to-build-my-own-twitter

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

chriswood, to opensource

Reasonable Colors is an open-source colour system for making accessible colour palettes.

It uses an intuitive system of shades to help you select colours which meet the appropriate WCAG contrast rating, even if you're mixing and matching base colours:

https://reasonable.work/colors/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • cubers
  • magazineikmin
  • GTA5RPClips
  • khanakhh
  • InstantRegret
  • Youngstown
  • mdbf
  • slotface
  • thenastyranch
  • everett
  • osvaldo12
  • kavyap
  • rosin
  • anitta
  • DreamBathrooms
  • Durango
  • modclub
  • ngwrru68w68
  • vwfavf
  • ethstaker
  • tester
  • cisconetworking
  • tacticalgear
  • Leos
  • provamag3
  • normalnudes
  • JUstTest
  • All magazines