Thiết Kế Website - Góc Nhìn Từ Agency - Fago Agency

Search từ khoá “thiết kế website” trên Google ra hàng tá những công ty thiết kế chuyên nghiệp giá rẻ khiến mọi người nhầm tưởng rằng công việc này dễ dàng như đi chợ. Ngược lại, những người không biết nhiều về công nghệ nghĩ đó là 1 công việc rất phức tạp, đòi hỏi trình độ IT cao siêu. Thực tế website là 1 sản phẩm kết hợp giữa nghệ thuật và công nghệ mà không phải ai cũng hiểu đúng về nó Loạt bài này giúp các bạn hiểu đúng về cái ngành không mới mà sẽ không bao giờ cũ này.

Xin phép được bỏ qua các website tin tức, MXH, E-commerce để tập trung vào website công ty, nhãn hàng, campaign – những loại hình chiếm chủ đạo trong dịch vụ của Fago Agency.

1. Website để làm gì?

Rất thường xuyên tôi hay nhận được các cuộc điện thoại báo giá thiết kế website mà 1 nửa trong số đó thì người gọi cũng chẳng biết xây cái website để làm gì. Từ đó họ đánh giá không đúng về vai trò của agency.

Về cơ bản, làm website có 4 mục đích:

• Branding: website là thể hiện của thương hiệu trên Digital. Thường các cty, tập đoàn lớn hoặc những người nổi tiếng sẽ tập trung vào mục đích này. Website không cần phức tạp, chức năng cao siêu, chỉ cần thể hiện được cái hồn thương hiệu. Tham khảo http://masangroup.com, http://samsung.com/vn, http://unilever.com.vn
• Marketing: website là nơi truyền tải các thông điệp về nhãn hàng, là công cụ để tương tác, hấp dẫn người dùng. Website đòi hỏi phải sáng tạo, thu hút và đem lại giá trị độc đáo cho người dùng Thường dành cho các campaign hoặc nhãn hàng lớn. Tham khảo http://clear.vn, http://openhaier.com.vn, http://nhockemvinamilk.com.vn
• Sale: website là nơi để bán hàng, thường dành cho các cty E-commerce, Retail. Tham khảo: http://thegiodidong.com, http://lazada.vn, http://tiki.vn
• CRM: website là nơi duy trì mối quan hệ giữa Brand với người dùng bằng các thông tin bổ ích, chương trình chăm sóc khách hàng hoặc các ưu đãi đặc biệt. Website hướng về nội dung, tương tác và kết nối. Tham khảo http://hocvieniq.com, http://giadinhnestle.com.vn, http://enfa.com.vn

2. Website đắt hay rẻ

Đối với cá nhân, website giống như ngôi nhà, còn với cty, website giống như trụ sở hay cửa hiệu online. Việc xây nhà đắt hay rẻ phụ thuộc vào chủ nhân muốn xây nhà cấp 4, nhà phố, biệt thự hay toà cao ốc. Website sẽ siêu đắt nếu chủ nhân xem nó như 1 tác phẩm nghệ thuật để đời.

• Website rẻ (dưới 10tr): chỉ cần 30’ là có 1 website dựa trên nền tảng wordpress, blogspot, joomla… với chức năng đầy đủ và theme đẹp đẽ. Tốn thêm 1 chút phí để chỉnh sửa, cơi nới theo ý muốn chủ nhân. Với cá nhân hoặc doanh nghiệp vừa và nhỏ thì đây là sự lựa chọn phù hợp. Tất nhiên vì kiến trúc, giao diện được định sẵn nên các website kiểu này sẽ na ná nhau như nhà phố hay chung cư và khó tạo được dấu ấn riêng. Có thể tham khảo hang ngàn mẫu giao diện free hoặc giá rẻ ở http://themeplaza.net, http://themeforest.net, http://templatemonster.com…
• Website không rẻ: chủ nhân muốn thiết kế riêng cho đúng với phong cách của mình. Thì có sẵn các cty thiết kế website cỡ vừa, giá khoảng vài chục đến trăm triệu. Việc chỉnh sửa, thay đổi được đáp ứng dễ dàng dựa trên các CMS có sẵn. Chi phí cao hay thấp phần nhiều phụ thuộc vào Design

• Website đắt, rất đắt: có thể lên đến vài trăm triệu hoặc cả tỉ đồng. Là những website đặc biệt, cực kì ấn tượng về mặt thẩm mĩ, các tương tác độc đáo, chức năng hoàn hảo. Đây có thể xem là các tác phẩm nghệ thuật thật sự. Chiêm ngưỡng những website đỉnh cao tại http://thefwa.com hoặc xem showcase của các agency lớn như http://firstborn.com, http://f-i.com

