Storyboarding và Thiết Kế Web

Đây là những từ chuyên môn, chúng tôi không thể dịch đúng nghĩa mà chỉ có thể giải thích dưới đây

• Storyboar: kế hoạch chi tiết mà miêu tả chuỗi những cảnh quan trọng (thiết lập, hồi thoại, các hành động) của một chương trình truyền hình thương mại với ảnh hoặc sự phác thảo và văn bản. Được trình bày bởi một cơ quan quảng cáo đưa cho doanh nghiệp đặt hàng, nó giúp các doanh nghiệp dễ hình dung các nội dung nó muốn truyền đạt và trong việc quyết định có hay không tiến hành sản xuất
• Mugshot: một bức ảnh của khuôn mặt của một ai đó (đặc biệt là làm cho hồ sơ của cảnh sát)
• Persona: Trong nghĩa thông thường là một vai trò xã hội hoặc một nhân vật một diễn viên. Trong ngữ cảnh này ta có thể coi persona nghĩa là người dùng thay thế tạm thời (giả định cho người dùng thực tế của website)
• Mood board: là một cái bảng trong đó các bạn đính vào các mẫu chất liệu, hình ảnh thiết kế màu sắc từ tạp chí,v.v..coi như nguồn cảm hứng thiết kế
• Clipboard: nơi lưu trữ dữ liệu
• Prototyping: Công việc vẽ phác thảo website

Sử dụng phương pháp tiếp cận có kết cấu cho việc thiết kế Web của bạn và bạn sẽ kết thúc với một thiết kế phù hợp với các đối tượng của trang web là một cách hoàn hảo cũng như hoàn toàn tuyệt vời với bạn và khách hàng của bạn.

Sử dụng phương pháp tiếp cận có kết cấu cho việc thiết kế Web của bạn và bạn sẽ kết thúc với một thiết kế phù hợp với các đối tượng của trang web một cách hoàn hảo cũng như hoàn toàn tuyệt vời với bạn và khách hàng của bạn.

Tạo ra một thiết kế cho một website để trình bày một cách thành công một vấn đề quan trọng hay kinh doanh đang được nói đến nhiều hơn là cơ hội. Khi chúng ta bắt tay vào một thiết kế web mới

Dự án luôn luôn rất hấp dẫn, và chúng ta luôn muốn đi thẳng vào việc tạo ra mockups trực quan, xác định vị trí Navigation và phối màu. Đôi khi, cần phải thực hiện điều này, và chắc chắn nó sẽ làm tăng thêm sự mới lạ vào thiết kế cuối cùng, nhưng một phương pháp tiếp cận luôn có nhữngy rủi ro. Vì vậy, đối với một nhà thiết kế chuyện nghiệp, tốt hơn là có một phương pháp được kết cấu và đã được đo lường vị trí bạn sẽ xây dựng giải pháp thiết kế. Sau khi đã kiểm tra các đối tượng kinh doanh, yêu cầu của người dùng và xác định cấu trúc thông tin (thông tin chứa đựng trong website ăn khớp với nhau như thế nào).

Đây là các cách khác nhau để tiếp cận một dự án thiết kế. Trong bài hướng dẫn này, chúng ta sẽ xem cách duy nhất có thể cải thiện tiến trình công việc của bạn, giảm các nguy cơ, đáp ứng các mục tiêu kinh doanh và kết thúc với một thiết kế có ý nghĩa và đáp ứng các nhu cầu của người dùng. Bạn có thể chọn cách phù hợp với nhu cầu cá nhân của bạn – bài học quan trọng ở đây là tạo ra một cấu trúc vững chắc, không hạn chế quá trình sáng tạo và mang lại cho nó một nền tảng vững chắc.

Tác giả: Sam Hampton-Smith | chủ yếu xuất hiện trong vấn đề 156

01 Thu thập thông tin

