Khi làm theo, hướng dẫn này sẽ chứng tỏ là một nguồn tài nguyên thiết kế web có giá trị, đặc biệt nếu bạn dự định sử dụng phần mềm phát triển trang web trong tương lai. Từ người thiếu kinh nghiệm đến người có kinh nghiệm, hướng dẫn này đều có nội dung dành cho tất cả mọi người.

Quá trình thiết kế web tuyệt vời Để đảm bảo rằng tất cả chúng ta đều hiểu nhau, hãy bắt đầu với định nghĩa cơ bản về “thiết kế web”. Theo Wikipedia, thiết kế web là:

“một quá trình khái niệm hóa, lập kế hoạch, mô hình hóa và thực hiện phân phối phương tiện điện tử qua Internet dưới dạng ngôn ngữ Đánh dấu phù hợp để trình duyệt Web giải thích và hiển thị dưới dạng giao diện người dùng đồ họa” .

Quá trình thiết kế web có thể được so sánh với quá trình viết một bài nghiên cứu. Trong giai đoạn lên ý tưởng/lập kế hoạch, sơ đồ (phác thảo) được tạo để minh họa cấu trúc điều hướng trang web của bạn. Trong giai đoạn lập mô hình, các wireframe tĩnh được tạo (bản nháp thô) để minh họa bố cục khung cho từng phần trên trang web của bạn. Sau khi khung dây được tạo, đồ họa, màu sắc và văn bản sẽ được sử dụng để tạo thiết kế trang web của bạn dựa trên bố cục của khung dây. Trong giai đoạn thực hiện, thiết kế của bạn được chuyển đổi thành định dạng được trình duyệt web hỗ trợ, văn bản và nội dung được thêm vào, và cuối cùng, trang web của bạn được xuất bản trực tiếp lên Internet để cả thế giới xem (bản phác thảo cuối cùng).

Cả ba giai đoạn của quá trình thiết kế đều quan trọng như nhau. Nhiều nhà thiết kế web bỏ qua một giai đoạn để tiết kiệm thời gian hoặc vì họ cho rằng điều đó không cần thiết. Tuy nhiên, cả ba giai đoạn đều cần thiết nếu mục tiêu của bạn là tạo ra một thiết kế thành công và trang web đáng kính. Ngay cả khi sử dụng ba giai đoạn này, vẫn có rất nhiều sai sót mà các nhà thiết kế web có thể mắc phải dẫn đến các trang web kém chất lượng, không thân thiện với người dùng. Đã đến lúc loại bỏ những phương pháp thiết kế web tồi và bổ sung những phương pháp tốt vào đó.

Giai đoạn 1: Lên ý tưởng và lập kế hoạch
Giai đoạn này bị bỏ qua thường xuyên hơn hai giai đoạn còn lại. Hầu hết người viết không thích tạo dàn ý cho các tài liệu nghiên cứu và hầu hết các nhà thiết kế web cũng không thích tạo sơ đồ. Đừng lười biếng. Nếu bạn nỗ lực và lên kế hoạch cho trang web của mình, thì bạn sẽ thấy quá trình thiết kế web diễn ra suôn sẻ và ít mắc phải sai sót hơn trong quá trình thực hiện.

Có một số điều bạn sẽ cần để lên ý tưởng và lập kế hoạch cho trang web của mình một cách hiệu quả:

  • một bộ não
  • một cây bút và tờ giấy
  • (tùy chọn) phần mềm lưu đồ
  • ý tưởng chung về các phần khác nhau trên trang web của bạn

Để bắt đầu, hãy lấy bút và giấy hoặc khởi chạy phần mềm lưu đồ yêu thích của bạn. Chúng tôi sử dụng OmniGraffle Professiona cho Mac OS X với giá 150 USD cho mỗi giấy phép nhưng rất đáng giá nếu bạn tạo trang web thường xuyên. Nếu bạn đang sử dụng PC thì SmartDraw là một phần mềm lưu đồ MIỄN PHÍ tuyệt vời mà bạn có thể sử dụng. Tuy nhiên, bút và giấy vẫn hoạt động tốt.

Có nhiều phương pháp để tạo sơ đồ. Chúng tôi sẽ chỉ cho bạn cách cơ bản nhất để làm điều đó vì thời gian và độ dài của bài viết này. Nếu bạn muốn tìm hiểu thêm về sơ đồ, hãy tìm kiếm sơ đồ trên Google hoặc Yahoo.

cờ