The Future of The Airline website: http://www.f-i.com/fi/airlines/ , một website trong trí tưởng tượng siêu việt của FI, đem đến cách tương tác và trải nghiệm chỉ thấy trong các bộ phim Hollywod

Nestle 100 năm là 1 trong những website kì công và phức tạp nhất. Website tái hiện sự biến đổi của cảnh vật, con người, văn hoá VN qua suốt 100 năm, kèm theo vô số kiến thức và giải thưởng cực kì hấp dẫn. Một website xứng đáng với đẳng cấp của Nestle nhưng hết sức thân thuộc, dễ mến như cái cách Nestle đã "nhập gia tuỳ tục” ở VN suốt 100 năm. Các bạn có thể xem clip về website ở dưới

Masan Group (masangroup.com) lại là 1 website khá dơn giản nếu chỉ nhìn sơ qua về giao diện, tính năng. Nhưng thật sự đây là 1 website cực kì đẳng cấp. Mỗi tấm hình, câu chữ đều được chọn lọc vô cùng kĩ lưỡng, khoảng cách giữa các thành phần, font chữ, màu sắc đều được quy định vô cùng tinh tế.

• Website khủng: cấu trúc phức tạp, dữ liệu lớn và liên kết chằng chịt với nhau, phân tầng quản lí chặt chẽ. Những website này đòi hỏi trình độ phân tích hệ thống xuất sắc, công nghệ tiên tiến và đội ngũ vận hành kinh nghiệm. Tham khảo http://sony.com.vn , http://kohlervn.com , http://thegioididong.com

Sony Vietnam là 1 trong những website phức tạp nhất mà tôi có dịp tham gia. Hệ thống quản trị được xây dựng cho toàn cầu nên việc sửa chữa, thay đổi, cập nhật dữ liệu hết sức kì công, phải trải qua rất nhiều quy trình, hướng dẫn, thử nghiệm. Chỉ mỗi việc học cách sử dụng hệ thống và Việt hoá dữ liệu mà cả team 6 người mất 1 năm trời làm việc liên tục. Có lẽ ở VN không agency nào đủ sức xây 1 hệ thống phức tạp như thế.

3. Những website đình đám ở Việt Nam

Bạn sẽ không dễ tìm chúng trên Google vì các cty web giá rẻ đã chiếm hết trang nhất rồi. Khá nhiều website đỉnh đã bị gỡ sau khi kết thúc sứ mệnh của nó. Vài gợi ý để các bạn tìm hiểu

• Website tập đoàn: Honda, Toyota, Nestle, Unilever, Masan, Toshiba, FrieslandCampina, KFC, Pepsi… Bạn có thể search các tập đoàn đa quốc gia vì hầu hết các website này đều rất đẳng cấp
• Website nhãn hàng: Clear.vn, Rexona.vn, lexus.com.vn, friso.com.vn, vespa.com.vn, omovietnam.com, sprite.vn …. Không phải nhãn hàng nào cũng có website, nhưng đa phần đều là các website rất mướt mắt
• Campaign site: Openhaier.vn, 12catinh.honda.com.vn, nhockemvinamilk.com.vn, khongngungbuoctoi.com ….

Còn đây là những website đình đám 1 thời đã biến mất chỉ còn lại vài dấu vết

2007: Attila có thể xem là website đỉnh cao nhất của thời kì đó. Mô phỏng 1 thành phố Attila với hướng dẫn viên Anh Thư xinh đẹp, các khu trưng bày sản phẩm, xe được zoom đến từng chi tiết. Website bằng flash, nhúng video, tương tác độc đáo.

2008: Close Up tìm em nơi đâu là 1 trong những campaign site thành công nhất với kiểu thiết kế vẽ tay mới lạ và những chức năng không đụng hang (làm slideshow, vẽ tranh). Website flash, có chức năng comment, kết bạn, đăng tác phẩm dự thi để tạo thành 1 cộng đồng rất sôi nổi.

2009: Close Up bỏ Tìm em nơi đâu để làm Thành phố thơm mát. Tham vọng của họ là tạo ra 1 MXH mới khi mà trào lưu Facebook đang bùng nổ. Dẫu không thành công nhưng đây vẫn là 1 website đỉnh, tạo ra 1 thế giới ảo đầy sinh động.

