Trong bài đăng này, TaiNgheTroThinh sẽ chỉ dẫn bạn cách thiết kế một website chuyên nghiệp và hiệu quả. Dù rút cuộc thì thiết kế như thế nào chủ yếu là ở bạn, nhưng vẫn có một vài điểm then chốt mà bạn cần lưu ý trước khi tiến hành.
những bước
Phần 1Phần 1 Thiết kế website của bạn
1Xác định liệu bạn có muốn dùng công cụ dựng website hay không. Để tự làm hoàn toàn, bạn cần có kiến thức kha khá về lập trình HTML. Trong khi đó, bạn có thể dùng những dịch vụ máy chủ miễn phí như Weebly, Wix, WordPress hay Google Sites. Với người mới, việc dùng công cụ dựng website thường dễ dàng hơn rất nhiều so với HTML. Nếu muốn tự lập trình để tạo website, bạn nên học cả HTML và CSS.Nếu không mặn mà với việc đầu tư thời gian và công sức vào việc tự tạo website, bạn cũng có thể dùng dịch vụ thiết kế website. Chi phí phải trả cho những nhà thiết kế web làm việc tự do có thể dao động trong khoảng từ 600.000 đồng cho đến hơn 2.000.000 đồng một giờ.2Phác thảo trang của bạn. Trước cả khi mở công cụ dựng web, bạn cần hình dung được số trang mà bạn muốn, nội dung của chúng cũng như bố cục chung của những trang quan trọng như trang chủ và trang “Giới thiệu”. Thay vì chỉ quyết định nội dung nên được hiển thị thế nào, việc phác thảo sơ lược ra giấy có lẽ sẽ giúp bạn dễ hình dung giao diện của từng trang trong website hơn.3dùng thiết kế trực quan. Sáng tạo hẳn là có nhiều ưu điểm, nhưng thiết kế cơ bản của website vẫn nên tuân theo những chỉ dẫn đã được công nhận như: Tùy chọn điều hướng (ví dụ như thẻ mở trang) nên được đặt ở đầu trang.Nếu dùng biểu tượng trình đơn (☰), bạn nên đặt nó ở góc trên bên trái của trang.Nếu dùng thanh tìm kiếm, bạn nên để nó ở gần phía trên bên phải của trang.Những liên kết hữu ích (ví dụ như liên kết đến trang “Giới thiệu” hay trang “Liên hệ”) nên được để ở cuối mỗi trang.4Hãy nhất quán. Dù chọn phông chữ, màu sắc, giao diện và thiết kế thế nào, bạn cũng cần nhất quán với những lựa chọn đó. Sẽ rất khó chịu khi vừa làm quen với một phông chữ hay lựa chọn màu sắc ở trang chủ rồi lại bắt gặp một phông chữ hay lựa chọn màu sắc hoàn toàn khác biệt ở trang “Giới thiệu”.Ví dụ, nếu trang chủ đã dùng toàn tông màu lạnh thì bạn đừng nên dùng màu sáng, sặc sỡ cho trang tiếp theo.Nhớ rằng dùng màu nổi hay tương phản, đặc biệt là màu động, có thể kích hoạt chứng động kinh ở một vài nhỏ người dùng web. Nếu muốn dùng những màu đó cho trang của mình, bạn cần thêm cảnh báo về động kinh trước mọi trang liên quan.5Thêm tùy chọn điều hướng. Đặt liên kết trực tiếp đến những trang quan trọng ở đầu trang chủ để “chỉ đường” đến những nội dung thiết yếu cho người lần đầu ghé thăm. Hầu hết công cụ dựng website đều mặc định thêm những liên kết này. Mọi trang trên website cần phải truy cập được không chỉ qua địa chỉ trang mà còn qua những tùy chọn có trong website.6dùng màu sắc bổ trợ cho nhau. Cũng như mọi loại hình thiết kế khác, thiết kế website dựa trên sự kết hợp những màu sắc dễ nhìn. Do đó, việc chọn những màu giao diện có thể bổ trợ cho nhau là rất quan trọng. Nếu bạn chưa biết bắt đầu từ đâu thì đen, trắng và xám là một sự kết hợp không tồi.7Xem xét dùng thiết kế tối giản. Chủ nghĩa tối giản khuyến khích dùng tông màu lạnh, những trang văn bản màu đen nền trắng và càng tiết chế thêm thắt càng tốt. Bởi cần ít yếu tố hoa mỹ nên chủ nghĩa tối giản là cách dễ dàng để có được một website chuyên nghiệp và hấp dẫn mà không tốn quá nhiều công sức. Nhiều công cụ dựng website có giao diện “tối giản” để chọn khi thiết lập.”Thô mộc” là một lựa chọn khác thay thế cho tối giản. Phong cách này dùng những đường dứt khoát, màu sắc tươi sáng, chữ in đậm và rất ít hình ảnh. Thô mộc ít được dùng hơn tối giản nhưng tùy vào nội dung website, có thể phong cách này sẽ phù hợp hơn với yêu cầu thiết kế của bạn.8Có những lựa chọn độc đáo. Bố trí nội dung thẳng hàng hay thành từng ô là lựa chọn an toàn. Tuy nhiên, một vài chi tiết mang tính cá nhân độc đáo sẽ đem lại cho website nét chấm phá cá nhân cũng như trở nên nổi bật.Đừng ngần ngại đi ngược xu hướng với việc bố trí bất cân xứng những yếu tố web hay dùng phép chồng lấn để có được giao diện nhiều lớp.Dù trang nhã nhưng những góc sắc nét và những thiết kế đối lập (còn được gọi là “card-based” – thiết kế theo phong cách thẻ) ít được dùng hơn những thiết kế tròn, mềm mại
Phần 2Phần 2 Tối ưu hóa hiệu suất hoạt động của website
1Tận dụng những tùy chọn tối ưu hóa cho những thiết bị di động. Lưu lượng truy cập web đến từ thiết bị di động nhiều hơn máy tính, nghĩa là phiên bản dành cho di động của website cần được quan tâm ít nhất là ngang bằng với phiên bản dành cho máy tính. Hầu hết dịch vụ dựng website đều tạo phiên bản di động tự động. Tuy nhiên, với phiên bản này, bạn vẫn nên lưu ý những điểm dưới đây: Đảm bảo những nút (chẳng hạn như liên kết trang) lớn và dễ bấm.Tránh dùng tính năng không hiển thị trên di động (chẳng hạn như Flash, Java, v.v.)Cân nhắc tạo ứng dụng di động dành cho website của bạn.2Tránh dùng quá nhiều hình trong một trang. Cả trình duyệt dành cho máy tính và trình duyệt di động đều có thể phải vật lộn để tải những trang hiểu thị quá nhiều hình ảnh và video. Dù hình ảnh là yếu tố quan trọng trong thiết kế web, nhưng việc dùng nhiều hơn một vài hình ảnh trong một trang có thể kéo dài thời gian tải một cách không cần thiết và khiến người dùng không muốn vào trang đó. Nhìn chung, những trang của website nên có thời gian tải dưới 4 giây.3Thêm trang “Liên hệ”. Hầu như website có tiếng nào cũng có trang “Liên hệ”, trình bày thông tin liên hệ (chẳng hạn như số điện thoại và địa chỉ email). một vài thậm chí còn có bảng câu hỏi tích hợp sẵn. Trang “Liên hệ” cho phép người dùng trao đổi trực tiếp với bạn, và do đó giúp bạn có thêm giải pháp khi người dùng cảm thấy không hài lòng. 4Tạo trang báo lỗi 404 riêng. Khi có người vào trang nào đó chưa được thiết lập hoặc không tồn tại trên trang của bạn, trang báo lỗi “404 Error” sẽ được hiển thị. Hầu như trình duyệt
nào cũng có trang 404 mặc định. Tuy nhiên, có lẽ bạn vẫn có thể tùy chỉnh trang báo lỗi của mình từ phần thiết lập của công cụ dựng web. Nếu vậy, dưới đây là những chi tiết cần có: Một thông báo lỗi vui vẻ (chẳng hạn như “Xin chúc mừng: bạn vừa tìm được trang lỗi của chúng tôi!”)Một liên kết đến trang chủMột danh sách những liên kết thường được truy cậpMột hình ảnh hay logo dành cho website của bạn5Nếu được, hãy dùng thanh tìm kiếm. Nếu phương pháp dựng web của bạn có hỗ trợ việc thêm thanh tìm kiếm vào website, bạn hãy tận dụng điều này. Khi đó, người dùng có thể nhanh chóng tìm đến một trang hay một mục nhất định mà không phải thao tác qua nhiều nút điều hướng. Thanh tìm kiếm cũng rất hữu dụng trong trường hợp người đọc muốn tìm một thuật ngữ chung nào đó và không muốn mò mẫm.6Dành nhiều thời gian nhất cho trang chủ. Khi truy cập vào website của bạn, người dùng cần mường tượng được ngay chủ đề của nó. Thêm vào đó, mọi nội dung trong trang chủ, bao gồm tùy chọn điều hướng và mọi hình ảnh, cần được tải một cách nhanh chóng. Trang chủ của bạn nên có:Một lời kêu gọi hành động (ví dụ như một nút để bấm hoặc một mẫu để điền thông tin)Một trình đơn hoặc thanh điều hướngMột lời chào mời bằng hình ảnh đồ họa (ví dụ như một bức hình xuất sắc, video hay một nhóm nhỏ hình ảnh đi kèm chú giải)Từ khóa liên quan đến dịch vụ, chủ đề hay nội dung trung tâm của website7Thử website bằng nhiều trình duyệt trên nhiều nền tảng. Bước này đặc biệt quan trọng bởi trình duyệt khác nhau có thể sẽ có cách thức xử lý những thành phần của website khác nhau. Trước khi bắt đầu quảng bá website của mình, hãy thử truy cập và dùng nó trên những trình duyệt dưới đây với nền tảng Windows, Mac, iPhone và Android: Google ChromeFirefoxSafari (chỉ dành cho iPhone và Mac)Microsoft Edge và Internet Explorer (chỉ với Windows)Trình duyệt tích hợp sẵn trên một vài điện thoại Android (ví dụ như Samsung Galaxy, Google Nexus, v.v.)8Tiếp tục cập nhật website qua thời gian. Theo thời gian, xu hướng thiết kế, liên kết, hình ảnh, ý tưởng và từ khóa đều thay đổi. Do đó, để không bị lỗi thời, bạn cần không ngừng đổi mới website. Việc này đòi hỏi bạn phải kiểm tra hoạt động của website cùng những trang tương tự ít nhất ba tháng một lần (thường xuyên hơn nếu có thể)
Lời khuyên
Khả năng tiếp cận là khía cạnh quan trọng khác của việc phát triển website, bao gồm phụ đề dành cho người khiếm thính, mô tả bằng âm thanh cho người khiếm thị và cảnh báo cảm quang nếu website dùng hiệu ứng có thể gây co giật.Hầu hết công cụ dựng web đều cung cấp bộ giao diện mẫu để bạn củng cố thiết kế và bố cục trang trước khi thêm những nội dung mà bạn yêu thích.
Cảnh báo
Nghiên cứu luật bản quyền và tránh đạo ý tưởng: đừng thêm hình ảnh ngẫu nhiên từ mạng hay thậm chí là những thiết kế kết cấu khi chưa được phép.Hầu hết dịch vụ dựng web đều miễn phí. Tuy nhiên, nếu muốn dùng tên miền riêng (chẳng hạn như “www.tên_của_bạn.com” thay vì “www.tên_của_bạn.wordpress.com”), bạn sẽ phải trả phí tháng hoặc năm.