Xem sơ đồ mà chúng tôi đã tạo khi khái niệm hóa Trang web Chromatic. (1) Ở đầu sơ đồ, chúng tôi liệt kê tên trang web của chúng tôi. (2) Tiếp theo, chúng tôi bao gồm từng phần chính trên trang web của mình: Trang chủ, Giới thiệu và Dịch vụ. Những phần này là điều hướng chính cho trang web của bạn. Tên của từng phần sẽ hoàn toàn phụ thuộc vào nội dung trang web của bạn. Cố gắng sử dụng càng ít phần càng tốt để khách truy cập không bị choáng ngợp khi điều hướng qua trang web của bạn.

(3) Tiếp theo, thêm tất cả các trang phụ (tiểu mục) sẽ được liệt kê trên mỗi trang chính. Đối với Trang chủ, chúng tôi đã bao gồm Thiết kế web chuyên nghiệp, Phát triển web và Tối ưu hóa công cụ tìm kiếm. Điều hướng phụ cần phải mang tính mô tả nhiều hơn điều hướng chính. Hệ thống phân cấp điều hướng của trang web của bạn càng đi sâu thì mỗi nhãn càng phải mang tính mô tả.

Dos

  • Càng đơn giản càng đẹp; giữ số lượng phần chính ở mức tối thiểu. Chúng tôi sử dụng 6 phần trên trang web của mình là quá đủ
  • Cho dù bạn sử dụng bút, giấy hay phần mềm lưu đồ, hãy giữ mọi thứ sạch sẽ và ngăn nắp nhất có thể. Mặc dù bạn (và bất kỳ ai làm việc với bạn) là những người duy nhất sử dụng sơ đồ nhưng nó vẫn cần phải có ý nghĩa -Các phần chính của bạn nên sử dụng các thuật ngữ rộng hơn, trong khi các thuật ngữ phụ và cấp ba phải mang tính mô tả nhiều hơn

những điều không nên làm
Việc tạo một sơ đồ khá đơn giản; tuy nhiên, có một số sai lầm có thể dễ dàng mắc phải:

  • Không sử dụng các thuật ngữ mang tính mô tả quá cao trong điều hướng chính trừ khi toàn bộ trang web của bạn tập trung vào một chủ đề hẹp -Đừng thử gộp nhiều chủ đề trên cùng một trang. Tạo một phần chung cho các chủ đề này và từ phần đó tạo các phần phụ. Điều này sẽ làm cho các trang web có mục con (mô tả) có nhiều khả năng có thứ hạng tốt hơn trong các công cụ tìm kiếm (Google, Yahoo, MSN, Ask) Khi bạn đã tạo được sơ đồ quy trình ngắn gọn và mang tính mô tả, bạn đã sẵn sàng chuyển sang giai đoạn thứ hai của quá trình thiết kế web:

Giai đoạn 2: Lập mô hình
Ở giai đoạn lập mô hình, các mô hình “khung dây” tĩnh được tạo. Mỗi mô hình minh họa khung bố cục cơ bản cho từng trang web sẽ được đưa vào trang web của bạn. Giai đoạn này rất quan trọng vì nó cho chúng ta ý tưởng về vị trí các yếu tố khác nhau sẽ được đặt trong thiết kế của chúng ta. Một số yếu tố này là:

  • Logo
  • trình đơn điều hướng
  • nội dung
  • hình ảnh, video

Để tạo những mô hình này, bạn có thể sử dụng bút và giấy hoặc phần mềm mô hình ưa thích của mình. Trước đây chúng tôi sử dụng Photoshop nhưng gần đây chúng tôi sử dụng OmniGraffle Professional. OmniGraffle không sử dụng nhiều tài nguyên như Photoshop và nó cho phép chúng tôi lắp ráp các mô hình wireframe của mình nhanh hơn nhiều.

Ngoài ra, hãy đảm bảo rằng bạn có (các) sơ đồ mà bạn đã tạo ở gần vì thỉnh thoảng bạn sẽ cần tham khảo chúng để đảm bảo rằng bạn đang mô phỏng tất cả các trang sẽ xuất hiện trên trang web của mình.

Đây là ví dụ của chúng tôi về giao diện của mô hình wireframe. Như bạn có thể thấy, không có màu sắc hoặc đồ họa nào đi kèm. Đây chính xác là cách một mô hình wireframe phải diễn ra – một bố cục khung cho thiết kế của bạn. Mục đích là để có thể có ý tưởng chung về vị trí đặt từng thành phần của trang web.

Chúng tôi thường bắt đầu từ trên cùng bên trái và đi xuống phía dưới. Không có một hình thức cụ thể nào cho wireframe. Sử dụng trí tưởng tượng của bạn. Tuy nhiên, hãy đảm bảo rằng khi tạo wireframe, bạn không quên đưa vào các yếu tố quan trọng nhất của trang web (logo, menu điều hướng, vị trí nội dung, vị trí hình ảnh/video).

