Về Upperquad
Chúng tôi là Upperquad, một studio sáng tạo làm việc độc lập, trụ sở tại San Francisco. Chúng tôi xây dựng các thương hiệu mang tính thẩm mỹ và các trải nghiệm kỹ thuật số cho các khách hàng đa dạng lĩnh vực trên toàn thế giới.
Thiết kế lại Website upperquad.com là cả một nỗ lực tìm kiếm linh hồn của Website và bản sắc thương hiệu của chúng tôi. Công cuộc này diễn ra chỉ trong một vài tháng với đầy những tranh cãi, bàn luận lặp đi lặp lại vô tận nhưng thực sự hấp dẫn.
Việc khởi chạy lại trang Web của chính mình đã thôi thúc chúng tôi suy nghĩ nghiêm túc lâu dài về cái gọi là bản sắc – ý nghĩa của một studio kỹ thuật số sáng tạo và những gì chúng tôi muốn nói về bản thân trước toàn thế giới.
Một mặt, chúng tôi muốn để công việc tự nói lên, vì vậy một số thiết kế ban đầu tập trung vào các ấn phẩm đã thành công và những tấm ảnh bắt mắt. Mặt khác, đây là một cơ hội để nói lên quan điểm độc đáo và văn hóa của chúng tôi. Đó là một hành động cân bằng lại cách khám phá giới hạn sáng tạo của chúng tôi mà không làm sao nhãng đi công việc.
Thiết kế lại Website bắt đầu từ các hình khối
Ngay từ giây phút đầu tiên đến với Website upperquad.com khách truy cập sẽ nhận thấy ngay một sự cân bằng với những hình khối luôn chuyển động và biến hóa khôn lường. Các hình dạng là các khối xây dựng khái niệm của Website.Những yếu tố linh hoạt, tràn đầy năng lượng, lúc quay, lúc trượt, nảy lên và phản ứng với những tương tác của người xem thực hiện trên trang. Những hình dạng này biến đổi trong suốt quá trình, mang ý nghĩa ẩn dụ của riêng chúng khi kết hợp, và tương tác nhịp nhàng ăn ý đến bất ngờ.
Jason Dietrick, Giám đốc sáng tạo đã nói – “Một chút đồ họa 3D chẳng thể làm hại ai cả”
Có hai cách sắp xếp, một là những mô hình khối hộp, hai là biến trở thành bức tranh tổng thể. Đối với đa số người dùng, Website hoạt động dưới dạng phân lập theo từng trường và dưới dạng cổng thông tin, thông qua đó bạn có thể khám phá các trang con trên Website.
Riêng với chúng tôi, những khối hình này chính là đại diện cho những ý tưởng và sự sáng tạo mà chúng tôi truyền vào các bản thiết kế – chúng là những viên gạch để xây nên Website doanh nghiệp làm nổi bật thương hiệu của chính mình.
Xây dựng bản sắc Doanh Nghiệp bằng cách ghi lại những khoảnh khắc đáng nhớ nhất
Không khó để cho một anh chàng nhiếp ảnh dạo quanh trong văn phòng và dàn dựng, gượng ép vài nhân viên chộp lấy một vài bức ảnh để xây dựng Website – Nhưng đó không phải điều chúng tôi muốn làm.
Chúng tôi muốn khi khách hàng ghé thăm Website, họ sẽ hiểu ra ngay chúng tôi là ai, bắt nguồn từ việc nhìn thấy những bức ảnh chân thực như thế này. Rất lâu trước khi chúng tôi bắt đầu công việc, chúng tôi đã định hình sẵn một kế hoạch đảm bảo thu về kết quả: mỗi người trong văn phòng sẽ chụp lại một bức ảnh “đáng nhớ nhất của tuần”, chụp cho những đồng nghiệp khác sao cho tự nhiên và vô tư nhất, xóa bỏ đi rào cản ngại ngùng khi nhìn thấy một chiếc máy ảnh.
Có rất nhiều tấm thực sự tuyệt vời hơn cả tưởng tượng – và chúng tôi lập một bộ ảnh riêng về những bức ảnh nhí nhố hài hước – làm chúng tôi muốn cười “rụng rốn”, và cũng từ đó “khai quật” được khá nhiều các tay chụp tiềm năng trong văn phòng. Mỗi tuần chúng tôi dành riêng một chuyên mục đăng tải những tấm ảnh đó lên trang Web.
Thiết lập mọi thứ bằng chuyển động
Một điều quan trọng là chúng tôi muốn mang màu sắc của cuộc sống vào Website này, mà kỹ thuật số là một điểm mạnh của chúng tôi. Website mới sẽ đưa ra các chuyển đổi ngầm ý, bỏ qua việc tập trung và bố cục và nội dung cơ bản, vốn là cách làm truyền thống của Upperquad.
Chúng tôi sẽ tập trung vào màu sắc cũng như cảm xúc nhờ vào công cụ Articulation. Cảm xúc sẽ tập trung vào chủ đề đã chọn để khách truy cập cảm nhận từng tương tác nhỏ xuất hiện trên Website.
Cập nhật công nghệ mới: Tương tác – động, nội dung – tĩnh
Để thực hiện thiết kế khá phức tạp, chúng tôi đã tạo ra một hệ thống 24 lưới cột tùy chỉnh bằng với flexbox. Nó cho phép chúng tôi cố định được hình ảnh, văn bản và các yếu tố khác cực kỳ chính xác và giữ bố cục nhất quán trên tất cả các kích thước màn hình.
Chúng tôi đã sử dụng chức năng linear interpolation trong SCSS để liên tục thay đổi kích thước của từng yếu tố. Và kết hợp chức năng đó với các đơn vị rem để điều chỉnh tỷ lệ kích thước phông chữ lên xuống một cách trơn tru. Điều này cũng góp phần rất lớn vào khả năng phản hồi tương tác của Website.
Chúng tôi đã sử dụng Siteleaf thay cho CMS, cùng với Jekyll thay cho một trình tạo trang tĩnh. Chúng tôi đã thiết kế lại Website dựa trên ngôn ngữ HTML, SCSS và Javascript được biên dịch bằng gulp và browserify.
Để có thể thực hiện các hình động cuộn, chúng tôi sử dụng ScrollMagic kết hợp với TweenMax và một số hình ảnh động khung hình được thiết kế độc đáo trong CSS để tạo ra các khối đa giác chuyển động nhấp nháy tự nhiên. Chúng tôi còn ứng dụng Amazon S3, một sự kết hợp hoàn hảo với Siteleaf và CloudFront cho Website này.
Bạn đã chán Website cũ giao diện không đẹp mắt? Bạn muốn nâng tầm thương hiệu và khẳng định vị thế của mình trên thị trường kinh doanh Online?
Nguồn: awwwards.com
