Làm lại blog cá nhân (Phần 2): Thiết kế giao diện

Date
Ngày đăng
#UX/UI #Personal Blog

Sau khi đã lên phần nội dung cho website, tớ bắt đầu công việc thiết kế giao diện.

Thumbnails

Lên ý tưởng

“Steal like an artist” - Đây là câu châm ngôn khi mình bắt đầu công việc đi tìm ý tưởng. Đầu tiên mình lượn các trang dưới đây với các từ khoá lần lượt là personal blog, blog, portfolio, designer blog, developer blog:

Đây là kết quả sau khi mình lượm lặt được từ các trang tìm trên mạng. Mình dùng Balsamiq Mockup 3 để vẽ wireframe.

Wireframe

Thiết kế sitemap

Tiếp theo mình sẽ lên cấu trúc trang web để định hình việc điều hướng. Phần màu cam là các trang bắt đầu từ thanh điều hướng (navigation bar). Phần màu xanh lá là các trang bắt đầu từ màn hình trang chủ.

Sitemap

Vẽ mockup

Dựa vào sitemap, ta sẽ thiết 4 màn hình chính và sau đó sẽ tái sử dụng layout cho các màn hình còn lại.

  • Trang chủ
  • Giới thiệu
  • Liên hệ
  • Một bài viết

Sketch

Bạn vào Pinterest của tớ để xem chi tiết các màn hình.

Tổng kết

Quá trình thiết kế giao diện đến đây là kết thúc. Chúng ta sẽ tiếp tục phần kế tiếp là quản lý cấu hình của project này.