29/5/10

Các bước Thiết kế giao diện Website – Phần 1

Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình. Bạn cũng có chút khiếu về thẫm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh.

Đi tìm cảm hứng và hình thành ý tưởng

Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình. Bạn cũng có chút khiếu về thẫm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh. Đã mấy lần bạn ngồi trước máy tính, quyết định sẽ làm cho mình một trang web – để rồi cả mấy tiếng sau vẫn chưa làm được gì? Bạn thật sự chẳng biết phải bắt đầu từ đâu cả…

Trong mọi việc, bước đầu tiên bao giờ cũng là bước khó nhất. Điều đó càng đúng với nếu bạn chưa có kinh nghiệm và không biết gì nhiều về những việc mà mình sẽ làm. Trong bài viết này (và hi vọng sẽ là bài mở đầu cho một loạt bài cùng chủ đề về thiết kế web), tớ sẽ nói về kinh nghiệm của tớ về những bước đầu tiên trong quá trình thiết kế một trang web mà tự tớ đã đúc kết và áp dụng trong mỗi thiết kế của mình. Bài viết cũng sẽ giúp bạn trả lời một một câu hỏi rất hay thường gặp ở những người mới bắt đầu làm thiết kế web là làm thế nào để lấy cảm hứng và ý tưởng của những trang web thiết kế đẹp mà bạn thích để tạo ra thiết kế riêng cho mình mà không rơi vào tình huống sao chép thiết kế của họ?

Tuy nhiên, phải nói trước, nếu bạn hi vọng đọc xong bài viết này sẽ giúp bạn thiết kế được một trang web hoàn chỉnh thì tớ e rằng sẽ làm bạn thất vọng. Trong bài viết, tớ sẽ giả định rằng các bạn đã có kiến thức về viết mã cho web cũng như đã sử dụng tương đối thành thạo một phần mềm đồ họa nào đó. Điều bạn cần chỉ là một hướng đi để bắt đầu – và tớ hi vọng từ những kinh nghiệm của mình sẽ giúp cho các bạn có được một hướng đi đúng.
Vậy bước đầu tiên sẽ là gì? Bước đầu tiên tuy khó để nghĩ ra, nhưng thường lại là bước dễ nhất và chẳng mấy ngạc nhiên một khi bạn đã biết về nó:

Bước 1: Tìm nguồn cảm hứng

Quá trình này trong thuật ngữ của dân thiết kế gọi là “get inspired”. Việc có được cảm hứng là một điều rất quan trọng trong những ngành nghệ thuật liên quan đến quá trình sáng tạo. Trong âm nhạc, nguồn cảm hứng có thể là từ một cảm xúc chợt đến trong một buổi chiều; Trong thơ, nó có thể bắt nguồn từ một cảnh quang thiên nhiên. Còn trong thiết kế, nguồn cảm hứng đến từ … những thiết kế khác. Chính vì vậy, không giống như trong thơ và nhạc việc tìm được nguồn cảm hứng thường đến một cách ngẫu nhiên và có phần may mắn, trong thiết kế, bạn có thể tự mình đi tìm nguồn cảm hứng. Hãy vào các trang sưu tầm và giới thiệu các thiết kế đẹp như CSSBeauty, CSS Vault, Design Shake và bạn sẽ thấy có rất nhiều thiết kế rất đẹp từ khắp nơi trên thế giới. Một vài điều đáng chú ý:

* Hãy chụp và lưu lại màn hình của các trang web mà bạn thích vào một thư mục trên máy tính. Các trang gallery thường để hình ảnh thu nhỏ và thường không có mấy tác dụng trong việc giúp bạn thấy được cái đẹp của thiết kế. Việc lưu lại hình ảnh ở độ phân giải thực không những sẽ đem lại cho bạn sự chi tiết mà còn giúp bạn xem lại những thiết kế này dễ dàng hơn về sau mà không cần phải mở trình duyệt ra.

Mẹo: Bạn có thể sử dụng plugin của Picnik cho Firefox để làm công việc này. Picnik cho phép bạn chụp nguyên trang hoặc một phần của màn hình rồi lưu trực tiếp vào các dịch vụ lưu ảnh trực tuyến như Flickr hay lưu trực tiếp vào máy.

