Quy Trình Phác Thảo Bản Thiết Kế Web

Trang chủ » Tư vấn »Tư Vấn» Để có một website hiệu quả» Quy Trình Phác Thảo Bản Thiết Kế Web

Ngày tạo: 10/08/2014

Quy Trình Phác Thảo Bản Thiết Kế Web

Đối với nhiều nhà phát triển web, bao gồm cả tôi, thì phần khó khăn nhất trong quy trình thiết kế là bước khởi đầu. Hãy cứ tưởng tượng khi mà bạn ngồi đó, ngay tại bàn làm việc của mình chỉ với một tách cà phê và danh thiếp của một khách hàng tiềm năng đang cần một website cơ bản cho doanh nghiệp. Thông thường thì danh thiếp đã cung cấp đầy đủ những thông tin cần thiết về công ty và có thể sử dụng những thông tin đó để làm ý tưởng thiết kế.

Đáng tiếc rằng điều đó thì không đúng trong trường hợp ở hình 1.1 dưới đây. Danh thiếp không có gì ngoài nền trắng chữ đen, chữ bình thường, không in đậm, vân vân… giống như là một miếng vải trắng vậy. Vậy bạn phải bắt đầu từ đâu đây? Bạn cần một kế hoạch … và bạn cần phải liên lạc với Jennifer Trueshine. Với những thông tin được cung cấp trực tiếp từ khách hàng về công việc mà công ty của họ đang làm kết hợp với những thông tin thu được từ nội dung mà bạn phải thực hiện, bạn sẽ có thể nghĩ ra được một bố cục và một thiết kế thành công.

Ai ai bất kể trình độ nghệ thuật tới đâu, cũng có thể nghĩ ra được một bản thiết kế tốt và đẹp – tất cả những gì bạn cần là một chút kinh nghiệm và kiến thức căn bản về những nguyên tắc bố cục. Hãy bắt đầu với những điều căn bản trước, và sau đó bạn sẽ có một nền tảng cần thiết để thiết kế được những website chất lượng.

Quy trình phác thảo bản thiết kế

Nếu bạn yêu cầu tôi thiết kế một cây cầu, tôi sẽ có rất nhiều câu hỏi để hỏi bạn. Nó chỉ dài bằng sân trước nhà bạn hay dài bằng cả hồ Pontchartrain? Tôi có thể sử dụng bê tông và thép không hay toàn bộ cây cầu được xây bằng đũa? Tôi chắc chắn sẽ dừng lại để lấy danh thiếp của bạn ngay tại quán bar và hứa với bạn đủ điều trước khi tôi biết bạn là ai và tại sao bạn nghĩ bạn cần nó. Mặt khác, nếu bạn yêu cầu tôi tạc cho bạn một bức tượng để trong vườn nhà bạn, tôi có lẽ sẽ toàn tâm toàn lực bắt tay vào việc sáng tạo ra một tác phẩm nghệ thuật độc nhất vô nhị.

Quá trình thiết kế web rơi vào khoảng giữa của việc thiết kế cây cầu và tạc một bức tượng như ở trên. Đúng vậy, chúng tôi muốn tạo ra một website riêng biệt vừa đáp ứng được yêu cầu thẩm mĩ vừa đúng yêu cầu của khách hàng. Những yêu cầu này đôi khi rất cao xa và phức tạp, hoặc cũng có thể nó chỉ là làm sao cho thông tin luôn được sẵn sàng. Nếu chúng tôi không lắng nghe khách hàng một cách cẩn thận, toàn bộ dự án sẽ thất bại, kéo luôn cả danh tiếng của chúng tôi nữa. Những chi tiết kĩ thuật về phát triển, hosting, và bảo trì một website hoặc một ứng dụng có thể sẽ rất, bạn biết đấy, phức tạp. Quá trình hình thành một dự án thiết kế thì rất phức tạp, tuy nhiên có thể rút gọn xuống còn 3 nhiệm vụ chính: Tìm hiểu, Khám phá và Triển khai.

Tìm hiểu

Yếu tố tìm hiểu trong quá trình thiết kế là quá trình gặp gỡ khách hàng và làm sao để hiểu rõ được những gì họ làm. Nghe có vẻ không giống như công việc thiết kế cho lắm nhưng thu thập thông tin về khách hàng sẽ giúp cho bạn dễ dàng có được một bản thiết kế phù hợp và hiệu quả.

Trước khi gặp gỡ khách hàng bạn nên bỏ chút thời gian nghiên cứu về công việc kinh doanh của họ. Nếu họ yêu cầu bạn thiết kế một website thì chắc hẳn họ chưa có wensite rồi, nhưng cứ tìm kiếm thông tin khách hàng của bạn trên google thử xem. Nếu bạn không thể tìm thấy thông tin gì về công việc kinh doanh cụ thể của họ, cố gắng nghiên cứu về lĩnh vực kinh doanh mà họ đang làm. Nếu có thể, nên gặp trực tiếp ở cuộc hẹn đầu tiên. Đôi khi vì lí do khoảng cách, cuộc hẹn sẽ phải thông qua điện thoại nhưng nếu khách hàng của bạn ở trong thành phố, hãy cố gắng lên lịch gặp trực tiếp.

Hãy nhớ rằng ở cuộc hẹn đầu tiên không nên cố gắng gây ấn tượng với khách hàng, cố gắng bán cho được website mà thay vào đó hãy nói chuyện, và nêu ra được rõ ràng khách hàng muốn gì. Cố gắng lắng nghe nhiều hơn là nói, và mang theo một vài tờ giấy để ghi chú lại. Nếu bạn mang theo laptop hoặc tablet để có thể cho khách hàng xem mẫu thì nên hạn chế thời gian sử dụng nó. Vì máy tính thì có màn hình, mà người ta thì có thói quen là chăm chú nhìn vào màn hình. Do đó, nếu như không phải là khách hàng của bạn cứ chăm chú nhìn vào màn hình suốt buổi thì bạn cũng sẽ nhìn khi mà bạn phải ghi chú lại. Nếu miễn cưỡng phải mang theo “công nghệ” tới buổi gặp thì nên sử dụng chương trình như iTalk của iPhone hoặc Voice Recorder của Android để thu âm lại cuộc trò chuyện – tất nhiên là phải được sự cho phép của khách hàng. Theo kinh nghiệm của bản thân tôi thì một vài tờ giấy là phương án tốt nhất, ít gây sao lãng nhất cho bạn và khách hàng.

Mẹo: Không nhất thiết cuộc gặp gỡ với khách hàng tại văn phòng làm việc

Ngay cả tôi khi đang làm việc cho một công ty có văn phòng làm việc thật rộng rãi thì vẫn thấy là gặp gỡ khách hàng ở quán cà phê hoặc lúc ăn trưa sẽ hiệu quả hơn rất nhiều. Những điều này còn phụ thuộc vào khách hàng của bạn có đồng ý hay không nữa. Nếu khách hàng của bạn trông có vẻ hơi nghiêm túc thì bạn không nên đề nghị việc này. Còn lại đa số những trường hợp khác thì gặp gỡ một cách riêng tư thoải mái hơn một chút là một cách tốt.

Sau đây là một vài câu hỏi mà thông thường tôi sẽ hỏi khách hàng trong cuộc gặp đầu tiên này, cho dù là những câu hỏi đó tôi đã tìm trên mạng được rồi:

1. Công ty của ông làm gì?
2. Vai trò của ông trong công ty là gì?
3. Công ty của ông có logo hay tên thương hiệu không? Mục tiêu mà ông nhắm tới khi phát triển một website là gì?
4. Những thông tin nào ông muốn sẽ được đưa lên web?
5. Đối tượng khách hàng của bạn là gì? Nhóm đối tượng đó có đặc điểm chung nào không, chẳng hạn như độ tuổi, giới tính hoặc nơi ở?
6. Đối thủ cạnh tranh của công ty ông là ai? Họ đã có website chưa?
7. Ông có mẫu những website mà ông thích hoặc không thích không?
8. Dự án này ông muốn chạy trong thời gian như thế nào và ông có thể đầu tư bao nhiêu vào dự án này?

