At Awkward we’re fortunate enough to have a diverse team with a lot of valuable skills. This brings plenty of ideas and visions with it, but to function as a team it’s important to get everyone on the same page. Don’t get me wrong, differences are great, but it’s necessary to use those visions to form the best solution possible. Prototyping in early stages helps accomplish that, but more importantly, it also saves valuable resources we can use to work on important things.
Last week we released Sketch Cloud, an exclusive design sharing feature for Sketch. To get the implementation spot-on we prototyped important parts of the product. This didn’t only help with the end-result, but also with our creative process by validating whether the result matched our expectations.
The goal of the artboard-detail view is to show the design in the best way possible. This meant we had to design a content-first interface for desktop and mobile. However, the content we present in the artboard detail view knows edge cases such as bright elements on a bright background.
To give you an example, we had the brilliant idea to make a dark/light mode switch, but we figured there had to be a better way after discussing the solution with the team. Taken into account that the functionality Sketch Cloud offers will grow over time, we decided to go for a “fullscreen” toggle. The fullscreen toggle removes the interface elements and darkens the entire interface.
We love high-fidelity prototypes that you can create using Framer or Principle. These tools help us create realistic experiences that mimic the desired user experience. These realistic prototypes let us think of our solution on macro-level, which helps us fill the gaps of our idea. Sometimes the gaps are too big, which means the solution isn’t right just yet.
As a product designer it’s important to look beyond the tip of the iceberg. The purpose of your solution is to reach a certain goal, metric or effect. To measure the effect it’s important to test your solution with users. Out of experience we know that people will give way more valuable feedback if the solution feels like a real product. We think that this is due to the translation people have to make when the solution is designed with very little detail.
It’s important to test with people from the right target audience. Don’t be afraid that they’ll crush your precious idea, because that’s mainly the purpose of testing. If your respondents don’t crush your idea, you’re on the right path to success. Test, validate, iterate.
The title of this paragraph says it all. Prototypes prevent that we have to write long documentation and / or have meetings for hours in order to work to the right end result together. One might say that it also takes hours to make a great Framer prototype, but the insights we gain from that process weigh more than the downsides when we don’t prototype at all.
Let’s face it. Communicating between different disciplines is very important if you want to collaborate together. It’s the lack of collaboration and clarity that makes developers fill in certain gaps, which sometimes differ from the initial idea. At Awkward we work as a team and prototypes are a great tool to connect designers with developers.
Long story short, prototypes are a great way to explore different solutions. The world of prototyping tools might look scary at first, but we promise that it’ll make you a better designer. They also fill the gap between the design and development process. There are plenty of resources available to learn using tools such as Framer. Here are some examples:
The guys at Framer host meetups from time to time. These events are really useful if you need help to get started, or if you want help finishing that complex prototype.