Did I Just Learn Sketch and Principle In a Day?
Things were actually making sense after having a quick break down and being thrown into the fire to learn. I was actually, dare I say it...
It was a Wednesday afternoon as I made my way to Full Sail University. In my head I went over the email the coordinator of this Dribbble Orlando meetup, Daissy Linares, sent. It was detailed, beyond informative, and I wanted to ensure I put to memory what this person took time out to write. I switched between my Google Maps navigation and the invite page double-checking I had the correct address. Finally, I made it.
Only it turned out I was in the wrong building. The school’s generic address had been used as a location. You know, the one that goes to the welcome building or admissions, although the location “Treehouse” was stated. But this situation is a practice I’m familiar with, having helped many a visitors at my alma mater UCF. I mentally went over a line from the email explaining to arrive early making time for travel and check in. I breathed a sigh of relief as I grabbed the map handed to me by the front desk clerk. This was the reason why I left work promptly. With some directions I found my way to Treehouse building 4E.
I arrived at 5:40pm with 20 minutes to spare for this 6 o’clock event. I signed in and obtained the Wi-Fi password. As I waited for the doors to officially open, I used the down time to download the two programs that would be used tonight. Yes, the email did specify to download Sketch App and Principle App prior to the event and yes, I was counting this moment as enough time prior to the event.
Entering the soon to be work area I had to admire the carefully arranged goodies on the table. As I took my place, I grabbed a packet of my weakness, STICKERS.
Once the presenter Paul Hershey grabbed the stage it was time. First question, “Who here are product designers or aspiring?” Hands flung up as I looked around. “Any illustrators?” More hands proceeded to the air. Huh? Was I the few web designers present, if any? Well it wouldn’t be a first. The topic was “UI Design and Fast Prototyping” something I believe all roles touching design should care about and understand.
“Who here has used Sketch or Principle…okay looks like the majority,” I heard as I poked my head back up from my phone with an expression that screamed “Never, I just installed them today!”
Well then, guess we’ll dive in. The speaker explained he’d be going over some capabilities and functionalities of Sketch and Principle as we’d build four pieces, animate them, and export the final product within the event’s time limit. So he would be moving rather quickly. Pretty much the reason behind why it was advantageous to have some experience with the programs. He started off by going through the tools of Principle App and then begun creating. So far so good, for the most part I was able to follow. I guess my prior use of Adobe programs helped.
He taught us the shortcuts and how much sense they made compared to Illustrator. R for rectangle, O for oval, L for line and T for text, what brilliance. Things were moving rather quickly. I manage to follow the build but couldn’t catch the animation part.
My friend came in on the second build, then opened her laptop and proceeded to catch up matching the instructors projected screen. “You’ve used Sketch before,” I whispered in her direction. “Of course,” she responded as she continued to tap at her keyboard. Huh, I thought replaying her invite to this event in my head. I have got to pay closer attention to what she says.
I continued following the instructor, actually finding my speed increase compared to when I first came in. The good thing about Sketch and Principle is their similarity in layout and tools. He instructed on how to use one so adjusting to the other was practical, places in the menu area changed, but nothing horrifying. Create a rectangle, press R, drag, change size and positions. Duplicate the rectangle and drag the copies down in a stack order with a difference of opacity. Just what were we making? Oh the slide effect like that of Tinder.
Luckily, I now had someone to tap when I missed a step. At some point I decided to sit back and watch the instructor go. He taught how to create a symbol, importing between apps, exporting for Dribbble, exporting gifs or video, adding placeholder images and text all in one go with ease. No more wasted time searching and placing filler text and images. He showed how Sketch and Principle allowed for non-destructive merges, a feature I appreciated.
At the end I had three projects on Principle and one on Sketch. The night didn’t end there, we were encouraged to take our designs further or start something new while the presenter would be available for questions.
Afterwards my friend and I slipped out and went for dinner at Bento. There, we verbally reviewed what we learned, had our freak outs about the future and all the things we’d have to learn as designers and what’s expected. We discussed going further with Sketch and keeping the momentum going. We were pumped and didn’t want to let go of this moment of motivation and feeling of inspiration.
Next location change, we’re in my apartment room. Pulling through resources for tutorials on Sketch, I finally landed on one I liked on Tuts+. I read through the tutorial following the instructions. Things were actually making sense after having a quick break down and being thrown into the fire to learn. I was actually, dare I say it, getting comfortable with this program.
Over to my friend she contemplated on what to build. I suggested thinking of an action and building it out, referencing ‘keep it simple stupid’. I offered the idea of submitting a form, making note not to build the actual form. Adding too much may distract from the end goal.
We finally decided on mocking up the act of submitting the form and the feedback received when the action took place successfully. I suggested a cute animation of a check mark with sparkles, as these small cute animations can bring warmth and reassurance. An example of this is Twitter’s like button, it demonstrates the action took place, it’s fun to click, and has a cute and short animation. This can also be seen on MailChimp when sending or scheduling a campaign, you receive a high five on screen.
(Receive monthly Web Design & Sketch App tips direct to your inbox.)
Before taking off we took a picture of how far we got.
Compare this to my first screen photo. I wish I could share my feelings from that moment of accomplishing something and have others feel the wave of pride and peace that brushed through me. Whether it maybe seen as minuscule to others, learning such a great tool in such a short period of time brought on mixed feelings of excitement and fear.
Resulting from that day is the ongoing learning I’m doing now as I find and complete tutorials starting from the basics to what I hope will be great strides of advancement.
If you’re interested in Sketch or Principle here are some sites and tutorials I’m using at this moment.
Resources:
Download Sketch App (Trial) https://www.sketchapp.com/
Download Principle App (Trial) http://principleformac.com/
http://www.sketchapp.com/learn/
https://leveluptutorials.com/tutorials/sketch-app-tutorials
Animate for Sketch App http://animatemate.com/
Connect:
Katherine Delorme on Dribbble
Receive monthly Web Design & Sketch App tips.
@Katdelorme Twitter Account
@DribbbleOrlando Twitter account
If you enjoyed this piece then I think you’ll like the monthly email I send with web design knowledge and goodies for all levels. You can sign up to receive this once a month email newsletter.
