Chào mọi người, vậy là cũng đã một tuần trôi qua kể từ bài trước nói về xây dựng Model cho website của bạn. Trong bài này, mình sẽ nói về “Thiết kế sân khấu” cho vở kịch web của bạn.

Dù cho bạn có sở hữu một kịch bản tuyệt vời, dàn diễn viên khủng với các kỹ năng diễn xuất đỉnh nhưng nếu không có một sân khấu với các thiết kế, bố trí hợp lý và logic, nổi bật lên nội dung vở kịch cũng như làm nền cho các diễn viên biểu diễn thì vở kịch cũng sẽ khó mà thành công. Vở kịch web của bạn cũng không ngoại lệ.

Thiết kế cho một trang web là một thao tác quan trọng và cần thiết đem lại sự thành công bước đầu cho dự án của bạn. Dù dự án lớn hay nhỏ, việc đầu tư cho thiết kế cũng đem lại giá trị thiết thực cho website của bạn khi trình diễn cho người dùng. Mình sẽ dành trọn ngày thứ ba này nói về quá trình mình thiết kế một website thế nào, những bước, công đoạn Tuấn thường làm khi bắt tay thiết kế cho một dự án web nhanh.

Bố cục (Layout)

Công đoạn đầu tiên khi bắt đầu thiết kế web là bạn phải lựa chọn bố cục và kích thước cho website của bạn. Một số câu hỏi bạn phải tự đặt ra và trả lời trước khi bắt tay thiết kế là: 1 hay 2 hay 3 cột? chiều rộng bao nhiêu pixel (px)? Có dùng lưới (grid) để thiết kế không?

Nếu bạn chọn lưới thì hiện tại có 1 số lưới mà bạn có thể theo để thiết kế cho cân đối, ví các lưới 960px (có thể 12 hoặc 16 cột), lưới 980px, lưới 1000px…Mình thường sử dụng lưới 960 bởi khi thiết kế cho chiều rộng tối đa 960px, khi coi trên các màn hình điện thoại nhỏ, việc scale lại sẽ ra bội số chẵn (VD: iphone là 320px, iphone retina là 640px, hoặc android 480px, 540px…)

Trước đây mình thường dùng lưới 960 download từ trên mạng về, có chia sẵn 12 (hoặc 16) cột rồi thiết kế theo lưới, giờ thì do nhu cầu thiết kế nhanh, mình thường tạo New File và thiết kế trên đó, tạo các Guide Line sắn để tạo vùng thiết kế 960px. Dự án tienboi khi thiết kế mình dùng lưới 1000px cho dễ canh chỉnh các kích thước, còn khi ráp HTML thì mình dùng lưới 960px cho đúng chuẩn.

Để giúp việc bố trí khi thiết kế, việc tùy chỉnh Photoshop để hỗ trợ thiết kế là một trong những thao tác quan trọng. Để vẽ lưới 1000px, mình thường tạo new file có chiều rộng 1200px và dùng Guideline để khoanh vùng 1000px ở giữa (ám chỉ mình chỉ thiết kế trong phạm vi 1000px này thôi). Mình không tạo new file 1000px bởi vì mình muốn thử cảm giác có vùng trắng 2 bên thì thiết kế của mình sẽ như thế nào vì hiện giờ số lượng máy tính (thường là Laptop) có độ phân giải 1280 khá nhiều.

Tiếp theo, mình thường chỉnh lại kích thước của lưới trong Photoshop thành 10px đễ dễ chia kích thước các cột, nút, icon, logo…Bạn có thể chỉnh kích thước chia lưới của Photoshop trong Preference > Guides, Grid & Slices > Grid

Màu sắc (Colour)

Sau khi setup xong Photoshop và tạo file để chuẩn bị thiết kế, việc tiếp theo là chọn tone màu cho thiết kế của bạn. Đối với nhiều bạn thì công đoạn lựa chọn màu sắc sẽ khá là vất vả và bế tắc. Đừng sợ, bạn có rất nhiều nguồn để tham khảo và tìm ra các màu sắc ưng ý cho website của mình.

Trước khi đi sâu vào phối màu sắc, bạn cần phải trả lời được câu hỏi là website của bạn sẽ sử dụng tone màu chủ đạo nào. Việc xác định tone màu chủ đạo rất quan trọng, nó nói lên được tinh thần, linh hồn, thương hiệu dự án của bạn. Nếu dự án của bạn là hoàn toàn mới và chưa có quy định màu chủ đạo thì bạn nên tìm hiểu đối tượng, dịch vụ, đối thủ của bạn để ra quyết định đối với màu chủ đạo.

