ailyaut/ailyaut.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ailyaut
2025-05-15 16:06:00 +01:00
commit e8cf8acbbc
129 changed files with 3796 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
blog/202403_moxxy_progress_report.html Normal file
View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Moxxy UI: March 2024 progress report
– Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Moxxy UI: March 2024 progress report
– Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
<meta property="og:image" content="blog/media/2024/20240407_moxxy_progress.png
" />
<meta property="og:description" content="y aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.
" />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button_active">Blog</a>
<a href="../gallery.html" class="nav_button">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="--custom_width: 60%;">
<h1>Moxxy UI: March 2024 progress report
</h1><p class="light">07/04/2024 · 4 min</p><div class="spacer" style="--size: 1em"></div><p>Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.</p>
<p>My aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.</p>
<p>I chose to contribute to Moxxy because PapaTutuWawa, its developer, suggested it to me, and because Moxxy is written in Flutter, which is a language that is particularly well-suited to the creation of cross-platform applications (and I think that a cross-platform application would help enormously with the spread of XMPP to the general public).</p>
<p>So I started working on Inkscape in 2023, and came up with this.</p>
<p><img style="width: 100%;" alt="2023 Moxxy UI in dark mode" title="2023 Moxxy UI in dark mode" src="media/2024/2024-04_moxxy_2023_dark.webp" /></p>
<p><img style="width: 100%;" alt="2023 Moxxy UI in light mode" title="2023 Moxxy UI in light mode" src="media/2024/2024-04_moxxy_2023_light.webp" /></p>
<p>Unfortunately, Inkscape wasn't really suited to the task, and I ended up spending more time making documents to explain the designs than creating new ones. On the advice of a more experienced UI designer, I decided to use Penpot. Well, this designer had recommended Figma, but it didn't make sense to work on an open source project with a proprietary tool.</p>
<p>So here's the home screen I created using Penpot in January:</p>
<p><img style="width: 14em; max-width: 60%; border-radius: 0.5em;" alt="Moxxy UI on Penpot, first try" title="Moxxy UI on Penpot, first try" src="media/2024/2024-04_moxxy_january.webp" /></p>
<p>The result wasn't quite the same. It has to be said that I tried to correct a number of beginner's mistakes I'd made on Inkscape:</p>
<ul>
<li>Instead of using the Open Sans font, I switched to Roboto (the default font on Android)</li>
<li>Instead of doing my designs in 1080x1920, I switched to 360x640, which is the standard format for mobile interface design.</li>
</ul>
<p>I've also changed the colour of the interface. Well, I haven't really changed it, I've just changed the theme, because the aim is for users to be able to choose their own theme with Material You!</p>
<p>For my part, I switched to a light theme and green so as not to get too used to the dark theme and to check that the interface works well with several themes.</p>
<p>In February 2024, I got a new job! I'm now a graphic designer, 3D artist and... UI designer! I took advantage of this new role to delve deeper into the Material Design documentation, which is integrated directly into Flutter (if I've understood correctly).</p>
<p>That's when I realised that I'd made some new mistakes, particularly with the choice of colours. So I spent some time changing all my components and replacing them with the default Material Design components. Here's the result:</p>
<p><img style="width: 100%;" alt="Moxxy UI in March" title="Moxxy UI in March" src="media/2024/2024-04_moxxy.webp" /></p>
<p class="credit">Background image by David Revoy - CC-BY 4.0</p>
<p>The interface now seems much cleaner and more rigorous.</p>
<p>I'm just worried that following the guidelines to the letter will make the design 'personality-less'. But that's a concern I'll save for later.</p>
<p>Now, the points I think need more work:</p>
<ul>
<li>The colours are generally very calm and soothing. That's fine, but I'd like to give the design a bit more energy so that it catches the eye and makes people who don't use it want to use it. In my dreams, I'd like people to look over a user's shoulder when they're using Moxxy and think "Wow, that's a stylish app, I want the same one" (I've got a few ideas for that but I'll keep it for later, let's do something functional first).</li>
<li>The "chat" button doesn't stand out enough for my taste. But the theme colours are a bit limited and it's either that or a flashy green that clashes with the rest.</li>
<li>Although David Revoy's illustration is beautiful, I think the background behind the bubbles in the conversation looks very ugly. I was trying to keep the application 'immersive' by taking up the whole screen, but this is quite the opposite. The wallpaper is completely trapped between two rectangles, and you feel trapped by extension. I haven't found a solution to this yet, as I can't make the header transparent or semi-transparent for legibility reasons.</li>
</ul>
<p>So that was my first progress report on the Moxxy interface! I plan (and hope) to do one every month, a bit like Thunderbird does with the K9-Mail transformation. It's both a good way of encouraging myself to work regularly and, I hope, drawing attention to this great project.</p>
<p>If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the <a href="https://mastodon.online/@ailyaut/112234413401118081">Mastodon post</a>, or by sending them to me by email or XMPP!</p>
<p>:^)</p>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>

