Hương Tình Yêu

Dưới đây là một số kinh nghiệm trong quá trình thiết kế website, rất có ích đối với các bạn mới bước vào nghề, mời các bạn tham khảo:

Mẫu thiết kế sử dụng kích thước thật của màn hình với khung hình chuẩn của web theo chiều ngang là 778px. Phần lớn người xem vẫn xem ở mode màn hình 800x600, ngoại trừ một số trường hợp đặc biệt có thiết kế riêng.

- Sử dụng Mode màu RGB vì web chỉ hiển thị trên màn hình.

- Nếu dùng Photoshop để dựng layout, yêu cầu bắt buộc phải dùng Folder Set để quản lý layer, vì mỗi website khi thiết kế hoàn chỉnh, có hàng trăm layer.

- Việc dùng Flash cũng cần phải cân nhắc với những website thông tin vì nó chỉ thu hút người xem vào những lần truy cập đầu, sau đó sẽ chỉ làm cho website nặng lên không cần thiết. Khi làm file flash lớn, cần phải có phần loading.

- Khi thiết kế, cần đưa tương đối đầy đủ nội dung với màu sắc, font chữ đúng với website sau này. Khi đặt nội dung, nên để font chữ ở chế độ Smooth là none, ko nên để là Crisp vì khi ra kết quả cuối cùng (web page) sẽ khác với thiết kế.

- Không sử dụng các font chữ không chuẩn cho nội dung website, vì nếu máy người xem không có font đó thì sẽ hư toàn bộ layout. Nếu website sử dụng tiếng Việt, nên sử dụng các font Unicode chuẩn như Arial, Verdana, Tahoma, Times News Roman.

- Các website thương mại nên hạn chế sử dụng các đường cong, hình ảnh lớn, background lớn chiếm diện tích thông tin của website trừ khi có thể quản lý chúng. Việc sử dụng đường cong hay background sẽ gây rất nhiều trở ngại khi chuyển qua HTML.

- Cần nghĩ qua về việc làm sao chuyển chúng thành HTML trước khi thiết kế một thành phần nào.

- Thiết kế web cần tính toán làm sao để tương thích với cấu trúc HTML của website, nếu không, khi phân tích ra thành các trang web HTML sẽ trở nên rất khó khăn cho việc xây dựng nội dung cũng như lập trình.

- Trước khi thiết kế, cần có sitemap cụ thể, để việc trình bày thông tin trở nên rõ ràng, dễ thuyết phục người duyệt mẫu. - Nên xem mẫu thiết kế trên các loại màn hình khác nhau, tốt nhất trên màn hình CRT bình thường, vì đây là màn hình của người sử dụng. Tránh việc duyệt mẫu, xem mẫu bằng giấy in láng (hoặc rửa hình), hoặc màn hình laptop, LCD. - Màu sắc website cần nhẹ nhàng, phù hợp với mục đích của website, thông tin rõ ràng.

- Cần có một mẫu GUI Logic trước khi bắt tay vào thiết kế, GUI Logic này cần được duyệt qua bởi Người đối tác. GUI Logic là bản thiết kế thô, bao gồm các vị trí của các thành phần trên website, người thiết kế sẽ dựa trên đó để làm graphic. Bản GUI Logic này được tính toán trước về mặt thẩm mỹ và quan trọng là usabilities.


Chuyển trang web thành HTML

+ Sau quá trình thiết kế web là quá trình phân tích, chuyển đổi mẫu thiết kế thành trang web HTML, cần theo các yêu cầu cụ thể sau:

- Chương trình dựng trang web, chương trình thích hợp nhất là Macromedia Dreamweaver, vì đây là chương trình do rất nhiều lập trình viên đang sử dụng để code trực tiếp, tuyệt đối không dùng Frontpage. Frontpage có thể giúp đơn giản cho người sử dụng nhưng việc sinh mã HTML rất phức tạp, đặc biệt là sinh ra những mã HTML ko cần thiết và gây rối cho người lập trình.

- Cắt web html cần có độ tỉ mỉ cao, nếu thiết kế mẫu layout, mất từ 4->8h (không tính thời gian sáng tạo), thì việc cắt web mất từ 2->4h một trang

- Khâu thiết kế và khâu cắt web có vai trò rất quan trọng, vì sẽ tiết kiệm được thời gian cho các lập trình viên, tester sau này. Một trang web được cắt tốt không chứa các thành phần không cần thiết như mã HTML dư, hay các lỗi về cấu trúc HTML. Vì khi người lập trình làm việc, họ gần như chỉ làm việc trên code chứ không làm việc trên phần design.

- Cần tính toán rõ ràng, cụ thể việc áp dụng Template trong website. Template giúp cho 1 website với những trang có thành phần giống nhau được quản lý một cách thống nhất, nếu cần thay đổi những phần này, chỉ việc chỉnh sửa file Template này.

- Phối hợp chặt chẽ với bộ phận phụ trách nội dung website để bố cục, cấu trúc website rõ ràng hơn.

- Khi cắt web, cần đưa các style css ở file riêng, không đưa định dạng font trực tiếp trong website, việc đặt tên các CSS cần sự nghiêm túc, có sự thống nhất. Hạn chế việc định dạng font chữ bằng tag < font >. Nếu có các link, việc đặt các css: link, active, visited, hover là cần thiết. Nên định font chuẩn cho toàn website bằng cách định nghĩa lại tag < td >.
- Sử dụng file spacer.gif để trang web có thêm các tùy biến thay vì định kích thước ngang dọc cho các < table > hay < td >

. File spacer.gif là 1 file gif trong suốt có kích thước 1x1. Khi cần định chiều cao cho 1 td thì nên chèn file này vào td đó và định chiều cao cho file spacer.gif.

- Tránh việc Merge các Table lại với nhau quá nhiều, tối đa 1 cái. Việc này rất quan trọng, vì nó sẽ gây khó khăn và mất thời gian cho các lập trình viên khi làm việc.

- Cần xem kỹ lại cấu trúc, yêu cầu của bên thiết kế web, để có thể cho phép website co giãn theo kích thước màn hình hoặc cố định (nhỏ tối đa 800px). Nếu là các co giãn theo kích thước màn hình, cần tính toán thiết kế sao cho khi giãn ra không có những khoảng trống hình ảnh.

- NẾU LÀ 1 WEBSITE ĐỘNG HAY CẬP NHẬT THƯỜNG XUYÊN, TUYỆT ĐỐI KHÔNG DÙNG CHỨC NĂNG SLICE CỦA PHOTOSHOP HAY IMAGEREADY. Chức năng này chỉ thích hợp cho các website tĩnh vì HTML sinh ra rất phức tạp và có rối dẫn tới việc các lập trình viên không thể đọc hiểu hay chỉnh sửa được.

(st)

rất hay nhưng là nội dung cũ, phù hợp với newbie và những người mới tập thiết kế web, cách anh làm là ghép luôn các element vào ứng dụng, thường thì xu hướng mới là web theo thẻ DIV, sẽ dễ dàng thay đổi layout hơn.

Sắp tới em học thiết kế web, sẽ thiên về kiểu bài viết này chứ ko thiên về lập trình, :) nên vấn đề chính vẫn là layout, :), bài này chắc sẽ rất cơ bản cho em và các bạn cùng lớp với em.

học kì 2 anh ạ. Một nửa e học lập trình, 1 nửa học thiết kế. Lập trình chắc là k đi sâu đâu.