Nếu một số trang của bạn sử dụng cùng một bố cục thì không cần thiết phải mô phỏng tất cả các trang đó (mặc dù bạn chắc chắn có thể làm được). Chỉ cần đảm bảo mô phỏng bất kỳ bố cục độc đáo nào mà trang web của bạn sẽ có. Bạn sẽ cảm ơn chính mình sau này.

cờ

Việc làm

  • mô phỏng tất cả các trang độc đáo
  • bao gồm các yếu tố quan trọng (logo, điều hướng, vị trí nội dung, vị trí hình ảnh/video) -bắt đầu từ trên xuống và thực hiện theo cách của bạn -tham khảo sơ đồ đã tạo ở giai đoạn 1 để bạn không quên mô phỏng bất kỳ trang nào -lưu, lưu, lưu – giống như mọi thứ trên máy tính, lưu (các) mô hình của bạn sau mỗi 10 phút hoặc lâu hơn
  • tập trung vào bố cục gọn gàng, thân thiện với người dùng -gắn nhãn cho các thành phần của bạn để bạn không quên chúng là gì khi tham chiếu chúng ở giai đoạn 3, thực thi -sử dụng các trang web khác làm nguồn cảm hứng; không có gì sai khi lấy các yếu tố từ các trang web khác và biến chúng thành của riêng bạn (xem phần “không nên”)

những điều không nên

  • không bao gồm đồ họa hoặc màu sắc (đó là dành cho giai đoạn tiếp theo) -đừng làm cho mô hình của bạn quá “bận rộn”; tập trung vào bố cục sạch sẽ, được tổ chức tốt, thân thiện với người dùng -đừng bỏ qua giai đoạn này; nó cũng quan trọng như cái đầu tiên và cái cuối cùng - nếu bạn lấy các yếu tố từ các trang web khác, hãy đảm bảo bạn không đạo văn; có sự khác biệt giữa việc lấy cảm hứng từ một trang web khác để tạo ra các yếu tố nhất định trong thiết kế của bạn và việc sao chép bố cục và màu sắc của chúng một cách trắng trợn

Giai đoạn 3: Thực hiện
Trong giai đoạn thứ ba và cuối cùng, thực hiện, lập kế hoạch từ giai đoạn 1 và 2 được kết hợp để hỗ trợ tạo ra một trang web tương tác trực tiếp.
Giai đoạn thứ ba tốn nhiều thời gian nhất vì bạn sẽ 1) tạo đồ họa 2) tạo nội dung và cuối cùng là 3) chuyển đổi thiết kế web từ hình ảnh thành mã mà trình duyệt web sử dụng để giới thiệu trang web của bạn với thế giới.

Khi đạt đến giai đoạn thứ ba, bạn nên có ý tưởng rõ ràng về:

  • cách khách truy cập của bạn sẽ đi từ nơi này đến nơi khác (giai đoạn 1, sơ đồ) -các trang web của bạn sẽ được trình bày như thế nào (giai đoạn 2, mô hình wireframe)

Nếu bạn không có ý tưởng rõ ràng về hai điều này, hãy quay lại giai đoạn thứ nhất và thứ hai và tiếp tục phát triển chúng. Bạn sẽ thấy rằng giai đoạn thứ ba là dễ dàng nhất khi bạn đã xây dựng một kế hoạch chiến đấu rõ ràng, ngắn gọn để thiết kế trang web của mình.

Bỏ bút và giấy
Ở giai đoạn 3, bạn cần sử dụng Photoshop hoặc một chương trình chỉnh sửa hình ảnh khác vì bạn sẽ sử dụng màu sắc và đồ họa để tạo bố cục cho trang web của mình.

Chúng tôi thường bắt đầu tạo trang “trang chủ” (chỉ mục) trước tiên. Sử dụng wireframe mà bạn đã tạo ở giai đoạn 2 làm mẫu cho mỗi trang bạn tạo. Tuy nhiên, thay vì sử dụng các hộp đặc, hãy sử dụng đồ họa, màu sắc và văn bản. Mỗi trang phải trông chính xác như bạn muốn trên Internet vì đây là giai đoạn cuối cùng của quá trình thiết kế.

Đảm bảo bao gồm nền cho điều hướng của bạn (nhưng không thực sự thêm văn bản vào hình ảnh của bạn). Khi được chuyển đổi bằng CSS (biểu định kiểu xếp tầng), điều hướng của bạn phải ở dạng văn bản chứ không phải hình ảnh. Các công cụ tìm kiếm không thể thu thập dữ liệu hình ảnh (các từ khóa được sử dụng trong điều hướng của bạn sẽ không được lập chỉ mục trong các trang kết quả của công cụ tìm kiếm, nghĩa là sẽ có ít người có thể tìm thấy trang web của bạn hơn).