88
blog/202404_moxxy_progress_report.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Moxxy UI: April 2024 progress report
– Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Moxxy UI: April 2024 progress report
– Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
<meta property="og:image" content="blog/media/2024/20240407_moxxy_progress.png
" />
<meta property="og:description" content="April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.
" />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button_active">Blog</a>
<a href="../gallery.html" class="nav_button">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="--custom_width: 60%;">
<h1>Moxxy UI: April 2024 progress report
</h1><p class="light">08/05/2024 · 2 min</p><div class="spacer" style="--size: 1em"></div><p>April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.</p>
<p>One of the things I wanted to work on was color. The interface seemed dull overall, and the "Chat" button not very visible.
The best way to find out was to simulate real-life conditions!
So I added profile photos (by David Revoy), notifications and icons.</p>
<p><img style="width: 14em; max-width: 60%;" alt="Simulation of the Home screen in use" title="Simulation of the Home screen in use" src="media/2024/2024-05_moxxy_home_simulation.webp" /></p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p>All in all, it's not so dull!</p>
<p>I also took the opportunity to add the image preview feature created by PapaTutuWawa.</p>
<p><img style="width: 22em; max-width: 100%;" alt="Closeup on the image preview feature" title="Closeup on the image preview feature" src="media/2024/2024-05_moxxy_img_preview.webp" /></p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p>Regarding the "Chat" button, long story short, I struggled for hours because of a color palette incorrectly generated by the <a href="https://material-foundation.github.io/material-theme-builder/">Material Theme Builder</a>. The primaryContainer token that's recommended for this kind of button (a <a href="https://m3.material.io/components/floating-action-button/overview">Floating Action Button</a>) was flashy green, whereas when the palette was generated again with the same seed color, it was duller. I don't know if Google changed the code between the time I generated the first palette and today, but the difference is obvious.
Material palette comparison</p>
<p><img style="width: 30em; max-width: 100%;" alt="Material palette comparison" title="Material palette comparison" src="media/2024/2024-05_moxxy_palette_comparison.webp" /></p>
<p class="light">Left: wrong palette / right: correct palette</p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p>Furthermore, I tried to enter the same seed color as my Android phone's theme in order to understand which tokens Google apps used in which situations, but the colors didn't match.</p>
<p>In short, it's a big mess, but at least I've been able to correct my color palette for the future.</p>
<p>So here's the current state of the main screen in light and dark.</p>
<p><img style="width: 30em; max-width: 100%;" alt="Light and dark themes" title="Light and dark themes" src="media/2024/2024-05_moxxy_light_and_dark.webp" /></p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p>I hope to have more time next month to do more than just change colors. In the meantime, if you have any feedback or suggestions on the UI, don't hesitate to send them to me via XMPP, email or in reply under the <a href="https://mastodon.online/@ailyaut/112405298331386817">Mastodon post</a> !</p>
<p>:^)</p>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>