Giai đoạn đầu tiên của bất kỳ dự án thiết nào cũng là để tìm ra bạn đang thiết kế cho ai. Điều này khá đơn giản nếu bạn đang làm việc cho một dự án cá nhân, nhưng nếu bạn đang được tuyển dụng cho một khách hàng, bạn cần hỏi một số câu hỏi quan trọng khi bắt đầu dự án. Thiết lập mục tiêu của trang web là gì, ai là người mà trang web muốn nhắm đến, sự tương phản ở đây là gì (bảng màu cụ thể, phông chữ và hình ảnh được yêu cầu như một phần đang tồn tại của thương hiệu) và v.v… Trong trường hợp này, chúng ta đang tạo ra một thiết kế có kích thước trung bình cho một doanh nghiệp tư vấn. Việc hiểu khách hàng của bạn và doanh nghiệp là rất quan trọng vì điều này sẽ có một tác động rất lớn lên các yếu tố thiết kế.

02 Xác định mục tiêu của bạn

Sau khi quyết định trang web này sẽ đại diện cho ai, chúng ta cần thiết lập trang web dành cho ai và cho cái gì. Trong phần lớn các trường hợp, khách hàng của bạn đều muốn trang web của họ thực hiện một chức năng đặc biệt: tăng doanh số bán hàng, trao đổi thông tin với khách hàng, xây dựng mối quan hệ hoặc giải thích một ý tưởng nào đó. Đây là những mục tiêu kinh doanh cốt lõi để quyết định việc phát triển trang web. Một khi bạn đã xác định được các mục tiêu này, bạn sẽ có ý tưởng hay về những người sử dụng trang web. Bạn cũng sẽ có khả năng thiết lập một số tiêu chí thành công hay thất bại của một trang web. Đối với kinh doanh, khách hàng muốn mở rộng khách hàng cơ bản của họ, hướng dẫn khách hàng hiện tại tới các dịch vụ được cung cấp khác và giới thiệu một dịch vụ năng lượng bền vững mới.

03 Tạo ra người dùng persona

Trọng tâm của toàn bộ quá trình thiết kế, đó là tham khảo các mục tiêu kinh doanh, cũng như mục tiêu của người dùng. Bạn nên tự đặt câu hỏi phản ứng của người dùng sẽ có đối với các yếu tố thiết kế bạn giới thiệu là gì? Để giúp đo lường và ghi lại một cách khách quan thông tin quan trọng này, hãy tạo ra một loạt người dùng Personas.

Một người dùng Persona là một bức tranh biếm họa về một người dùng điển hình trong số khách hàng mục tiêu. Phát triển một Persona riêng biệt cho mỗi một thành phần chính của khách hàng mục tiêu. Tạo ra tưgnf cái tên và một số đặc điểm rõ ràng như là tuổi, giới tính, sự giàu sang, giáo dục và thái độ. Dựa trên các thái độ về những gì khách hàng của bạn có thể nói với bạn về người tiêu dùng của họ (nhưng tránh tái tạo thành một người dùng thật sự). Bạn hãy quan sát các Personas của chúng tôi. Nếu có thể giúp hình dung người dùng của bạn, dùng Google Image tìm kiếm các mugshots phù hợp cho từng persona

04 Tạo Site Map

Bây giờ, chúng ta đã biết những gì chúng ta sẽ tạo ra, cho ai, và mục tiêu là gì. Bộ sưu tập những thông tin này cho phép chúng ta bắt đầu tạo ra cấu trúc thông tin cho website: nội dung và thông tin của trang web sẽ được sắp xếp như thế nào. Một phương pháp phổ biến là tạo ra một Site Map. Đó là một lời giới thiệu trực quan về các trang web hay các phần của một trang web tổng thể.

Vẽ Site Map này ra giấy và suy nghĩ cẩn thận về tầm quan trọng tương đối của thông tin. Dựa vào mục tiêu và người dùng Personas để đảm bảo rằng các thông tin quan trọng được tiếp cận một cách dễ dàng. Trong trường hợp của chúng ta, khách hàng muốn đẩy mạnh các dịch vụ năng lượng tái tạo của họ, vì vậy, thanh Navigation chính sẽ chứa một đường link tới các thông tin chi tiết, rộng hơn về các loại dịch vụ này.

05 Tạo ra một Mood Board

Đây là nơi của những bắt đầu vui vẻ. nó có thể là điều tuyệt vời để bắt đầu thẳng vào dự án thiết kế web ở giai đoạn này, nhưng giá trị của thông tin đã thu thập và phát triển trong 4 bước đầu tiên sẽ thực sự sẽ hiển thị lợi ích khi bạn bắt đầu đặt ra những ý tưởng. Ý tưởng là tập hợp lại cùng nhau như một tài liệu đầy cảm hứng.

