ZustPlank

ZustPlank? Ủa gì dợ?

Lùi thời gian lại khoảng 1 năm, lúc đó dịch Covid đang hoành hành tại Sài Gòn. Lệnh giãn cách được triều đình ban xuống, người người ở nhà, nhà nhà đóng cửa. Nhu cầu rèn luyện sức khỏe bị bóp lại trong một vài môn thể thao tại chỗ, và nói tới đây thì chắc bạn đã hiểu vì sao có cái showcase này rồi 😀

ZustPlank là ‘just plank’ với ‘z’ lấy từ zoideptrai, chỉ đơn giản là plank, và chỉ hỗ trợ mình tập plank mà thôi.

What is ZustPlank?

Okay, let’s look back a little bit at this time last year, when Covid-19 turned Saigon into a quiet city. Everyone stays at home during lockdown, then the need of exercise was limited in some inhouse workouts, including plank. Then you know why we have this show case 😀

ZustPlank is ‘just plank’ with the ‘z’ from zoiop, that’s all.

Sao lại làm ra cái này?

Phải nói trước một điều rằng thì là mọi chuyện diễn ra hoàn toàn xuất phát từ nhu cầu cá nhân của tui, rất đơn giản và tui nghĩ cũng có nhiều người có cùng nhu cầu như vậy:

Đếm thời gian mình plank mỗi lần
Biết được tổng giời gian mình đã plank được trong ngày
Theo dõi thời gian plank của mình qua nhiều ngày

Tóm lại nhu cầu chỉ là một cái đồng hồ đếm giờ và cộng giờ thôi. Dùng cái app đếm giờ của điện thoại cũng được, nhưng nó không có lưu theo ngày tháng để theo dõi. Việc này các app fitness người ta làm đầy rẫy, nhưng sâu thẳm trong tui lại tồn tại một rào cản tâm lý mang tên ‘ngại tải app’.

Why make this?

Firstly, i have to make clear that this project started from my personal demand, just some basical needs and i believe there are many people like me:

Count the plank duration for each time
Know the total plank duration within a day
Have a bird eye view of my plank process through weeks, months,…

To make a long story short, it is just about counting time. We can use the default timer app on our smartphone, but it cannot help us organize our records. There are many fitness apps supporting us to do this. However, i dont want to install any app, how weird i am.

App app app, quá trời app hà

Vậy nên tui code ra một trang web mini, mỗi lần tập chỉ cần mở trình duyệt điện thoại lên, vào bookmark link và bấm giờ, kết quả plank sẽ lưu vào bộ nhớ Local storage của app trình duyệt. Gọn và nhẹ, khỏi tải app, mắc mệt.

Then i coded myself a mini web utility. Everytime i do plank, all i need to do is open the browser app, enter the site and press the button. Plank records are stored in browser’s local storage. And i dont have to waste my phone memory for an app.

Thiết kế ✨✨✨

Bỏ hết wireframes, userflow các thứ qua một bên đi thôi, cái mini web này về cơ bản chỉ có 4 màn hình với các chức năng sau:

Plank với timer: đồng hồ đếm ngược, bạn phải đặt sẵn thời gian mình sẽ plank và cố gắng hoàn thành nó.
Plank tự do: đồng hồ đếm xuôi, cố gắng giữ tư thế plank lâu nhất có thể
Xem lại thành tích plank trong ngày, theo dõi các ngày trước, xóa các plank record lỗi.
Chức năng phụ: đổi tông màu, chọn ngôn ngữ.

The design ✨✨✨

No wireframes, no userflow chart, no bla-bla-bla, this mini web has only 4 screens, with some features below:

Plank with timer: the clock counts down, you need to set your plank target and try to finish that.
Free plank: the clock counts up from zero, you will try to keep plank position as long as possible.
Review plank records in current day and previous days, delete records.
Side features: change color scheme, switch language.

Con vịt

Con vịt này ra đời ở nửa sau project do tui thấy giao diện có vẻ hơi đơn điệu, cần một chút gì đó sinh động và vui mắt. Khứa vịt này sẽ giả bộ làm PT ở phòng gym tại nhà của bạn, còn nó làm gì thì bạn xem tiếp sẽ rõ nhe hehe

The Duck

This duck was born on the half way of project, when i felt the UI is quite simple and boring. It is your personal trainer, yelling in your face when you do plank, haha

Animation và coding ⌨️

Như thường lệ và như bao project khác, tui rất khoái làm animation và micro interaction. Tui bỏ ra rất nhiều thời gian trong khâu coding, còng lưng vất vả vuốt từng cái chuyển động cho nó mượt mà nhất có thể.

