c9 web redesign

 

Năm 2020 thật sự tồi kệ kinh hoàng cho mọi thứ, bao gồm cả những khởi đầu mới. Nhưng từ một góc nhìn khác tích cực hơn, năm 2020 lại cho đám tụi tui một cơ hội làm mới bản thân không thể nào phù hợp hơn, trong những ngày ế kèo…

Tụi tui làm lại logo, một logo tối giản và gần gũi nhất với bản chất của mấy đứa bắt đầu nghề thiết kế từ những nét vẽ. Không có visual, không có brand identity, chỉ có ‘less is more’ và ‘bất cứ thứ gì được vẽ ra đều có thể là visual’ – hoặc lười, nếu bạn không chấp nhận cái triết lý lươn lẹo kia :>

 

.  .  .

 

Nhưng ở đây tụi tui không bàn nhiều về logo và triết lý thiết kế. Có một thứ quan trọng và cần được để tâm đến hơn: website của c9.

Click9 vốn đã có website từ rất lâu rồi – 2013, và đến nay là 2020, chắc chắn là cái web đã outdate cũng từ rất lâu. Và với một studio làm thiết kế thì sự outdate này là không thể tha thứ được, mặc dù tụi tui đã tự tha thứ cho chính mình suốt đôi ba năm nay. Sự outdate đó sẽ bị chấm dứt ngay khi bạn đọc case sudy này. Vô nha!!!

 

 

1. Nhìn lại một chút
 

 

Thiết kế cũ đã tồn tại được 7 năm. Đây là giao diện desktop trong bối cảnh phần cứng 7 năm trước:

 

 

 

 

Tại thời điểm đó, các lượt xem đến nhiều từ desktop và laptop, phân giải màn hình phần nhiều là HD 1365×768, một số là fullHD 1920×1080, màn 2k cũng có nhưng rất ít. UI design cũng khá hợp thời lúc đó, khi mà nhiều website vẫn còn giữ layout 2 cột truyền thống với sidebar bên phải và content được fix gọn trong khoảng 900px chiều ngang. UX cũng khá ngon với parallax scroll, block section, hover animation effects..

 

 

 

 

Hiển thị trên iphone 7/8 nè – là responsive design, tất nhiên rồi! Thời bấy giờ đã có smart phone và tablet rồi, và tụi tui cũng đã cố để cho cả 2 không phải zoom để đọc chữ trên màn hình. Viewport chưa được tốt, nhưng cũng không đến nỗi tồi (lúc đó tụi tui chỉ có một con samsung galaxy Y và một cái tablet asus memo HD 7 để test thôi)…

 
 

2. Outdate như nào?

 

 

Sau 7 năm dằng dẵng với rất nhiều đổi thay về công nghệ cả phần cứng lẫn phần mềm lẫn phong cách thiết kế, cái sự outdate tồn tại rõ ràng qua 2 mặt hình thức và nội dung.

 

Về hình thức:

•     Giao diện desktop lỗi thời mất rồi, thiết kế cũ dành cho màn hình 1366px, cần phải cải tạo cho phù hợp với các loại màn hình từ fullHD lẫn 2k, và cả 4k nữa.

•     Giao diện mobile phải được tối ưu, cả UI lẫn UX.

•     Giao diện trang bài viết mục portfolio có vẻ nhạt nhòa, chán, coi hông dui hông đã…

•     Có vài chỗ ngu ngục, chẳng hạn như intro của trang chủ không có bất kì dấu hiệu nào dẫn dắt người xem cuộn xuống dưới để xem tiếp…

 

Về nội dung:

•     Ngày bé thiệt quá xá tự phụ, như một tấm chiếu mới chưa từng trải; bập bõm được vài câu tiếng anh đã tưởng mình ngon trong khi web toàn người việt vào xem…

•     Nội dung được update thường xuyên nhất là portfolio, mục activities được ưu ái bỏ bê hẳn 5 năm.

•     Mục ‘About us’: 4 thằng nay đã có 2 thằng ra làm riêng ở 2 mảng tách biệt, anh em thì vẫn mãi là, vẫn nhậu đều với nhau nhưng giờ đang mang nhiều cái tên khác nhau rồi.

•     Mục ‘Call us’: có vẻ khoa trương và không ai đếm xỉa tới…

 