* Ở bước này, bạn không cần phải nghĩ về thiết kế “tương lai” của mình mà hãy cứ việc dạo quanh một vòng và thưởng thức những thiết kế của người khác (giống như đi shopping vậy :) . Tuy nhiên, bạn cần xác định rõ trang web mà mình sẽ thiết kế là thuộc phân mục nào. Có rất nhiều thiết kế đẹp, nhưng không phải thiết kế nào cũng phù hợp với mục đích của bạn. Ví dụ như phong cách thiết kế của một trang web doanh nghiệp sẽ không phù hợp với một trang blog cá nhân. Việc xác định rõ ngay từ đầu sẽ giúp bạn bỏ qua rất nhanh những thiết kế không phù hợp (những gallery ở trên thường có đến hàng trăm thiết kế, việc ngồi xem hết từng cái là không thể).



Nếu bạn xác định rằng mình đang thiết kế giao diện cho blog, bạn sẽ dễ dàng bỏ qua những thiết kế như bên phải, trong khi dành nhiều chú ý hơn đến những thiết kế cho phép nhiều không gian để hiển thị bài viết như trong hình bên trái. Nhấn chuột vào hình để xem to hơn.

* Đừng ngồi quá lâu để xem cùng một lúc. Hãy dành thời gian làm việc khác, để hôm sau xem tiếp. Lý do là thường thì một khi xem quá lâu, càng về sau bạn sẽ càng cảm thấy mệt mỏi và khi đó dường như mọi thiết kế đều trở nên “nhàm nhàm” giống như nhau – mặc dù nếu bạn xem nó ngay từ lúc đầu thì bạn lại thấy nó đẹp. Vì vậy, sẽ là lý tưởng nếu mỗi ngày bạn chỉ xem vài ba thiết kế và đó là lý do tại sao tớ hay có thói quen sưu tầm thiết kế đẹp mỗi ngày – để đến lúc cần thì tớ đã có sẵn những thiết kế mà tớ thích. Nếu bạn xác định mình sẽ đi theo nghề thiết kế web, đó là một thói quen nên học.

Vậy khi nào thì bạn nên dừng lại? Khi nào thì bạn biết rằng mình đã tìm được nguồn cảm hứng? Rất khó để trả lời được câu hỏi này. Sẽ có những lúc mà bạn bắt gặp một trang web quá đẹp mà bạn chỉ muốn dừng lại và bắt tay ngay vào việc thiết kế một trang web tương tự. Nhưng trừ khi bạn muốn sao chép nguyên xi thiết kế của họ (mà như vậy thì đã chẳng gọi là thiết kế), cảm hứng từ một thiết kế như vậy sẽ không đủ để giúp bạn có thể làm nên thiết kế của riêng mình – mặc dù bạn có thể chắc chắn là thiết kế đó sẽ đóng vai trò rất quan trọng ảnh hưởng đến thiết kế của bạn. Vậy nên, lời khuyên của tớ là hãy chỉ dừng lại khi:

* Bạn đã có được ít nhất 10 – 20 thiết kế mà bạn cảm thấy đẹp và phù hợp với trang web của mình
* Có ít nhất một trang thiết kế mà nó khiến bạn chỉ muốn copy nguyên xi của nó về (dù rằng mục đích của bạn không phải là như vậy)

Khi đó, bạn có thể bắt đầu chuyển sang bước thứ 2:

Bước 2: Định hình ý tưởng

Sau khi đã chọn được khoảng 10-20 thiết kế trong bước 1 và bước đầu có cái “cảm hứng” để quyết định sẽ thiết kế cho riêng mình một trang web, bạn sẽ cần phải định hình ý tưởng cho trang web của mình. Hãy ngồi duyệt lại những ảnh chụp trang web mà bạn đã lưu vào máy trong bước 1:

* Cách tốt nhất trong quá trình này là dùng tính năng Slideshow của phần mềm quản lý ảnh (ví dụ như Picasa) vì nó sẽ chỉ hiển thị một ảnh trên toàn màn hình (giúp bạn đỡ bị phân tán) cũng như nó cho phép bạn nhanh chóng chuyển qua những hình khác.