Nếu dự án là thiết kế lại một trang website có sẵn thì tôi thường hỏi những câu như là:

1. Những người vào website của ông thì thường tìm kiếm những gì?
2. Những vấn đề mà trang web hiện tại đang gặp phải?
3. Ông mong muốn đạt được điều gì khi tái thiết kế lại website của ông?
4. Có đặc điểm nào ở website này mà ông muốn giữ lại không?
5. Ông nghĩ những người truy cập vào website của ông sẽ phản ứng như thế nào với một thiết kế mới?

Đôi khi tôi cũng hỏi thêm nhiều những câu hỏi khác không nằm trong những câu ở trên. Hãy sử dụng trí tưởng tượng của bạn để nghĩ ra thêm nhiều câu hỏi nhằm hiểu rõ hơn công ty của khách hàng. Nếu bạn là một lập trình viên, tránh nói những từ ngữ chuyên ngành khó hiểu. Nếu bạn là một nhà thiết kế, tránh nói cụ thể về công việc thiết kế của bạn. Tất nhiên nếu bạn là một nhà thiết kế thì bạn hầu như sẽ nghĩ đến những điều đó, nhưng bạn phải biết là những từ như semantic makeup, fluid and fixed layouts, color schemes… chẳng có nghĩa lí gì với khách hàng cả, đơn giản là vì họ không hiểu. Tệ hơn nữa là những cuộc nói chuyện kiểu như vậy sẽ làm cho bạn bị lạc hướng thiết kế trước cả khi bạn bắt đầu.

Khám phá

Giai đoạn tiếp theo này của quá trình thiết kế là khi mà bạn bắt đầu lấy những thông tin mà bạn thu thập được từ khách hàng về phân tích, mổ xẻ và thử nghiệm những ý tưởng lên nó. Cái bạn cần ở đây là sự thấu hiểu tường tận về tất cả những thông tin, những sản phẩm, dịch vụ mà khách hàng đang kinh doanh, từ đó bạn mới bắt đầu tìm tòi ra làm cách nào để những thông tin này được sắp xếp một cách phù hợp. Hãy đặt mình vào vị trí những người truy cập vào website này và tự hỏi họ muốn thấy gì. Nếu bạn đang suy nghĩ muốn mua một món hàng thì bạn cần phải biết những gì trước khi mua? Nếu bạn truy cập vào để sử dụng dịch vụ thì đâu là nơi cho bạn biết được những lời mời chào khác nhau và mức độ nào của dịch vụ mà bạn mong muốn? Tiêu đề mạch lạc nhất cho trang X là gì, và có bao nhiêu bước để qua được tới trang Y?

Trong giới thiết kế web thì đây là những bước đầu tiên trong quá trình được gọi là Cấu Trúc Thông Tin, viết tắt là IA. Đối với những website đắt tiền và những ứng dụng web phức tạp thì Cấu Trúc Thông Tin là một chuyên ngành riêng biệt, nhưng những hướng dẫn và những quy tắc của nó có thể cung cấp cho ta được một nền tảng vững chắc ngay cả cho một website nhỏ nhất. Đối với giai đoạn Khám phá này của quá trình, chúng tôi muốn tập trung vào cách sắp xếp nội dung và dòng chảy của website thành một mô hình mà chúng ta có thể thiết kế dựa trên đó.

Hai thứ tất yếu nhất mà bạn cần phải có cho công việc này là một tờ giấy trắng lớn (nếu bạn có một tấm bảng trắng thì càng tốt) và nhiều thật nhiều giấy ghi chú. Hãy làm một danh sách tất cả những phần, mục của website mà bạn muốn có và bắt đầu sắp xếp chúng thành những nhóm lớn và nhóm phụ. Những nhóm này có thể sẽ được di chuyển chỗ này chỗ khác trên website cho tới khi tìm được vị trí thích hợp, nên những miếng giấy ghi chú nhỏ nhỏ sẽ rất hữu dụng. Nếu bạn lập ra từng khu vực lớn nhỏ và từng trang của website, bạn có thể đặt chúng trên một bức tường tưởng tượng như nó là một trang web. Bạn sẽ muốn tránh làm ngộp người truy cập bởi quá nhiều lựa chọn nhưng bạn cũng không muốn chôn thông tin vào quá sâu trong trang web; hiểu cách khác là người truy cập sẽ phải click chuột nhiều lần để rời khỏi trang chủ và tiếp cận những thông tin đó. Không có một quy tắc luật lệ nhất định nào trong việc này, chỉ cần bạn làm sao cho thông tin được thể hiện một cách càng rõ ràng và dễ dàng truy cập nhất càng tốt.

Triển khai

Bây giờ thì bạn đã có ý tưởng về cách tổ chức sắp xếp thông tin như thế nào rồi. Giai đoạn Triển khai này bắt đầu với việc tạo ra một bố cục. Hãy đừng nghĩ tới dự án, cố không để những yếu tố kĩ thuật thiết kế web làm ảnh hưởng đến bạn – ít nhất là trong giai đoạn đầu tiên này. Bây giờ không quan trọng website của bạn có bao gồm HTML hay không, một mẫu cho hệ thống quản lí nội dung hoặc một ứng dụng ASP.NET hay không, điểm mấu chốt ở đây là chúng ta phải nhập tâm vào việc thiết kế trên một tờ giấy trắng. “Giấy ư?” Đúng vậy, trên giấy bạn à. Bạn nghĩ rằng tôi sẽ cho bạn quay lại ngồi vô cái máy tính quý báu của bạn bây giờ ư? Không đời nào. Và đây là lí do: Rất dễ bị mất tập trung thiết kế khi bạn cứ nghĩ về cái bố cục trên màn hình máy tính. Nếu sử dụng giấy, bạn có thể loại bỏ được những giới hạn về kĩ thuật của browsers và CSS và dành thời gian tập trung vào suy nghĩ bạn muốn sản phẩm cuối cùng của bạn trông ra làm sao. Nghe tới đây bạn chắc hẳn sẽ nghĩ rằng bất cứ những người thiết kế giỏi nào cũng mang theo bên mình những bản giấy phác thảo đắt tiền để họ có thể sử dụng những cây bút vẽ và cọ cũng mắc tiền không kém để thiết kế những tuyệt tác Da Vinci. Còn đối với tôi, tôi sử dụng một cuốn sổ tay 79 cent và bất cứ cây viết nào trên bàn làm việc của tôi còn viết được.

Tôi bắt đầu bằng việc phác thảo ra một vài bố cục và chọn ra một cái tôi thích nhất, đưa nó vào Photoshop, dùng công cụ Rectangle để khoanh lại vùng mà tôi đánh dấu trên giấy. Một khi đã có được bố cục, tôi bắt đầu thử màu nền trước và sau đến khi nào đạt được độ phối màu hài hòa. Tôi tiếp tục mày mò với photoshop và thay đổi các pixels cho tới khi cuối cùng, một cách kì lạ, tôi có được một bản bố cục mẫu đưa cho khách hàng.

Thật đơn giản phải không? Ừ thì đúng là tôi đã bỏ qua một vài bước để có thể có được một bản hướng dẫn ngắn ngọn như trên. Sự thật là những điều giúp tôi có thể tự tạo dựng nên một quá trình thiết kế như vậy là một bản năng, nó như một thứ tiềm thức mà tôi có được từ những kinh nghiệm trong quá khứ, từ những bạn đồng nghiệp trong ngành thiết kế và những bạn học trong lớp vẽ.

Học thiết kế web cũng như là học lập trình vậy. Một vài người thì có khiếu nhưng hầu như tất cả mọi người đều có thể học được. Cũng như có code hay và code dở, chúng ta cũng có thiết kế tốt và thiết kế xấu. Bằng cách học những quy tắc, quy ước về thiết kế này sẽ giúp bạn hiểu được sự khác biệt giữa thiết kế tốt, dở, xấu và định hướng cho bạn hình thành nên quá trình thiết kế cho riêng mình.