...



Francesco Bertocci

Founder of Free&Willing / Design Advocate at Sketch

Profile image

Francesco Bertocci

Founder of Free&W...


10 Free Animation Libraries For The Web

#CSS #Animation #JS

Animation is one of the key trends for 2018, but you don't have to reinvent the wheel to add movement to your sites. We look at the best free animation









Profile image

Francesco Bertocci

Founder of Free&W...


The importance of motion for UX design

#UX #UIdesign #Motion #Animation

Motion in software is becoming an increasingly important aspect of modern day human-computer interaction. Partly due to the increasing computing capability of devices, designers can count on the…









Profile image

Francesco Bertocci

Founder of Free&W...


Animated SVG Alphabet Tutorial with Sketch and Keyshape

#Sketch #Keyshape #Animation #SVG #Typography

Wouldn’t it be nice to have a pre-animated A-Z SVG alphabet in a nice font like Roboto? Yes and yes and it’s coming soon. Even better it’s totally free. Yes I’m insane so what’s new? In this…









Profile image

Francesco Bertocci

Founder of Free&W...


Protowire: Prototyping in Sketch (30% off!)

#Sketch #Prototyping #Tools #Plugin #Deals

No coding or exporting to other applications:
Watch the Video

Rather than something you do at the end, Protowire aims to integrate interaction and animation into the design process without having to change your designs to suit the software.

  • Integrated into Sketch
    No need to export to a separate prototyping application - review the prototype instantly in Sketch or on a device.

  • UI Animations
    Just by moving layers around you can have overlays appear and disappear.

  • Screen Transitions
    Quickly create the flow of your app by linking up artboards from layers or hotspots.

  • Responsive Design
    Use Sketch’s resizing constraints and responsive artboard groups to make prototypes that work on any screen size.

To celebrate the launch there is 30% off the pro version by using coupon code 9146C9AF. 

Offer expires on Monday 26th February at 4pm Pacific Time.









Profile image

Francesco Bertocci

Founder of Free&W...


A Practical Guide to SVGs on the web

#SVG #Animation #Interaction #CSS #JS #HTML

This guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.









Profile image

Francesco Bertocci

Founder of Free&W...

Hello 2018!

#Sketch #Prototyping #Workshop #NYC

Hello everyone and happy new year!

I am very excited for what the new year will bring us! So much happened in 2017 in the UX/UI Design and Prototyping space!

Here are some of the things you should check out in case you missed them. A big one for me was the evolution of symbols in Sketch and design systems as well as collaboration among team members, and easier handoffs and if you work with React, lots of exciting things there too.

The last 6 months of 2017 I was pretty busy with a job out of town so I could not organize as many events but I am planning to start the year strong and we'll have events in NYC around:
– "Why it's good to prototype early and often" an event on the (crowded) prototyping space and. Good if you are new to the group/space. This an updated presentation I based on
Timeline by Anima App (just released!)
Fuse Tool's improved UI
Framer Studio
InVision Studio
Figma 2.0

Other big announcement was AdobeXD for Windows

Tons of products now have "Studio" in their name as they all rush to become the all-in-one tool to designers. 🚀

Sketch Workshops in January:
Basic if you are starting now
Advanced if you want to learn more advanced workflows or techniques.

Depending on availability, I organize custom workshop for teams. 

What would you like to learn or improve in 2018?

💌 Shoot me an email
and let me know! 😀

Ciao,
Francesco 









Profile image

Francesco Bertocci

Founder of Free&W...

Sketch Workshops for Teams

#Sketch #Workshop #NYC #Advanced

Custom Sketch Training for Teams
This Sketch app workshop is customizable for any team or group either new to Sketch or that is ready to master it and take collaboration workflows to the next level and be more productive.

Agenda example (approximately 5-6hrs over 1 or 2 days):
– Sketch’s UI: What's obvious and what's a little more hidden, navigating folder structures and artboards
– Styles: Text and Shapes (import/export to share with others)
– Symbols Overview: How to create them and when to use them.
– Symbols: Resizing and overriding.
– Manage and leverage plugins for an efficient workflow (Runner, Rename it, Anima Autolayout and more)
– Anima's AutoLayout: building responsive layouts, grids, tables and more.
– Naming conventions and exporting Zeplin (including exporting to SVG)
– Libraries: Using Symbols from shared libraries and UI kits.– Advanced Symbols: How to create nested symbols for building Design Pattern Libraries (DPL) using Atomic Design principles
– Practical tips for DPLs (lessons learned)
– Managing projects and symbol libraries with Abstract

Please note:
– Attendees should bring their laptop to follow along and pre-install Sketch 48 or higher.
– Each workshop is tailored to needs and pace of each group.
– Payment is due at the time of booking. You can reschedule anytime up to a week prior the event.

Costs:
Cost varies based on number of attendees, location, travel time and overall team commitment.

Want to request availability or have questions?









Profile image

Francesco Bertocci

Founder of Free&W...


Timeline for Sketch by Anima App

#Animation #Gif #CSS #AnimaApp #Sketch

Create beautiful timeline animations in Sketch









Profile image

Francesco Bertocci

Founder of Free&W...

Workshop: Mastering Sketch

#Sketch #Workshop #NYC #Advanced

This workshop is for for anyone that has already working experience with Sketch and would like to improve or master it.

You'll be learn about resizable Symbols, Plugins, Pattern Libraries and more.

Agenda (3hrs):
– Sketch’s UI: Shortcuts and plugins for navigating folder structures and organizing layers and artboards.
– Styles: Text and Shapes (import/export to share with others)
– Advanced Symbols: How to create nested symbols for creating Design Pattern Libraries (DPL) using Atomic Design principles
– Practical tips for DPLs (lessons learned)
– Managing projects and symbol libraries with Abstract or Kactus
– Naming conventions and exporting (including exporting to SVG)
– Plugins: Manage and leverage plugins for an efficient workflow (Runner, Rename it, Anima Autolayout, Launchpad and more)
– Anima's AutoLayout: building responsive layouts, grids, tables and more.

