update tutorial: UI 101

src/content/tutorials/ui-101/index.html

@@ -2,3 +2,231 @@
     Hồi mới tìm hiểu design, mình cứ nghĩ UI (<em>User Interface</em>) làm công việc mang tính thẩm mỹ cho giao diện. Càng tìm hiểu, mới thấy trong nghệ thuật thiết kế thì tính thẩm mỹ là một trong số các tính chất chứ không phải là yêu tố chính. Quan trọng là <strong>thiết kế phải giải quyết được vấn đề</strong>. Chúng ta cùng đi vào nội dung.
 </p>
 <img src="img/design-definition.png" alt="Design" itemprop="image">
+
+<h3>Những điều cơ bản</h3>
+<p>
+    Những điều cơ bản này, mình tóm gọn lại từ bài "UI Design Fundamental" của bác Tony Le (Quang Phowr). 
+</p>
+<ul>
+    <li>Thiết kế phải có mục đích</li>
+    <li>Giao diện không có người dùng, không phải là giao diện người dùng</li>
+    <li>
+        3 tính chất của UI Design
+    </li>
+</ul>
+
+<h4>Thiết kế phải có mục đích</h4>
+
+<blockquote>
+    <p>
+        Ai là đối tượng mà trang web muốn hướng đến? Mục đích của họ đến trang web là gì?
+    </p>
+    <footer>
+        <strong>Tony Le</strong>
+    </footer>
+</blockquote>
+<p>
+    Để xác định được người dùng và mục đích của họ, ta có nhiều phương pháp
+</p>
+<h5>Quy trình</h5>
+<ul>
+    <li>
+        <p> 
+            <strong>Quy trình thác nước (Waterfall model)</strong><br/>
+            Đây là quy trình cổ điển trong ngành Công nghệ phần mềm (Software Engineering). Bạn làm rõ yêu cầu, thiết kế, thực thi và kiểm thử. Bước nào thấy sai sai thì quay lại. Và kết quả là nó khá tốn thời gian và chi phí vận hành khá tốn kém về thời gian lẫn tiền bạc.
+        </p>
+        <img src="img/waterfall.jpeg" alt="Waterfall model" itemprop="image">
+    </li>
+    <li>
+        <p> 
+            <strong>Quy trình xoắn ốc (Spiral model)</strong><br/>
+            Quy trình này được cải tiến hơn, bạn chia nhỏ công việc ra từng giai đoạn, giai đoạn sau sẽ làm tiếp việc giai đoạn trước. Tuy nhiên, người dùng vẫn phải chờ đợi phía phát triển làm xong hết mới thấy được mặt mũi để góp ý.
+        </p>
+        <img src="img/spiral.jpg" alt="Spiral model" itemprop="image">
+    </li>
+    <li>
+        <p> 
+            <strong>Mô hình hướng người dùng làm trung tâm (User Centered Design model)</strong><br/>
+            Hiện nay, đa số các designer thích dùng mô hình này. Do giúp hiểu được người dùng hơn, được người dùng đóng góp ý kiến sớm và chi phí thấp. 
+        </p>
+        <img src="img/CCD-Process.png" alt="User Centered Design" itemprop="image">
+        <p>
+            Đối với quy trình này, có 2 bước quan trọng bạn cần làm. Sau khi làm xong sẽ trả lời được câu hỏi của bác Tony đặt ra.
+        </p>
+        <ul>
+            <li>
+                "Phân tích người dùng" aka <em>Ai sử dụng hệ thống này</em>
+            </li>
+            <li>
+                "Phân tích nghiệp vụ của người dùng" aka <em>Người dùng cần gì</em>
+            </li>
+        </ul>
+    </li>
+</ul>
+<img src="img/funny-board.jpg" alt="Funny board" itemprop="image">
+
+<h5>Phân tích người dùng</h5>
+<p>
+    Mục đích là xác định ai là người sử dụng. Bạn có thể dựa theo những mục tiêu gợi ý dưới đây:
+</p>
+<ul>
+    <li>
+        Độ tuổi, giới tính, văn hoá, ngôn ngữ
+    </li>
+    <li>
+        Kinh nghiệm dùng máy tính, thiết bị thông minh
+    </li>
+    <li>
+        Tần suất sử dụng
+    </li>
+    <li>
+        Giới hạn vật lý
+    </li>
+    <li>
+        Trình độ học vấn
+    </li>
+    <li>
+        Động lực sử dụng
+    </li>
+    <li>
+        Môi trường làm việc
+    </li>
+    <li>
+        Quan hệ xã hội
+    </li>
+    <li>
+        vân vân và mây mây
+    </li>
+</ul>
+<h5>Phân tích nghiệp vụ</h5>
+<p>
+    Bạn cần đạt được 3 mục tiêu sau đây
+</p>
+<ul>
+    <li>
+        Cần gì để hoàn thành nghiệp vụ? (mục tiêu)
+    </li>
+    <li>
+        Điều kiện gì để hoàn thành nghiệp vụ (điều kiện tiên quyết)
+    </li>
+    <li>
+        Các bước thực hiện (nhiệm vụ)
+    </li>
+</ul>
+
+<h4>Giao diện không có người dùng, không phải là giao diện người dùng</h4>
+<p>
+    Ý này cũng đơn giản, tức là bạn thiết kế một giao diện mà người dùng không thể sử dụng được là một bản thiết kế bỏ đi. Bạn làm được công việc phía trên là đã đủ dữ liệu để thiết kế một giao diện mà người dùng có thể chấp nhận xài được.
+</p>
+<img src="img/toilet.jpg" alt="Toilet" itemprop="image">
+
+<h4>3 tính chất của UI</h4>
+<h5>Tính thẩm mỹ</h5>
+<img src="img/iphone.jpg" alt="iOS 1 vs iOS 11" itemprop="image">
+<p>
+    Thú thật thì mười người, mười một ý. Cái đẹp có thể thay đổi theo thời gian, và nó phải hợp thời. Bạn nên đi theo xu hướng của thời đại thì giao diện ắt sẽ đẹp.
+</p>
+<p>
+    Năm viết bài này là 2018. Bạn thử xem xu hướng nó như thế nào. <a itemprop="url" href="https://icons8.com/articles/popular-ui-design-trends-dribbble/">https://icons8.com/articles/popular-ui-design-trends-dribbble/</a>.
+</p>
+<h5>Nội dung</h5>
+<p>
+    Nếu bạn có sử dụng chữ trong thiết kế, trước tiên là nó phải liên quan và có cấu trúc với hình ảnh sử dụng. Nội dung phải dễ tìm và đơn giản.
+</p>
+<p>
+    <code>"Người dùng" trong "ngữ cảnh" đó, họ cần "nội dung" gì.</code>
+</p>
+<p>
+    Để nâng cao kỹ năng này, bạn có thể đọc qua cuốn <a itemprop="url" href="https://tiki.vn/y-tuong-nay-la-cua-chung-minh-p375208.html">"Ý tưởng này là của chúng mình"</a> của Huỳnh Vĩnh Sơn hoặc GAM7.
+</p>
+<img src="img/quality-content.jpg" alt="Content" itemprop="image">
+
+<h5>Tính tương tác</h5>
+<p>
+    Các hành động như chạm, vuốt, nhấn, click,... lên thiết bị để thực hiện hành động nào đó trên giao diện. Các hành động đó chính là tương tác với giao diện. Khi ta tương tác, chúng có đem lại cảm xúc/ cảm giác cho người dùng.
+</p>
+<img src="img/ui-design-fundamental__interaction.jpg" alt="Interaction" itemprop="url">
+
+<h4>Ghi nhớ</h4>
+<ul>
+    <li>
+        Thiết kế cái gì đó phải có mục đích cụ thể, rõ ràng
+    </li>
+    <li>
+        UI Designer là người lập kế hoạch, không phải người sáng tạo
+    </li>
+</ul>
+
+<h3>Các thành phần cơ bản của UI</h3>
+<p>
+    Phần này sẽ nói về các component/khái niệm thường được sử dụng trong thiết kế giao diện.
+</p>
+<h4>Bố cục (Layout)</h4>
+<img src="img/wireframe.png" alt="Wireframe" itemprop="image">
+<p>
+    Trước khi bạn thiết kế bất cứ cái gì, cần thể hiện trước bố cục của tác phẩm để dễ dàng kiểm tra có hợp với yêu cầu của người dùng hay không, có thuận tiện cho team dev hay không,... Để căn chỉnh ngay hàng thẳng lối, bạn có thể dùng khái niệm Grid để chia bố cục. Thường là chuẩn 12 cột.
+</p>
+<img src="img/grid.png" alt="Grid Layout" itemprop="image">
+<h4>Chữ (Typography)</h4>
+<p>
+    Làm việc với con chữ là một nghệ thuật. Có khi bạn mất cả ngày trời để tìm font chữ sao cho phù hợp với thiết kế. Tuy nhiên có một khái niệm cần làm rõ:
+</p>
+<p>
+    <code>Font = Type-face + Type-style + Size</code>
+</p>
+<p>
+    Type-face ở đây là Arial, Times New Roman, Helvetica,... còn Type-style là bold, italic,... Nếu bạn đi sâu hơn, sẽ xuất hiện một số khái niệm khác như kerning, serif, stroke, spline,... 
+</p>
+<img src="img/typography-grid.png" alt="Typography Grid" itemprop="image">
+<h4>Màu sắc</h4>
+<p>
+    Bạn có thể phối màu theo những cách cổ điển như màu đối xứng, màu tam giác,... hoặc tìm hiểu cách phối màu theo xu hướng như màu Pantone, Material Design,... Nhưng cách mình thích nhất là copy phong cách của người mình thích để dần cải thiện kỹ năng dùng màu. Android Jones là một trong số nghệ sĩ mình thích.
+</p>
+<img src="img/forward-escape.png" alt="Forward Escape - Android Jones" itemprop="image">
+<h4>Hình ảnh</h4>
+<p>
+    Có một thuyết thấy cũng khá hợp lý - "Hình ảnh nói lên câu chuyện". Dưới đây là một số lưu ý khi dùng hình ảnh:
+</p>
+<ul>
+    <li>
+        Không dùng hình ảnh sáo rỗng
+    </li>
+    <li>
+        Nhớ kiểm tra bản quyền hình ảnh trước khi sử dụng
+    </li>
+    <li>
+        Sử dụng hình ảnh phải liên quan đến khán giả
+    </li>
+    <li>
+        Lưu ý kích thước và độ phân giải
+    </li>
+</ul>
+<img src="img/acadEMy.png" alt="acadEMy" itemprop="image">
+
+<h3>Có thể bạn thừa biết?</h3>
+<h4>Tìm nguồn tham khảo về UI Design ở đâu?</h4>
+<p>
+    Dưới đây là một số nguồn để bạn có thể tìm cảm hứng.
+</p>
+<ul>
+    <li>
+        <a itemprop="url" href="https://www.behance.net/">https://www.behance.net/</a>
+    </li>
+    <li>
+        <a itemprop="url" href="https://dribbble.com/">https://dribbble.com/</a>
+    </li>
+    <li>
+        <a itemprop="url" href="https://www.awwwards.com/">https://www.awwwards.com/</a>
+    </li>
+    <li>
+        <a itemprop="url" href="https://www.pinterest.com/">https://www.pinterest.com/</a>
+    </li>
+    <li>
+        <a itemprop="url" href="https://www.tumblr.com/">https://www.tumblr.com/</a>
+    </li>
+    <li>
+        <a itemprop="url" href="https://www.deviantart.com/">https://www.deviantart.com/</a>
+    </li>
+</ul>
+
+<img src="img/collusion.png" alt="Collusion" itemprop="image">