99
blog/202405_moxxy_progress_report.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Moxxy UI: May 2024 progress report
– Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Moxxy UI: May 2024 progress report
– Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
<meta property="og:image" content="blog/media/2024/20240407_moxxy_progress.png
" />
<meta property="og:description" content="Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!
" />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button_active">Blog</a>
<a href="../gallery.html" class="nav_button">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="--custom_width: 60%;">
<h1>Moxxy UI: May 2024 progress report
</h1><p class="light">09/06/2024 · 4 min</p><div class="spacer" style="--size: 1em"></div><p>Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the <a href="https://codeberg.org/ailyaut/design/src/branch/master">moxxy/design repository</a> on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!</p>
<p>The goals I had set myself in the preceding months were the following:</p>
<ul>
<li>make the colors more vibrant</li>
<li>make the "Chat" button stand out more (Home screen)</li>
<li>fix the feeling of "imprisonment" that is caused by having a background image in the chat screen</li>
</ul>
<p>The issue with the dull colors was resolved last month when I realised that the colour palette generated by the <a href="https://material-foundation.github.io/material-theme-builder/">Material Theme Builder</a> was wrong. So I corrected it and got back to colors that were brighter and easier to distinguish.</p>
<p><img style="width: 30em; max-width: 100%;" alt="Before/after palette correction" title="Before/after palette correction" src="media/2024/2024-05_moxxy_palette_comparison.webp" /></p>
<p class="light">before/after</p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p>This has also enabled the "Chat" button to stand out properly.</p>
<p>I then tackled the chat screen. Here I found that the header and the system and navigation bars enclosed the background in a rigid frame, making it impossible to imagine that the image exists beyond the borders of this frame.
Now, I admit that this is largely a matter of personal taste, but I attach a certain importance to the idea that it should be possible to imagine the interface beyond what the screen of our device lets us see. To put it simply, you could imagine an application as a house, and its various screens as rooms. The interface buttons are like doors, and the transition animations represent moving from one room to another. At the moment, the chat screen gives me the feeling of being in a windowless room, but with a pretty picture hanging on the wall. My aim is to turn this picture into a window.
And to do that, I had to break the frame, i.e. the header and the system and navigation bars of Android.</p>
<p>It wasn't possible to reduce the opacity of these bars or make them completely transparent for reasons of legibility. The solution I've found for the time being is a blur effect in the style of the css filter backdrop-filter: blur() which allows me to emphasise the existence of the background beyond the boundaries of the interface without hindering the reading of the information above it.</p>
<p><img style="width: 30em; max-width: 100%;" alt="Before/after blur filter" title="Before/after blur filter" src="media/2024/2024-06_moxxy_bg_blur.webp" /></p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p class="light">I would have liked to add the blurred message bubbles, but it was already a lot of tinkering to get that effect on Penpot.</p>
<p>For the science, I tried to apply the same effect without a wallpaper. For a moment I thought I'd switched to iOS, but the Material Design 3 colours really give the impression that we're on to something else, halfway between flat design and glassmorphism. I'm not entirely sure how well it fits in with the rest of the interface, but I'm not closing the door on the idea just yet.</p>
<p><img style="width: 30em; max-width: 100%;" alt="Chat screen with blurred header" title="Chat screen with blurred header" src="media/2024/2024-06_moxxy_chat_blur.webp" /></p>
<p>Finally, I worked on the various elements that can be found in chat screens, trying to get away from what other apps might do, particularly WhatsApp.</p>
<p><img style="width: 14em; max-width: 60%;" alt="Chat screen with different types of message bubbles" title="Chat screen with different types of message bubbles" src="media/2024/2024-06_moxxy_chat_components.webp" /></p>
<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
<p>Next time, I'd like to work on the following points:</p>
<ul>
<li>design of the text bubbles when you send a file and when you send your location</li>
<li>design of the drop-down menus that appear when you use the various buttons on the chat screen</li>
<li>design of the menu that appears when a chat bubble is long-pressed/li&gt;</li>
<li>design of message bubbles with errors (message not encrypted, sending error, etc.)</li>
</ul>
<p>If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the <a href="https://mastodon.online/@ailyaut/112587618079138456">Mastodon post</a>, or by sending them to me by email or XMPP!</p>
<p>:^)</p>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>

