The (current) system runs on growth. Economic growth starts (or ends) with personal development, a dynamic often illustrated by the corporate principle of a 'growth mindset.'

Grossly speaking, this translates to treating individuals like gears of the system. This is Meritocracy. This seemingly obvious logic only started to show its downsides during the pandemic. Locked in, it became hard to miss the lack of humanity, particularly in the tech ecosystem.

Like most things alive, humans don't just constantly grow. We evolved in nonlinear patterns. Ups and downs, trials and tribulations, are inherent parts of the human journey. The current corporate system isn't designed for that. Rapid turnover, burnout, anxiety, and other ills have been documented extensively. From personal observation, it's empathy and individual effort that keep things going.

Deloading is a common strategy to deal with the pressure and issues associated with it (depression, anxiety, burnout). Sabbatical and generous leave policies allow the release of some steam but don't address the root cause. Downgrading is rarely an option. When it is, it's often a tough transition.

A Plateau is periodically a relevant trajectory. Unfortunately, it is tricky to explain in a performance review. Yet everyone sensible understands the energy scarcity that comes with certain phases of life.

Plateauing well is about increasing leverage while reducing mean effort. The time opened is where one can recover, cope, or both.

It's okay not to desire to do more.

\--

Originally published at: slrncl.com/blog

Plateauing Well

A notification pops up somewhere. A bot relays it to project management and/or comms (slack). A thread gets started in situ. Always ends up being mentioned or continued in a different context. Some will type an actual reply, most will only react. May get indexed as a task in PM software. A loom or more extensive notes get sent out to address it. Then maybe a meeting happens to further align « in person ». The meeting gets recorded and distributed via multiple channels to reach everyone who might be related to the discussion items. Automated email notifications are sent via tagging. Comments and reactions add up at all levels and channels. Sometimes a « resolved » status gets added if/when the task gets cleared in one or more contexts.

Human groups (you know, friends) and companies rely on these patterns and tools to various degrees. What used to be called the « game of telephone » got to a whole different level. The situation remains the same but the degree of removal via interface has stripped even more humanity from the process.

Our species is where it's at thanks to its ability to communicate and collaborate. From massive gains from the invention of the printing press to the controversial Slack. It’s been a gradual escalation of over-communication. To a point where I often wonder if we haven’t reached the inversion of the ratio of effort(showing the cumulation of friction, miscommunication) to result…

\--

Originally published at: slrncl.com/blog