Và một vài vấn đề khác liên quan đến con người, ví dụ như chăm chỉ update portfolio, chịu khó bày trò ra làm để có cái đăng bài, để người xem bước vô không nghĩ đây là cái trang web của một tụi đã giải tán chỉ còn chờ hết hạn tên miền là bay -.-

 
 

3. Đừng outdate nữa

 

 

Khi đã xác định được vấn đề cần giải quyết thì việc tiếp theo là giải quyết vấn đề. Câu vừa rồi nói chuyện huề vốn ghê nơi, mục đích của nó là để đoạn này dài ra một chút. Cụ thể những việc cần làm ngắn gọn như này:

•     Giao diện cần được làm lại hết, thế cho nhanh.

•     Nội dung ngắn gọn nhẹ nhất có thể, cái nào cảm thấy dư thì bỏ quách đi, thế cho nhanh.

•     Ngôn ngữ chính là tiếng việt, nếu có khả năng thì làm song ngữ, thế cho nhanh.

•     Làm sao bớt trendy nhất có thể để sau này không phải nhân dịp một đợt dịch nào khác để redesign, thế cho nhanh.

 

Kể ra ngắn, nhưng làm thì rất dài, kéo xuống xem bằng hình ảnh cho trực quan bạn ei :>

 

 

4. Hết outdate rồi

 

 

Cấu trúc trang

 

Tụi tui vẫn giữ lại layout dạng web một trang – do nội dung không nhiều nên tất cả những nội dung đó đều được thể hiện trên trang chủ để người xem có thể nắm bắt được tổng quan những gì tụi tui muốn truyền tải.

 

 

 

 

Cụ thể, navigation menu của tụi tui rút gọn chỉ còn 3 mục: làm – portfolio, chơi – activity, về c9 – about us & contact. Và với lợi thế của menu ngắn, tụi tui dàn nó thành hàng dọc bên trái màn hình để tận dụng không gian chiều ngang của màn hình dektop. Nav menu dọc với 3 menu item tương ứng với 3 phần nội dung của trang và nó sẽ được in đậm khi xem đến phần nội dung đó; như vậy người xem sẽ luôn biết mình đang ở mục nào, tiện ghê chưa :>

 

Làm – Portfolio

 

Portfolio là mục đích chính của trang web nên nó sẽ luôn nằm trên cùng, tất nhiên rồi. Ở web cũ tụi tui chỉ để 6 project mới nhất với 6 cái hình nhỏ xíu không màu, muốn xem nhiều hơn phải bấm chuột một cái để chuyển qua trang khác. Quá sức sai lầm! Mục đích chính của toàn bộ trang web c9 là để thể hiện, để người xem vô xem portfolio của tụi tui, vậy mà tụi tui đang tâm để cho phần quan trọng nhất đó bị nhạt nhòa đi trong sắc xám.

 

 

 

 

Và bản vá lỗi đây! Tụi tui không làm một trang riêng để xem toàn bộ portfolio nữa mà đem nó để ở trang chủ luôn, để những project xịn sò có cơ hội tiếp cận cao hơn đến với người xem :>

Có 12 project hiện sẵn, nếu bạn thắc mắc sao lại là 12 thì 12 là con số rất đẹp để chia layout cho các kích thước màn hình khác nhau: 3×4, 2×6 và 1×12. Ở desktop tụi tui dùng hệ lưới 3 cột, và để cho layout không bị nhàm chán, cứ 6 ô project sẽ có một ô big size, nằm so le. 12 project là con số vừa đủ. Vừa đủ dài để người xem lướt qua được những gì tụi tui làm, và cũng vừa đủ ngắn để người xem không bị nhàm khi cuộn quá nhiều. Các project tiếp theo sẽ được tải nối đuôi ngay sau đó khi bấm nút ‘Thêm+’

Tụi tui giữ lại hiệu ứng hover, khi rê chuột vào hình sẽ hiện tên project và link để click. Quá nhiều chữ sẽ gây rối cho layout hình. Và mặt khác, đây là những project về thiết kế, do đó hình đại diện của mỗi project cũng đã phần nào nói lên được bản chất nội dung của nó rồi!

 

Chơi – Activity

 

Đây là phần chính thứ 2 của trang web nhưng nó lại được cải tổ nhiều nhất :))

Mục đích của phần này là để thỉnh thoảng đăng những hoạt động làm việc – vui chơi của c9, có khi là vừa làm vừa chơi. Và thực tế tụi tui có rất nhiều cuộc vui như vậy, nhưng có quá ít thời gian để soạn một bài blog (tiếng anh) đăng lên. Do đó mục này được ưu ái bỏ rơi 5 năm…