81
blog/hello_world.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello world!
– Ailyaut's blog</title>
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="../style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Hello world!
– Ailyaut's blog" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
<meta property="og:image" content="blog/media/2024/20240313_hello.png
" />
<meta property="og:description" content="Welcome! I'm Ailyaut, and this is my blog! You can read more about who I am in the About section.
" />
<meta property="og:locale" content="en_US" />
</head>
<body>
<header>
<div id="header_box">
<div>
<a href="../index.html" id="header_title">Ailyaut's blog</a>
</div>
<nav id="header_nav">
<a href="../blog.html" class="nav_button_active">Blog</a>
<a href="../gallery.html" class="nav_button">Gallery</a>
<a href="../projects.html" class="nav_button">Projects</a>
<a href="../about.html" class="nav_button">About</a>
</nav>
</div>
</header>
<main>
<div class="box">
<div class="column" style="--custom_width: 60%;">
<h1>Hello world!
</h1><p class="light">13/03/2024 · 2 min</p><div class="spacer" style="--size: 1em"></div><p>Welcome!</p>
<p>I'm Ailyaut, and this is my blog! You can read more about who I am in the <a href="../about.html">About</a> section.</p>
<p>As an artist and a person who just creates things, be it music, design or software, I thought for a long time that the only way I could share my work was through social media.</p>
<p>But I hated it, and ended up not sharing anything.</p>
<p>A few years ago, I discovered the open source philosophy thanks to Blender.<br />
I admired Blender because it was software created by a brilliant and generous community, and it far surpassed all the proprietary software that was the "industry standard" (I still wonder how anyone can use Autodesk Maya when it crashes every 15 minutes).<br />
Soon after, I discovered Godot engine and started making a game. But wait, it was an online game so I needed to learn networking. So I installed Linux on an old laptop and had a small server in my living room. Soon all my friends hated me for forcing them to use Firefox (just kidding) (maybe).</p>
<p>Having benefited so much from open source, I wanted to give something back and eventually started contributing within my abilities as a UI designer for the Moxxy XMPP client.</p>
<p>Which brings me to the two reasons I started this blog:</p>
<ol>
<li>I needed a way to share my creations without relying on social media or proprietary platforms</li>
<li>I wanted a space to show the work being done on Moxxy's UI, with the goal of making the process more "public" and getting feedback from potential users.</li>
</ol>
<p>Thus, this blog was born.</p>
<p>:^) </p>
</div>
</div>
<div class="spacer" style="--size: 2em"></div>
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
</main>
<footer>
<div id="footer_box">
<div class="footer_item">
<p>Copyright © 2025 Ailyaut</p>
</div>
<div class="footer_item">
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
0.02g of CO₂/view
</p>
</a>
</div>
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
<a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
</div>
</div>
</footer>
</body>

28
blog/md/20240313+hello_world.md Normal file
View File

@ -0,0 +1,28 @@
title = Hello world!
timestamp = 1710363600
preview = Welcome! I'm Ailyaut, and this is my blog! You can read more about who I am in the About section.
thumb = blog/media/2024/20240313_hello.png
+++
Welcome!
I'm Ailyaut, and this is my blog! You can read more about who I am in the [About](../about.html) section.
As an artist and a person who just creates things, be it music, design or software, I thought for a long time that the only way I could share my work was through social media.
But I hated it, and ended up not sharing anything.
A few years ago, I discovered the open source philosophy thanks to Blender.
I admired Blender because it was software created by a brilliant and generous community, and it far surpassed all the proprietary software that was the "industry standard" (I still wonder how anyone can use Autodesk Maya when it crashes every 15 minutes).
Soon after, I discovered Godot engine and started making a game. But wait, it was an online game so I needed to learn networking. So I installed Linux on an old laptop and had a small server in my living room. Soon all my friends hated me for forcing them to use Firefox (just kidding) (maybe).
Having benefited so much from open source, I wanted to give something back and eventually started contributing within my abilities as a UI designer for the Moxxy XMPP client.
Which brings me to the two reasons I started this blog:
1. I needed a way to share my creations without relying on social media or proprietary platforms
2. I wanted a space to show the work being done on Moxxy's UI, with the goal of making the process more "public" and getting feedback from potential users.
Thus, this blog was born.
:^)

58
blog/md/20240407+202403_moxxy_progress_report.md Normal file
View File