Xem giao diện toàn màn hình sử dụng tính năng slideshow của Picasa giúp bạn tránh bị phân tán.

* Ghi chú xuống một mảnh giấy nhỏ những điểm mà bạn thích về một thiết kế mà bạn nghĩ rằng mình muốn có trong thiết kế của mình. Điều rất quan trọng là bạn hãy để ý đến ý tưởng chứ không phải chi tiết của thiết kế. Điều đó có nghĩa là bạn nên ghi lại ý tưởng sử dụng mây làm hình ảnh ở đầu trang và cỏ ở cuối trang tạo cảm giác về không gian, nhưng bạn không nên copy hình ảnh mà họ sử dụng. Những gì bạn cần đề ý: cách sử dụng màu sắc, hình thức bố cục, cách sắp xếp nội dung, và thậm chí cách cách mà họ làm viền cho hình ảnh,… Những gì bạn không nên để ý: trang web đó sử dụng hình ảnh cụ thể gì, mày sắc cụ thể cho tiêu đề của bài viết,…



Bạn thấy gì từ một trong những thiết kế ban đầu của trang web All Women’s Talk? Một vài điểm cần ghi lại: cách sử dụng màu đơn và cách họ chọn màu thể hiện nội dung nữ tính của trang web. Bạn cũng có thể ghi lại cách mà họ đặt chủ đề của bài viết ngay trước tiêu đề của bài viết và làm nổi bật nó bằng cách tô màu nền cho nó. Cái cách mà họ chia diện tích trang web thành 2 nữa – một để liệt kê những bài viết chính và bên kia để hiển thị danh sách các bài nổi bật và danh sách phân mục. Những gì bạn không nên chép lại: hình ảnh bông hoa họ sử dụng trong hầu như tất cả các thành phần trên trang web.

Sau bước này, bạn sẽ có một ý tưởng tương đối rõ ràng (ít ra là không mơ hồ không xác định như trước) về trang web của mình. Trang web sẽ có thiết kế đơn giản và sạch sẽ hay là nó sẽ sử dụng nhiều hình ảnh đồ họa? Bạn sẽ sử dụng nhiều màu sắc tạo cảm giác tươi trẻ hay sẽ chọn tông màu đơn lẻ mà sang trọng? Trang web sẽ có bố cục 3 cột hay 2 cột? Bạn thâm chí sẽ xác định được những câu hỏi tương đối chi tiết như liệu mình sẽ sử dụng hình ảnh vector hay sẽ sử dụng ảnh chụp để làm trang trí?

Đừng quá lo lắng về việc liệu bạn có đang copy thiết kế của người khác hay không. Miễn là bạn không có ý định đó và bạn có ít nhất 10 – 20 thiết kế để tham khảo thì tớ đảm bảo khi bắt đầu đi vào thiết kế bạn sẽ không gặp phải trường hợp bạn copy thiết kế của người khác. Bạn sẽ ngạc nhiên khi sang bước 4, khi mà bạn bắt đầu xây dựng mẫu cho thiết kế của mình, những ý tưởng ban đầu mà bạn ghi chép lại ở bước này sẽ tự biến đổi thành thiết kế của riêng bạn. Từ kinh nghiệm của tớ, những ý tưởng này phần lớn sẽ chỉ đóng vai trò giúp đỡ bạn bắt đầu khi đứng trước khung vẽ trống rỗng trong bước 4.

Kết thúc phần 1
Tất nhiên, không phải cứ là thiết kế đẹp thì nhất thiết nó sẽ phù hợp với nội dung của bạn. Trong bài kế tiếp, tớ sẽ thảo luận về việc kết hợp giữa nội dung và thiết kế, cũng như một vài kinh nghiệm trong việc bắt đầu xây dựng mẫu (”prototype”) cho thiết kế của mình.

Nguồn: http://www.freelancers.vn/Home/2010/03/23/cac-buoc-thiet-ke-giao-dien-website-phan-1/

Không có nhận xét nào:

Đăng nhận xét