Công cụ hỗ trợ thiết kế web hiệu quả - P2 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Công cụ hỗ trợ thiết kế web hiệu quả – P2

Định hướng thiết kế

Inforgraphic

Logo

Typography

Portfolio

Brochure

Poster

Menu

Website

Business card

Mascot

(tiếp theo)

Thế giới ý tưởng thiết kế web không bao giờ ngừng vận động. Công nghệ sẽ tiếp tục đặt ra thách thức, các tiêu chuẩn sẽ tiếp tục tăng cao, và mỗi tháng, sẽ lại xuất hiện những bí kíp nho nhỏ khiến công việc thiết kế của bạn trở nên thuận tiện hơn.

Các mô hình tĩnh ngày càng bớt hữu ích và ranh giới giữa web designer và web developer sẽ sớm được xóa mờ. Khi chúng ta cộng tác cùng nhiều thành viên khác cho công việc chung, các công cụ chúng ta sử dụng cũng cần đổi mới.

Dưới đây, bài viết của tôi sẽ giới thiệu 11 công cụ thiết yếu cho cuộc sống trong ngành thiết kế web. Hãy thử thực hiện chúng để xem liệu những điều như vậy có hiệu quả với bạn, song, bạn cần nhớ, đừng trở nên quá phụ thuộc. Một công cụ nào đó được mang tới trong vài tháng tiếp theo rất có khả năng khiến chúng lập tức chìm vào quên lãng.

05. Antetype:

Antetype là một công cụ hỗ trợ tạo nên sản phẩm UI tương thích với ứng dụng và website khác. Có vẻ như nó được tạo ra chỉ với một chức năng: làm nên tác phẩm trung thành với bản gốc chứ không tự sản xuất dữ liệu. Đây thật sự là điều tích cực – đội ngũ tập trung vào chính xác những điều đang được tạo ra, và không cố gắng mang tới ứng dụng nào đó hoàn toàn thay thế developer.

“Không hài lòng với việc sử dụng công cụ chỉnh sửa ảnh cho thiết kế UX, chúng tôi mong muốn tạo ra một công cụ dành riêng cho UX với sự thấu hiểu tốt hơn về nội dung cũng như bố cục” – Tim Klauck, giám đốc UX tại Antetype bày tỏ – “Bố cục tự động và thiết bị khác cho phép chúng ta lặp lại các thiết kế của mình trong khi vẫn đồng thời duy trì sự kết nối.”

Bằng cách download, bạn sẽ nhận được cả thư viện công cụ căn bản rất tiện ích, sử dụng chúng để tạo ra các mẫu thiết kế đầu tiên và bắt tay vào sáng tạo. Antetype cung cấp một thư viện các thiết bị và thiết kế OS, bao gồm cả iOS, Android và Window để bước đầu khởi động. Ngoài ra, còn có một nền tảng chia sẻ chung rất linh hoạt giữa cộng đồng, và bạn có thể download sản phẩm từ các người dùng khác.

Điều khiến Antetype trở nên khác biệt với các công cụ tạo nguyên bản thiết kế khác tôi từng sử dụng là bạn có thể thực sự tạo ra các nguyên bản tương thích và thêm vào các kết nối ngắn gọn nhất. Thật lí tưởng để giới thiệu sáng kiến trước khách hàng bạn nhắm tới.

Có một chút khó khăn trong việc “kéo và thả” nút like và UI thì không quá rực rỡ, nhưng công cụ này rất năng suất và bạn có thể nhanh chóng học cách làm chủ nó. Dành ra một chút thời gian tìm hiểu và bạn sẽ làm nên những bản mẫu hết sức hiệu quả chỉ trong vài giờ.

06. Sketch:

Sketch đã có một lượng người theo dõi khổng lồ từ khi thành lập vào năm 2009. Tốc độ phát triển của Bohemian Coding (sáng lập Sketch) thực sự rất ấn tượng – nhóm thiết kế vừa đưa ra thể loại vector đơn giản hóa, biểu tượng cũng như cách thức xuất giữ liệu cải tiến.