@ -0,0 +1,58 @@
title = Moxxy UI: March 2024 progress report
timestamp = 1712520000
preview = Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
thumb = blog/media/2024/20240407_moxxy_progress.png
+++
Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
My aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.
I chose to contribute to Moxxy because PapaTutuWawa, its developer, suggested it to me, and because Moxxy is written in Flutter, which is a language that is particularly well-suited to the creation of cross-platform applications (and I think that a cross-platform application would help enormously with the spread of XMPP to the general public).
So I started working on Inkscape in 2023, and came up with this.
![2024-04_moxxy_2023_dark.webp](../media/2024/2024-04_moxxy_2023_dark.webp)
![2024-04_moxxy_2023_light.webp](../media/2024/2024-04_moxxy_2023_light.webp)
Unfortunately, Inkscape wasn't really suited to the task, and I ended up spending more time making documents to explain the designs than creating new ones. On the advice of a more experienced UI designer, I decided to use Penpot. Well, this designer had recommended Figma, but it didn't make sense to work on an open source project with a proprietary tool.
So here's the home screen I created using Penpot in January:
![2024-04_moxxy_january.webp](../media/2024/2024-04_moxxy_january.webp)
Moxxy UI on Penpot, first try
The result wasn't quite the same. It has to be said that I tried to correct a number of beginner's mistakes I'd made on Inkscape:
- Instead of using the Open Sans font, I switched to Roboto (the default font on Android)
- Instead of doing my designs in 1080x1920, I switched to 360x640, which is the standard format for mobile interface design.
I've also changed the colour of the interface. Well, I haven't really changed it, I've just changed the theme, because the aim is for users to be able to choose their own theme with Material You!
For my part, I switched to a light theme and green so as not to get too used to the dark theme and to check that the interface works well with several themes.
In February 2024, I got a new job! I'm now a graphic designer, 3D artist and... UI designer! I took advantage of this new role to delve deeper into the Material Design documentation, which is integrated directly into Flutter (if I've understood correctly).
That's when I realised that I'd made some new mistakes, particularly with the choice of colours. So I spent some time changing all my components and replacing them with the default Material Design components. Here's the result:
![2024-04_moxxy.webp](../media/2024/2024-04_moxxy.webp)
Moxxy UI in March
The interface now seems much cleaner and more rigorous.
I'm just worried that following the guidelines to the letter will make the design 'personality-less'. But that's a concern I'll save for later.
Now, the points I think need more work:
- The colours are generally very calm and soothing. That's fine, but I'd like to give the design a bit more energy so that it catches the eye and makes people who don't use it want to use it. In my dreams, I'd like people to look over a user's shoulder when they're using Moxxy and think "Wow, that's a stylish app, I want the same one" (I've got a few ideas for that but I'll keep it for later, let's do something functional first).
- The "chat" button doesn't stand out enough for my taste. But the theme colours are a bit limited and it's either that or a flashy green that clashes with the rest.
- Although David Revoy's illustration is beautiful, I think the background behind the bubbles in the conversation looks very ugly. I was trying to keep the application 'immersive' by taking up the whole screen, but this is quite the opposite. The wallpaper is completely trapped between two rectangles, and you feel trapped by extension. I haven't found a solution to this yet, as I can't make the header transparent or semi-transparent for legibility reasons.
So that was my first progress report on the Moxxy interface! I plan (and hope) to do one every month, a bit like Thunderbird does with the K9-Mail transformation. It's both a good way of encouraging myself to work regularly and, I hope, drawing attention to this great project.
If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112234413401118081), or by sending them to me by email or XMPP!
:^)

38
blog/md/20240508+202404_moxxy_progress_report.md Normal file
View File

@ -0,0 +1,38 @@
title = Moxxy UI: April 2024 progress report
timestamp = 1715198400
preview = April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.
thumb = blog/media/2024/20240407_moxxy_progress.png
+++
April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.
One of the things I wanted to work on was color. The interface seemed dull overall, and the "Chat" button not very visible.
The best way to find out was to simulate real-life conditions!
So I added profile photos (by David Revoy), notifications and icons.
![](../media/2024/2024-05_moxxy_home_simulation.webp)
All in all, it's not so dull!
I also took the opportunity to add the image preview feature created by PapaTutuWawa.
![](../media/2024/2024-05_moxxy_img_preview.webp)
Regarding the "Chat" button, long story short, I struggled for hours because of a color palette incorrectly generated by the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/). The primaryContainer token that's recommended for this kind of button (a [Floating Action Button](https://m3.material.io/components/floating-action-button/overview)) was flashy green, whereas when the palette was generated again with the same seed color, it was duller. I don't know if Google changed the code between the time I generated the first palette and today, but the difference is obvious.
Material palette comparison
![](../media/2024/2024-05_moxxy_palette_comparison.webp)
Left: wrong palette / right: correct palette
Furthermore, I tried to enter the same seed color as my Android phone's theme in order to understand which tokens Google apps used in which situations, but the colors didn't match.
In short, it's a big mess, but at least I've been able to correct my color palette for the future.
So here's the current state of the main screen in light and dark.
![](../media/2024/2024-05_moxxy_light_and_dark.webp)
I hope to have more time next month to do more than just change colors. In the meantime, if you have any feedback or suggestions on the UI, don't hesitate to send them to me via XMPP, email or in reply under the [Mastodon post](https://mastodon.online/@ailyaut/112405298331386817) !
:^)