Tui đã xem rất nhiều các concept về UI interaction nhưng thật sự chưa gặp được một sản phẩm ấn tượng nào ngoài thực tế. Cũng là một người biết code nên tui hiểu rằng có nhiều giới hạn để những sản phẩm như vậy không phổ biến. Một trong số đó là giới hạn về cấu hình phần cứng, nếu chạy trên một cái điện thoại cũ mà tham hiệu ứng tham animation thì chỉ có giật lag mà thôi, lợi bất cập hại!

Vậy nên tui rất mong muốn được làm một sản phẩm có tương tác và trải nghiệm tốt, mang đến sự dễ chịu khi sử dụng, kể cả khi nó kiểu rất vớ vẩn (như cái tui đang làm đây, haha)

Animation and coding

As usual and like many other projects, i care about animations and micro interactions. Most of my coding time was spent for animating thing.

I have viewed many UI interaction concepts, but rarely seen an impressive product in real life. Being a coding guy, i understand the limits, why those ideal products are not many in the market. One of the reasons is the hardware limitation, an app with too much animation can be extremely laggy if it is run on a weak smartphone.

So i really want to made an interactive product with good user experience, giving users pleasure feeling while using it even if it is a nonsense stuff, lol

Kể ra thì cũng có hơi khoe mẽ, nhưng tui muốn bạn để ý tới những chi tiết animation nhỏ nhỏ như mấy cái vạch thời gian 2 bên rìa của slider chọn giờ plank, vạch đồng hồ xuất hiện trên màn hình khi bắt đầu plank, tuần tự xuất hiện của các yếu tố trên màn hình plank…

Không phải tụi nó tự nhiên mà có đâu, phải code mới ra đó, tui code đó 🥺🥺🥺
Rồi rồi oke, tui nhận là mình đang khoe, được chưa 🥹

Để tui khoe kĩ hơn, sâu hơn vào chi tiết nha

You might think i’m showing off, but let’s have a look on some animations of two edges of the sliding time picker, or the appearance of the minute marker on a clock and the appear order of elements when starting plank…

They’re all coded, by me 🥺🥺🥺
Okay i admit it, i’m showing off 🥹

But let me show it a little more detail

Plank với timer

Đây là màn hình chức năng chính của web, xứng đáng được hưởng hồng ân đặc sủng. Tui làm hẳn một cái mặt đồng hồ có animation, mỗi giây trôi qua nó sẽ nhích một giây trên mặt đồng hồ. Mà bạn biết rồi đó, một giây plank nó dài như nào, haha.

Đi cùng với đó là một vài chi tiết tui học tập từ các app fitness: đếm ngược 3 giây trước khi bắt đầu plank, có nút ‘dừng’ để kết thúc plank nếu bạn quá đuối, chạm màn hình để tạm ngưng phòng khi bạn bỗng dưng ngứa đít…

Plank with timer

This is the core function of the web, and it deserves all the best things. I add animation to the clock face, every second pass, it moves 1 step in counter clockwise direction, repeat until the plank ends. A second during plank last an hour, you can try it and you will feel it, hahaa

Along with that are some details i learned from fitness apps, such as adding 3 seconds countdown before starting plank, placing a ‘stop’ button in case you cannot stand anymore, allowing pausing by tapping on the screen…

Plank tự do

Đồng hồ plank tự do đếm xuôi từ 00:00, vậy nên animation sẽ phải khác với đồng hồ đếm ngược, tui chỉ làm nhẹ nhàng giản đơn như này thôi. Các chức năng còn lại sẽ tương tự như plank với timer.

Free plank

The free plank clock counts up from zero, so the animation should be different from the counting down, i just make it a simple animation. The other features stay the same.

Theo dõi thành tích

Vừa kết thúc plank là bạn sẽ được chuyển đến screen thành tích bằng một pha transition mướt mượt. Ở đây bạn có thể xem lại thời lượng từng lượt plank trong ngày và xóa các record lỗi. Ngoài ra tui còn làm một cái chart đơn giản để so sánh thời lượng plank trong tuần, bạn có thể xem lại lịch sử cố gắng của bản thân trong những ngày trước và trước trước nữa.

Tất cả đều có animation, chỉ cần điện thoại của bạn không quá cũ thì tui đảm bảo bạn sẽ được sướng con mắt khi xài 🥴

Plank records screen

