Laura Kalbag@Gargron I want to feature the Mastodon.social design update in a magazine showcase. (Because let’s promote the good people!) Did you write about it anywhere? And what’s the best way to ask you a few questions about it? (Happy to do so on here if you want to do it in the open!)
Eugen Rochko@laurakalbag sure, but which of the design updates? Or the overall difference between a year ago and now? Updates have been very incremental
@Gargron sorry, I meant joinmastodon.org (not enough coffee yet!) but also I think incremental design updates are important.
@laurakalbag Aha! Hm. I don't remember if I wrote in detail about that! Except maybe stuff like "look what I've made, it looks pretty now" - which I assume is not very useful. What exactly would you need from me?
@Gargron 1. why did you redesign it? (I know the gist of this from talking to @aral, but how would *you* say it?) 2. Related: how does the landing page relate to designing the experience for Mastodon overall? 3. What are the tools/technologies you use to build it? (I spy React?) 4. The illustrations you use really complement the Mastodon feel of being friendly and welcoming, how do you decide when to use illustration? 5. Anything else that is important to mention? ☺️
@laurakalbag @aral So 1) is pretty hard to answer! With me, there's almost never a clear-cut a and b, all I do is very iterative and evolves slowly towards polish and balance. There is though a very clear purpose of the page: explaining Mastodon. It needs to be the kind of page anyone could send to their friend to introduce them to the idea. So it must look pretty, eye catching, and be informative, and have a clear structure that leads the reader.
@aral @laurakalbag I have researched various other projects for inspiration. Looked at landing pages of Discourse, Discord, Twitter, Ello to see how they're structured, what people would expect to see. @dopatwo's amazingly cute elephant art is a huge advantage for us too in terms of catching attention, so the page puts that character above the fold.
@laurakalbag @aral Overall, the structure is meant to be like this: this is mastodon. it's been written about by well-known press, so it's serious. here's what makes it awesome. here you can find where to sign up. and below, how it works, when you want to know more. etc.
@aral @laurakalbag I'm not sure how to answer 2), but what was important to me was making the joinmastodon.org page sufficiently distinct from the /about page of each instance to prevent confusion about what's the software and what's the server. like the distinction between class and object in programming.
@laurakalbag @aral The page is built using React! create-react-app, to be exact, which is like a super easy way to start a React project. It's an entirely static website. During the build process, the generated JS is actually scraped into a HTML file to make sure it works even for people with disabled JS, using react-snapshot.
@aral @laurakalbag I love the elephant friend. When there's a surface that feels bland and empty and there's an opportunity to have an illustration there, I commission @dopatwo to draw something. Of course, you can't put illustrations everywhere. Most of the UI is simply functional and informative. But it's nice to see a cute elephant once in a while. For example, when there are server issues, I am less upset about it when I know people get to see the elephant.
@laurakalbag @aral Ask me more if you need to! Dunno if that was enough. And sorry for taking a while to respond.
dopatwo