Loupe 2019 — The shape of design

what’s next in interaction design?

Loupe, a conference hosted by Framer (a prototyping tool). UI/UX designer、developer、prototyper from all over the world will gather here, having the main sessions, community shows, workshops for the following three days. Each year, Framer choose Amsterdam, their headquarter, as the Venue. Apart from having communicate with attendees in the conf., you can also visit the city, a place of tolerance, diversity and rich culture.

Table of Contents

  1. Session
  2. Community Show and Tell
  3. Conclusion

reminder: go through the whole article completely may take up to 1 hour.

1.Session

Loupe invites 8 different designers to the sessions, all of their backgrounds are diverse, from graphic design to product design. Each one of them got something to talk about in their own field, I’ll introduce one by one:

1.1 Laura Kalbag — Accessibility For Everyone

Laura, a designer who lives in Europe, dedicated to ethical design, accessibility, inclusivity for years. She manages a blog, websites and Publishes Book, all of these content related to one idea: design should take divergence into consideration. Before the creation of art, a website needs to make accessibility as a higher priority. Laura go through some examples to explain different kinds of disability or physically challenged should have corresponded way to receive the same information as normal people.

1.2 Wes O’Haire — Mental Models for Product Designers

Product designers deal with a bunch of cross-department communication every day. Each type of question should have a mental model to handle. Wes O’Haire mentions a sheet he creates, and how disciplinary help a designer to make a better decision.

Wes O’Haire shares the file 🔗 Mental Models for Product Designers.pdf with 7 most useful Mental Models. Take #1 First Principles as example,it’s a way to break down a large, complex question into some smaller questions. go through each question, examine the barrier, and seek the resource to solve it.

Of course those disciplinary are not Elixir, but once you start to build your mental models, you will have a more clear explanation of how a question should be dealing with.

1.3 Tim Van Damme — △ = c (change is constant)

Tim is the Principal designer at Abstract, a design file version control tool. he brings up the question of asking yourself: what can you gain from the company you’re now at?

what’s the team you belong to? is it a startup or a company in good-size?
do you know how the envirnoment affect you and how can you define the state of yourself?

Startups vs. Enterprise

The second thing makes me think is how to communicate in the company. a meeting with efficiency lets everyone stay on the same page, make sure we all head in the same direction.

last I agree with the slide on right-hand side, which is the idea he thinks will never change: Mentoring and Pay it forward — a team can sustainably operate if they always contain positive energy and learn from each other.

1.4 Ash Adamson — A practice through change

Ash Adamson used to be a DJ, but now she is a product designer. Ash talks about the past and presents philosophically, and how she re-comprehend herself at a party. It’s so brave that she is willing to share the change process about her life in front of all the attends.

In the end, Ash invites everyone to do a meditation exercise. Trying to simulate the situation while facing a problem by making a fist and loosen of your hand and feel the difference between them.

It is a pity that I can’t describe my own deep feeling too clear, a brief conclusion will be: understand your mentation is helpful for you to make a decision.

1.5 Guillermo Rauch — Merging design and development

In my opinion, Rauch’s(CEO at▲ZEIT) sharing is the one having the most balance between engineering and design in these 8 topics. Taking Whatsapp(multi-platform messaging app) as an example, he explains how we can take care when we designing a distributed system: offline/online situation, Multi-user chatting, handling failed message…etc.

the most complex but also the most benefit one, if we can give him more time, it will be great!

1.6 Dara Oke — Going Global

If using the amount of network traffic to watch a youtube video will charge you 20% of your monthly salary, how do you plan which app you should use, what’s the message you should check every day?

DaraOke dedicated to companies in Africa, solving low internet penetration for the country in Africa, helping hire develop top employees which company needs, also hosting some community events to accelerate learning for everyone…

For example, participate in the launch of Uber light, aiming to provide transportation service for those with little amount of network traffic, or support M-Pesa (a mobile payment service) to promote in Africa, let people in Kenya, Tanzania, or other areas can to transfer money to each other through their mobile phone.

