aeon's portfoliomultidisciplinary designer exploring art, UX and programming2024-03-01T00:00:00Zhttps://papirotheque.neocities.org/blog/blog/papiro/aeonthepapiro@proton.meMano a Mano Event Poster2024-03-01T00:00:00Zhttps://papirotheque.neocities.org/blog/posts/mano-a-mano-poster/<p><strong>JHS Benavente</strong></p>
<p><em>March 2024</em></p>
<blockquote>
<h3>Role</h3>
<p>Graphic designer</p>
<h3>Client</h3>
<p>JHS Benavente</p>
</blockquote>
<hr>
<p>
</p>
<h2>Project Overview</h2>
<p>In this commercial work I had the privilege of collaborating with the “Jesús Nazareno JHS” brotherhood for a concert promoting the upcoming Easter events of their 2024 season.</p>
<p>
</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/manoamano/poster.jpg" alt="Concert poster featuring an image of Jesus alongside a man, promoting an upcoming musical event"></p>
<p>
</p>
<p>Poster created for the “Jesús Nazareno JHS” brotherhood to promote the event presenting the official poster of the Encounter Procession and the concert by Luis Antonio Pedraza.</p>
<p>The client wanted to include the image of their brotherhood alongside a portrait of the artist performing at this event.</p>
<p>My goal was not only to complete this task, but also to learn new design techniques and experiment with typography and color combinations.</p>
<p>
</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/manoamano/detail.jpg" alt="Image close-up from the poster"></p>
<p>
</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://papirotheque.neocities.org/blog/assets/images/manoamano/detail2.jpg" alt="Typography detail from the poster"></td>
<td><img src="https://papirotheque.neocities.org/blog/assets/images/manoamano/detail3.jpg" alt="Detail from the poster"></td>
</tr>
</tbody>
</table>
<p>
</p>
<h2>Color Palette</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/manoamano/color.jpg" alt="Color palette for the poster"></p>
<hr>
<p>
</p>
<h2>Tools & resources used</h2>
<p>This poster was made using <strong>Photoshop</strong> and <strong>Illustrator</strong>, employing experimental h<strong>alftone techniques and textures</strong>, aiming to give dimension to the composition through <strong>digital collage</strong>.</p>
<hr>
<p>
</p>
<h2>Typography</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/manoamano/typo.jpg" alt="A collection of fonts displaying the typography choices for the poster">
The typefaces used have OFL licenses and are freely available for commercial use.</p>
<p>
</p>
<p>They are as listed:</p>
<p><strong>Meshed Display Bold</strong> — <em>by Rajeshi Rajput</em></p>
<p><strong>Sinistre Regular</strong> — <em>by Collettivo</em></p>
<p><strong>Kyivtype Sans Bold</strong> — <em>by Dmytro Rastvortsev</em></p>
2024 Calendar Design2023-12-01T00:00:00Zhttps://papirotheque.neocities.org/blog/posts/2024-calendar/<p><strong>Ayuntamiento de Benavente</strong></p>
<p><em>September – December 2023</em></p>
<blockquote>
<h3>Role</h3>
<p>Graphic designer for the Tourism City Council in Benavente (Spain)</p>
<h3>Client</h3>
<p>Concejalía de turismo - Ayuntamiento de Benavente</p>
</blockquote>
<hr>
<p>
</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/cover.jpg" alt="Cover image for the 2024 Official Benavente calendar"></p>
<p>
</p>
<h2>Project Overview</h2>
<p>This project involved a close collaboration with the <strong>Benavente Tourism Council and Office</strong> to design and produce the official 2024 city calendar.</p>
<p>The challenge was to create an accessible and practical calendar for the residents while serving as a promotional asset for the city’s history, traditions, and tourist attractions.</p>
<p>There were <strong>6000 units printed</strong> and given away for the city residents to enjoy, use and share at <strong>no cost</strong>!</p>
<hr>
<p>
</p>
<h2>Monthly-focused design</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/head1.jpg" alt="First image in a series of images detailing different aspects of the calendar"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/head2.jpg" alt="Second image in a series of images detailing different aspects of the calendar"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/year1.jpg" alt="Third image in a series of images detailing different aspects of the calendar"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/year2.jpg" alt="Fourth image in a series of images detailing different aspects of the calendar"></p>
<hr>
<p>
</p>
<h2>Design approach</h2>
<p>The layout was designed for <strong>clear readability and generous space for notes</strong>, optimizing practical functionality for daily planning, something which is very important for people around here. Special attention was paid to creating a hierarchy that highlights important municipal dates and holidays such as <strong>La Veguilla</strong> or <strong>El Toro Enmaromado</strong>.</p>
<hr>
<p>
</p>
<h2>Index</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/all1.jpg" alt="An image for each month of the year following a visual path with different colours">
<img src="https://papirotheque.neocities.org/blog/assets/images/calendar/all2.jpg" alt="An image for each month of the year following a visual path with different colours"></p>
<hr>
<p>
</p>
<h2>Calendar layout</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/calendar/month.jpg" alt="The first page of monthly calendar layout featuring a collage and the month dates">
<img src="https://papirotheque.neocities.org/blog/assets/images/calendar/month2.jpg" alt="The first page of monthly calendar layout featuring a watermark behind an area to write and the month dates"></p>
<hr>
<p>
</p>
<h2>Production Management</h2>
<p>Managed the pre-press file preparation, which was done by Gráficas Cubichi.</p>
<hr>
<p>
</p>
<h2>Tools & resources used</h2>
<ul>
<li>
<p><strong>Layout & Production:</strong> Adobe InDesign</p>
</li>
<li>
<p><strong>Vector Graphics:</strong> Adobe Illustrator</p>
</li>
<li>
<p><strong>Image Edition & Processing:</strong> Photopea, Adobe Photoshop, Adobe Express, Pexels</p>
</li>
</ul>
<hr>
<p>
</p>
<h2>Credits</h2>
<ul>
<li>
<p><strong>Photography:</strong> <a href="https://www.descubrebenavente.com/">Isi Palmero - Descubre Benavente</a>, Noe.G.O.</p>
</li>
<li>
<p><strong>Layout and design:</strong> Noe.G.O.</p>
</li>
<li>
<p><strong>Printing:</strong> <a href="https://cubichi.es/">Gráficas Cubichi</a>.</p>
</li>
</ul>
<hr>
<p>
</p>
<h2>Special thanks to</h2>
<p><a href="https://benavente.es/">Ayuntamiento de Benavente</a></p>
<p><a href="https://turismobenavente.es/">Oficina de turismo</a></p>
<p>Concejalía de turismo</p>
<p>Archivo municipal de Benavente</p>
Conquer and Gravitas series2023-02-01T00:00:00Zhttps://papirotheque.neocities.org/blog/posts/conquer-gravitas-poster/<p><strong>Design Sprint</strong></p>
<p><em>Early 2023</em></p>
<hr>
<p>
</p>
<h1>Project Overview</h1>
<p>Conquer&Gravitas is a series of posters I made as part of an improvement and learning <strong>design sprint</strong> I programmed for myself in early 2023. It consists of 4 posters, each one representing women in different abstract positions of power.</p>
<hr>
<p>
</p>
<h1>Posters</h1>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/conquergravitas/warrior.jpg" alt="Poster for Warrior"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/conquergravitas/conquer.jpg" alt="Poster for Conquer"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/conquergravitas/gravitas.jpg" alt="Poster for Gravitas"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/conquergravitas/glory.jpg" alt="Poster for Glory"></p>
<hr>
<p>
</p>
<h1>Regarding AI usage</h1>
<p>AI was used in this process to enhance picture quality, generate concepts and try different styles.</p>
<p><strong>Notes:</strong> This project is from late 2022 - early 2023. Nowadays I would have <strong>COMPLETELY DISCARDED</strong> the use of genAI due to my personal preferences and work ethics. I still feature it in my portfolio due to the complexity of the work and for people to read this particular message.</p>
<hr>
<p>
</p>
<h1>Tools & resources used</h1>
<ul>
<li><strong>Image Edition & Layout</strong> Adobe Photoshop, After Effects</li>
</ul>
Beyond2022-12-01T00:00:00Zhttps://papirotheque.neocities.org/blog/posts/beyond/<p><strong>HBKSaar</strong></p>
<p><em>October 2019 – February 2020</em></p>
<hr>
<p>
</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond3.png" alt="Cover image for the 2024 Official Benavente calendar"></p>
<p>
</p>
<h2>Project Overview</h2>
<p>Beyond is a 2D animated short film based on a poem about perception, transformation, memory and time loops.</p>
<p>This was done as part of the <strong>Ex Astris - Ad Astra Atelierprojekt</strong> for <strong>HBKSaar</strong>.</p>
<p>Written, composed and animated by me.</p>
<iframe src="https://player.vimeo.com/video/392979055?badge=0&autopause=0&player_id=0&app_id=58479" width="1400" height="600" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Beyond_Noelia Gonzalez Olmos"></iframe>
<hr>
<p>
</p>
<h2>Screenshots</h2>
<p>Screenshots from the video. You can use these as wallpapers and icons, or in a transformative manner. But please credit me! Thank you.</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond2.png" alt="Beyond2"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond5.png" alt="Beyond5"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond3.png" alt="Beyond3"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond4.png" alt="Beyond4"></p>
<hr>
<p>
</p>
<h2>Process</h2>
<p>Process in the form of moodboarding.</p>
<p>I don't own these images except the text and overlay editions.</p>
<p></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond6.jpg" alt="Beyond6">
<img src="https://papirotheque.neocities.org/blog/assets/images/beyond/beyond7.jpg" alt="Beyond7"></p>
<hr>
<p>
</p>
<h2>Poem</h2>
<blockquote>
<p>As I closed my eyes,<br>
they fell around me,<br>
the walls constructed,<br>
manufactured<br>
as concrete and metal,<br>
as thin air.</p>
<p>When the plastic mold separates and we are left bare,<br>
with our flesh, our mortality,<br>
this frame,<br>
and, do we dare?</p>
<p>Beyond is time,<br>
beyond it is not,<br>
though a prison it seems,<br>
behind that mask so well built.</p>
<p>There are mirrors everywhere I go,<br>
they hold when I hold,<br>
around me they are formed,<br>
what's to change?<br>
The glare,<br>
do we dare?</p>
<p>Conveyed through guilt,<br>
two sides face,<br>
fade,<br>
distort<br>
this new perception<br>
but impossible thought.</p>
<p>No need for fear,<br>
for the moment<br>
is not all.<br>
But all it is,<br>
deformed,<br>
conformed,<br>
measured,<br>
mirrored.<br>
A unit of being.</p>
<p>Towards becoming a step,<br>
an unquenchable thirst<br>
for directions;<br>
but beyond the manual we wear<br>
no measurements, no parole.</p>
<p>Even the silhouettes<br>
of our decisions,<br>
become the<br>
treasures:<br>
our visions.</p>
<p>No more symmetry,<br>
no more reflections,<br>
what there belonged<br>
now inconceivable<br>
transmogrified<br>
and forever lost.</p>
<p>How can one see,<br>
after one is not one.<br>
As all perceived,<br>
as one forgotten,<br>
the lock is broken.</p>
<p>Are mine, anymore,<br>
these eyes I open?</p>
</blockquote>
<hr>
<p>
</p>
<h2>Tools & resources used</h2>
<ul>
<li>
<p><strong>2D animation, compositing, production:</strong> After Effects & media encoder</p>
</li>
<li>
<p><strong>Music and sound-effects:</strong> Ableton Live, Audacity</p>
</li>
<li>
<p><strong>Vector Graphics:</strong> Adobe Illustrator</p>
</li>
<li>
<p><strong>Image Edition & Processing:</strong> Adobe Photoshop, Pexels</p>
</li>
</ul>
Overstimulated2021-07-23T00:00:00Zhttps://papirotheque.neocities.org/blog/posts/overstimulated/<h2></over>stimulated</h2>
<p><strong>Master's thesis at HBKSaar</strong></p>
<p><em>October 2020 – July 2021</em></p>
<hr>
<p>
</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/all.jpg" alt="All"></p>
<p>
</p>
<h2>System Error: </over> stimulated</h2>
<p>My Masters Thesis, <code></over></code>stimulated, is not just a visual representation of Autism Spectrum Disorder (ASD); it is an attempt to reverse-engineer the neurotypical gaze.</p>
<p>While mainstream media often portrays autism through a voyeuristic lens-focusing on external behaviors or the "male genius" stereotype. My goal was to simulate the internal operating system of the autistic mind. The project functions as an interactive, non-linear experience because the autistic experience itself is rarely linear. It is a constant negotiation between internal processing and external demands.</p>
<hr>
<p>
</p>
<h2>Close-ups of the different pages</h2>
<style>
.responsive-image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.responsive-image-grid {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
<div class="responsive-image-grid">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/hyperfixation1.jpg" alt="Hyperfixation">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/masking1.jpg" alt="Masking">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/overload1.jpg" alt="Overload">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/alienation1.jpg" alt="Alienation">
</div>
<h2>The Illusion of Choice</h2>
<p>Technically, the project draws inspiration from interactive narratives like Black Mirror: Bandersnatch. I wanted the user to feel "active and tactile" through decision-making. However, the non-linear path reflects a deeper truth: while you can choose which fragment to explore, the underlying "code" of the experience (the autism) remains constant. The interactive format forces the viewer to actively engage with the frustration, confusion, and beauty of a mind that processes the world differently.</p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/masking2.jpg" alt="Masking2"></p>
<hr>
<p>
</p>
<h2>"Non-Destructive" Identity Construction</h2>
<p>A key theoretical pillar of this work is the concept of Non-Destructive Editing (common in digital collage and Photoshop). In design, we use masks and layers to alter an image without permanently destroying the original data.</p>
<p>I applied this logic to the concept of Masking. For an autistic individual, "masking" is the conscious construction of a social layer-mimicking behaviors, scripting responses, and suppressing natural instincts to fit in. Just like a digital file, the original "layer" (the true self) remains underneath, but it is obscured by the "adjustment layers" of social survival.</p>
<p></p>
<h3>Technicalities</h3>
<p>It is built in pure html and css. No frameworks or libraries were used. The design was made with a non-responsive approach. I did not use any media queries or other responsive design techniques. It works perfectly fine on any device, except for a couple of small details.</p>
<hr>
<p>
</p>
<h2>The Architecture of the Experience</h2>
<p>The project is architected around four distinct states of being:</p>
<p>
</p>
<h3>Hyperfixation</h3>
<p><strong>The Logic:</strong> Hyperfixation is often misunderstood as just "liking something." In the project, I treat it as a "zoom" function that cannot be zoomed out. It is the ability to see the "trees but not the forest."</p>
<p><strong>The Visualization:</strong> This is represented through an intense, micro-focus on details, simulating the self-regulating isolation that comes from diving deep into an inner world.</p>
<p></p>
<h3>Overload</h3>
<p><strong>The Logic:</strong> Overload is the result of an incompatibility between the user’s sensitivity and the environment’s input.</p>
<p><strong>The Visualization:</strong> I utilize the metaphor of viscosity-like magma. The pressure builds invisibly until the "system" (the body/mind) shuts down to prevent permanent damage. The visual chaos here represents the "fatal exception" errors of the mind.</p>
<p></p>
<h3>Masking</h3>
<p>** The Logic:** Social interaction for neurotypicals is intuitive; for me, it is a manual calculation.</p>
<p><strong>The Visualization:</strong> By using the parallax scrolling effect and overlayed text, I physically separate the "viewer" from the "content," mimicking the dissociation felt during masking. The text explicitly references the "scripting" process. Taking notes on human behavior as if studying for an exam, citing pop culture (like Bridget Jones) as a manual for interaction.</p>
<p></p>
<h3>Alienation</h3>
<p><strong>The Logic:</strong> Alienation is the statistical output of the previous three states. It is the feeling of being "lost in a world that spoke a language I didn't."</p>
<p><strong>The Visualization:</strong> This section explores the "loss of self" that occurs when one spends too long masking. It is the visual equivalent of a void. The desire to "return to my home planet" because the current operating environment feels fundamentally hostile.</p>
<hr>
<p>
</p>
<h2>Website screenshots</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/FINAL_masterarbeit_praesentation-26.jpg" alt="FINAL_masterarbeit_praesentation-26">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/FINAL_masterarbeit_praesentation-27.jpg" alt="FINAL_masterarbeit_praesentation-27">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/FINAL_masterarbeit_praesentation-28.jpg" alt="FINAL_masterarbeit_praesentation-28">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/FINAL_masterarbeit_praesentation-29.jpg" alt="FINAL_masterarbeit_praesentation-29"></p>
<hr>
<p>
</p>
<h2>General layout & text</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/presentation.jpg" alt="Presentation">
<img src="https://papirotheque.neocities.org/blog/assets/images/overstimulated/presentation2.jpg" alt="Presentation2"></p>
<hr>
<p>
</p>
<h2>Tools & resources used</h2>
<ul>
<li>
<p><strong>Layout, Coding & Production:</strong> Atom code editor, w3schools, stackoverflow</p>
</li>
<li>
<p><strong>Image Edition & Processing:</strong> Adobe Photoshop, Pexels + my own photos</p>
</li>
</ul>
<hr>
<h2>Links</h2>
<p><a href="https://papirotheque.github.io/overstimulated/">Website demo</a></p>
<p><a href="https://github.com/papirotheque/overstimulated/">Github repository</a></p>
Digital Sketchbook1999-03-31T00:00:00Zhttps://papirotheque.neocities.org/blog/posts/digital-sketchbook/<p><strong>For myself</strong></p>
<p><em>From gaining consciousness – Until now</em></p>
<hr>
<h2>Why post sketches?</h2>
<p>I started posting my digital sketches to Instagram a while ago, and I've been meaning to document them here for a while now. I think it's a great way to share my unfinished pieces and to show not everything turns out the way one intends to. Ever since I was a kid I loved painting so my sketches have a pictorial look to them.</p>
<p>Each image hasn't taken me more than 3 hours, that's why I don't consider them unfinished pieces but more like sketches or studies.</p>
<hr>
<p>
</p>
<h2>Sketches & Studies</h2>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/twd2.jpg" alt="TWD2"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/twd1.jpg" alt="TWD1"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/maurice1.jpg" alt="Maurice1"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/face2.jpg" alt="Face2"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/face5.jpg" alt="Face5"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/neo.jpg" alt="Neo"></p>
<p><img src="https://papirotheque.neocities.org/blog/assets/images/sketchbook/girl.jpg" alt="Girl"></p>
<hr>
<p>
</p>
<h2>What it means to me</h2>
<p>On 2023 I bought a tablet so that I could draw from wherever (currently a Samsung Galaxy Tab S6 Lite 2022 edition if I'm not wrong). I have already had my "normal" drawing tablet (Gaomon M10K Pro Pen Tablet) to draw on my pc without seeing what I'm drawing directly and I wanted to try this new approach. Let's say it has made me draw quite a lot and I've been able to travel with my work in my pocket.</p>
<hr>
<p>
</p>
<h2>Tools & resources used</h2>
<ul>
<li><strong>Illustration & Editing:</strong> Mostly Infinite Painter, but also Adobe Fresco and Adobe Photoshop</li>
<li><strong>Hardware:</strong> Samsung Galaxy Tab S6 Lite 2022 edition, Gaomon M10K Pro Pen Tablet</li>
</ul>
<hr>