Cần chuẩn bị những gì để học Python?                    Python là gì? Ưu điểm và nhược điểm của Python?                    Chùm ca dao về phong tục tập quán Việt Nam                    Bài Thơ Truyền Thuyết                    BÀI THƠ TẤM CÁM                    


Công cụ làm responsive web


Thiết kế web thích ứng (responsive web design) hiện đang là xu hướng thiết kế web phổ biến và tiện lợi. Nó có thể thích ứng với tất cả các thiết bị di động và dễ dàng xử lý. Tạp chí thiết kế web xin chia sẻ danh sách 12 công cụ thiết kế web Responsive cần thiết và hữu ích cho nhà thiết kế, phát triển web.

 

Cùng với nhu cầu thiết kế web responsive ngày càng tăng thì các công cụ thiết kế web responsive cũng ngày càng được phát triển nhiều hơn. 12 công cụ dưới đây đã được sắp xếp theo từng mục đích riêng theo từng giai đoạn trong quá trình thiết kế web. Lưu ý rằng trên internet còn rất nhiều công cụ thiết kế web responsive khác, do vậy nếu bạn biết một công cụ nào hay ho hãy nhớ chia sẻ với chúng tôi.

 

Công cụ Mock-up, Prototype và Wireframe

 

Hãy bắt đầu với những điều đơn giản nhất. Các thiết kế web thường bắt đầu với một sketch (bản phác thảo), một wireframe hoặc một mock-up. Đây là những yếu tố quan trọng để có một layout chính xác phù hợp với các thiết bị di động. Dưới đây là một số công cụ tạo mockup và wireframe thiết kế web giúp thực hiện điều này.

 

1/ InterfaceSketch

 

Đây là công cụ cung cấp cho các nhà thiết kế một loạt các mẫu PDF đơn giản, được thiết kế phù hợp với màn hình của các thiết bị di động khác nhau. Bạn có thể in ra các file PDF và sử dụng chúng để vạch ra các thiết kế phác thảo ban đầu với một cây bút chì – công cụ thiết kế tốt nhất từ trước đến nay. Mặc dù đây là công cụ cơ bản, nhưng nó là cách tuyệt vời để hình dung những gì bạn muốn có được.

 

cong cu web InterfaceSketch

Công cụ thiết kế web InterfaceSketch

 

Website: http://www.interfacesketch.com/

 

2/ StyleTiles

 

Samanatha Warren đưa ra một kỹ thuật mới cho việc thiết kế; thay vì chiều rộng của mockups cố định như thông thường, công cụ này những thứ giống như swatches (những tấm vải mẫu trong thiết kế thời trang) hay moodboards (bảng trong đó nhà thiết kế thời trang đính vào đó các mẫu chất liệu, hình ảnh thiết kế từ tạp chí… coi như nguồn cảm hứng) tạo ra cái nhìn tổng quan chứ không đi vào chi tiết.

 

cong cu web StyleTiles

Công cụ thiết kế web StyleTiles

 

Website: http://styletil.es/

 

3/ Responsive Wireframes

 

Sau khi đã có một bản phác thảo ban đầu, sẽ là lúc chúng ta chuyển sang wireframes. Theo thiết kế web truyền thống, wireframes là một bản mẫu tĩnh về cách website được hiển thị cuối cùng như thế nào. Trong thiết kế web thích ứng, thì wireframes riêng biệt cho nhiều kích cỡ màn hình khác nhau. James Mellers của Adobe đã tạo ra công cụ này để dựng wireframe cho các layout phức tạp. Điều này giúp bạn tiết kiệm thời gian và tránh khỏi mọi việc rắc rối trong việc tạo ra các layout trên các thiết bị khác nhau.

 

cong cu web Responsive Wireframes

Công cụ thiết kế web Responsive Wireframes

 

Website: http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

 

4/ Wirefy

 

Đối với những người tìm kiếm việc tạo ra các wireframe của riêng mình thì Wirefy là một công cụ phù hợp. Nó là một tập hợp các đoạn [HTML] responsive và nó cho phép các designer xây dựng các wireframe responsive nhanh chóng. Đây là một công cụ vô giá có thể giúp bạn tiết kiệm nhiều giờ.

 

cong cu web Wirefy

Công cụ thiết kế web Wirefy

 

Website: http://getwirefy.com/

 

Tạo HTML và CSS responsive

 

Sau khi đã hoàn thành mock-ups và wireframes, đã đến lúc để lập trình mã. Tạo ra các mã [CSS] với nhiều breakpoints và phương tiện truy vấn không là một nhiệm vụ yêu thích của lập trình mã. Các công cụ sau đây giúp bạn tạo ra các code responsive một cách dễ dàng.

 

5/ PureCSS

 

PureCSS là một tập hợp nhỏ các module CSS được thiết kế đặc biệt dành cho thiết bị di động. Đây là một Framework siêu nhỏ, kích thước chỉ vỏn vẹn 4,4K sau khi nén.  Bạn có thể tạo ra các layout responsive bằng cách sử dụng module Grid va Menus. Ngoài ra cũng có các module riêng biệt dành cho các yếu tố CSS điển hình khác như: buttons, tales và forms.

 

Website: http://purecss.io/

 

6/ Responsive Web CSS

 

Responsive Web CSS là một công cụ có cách tiếp cận khác. Nó cho phép bạn tạo ra một layout bằng cách thêm vào yếu tố < div > cho mỗi khu vực của trang và sau đó thiết lập kích thước của mỗi < div > phụ thuộc vào cách bạn muốn nó xuất hiện như thế nào trên các thiết bị khác nhau. Một khi bạn có tất cả cả các yếu tố và kích thước, bạn có thể tải về skeleton HTML và CSS cho website của mình.

 

