...



Francesco Bertocci

Sr. Product/UX/UI Designer

Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Form: Free wireframe kit from InVision

#UIKits #Sketch #Free #Wireframing

Form is a free wireframe kit for speeding up your design workflow. Layouts sized for mobile, desktop, and tablet and available in Sketch and PSD formats.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


SketchToPortfolio: Update your Portfolio directly from Sketch

#Sketch #Plugins #Productivity #Portfolios

Drag Sketch Artboards to your Free&Willing public feed or to a private collection of yours (portfolio, photogallery, moodboard...). Works with PNGs and JPGs as well.

Installation

Download, unzip and double click SketchToPortfolio.sketchplugin

Usage:

1) Launch the plugin: Plugins > SketchToPortfolio > Upload To Free&Willing
2) Log into your Free&Willing account (create a profile)
3) Drag Artboards from your Sketch file into the drop area. You can drag PNGs and JPGs from your desktop too.

Tips:

  • If you organize your images into a collection you have more control on the privacy as the images won't appear in your public feed but will be visible when sharing the collection's URL.
  • You can change the visibility of each image after upload too if you want
  • Adding tags to the artboard (or filename) will add tags to your post. For example the Artboard called "Mobile Home Screen #mobile #app #UIDesign" (same thing for PNGs or JPGs "Mobile Home Screen #mobile #app #UIDesign.png")

Feedback

Please tweet at @fbmore or shoot me an email at Francesco@FreeAndWilling.com









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Timeline: Animation Easing Functions Explained

#AnimaApp #Timeline #Animation #Sketch

Timeline is a tool for animation design, right inside Sketch. On this post we’ll explore easing functions, and the new easing controller. An easing function determines rate of change of a parameter…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Rails Gem: Easy drag & drop sorting for rails 4 and 5.

#Rails #UX #Gems

RailsSortable is a simple Rails gem that allows you to create a listing view with drag & drop sorting. The arranged order will be persisted in the table without any pain.













Profile image

Francesco Bertocci

Sr. Product/UX/UI...


JavaScript Load Image (Fix EXIF Orientation)

#JS #Productivity #Images

JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


The Long Awaited Sketch for Windows Comes From an Indie Team

#Sketch #Lunacy #UIDesign #Windows #Tools #Free

There’s a new software called Lunacy which is an extension of the Sketch platform for the billions of Windows users. Lunacy is a full-fledged editor which has following unique features: Design…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


How UX Hiring Managers Assess and Hire Candidates (Thu, Apr 5)

#Events #UX #NYC #Beginex

How UX Hiring Managers Assess and Hire Candidates with Lead UX from Idean
Thu, April 5, 6:30 PM – 9:00 PM

Are you looking to find a new UX role or break into the field? Do you know how hiring managers really look for, evaluate and select candidates and what is going on in their mind during the hiring process? It is quite important to understand that to be able to prepare and have an edge over many other candidates in a competitive job market. We invited a seasoned UX leader from Idean (a global design firm that works with the world's leading companies like IBM, Volkswagen and Samsung) to share those insights in a talk that will be followed by an interactive fireside chat.
Details and registration 👇









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch 49: Find and Replace colors everywhere! – Design&Prototype – Medium

#Sketch #Tutorials #Articles

– You were in the exploratory phase and now you want to clean things up 🗑(Or simply you haven’t paid too much attention to the colors you’ve been using – it happens to the best of us! 🤪) – You are…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

Workshop: Mastering Sketch

#Sketch #Workshops #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
– Upcoming Thursday (Date to be announced when we reach the quorum, spread the word and you both get $10 off!)
– Location: Either 135 Bowery or 26 Broadway or in SoHo.

Location:
Manhattan, NY. The exact location to be announced 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

Sr. Product/UX/UI...


The Evolution of Tools

#Airbnb #UIDesign #Articles #Figma







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Optical adjustments in components

#UDDesign #BestBractices

Every time you look at a computer interface, your brain is trying to fool you. No matter how hard you try to make things look aligned — the eye of the beholder will often disagree, due to a way we…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Download Deck: A free card-style UI kit

#Sketch #Photoshop #Free #UIKits

Deck is a free UI kit for building card UI designs and media sites. Templates sized for mobile, desktop, and tablet and available in Sketch and PSD formats.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Timeline for Sketch Is Now Available!💥

#Sketch #Plugins #AnimaApp #Animations #Gifs #MicroInteractions

Timeline empowers designers to craft beautiful animations and export them. The first release of Timeline allows exporting to GIF or MP4 files, but as we mentioned in our Secret Plan — we have much…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Mimicking the Medium Clap Animation with Sketch and Haiku

#Sketch #Haiku #Animations #MicroInteractions #React

Mastering CSS used to be a barrier for entry to designing complex motion animations. Haiku makes it approachable for beginners.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


10 cheat codes for designing User Interfaces

#Sketch #UIDesign #Tips

I’d probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch Workflow: 8 point Soft Grids

#Grids #UIDesign #Workflows #Articles

I wanted to share my Sketch workflow designing on an 8 point soft grid. If you are not familiar with this concept please read Bryn Jackson’s great article on 8pt Grids first. I have a fairly unique…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


SVG.js

#SVGs #JS #Animations

The lightweight library for manipulating and animating SVG. SVG.js has no dependencies and aims to be as small as possible.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


The Facilitator’s Handbook: 23 Design Sprint Tips

#DesignSprints #BestPractices #ProductDesign

Here are some things I think about when I facilitate a design sprint. Lots of what goes into facilitation I can’t explain—like anything, you just do it, gain experience, and get better over time. But…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Figma: A Fluid and Modular Design Approach to Typography with Components

#Figma #Typography #Components #AtomicDesign

One of the main concern for designers during the making of an adaptive or responsive UI is text management. The vast majority of the components built on a system are made using text elements. The…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

Workshop: Mastering Sketch (Early Bird - May 3rd)

#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:
– 4:30pm to 7:30pm
– May 3rd 2018 (spread the word and you both get $10 off!)

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

Sr. Product/UX/UI...


Freelance Time Tracking by Bonsai

#Bonsai #TimeTracking #Freelancing #Productivity

The best time tracker for freelancers! Integrated invoicing, global payments and advanced reporting. Available on iOS, OS X, and online.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Bringing AI to your Workflow without Code: Stamplay adds Algorithmia - Algorithmia Blog

#AI #Productivity #Stamplay







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Expo

#mobiledev #iOS #Android #OpenSource #JS #React

A free and open source toolchain built around React Native to help you build native iOS and Android apps using JavaScript and React.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Haiku: Design, meet production

#Haiku #Animation #UIDesign #iOS #Android #WebDev #MicroInteractions

Where designing is building. Design UI components, powered by motion. Works with any iOS, Android, or Web codebase.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


How we Built a Tool to Export React Prototypes from Sketch

#Sketch #React #Prototyping

Every year, right before the holidays, we dedicate a week of our time at Tictail to do something that is not part of our normal work. We call this the Demo Week, and it’s a great opportunity to…












Scan & Share
Feed