Time and Date:
– 5:00pm to 8:00pm
– Thursday January 18, 2018

Location:
Manhattan, NY. The exact location to be announced 3-4 days prior to the workshop.

Please note:
– Bring your laptop to follow along and pre-install Sketch 48 or higher (Free trial).
– Each workshop is tailored to needs and pace of the group.
– We require at minimum of 5 attendees, so spread the word! Max 10 students per event.
– Refunds: You can request a refund or save a spot for the following scheduled date. You can cancel anytime up to 48 our prior the event. 

Questions?









Profile image

Francesco Bertocci

Founder of Free&W...


Haiku: design meets production

#animation #UIDesign #webdesign

Design, meet production. Craft imaginative UI components that snap into any web app. Code optional.









Profile image

Francesco Bertocci

Founder of Free&W...


Lottie: Behind the scenes of our new open-source animation tool.

#UIDesign #tools #Animation #opensource







Profile image

Francesco Bertocci

Founder of Free&W...


Single Element CSS Spinners

#CSS #UX #UI

A collection of loading spinners animated with CSS









Profile image

Francesco Bertocci

Founder of Free&W...


Anima Launchpad: Introducing Automated A/B Testing

#Sketch #Plugin #AnimaApp #ABTesting

Landing pages are a special type of web pages that have a specific goal. Whether it’s subscriptions to a mailing list or gathering contact information for sales lead, they all focus on a single…









Profile image

Francesco Bertocci

Founder of Free&W...


Mastering Interaction Design through Craft, Productivity and Workflow

#UI #UX #IXD #Interaction #MotionDesign

As UI design gets more interactive, new skills and faces emerge to give us a lesson on how to get animations and movement right when creating delightful screens for rather little devices. To…









Profile image

Francesco Bertocci

Founder of Free&W...


Flow Beta: Animate from Sketch files and export Native Code

#Sketch #Flow #Motion #Animation #MobileDev

Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native…









Profile image

Francesco Bertocci

Founder of Free&W...


Sketchtool export artboard vs. auto layout plugin - Sketch Developers

#Sketch #Anima #Zeplin #Workaround

The plugin changes the way Sketch renders layers on runtime, and since SketchTool does not load plugins, it just renders layers how Sketch itself would do if AutoLayout wasn't installed.

There's a workaround in AutoLayout (find the 'Prepare for Export' menu option) that basically flattens the render and copies the content to a new document.









Profile image

Francesco Bertocci

Founder of Free&W...


InVision Studio | Screen Design. Redesigned. (Coming Jan 2018)

#InVision #UIDesign #Prototyping #Libraries #Collaboration

Unless you've been under a rock 🤣  you probably have already seen the video. Very exciting, especially the ability to design and do better prototyping within InVision. In InVision's words "The world’s most powerful screen design tool. Rapid prototyping, animation, built-in design systems, and collaboration—all in one place." Coming Jan 2018.









Profile image

Francesco Bertocci

Founder of Free&W...


Anima Launchpad: Responsive Website Template and Animate on Scroll

#Sketch #Animatio #Anima #Launchpad

We’ve introduced MyPortfolio.design last week, a free place for designers portfolio. To get you started faster, we’re releasing this freebie sample of a portfolio. First, If you haven’t tried it…









Profile image

Francesco Bertocci

Founder of Free&W...


Sketch and Autolayout: Text with icons and Symbol overrides

#Sketch #Autolayout #AnimaApp #Productivity #Free

Download Anima Autolayout and the file below. Enjoy!









Profile image

Francesco Bertocci

Founder of Free&W...


Animate.css

#Animation #CSS #Prototyping

The fastest way to get animations in your prototypes (and not only)... just add a tiny bit of CSS.  









Profile image

Francesco Bertocci

Founder of Free&W...


Framer: Design Guide importing from Sketch, Figma or Photoshop

#Framer #Sketch #Figma #Photoshop #Prototyping

Working in Sketch, Figma or Photoshop? Framer offers a fully integrated import workflow, so you can go back and forth as many times as you need. Currently, you can only import a design into Code to start animation.









Profile image

Francesco Bertocci

Founder of Free&W...


Atomic: Advanced user input and editable form elements

#Atomic #Prototyping

Atomic currently supports three types of form elements: text inputs, text areas and dropdown menus. Form elements let you capture input from users, and can be linked to variables in order to achieve form validation and other complex manipulation using script expressions. Form elements can also be animated, the same way other elements are animated.









Profile image

Francesco Bertocci

Founder of Free&W...


SVG Animation Creator - Animate and Export SVGs

#SVG #animation







Profile image

Francesco Bertocci

Founder of Free&W...


6 Animation Guidelines for UX Design

#animation #motion #interactiondesign #UX

Animation can be used to tweak the user’s perception of time, so use this in your favour. For the human brain, anything below 0.1 seconds will seem instantaneous and below 1 second will seem seamless. So, if you have a process that takes 6 seconds for instance, you can break it down in a few separate animations. This trick should make the process feel a lot faster and keep your user engaged.

You can also use animation to fake an instant action that will actually take bit longer in the background. This will make the app feel more responsive even though the process still takes longer than what the user sees.









Profile image

Francesco Bertocci

Founder of Free&W...


The Design Guide to Winning Developers' Hearts. Part 1: Use Lottie – Prolific Interactive

#Animation #mobile #plugins #AFX #handoff










Scan & Share
Feed