88 lines
6.3 KiB
HTML
88 lines
6.3 KiB
HTML
<!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> |