Linear may be one of the great productivity tools for software teams, known for their product craftsmanship.

They recently released the [mobile version of its platform.](https://linear.app/mobile) And I want to review some of the good things I found from the launch.

## Photoshoot

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FGJRjBBygYuJQhV2Heneb%2Ffa4de070-c7a6-4215-9d23-4845c813ea23.jpg?alt=media&token=54a53b80-e446-4c42-b3a0-7e826d7d23a2","id":"fa4de070-c7a6-4215-9d23-4845c813ea23","width":1440,"height":968,"filename":"1.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FGJRjBBygYuJQhV2Heneb%2F2ec092c0-4309-4b90-9b24-f7eeba406da1.jpg?alt=media&token=fddd38ff-ba4f-4efc-94df-f2e97b4135a5","id":"2ec092c0-4309-4b90-9b24-f7eeba406da1","width":2048,"height":1376,"filename":"4.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FGJRjBBygYuJQhV2Heneb%2F063dbc06-ae51-4cb7-bebc-4add2b6ba793.jpg?alt=media&token=04d74a5e-7de1-40bc-84c3-052689a0323a","id":"063dbc06-ae51-4cb7-bebc-4add2b6ba793","width":2048,"height":1376,"filename":"7.jpg","type":"image/jpeg","caption":"","border":false}]}
```

When I first saw the main photoshoot, one thing that came to mind was; *"They just broke the rules."*

Most people may say that you need a natural lightning and some sort of that to present your product in a better way, just like how [Rauno](http://rauno.me) has used it in his prototyping videos.

Since Linear brand is all about dark tone, going to this direction improves cohesive looks and feelings.

And it become easier to combine with the 3D mockups.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FGJRjBBygYuJQhV2Heneb%2F1804047a-0346-4fa2-af93-5bf479ee30b8.mp4?alt=media&token=8ae118f1-acd3-47f2-aeb1-10aeb5d07129","id":"1804047a-0346-4fa2-af93-5bf479ee30b8","width":1914,"height":1080,"filename":"linear.mp4","type":"video/mp4","caption":"","border":false}]}
```

They also implemented a grain effect, which creates a dramatic effect similar to what we often see in movies, where the room is dark, and someone is just watching TV.

And they didn't do it by displaying a video; it's just an animation made with CSS, making it easy to be responsive across different platforms without losing the focal point.

## Copywriting

One copy that personally catchy for me is this title.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaBMmhY6F8DX4SMNIAkzolfbX4ZO2%2FGJRjBBygYuJQhV2Heneb%2Fd5182006-1302-47cb-becc-371811047721.png?alt=media&token=db546295-9d77-43e0-8dd9-80633c50c8f2","id":"d5182006-1302-47cb-becc-371811047721","width":2880,"height":1600,"filename":"linear.app_mobile.png","type":"image/png","caption":"","border":false}]}
```

A great way of communicating your *product feature* combined with *product usage*.

## Engineering

They used <`picture/>` for most of the assets to improve performance by dynamically render image with variety of sizes according to the viewport.

This means that when people see the websites in certain devices, it will display the appropriate images with the right sizes.

They also used `<figure/>` and `<figcaption/>` on the features presentation which better for SEO and accessibility.

And disabling assets interactivity by putting user-select and pointer-events to none is a small detail to prevent dragging over the images when you don't want to.

About Linear Mobile

Design & ship

Handbook

Photocard

Visual Designer

Leading teams, designing products, shaping brands

Idham

Projects

Work Experience

Writing

Education

Contact