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

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.

Phần 1: Khởi động
Phần 2: Thiết kế giao diện
Phần 3: Quản lý cấu hình
Phần 4: Bắt đầu với giao diện
Phần 5: Schema.org du hý
Phần 6: Metadata và các công cụ theo dõi hoạt động người dùng
Phần 7: Template Engine
Phần 8: Deployment

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.

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ủ.

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

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.