What can we do to improve the user experience of the first 15 minutes with Framer?
I'd also love to hear personal stories of how starting with Framer worked out for you (and what was difficult and didn't).
how about.. video tutorial(or movie clip storytelling like facebook paper app), tip of the day, or today's example ?
I'd like to hear what added value Framer brought to the work process for designers. As in: real life examples! :-)
I'll try to write up a few paragraphs, but on one foot: when I first tried it (I'm not a programmer), the thought of programming scared me away. At some point I really needed a solution and AE wasnt enough, and Pixate was not flexible or that intuitive and Origami was a nightmare so I tried Framer again And I took the plunge, but after just a few hours, it turns out it wasnt that scary... and I could create anything iwanted pretty quickly. I could make a loop that could randomly build a thread of fake messages of different lengths and media types (our product is a messaging app) and it was WAY quicker easier and more flexible than anything I had used. I started really liking it all. And now I will throw down a few lines of code in Framer to make what I want and I do not think twice.
i'd love some follow-along 'getting started' videos! kind of like how Adobe CC suite has them when you open their tool :D
Koen's first video tutorials got me up and running right away. To see someone explain what they are going to do, then what they are doing and finally what they've done in such continuity was impactful.
A bit OT but a forum (sort of ) would be a nice add / help to keep trace of all the resources shared here :)
I always loved that processing had an examples menu in the IDE that loads new projects to hack and learn from. How about making a modal view that shows the examples page but clicking one opens a new project with that example's code in studio. It could be triggered at any time but it'd be open the first time someone opens framer studio.
Really quick examples to choose from ie. "Learn How To Make A Pulsating Square In 5 Mins" that actually guide you through which elements of the instructions you have to use from the site as you do it (I'm not keen on watching lots of videos. I learn kinaesthetically, so watching someone do something sinks in about 20% and then I have to keep pausing it and playing it again where doing it step by step stays in forever). So in the app, it shows you what functions you need to use and how to apply them, and then it could ask you ok now make another shape next to it? I animated lots of shapes on my own first as I was trying to get used to it and then apply my new knowledge before making actual UI elements.
I second Abdou Ghr's codeacademy style tutorial idea.
I definitely think an end to end tutorial that touches on major concepts importing, events, scrolling, animations would be ideal. Building on that creating a new weekly tutorial that covers a widely asked about topic would save you guys a lot of intro question answering as well.
Exactly what Aaron Carámbula said. For anyone who's not familiar with processing, this what it looks like: http://cl.ly/1o000F111b3u
I think the first 15 minutes is directly related to the detail and specificity of the resources that are made available. While there might be a lot of "resources" out there, I don't believe they are well documented. The Examples page is great, but for someone who doesn't understand the code at all, those functions and values mean nothing. Despite how much a task it can be, I think better commented examples and projects would be helpful for users to understand the logic behind it. Progression is important, and it should be noted to the user that perfection takes practice. But if you setup them for opportunities to succeed in finishing an animation, or putting together a layer, or something, you're empowering them to pursue harder and more complex things.
As people mentioned, videos are a great resource also. I would treat them like 30 second snippets – teaching the basis and sending the user to the resources in order to implement them. Action steps could include having the user try "X/Y/Z" or showing "Here are some helpful links to help you better understand this function and why it works."
Another important aspect is building the muscle memory behind all the code. While the Examples are great, I even fall into the trap of copying + pasting on occasion because I know it works – but in the context of what I am actually trying to do, it sets me up for failure. It might not work in what I am wanting to use it for, and now I'm stuck with no idea why errors are occurring. Like someone said, having build-in snippets (like there already are) where you have to type in the code to match, you're helping the user build the muscle-memory they need will explaining to them what the code is actually doing.
I made note of it a bit earlier, but having a "More Links or Info" section in projects or with any the examples would be awesome. Say you want to implement a bezier-curve. Well, what is a bezier-curve actually? What do the values actually mean and what happens when you change them? What's the root of it all? There are a number of great resources all over that you could tie into the instruction to supplement the interaction that is presented. You don't necessarily have to reinvent the wheel. I think it would be a good practice as well (something I am trying to do too) to include other links in the projects you might "open-source" or whatever that you may have used to help you create this project, even it they are links that go right back to examples that are already on the site. I know for some of my projects, I poured through every resource possible on the internet to learn the math (man I wish I was better at math) – I wouldn't want someone to have to go back and find all that documentation again.
I think it would be important as well to encourage people to hop into this group and introduce themselves! Really push the community because, man, it's awesome! I can't personally thank you all enough and I want to ensure that other new people that are coming through feel as supported as well.
I think it's important that in the 15 min you get me to create something. Anything. It might be as simple as having a well thought-out default example that guides you through creating a rectangle and animating it in a few different ways by progressively uncommenting sections of the code and tweaking a value or two. The important thing is for me to start *playing* as soon as possible. Not watching a video. Not reading through documentation. Playing.
Re playing, snippets are an awesome learn-by-tweaking way to get into Framer and into designing with code in general. Maybe there's a way to highlight them because it's pretty empowering for a new user to see "wow, it's just that easy to lay out a grid" or something.
Perhaps more of the Treehouse style 5-8 min video along with creating what you watched in the video. I think you could start making something in the first 15 minutes that way.
Man, thanks for a great response everyone! Thinking more about this, I really like Tischo's suggestion to get folks to play asap. Getting some good ideas around this, stay tuned…
for the past year, I’ve been going through some of the most popular prototyping platforms, here are some takeaways in terms of getting started:
Pixate: What drew me in was the awesome videos where they recreated some of the most popular apps step by step in a matter of minutes. On top of this they also had these short and sweet videos that took you through basic concepts step by step. These made the first 15 mins very enjoyable, you’re proud that you really can point at something and say “I made this!”Lessons learned: Deconstruct popular designs, short videos
Quartz Composer: As you probably know, this is really hard to get started with for most people. I think the biggest reason why QC/Origami got so much tractions was the PR. However, it’s really cool that you immediately can open someone’s project and just start tweaking the values, without any kind of programming experience. Also, encapsulating complexity like you can in node-based solutions are nice, especially for the first 15 minutes. Lessons learned: Showcases/PR, open-and-tweak
Xcode: With the help of Meng To & his Design+Code ebook, I dove into Xcode/Storyboards, which is not something I would have done otherwise. The first 15 minutes didn’t get me very far, but the I trusted this guy and his promise that at the end of the course/book, I would be build the app he shows. Lessons learned: Lead evangelist, paved road to the end of the rainbow
Flinto/MarvelApp/InVision: I got into Flinto after seeing this fantastic video https://www.youtube.com/watch?v=V1nb0uoSa4ANow I don’t know how relevant this is compared to Framer, as they are at different sides of the power/complexity spectrum, but it just condenses what it’s all about in such a great way. When I opened the app it just delivered in those 15 minutes, beating Marvel/Invision IMHO. Lessons learned: SHORT videos, maybe the question should even be the first *5* minutes?
Noodl: I was pretty convinced that videos was THE best method to learn these things. But just like Joshua Tucker says, there is a lot of switching back and forth, forcing videos to be short and thus it's harder to create something really cool unless you do it in steps. However, Noodl does something really cool with their tutorials: Step by step instructions, inside the editor (attached picture). I built quite a complex layout/app in the first 15 minutes by just following the steps. Granted, there where 41 of them and the editor seemed scary at first (it's node-based, obviously), but in the end it worked.Lessons learned: Inline tutorials
Phew, that turned out to be a lot of words... Well, take what you want ;)
Awesome writeup Simon, I'm exploring inline tutorials :)
Reading through these comments again today, I'm blown away by how amazingly helpful this community is!