Và đây là giải pháp! Từ blog, tụi tui chuyển thành gallery hình, một dòng caption sẽ nhanh gọn hơn một bài blog rất nhiều, đúng hông?

 

 

 

 

Oke, chuyển dịch tính chất thì hay đó, nhưng làm gallery sẽ bị trùng lắp với phần portfolio bên trên. Đây chính là lúc để UX thể hiện, thay vì làm một gallery trải dài theo chiều dọc, tụi tui làm dạng slider theo chiều ngang. Làm như này tiết kiệm được rất nhiều không gian chiều dọc và nếu lỡ có ai không hứng thú cũng sẽ dễ dàng cuộn tới phần tiếp theo.

Để tối ưu trải nghiệm người dùng, tụi tui có hẳn 4 cách để cuộn cái slider trên desktop: lăn chuột, kéo chuột, bấm phím mũi tên trên bàn phím và bấm nút trái phải trên UI.

Vậy nếu lỡ có một hoạt động nào đó có nhiều điều để chia sẻ hơn là một dòng caption thì sao? Hê hê đừng lo, mị tính cả rồi. Tụi tui có một cái popup lightbox, ở đây rộng chỗ, tha hồ văn vở nếu có hứng, có thể up cả video nếu muốn.

Vậy là bài toán lười biếng đã được giải, vấn đề còn lại là làm sao để đừng lười đến độ một tấm hình cũng không buồn up lên ?

 

Về c9 – About us & Contact

 

Đây là phần được rút gọn nhiều nhất. Ở web cũ tụi tui có 2 section trên trang chủ và 2 trang rời cho tụi nó. Qua thời gian, tụi tui nhận ra nó là thừa, vì chẳng mấy ai quan tâm đến. Cái gì không còn cần thiết thì tinh giản nó đi thôi:

 

 

 

 

Ở đây tụi tui nói ít làm nhiều chơi nhiều, vậy nên phần about us chỉ cần vài câu giới thiệu cho có thôi, kèm thêm vài cái link mạng xã hội là đủ.

Contact là phần quan trọng, dính liền đến chén cơm và túi tiền, nên nó phải được đối xử đặc biệt :> Tụi tui có 2 cách tiếp cận thông tin này với người dùng. Một cái talk bubble động đậy nhẹ nằm nhờ ở menu được hiển thị mọi lúc và một cụm thông tin đóng vai trò là page footer. Để tránh trùng lắp thì cái talk bubble sẽ bị ẩn đi khi cuộn đến phần footer, thật tinh tế!!

 

Project

 

Trang xem project về cơ bản cũng tương tự như một trang blog thông thường, nhưng với đặc thù ngành thiết kế nên sẽ có thêm vài yêu cầu về layout và hình ảnh.

Cụ thể tụi tui có 2 dạng layout: layout toàn trang và layout 2 cột (hihi nhưng ở đây chỉ có hình ảnh của layout toàn trang thôi); có thể tùy chọn màu background cho phù hợp mood&tone của project, có thể tùy chọn độ rộng hình ảnh để phù hợp với bố cục trình bày…

 

 

 

 

Về UX, tụi tui đã phân vân giữa việc dùng lighbox display để load và hiển thị project ngay trên trang chủ (tương tự như ở mục activity) thay vì chuyển qua trang mới với link riêng. Dùng lightbox, tụi tui có thể kết hợp với nhiều hiệu ứng animation để quá trình load project không bị nhàm chán, nhưng lại vấp phải một vấn đề khác lớn hơn. Google và facebook sẽ gặp nhiều trở ngại để tiếp cận nội dung vì với cách làm này, mỗi project sẽ không có đường link cụ thể. Do vậy, hy sinh một chút UX để đánh đổi lấy cơ hội được xuất hiện trên google sẽ là một bước đi đúng đắn :>

Ngoài ra, ở đây còn một vấn đề lớn cần giải quyết là ngôn ngữ. Dĩ nhiên tiếng Việt vẫn là ngôn ngữ chính, nhưng sau nhiều năm học hành phấn đấu thì tiếng anh của tụi tui cũng khá hơn lên rồi, song ngữ không còn nằm ngoài tầm với nữa… Vậy nên trên trang luôn có lựa chọn tiếng việt tiếng anh nằm lấp ló ở mép trái, mặc định là tiếng việt và lựa chọn ngôn ngữ sẽ được lưu bằng cookie. Mỗi project khi load đều load cả 2 thứ tiếng, nếu tụi tui có rảnh mà dịch, chỉ cần ẩn/hiện ngôn ngữ phù hợp mà không cần tải lại trang!

 

 

