Reverse Engineering the InVision Interface
You have to take things apart to really understand why they work
I visit dribbble a couple times a week. It is extremely important for me to see how other designers approach problems, and how their designs evolve. I typically spend a minute or two on each design trying to soak up everything I can. While this is helpful for getting an overview and staying current, there is no way I can possibly appreciate every detail by doing this. When I see a design that I really respond to, positively or negatively, I have found it helpful to reverse engineer the design to better understand how the elements work together.
When I do these reverse engineering exercises I recreate everything from scratch, including icons. It is always a helpful exercise for me, and also a great way to keep my illustrator skills sharp. The majority of my day is spent in sketch, but anytime I have to do anything vector related I prefer to do it in illustrator. The InVision interface is one of the cleanest and easiest to use products I touch on a daily basis. I re-created all of the assets other than the InVision logo as part of this exercise. I’ll walk through some of my findings below, but if you just want to see the process in action, there’s a video at the bottom of this post.
I began by reconstructing the icons, and the first thing I noticed was they were using two different strokes on their icons which was interesting to me. I have never used this technique before and probably would not have noticed had I not redesigned the icons in Illustrator.
InVision also uses two different types of icon design. In addition to the line style icons with the two stroke widths above, there are smaller icons that use a fill instead of a stroke which makes sense with smaller icons, it can be difficult to make out line icons at a smaller size. This also helped me realize why the share icon feels out of place when I use the product: they chose to display it as a line icon, but all the other icons in that group have a fill.
Another design element I find interesting is InVision’s use of uppercase and lowercase text. Their main navigation is uppercase with a font-size of 13px.
The secondary navigation is lowercase with the same font-size of 13px. Most designs place secondary navigation below the main navigation but InVision does a great job of differentiating the two and muting the secondary navigation with the simple use of a simple text-transform.
Finally, I really like the way InVision uses colour. Their brand colour (#ff3366) is used sparingly: the add a screen CTA on the “SCREENS” page and the “SCREENS” link are the only places I’ve found it on the page (and it only seems to appear on one background colour, #1f2532 ).
The links and hover states are using a blue colour #1e81d6. I like the fact that they decided to use a colour that was different from their brand colour. This adds a bit more colour to the page and it makes it easier to scan. I feel like it would take a bit longer to scan had they made everything #ff3366.
I had a lot of fun with this exercise and would highly recommend it especially if you are detail oriented. It forces you to figure out why the UX and design team made the decisions they made. For those who want to see the process in action I’ve put together a time-lapse video below of the entire exercise.
Jose Bento
Product Designer at Hubba
@blamebento
