![]() One of Framer’s advantages is the ability to easily import Sketch files. All the styles and positioning should be done in the design mockups instead of in our prototype’s code. ‘Do as little positioning and styling in the prototype as possible’ is a rule of thumb we’ve learned on our prototyping adventures. Framer allows developers to play to their strengths (writing code) and has a lot of helpers to create functionality quickly.īelow we’ll offer some great resources to getting started with Framer, but for now we’re going to keep exploring the philosophy of prototyping.Framer has wonderful integration with Sketch, which is a design tool our friends in design use.There are many folks at Khan Academy with Framer expertise.Our team has chosen Framer to do our prototyping work for a few reasons: There is a large list of prototyping tools that serve different fidelity needs, ranging from piecing together screenshots (ex: Marvel) to writing stateful prototypes that can integrate with backends (ex: Framer). Instead of writing time-intensive, stable code and perfecting CSS styling on all browsers we want to utilize tools that help us create new features quickly with comparable levels of fidelity. Our goal with any prototyping is creating and editing new screens as quickly as possible because designs will be tweaked after every user interview. What tools do we use and why did we pick them?ĭuring the prototyping phase of a project the designs will regularly change thanks to all this great user feedback. This is a good thing, because we can take advantage of different tools to build faster. This means our prototypes can have a much lower coding standards quality bar than anything we create for, which is commonly referred to as our production environment. Each prototype is only seen by the participants of our user test groups and the prototype has a set lifespan since it’s retired after user testing. Lower fidelity user testing is done first and high fidelity prototypes are utilized later to provide a more immersive, less instructor guided interaction with the feature.Ī prototype’s main purpose is to enable our users to interact with new designs which gives us feedback to improve our designs. Both options are useful and can lead to valuable feedback. Flipping through a set of static design mockups would be less interactive and an example of a lower fidelity experience. Prototyping allows our product teams to create a more immersive, often called higher fidelity, product walkthrough experience. In this blog post, you and I will explore how Khan Academy uses prototypes in our user testing and hopefully it will be a great primer for you to start prototyping! Why do we prototype? Doing user testing as early as possible is useful because changing designs is significantly easier before the design is passed to the product team to implement and build. Watching our users interact and explore new features, which is often called user testing, helps us identify which designs & flows are non-intuitive and could use some improvement. We strive to make all of Khan Academy’s new features & experiences easy to understand and valuable to our users. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |