I am kinda cray on Framer(a design tool for APP or Web interaction) recently.
Here is one of my practice:
The intro and splash screen(welcome pages) of Ant Fortune(a financial platform of Alibaba.Co.Ltd.) app
AntFortune released the V1.3.2 iOS app, I found the welcome pages are funny and got some ideas about the splash screen as well as the animation. （U can experience the original one from the app)
some screenshots of the app
So I used the original graphic design as materials, adjusted the UI (also added something LOL), designed a set of brand new animation, updated the user interaction designs of this program, last but not least, translated the copy. (As u see at the beginning of this project)
Overview(Design Tool: Sketch)
Now LET'S ROCK! (er.... nothing to rock with awkward smile)
<Tips>
- The video below is made to show how it scrolls when swiping or scrolling the screen
- The GIF below is a lager/full version of the “overview” GIF at the top of this project which u might have noticed ↑↑↑.
- If u can't watch this GIF/video ↓ (or just feel uncomfortable with the low quality), plz →click here ← to experience the full prototype.
- The prototype, which is strongly recommended, U can swipe pages and click buttons if u want.
Swiping and Scrolling Video
swipe the pages or just skip them to log in
As u see, I made the elements in the pages scrollable(almost every single one, and it's a parallax scrolling). And I added some small animations during the scrolling thing. Besides, I designed a new log-in page added to the end of scrolling page.
In this version, we've got lotsa things been added.
(I knew they might not be added all at once, but I just wanted to have a shot. LOL)
- A splash screen with a exhausted man on.
- A set of vivid intro pages
1) U can swipe left/right anytime and experience the Parallax Scrolling of those elements within all 4 pages;
2) Or you can just click on "skip" to get to the Log-in Page straightly (if u do so, u cannot swipe back to watch the welcome pages anymore).
- An English version.
Now let's see the full version of it.
Full Version
All done with Framer. It costs me almost a week to write all those 800 lines of codes down and adjust the animation curves to better states.
---- ToDo List ----
A. I'd like to change this idea into a short film, an advanced one. But I am unable to finish that coding myself yet. Maybe I will do this with PR instead.
B. I will complete the user interation / animation design of the On Boarding Page that I didn't finish yet. Plus, I won't forget to code it out with Framer.
C. This set of design can be improved with Framer, so as the code design. I will learn more and make it better.