2010: Samsung Người đẹp vì lụa tạo nên 1 thành phố tím quyến rũ, nơi mọi người có thể trải nghiệm cuộc sống đẳng cấp, tham gia các hoạt động thú vị. Tiếp nối concept đó, Samsung còn tạo ra Digizone – thành phố 3D nơi trải nghiệm mọi sản phẩm đỉnh cao công nghệ, và Cuộc sống mới – 1 quần đảo tương lai đem lại cho mọi người những không gian sống thời thượng.

2011: Art of Motorbike, 1 website trình diễn những nét độc đáo tinh tuý nhất về chiếc xe Piaggio, cũng là 1 trong những website cá tính nhất từng có.

2012: Nestle 100 năm nhân kỉ niệm 100 năm Nestle có mặt ở VN.

2013: Poca – Đại hội chém gió quy tụ các đại cao thủ Dưa Leo, Jvevermind, Toàn Shinoda, Huyme, Duy Khiêm Ngố, Doodle Dood. Website cũng rất ấn tượng với cách thiết kế rực rỡ, hài hước.

3. Briefing

Trước khi bắt tay vào làm, cả Chủ đầu tư (người muốn làm website) và Nhà thầu (agency) đều phải xác định rõ ràng mong muốn của đối phương.

Chủ đầu tư cần nói được ý muốn thực sự của mình một cách chân thành (chứ không đánh đố). Nhà thầu cần phải nắm chắc yêu cầu để tư vấn phù hợp (chứ không vẽ vời).

* Mục tiêu: làm website để làm gì. Quay lại 4 mục tiêu của website đã trình bày ở trên => Website để làm gì?

* Thương hiệu & Sản phẩm: Thương hiệu của bạn đại diện cho cái gì, sản phẩm của bạn có gì đặc sắc, thông điệp bạn muốn nói với người dùng ra sao.

* Phong cách: bạn muốn kiểu Á hay Âu, hiện đại hay cổ điển, phá cách hay truyền thống. Nếu có 1 số website tham khảo thì càng tốt. Nếu có 1 số ấn phẩm truyền thông (logo, print-ad) thì càng tốt nữa.

* Chức năng: những chức năng bắt buộc phải có – phần còn lại Agency sẽ đề xuất.

* Ngân sách: đây là điều hơi tế nhị, nhưng nên rõ ràng ngay từ đầu. 1 câu kinh điển thường gặp là "ngân sách thoải mái, em cứ đề xuất nếu hay thì sẽ duyệt” Để rồi khi agency đề xuất xây biệt thự thì vì lí do nào đó quyết định của Chủ đầu tư chỉ là xây nhà cấp 4.

* Thời gian: muốn chất lượng thì phải có đủ thời gian cho sáng tạo, thiết kế và thi công. Nhiều agency vì muốn nhận project nên sẵn sàng làm với thời gian gấp, nhưng đa phần chất lượng sẽ không đảm bảo, lên website rồi còn sửa tới sửa lui , thậm chí đập xây lại – điều này rất lãng phí cho cả hai.

* Công nghệ: nên làm rõ từ đầu, tránh trường hợp dựng web PHP xong mới té ngửa ra là phải cài trên server .NET.

Rất nhiều khi cả Khách hàng lẫn Agency đều làm sơ sài ở khâu Brief và bắt tay vào plan luôn. Kết quả là plan không phù hợp, chỉnh sửa rất nhiều lần hoặc làm lại. Brief cũng không đơn giản chỉ là 1 email hay file word, nó là cả 1 quá trình tương tác tìm hiểu lẫn nhau giữa Khách hàng với Agency.

4. Planning

Công đoạn này nằm chủ yếu ở Agency. Một website tốt phải là sự kết hợp giữa Công nghệ, Thiết kế và Mỹ thuật. Nhiều Khách hàng tìm đến các cty IT để đặt hàng website, nhưng điều này không hẳn đúng vì Công nghệ chỉ là 1/3 của vấn đề . Giá trị lớn nhất vẫn nằm ở Sáng tạo.

Mỗi agency có 1 cách để Plan riêng, nhưng đa phần vẫn phải xoay quanh những thách thức sau:

* Customer insights: Hiểu rõ người dùng là chìa khoá để đưa ra ý tưởng. Họ là ai ? Họ có nhu cầu gì ? Họ đi vào website để làm gì ? Họ mong muốn nhận được những giá trị gì ? Đâu là những yếu tố quyết định để thuyết phục họ khám phá và quay trở lại website ? Nến nhớ bạn chỉ có 7s để thuyết phục 1 người tiếp tục duyệt website hoặc ra đi không trở lại.