5. Mobile devices và adaptive design

 

 

Uồi, nếu bạn có cảm thấy tụi tui xài nhiều từ tiếng anh có vẻ nguy hiểm thì cũng đừng quở trách tụi này thích thể hiện nha, vì dịch tiếng việt sát nghĩa nghe nó..sao sao á: thiết bị di động và thiết kế đáp ứng =))

Nhìn chung và nói chung, năm 2020 rồi, bây giờ người ta lướt web bằng điện thoại rất nhiều, nên làm web cũng phải làm luôn cả thiết kế cho điện thoại, và người ta có hẳn một xu hướng thiết kế giao diện ưu tiên cho điện thoại, gọi là mobile-first design. Tụi tui cũng hưởng ứng tinh thần đó với một UI không-thể-đơn-giản-gọn-nhẹ-hơn, như bạn vừa xem bên trên. Sự tối giản này cho phép tụi tui phát triển giao diện cho điện thoại ngon lành và ít trắc trở.

Nói vậy cho sang chứ bọn tôi tính cả rồiii

 

 

 

 

Ở đây tụi tui dung hòa giữa thiết kế ưu tiên di động (mobile-first), thiết kế thích ứng (responsive design) và thiết kế đáp ứng (adaptive design). Bạn có thể đọc thêm về adaptive và responsive design tại đây.

Cụ thể, tụi tui bỏ qua trang lót với logo animation trên giao diện điện thoại. Người dùng điện thoại truy cập web tụi tui phần nhiều đến từ google, hoặc từ facebook/mạng xã hội, hoặc được tụi tui gửi link trực tiếp để xem portfolio. Với nhu cầu xem nhanh đó, mình không nên gây cản trở họ bằng một trang lót trắng tinh (tui sẽ nói về nó sau).

Navigation menu tất nhiên cũng được chuyển sang dạng responsive menu thông dụng, nhưng có một chút khác, tinh tế và khôn lỏi hơn 😀 Tụi tui chỉ đặt một logo ở góc màn hình thay vì cả thanh menu bar, như vậy giúp tiết kiệm được 50px chiều cao, nhiều không gian hơn, xem sướng hơn. Logo ở đây cũng mang cả vai trò của menu button, dùng để mở menu ẩn.

Tui đã có sự phân vân nhỏ trước khi quyết định dùng logo thay vì icon burger để người xem mở menu. Website của tụi tui về cấu trúc chỉ có 2 trang: trang chủ và trang xem portfolio. Các menu item ‘Làm – Chơi – Về c9’ chỉ có chức năng cuộn nhanh trên trang chủ; và ở trang xem portfolio, nếu được click thì tụi nó cũng dẫn về trang chủ và cuộn nhanh đến phần tương ứng. Như vậy về cơ bản, các item trong menu (trừ 2 nút đổi ngôn ngữ) đều dẫn về trang chủ; do đó việc có mở được menu ẩn trên điện thoại không không quá quan trọng. Mặt khác khi muốn quay lại trang chủ, người dùng đã quen với việc click vào logo, vậy nên với tụi tui việc đổi icon burger menu thành logo c9 là một sự đánh đổi… xứng đáng :>

 

 

 

 

Có một phần quan trọng của thanh menu dọc trên desktop không bị ẩn đi khi chuyển sang mobile, là cái talk bubble. Cũng tương tự như logo, talk bubble này nằm cố định một chỗ trên màn hình và đóng vai trò của một button call-to-action, từa tựa như những cái icon điện thoại rung rung trên mấy trang web bán hàng nhưng tinh tế hơn!

 

 

 

 

Grid gallery từ desktop khi sang điện thoại được chuyển thành dạng list, title và link được hiển thị luôn do điện thoại không có trạng thái hover.

Trang xem project cũng tương tự như trên máy tính, tất cả hình ảnh được chuyển về kích thước tràn chiều ngang màn hình, các project có layout 2 cột cũng được chuyển về 1 cột để tối ưu hóa hiển thị.

 

 

 

 

