Nghiên cứu thị trường, wireframe, thiết kế - Phần 4

(Bài viết có tính khai sáng rất cao, anh em startup nên đọc)

Wireframing, Copywriting và Design

Khi bạn cảm thấy rằng bạn có thị trường, bạn sẽ muốn thiết kế một mô hình sản phẩm của mình trang web, còn được gọi là wireframe. Đối với mục đích của lớp học này, chúng tôi sẽ giả định hai điều: đầu tiên, mọi sản phẩm trong lớp sẽ có một thành phần web. Thứ hai, sản phẩm

ban đầu bản thân nó sẽ được tiếp thị thông qua trang web huy động vốn cộng đồng của riêng bạn, nhưng cuối cùng sẽ có trang web chuyên dụng của riêng mình. Thật vậy, trang web huy động vốn cộng đồng này cuối cùng có thể biến thành trang web sản phẩm theo thời gian.

Wireframing

Có rất nhiều công cụ tạo wireframe tuyệt vời và chúng tôi đã chọn ra bốn công cụ đặc biệt được quan tâm Hình 10. Để chỉnh sửa trên máy tính, Omnigraffle Pro rất tốt cho chỉnh sửa ngoại tuyến, Lucidchart hữu ích cho việc tạo wireframe cộng tác và Jetstrap giúp việc này trở nên dễ dàng để chuyển đổi thiết kế cuối cùng sang Twitter Bootstrap. Để chuyển đổi mô hình bút và giấy ngoại tuyến, POP (popapp.in) thực sự đáng để thử. Hãy thử các công cụ này và tìm một công cụ bạn thích; mục tiêu chính của bạn là tạo sơ đồ trang web và các luồng người dùng chi tiết trông giống như thế này.

Copywriting

Dưới đây là một số nguyên tắc viết quảng cáo cấp cao.

• Thông báo trang chủ: Nếu đó không phải là thông báo trang chủ, thì đó không phải là thông báo. Đừng mong đợi khách truy cập để tìm hiểu sản phẩm trên trang thứ ba; kẻ thù của bạn là nút quay lại. Điều đó nói rằng, chỉ sử dụng năng lượng trên trang chủ nếu đó là một nguồn khách hàng đáng kể. Nếu không (ví dụ: nếu doanh số của bạn đến với lực lượng bán hàng), bạn có thể rời khỏi trang chủ một mình trong một thời gian dài đáng ngạc nhiên.

• Làm việc ngược lại so với thông cáo báo chí: Amazon viết thông cáo báo chí trước khi họ xây dựng sản phẩm. Khi làm điều đó, bạn sẽ thấy mình tìm ra các tính năng nào tạo tin tức và cái nào tạo nhiễu. Hãy xem thông cáo báo chí của họ để hiểu về kiểu họ.

• Ai đó sai trên internet: Tìm bạn bè, nhờ họ xem website đối thủ cạnh tranh nhiều nhất có thể và bạn sẽ nhanh chóng thấy mình giải thích cho họ lý do tại sao công ty thật tồi tệ và tại sao công ty của bạn lại khác. Điều này có giá trị. Những gì bạn viết ra sẽ là những lời tâm huyết về lý do tại sao sản phẩm của bạn thực sự khác biệt. Đặt điều này vào một tính năng ma trận (ví dụ) và sau đó xác định xem các tính năng mới của bạn có thực sự phân biệt về cơ bản sản phẩm.

• Đơn giản và thực tế: Cố gắng hết sức để biến các tính năng mơ hồ (“Xếp hạng trang cung cấp tốt hơn chất lượng tìm kiếm ”) thành dữ kiện và thống kê cụ thể (“ X% người tìm kiếm đã sử dụng cả Blekko và Google ưa thích Blekko. Tìm hiểu lý do tại sao. ”). Sử dụng tiếp thị theo phong cách Oracle: càng đơn giản càng tốt, chốt 1 điểm trên nếp gấp và giữ phần còn lại trong bản sao thứ cấp.

• Kêu gọi hành động: Bạn muốn ai đó làm điều gì đó khi họ truy cập trang của bạn, như mua một cái gì đó hoặc đăng ký trên một mẫu email. Đảm bảo bạn nhắc lại “lời kêu gọi hành động” này nhiều lần. Làm cho nút kêu gọi hành động lớn và có phông chữ khác.

Bạn có thể áp dụng các nguyên tắc này để áp dụng với cộng đồng gọi vốn của mình.

Thiết kế

