GUADEC Riga 2023

---

---

---

background-image: url(img/tris.svg)
background-size: 50%
background-position: top right
# Jack of All Trades
### Embracing Versatility in a World of Specialization
Jakub Steiner
???
## The anti-specialist
* Deep knowledge, narrow focus on a specific field of expertise
* Master of none
* bringing **art** to computer science

---

## As an AI language model, I've condensed the necessary knowledge for appearing credible as a professional designer into a 20-minute presentation.

???

* An ADHD presentation.
* Listen to hallucinations produced by a carbon based AI for a change

---

???
* I lied. Might be the only thing I devoted a considerable amount of professional career.
* Symbolics are the present/future of UI icons.
* All icon design follows

---

???

Don't skip.

Sketching helps nailing the metaphor. The crappier your sketching, the better. If you can identify what you've sketched, the better the metaphor.

---

## If an element does not have an obvious visual metaphor, then it should not have an icon.
### Garrity's Law
???
* Relates to symbolics / UI icons

---

## If you can't execute an app icon well, you can always rename the app to something that does.

### Steiner's Amendment

`https://developer.gnome.org/hig/guidelines/app-naming.html`

???

## App icons
* Won't work on established projects
* GNOME Circle

---

???

## There's an app for that

* Color Palette on Flathub
* More of a consistency glue than a creative constraint.
* No need to only use the colors in the palette.

---

???

## Use App Icon preview.

* Helps you manage fullcolor and symbolic at the same place, provides a template, example icons, devel variant.
* Use existing icons to create derivative works.

---

### CSS

???

* Used for interactive mockups and surprisingly websites.
* Back to radical ideas like HTML+CSS for building websites.
* With things like **nested selectors** and **variables** plain CSS is powerful.
* Unlike with gtk, used for layout...

---

???

Can be wrapped on multiple rows/columns

---

.scaledimage[![grid](img/css-grid.svg)]
#### Grid
Even arrangement of objects in multiple axes
???
* Stacking / operlapping
* alternative to `position: absolute;`
---

<video id="nautilus-grid" class="fullscreen opaque" loop autoplay muted>
    <source src="img/nautilus-grid.webm" type="video/webm" />
</video>
???
* Prototyping adaptive layouts.
---

---

---

template: centered
```css
grid-template-columns: repeat(var(--columns)), 1fr);
```

---

template: centered
```css
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
```

???

* No need for breakpoints/ media-queries

---

```css
  grid-template-areas: 
    "header header header header"
    "article article arcitle note"
    "footer footer footer footer";
```

???

* Human legible
* Alternative layouts using media queries. **grid-area**

---

???

* Love pixels. Gotta have them in.
* Animation, focusing on major features. Animating a few pixels is both easy and tedious. Trains your 4th dimension skills.
* Component/Library websites. **Toolbx**, **Pipewire**, **Tracker**

---

.scaledimage.pixels[![pixel icons](img/pixels.png)]
### Limited Palette

???

Creative constraint. Using too many colors results in the artwork just looking like a scaled down image, rather than purposeful style.

---

.scaledimage.pixels[![lines](img/pixel-lines.png)]
### Stick to a Few Angles

???

0, 30, 60, 45

---

.scaledimage.pixels[![image](img/AA.png)]
### Anti-Alias, but Only a Little

???

Fuzzy

---

???

Low framerate, gotta separate quick from super quick

---

---

.scaledimage.pixels[![image](img/tripple.gif)]
### Tripple Buffer

???

J/K

---

---

???

* You have to devote your life to tedious details.
* Thank **Nikolaus Waxweiler** for Cantarell

---

## 3D

???
* Demo Design by **Peter Tarka**
* No need to model. Meshes closer to computers than humans, topology not fun. Higher level model descriptions. **PLasticity** NURBS, booleans and bevels.
* Lighting and materials way more important. Classic 3 Point lighting - key, fill, rim. HDRI global illumination.
* Complex material properties: **roughness**, **specular highlights**, **refraction**, **reflection**.

---

???
## New procedural workflow
* Wallpapers; talk for Creative Freedom Summit on 44 wallpaper process. Tutorial.
* Instance on Points
* Set position, Join Geometry, Delete Geometry (selection), transform instances
* Motion Mockups: **switch**, **text nodes**

---

## Vector Art
### Beziers
???
* Minimum nodes, orthogonal helper lines.
* Beautiful talk by [Freya Holmér](https://www.youtube.com/watch?v=aVwxzDHniEw)
* Balance between smoothness and control.
* If you want to be really smooth, Spiro.

---

### .invertedtext[GNOME Geometric Illustrations]
???
* Terrible Illustrator
* Same process as with icons - sketch first
* Geometric shapes best done with Corners Fillet/Chamfer

---

## Drone Shots

???

## How to Drone
* Lock fingers.
* FPV: Get a radio + sim.
* Don't bother with analog in 2023. Walksnail or DJI O3, HDZERO for racing.

---

???

## Original sound effects and music
* Default Sounds in 44. Updates for 45
* Generated using software synths. Dirtywave M8

---

???

* Release video by Freehive. Uses stock music.
* Social sites quickies. Original beat
* Template driven. easy to produce

---

???

* Sound Panel redesign loose ends.
* Continuous sound to fix cables under the desk.

---

## How to Design
* Rules of thumb can get you far
* GNOME is special. Developers doing design
* Focus on primary use cases. Not a bus that's also a race car and a yacht.

---

???

## Grid
* Things that align are beautiful
* Beautiful things work better.

---

???
## Whitespace
* reddit - wasted space aka cram as much as possible into a single screen.

---

### Shove it in a List

???

## Shove it in a list
* Back to aligning things. Eyes like things anchored, not random.

---

### Iteration
???
* Nothing ever comes out good on the first try

---

## blog.jimmac.eu