Sưu tập tài liệu này theo cách nào phù hợp với bạn: một mood board với những bài báo cắt ra từ tạp chí và Brochure, một clipboard kỹ thuật số với các mẫu thông tin trên web và các screen grabs, hoặc một chiếc hộp lớn trong đó bạn có thể nhồi nhét những chiếc T –shirt, gói bọc sandwich và bìa đĩa của các cuốn băng ghi âm. Lưu và ghi bất cứ điều gì bạn có thể cung cấp cảm hứng sáng tạo cho dự án của bạn. Nếu bạn không chắc chắn một mood board như thế nào, bạn có thể dùng Google image tìm kiếm ‘mood board’. Xem boxout này, đó là các công cụ hữu ích giúp bạn tạo ra mood board của bạn.

06 phác thảo và storyboards

Bây giờ, đây là lúc bạn sử dụng mood board và Site Map, user personas và các mục tiêu, và tạo ra một loạt các bản phác thảo hình thu nhỏ để trình bày một giải pháp thiết kế bao gồm tất cả các yếu tố trong một layout duy nhất. Mỗi quyết thiết kế bạn thực hiện sẽ tác động trở lại với thông tin được thiết lập và phát triển trong các bước trước. Chúng ta sẽ sử dụng phông chữ doanh nghiệp Cafeta, để tạo ra các tiêu đồ và các yếu tố Navigation, giúp hỗ trợ việc xây dựng thương hiệu.

Việc xây dựng thương hiệu gợi lên trong chúng ta về những năm 20, vì vậy, chúng ta đang nhắm vào việc cách điệu phong cách công nghiệp, trong đó, cũng có thể giúp tái thực hiện các thông điệp và năng lực kinh doanh. Chú ý rằng chúng ta thiết lập 3 khu vực rộng lớn cho các dịch vụ thông tin quan trọng, vì user personas của chúng ta là người tạo quyết đinh để chúng ta xác định các thông tin quan trọng nhất thông qua chúng một cách nhanh chóng và hiệu quả. Chúng ta còn chỗ cho một layout hấp dẫn và thẩm mỹ. Mỗi một nhà thiết kế đều có sự khác biệt; không có câu trả lời đúng và sai về quá trình thiết kế, vì vậy hãy làm những gì mà bạn cảm thấy phù hợp cho dự án của bạn.

07 Suy nghĩ

Điều này được cho là giai đoạn quan trọng nhất của quá trình thiết kế tổng thể. Bạn phải dành thời gian để quay lại và suy nghĩ về công việc mà bạn đã hoàn thành, các giải pháp thiết kế mà bạn đang đề xuất, và điều đó có nghĩa là gì trong các giới hạn về khả năng sử dụng và các mục tiêu kinh doanh.

Hãy xem làm thế nào mà personas có thể biểu trưng cho người dùng của bạn và personas sẽ tác đông đến trang web của bạn như thế nào; nó sẽ hấp dẫn? Liệu có thích hợp không? Nó sẽ đáp ứng nhu cầu của họ một cách nhanh chóng và không phiền phức? Là thiết kế thích hợp cho các doanh nghiệp và mục tiêu của họ?

Nếu bạn có thể trả lời một cách tích cực về tất cả các tính toán này, bạn sẽ có một thiết kế khả thi. Ngoài ra, nó cũng xứng đáng nhận các ý kiến thứ yếu trong giai đoạn này. Hãy hỏi một số người tình nguyện sẵn sàng cung cấp cho bạn thông tin phản hồi trung thực nhất về phương pháp thiết kế của bạn, và hãy đưa ra những lời phê bình không mang tính cá nhân – thông tin phản hồi, tốt hay xấu, cũng là công cụ hữu ích để giúp bạn tinh chỉnh lại thiết kế của bạn.

08 Tạo ra phương pháp tiếp cận thiết kế

Một khi bạn đã hài lòng với các Thumbnail,đầu tiên, bạn cần phát triển các thumbnail này thành một Mockup kỹ thuật số. Moị người đều có cách tiếp cận riêng, vì vây, hãy sử dụng bất cứ công cụ nào bạn thấy thoải mái nhất, cho dù đó là Photoshop, Fireworks, Paint Shop Pro hay Illustrator. Chúng tôi đã sử dụng Illustrator và Fireworks ở đây để tinh chỉnh các Thumbnail của chúng tôi thành một thiết kế phù hợp với màn hình rộng 1024 (phổ biến cho các doanh nghiệp).