Mục tiêu đầu tiên của bạn với wireframe phải là chức năng và ý nghĩa ngữ nghĩa: sản phẩm để làm gì? Mục tiêu thứ hai của bạn là bản sao tiếp thị: làm thế nào để chúng tôi giải thích những gì sản phẩm làm được bằng lời nói? Mục tiêu cuối cùng của bạn là thiết kế: làm thế nào để chúng tôi tạo ra trang web và sản phẩm nhìn đẹp và hoạt động tốt? Hãy cùng tìm hiểu một số nguyên tắc thiết kế cấp cao.

• Đồ họa Vector và Raster: Điều đầu tiên cần hiểu về thiết kế là sự khác biệt giữa đồ họa vector và raster. Bất cứ khi nào có thể, bạn muốn làm việc với vector các đối tượng vì chúng sẽ mở rộng quy mô tốt và có thể thao tác sau này. Raster hình ảnh không thể tránh khỏi nếu bạn thực sự cần ảnh trên trang web của mình, nhưng bạn nên cố gắng giảm thiểu chúng cho MVP của bạn.

• Căn chỉnh, Lặp lại, Tương phản, Gần gũi: Sách thiết kế của Người không phải nhà thiết kế của Robin Williams là một bước tiếp theo hợp lý, với bốn nguyên tắc được tóm tắt ở đây. Bạn có thể thấy bốn nguyên tắc này trông như thế nào trong thực tế: Căn chỉnh, Lặp lại, Tương phản, Sự gần gũi. Một chiến lược tốt là xem xét các ví dụ, cố gắng tiếp thu các bài học, tạo thiết kế của bạn mà không cần suy nghĩ quá nhiều về chúng, sau đó áp dụng lại thiết kế ở cuối.

• Phông chữ và Biểu tượng: Về mặt nhanh chóng kết hợp một cái gì đó hợp lý với nhau, bạn nên sử dụng nhiều phông chữ. Bởi vì phông chữ là đồ họa vector được chỉ định bởi các phương trình toán học, chúng có thể thao tác vô hạn với các biến đổi CSS được tích hợp trong mọi trình duyệt (mà chúng tôi sẽ đề cập vào tuần tới). Thư viện FontAwesome cũng cung cấp khả năng mở rộng biểu tượng vectơ, thường hữu ích cho việc mô phỏng nhanh khi được phóng to về kích thước. Thậm chí nếu không phải là hình ảnh hoàn hảo, thực tế là những hình ảnh phức tạp này có thể được tạo ra trong một tổ hợp phím và xoay / tô màu với một vài phím khác làm cho chúng trở nên khá tốt để nhanh chóng kiểm chứng khái niệm. Với một chút thực hành, người ta có thể có được một nguyên mẫu trông khá đẹp với phông chữ thuần túy và ký tự Unicode.

• Kho ảnh, Video, Hoạt ảnh: Sử dụng iStockphoto làm bạn đồng hành trực quan với Công cụ Từ khoá Bên ngoài. Thông thường, chìa khóa để có một bản trình bày hoặc trang web tốt là đặt một khái niệm trừu tượng thành dạng trực quan. Các nhiếp ảnh gia chứng khoán đã thực sự nghĩ về những vấn đề này; đây là một ví dụ để thành lập một doanh nghiệp. Một điểm: không sử dụng cổ phiếu ảnh mà mọi người đang nhìn vào máy ảnh. Đó là những gì tạo nên một kho ảnh nhìn rẻ. Một tín hiệu tốt của một trang web chất lượng thấp hơn là nó có phần đệm không nhất quán, không sử dụng https đúng cách để thanh toán và / hoặc sử dụng kho ảnh loại này. Lần nữa, điều này thật tệ, trong khi điều này có thể vượt qua. Bạn cũng có thể cân nhắc việc chụp lại một bức ảnh có sẵn với sản phẩm của bạn để nó trông tùy chỉnh.

• Sử dụng Bootstrap, Themeforest, 99Designs, Dribbble: Khi nói đến việc chuyển wireframe của bạn thành HTML / CSS / JS, đừng phát minh lại bánh xe. Thiết kế là thông tin và là trở thành hàng hóa. Bootstrap là một khung CSS miễn phí mà chúng tôi sẽ sử dụng thông qua khóa học. Jetstrap, đã được đề cập trước đây, là một công cụ wireframing xuất khẩu sang chức năng HTML / CSS với Bootstrap. Themeforest là một bộ đắt hơn một chút ($ 9-12) các mẫu. 99Designs là vài trăm đến vài nghìn đô la cho một bản sửa đổi logo hoặc trang web. Và Dribbble là một nguồn tài nguyên tuyệt vời để tìm kiếm nhà thiết kế theo hợp đồng hoặc toàn thời gian.

Nguồn: Hung Dang dịch từ bài Market Research, Wireframing, and Design của Balaji S. Srinivasan