Xin chào! Chúng tôi là Nhà phát triển Christian MacMillan và Nhà thiết kế Xavier Cussó. Hai chúng tôi gặp nhau ở Barcelona khi làm việc cho cùng một cửa hàng thiết kế, và có cơ hội tìm hiểu nhau khi làm việc cùng nhau trong một vài dự án kỹ thuật số. Cả hai nhận ra rằng mình cần nhiều kế hoạch hơn để thử nghiệm những ý tưởng mới, để thoát khỏi công việc của khách hàng và quan trọng hơn là có được niềm vui. Đây chính là thời điểm:
Studio Burundanga ra đời
Thietkewebwp.vn – Đơn vị thiết kế Website chuyên nghiệp uy tín miền Bắc
Dự án đầu tiên của chúng tôi
Portfolio của Xavier Cussó bắt đầu vào mùa hè năm 2016. Anh ấy cần một portfolio mới sáng bóng để nổi bật so với đối thủ (Barcelona có một trong những tỷ lệ cao nhất của nhà thiết kế trên mỗi mét vuông …) Portfolio mới sẽ chứa một số dự án yêu thích và thành công nhất của anh ấy từ 10 năm làm việc chuyên nghiệp cho thị trường toàn cầu.
Đây sẽ là cột mốc quan trọng để giúp anh ấy bắt đầu như một nhà thiết kế freelancer và là một cơ hội phù hợp để nhận công việc đầu tiên dưới cái tên Burundanga Studio.
Giai đoạn thiết kế (Xavi)
Tất cả khởi nguồn từ trang chủ. Tôi đã thu thập ý tưởng trong một thời gian dài và đã chắc chắn về cách tôi muốn định hình nó ra sao. Tôi muốn nó táo bạo và đầy màu sắc. Với một trình tải trước, có thương hiệu, kiểu chữ lớn cho các tiêu đề dự án, một split-screen (màn ảnh có hai cảnh khác nhau chắp nối cùng hiện lên đồng thời) được tạo hiệu ứng để chuyển giữa các ảnh bìa dự án và sử dụng các hero image gộp thành khung nhìn (viewport) đầy đủ khi chuyển tiếp liền mạch đến trang dự án. Vì vậy, giai đoạn thiết kế là khá đơn giản. Bắt đầu với chiếc máy tính để bàn, chủ yếu sử dụng Photoshop và Illustrator, trong đầu tôi lúc nào cũng mường tượng đến những hiệu ứng animation và cách nó tích hợp với các thiết bị khác dựa trên grid và layout thích ứng.
Giai đoạn thứ hai là tạo hiệu ứng cho giao diện UI (After Effects) và tìm ra các hiệu ứng chuyển tiếp phù hợp nhất như một nguồn bổ trợ tham khảo vững chắc cho Front-end. Tôi làm điều đó mỗi khi có cơ hội. Bạn có thể tham khảo tư liệu hoạt họa dưới đây:
Cuối cùng, tôi đã bàn giao các tài liệu liên quan cho Christian để anh ấy bắt đầu thực hiện công trình này, trong khi tôi hoàn thành mảng thiết kế cho thiết bị di động và những phần khác của trang web.
Giai đoạn phát triển (Christian)
Nếu bạn cũng giống như tôi, không phải người quen đọc những bài viết dài dòng, bạn có thể tham khảo boilerplate (bản tóm tắt) mà tôi sử dụng cho các dự án của mình và danh sách tất cả các thư viện liên quan. Trong bản tóm tắt, bạn sẽ tìm thấy những điều cơ bản của dự án này. Bạn có thể thoải mái sử dụng cho bất kỳ điều gì mình muốn. Nếu bạn cho rằng nó hơi lỗi thời, có lẽ tôi sẽ đồng ý. Tôi hoàn toàn cởi mở về các đề xuất, cải tiến và / hoặc tiện ích bổ sung mới.
Ngoài những gì bên trong bản tóm tắt, chúng tôi sử dụng:
Quá trình triển khai
Như Xavi đã nói, chúng tôi đã bắt đầu dự án portfolio hơn một năm rưỡi trước. Lúc đó mới bắt đầu sử dụng Vue js và tôi thực sự yêu thích (và giờ vẫn còn yêu lắm!) cách mà nó kiểm soát DOM thông qua nguồn dữ liệu. Vì vậy, ngay cả khi biết rằng nó sẽ có cấu trúc khá đơn giản về các lộ trình và các component, tôi đã nhanh chóng tiến thành triển khai lại từ đầu. Có những framework khác như React hoặc Angular cũng làm như vậy nhưng đôi khi, tôi cũng thích những thứ là lạ và hợp thời trang. Vì vậy, Vue js dễ dàng là một phần của trong dự án.
Sau khi mã hóa cấu trúc cơ bản theo CSS và HTML, chúng tôi đã đến thử thách, để có được các chuyển động đa sắc hơn. Tôi nhận ra hai điều:
Đầu tiên, rất quan trọng để phân cấp các layer trước khi bắt đầu tạo hiệu ứng. Như có thể thấy khi đặt chân đến đây, chúng tôi có rất nhiều lớp mặt nạ (mask) khác nhau được kết hợp khác nhau, nếu bạn di chuột lên trên một dự án, bạn thay đổi dự án đang hoạt động trong bảng chuyển hoặc tự nhập lại nó.
Vì vậy, tôi bắt đầu kiểm tra các tùy chọn khác nhau. Thư viện như PixiJS hoặc ThreeJS hứa hẹn nhiều sự lựa chọn tốt hơn nhưng tôi quyết định không sử dụng chúng, vì cuối cùng, hầu hết tất cả các thành phần đều có sự liên quan, và tôi thì không muốn nhồi nhét toàn bộ website vào bên trong một bức tranh canvas.
Không có chúng vẫn chẳng sao cả. Thậm chí rằng có lẽ tôi đang nghĩ ra rất nhiều. Bạn nghĩ sao? Bạn có thấy một dòng rõ ràng có nói CÓ / KHÔNG với việc sử dụng canvas cho gần như toàn bộ cả một website hoàn chỉnh không? Hiệu suất / trình duyệt chéo và SEO có là những thứ tôn chỉ nhất? Rõ ràng đối với SEO Vue mấy thứ đó không được xem là người đồng hành thực sự tốt. Tôi có thể sẽ sử dụng Nuxt.js ngay ngày hôm nay – nếu bạn hoan nghênh hãy bình luận ở cuối bài viết!
Một điều quan trọng khác là giữ tốc độ khung hình cao trong các chuyển động, trong khi tải các tài nguyên và tạo các giao điểm (node) DOM bằng Vue. Rõ ràng, sử dụng đúng tài nguyên cho từng thiết bị là điều cơ bản để tải ít megabyte nhất có thể, nhưng tôi nhanh chóng nhận ra rằng điều đó không quan trọng bằng việc chọn thời điểm, cách tải chúng và sau đó là thời điểm đặt chúng trên website. Đây là điều mà tôi phải ghi nhớ cho tất cả các chuyển động, nhưng đặc biệt là cả trong trình tải. Nếu bạn có % tải trang thông thường, bạn thực sự không quan tâm đến fps (khung hình/giây), nhưng vì Xavi muốn một trình tải có thương hiệu, chứa chuyển động, điều rất quan trọng là phải giữ các chuyển động này với tốc độ khung hình tốt bởi vì xét cho cùng, ấn tượng ban đầu vẫn là quan trọng nhất.
Lúc đầu, tôi không theo bất kỳ mốc thời gian cụ thể nào, đối với thiết bị di động, cần lưu ý đôi khi tốc độ khung hình giảm đi rất nhiều nên tôi cuối cùng quyết định rằng:
- Chỉ tạo các ứng dụng tải node
- Bắt đầu vòng lặp chuyển động
- Sử dụng các đối tượng hình ảnh js thông thường trích xuất base64 của hình ảnh và lưu trữ chúng trong vuex
- Dừng vòng lặp chuyển động
- Tạo tất cả các node và gán tài nguyên
- Bắt đầu chuyển động đầu tiên
- Phá bỏ các ứng dụng tải node
Và giờ tốc độ khung hình được cải thiện rất nhiều. Và đây là một cấu trúc mà tôi đã cố gắng tái tạo trong tất cả các chuyển động.
“Đừng để sự hoàn hảo là kẻ thù của đủ tốt”
Kết luận này là lời khuyên dành cho các bạn (đáng buồn không phải lúc nào tôi cũng làm được). Hoàn tất vào thời gian cụ thể, đặt ra khung thời gian hoặc một cái gì đó giúp bạn kết thúc công việc trong khoảng thời gian cụ thể. Bạn sẽ tìm thấy cách tốt hơn cho những gì làm dang dở trước đây hoặc sẽ chẳng bao giờ hoàn thành.
Cách chúng tôi làm việc
Thiết kế và phát triển kỹ thuật số hỗ trợ lẫn nhau và cần phải bổ sung cho nhau. Vì lý do đó, quá trình sáng tạo của chúng tôi luôn mang tính hợp tác và cởi mở, từ Christian chia sẻ ý tưởng animation hoặc tài liệu tham khảo khả dụng với Xavi hoặc cách khác.
Đặc biệt không kém là chúng tôi nghiêm túc như thế nào khi thực hiện thiết kế pixel-perfect và hoạt họa nhất quán. Để làm được điều đó, chúng tôi cần lặp đi lặp lại cách thức thực hiện và chia sẻ, hỏi đáp liên tục để nhận được các phản hồi trung thực, cho tới lúc đạt được kết quả như kỳ vọng. Và cả hai chúng tôi có thể rất cẩn trọng trong khâu này.
“Burundanga là Studio chuyên sâu về thiết kế và phát triển sản phẩm song song theo hướng dài hạn”
Cuối cùng, chúng tôi chú ý nhiều đến giao tiếp nội bộ một cách hiệu quả, vì chúng tôi hầu như không bao giờ làm việc từ cùng một nơi. Chúng tôi chủ yếu sử dụng Slack và Trello để giữ liên lạc.
Kết Luận
Cả hai chúng tôi đều đi làm toàn thời gian trong quá trình sản xuất portfolio, vì vậy quá trình phát triển dự án liền mạch trở nên khó khăn hơn. Tất cả các buổi trao đổi đều diễn ra vào các buổi tối, cuối tuần, ngày lễ và thậm chí cả giờ nghỉ trưa trong 1,5 năm qua.
Điều đó có nghĩa là rất nhiều nỗ lực để thực hiện nó, nhưng chúng tôi đang ở đây và chúng tôi tự hào về kết quả và phản hồi của dự án cho đến nay.
“Các dự án tự khởi xướng luôn mang một giá trị đặc biệt”
Chúng tôi muốn cảm ơn hai người bạn gái của chúng tôi – Eva và Natasha vì sự kiên nhẫn của họ và người bạn đống hành – Miguel Angel Garcia (@tribadelics) cho phản hồi và lời khuyên của anh ấy.
Thông tin công ty
Burundanga Studio là sân chơi kỹ thuật số của nhà thiết kế Xavier Cusso và nhà phát triển Christian Macmillan. Hiện đang làm việc trên một vài dự án tự khởi xướng khác. Chúng tôi đang hợp tác. Công việc kinh doanh vẫn đang là kế hoạch trong tương lai gần.
Nguồn: awwwards.com
Thietkewebwp.vn – Đơn vị thiết kế Website chuyên nghiệp uy tín miền Bắc
