Hướng dẫn cơ bản wireframing trong thiết kế website-P2 | Cộng Đồng GSM Việt Nam-Đồng Hành-Hỗ trợ-Thành Công

Trùm vật tư ép kính | Bệnh Viện Điện Thoại 24h | Linh Kiện Tín Thành | Đặt chữ quảng cáo | Đặt chữ quảng cáo | Trùm điện thoại cổ độc

Hướng dẫn cơ bản wireframing trong thiết kế website-P2

Thảo luận trong 'Chuyện bên lề' bắt đầu bởi sản phẩm tốt, 14/7/16.

  1. sản phẩm tốt

    • Thành Viên
    Gia đình Vietnamgsm
    Làm thành viên từ: 25/4/16
    Bài viết: 184
    Cảm ơn: 0
    Điểm: 0
    M:
    Vietnamgsm GOLD:


    Cũng giống như bản blueprint trong thiết kế kiến trúc, thiết kế web chuyên nghiệp bạn cần xem nó như bản phác thảo sơ đồ đen trắng hai chiều trước khi nghĩ ra cách xây một ngôi nhà thật sự. Tương tự, ở thiết kế giao diện, bạn không thể bắt đầu tạo lớp (layer) trong photoshop, hay viết các đoạn mã, mà không biết thông tin sẽ được xử lý như thế nào.
    Xác định layout với các hình hộp
    Bạn có thể vẽ các hình hộp đặt theo các cột của grid. Đây là lúc bạn lên ý tưởng sắp xếp và trình bày các thông tin trên trang web làm thế nào để người xem dễ dàng truy cập nhất. Bắt đầu từ trên xuống, từ trái sang phải. Dưới đây là một ví dụ wireframe với layout sử dụng grid
    Đôi lúc, dựa vào mục tiêu đối tượng thiet ke web cong ty của bạn và thể loại web bạn đang thiết kế, bạn có thể sáng tạo theo ý muốn nhưng luôn phải ghi nhớ giữ phân cấp hệ thống thông tin khi trình bày. Đây là một layout cho một web blog với các vị trí dành cho quảng cáo và các ghi chú hướng dẫn dành cho khách hàng.
    [​IMG]
    Tinh chỉnh với sắc độ xám
    Sử dụng các sắc độ xám sẽ giúp bạn xác định sẽ giúp bạn xác định các trọng yếu mà không cần tô các màu sắc hoàn chỉnh. Thực tế nó sẽ giúp bạn trong quá trình thiết kế trực quan sau này
    Thêm chi tiết trên wireframe
    Đây là bước không bắt buộc, nhưng nếu muốn điều chỉnh chi tiết bạn nên thử qua bước này. Ở bước này, bạn có thể thêm vào các chi tiết càng nhiều càng tốt, đây vẫn chưa phải lá lúc bạn quá tập trung vào các hình ảnh, công ty seo website đơn giản là có thể bạn muốn đặt các đoạn chữ và lên ý tưởng sử dụng các loại kiểu chữ.
    Bạn cũng có thể thử thêm một số màu sắc.
    Ý tưởng chung đây là giai đoạn kết hợp giữa hình ảnh/ viết mã, thêm hoặc bỏ bớt chi tiết, hoàn thiện wireframe và kết thúc giai đoạn thử nghiệm. Các hoạt động trong giai đoạn này sẽ bao gồm lắng nghe các phản hồi và điều chỉnh wireframe trên phần mềm bạn đang sử dụng.
    Nếu bạn đang phải làm việc với một đội ngũ lập trình viên, bạn sẽ mong muốn hoàn tất giai đoạn này để bàn giao cho họ viết mã framework cơ bản, thiết kế website bán hàng để bạn rãnh tay hoàn thiện wireframe ở phần xử lý hình ảnh trực quan.
    Chuyển đổi wirefame thành hình ảnh trực quan
    Như đã nói ở trên, chúng tôi khuyên bạn nên thực hiện giai đoạn này với phần mềm Illustrator bởi vì bạn sẽ dễ dàng xuất tập tin sang định dạng .psd của photoshop với các layer có thể dễ dàng sửa đổi.
    Tóm lược

    Đây chỉ là một trong những quy trình tham khảo, mỗi nhà thiết kế web có thể tự thiết lập các quy trình khác nhau tùy theo công việc cụ thể và kinh nghiệm của mình. Dù thế nào đi nữa, bạn không nên bỏ qua giai đoạn dựng thiết kế web công ty cấu trúc khung (wireframe), vì đây là bước quan trọng để định hình bố cục thông tin, giúp khác xem dễ dàng thao tác và truy cập thông tin trên trang web dễ dàng ,đó cũng là một tiêu chí quan trọng để một trang web được đánh giá là hoàn hảo.
     

    ****************Để giúp forum phát triển,anh em vui lòng share Facebook, Google+ ****************
    -

Thành viên đang xem bài viết này (Thành viên: 0, Khách: 0)

X

Hỗ trợ kỹ thuât >> CHAT ngay !