Khi bạn hài lòng với thiết kế của mình và cảm thấy rằng chúng đã sẵn sàng để đưa lên Internet, đã đến lúc chia nhỏ các thiết kế để bạn có thể tạo bố cục dựa trên CSS. Để biết thêm thông tin về cách chuyển đổi bố cục sang CSS hoặc đánh dấu trang web của bạn bằng CSS, hãy truy cập w3schools.com. Sau khi tìm kiếm trên Internet, chúng tôi không thể tìm thấy hướng dẫn nào về CSS từ hình ảnh phù hợp – vì vậy hãy chờ đợi hướng dẫn từ chúng tôi trong những tuần tới. Việc chuyển đổi thiết kế của bạn sang CSS là cực kỳ quan trọng vì bố cục bảng đã là chuyện quá khứ.

Đây là ví dụ về bố cục trang web gần như hoàn thiện mà chúng tôi đã mô phỏng ở giai đoạn 2. Trang này được lấy trực tiếp từ trình duyệt web của chúng tôi và như bạn có thể thấy, giờ đây đã có logo, màu sắc, hệ thống điều hướng đẹp mắt, chân trang, và quan trọng nhất là bố cục gọn gàng, ngăn nắp.
Nhờ lập kế hoạch ở giai đoạn 1 và 2, bố cục của chúng tôi được tổ chức tốt và dễ sử dụng.

cờ

Dos

  • tham khảo các mẫu đã được tạo ở giai đoạn 2 của bạn; mặc dù bạn có thể đi chệch khỏi bố cục ban đầu nhưng bạn không cần phải làm vậy
  • thực hiện một số nghiên cứu trước khi tạo ra thiết kế thực tế của bạn; lấy ý tưởng từ các trang web khác và biến chúng thành của riêng bạn (không đạo văn)
  • bao gồm màu sắc và đồ họa để tạo giao diện cuối cùng cho các trang web của bạn -sử dụng CSS (biểu định kiểu xếp tầng) để chuyển đổi thiết kế của bạn từ hình ảnh thành đánh dấu mà trình duyệt web có thể hiểu được -tham khảo sơ đồ của bạn từ giai đoạn 1 khi mã hóa các trang của bạn bằng siêu liên kết; tốt hơn là sử dụng menu thả xuống bao gồm tất cả (hoặc phần lớn) các liên kết trong trang web của bạn trên mỗi trang; điều này sẽ cho phép điều hướng dễ dàng hơn và cũng làm cho các trang của bạn được thu thập dữ liệu dễ dàng hơn khi các công cụ tìm kiếm ghé qua; một nơi tuyệt vời để có các menu thả xuống CSS là tại DynamicDrive.com - hoàn thiện thiết kế của bạn trong khi làm việc với Photoshop hoặc bất kỳ phần mềm chỉnh sửa hình ảnh nào bạn sử dụng; có thể khó thực hiện các thay đổi đối với thiết kế của bạn sau khi nó được chuyển đổi thành mã đánh dấu (mã)

những điều không nên làm

 

  • không đưa văn bản vào menu điều hướng khi chuyển đổi sang CSS; thay vì sử dụng văn bản hình ảnh, hãy sử dụng văn bản thông thường mà công cụ tìm kiếm có thể đọc được
  • không sử dụng bảng khi chuyển đổi; ngay cả khi bạn cần mua một cuốn sách về CSS, nó cũng có giá trị; những cái bàn đã chết
  • đừng bỏ qua hai giai đoạn đầu tiên chỉ để tiết kiệm thời gian; trang web của bạn SẼ tốt hơn nếu bạn bắt đầu từ đầu quá trình thiết kế web (thay vì ở cuối)
  • đừng quên nén hình ảnh của bạn khi chúng được cắt rời để dùng CSS; không có gì tệ hơn một trang web tải chậm vì tệp hình ảnh lớn; Photoshop có tùy chọn “Save Optimized For Web” (CS3 – “Save for Web and Devices”)

Quy trình tạo nên sự hoàn hảo
Bằng cách tuân theo quy trình thiết kế web như quy trình được minh họa trong bài viết này, bạn sẽ tăng cơ hội tạo ra một trang web được tổ chức tốt, dễ điều hướng và rất thân thiện với người dùng. Hãy đối mặt với điều đó - nếu khách truy cập bị lạc hoặc bối rối khi cố gắng lướt trang web của bạn, họ có thể nhấn nút quay lại và tìm kiếm một trang web thân thiện hơn với người dùng. Mọi người không thích phải suy nghĩ khi phải tìm đường quanh các trang web. Đừng làm họ phải suy nghĩ. Bạn thực hiện việc suy nghĩ bằng cách lập kế hoạch cho trang web của mình từ giai đoạn 1 đến giai đoạn 3 và bạn sẽ thấy rằng sẽ có nhiều người thích truy cập trang web của bạn hơn.