cong cu web web Responsive Web CSS

Công cụ thiết kế web Responsive Web CSS

 

Website: https://www.entomic.com/responsivecss

 

7/ Macaw

 

Công cụ Macaw tạo ra các quyền hạn thực hiện dễ dàng cho các nhà thiết kế web. Được đánh giá là công cụ thiên về thiết kế web hơn là phát triển web, khẩu hiệu của công cụ đã nói lên tất cả “Stop writing code, start drawing it”. Macaw là một ứng dụng native, do vậy bạn cần phải tải về và cài đặt chứ không phải là công cụ trong trình duyệt. Macaw mang lại cho người dùng sự linh hoạt trong việc edit hình ảnh, khả năng kéo thả các yếu tố, tạo layout, thiết lập typography, xác định styles, và nhiều hơn thế nữa. Công cụ design-to-code, được gọi là Alchemy, chuyển đổi những bản thiết kế này thành các bản mã HTML và CSS chính xác, gọn gàng. Sử dụng bởi bất kỳ ai.

 

cong cu web Macaw

Công cụ thiết kế web Macaw

 

Website: http://macaw.co/

 

Font, hình ảnh và video

 

Một khi đã có một bản mã cơ bản, chúng ta cần có các chi tiết về phông chữ, hình ảnh, video...Các plugin jQuery có thể giúp chúng ta thực hiện các điều này.

 

8/ FlowType

 

Mặc dù text thường bị bỏ qua trong thiết kế web thích ứng, nhưng bạn cần phải chú ý đến nó. FlowType là một plugin jQuery gọn gàng,thay đổi kích thước font chữ dựa trên chiều rộng của các yếu tố cụ thể để đạt đến số lượng ký tự tối ưu, thường thì nằm trong khoảng 45-75 ký tự trên một dòng. Font chữ trong màn hình 4 inch sẽ khác so với màn hình 6 inch. Ngoài ra cũng có các lựa chọn khác để thiết lập font và các ngưỡng kích thước, tỷ lệ.

 

cong cu web FlowType.JS

Công cụ thiết kế web FlowType.JS

 

Website: http://simplefocus.com/flowtype/

 

9/ Adaptive Images

 

Nói một cách đơn giản, Adaptive Images sẽ tự động xác định kích thước màn hình của thiết bị truy cập, tạo ra các phiên bản cache cho hình ảnh (image) tương ứng với kích thước màn hình đó và tự động thay thế hình tương ứng với kích thước màn hình của thiết bị. Nó được kết hợp với kĩ thuật Fluid Image.

 

cong cu web Adaptive Images

Công cụ thiết kế web Adaptive Images

 

Website: http://adaptive-images.com/

 

10/ FitVids.js

 

Sau khi có hình ảnh, công việc tiếp theo là thực hiện các video thích ứng. FitVids.js là một công cụ nhẹ, dễ dàng sử dụng cho phép bạn dễ dàng nhúng 1 video có độ rộng lớn

 

cong cu  web FitVids.js

Công cụ thiết kế web FitVids.js

 

Website: http://fitvidsjs.com/

 

Công cụ kiểm tra thiết kế web thích ứng

 

Các công cụ ở trên đã giúp bạn thiết kế và phát triển trang web của mình thích ứng. Tất nhiên, việc làm tiếp theo trước khi đưa ra công bố là phải kiểm tra các trang web này. Thay vì phải kiểm tra trên nhiều thiết bị di động, bạn có thể sử dụng các công cụ mô phỏng gọn gàng.

 

Tất nhiên, các công cụ kiểm tra không giống hoàn toàn với thử nghiệm thực tế, nhưng nó cũng là một công cụ thay thế nếu thử nghiệm thiết bị thực tế không phải sự lựa chọn của bạn.

 

11/ DesignModo

 

DesignModo có lẽ là một trong những công cụ kiểm tra thiết kế web thích ứng có sẵn tốt nhất. Chỉ cần nhập vào các URL trang web và kích thước mà bạn muốn kiểm tra, hoặc chọn các thiết bị cụ thể mà bạn muốn thử nghiệm. Công cụ này hỗ trợ một loạt các điện thoại thông minh,máy tính bảng, và máy tính để bàn, bao gồm cả Mac.

 

cong cu DesignModo

Công cụ DesignModo

 

Website: http://designmodo.com/responsive-test/

 

12/ Brad Frost

 

Công cụ Brad Frost là một trong những công cụ tốt mà bạn nên xem xét. Nó cho phép bạn thiết lập chiều rộng bằng px, hoặc kéo thanh cửa sổ để điều chỉnh. Ngoài ra cũng có một số mẫu thiết lập kích thước bao gồm chế độ “Hay”, tự động khởi động công cụ tại một kích thước nhỏ và từ từ tăng lên, cho phép bạn xem xét chính xác nơi các điểm “vỡ” xảy ra.

 

cong cu Brad Frost

Công cụ Brad Frost

 

Website: http://bradfrost.com/demo/ish/

 

Một số công cụ kiểm tra thiết kế web thích ứng khác như là Matt Kersley và Responsinator. Sự khác biệt giữa các công cụ là số lượng thiết bị hoặc các tùy chọn kích thước có sẵn mà họ cung cấp.

213 - Tuệ Chân - 16/01/2021 15:09





Link chia sẻ bài viết
Copy
http://tritue.edu.vn/tritueyii1/index.php/post/view?id=8


tritue.edu.vn       4 members, 27455 visitors

Copyright © 2019 - 2022 by tuetamsuphu@gmail.com
All Rights Reserved.