theuxgate

[theuxgate]

My Unique Selling Points

[theuxgate]

Principle vs Flinto

Though prototyping has been an interest of mine since I started to get a sense of design, during my internship at TamTam, I felt the urge to master the art of prototyping. Believe me, explaining transitions or animations to others is quite hard, even when you have it al figured out inside your head. Fortunately prototyping tools such as Principle, Framer, Proto.io and Flinto offer a way out. Especially if you are not the kinda code person. These wizards truly can bring your designs to life.

So you’ve decided to give it a try. But wait, so many prototyping tools to choose from?

I encountered the same problem back then. Over the past few weeks I’ve been using Principle and Flinto for Mac. With this article I hope to help you figure out the right guy to do the job. It depends on what you are trying to achieve.

The interface

If you are familiar with Sketch, you will undoubtedly notice the similarities. The look and feel, artboards, layers and so on.

In Principle I immediately noticed the layer properties pane on the left side. Regardless of whether you have selected something, the width, height, angle, scale and other properties remain visible.

In Flinto the layer properties pane is only visible when an object is selected. Otherwise it shows document options. This works the same as in Sketch. From an User Experience point of view I like this way better, because the tools appear when you really need them.

Connected layers

“Principle looks at similarities in artboards by the layer names and then automatically adds movement or animation from the first state of the layer to the next”, says Abhinav (Chhikara, 2016). Because of this it is important that you name your layers carefully in order to prevent “janky” animations. Otherwise you might end up renaming layers. Of course, proper layer naming is a best practice and this quality may encourage you to stay organized. Yay!

In Flinto you have to do this manually. Thanks to the ‘connected layers feature’, it is relatively easy to connect layers between the start and end screen, in the transition designer. The advantage here is that you do not have to think about it beforehand. You remain fully in control.

Timeline

Experience with Adobe After Effects? Then timelines and keyframes will be familiar to you. You’re in luck! The Animate and drivers panel both show a timeline. Principle uses a timeline for animating objects between screens (the Animate panel) and a second timeline (the drivers panel). Drivers allow us to animate objects based on a changing property. For example, an element that scales down while it is being dragged. Unlike the Animate panel, properties live in artboards.

You will not be able to find any timelines in Flinto. “Just put stuff where you want it to go” and the magic will happen according to Flinto. If you have a complex animation in mind, you might be better off with Principle.

Behaviors vs Transitions

In Principle the built-in preview window is your new best friend. The preview window provides you with feedback for all the transitions and behaviors you create.

Flinto successfully separates its core features. This is great when working with a large number of screens. Flinto separates transitions and behaviors. Transitions in Flinto are animations that take you from one screen to another. You can create transitions with the transition designer (a separate view from the canvas).

With the behavior designer you can create animations that happen within one screen. Behaviors are applied to groups, so in order to design a behavior you need to select or make a group. The behavior designer allows for a great level of detail.

Advice

Compared to Principle, you can easily prototype full flows without getting messy. Flinto simply provides the screen management to handle a large number of screens.

If you have a crazy animation happening between two or three screens only, I recommend you to use Principle. For designing a micro-interaction for example. You will probably achieve the same end-result with both prototyping tools, but time is precious and so is patience. It just really depends on how detailed you want to get.

[theuxgate]

Materiality matters

During my visit to Foam, photography museum, I came across a serie named folded. Danish artist Adam Jeppesen chooses the material that he uses carefully. The materiality of his works mirrors the temporality and mobility of a traveling existence: you can fold it up and thus easy to carry. Though we do not have the freedom to choose from hundreds of different textures when we design an app, we should carefully think about the materials we use and its consequences.

Highlighted from ‘What design principles used in architecture, photography and product design can you use in an interactive product’

[theuxgate]

Find the lines

“Let your eyes lead you to the right spot”. The leading lines in Julius Shulman’s iconic photograph of Stahl House guide the viewer’s eye. The viewer will be lost without an underlying structure to your composition according to Caroll (Carroll, 2017, p.10). Direct where the eye will look in your design.

Highlighted from ‘What design principles used in architecture, photography and product design can you use in an interactive product’

Want to know more? Read this from Henry Caroll.

[theuxgate]

Design should make you feel something

In episode 7 of Netflix’s eight-part docuseries, “Abstract: The Art of Design”, it’s photographer Platon’s turn. For him “the camera is nothing more than a tool. Platon: “What’s important is the story, the message, the feeling, the connection. How do you make this reach people?” (Neville, 2017). This is definitely something we, designers, should ask ourselves. Design for emotion.

Highlighted from ‘What design principles used in architecture, photography and product design can you use in an interactive product’

Photo: ‘Sylvester Stallone’ by Platon