* Concept & Idea: Bạn lấy cảm hứng từ đâu để thiết kế nên website này ? Ý tưởng bạn muốn là gì ? Bạn muốn nói với người dùng câu chuyện gì ? Tại sao lại làm vậy ? …

Đây là những câu hỏi mà các Khách hàng nghiêm túc chắc chắn sẽ chất vấn, nhưng rất nhiều agency không trả lời được bởi họ sáng tạo dựa trên bản năng hoặc thói quen. Tuy vậy cần có sự lập luận, logic bài bản để mọi sáng tạo đi theo định hướng và thống nhất từ đầu.

Ví dụ: lấy website Nestle 100 năm, 1 trong những site mà tôi ưng ý nhất.

* Concept ở đây là "Now & then” – khắc hoạ sự phát triển vượt bậc của VN qua 100 năm nhưng vẫn kế thừa những giá trị truyền thống. Do đó các đường nét hình ảnh được sử dụng đều mang đậm chất VN, nội dung luôn có sự so sánh tương đồng giữa "xưa” với "nay”.

Ý tưởng là 1 đô thị Việt thu nhỏ phát triển qua 100 năm với nhà cửa, xóm chợ, đình chùa, trường học, con người, giao thông và lối sống. Mỗi năm đều có sự thay đổi – cái cũ mất đi hoặc phát triển thành cái mới to lớn hiện đại hơn, nhưng luôn có sự kế thừa và gìn giữ được những nét truyền thống (dòng sông, bến nước, mái đình, văn hoá)…. Thật may mắn team làm project này là những người rất am hiểu về Văn hoá Việt nên các sản phẩm sáng tạo làm ra đạt được độ hoàn chỉnh cao, truyền tải được thông điệp rất sâu sắc.

* Structure & Wireframe: Bạn muốn website sẽ gồm những mục nào (Structure), cấu trúc mỗi mục ra sao (Wireframe). Bản thân Khách hàng phải có hình dung bước đầu về việc đó, hơn là dựa toàn bộ vào Agency. Nhiệm vụ của Agency là làm cho mọi thứ được hợp lý và hoàn thiện hơn.

* Key visual (Master layout): Trang chủ với màu sắc, font chữ, hình ảnh, menu, header, footer, banner …. Đây là sản phẩm đầu tiên mang tính quyết định hướng đi tiếp theo. Nếu đã thống nhất được Master layout thì rất dễ để phát triển tiếp, ngược lại sẽ phải trải qua quá trình revise – chỉnh sửa- approve có thể kéo dài vô tận đến mức làm lại từ đầu.

* Function specs (bản mô tả chức năng): Thường Khách hàng chú ý nhiều đến Layout mà quên mất rằng các chức năng cũng rất quan trọng. Nếu có sự hình dung đầy đủ từ đầu thì Agency rất dễ để thi công, ngược lại nếu cứ phát sinh lắt nhắt thì sau này sẽ rất mệt trong việc chỉnh sửa.

* Công nghệ: Không nhất thiết phải dùng dao giết bò để mổ gà. Các công nghệ phổ biến nhất là HTML5/ CSS3 (giao diện) và PHP - ASP.NET (chức năng). Website đòi hỏi cao về hiệu suất và bảo mật lắm thì mới đến mức dùng Drupal, Ruby on Rails, JSP. Việc sử dụng công nghệ quá cao khiến chi phí đội lên và khó trong việc chỉnh sửa về sau (nếu đổi agency). Cần có thêm các công nghệ liên quan đến Mobile, Bảo mật, Phân tải, Backup dữ liệu ….

* Ngân sách & Thời gian: Ngân sách cần rõ ràng cho từng hạng mục và lường trước những phát sinh để khỏi tranh cãi về sau. Thời gian cần hợp lý, Khách hàng luôn muốn ép tiến độ nhưng nên hiểu rằng Sáng tạo cần có thời gian đúng mức mới hoàn thiện được. Một toà nhà lớn cần cả năm đề thi công thì 1 website lớn cũng có thể như vậy.

5. Execution

Đây là công đoạn cực nhất cho cả Khách hàng lẫn Agency. Sau những ý tưởng độc đáo, những mơ ước lãng mạn thì đây là lúc bắt tay vào làm từng chi tiết nhỏ nhất. Từng nút bấm, hàng kẻ đều phải chau chuốt. Từng hình ảnh, câu chữ đều phải chắt lọc.

