Nếu bạn thắc mắc ý nghĩa của từ Sketotype, cũng như nguồn cảm hứng để trang ra đời thì bạn hãy "dạo" nội dung bên dưới nhé!
1 - Sketotype có ý nghĩa gì?
Sketotype là cách viết ngắn gọn của quá trình “From Sketch to Prototype”. Các từ này sẽ khá quen thuộc với “Đì dzai nờ" (designer), đặc biệt lĩnh vực phát triển phần mềm. Chúng là giai đoạn đầu tiên và cuối cùng của một bản thiết kế sản phẩm, giao diện. Bên cạnh đó, còn có 2 giai đoạn khác là Wirefram và Mockup. Mình sẽ mô tả chi tiết các công đoạn này gói gọn trong việc phát triển phần mềm.
SKETCH - BẢN PHÁC HOẠ Ý TƯỞNG
Sketch là thành phẩm của câu “Ê! Tao nghĩ ra rồi” kèm những nét vẽ nguệch ngoạc trên giấy hoặc bảng; hoặc xịn hơn là trên máy tính bảng. Có thể nói, thời điểm bản sketch hoàn tất cũng là lúc bạn xong 50% khối lượng công việc. Dưới đây là một số minh hoạ giúp bạn hình dung rõ hơn:
WIREFRAME - BẢN SKETCH ĐƯỢC CHUẨN HOÁ
Thông thường, sketch sẽ chỉ chứa thành phần chính của sản phẩm, thiết kế. Để bất kỳ ai đọc đều hiểu đúng và đầy đủ ý truyền đạt, từng yếu tố sẽ được thể hiện dưới dạng ký hiệu đã được quy ước và chi tiết hơn. Cụ thể:
Yếu tố cấu tạo | Ký hiệu thể hiện |
|---|---|
Câu từ, số, ký tự | Đường thẳng hoặc răng cưa  |
Đoạn văn | Nhiều đường thẳng hoặc răng cưa |
Hình ảnh | Hình chữ nhật/hình vuông có 2 đường chéo  |
Nút bấm | Hình chữ nhật hoặc hình elip  |
Icon | Hình tròn. Nếu là icon quan trọng thì dùng icon thật  |
Và Wireframe ra đời từ đây. Do đặc điểm "trắng-đen" của mình mà Wireframe còn có tên tiếng Anh khác là Low-fidelity mockup. Phần lớn Wireframe sẽ được vẽ trên phần mềm thiết kế (mình đang sử dụng Figma), vì nó sẽ tiết kiệm rất nhiều thời gian chuyển đổi từ Wireframe sang Mockup. Dưới đây là ví dụ về Wireframe - màn hình danh sách sản phẩm:
MOCKUP - PHIÊN BẢN WIREFRAME DẬY THÌ THÀNH CÔNG
Từ các màn hình Wireframe trắng-đen, ít chi tiết, ít thông tin, UI/UX desiger sẽ thêm thắt các "chất liệu thiết kế" (font, màu sắc, icon, nút, hình ảnh,...) để tạo nên một màn hình vừa dễ thao tác, vừa dễ nhìn, giống với thực tế nhất. Phiên bản này được gọi là Mockup. Tất nhiên, việc sắp xếp và hiển thị các “chất liệu” này không phải tuỳ ý thích. Xét về nền tảng, mọi thứ đều có nguyên tắc, và UX (User Experience) cũng vậy. Mình sẽ viết rõ hơn về các Nguyên tắc thiết kế UX (UX Principles) ở các bài tiếp theo.
Do mockup đã khá đầy đủ thông tin về sản phẩm sắp phát triển nên đội developer có thể bắt tay vào code, trừ trường hợp sản phẩm/dự án yêu cầu rất cao về các hiệu ứng chuyển đổi. Ví dụ màn hình topup điểm dưới đây:
PROTOTYPE - NÚT THANH TOÁN CÓ THỂ BẤM ĐƯỢC!
Như tiêu đề, các nút trên màn hình mockup sẽ bấm được. Lúc này, bạn sẽ hình dung rất rõ các bước trong quy trình diễn ra như thế nào. Và đó chính là mục đích sau cùng của toàn bộ quy trình thiết kế.
Lưu ý: việc tạo prototype sẽ mất một khoảng thời gian kha khá. Do đó, bạn chỉ nên thực hiện ở các màn hình yêu cầu hiệu ứng rõ ràng, hoặc khó giải thích bằng lời.
Vậy là chúng ta đã dạo qua các giai đoạn để thiết kế sản phẩm trong lĩnh vực phần mềm. Gòi nó liên quan gì đến việc mần web này. Mời bạn cùng xem Phần 2 - Tư duy từ 0 lên 1 nhé!
"Xin chào mọi người, mình là Phú, và đây là bài viết đầu tiên của mình với Sketotype. Cảm ơn bạn đã ghé trang và đọc đến đây nhé. Hi vọng Sketotype có thể giúp bạn tìm được cảm hứng cho mình"
Comments