[theuxgate]

Exhibition of Gordon Parks @Foam Amsterdam

The power of telling stories. Parks his work really made an impression on me. If you find yourself in Amsterdam, I recommend you go there.

[theuxgate]

What design principles used in architecture, photography and product design can you use in an interactive product

..

Listen

The first thoughts come from architecture duo Weiss/Manfredi. “Listen carefully” they say, “because there is usually some other fabulous thing that you are not aware of, and can be used to make the design richer and stronger” (Costa Duran & R. Eguaras, 2009, p. 120). Sometimes we rush into things. At least I do. Maybe due to a deadline or because you think you’ve found the best solution to your problem. But we must not forget to be good listeners.

Letting go

“We are seduced into trying to design every condition”. Something I recognize. Instead Weiss/Manfredi hope to incorporate the unexpected affects, “such as the play of car lights on a metal surface to enrich and animate a design” (Costa Duran & R. Eguaras, 2009, p. 123). Though designing multiple states and screens is a necessity in digital design, it would be interesting to see if we can incorporate unexpected affects in an interactive product, without leaving to chance. Which brings us back to Dieter Rams and one of his ten principles for good design: “Good design is thorough down to the last detail”.

A step back

The multidisciplinary architecture studio Jakob + MacFarlane took a step back in one of their projects.“They chose to be secondary to the car, which they wanted to be seen as the object of primary presence” in a parking lot they designed (Costa Duran & R. Eguaras, 2009, p. 182). Sometimes it’s about taking a background position.

Long term thinking

Compared to architecture, digital design is still in its infancy. Many buildings that have existed for hundreds of years are still functional, beautiful buildings today, while most of the digital products we design have a life span of a few months or years (Sauble, 2015).

International firm Despond Architekten says: “Sustainability, being the agenda of the new millennium, means extending the life span of a product, such as a building, as long as possible” (Costa Duran & R. Eguaras, 2009, p. 185). We should also try to extend the life span of digital products. Though computing is a young discipline, Daniel Sauble has thought about a few practical things you can do to get started, including understanding the entire lifecycle of your products and creating an idealized vision of the future and advocate for it (Sauble, 2015).

Do not forget to use what is already in the space

With her own office GORA art&landscape landscape architect and artist Monika reminds us to not forget to use what is already in the space. The project Pat the Horse originate from the existing sculpture of the Swedish King Charles X, making it more accessible by enabling passers-by to interact with the sculpture at close range (Costa Duran & R. Eguaras, 2009, p. 189).

Form, then detail

“Focus on the larger form first and then on the details”. Studio Saunders Architecture believes that the composition of a piece of architecture is most powerful when it has a strong shape and clear identity (Costa Duran & R. Eguaras, 2009, p. 235). However, in the digital design the difference between good and bad experiences often comes down to how thoughtful we can design these small details (Babich, 2017). Details are just as important as the bigger picture. Instead of reducing the importance of details what Saunders architecture suggests, focus on the larger form first and make sure it works. Only after that you can go wild on details.

Respond to the environment

Architect Thomas Rau reminds us of the following fact: “Light can only be seen as color, and color exists through light” (Costa Duran & R. Eguaras, 2009, p. 266). Unlike print, we, designers of interactive products, have te luxury to respond to the context/environment a user is in. We should take advantage of this.

Materiality matters

During my visit to Foam, photography museum, I came across a serie named folded. Danish artist Adam Jeppesen chooses the material that he uses carefully. The materiality of his works mirrors the temporality and mobility of a traveling existence: you can fold it up and thus easy to carry. Though we do not have the freedom to choose from hundreds of different textures when we design an app, we should carefully think about the materials we use and its consequences.

The hidden value

In an article from Smashing Magazine Dave Schools highlights six product design principles, including Beauty Underneath. Schools claims that “when the user of a product unexpectedly discovers beauty underneath (the hidden value), they will want to continue using the product” (Schools, 2015, par. 4). He mentions the hidden power sockets underneath a table he once sat at. When he could not find power sockets anywhere near the table, he was happily surprised when someone told him that there was one in the table. This is an example of a “lagniappe” or if you are not familiar with the term: “an extra bonus of gift”. “A good product does exactly what it says, and then adds a “lagniappe” (Schools, 2015, par. 4).

Another example I encountered in the book “Adaptian strategies for interior architecture and design”. In metro stations moving from A to B is with no doubt the primary concern. As Brooker describes it: “Unexpected qualities, such as integrated sculpture and art work, are often not considered to be fundamental elements of a busy transport interchange” (Brooker, 2017, p. 94). In 2006, a number of new stations would be furnished with design work and art installations by both local and international designers and artists. No longer would the metro station be a space solely for transit. Karim Rashid designed the metro station to enable interaction and surprise with its passengers, stimulate thinking and reflection as they continue their journey (Brooker, 2017).