Right after the plank finishes, you will be directed to the plank records screen by a smooth transition. At this screen, you can review all your plank records in a day and delete the accidental records. Moreover, i created a simple bar chart to display your plank time in a week, you can alse see the previous weeks by pressing the arrow buttons.

Every action you take come with an animation, i can ensure they’re all smooth, as long as your phone is faster than a snail 🥴

Chốt hạ

Vâng, lại là một side project khác, lại là làm cho vui, tui biết. Khi đi tham khảo về các app fitness, tui thấy người ta làm rất nhiều về các hướng dẫn tư thế plank, challenge 30 days,… Một nửa trong tui cũng muốn cho ra một sản phẩm hoàn thiện như vậy, nửa còn lại chống cằm than thở tốn thời gian. Cho nên ZustPlank chỉ đơn giản là plank, nhưng ở mức độ tương tác và hoàn thiện tốt nhất trong khả năng tui có thể.

Tui coi đây là một thử thách cho bản thân, không làm lại những gì người khác làm, tui làm nó theo một cách khác, cố gắng nâng tầm trải nghiệm và làm cho nó tốt hơn 😁

Conclusion

Yeah, another side project, again a project for fun, i know. When study other fitness apps, i see people focus on different plank poses, 30 days plank challenge… A half of me wants to make a comprehensive product like that, and the other half says i dont need to spend too much time on it. So… in the end, ZustPlank is just plank, but at a higher interactive level and was built with my highest effort.

I challenged myself. I dont reinvent the wheel, i try to upgrade it, by adding tire, make it a better version 😁

Vài điều học được

Mỗi project đi qua luôn có vài điều đọng lại, thật đấy mà. Sau nhiều nỗ lực, tui nhận ra có một vài điều không phải muốn và cứ cố là được 😂

Vạn vật đều chỉ là tương đối.
Thật ra cái đồng hồ trong app cũng có sai lệch, tui đã thử nhiều hàm đếm giờ trong javascript như setTimeout() hoặc setInterval()… nhưng không thể ra được một cái đồng hồ đếm được chính xác như app timer mặc định của điện thoại (tui cũng hoài nghi về tính chính xác của app đó lắm, nhưng tạm thời tui đang lấy nó làm chuẩn). Kết quả tốt nhất tui có thể làm ra là sai lệch trong khoảng 5 giây với tối đa 5 phút plank, sai số này phụ thuộc vào cấu hình điện thoại.

Blur + Animation là hiệu ứng xa xỉ với điện thoại.
Tui đã cố gắng làm thêm hiệu ứng animated background theo dạng mesh gradient để đăng độ vipro cho màn hình đồng hồ plank. Cách làm của tui là dùng 2 shape tròn, cho nó di chuyển theo vòng lặp và áp blur filter. Thứ tui nhận được là giật lag và sự mất niềm tin đối với mấy cái UI interactive concept trên dribbble, những thứ rực rỡ ảo lòi mà họ render từ after effects ra 😩

Some takeaways

I always gain something after a project, for sure! This time i learned there are something i cannot touch no matter how hard i try 😂

Everything is relative.
Actually, the clock counting has deviation. I tried some javascript timing function like setTimeout() or setInterval(), but it cannot be absolutely accurate, compared to the default timer app on smartphones, at least (i choose it as a standard of time counting). The smallest deviation i can get is 5 seconds on 5 minutes of plank, and it depends on the smartphone.

Blur and Animation are luxury effefts for mobile devices.
I tried to add the animated gradient mesh background to make the counting screen more fancy. The simplest method is using two moving circle shapes and apply the blur filter on them. And guess what i got, laggy and lagggggyyyy. It gives me trust issue on some shiny dribbble shots which were rendered by after effects. I wonder if they can apply that on real product or not 😩

Okay, sau cùng là phần trải nghiệm. Nếu đang nằm trên giường, mời bạn xuống đất, kỷ lục của tui là tròn 4 phút plank 😤😤

👇👇👇

Okay, it’s time for challenging. If you’re lying on bed, let’s get out of it. My best plank time is 04:00 😤😤

👇👇👇

Bạn có thể tương tác với cái điện thoại iphone 13 vippro bên trên, nhưng lỡ đâu điện thoại của bạn hơi cũ thì có thể mở một tab mới, link tui để ở bên dưới. Vì trang showcase này đã quá nặng với 18MB video rồi hehehihi 😁😁

https://zoiop.com/plank/

You can experience ZustPlank on the virtual phone above, in case you have a slow phone, let’s open the link below on the new tab. The current tab is heavy enough with 18MB of video, lol 😁😁