Hãy chọn các hình ảnh hỗ trợ một cách cẩn thận, và dựa vào bảng tâm trạng của bạn để tìm ra một sự kết hợp tập hợp ảnh và màu sắc phù hợp. Gắn một màu sắc đã xác định vào Palette thông qua thiết kế. Đừng tiêu phí quá nhiều thời gian về các chi tiết chưa chính xác; chúng ta cần kiểm tra thiết kế hoạt động trước khi phát triển thành sản phẩm cuối cùng. Các hình ảnh chụp đã sử dụng làm ví dụ trong thiết kế trang web của chúng ta được cho phép từ Stock.xchng (http://sxc.hu).

09 Prototype thiết kế của bạn (vẽ wireframe)

Lý tưởng nhất là bạn sẽ có một vài trang khác nhau sắp xếp nháp. Đây là một số cách để thử nghiệm thiết kế của bạn hoạt động một cách hiệu quả. Paper prototyping cho phép bạn phát hiện mọi vấn đề một cách nhanh chóng với thanh Navigation hoặc thông tin. In từng bố cục trang và ngồi với một người tình nguyện. Hãy yêu cầu người giúp đỡ bạn thực hiện một loạt nhiệm vụ bằng cách sử dụng thiết kế của bạn (chẳng hạn, xác định vị trí thông tin liên lạc cho doanh nghiệp này).

Đồng nghiệp của bạn sẽ chỉ đến Button mà họ muốn nhấn, sau đó, hiển thị chúng tới trang sẽ xuất hiện khi hành động được thực hiện. Nếu người dùng không thể tìm thông tin bạn yêu cầu họ, bạn cần nhìn lại thiết kế của bạn một lần nữa.

Một phương pháp tiếp cận khác là sử dụng một công cụ như Fireworks, trong đó nó sẽ cho phép bạn tạo ra các mockups theo chức năng của các website dựa trên các hình ảnh tương tác. Lưu từng thiết kế trang như một hình ảnh phẳng, sau đó nhập chúng vào trong Fireworks. Thêm các bản đồ hình ảnh để liên kết giữa các trang nơi đặt thanh Navigation trong thiết kế. Lặp lại tiến trình tương tự như với Paper prototyping, nhưng để người giúp đỡ bạn ngồi trước máy tính để tiến hành thử nghiệm.

10 chú ý đến chi tiết

Một khi bạn đã thiết lập xong, thiết kế của bạn hoạt động, đó là lúc để quay trở lại và phát triển các chi tiết chính xác. Thêm các yếu tố “wow-factor” ở đây, nhúng các Movie Clips, Typogarphy một cách cẩn thận và kiểm tra tính nhất quán. Bạn vẫn còn cần dựa vào người dùng personas và các mục tiêu kinh doanh, nhưng bây giờ, thiết kế được xác định rất tốt. vì vậy, có ít nguy cơ sẽ Off các thông điệp. Chúng ta đã thêm một số các yếu tố hỗ trợ thương hiệu hữu ích ở đây như là các phiên bản bị mờ của Logo, cũng như phần chủ đề dành cho hình ảnh chính.

11 sàng lọc vào mẫu cuối cùng, sau đó kiểm tra lại

Sau khi thiết kế được khách hàng ký kết (hoặc bạn hài lòng với thiết kế hoàn thành cho khách hàng), công việc đưa thiết kế vào trong HTML bằng cách tương tự, bạn thường muốn. Bạn hãy quan sát một số kỹ thuật liên quan trong việc thực hiện thiết kế của chúng ta trong bài hướng dẫn tìm thấy trên trang 50.

Khi thiết kế được chuyển sang và bạn có HTML của bạn, đừng quên kiểm tra lại một vài lần để chắc chắn rằng mọi thứ vẫn hoạt động. Phương pháp tiếp cận thiết kế này có thể quá mức cần thiết cho một vài dự án, nhưng khách hàng của bạn sẽ cảm ơn bạn vì nó, khi trang web mới của họ đáp ứng được các nhu cầu cụ thể cho người dùng của họ và hỗ trợ các mục tiêu kinh doanh thì thật là tuyệt vời.