Async over-communication

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWLT12XMkEbcR4SeM6aNLIwj32Q82%2FJwA1nsECFQGuyMDkHdgj%2F7050b947-5665-4544-899e-145675df5874.mov?alt=media&token=4211253b-1af4-45f3-b536-947bb49dc1a2","id":"7050b947-5665-4544-899e-145675df5874","width":1120,"height":998,"filename":"hero.mov","type":"video/quicktime","caption":"","border":false}]}
```

I got the chance to design App&Flow latest website. The new tagline: “Turbocharged React Native Engineering, Powered by Expo” inspired the design of the hero piece. The ring frames the app icons and create a feeling of smoothness via a reveal effect and then infinite rotation. The composition directly illustrates the tagline by combining the tech logos mentioned. The ring around provides a frame and a touch of motion.

[See code and demo on Codepen](https://codepen.io/nsolerieu/pen/WNVqOMB)

---

### **HTML/CSS**

The ring of ellipses is an inline SVG with a unique class on each ellipse. This allows to set a unique opacity and rotation target to create the reveal effect. The values are a gradual range of rotation and opacity.

The `.hero__center` is a flex container centered via `position: absolute`. The same class toggle reveals the constituents. A mix of translation and rotation creates the snap-in lockup—all three with the same timing and easing.

The back glow is created via a `::before` pseudo-element on the parent container and uses a `filter: blur(80px)`. The rest is simple absolute positioning and a color variable.

CSS color variables are used to support light and dark modes. In the production version, the entire site can be toggled between light and dark mode via an extended set of variables.

I did not use animation software who would have exported a mush of code. I type every line of the ring `<svg>` in sublime text (I did export the plus sign from figma). I’m not asking for a trophy for that, simply suggesting to reduce dependencies on tools and, for the love of code, keep the DOM clean!

### **JS**

The javascript is only here to toggle the classes needed for the 2 states: onload, and post-reveal. I used `jquery` here for simplicity (laziness - because codepen is too convenient), vanillaJS could do the same.

When the `.loading-done` class gets toggled on the body, the target values get activated, and each ellipse goes from `opacity: 0; transform: rotate(0);` to their unique values. The reveal lasts `6s` as set by the `.ellipse` class transition property `transition: all cubic-bezier(.5,.01,.14,.99) 6s;`. I used a `setTimeout` function to delay by 5.5s the addition of the `.spin` class on the ring. The `0.5s` offset is dialed in to start the infinite spin before the reveal is fully done to avoid an awkward stop between the 2 states.

---

### **Ethos**

All this is rudimentary when one considers what can be done these days with CSS, SVG, and JS. I could have done something like that back in 2015. My key priorities were to find a clear concept and build a smooth experience. Smoothness is achieved here by using basic CSS which allows to hit 60fps easily. This example sums up my `70% baked` rule. I’m not the apple web design team or an award-winning studio, I aim to deliver something good, not great, consistently, using sustainable means.

\--

Originally published at: slrncl.com/blog

Building App&Flow’s hero

**Tracking** implies an automatic registration of events to carry on a quantitative approach. It is performed by tools set up exclusively for this purpose. Data points are rarely reviewed individually. Trend identification is often the main goal. The accuracy can be high but fidelity of the data is very low. Fidelity can be increased by tracking multiple types of data, creating context and potential correlation.

**Logging** in the pre-big-data days referred to a manual process to provide both a data point and often a unique note from the observer. The Medium-fidelity quality of the entry makes it less scalable than tracking. A log often includes multiple data points. Logs may be reviewed individually.

**Checking in** is qualitative. The degree of detail in the observation often involves a high effort and more time than for logging. Entries will be revisited in-depth to remember specific details. Think of this as a therapy session, whatever the subject matter, imagine it's sitting on a couch getting psychoanalyzed.

The context should determine the method collection based on frequency and fidelity desired. Conversely, the method of collection will tell the frequency and fidelity of the data. As often, context is key.

Everything that follows is the realm of interpretation.

\--

Originally published at: slrncl.com/blog

Data Collection

Like taking a walk, I can’t think of a time I regretted reading something. A real thing, not just a sign or a bumper sticker. Even an article from someone I disagree with or something poorly written. Especially since getting married, reading material is a great way to break out of gossip and home logistics.

On the flip side, I can’t think of a video piece (movie, YouTube, or social media story) that I can fully get behind. Even the most inspiring Ted talk or indie piece. 

Perhaps I haven’t read anything bad enough or watched a good enough movie (I watched Forest Gump btw). Maybe I’m not receptive, or some other personal bias. Objectively thought, the type of cognition is different, changing the feeling of engagement. The content can be the same but as it's been argued extensively, the medium is the message.

Considering how reading has benefited our species, this will sound like the stupidest way to promote reading. That’s unfortunately the kind of reason that keeps me going.

AI is throwing a curveball here. What is the point of reading something one didn’t bother to write? Does my "will-I-regret-doing-this" reasoning apply to generated text content? I don't think so. I have no interest in reading anything created by a computer, except for documentation and transcripts.

P.S.: it feels hypocritical to not mention that I don’t read as much as one may assume considering the nature of the topic: \~3-4 books/year, actively following \~10 blogs, \~10 long-form articles/month

\--

Originally published at: slrncl.com/blog

To read or not to read

Web and apps are 2 different ecosystems by nature. The UX gap is narrowing thanks to increasing bandwidth and device performance. This opened the gate to "Native (mobile) UI" web design.

Blurring the lines between app and web is not just a niche for web apps (or designer personal websites). Many websites these days opt for a Native mobile UI look and feel. Less column, more stacks, consolidated navigation...

The web 2.0 "responsive" hit a plateau a few years ago already while product design keeps pushing the envelope. It's a tad unfair to classic web design as it has to cater to both large and small screens, but still...

I appreciate that this approach suggests good practices, like accessibility and performance. Accessibility stems from the massive organizations that have tested and refined their patterns for a while now. Most of us are comfortable with it. Native is fast, fluid, and sharp, versus the static, freeze-reloads of the web.

The most common Native UI design systems, apple, and android suggest a certain rigor regarding information hierarchy that tends to lead to minimalist layouts and UIs. The extensive documentation, high quality, and abundant examples in our pockets are likely responsible for it, in a good way, for once.

There is the aesthetic question: Is Native UI neutral or is the choice of it reflecting something? – I see Native UI as the Bootstrap of web3, merging contexts for the smoothest UX. I perceive a desire to convey a blend of optimism and conformity in those going for it.

When it comes to UI, I see homogeneity as a common good, commoditization of it for the benefit of all, like the printing press. We all know how to use a book, a newspaper… a website, an app.

It's that striping of the branding ego that feels good to me. The content-first design approach is struggling to keep up with the pace of the ecosystem. Native UI provides the container that brings the focus back to the content.

I'm personally interested in how Native UI flexes for more editorial/showcase web use cases. I love how web design has been coming back in since the crypto-boom (winter 21–).

\--

Originally published at: slrncl.com/blog

Native UI web design

When I landed in SF back in 2016 I was getting exposed to a whole new set of job titles. Not only did they seem quite hyperbolic but I noticed that there were very few "web designers". This appeared odd since all companies have websites. So who makes and maintains these (increasingly fancy) things?

Most large companies have either outsourced to agencies/studios or embedded web in their brand or marketing orgs. An often awkward in-between leading to inconsistencies and rapid tech debt (to name the two biggest issues).

On the side, there's a growing and very competitive array of tool experts incentivized by certification and embedded marketplaces like Webflow, Wix, Shopify… these guys fill the gaps, rarely providing long-term solutions, feeding the whole "design as a subscription" model.

I believe Web designers became in short supply because of the product design shift (2014–). The definition of "product" varies depending on companies as some consider their website as an extension of their product experience.

The ubiquitousness of websites has driven a lower value perception while apps have been enjoying the opposite trend. Granted, that might have stabilized by now as we all have hundreds of apps installed on phones; but still, there are and will always be a lot more websites.

This situation led to few designers nowadays truly understanding CSS, sitemap, CMS, hosting, LAYOUT, web dev languages, semantic markup... that's a shame considering how the web is going. Specialization and the economy of scale have done their usual thing.

Lower costs, lowering the barrier of entry. More people. More business. More content (so much more). As always the true cost, health, is eclipsed.

The web like any other place needs careful builders. People who code their own CSS and know why it's important to keep it simple and clean (and what clean and simple actually looks like). Based on my experience, the indie web people are the closest to the web designers of the 2010s.

Maybe I missed something? Perhaps my linkedin/dribbble based assessment is flawed? If so feel free to [holler at me](https://slrncl.com/#links).

\--

Originally published at: slrncl.com/blog

Web designers?

My thoughts on ebikes: https://slrncl.com/blog/2024-12-15-3-years-on-the-e-bike

Webdesigner

Brand, web and product work for Daytona, the enterprise-grade Codespaces alternative for managing self-hosted, secure and standardized dev environments.

Daytona.io

Ottomate is a lifecycle marketing company providing consulting and training. I got the chance to shape the brand and site from idea to production. Black and white circular logo. Built with Kirby.

Ottomate.co

Logo and brand refresh + full site redesign for the MTL app dev agency - App&Flow. A follow up collaboration where I was tasked to elevate the brand look and feel to compete with other agencies.

App&Flow

A single file, dependencies-free, chat UI html/css mini-kit

Text-the-internet

I like a good quote — As shallow as some can be, I've often enjoyed the invitation to think that they extend. This is my annotated collection.

/notes

/moments

My humble "blog". Typos and half-baked thoughts have been and will always be my own.

/blog

15 titanium beads on a rope to let your mind wander, your fingers wonder. 60g total - 6kg carbon footprint. Handmade, forged in japan, machined in California, photos shot on iphone, static HTML page with a stripe Checkout integration. 

Presence.supply

No particular theme or purpose other than archival without relying on social media. Mostly done on ipad+procreate. Mostly tracing crappy pictures of stuff I found intriguing – as a meditative exercise.

Sketchbook

An online collection of indie books. Super simple, black and white, responsive experience to just – read.

–reads

I design new pages, posters and fix things on github.com

Site designer

Visual designer

Designed websites, newsletter, ads and built those in HTML/CSS/JS often using Wordpress and Jquery - I learned a lot

Nicolas Solerieu

2024