50
blog/md/20240609+202405_moxxy_progress_report.md Normal file
View File

@ -0,0 +1,50 @@
title = Moxxy UI: May 2024 progress report
timestamp = 1717963200
preview = Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!
thumb = blog/media/2024/20240407_moxxy_progress.png
+++
Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the [moxxy/design repository](https://codeberg.org/ailyaut/design/src/branch/master) on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!
The goals I had set myself in the preceding months were the following:
- make the colors more vibrant
- make the "Chat" button stand out more (Home screen)
- fix the feeling of "imprisonment" that is caused by having a background image in the chat screen
The issue with the dull colors was resolved last month when I realised that the colour palette generated by the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) was wrong. So I corrected it and got back to colors that were brighter and easier to distinguish.
![](../media/2024/2024-05_moxxy_palette_comparison.webp)
before/after
This has also enabled the "Chat" button to stand out properly.
I then tackled the chat screen. Here I found that the header and the system and navigation bars enclosed the background in a rigid frame, making it impossible to imagine that the image exists beyond the borders of this frame.
Now, I admit that this is largely a matter of personal taste, but I attach a certain importance to the idea that it should be possible to imagine the interface beyond what the screen of our device lets us see. To put it simply, you could imagine an application as a house, and its various screens as rooms. The interface buttons are like doors, and the transition animations represent moving from one room to another. At the moment, the chat screen gives me the feeling of being in a windowless room, but with a pretty picture hanging on the wall. My aim is to turn this picture into a window.
And to do that, I had to break the frame, i.e. the header and the system and navigation bars of Android.
It wasn't possible to reduce the opacity of these bars or make them completely transparent for reasons of legibility. The solution I've found for the time being is a blur effect in the style of the css filter backdrop-filter: blur() which allows me to emphasise the existence of the background beyond the boundaries of the interface without hindering the reading of the information above it.
![](../media/2024/2024-06_moxxy_bg_blur.webp)
I would have liked to add the blurred message bubbles, but it was already a lot of tinkering to get that effect on Penpot.
For the science, I tried to apply the same effect without a wallpaper. For a moment I thought I'd switched to iOS, but the Material Design 3 colours really give the impression that we're on to something else, halfway between flat design and glassmorphism. I'm not entirely sure how well it fits in with the rest of the interface, but I'm not closing the door on the idea just yet.
![](../media/2024/2024-06_moxxy_chat_blur.webp)
Finally, I worked on the various elements that can be found in chat screens, trying to get away from what other apps might do, particularly WhatsApp.
![](../media/2024/2024-06_moxxy_chat_components.webp)
Next time, I'd like to work on the following points:
- design of the text bubbles when you send a file and when you send your location
- design of the drop-down menus that appear when you use the various buttons on the chat screen
- design of the menu that appears when a chat bubble is long-pressed/li>
- design of message bubbles with errors (message not encrypted, sending error, etc.)
If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112587618079138456), or by sending them to me by email or XMPP!
:^)

BIN
blog/media/2024/2024-04_moxxy.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

BIN
blog/media/2024/2024-04_moxxy_2023_dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
blog/media/2024/2024-04_moxxy_2023_light.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
blog/media/2024/2024-04_moxxy_january.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
blog/media/2024/2024-05_moxxy_home_simulation.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
blog/media/2024/2024-05_moxxy_img_preview.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
blog/media/2024/2024-05_moxxy_light_and_dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
blog/media/2024/2024-05_moxxy_palette_comparison.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

BIN
blog/media/2024/2024-06_moxxy_bg_blur.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
blog/media/2024/2024-06_moxxy_chat_blur.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
blog/media/2024/2024-06_moxxy_chat_components.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
blog/media/2024/2024-06_moxxy_palette_comparison.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
blog/media/2024/20240313_hello.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
blog/media/2024/20240407_moxxy_progress.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB