Kinh nghiệm làm web của HOMA architects

HOMA architects chia sẻ kinh nghiệm làm web

(Kinh nghiệm làm web cho một công ty nhỏ 8-10 người)

Các văn phòng thiết kế trên con đường phát triển đều phải trải qua giai đoạn xây dựng trang web cho riêng mình. Trang web không chỉ cung cấp thông tin, mà còn chứng tỏ mức độ cam kết của công ty đối với công việc. Và còn thể hiện mức độ độc lập tự chủ của công ty nữa. Nó là phương tiện hiệu quả để cho khách hàng thấy văn phòng có những gì. Đồng thời là nơi văn phòng hoàn thiện hình ảnh, xây dựng mục tiêu phấn đấu và triết lý hành nghề nữa. Chính vì vậy trang web cũng không khác gì một công trình kiến trúc. Cần phải hết sức thực dụng – và hết sức thẩm mỹ. Khi bạn không phải là chuyên gia tin học, đứng trước nhiệm vụ xây dựng trang web cho riêng công ty mình. Bạn thường sẽ cảm thấy lúng túng không phải bắt đầu từ đâu, sắp xếp thông tin như thế nào. Trang web tương tác với người xem có được thân thiện không? Trang web có được nhiều lượt view và tương tác không? …

Chính vì những thách thức này, việc thực hiện một trang web thường bị trì hoãn hoặc thực hiện nửa vời, nên sẽ không mang lại hiệu quả marketing cho văn phòng. Chính HOMA architects cũng đã trì hoãn trong một thời gian khá dài cho đến khi chúng tôi quyết tâm đầu tư về thời gian và tiền bạc cho nó. Sau một thời gian dài xây dựng, cuối cùng chúng tôi vui mừng được giới thiệu với các bạn trang web của chúng tôi:

Homa-architects.com

Với HOMA architecs, đây thực sự là tòa nhà văn phòng thứ hai – quan trọng không kém gì văn phòng vật lý, thậm chí còn hơn. Bởi vì nó sẽ được nhiều khách ghé thăm hơn rất nhiều. Như một ngôi nhà thông minh, nó sẽ giúp khách biết về công ty một cách hiệu quả nhất.

Nhưng một điều tuyệt vời hơn cả trang web, sau quá trình xây dựng, chúng tôi đã tích lũy được những kinh nghiệm làm web rất quý giá. Do đó chúng tôi nóng lòng chia sẻ ngay kinh nghiệm làm web với các bạn đang đọc bài này. Các bạn là những đồng nghiệp, khách hàng và bạn bè. Những người đang có dự định xây dựng trang web cho riêng mình.

Những kinh nghiệm làm web này sẽ không biến các bạn thành chuyên gia web đâu. Nhưng nó sẽ cung cấp các thông tin quan trọng nhất thiết không thể bỏ qua khi xây dựng trang web. Mời các bạn theo dõi.

Trong con mắt của kiến trúc sư, trang web không khác gì một dự án xây dựng.

Để bắt đầu làm một trang web, cái chúng ta cần là một hosting (có thể ví như một khu đô thị trong đó có lô đất của dự án). Một tên miền (có thể ví như địa chỉ để mọi người dễ tìm), một giao diện tương tác (Có thể ví như chính công trình và các tiện ích bên trong nó). Tất cả các thứ trên đều có thể thuê theo năm.

Với homa-architects.com, các yếu tố trên được thiết lập như sau:

Host: A2hosting – đây là host tại Mỹ, được một người bạn giới thiệu, giá thuê theo năm rất hợp lý và nhiều tiện ích như: vô hạn địa chỉ email, security rất tốt, đội ngũ vận hành hỗ trợ chuyên nghiệp và kịp thời.

Tên miền: HOMA-architects.com – tên miền này mua tại name.com, đóng phí 2 năm 1 lần

Tư vấn thiết kế giao diện đồ họa: Chuyên gia đồ họa Haru-Rabit

Thiết kế viết code, bảo trì: Công ty thiết kế web ElightUp team.

Đội ngũ vận hành: HOMA architects team

Bước 1: Bứt đầu, à quên, Bắt đầu từ việc xác định:

Xác định nhiệm vụ trang web. Đây là cái bạn cần giao cho bên viết code, nên nó phải rất rõ ràng. Các định hướng lớn về cách trang xuất hiện và tương tác với người xem. Ấn tượng mà mình muốn tạo ra, giá trị mình muốn in dấu, thứ tự ưu tiên, vấn đề bản quyền…
Xác định các khó khăn thiếu thốn: Thiếu các hiểu biết cơ bản về kinh nghiệm làm web. Các ngôn ngữ viết web hiện có với các lợi thế hay nhược điểm. Các nội dung còn thiếu như ảnh chất lượng studio của team,
Xác định các lợi thế: Văn phòng HOMA đã có bề dày tích lũy một số lượng lớn các dự án đã làm, với hình ảnh đẹp và text cho cả 2 ngôn ngữ Anh và Việt. Nên code xong là có thể lấp đầy trang web bằng các nội dung phong phú luôn.

Định hướng của HOMA architects:

Tập trung vào trải nghiệm của người xem. Phải chân thực và trung thành với các giá trị cốt lõi của văn phòng.
Performance cao: ảnh và media phải nhẹ. Tốt nhất là chuẩn bị nội dung các file nhẹ trong máy nội bộ trước khi up lên web

Bước 2: Xây dựng kịch bản

Kịch bản là cách bạn muốn người xem khám phá trang web theo trình tự nào. Các nội dung nào cần tiếp cận với họ trước tiên, nội dung nào dành cho những người dành nhiều thời gian tìm hiểu sâu hơn. Ví dụ trang web của HOMA cho các dự án đã thực hiện lên trước. Cuộn xuống phía dưới là nội dung các dịch vụ tư vấn và đội ngũ. Dưới cùng là trường để khách nhập thông tin liên hệ một cách tiện nhất. Các thông tin sâu hơn về phương pháp luận, triết lí hành nghề, các bài blog hay các thông tin tuyển dụng được để ở các trang sâu hơn. Các nút liên kết được xếp trên một thanh công cụ xinh xắn luôn hiển thị bên trên cùng của trang.
Tham khảo: Việc tham khảo kinh nghiệm làm web của các công ty khác rất có ích. Nó cho biết nhiều góc độ tiếp cận, giúp bạn có cái nhìn toàn diện và thấu đáo hơn là chỉ chạy theo các ý thích nhất thời. Ở đây chúng mình đã tham khảo rất nhiều trang web. Chủ yếu là trang web của các văn phòng thiết kế đình đám trên thế giới. Hiểu được thông điệp họ truyền tải tới người xem. Và cái giá họ phải trả cho việc truyền tải thông điệp đó. Có trang thì quá đẹp nhưng khó hiểu, có trang thì quá nhiều hình ảnh đẹp. Có trang thì bí hiểm, đánh đố người xem, có trang thì hàn lâm, có trang thì rất bình dị, có trang đậm tính thương mại.

Bước 3: Thiết kế giao diện đồ họa cho trang web

Tính nhất quán: Một trang web đẹp khi nó đơn giản và nhất quán. Quá nhiều phong cách hoặc việc trình bày khác nhau cho những nội dung tương đương nhau là những sai lầm khiến trang web nhìn không chuyên. Nghe thì rất đơn giản nhưng khi bắt tay vào thực hiện sự nhất quán này mới thấy nó vắt kiệt sức thế nào. Nhất là với những người cầu toàn như Homa architects.
Về giao diện tương tác web: tùy ngành nghề và dịch vụ mà thiết kế giao diện sẽ cần phù hợp cho đối tượng khách hàng mình nhắm tới. Nếu đối tượng khách trẻ trung và mặt hàng đồ chơi công nghệ… sẽ cần giao diện tươi tắn bắt mắt. Nếu khách hàng trên 50 tuổi sẽ cần chữ to dễ đọc và ít lòe loẹt….Khách hàng HOMA đều có chung đặc điểm là có gu thẩm mỹ cao, kỹ tính, rất ít thời gian. Vì thế, chúng tôi lựa chọn giao diện đơn giản và giảm đến mức tối đa thời gian load trang. Chúng tôi cắt giảm hầu hết các hiệu ứng đồ họa để khách có thể tập trung vào nội dung mình tìm kiếm nhanh nhất.
Về các đối tượng đồ họa trên trang, hiện có rất nhiều cách bố trí đa dạng bắt mắt. Chúng tôi chọn cách bố trí đơn giản ngay ngắn. Với cách bố trí này, Homa team tốn rất nhiều công sức kiểm tra các đối tượng có cùng kích cỡ. Chúng tôi phải kiểm tra xem các đối tượng có được gióng thẳng hay không. Bù lại, người xem sẽ có cảm giác ngăn nắp dễ chịu và tập trung sự chú ý vào các nội dung chính là các dự án chúng tôi thiết kế.
Font chữ/ các ngành nghệ thuật thường thích các font chữ độc đáo và design đẹp. Nhưng hết sức cẩn thận việc lựa font chữ khi trang của bạn chạy nhiều ngôn ngữ. Có thể font tiếng Anh rất ổn nhưng font đó ko hề support tiếng Việt. Mình ko thể chọn được font avantgarde cho tiếng Việt nên đã phải chọn font thay thế bằng quicksand cho tiếng Việt. May là quicksand cũng đẹp ko kém avantgarde, và nếu không nói lộ ra chắc ít ai để ý dến sự khác biệt. Quicksand có nét gì đó mềm mại hơn avantgarde 1 chút.
Về bổ xung các media, chụp ảnh team. Team của bạn nhất định phải đẹp lung linh và không gì bằng một buổi cả team cùng nhau sống ảo.

Bước 4: Làm việc với đơn vị thiết kế web

Bạn có thể yêu cầu trang web tương tác hầu như theo bất cứ cách nào bạn thích, miễn là bạn có đủ tiền và thời gian. Tuy nhiên việc người khác nhìn nhận nó có thân thiện và hữu ích không lại là việc khó hơn. Đối tượng khách hàng và quan điểm của công ty định hình phương thức giao tiếp với khách hàng qua trang web. Bạn cần thực sự hình dung rõ ràng những thứ sau:

Những gì mình mong muốn nhưng buộc phải gạt bỏ vì có thể khách hàng sẽ không quan tâm.
Những gì mình thấy các trang web khác đang có (xem bước tham khảo). Những gì mình muốn được giống như họ, những gì muốn khác với họ.

Khi làm hợp đồng với đơn vị thiết kế web, hãy chắc chắn rằng bạn không bỏ sót các nội dung sau:

Chọn nền tảng cho ngôn ngữ lập trình: WordPress, Joomla, Shopify, Magento, Wix, Drupal. Tùy vào nhu cầu của bạn, đôi ngũ lập trình sẽ tư vấn cho bạn nên dùng nền tảng nào. HOMA architects sử dụng nền tảng Word press bởi khả năng linh hoạt và tính mở của nó. Tuy nhiên việc sử dụng nhiều plugin của bên thứ ba cũng có thể làm bạn bận tâm về sau.
Tính tùy biến cho người quản trị: Trang web bên cạnh việc tương tác dựa vào code, còn phải có khả năng tùy biến rộng. Điều này giúp admin có khả năng điều chỉnh linh hoạt về bố cục, phương thức tương tác và format text…Sẽ rất bất tiện nếu bạn không thể thay đổi độ đậm nhạt, highlight các nội dung quan trọng hoặc bố cục hình ảnh trong bài viết.
Bàn giao lại toàn bộ nội dung phần code: Bạn nên làm rõ với bên viết code về việc bàn giao lại toàn bộ nội dung bản code cho bên bạn lưu trữ. Thông thường khi chuyển giao sản phẩm, nội dung này mặc định thuộc về bạn.
Thống nhất số lần điều chỉnh. Quy định rõ ràng và chi tiết các việc coder cần làm – tránh tính phát sinh. Phát sinh làm tốn thời gian và tiền của tất cả các bên. Mặc dù biết là không thể tránh được, nhưng cần thống nhất ngay từ đầu số lần điều chỉnh để hai bên nếu có phát sinh cũng phải vui vẻ. Chúng tôi đã phải điều chỉnh phát sinh đến tận 3 lần.
Vấn đề ngôn ngữ. Nếu trang web là song ngữ, chắc chắn nên để chế độ chuyển như 1 nút switch. Quan trọng là khi chuyển ngôn ngữ, người xem vẫn ở tại trang mình đang xem. Họ không bị chuyển về trang home. (Bạn có thể thử tính năng này bằng cách click vào lá cờ nhỏ góc trên bên phải trang web của HOMA để xem nó tiện thế nào). Nếu trang web nhiều hơn 2 ngôn ngữ. Nút switch có thể thành một danh mục thả xuống để người xem lựa chọn ngôn ngữ phù hợp.
Vấn đề quản trị: Phát sinh do vấn đề ngôn ngữ. Nếu bạn thiết lập 2 ngôn ngữ trong cùng 1 account quản trị thì sẽ tiện hơn. Vì mỗi lần đăng nội dung, chỉ cần 1 lần đăng ảnh, và các ảnh sẽ nhất quán. Điều này cũng tốn ít bộ nhớ của host hơn. Nếu bạn để hai ngôn ngữ ở 2 trang riêng biệt thì giống như bạn vận hành 1 lúc 2 trang web khác nhau. Điều này dẫn đến tăng gấp đôi công sức up content và công tác backup. Nó cũng tốn gấp đôi dung lượng trên host. Đồng thời nhiều khả năng không đạt được sự nhất quán giữa nội dung 2 trang. Chưa nói đến các hệ lụy khi chạy SEO. Bởi vậy, tốt nhất là thống nhất ngay từ đầu như sau. Mỗi bài post bao gồm ảnh chung cho bài. Bên cạnh đó là các trường khác nhau để nhập các text ngôn ngữ khác nhau. Có thêm tùy chọn thêm ngôn ngữ (thêm trường về text). Ở giao diện người dùng, khi chọn ngôn ngữ nào thì chỉ duy nhất ngôn ngữ đó hiển thị.
Các hiệu ứng động: Các hiệu ứng động khiến trang web sinh động hơn. Thiếu nó người ta bị cảm giác như đang đọc một trang báo giấy. Tuy nhiên lạm dụng hiệu ứng động sẽ làm trang web của bạn có vẻ lạc hậu. Với HOMA-architects.com, chúng tôi giữ nó càng đơn giản và tối thiểu càng tốt. Các ảnh đẹp được chọn để đưa lên các slide phân trang lớn. Các logo khách hàng và đối tác được sắp xếp dạng băng truyền. Chúng dừng lại mỗi khi đưa chuột qua. Mặc dù, đây là các hiệu ứng tưởng như đơn giản nhất. Nhưng cũng tốn khá nhiều công sức của các bên.
Về tính tương thích các trình duyệt khác nhau và các thiết bị khách nhau. Việc kiểm tra trang web trên các thiết bị phổ biến, các trình duyệt phổ biến là rất quan trọng. Có thể trang của bạn lung linh trên Chrome nhưng xấu tệ trong IE. Đừng coi thường, lão IE đang được Microsoft dần đưa quay trở lại chứ ko hề bị lãng quên đâu. Cũng có thể web bạn hoạt động trơn tru trên PC nhưng bug như điên trên các smart devices khác.
Về quản lý các dự liệu media trên host theo các thư mục. Quản lý sẽ tiện hơn rất nhiều nếu thư viện media cho phép các bạn lập thư mục cho các dự án trên trang admin.
Các vấn đề hậu thiết kế web: Sao lưu ngay sau khi hoàn tất, sao lưu định kỳ. Trang web là nơi tích lũy các sản phẩm đẹp nhất. Giá trị của nó tăng theo thời gian. Bởi vậy chắc chắn bạn cần sao lưu định kỳ để không rủi ro nào có thể xóa sổ công sức của cả team.
Ngoài ra bạn cần lưu ý một loạt các vấn đề nhỏ khác mà nếu nói hết ra thì bài viết sẽ bị loãng. Tuy nhiên sẽ rất có ích nếu bạn đưa chúng vào to-do-list của web admin:

Tối ưu hóa SEO
Bảo vệ trang web
Các vấn đề vận hành bảo trì trang web từ nay về sau
Bảo hiểm chống hack,
Bảo vệ trang web của bạn khỏi spam tự động. (Kiểm soát các trường nhập thông tin của khách liên hệ, đây là kẽ hở cho robot spam). Web của HOMA sử dụng hệ thống Capcha của Google.
Vấn đề bản quyền logo
Các tuyên bố về bản quyền
Điều quan trọng nhất dành ở phút cuối cùng:

Kết luận lại:

Trang web của một tập thể luôn cần có sự trao đổi với team nội bộ và team lập trình trong suốt quá trình. Các ý kiến của mọi người đã giúp cho chúng tôi tránh các sai lầm một cách rất hiệu quả. Quan trọng là ai cũng happy trong suốt quá trình cùng nhau xây dựng nó.

Sau khi đã xong bản nháp nên gửi trang web đến những người bạn tin tưởng ở một lĩnh vực nào đó. Điều này sẽ giúp bạn hoàn thiện rất nhiều về mọi mặt trang web: thẩm mỹ và công năng. Đây là việc nghe đơn giản nhưng không phải vậy. Nếu bạn gửi quá tràn lan, bạn sẽ mất phương hướng. Bởi vậy hãy gửi hết sực chọn lọc. Trang web homa-architects.com dễ thương mà bạn đang trải nghiệm là kết quả của rất nhiều góp ý của bạn bè và khách hàng. Tất cả đều được trân trọng và cân nhắc kỹ, quả thực đã mang lại rất nhiều cải thiện tích cực.

Sau 4 tháng làm việc cật lực với những người bạn đồng hành cực kỳ tài năng và nhiệt huyết. Chúng mình đã xây xong ngôi nhà online của HOMA và sẵn sàng mời các bạn ghé thăm. Rất hy vọng qua trang web sẽ có cơ hội được tư vấn thiết kế cho các bạn trong tương lai.

Cám ơn bạn Haru-Rabit : đã cho một thiết kế đồ họa rất phù hợp, đúng với những tâm tư nguyện vọng mà HOMA gửi gắm nhưng không biết diễn đạt bằng đồ họa thế nào. Bạn quả là phù thủy đồ họa.

Cám ơn team elightUp: Đã đồng hành xây dựng web cùng HOMA. Cám ơn các bạn vì tài năng, lòng dũng cảm và sự kiên nhẫn các bạn đã dành cho chúng tôi. Làm việc cùng các bạn là một trải nghiệm tuyệt vời. Chúng tôi sẽ không chần chừ giới thiệu team elightup tới bất kì một đối tác nào muốn xây dựng web chất lượng cao.

Cám ơn toàn thể anh chị em bạn bè đã cho ý kiến hoàn thiện trang web.

Với những người đang có dự định xây dựng trang web cho riêng mình. Chúng tôi thành thật cổ vũ các bạn: Hãy làm đi ! Hy vọng những kinh nghiệm của chúng tôi qua chia sẻ trên đây sẽ giúp các bạn có một trang web như ý và hiệu quả nhất.

Kiến trúc sư Homa