* Thiết kế giao diện: sau khi đã có Master layout thì tập trung vào thiết kế từng trang. Quá trình này chua nhất vì sẽ phải duyệt đi duyệt lại nhiều lần. Thậm chí một sự thay đổi nhỏ ở 1 trang cũng khiến phải chỉnh sửa tất cả các trang còn lại. Đối với các Designer thì đây là công việc không quá thú vị, thậm chí bế tắc nếu không tìm được tiếng nói với Khách hàng.

* Kinh nghiệm: Agency cần chủ động đưa ra nhiều phương án và gợi ý để Khách hàng lựa chọn, nếu cần nên vẽ tay minh hoạ ý tưởng trước khi lên layout. Khách hàng cần nhất quán trong việc phản hồi, những gì đã duyệt rồi không nên bắt chỉnh sửa vì sẽ gây rối cho Designer.

* Copy wireframe: Nhiều agency không làm việc này khiến website trở nên cứng nhắc và thiếu tính "người”. Cần phải lường trước các kịch bản mà người dùng tương tác với website, từ đó đề ra những phản hồi phù hợp và thông minh. Ví dụ câu thông báo lỗi, email chào mừng thành viên mới, trang 404, hay 1 câu kêu gọi hành động ….

* Lập trình giao diện: Agency biến các layout JPG thành HTML, thêm Javascript để xử lí hiệu ứng. Trở ngại lớn nhất trong khâu này là làm sao giao diện phải hiển thị đúng trên các Trình duyệt phổ biến và cả Mobile. Chua nhất là IE (Internet Explorer) version 6, 7 trở xuống luôn gây ra những lỗi khiến Developer vò đầu bứt tai. Tin mừng là thị phần IE ngày càng giảm xuống còn rất thấp, nhưng tin buồn là rất nhiều Khách hàng lớn vẫn đang xài IE6,7 trên nền WinXP.

Từ 2012 trở về trước, Flash rất được ưa chuộng vì lập trình ít lỗi và làm hiệu ứng rất lung linh. Nhưng nhược điểm là nặng và khó hiển thị trên Mobile (iOs). Cho nên nếu Agency nào đề xuất làm Flash thì bạn phải hết sức cẩn trọng kẻo tiền mất tật mang.

Lập trình chức năng: kết quả là sẽ có 1 CMS để Khách hàng tự cập nhật nội dung website. Thông thường phần này ít được quan tâm, nhưng lại hay gây ra sự rắc rối về sau. Tại sao CMS khó dùng, sao banner này không đổi được, sao upload hình ảnh bị lỗi, giờ muốn đổi màu menu thì phải làm sao ……tất cả những việc này có thể tránh được nếu Khách hàng và Agency chịu kiểm tra từ sớm.

* Testing: Một sự thật cay đắng cần thừa nhận là website nào lên cũng có lỗi. Do vậy cả Khách hàng lẫn Agency cần hỗ trợ nhau trong việc phát hiện và chỉnh sửa, việc đổ trách nhiệm chỉ càng gây ra khó khăn.

* Cài đặt: Đối với website nhỏ thì chỉ cần 1 cái host hoặc VPS là xong. Nhưng với các website lớn có hệ thống server riêng và bảo mật cao thì không hẳn là đơn giản. Thiếu framework, server không hỗ trợ, server đặt ở nước ngoài ….là những điều cần phải trao đổi rất kĩ từ sớm.

* Vận hành: Việc này tưởng đơn giản khi chỉ việc upload nội dung là xong. Tuy vậy thỉnh thoảng lại gây ra lỗi như tràn text, vỡ hình, xoá mất dữ liệu. Cần có guideline cụ thể cũng như phương án back-up dữ liệu thường xuyên. Cần có phân quyền để tránh các hậu hoạ do sự tắc trách của 1 cá nhân nào đó. Cần có các ràng buộc về việc bảo hành, bảo trì, hỗ trợ .

Tới đây, các bạn có thể thấy xây dựng website là 1 quá trình không đơn giản, đòi hỏi sự phối hợp của nhiều bên có chuyên môn cao. Đối với Khách hàng, hãy chọn lựa sáng suốt và trả công xứng đáng cho các Agency chất lượng nếu muốn có được website ưng ý. Đối với Fago Agency, hãy đầu tư nhân sự giỏi, xác lập quy trình chặt chẽ để mỗi website đều là 1 sản phẩm đáng tự hào!

Nguồn bài viết: https://www.brandsvietnam.com/