1.7 George Kedenburg III — Chasing Quality

Quality is the sweet spot where form, function, and feeling intersect.

a magical & gorgeous demo😎

George, a designer who works in Instagram. Recently, he and his team are working on SparkAR project. he sharing the method of how a designer can chase to the highest quality of the product, from the top-left corner (designer zone) to the center (quality)。

For the communication with developers, George explains learn coding should not be your daily work, but it will become a good weapon while you are having a meeting with the dev team. As you can come out with strong evidence to persuade the developers what you thought can really go to production.

after you reach an agreement with the dev team, don’t forget step2: try to move the point from top to the center. for this part, you should understand the needs of the product manager, what’s the highest priority for them, how’s the feature backlog scheduled…only when three departments come into the same page, the quality of the product will be ideal.

Overall, George didn’t mention too deep with the examples. I believe everyone can learn the mental method from him, and figure out a proper way to collaborate with the team.

as a designer, how do you communicate with developers? why everyone keeps discussing the benefits of learning coding? /right-hand side photo: https://twitter.com/andyyang/status/1161996981553762305/photo/1

1.8 Irene Pereyra — Getting Personal Projects Made

Irene 成立 Brooklyn-based design studio Anton & Irene 的雙人工作室,作品從平面、產品到網頁類型都有,之所以開始這個工作室是來自他的偶像 — Lance Wyman 的啟發:

The only people who retire are the ones who don’t like their jobs

在一次相遇時 Wyman 跟他說儘管他已經七十歲還是熬夜做設計趕稿給客戶 (等等…熬夜還是不太好的…) 畢竟這是他心之所向。Irene 因此決定開始成立工作室並在接案之餘同時做自己喜歡的設計作品。

從不知名20歲男孩幫忙做 NU:RO 手錶原型並有中國人負責大量製作且線上販售、到 IKEA 2030 one living room 網頁設計探討未來世界居住模式,Irene 認為各種形式的設計都能發生,只要跳脫習慣的領域、在有壓力的環境裡,就能持續探索新的設計題材。

60% 的客戶專案 / 40% 的自我探索,這是 Irene 找到平衡設計生活的方式 / photo from: https://twitter.com/NatalieMarleny/status/1162137819114102784

2. Community Show and Tell

We have workshops and 8 community show on the third day. Some of the speakers didn’t how to code before using Framer, some even transfer from an architect to a product designer, now I will go through each one of them.

2.1 Max Steitle , Product Designer @Zoom

One year after graduation, Max joined Zoom in America. He learned how to code with Framer and the help from the community. Now he publishes more than Five Plugin on FramerX store and article on Official blog:

這些套件還曾經上 Store Trend!

Max shares how to build a chat app prototype base on Firebase, and directly embed whole Zoom service into FramerX then do some customize UI on it. He also encourages designers don’t worry about the lack of knowledge about coding, we are now living in a more convenient world that resources are everywhere. Once you started, you can make a difference.

2.2 Rafael Conde — Head of Design @Netlify

A behind-the-scenes look at the major redesign

Rafa is a designer works in Netlify. this sharing goes through more than 100 slides in 10 minutes. It seems a lot, but it really shows the mind-set and process to deal with an interface that’s growing rapidly. Rafa gives out many possibilities method and non-working example when redesigning a complex menu:

this sharing is the one which I believe should go to the main session and spend 30 minutes to go through it clearly. unfortunately Rafa only got 6 minutes(which is pretty hurry…😅). Some example like: two-layers menu、multi-company information architecture are the design problem I also encounter in my works.

2.3 Lily Nguyen — Designer @Uber

Draw once, and go!

Lily’s show and tell is the most amazing one, at the same time, it may also solve the handoff problem. She builds a plugin that can export Figma design component into FramerX:

basically, After you import the components into FramerX, they’re all still tracking the latest version on the original Figma file, which means you can realtime update those components.(due to every component on Figma got their own unique url to track). It makes more flexibility, immediate communication between designprototypingimplement with code.
This is also a topic now I am sharing in Taiwan(written in Chinese):