Design should make you feel something

In episode 7 of Netflix’s eight-part docuseries, “Abstract: The Art of Design”, it’s photographer Platon’s turn. For him “the camera is nothing more than a tool. Platon: “What’s important is the story, the message, the feeling, the connection. How do you make this reach people?” (Neville, 2017). This is definitely something we, designers, should ask ourselves. Design for emotion.

Find the lines

“Let your eyes lead you to the right spot”. The leading lines in Julius Shulman’s iconic photograph of Stahl House guide the viewer’s eye. The viewer will be lost without an underlying structure to your composition according to Garoll (Garroll, 2017, p.10). Direct where the eye will look in your design.

[theuxgate]

Studielink

Hall of shame: Studielink

Via Studielink you can enrol in a study programme at an institution of higher education where you wish to study. Unfortunately, the website is anything but friendly for its users. Not to mention the fact that you must log in continuously. Do something about it Studielink.

[theuxgate]

Three things caught my attention while watching ‘Design Disruptors’. 

“Don’t fall in love with your design”.

Dear designers. Love what you do; love design. But let’s be honest, most of our ideas will probably not ever see the light of day and we need to be okay with that.

“Design is about making solutions. Art is about making questions. With design you have to make sense”.

Duh. I both agree and disagree with this statement. Yes, design is about solving problems and thus has to make sense, but can design be art?

“Can you just walk up and use something? That’s the challenge of interaction design”.

This should be your ultimate goal. 

[theuxgate]

Company visit ‘BCG Digital Ventures’

Tokyo, San Francisco, London, Sydney, Berlin, you name it. BCG Digital Ventures has claimed a spot. On February 10th I had the pleasure to visit one of their offices in Berlin. This is where some of the magic happens.

Can I imagine working for BCG Digital Ventures? Definitely. They seem very professional. The size of the company might be a bit intimidating. Fully understandable. But admit it, the fact that the ever-growing global team operates internationally is quite attractive.

However, I am genuinely curious about the working environment. How closely together does the design team work and what does the collaboration with programmers for example look like? For me this is key, because in the end your dear collegeas make or break your job.

Don’t forget to check their website. 

[theuxgate]

Company visit ‘MediaMonks’

March 31

"The monks welcome us at their canteen. A place where the counter serves as a trophy case. And why not. Today’s guide is director User Experience Martin Kool”.

Those who have never heard of MediaMonks clearly did not pay attention to the industry he or she is going to work in. It seems that the monks, well-known for their award-winning work, are at the top of the food chain. The monkeys over which King Louie no longer rules sometimes even create work with the aim to win a price. Now that is luxury.

As a visual designer who wants to learn more about User Experience design I was surprised by the clear division between User Experience design and visual design. Yes, User Experience design is not the same, but combining these two is not entirely unknown.

Check out their amazing work here.

[theuxgate]

Intercity

Hall of shame: buttons to open/close an Intercity door

Inside you find two buttons next to each other: open and close. To be honest, I’ve never seen someone pushing the ‘close’ button. In this case, it only creates confusion. In addition, the button is on the side of the door. When the button is placed on the door itself, the relationship between those two is immediately clear. The metro does a better job at this.

[theuxgate]

Hall of fame: Soundcloud

What I like is that the fourth item in the tab bar is only there when you need it. Also, you can easily jump forwards and backwards in a song. When opening a second tab, while playing music in another, Soundcloud recognizes this and stops playing in the closed tab.

[theuxgate]

Love Notes Spotify

Hall of fame: Love Notes

Unfortunately the site is no longer live. The website lets users generate a Valentine’s Day playlist with a secret message inside. It’s basically a generator. The concept is great and small details such as ‘Don’t worry, we won’t send it yet” above a ‘next’ button give a sense of reliability, which is great. Expressing emotions is not that easy for everyone.

[theuxgate]

Hall of fame: Design Machines

The design of the article enhances the story and makes reading a lot more fun. One of a kind. 

[theuxgate]

Hall of fame: WeTransfer

WeTransfer successfully focuses on the primary goal: to transfer files via e-mail. And no login required (kudos for that). The colorful artwork in the background gives designers and others the opportunity to show off work. Although the interaction remains the same, it never gets boring.

The illustration, part of a series of prints called Freud’s Flowers, was created by Sarah Illenberger.

[theuxgate]

Pullout kitchen tap

Hall of fame: pullout kitchen tap

The pullout spout is handy for rinsing dirty plates and vegetables. Hard-to-reach spots are no longer a problem. Ie the new best friend of every housewife.