How to animate a fashion lookbook website with Sketch and Principle - Web Design tutorial
8731 次观看 · 2018-02-12
UI 设计
This time, I'm sharing with you my process to animate every Web Design prototype you've seen on my Dribbble.
Download source file: https://go.bont.academy/freebies-collection-for-digital-designers
This is my process overview:
1) Design each state of your interface in Sketch.
2) Import to Principle.
3) Link layers by name.
4) Apply an interaction to an element.
5) Change properties of elements that animate.
6) Adjust the easings.
7) Design the choreography.
8) Record the interaction.
9) Create GIF.
10) Upload to Dribbble.
___________________________________________
❇️ Apply to my Web Design Master Class
If you want to be able to focus and excel in Web Design, and to learn how to manage the business side of your career, so that you can have more freedom to choose where, when and who to work with, have more creative freedom, and get paid what you are worth, then apply to the form below and I'll set up a call with you to see if you are a fit:
https://go.bont.academy/web-design-master-class-application-form
___________________________________________
Behance:
https://behance.net/hellobont
Instagram:
https://instagram.com/hellobont
Dribbble:
https://dribbble.com/hellobont
Download source file: https://go.bont.academy/freebies-collection-for-digital-designers
This is my process overview:
1) Design each state of your interface in Sketch.
2) Import to Principle.
3) Link layers by name.
4) Apply an interaction to an element.
5) Change properties of elements that animate.
6) Adjust the easings.
7) Design the choreography.
8) Record the interaction.
9) Create GIF.
10) Upload to Dribbble.
___________________________________________
❇️ Apply to my Web Design Master Class
If you want to be able to focus and excel in Web Design, and to learn how to manage the business side of your career, so that you can have more freedom to choose where, when and who to work with, have more creative freedom, and get paid what you are worth, then apply to the form below and I'll set up a call with you to see if you are a fit:
https://go.bont.academy/web-design-master-class-application-form
___________________________________________
Behance:
https://behance.net/hellobont
Instagram:
https://instagram.com/hellobont
Dribbble:
https://dribbble.com/hellobont