2.4 Athanasia — Web and motion designer @Ogilvy

Athanasia is a motion graphic designer. she combines AfterEffect and FramerX to build a cute animation about enter the password on a sign-in form with input interaction design (a character will continue watching you while you’re typing text):

She also publishes FramerX resource on Youtube, which is one of the very early material that I’ve watched. I highly recommend people who want to try FramerX can start from here:

https://www.youtube.com/user/sla11/featured

2.5 Lichin Lin — Product Developer @MoBagel Inc.

👋 Hi, it’s me. I am one of a few attendees from Asia, and maybe the only non-native speaker. So, what makes me nervous is more about how to present but not the content itself.

My show and tell is to demo a camera prototype that can do image recognition built in FramerX with Tensorflow(a browser based Machine Learning engine release by Google): while traveling in other countries, you are able to quickly know the name of a thing when you have no idea about it. The original purpose of this prototype is to test the limits of FramerX, and it seems there’s no limitation about it, you can even build a production app as a showcase with FramerX in my opinion. 😅

2.6 Natalie Marleny — Application Engineer@LEGO

Natalie is a LEGO developer who attended every FramerX conference in Europe. She’s really a FramerX fan 😎。

Natalie shows how to use FramerX in the production React environment and compare it with the original examples provided by the official API document.

2.7 Henrique Gusso — Design Systems @TransferWise

Gusso is a designer who has been started to learn coding while Framer Classic released. He publishes Magic Move which was inspired by Mac’s Keynote animation kits, and allow designers to apply the different effect of animation and transition for a component.

2.8 Jacky Lee — Product Manager @Wahoofitness

Jacky is the last speaker of Show and Tell. He works in an America company, Wahoo, as a product designer remotely (he has already worked in new Zeland, America, Amsterdam✨). His company launch product like training equipment or Instrument that can track body data especially for professional cyclists.

Jacky’s slides are all made in FramerX, and the demo is about a prototype that receives data from training equipment through BlueTooth.He invited Framer staff to help him with the demo, while the staff is biking, the charting component will update the user’s body information in realtime🔥

3. Conclusion

This is my first time traveling in Europe🇪🇺, also the very first time to attend a conference as a speaker. It’s amazing how Framer team organize this 3-days event, a company with about 30 people can deliver out a high-quality software to the world, also host an event with such rich content: the location, foods (pizza, Focaccia, yogurt, beer, handsome popcorn vendor…etc), session agenda, workshop. Especially, for those 8 main sessions, we can see Loupe really wants to bring up multiple design field’s discussion.

Framer community is interesting, here, the designer and developer will have a deep discussion with each other. When I am chatting with some of them, they even call themselves a UI scientist or UX Engineer, instead of a normal designer. Also, this makes me more impress, the concept of Design Operation is quite fundamental things here, which is a little-discussion topic in Taiwan.

Most of the companies send their design director here to bring some new stuff back, that’s why they have the mindset of managing multiple designer’s works and choosing suitable tools for cross-department communication.

I’ll use one sentence to summarize the conference: FramerX is slowly Changing the concept of user interface design tool. Developer with design background can make a plugin for FramerX, also, a designer with engineers knowledge can come up with an idea and start implementing it. When the distance of these two fields come closer and closer, there will be more possibility could happen. In my opinion, Sketch and Figma need to watch out. (FramerWeb is now in Beta…what will happen next year?😎)。

last, thanks to all the people, from all over the world, I met in this 3-day event: Ray from China、Kevin from Evernote、Jieun from Korea、Jacky from New zealand、Lukas、Marciano、Monica、Hunter…

Design keep changing its shape, and presented to me with different ways, the only thing I should do is enjoy this journey.

so glad to meet Taiwanese in Amsterdam!
between each session, attendees have 15–25 minute to take a rest, talk, share
Framer Kid😎 / people meet new friends
closing party after the whole conf.

--

--

Lichin | 產品設計的錦囊妙計

Product Engineer based in Uk, prev Design Engineer @PicCollage | 📚 Creator @Designtips.today