May: Jobs, designing for React Native + Material Design

Another month, another post about what is going on at Mono! You can check out the past instalments from April , March, February and January.

Job Assessment Tool

We are still looking for new user interface designers to join our team (see our jobs page). To find the right candidates we worked on a small “job matching” tool. Essentially this is a form that asks you about your design experience. We use it to evaluate a candidates’ strength in 3 main categories: UI/visual design, technical skills and research.

So why not fill in the form, check out the related jobs and who knows, maybe there is a great match?

Check out the Job Matching tool

Designing for React Native

Figure: A demo app. First steps.

This month, we did quite a bit of research around designing user interfaces in the context of a big React Native app.

Part of the research involved creating a small demo application and toying around with Expo — which is kind of a CodePen but for React Native.

Surprisingly, it is better to do a custom design than to make a split based on the iOS and Material design guidelines. Confusingly, the default components provided by React Native spit out native-looking components.

React Native implements Yoga, a cross-platform layout engine which implements Flexbox in a native context. Some specific layout things such as centering or variable height items are much easier than in native apps because of this.

When we design applications, we really like to do a deep-dive into technical aspects. It’s the only way to design something that will be realistic to implement and hold up in the real world. Within design projects it’s so easy to create a fantasy that you will never be able to make. We do our best not to make this mistake.

Designing for a React Native environment is a deep topic. Especially if you view things a bit more broadly and start digging into React as a Platform. To fully explain this would go well beyond the confines of this monthly format, but if you are interested, also check out Nicolas Gallagher’s talk about React Native for Web. These two talks combined might make you think differently about user interfaces in general.

Material Design Updates

Figure: Component-o-mania in Figma.

At Google I/O 2018, the next iteration of Material Design was unveiled. You can check it out at the renewed material.io. We have quite a lot of projects that use Material Design as a design system, and thus we have been carefully examining the updates and watching various talks.

The newest iteration of Material Design expands on the customizability of Material Design, next to providing impoved guidelines and more code examples. The system is quite big and we are coming to grips with using it in practice.

I keep going back and forth whether I like Material Design or not but there are obvious advantages to using a (well) documented design system; and we are big proponents of that.

I also wanted to mention that the icons website for Material Design got a nice update; which is handy for anyone who is looking for a clean SVG icon now and then.

That’s it for this month!