“Khi bắt đầu xây dựng Sketch, chúng tôi hình dung ra một ứng dụng dành riêng cho digital designer hiện đại” – Pieter Omvlee, nhà sáng lập Bohemian Coding chia sẻ – “Chúng tôi cố gắng làm điều đó với sự tiến bộ cốt lõi của chức năng nền tảng và tính năng mới cấp tiến. Cả team cảm thấy hổ thẹn trước nhiệt huyết từ mọi người khi họ bắt đầu sử dụng Sketch và bởi những tác phẩm tuyệt vời họ tạo ra.”

Tôi vô cùng yêu thích cách Sketch kết hợp logic trong CSS vào ứng dụng. Điều này giúp bạn có thể chuyển đổi thiết kế của mình thành CSS dễ dàng hơn rất nhiều khi chúng ta bắt buộc phải sử dụng logic CSS để tạo thành phong cách thiết kế.

Một tính năng khác cũng rất tiện lợi để tối ưu hóa sự liêt kết giữa design và development là Automatic Slicing. Không cần tới việc tự tay thêm vào slice, Sketch có thể tạo dữ liệu chỉ bằng lệnh click chuột theo thông số 0,5x, 1x, 2x và 3x, ví dụ như file PNG, JPG hay TIFF. Tôi rất mong chờ bước tiến tiếp theo của ứng dụng này.

07. Form:

Ứng dụng Form của RelativeWave là một công cụ tạo bản mẫu rất khác biệt so với các công cụ khác mà tôi từng trải nghiệm. Đây không phải một công cụ thiết kế thông thường với sự thiếu vắng tính năng hay bảng layers. Sử dụng ứng dụng giống như việc kết hợp hài hòa giữa thiết kế và lập trình.

Khi bạn không thể thực sự tạo ra thiết kế đồ họa trên chương trình, bạn có thể gài chúng vào và sử dụng công cụ mà Form gọi là “patch” (miếng vá) để thêm vào các thao tác hay liên kết. Ứng dụng của Mac cũng yêu cầu bạn tương tác qua iOS để quan sát sản phẩm thiết kế trên thời gian thực và kết nối với chúng.

“Form là một công cụ tạo bản mẫu và thiết kế ứng dụng với mục đích tạo ra thiết kế gần nhất với sản phẩm thực tế” – lập trình viên sáng tạo của RelativeWave, Max Weisel giải thích – “Chúng tôi mong đợi designer sẽ sáng tạo theo đính hướng trực tiếp vào mặt thành phẩm của một ứng dụng và cùng lúc khuyến khích kĩ sư tập trung vào các vấn đề phức tạp hơn.”

Có một số bí quyết hữu ích trong việc sử dụng Form, song, quá trình sẽ phức tạp hơn, nếu bạn giống như tôi, quen tạo ra hình ảnh trên Photoshop. Di chuyển hình ảnh đến trung tâm thiết bị bạn có, ví dụ, được thực hiện với biến số Superview hay Match Patches. Cùng lúc, bạn sẽ vừa sử dụng Toán học để phân chia chiều rộng, chiều dài, vừa kết nối chúng tới vị trí X và Y trên Image View. Nhóm chúng lại với nhau, đặt lại tên các biến số và điều chỉnh hợp lí các điểm neo X,Y, tôi cho rằng quá trình này có phần khá phức tạp.

Tuy nhiên, khi bạn đặt mối quan tâm của mình xung quanh công đoạn, bạn sẽ tạo ra một bản mẫu vô cùng ấn tượng. Có khả năng truy cập camera thiết bị và các phần tử khác, bản mẫu bạn tạo ra tiện ích chẳng kém gì ứng dụng được lập trình.

(còn nữa)