Tới đây, bạn đã ra được màu chủ đạo của mình, đó thường là các màu chuẩn như xanh da trời, lá cây, cam, đỏ, nâu, xám…Rõ ràng tới đây bạn vẫn chưa hình dung được màu sắc của thiết kế bởi cùng 1 màu chuẩn, ví dụ xanh da trời, cũng đã có hàng trăm biến thể khác nhau, ví dụ đều là xanh da trời nhưng facebook, skype, microsoft đều có sắc độ khác nhau. Việc tiếp theo sau khi có màu chủ đạo thì bạn bắt đầu công cuộc đi tìm màu chính (từ màu chủ đạo).

Để tìm màu chính, bạn có thể dùng bánh xe màu (Color Wheel) hoặc công cụ chọn màu của Photoshop để điểu chỉnh độ sáng, tối, bão hòa..để ra được màu sắc mà mình “thích” và “ưng ý”.

Việc chọn màu như trên có một bất lợi là sau khi bạn đã ra màu ưng ý, việc tìm kiếm thêm các màu sắc khác để phối với màu chính sẽ khá vất vả, đòi hỏi bạn phải biết các phương pháp phối màu và các công cụ bánh xe màu để ra các màu phối phù hợp.

Ngoài phương pháp chọn màu ở trên, bạn còn có 1 phương pháp chọn màu đơn giản hơn, đó là tham khảo một số bảng màu có sẵn và đã được người khác phối và chia sẻ trên mạng. Bạn có thể truy cập http://www.colourlovers.com/ và tìm kiếm với màu chủ đạo sẽ ra được các bảng màu mà mình cần tham khảo.

Chúc các bạn tìm được bảng màu sắc cho website của mình để tiến hành công đoạn vất vả tiếp theo là thiết kế giao diện.

Thành phần web (Element)

Đến đây, bạn đã có trong tay bảng màu hay danh sách các màu mà bạn sẽ sử dụng cho thiết kế và website của mình. Việc tiếp theo là bắt tay vào thiết kế giao diện.

Đây là quá trình thuộc về cảm nhận và kinh nghiệm cá nhân của mỗi người nên cũng khó mà chia sẻ vì ngay cả Tuấn cũng không phải là designer mà chỉ là coder mà thôi. Ở bước này có lẽ sẽ bắt đầu hơi khó khăn vì sẽ không biết bắt đầu từ đâu. Kinh nghiệm của mình thường là tham khảo một vòng các website đối thủ và phân tích lại các tính năng của mình để hoạch định trước tiên là mình sẽ có những trang nào và sẽ thiết kế trang nào trước.

Sau khi ra các trang bạn cần thiết kế, việc tiếp theo là xem trong từng trang sẽ hiển thị cái gì để tiến hành “quy hoạch” diện tích thiết kế để bố trí các Heading, Tiêu đề, bảng, nút, hình ảnh, link, line, space…Nếu chưa có kinh nghiệm hoặc trình “còi” như mình thì thường đi tham khảo các thiết kế khác để lấy cảm hứng về các Web Element UI hoặc nếu clone thì quá dễ, cứ dựa theo logic thiết kế của trang gốc, chế biến một chút cho hợp màu sắc của mình. Một số nguồn rất tốt mà bạn có thể tham khảo các thiết kế là Dribbble.com, Behance.net, Pinterest.com…

Theo kinh nghiệm cá nhân thì mình thường thiết kế gộp chung 1 số trang lại với nhau trong 1 thiết kế để giữ lại các thiết kế Header, Footer, Sidebar khi có thay đổi ở các phần chung này, không phải mở từng bản thiết kế ra để chỉnh sửa. Ngoài ra, các trang cho thành viên thường thì không thiết kế vì các trang này thường đã có sẵn và nếu thiết kế lại sẽ mất thời gian triển khai vì đã nói từ đầu đây là dự án nhanh nên hạn chế thiết kế lại các trang đã có, do đó, đối với các trang thành viên (đăng ký, đăng nhập…) mình thường làm trực tiếp trên HTML và CSS luôn chứ không thông qua thiết kế.

Cắt hình (Slice)