Slider của mục ‘Chơi’ trên điện thoại vẫn là slider với thao tác vuốt màn hình quen thuộc, hoặc bấm nút mũi tên nếu vuốt nhiều làm bạn mỏi tay. Slider trên điện thoại có đôi chút khác với máy tính, tụi tui để hình cố định size vuông, cắt bớt phần thừa và mỗi lần vuốt sẽ chuyển hẳn sang hình tiếp theo thay vì kéo tự do như trên máy tính. Light box thì vẫn thế, đây chính là lúc thiết kế mobile-first toả sáng, khi trải nghiệm trên máy tính và điện thoại là y chang :>

Và nhiều chi tiết nhỏ khác không tiện kể ra (vì dài :))

 

 

6. Theme & animation

 

 

Như đã kể ở đầu bài, website tụi tui làm lại chung với logo (cũng rất hy vọng đây sẽ là lần làm lại sau cùng). Sau đôi lần làm lại logo cho hợp thời thế, tụi tui nhận ra việc chạy theo đó là vô bổ và có đôi khi là mất thời gian; vì cả suy nghĩ lẫn phong cách thiết kế của tụi tui cũng thay đổi theo thời gian mà… Dẫu vậy, có một thứ không thay đổi, đó là nơi tụi tui bắt đầu.

 

Tụi tui thằng nào cũng là dân vẽ

 

Và một ý tưởng thiết kế cũng như một bức vẽ, đều có chung một khởi đầu; đó là những nét phác thảo trên tờ giấy trắng. Thật đấy mà, bạn có thể vẽ trên trang lót của tụi tui ở giao diện desktop đó :>

 

 

 

 

Hêhêee, đó chỉ là một easter egg nho nhỏ thôi, người xem biết nó hay không không quan trọng lắm. Tụi tui chọn nét vẽ làm concept và sắc trắng đen làm theme chủ đạo để giữ cho mọi thứ tối giản hết mức có thể. Font chữ cũng là một trong những font cơ bản tụi tui dùng từ những ngày đầu làm thiết kế: Myriad Pro.

Animation, vâng, animation. Tất nhiên phải có rồi!

Animation ở đây tụi tui có cả 2 loại: animated illustration và interactive animation. Interactive animation cho phép mình tương tác với nó, ví dụ như cái logo c9 trên desktop:

 

 

 

 

Còn illustration, tụi tui làm animation theo concept – chỉ là những nét vẽ động đậy; không màu mè để chiếm spotlight của các project, nhưng đủ hút mắt để người xem dừng lại theo dõi. Và nhân tiện nói thêm, toàn bộ animation tui dùng ở đây là Lottie animation đời mới, bản chất của nó là code chứ không phải xuất hình động .gif hay dùng video chèn vào; nên cực kì nhẹ về dung lượng, không hề gây ảnh hưởng đến tốc độ tải trang :>

 

 

 

 

Nói thế thôi chứ cái hình động bên trên là video đó, tui không có chạy code animation trong bài viết bên này hahaaaa

 

 

7. Kết

 

 

Chẳng biết bạn kéo xuống tận đây nghĩa là bạn đã đọc hết mớ chữ dài ngoằng của tui hay chỉ xem video lướt lướt thôi, nhưng dù tụi tui vẫn cảm ơn bạn! Và nếu bạn đã đọc hết tất cả, cá nhân tui cảm ơn bạn thêm lần nữa 😀

Làm một trang web, muốn dễ thì rất dễ nhưng muốn khó thì cũng rất khó, như bạn vừa xem trên đây. Web của tụi tui chỉ có 2 trang nhưng tiêu tốn rất nhiều thời gian và chất xám, chỉ để cho nó hợp lý và nhìn “ổn”. Làm web dễ thì chỉ cần lên mạng tìm một theme nào đó phù hợp rồi chỉnh sửa lại trên đó là xong, nhưng tụi tui chọn cách khó; vì chẳng mấy khi được làm một cách tự do và ung dung như vậy.

Làm lâu, viết case study cũng lâu, nhưng không viết thì uổng quá vì mình đã dành nhiều tâm sức vào đây. Cũng mong nó sẽ giúp bạn hiểu thêm một phần nào đó về UX/UI, điều mà ít người quan tâm trong những dự án web thông thường.

 

Nếu bạn chưa ngó qua web mới của tụi tui, vào click9studio.com nhé!

 

 

Project 7.2020 – case study 9.2020