Sau khi bạn đã có được thiết kế cho website của mình, bạn tiến hành cắt (slice) hình để có thể sử dụng được trong HTML. Nếu các thành phần như các bullet, nút, đường kẻ, đổ bóng nào mà bạn nghĩ CSS (hoặc CSS3) có thể hỗ trợ được 99% như thiết kế thì nên dùng CSS chứ không cần cắt hình, vì thêm hình website sẽ nặng hơn khi load.

Photoshop có công cụ slice và đặt tên hình rất tốt nên các bạn có thể dùng Photoshop trong quá trình xuất các hình ảnh mình sẽ sử dụng ra. Đối với đồ họa cho web thì mình thường xuất hình PNG và có trong suốt để dễ dàng chỉnh sửa màu nền trên web sau này mà không phải xuất lại hình.

Khi các hình ảnh dùng trong web đã được xuất ra file (thường là PNG), đã đến lúc bạn làm 1 công đoạn cuối cùng, hơi gian nan nhưng rất có ích cho website của bạn là làm sprite image cho CSS. CSS Sprite là một kỹ thuật gộp nhiều hình (thường là icon, biểu tượng…) hay xuất hiện trên site vào 1 file (thường là PNG, trong suốt) để giúp cho website load nhanh hơn nhiều.

Kinh nghiệm của mình khi tạo sprite image là tạo các vùng diện tích đều nhau và bố trí các hình nhỏ lại ở các diện tích đã được quy hoạch. Vì sao phải làm vậy? Khi chia vùng đều nhau trong Sprite Image (VD: 20px, 40px, 32px…) bạn dễ dàng tính các tọa độ khi đưa vào CSS lúc chỉnh background-position.

Như vậy là bạn đã có đầy đủ thiết kế để làm HTML và các hình ảnh cần thiết cho việc thiết kế giao diện cho website của bạn.

HTML, CSS, Javascript

Tùy theo quy trình và nhân sự của bạn có mà bạn có thể làm HTML,CSS,Javascript riêng bên ngoài, tức là không cần ráp vào framework mà hoàn toàn là HTML, CSS, Javascript thô và có thể chạy được. Do nhu cầu tốc độ và không có nhu cầu demo nên thường mình không làm HTML riêng mà ráp dựa vào framework luông để tận dụng mô hình template của framework để làm HTML, tiện cho việc dễ dàng cập nhật header, footer hoặc các thành phần chung.

Tuy nhiên, nếu bạn có nhân sự hoặc có nhu cầu thuê ngoài công việc này thì cũng không sao, vì bạn chỉ cần đưa thiết kế để làm theo là bạn đã có thể có HTML hoàn chỉnh cho website của bạn để chuẩn bị ráp vào giao diện.

Ráp Template (Templating)

Ở bước cuối cùng của thiết kế này, mình thường tạo 1 chức năng tạm (thường là trang chủ ^^!) để tiến hành ráp tất cả giao diện trên chức năng đó để theo dõi quá trình ráp template.

Mình sử dụng Smarty template nên rất tiện cho việc chia nhỏ thiết kế và tách biệt hoàn toàn với code PHP. Lưu ý là giai đoạn này chưa có các tính năng và dữ liệu để test nên thường là hardcode dữ liệu trong HTML để test.

Do bản chất giao diện thường đi theo chức năng, nên một số giao diện cần phải được làm song song với khi phát triển tính năng. Do ngày này chỉ là thiết kế giao diện, làm HTML, CSS, Javascript để định hình thiết kế cho website của bạn nên chưa có sự can thiệp “thô bạo” của các controller/action ở Front-end.

Đây là những hình ảnh đầu tiên (HTML) của dự án tienboi.com, khi làm HTML và test UI/UX thì thấy có một số thay đổi so với bản thiết kế Photoshop.

—-

Như vậy là cũng xong ngày 3 (đây có lẽ là bài dài nhất và nhiều hình nhất, mình mất gần 1 tuần để hoàn thiện bài này ^^!), cuối cùng thì bạn cũng đã có các file HTML hoặc Template (TPL) để chuẩn bị sẵn sàng cho các ngày tiếp theo trong việc hoàn thành website. Ngày hôm nay có lẽ là ngày rất nặng nhọc nếu bạn nào chưa có kinh nghiệm design, slice hình, làm sprite, ráp template…

Chúc mọi người hoàn thành ngày này một cách xuất sắc để tạo ra các thiết kế tốt và HTML,CSS,Javascript giống với thiết kế và…không có lỗi.

Đón xem bài tiếp theo, “Ngày 4 – Dựng phân đoạn”