NộI Dung
- Lợi ích khi thiết kế với mã
- Dữ liệu đầu tiên
- Tính năng di động miễn phí
- Tìm một ngôn ngữ chung
- Học nhanh hơn
- Lặp lại nhanh chóng
- Thời gian khởi chạy nhanh hơn
- Tại sao lại sử dụng HTML5?
- Thuộc tính dữ liệu kỳ diệu
- CSS3 - đó là Photoshop mới
- Sass + La bàn: ngon một cách kỳ diệu
- jQuery: ồ, vâng, bạn có thể
- Các khuôn khổ
- Suy nghĩ cuối cùng
Bài báo này xuất hiện lần đầu trong số 235 của tạp chí .net - tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web.
Tôi chưa bao giờ là một người thích làm nhiều việc hơn mức cần thiết. Tôi có xu hướng đánh giá các phương pháp và công cụ dựa trên khả năng của chúng để giúp tôi hoặc nhóm của tôi hiệu quả hơn. Làm thế nào để họ đưa chúng ta đến một sản phẩm hoạt động nhanh chóng? Họ giao tiếp hiệu quả như thế nào? Họ có tránh xa chúng ta không?
Trong nhiều năm, tôi đã điều chỉnh quy trình và công cụ thiết kế của mình. Tôi tưởng tượng mình sẽ tiếp tục làm như vậy. Đó là bản chất của việc thiết kế cho công nghệ và web. Ngành công nghiệp này không ngừng phát triển; quy trình và công cụ của chúng tôi cũng cần phải phát triển.
HTML5 và CSS3 giúp dễ dàng chuyển đổi nhiều quy trình thiết kế ngược dòng hơn - thoát khỏi Photoshop và hơn thế nữa để hướng tới một thiết kế sống động. Các công cụ như Foundation, Bootstrap và jQuery giúp chuyển nhiều quy trình thiết kế của bạn sang mã dễ tiếp cận hơn.
Lợi ích khi thiết kế với mã
Đầu tiên, tôi không ủng hộ việc loại bỏ Photoshop hoặc bất kỳ trình chỉnh sửa thiết kế trực quan nào khác khỏi quy trình làm việc của bạn. Thay vào đó, tôi sẽ tập trung vào những lợi ích của việc chuyển thiết kế đó thành mã sớm hơn.
Dữ liệu đầu tiên
Điều tôi luôn thích khi thiết kế bằng HTML là nó khuyến khích suy nghĩ từ góc độ dữ liệu đầu tiên. Ngược lại, bằng cách sử dụng các chương trình vẽ như Illustrator, OmniGraffle hoặc Balsamiq, bạn bắt đầu với một hộp và điền vào nó với dữ liệu.
Trong HTML, bạn xây dựng DOM (mô hình đối tượng tài liệu), giống như xây dựng mục lục. Đó là sự quay trở lại thiết kế thông tin thực với hệ thống phân cấp có ý nghĩa. HTML5 tiến thêm một bước với việc bổ sung các phần tử ngữ nghĩa mới: bài viết, phần, đầu trang, sang một bên, chân trang, v.v. Cách tiếp cận dựa trên dữ liệu này kết hợp độc đáo với các thiết kế đáp ứng, ưu tiên trên thiết bị di động.
Tính năng di động miễn phí
Nếu bạn đang đọc điều này, có thể bạn đang thiết kế cho thiết bị di động. Và rất có thể bạn sẽ phải thiết kế một hoặc hai biểu mẫu. Với HTML5, bạn thật may mắn. Trước HTML5, các loại đầu vào của bạn khá nhiều là trường văn bản hoặc mật khẩu. HTML5 đã giới thiệu một số kiểu đầu vào bổ sung, bao gồm:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Điều thực sự tuyệt vời về các kiểu nhập bổ sung, độc đáo này là các trình duyệt trên thiết bị di động trên iOS và Android nhận ra chúng và tự động hoán đổi bàn phím nhận biết ngữ cảnh - mà không yêu cầu plugin jQuery hoặc hack đặc biệt. Ồ, và nếu trình duyệt của bạn không biết thì input type = "email"> là, sau đó nó chỉ mặc định là đầu vào văn bản.
Tìm một ngôn ngữ chung
“Thật tuyệt vời khi các nhà thiết kế và nhà phát triển của chúng tôi có thể làm việc bằng cùng một ngôn ngữ” - John Drago, nhà phát triển ứng dụng tại Inflection.
Hãy xem điều này nghe có quen thuộc không. Tôi đang ở trong một phòng hội thảo với nửa tá nhà phát triển ứng dụng phía máy chủ, những người có thể viết mã vòng quanh tôi bằng Ruby, Python, Java hoặc .NET. Tôi là nhà thiết kế duy nhất. Một số đề xuất của tôi ban đầu bị bác bỏ vì quá phức tạp để thực hiện. Tôi đi tới bảng trắng và bắt đầu viết một số HTML và CSS lên bảng để biết cách thiết kế có thể được triển khai. Đột nhiên, giai điệu cuộc trò chuyện thay đổi và một trong những nhà phát triển miễn cưỡng nói, "Chà, vâng - nếu chúng tôi làm theo cách đó, nó có thể hoạt động."
Chuyển nhiều quy trình thiết kế của tôi sang mã đã cải thiện cuộc trò chuyện với các nhà phát triển. Có thêm một lớp tôn trọng dành được khi biết cách tạo các thiết kế của bạn bằng mã. Bạn không cần phải là một chuyên gia để nhận được sự tôn trọng đó. Mặc dù kỹ năng HTML và CSS của tôi rất vững chắc, nhưng kỹ năng JavaScript của tôi chỉ ở mức trung bình. Và tôi không ngại thừa nhận điều đó. Tuy nhiên, khi làm việc với giao diện người dùng hoặc các nhà phát triển phía máy chủ, việc chúng ta có thể nói chuyện bằng một ngôn ngữ chung hoặc gặp nhau giữa chừng là một lợi thế rất lớn.
Học nhanh hơn
Trong khi khung dây và vật liệu tổng hợp trực quan có thể giúp lập kế hoạch, những tạo tác tĩnh này chỉ mang tính lý thuyết. Đã bao nhiêu lần bạn cố gắng giải thích một tương tác với ai đó, chỉ để được họ trả lời, "Tôi đoán tôi sẽ phải xem nó." Bạn nhận được một mẫu thử nghiệm, một thứ mà mọi người có thể tương tác với nhau càng sớm, thì bạn càng sớm có thể trải nghiệm thiết kế và xem liệu ý tưởng có hoạt động hay không.
Lặp lại nhanh chóng
Lần cuối cùng một thiết kế cuối cùng được chuyển đến sản xuất khớp chính xác với công việc Photoshop của bạn là khi nào? Hầu như không bao giờ. Với thiết kế sản phẩm kỹ thuật số, sự thay đổi diễn ra liên tục. Hơn nữa, những thay đổi như tăng kích thước tiêu đề của bạn từ 22pt lên 24pt trên vài chục màn hình có thể mất hàng giờ trong Photoshop. Smart Objects cung cấp cho bạn một số cấp độ thiết kế hướng đối tượng trong Photoshop. Thật không may, hầu hết các nhà thiết kế hình ảnh mà tôi biết đều không sử dụng Đối tượng thông minh đủ. Với CSS, vì nó khuyến khích cách tiếp cận có hệ thống hơn để thiết kế, các thay đổi về kiểu chữ chỉ mất vài phút thay vì hàng giờ.
Điều gì về việc thay đổi độ dốc tuyến tính trên tất cả các nút của bạn? Hay kích thước của một đường viền? Làm thế nào về việc thay đổi từ góc vuông thành góc tròn 2px? Trong Photoshop, quá trình này có thể mất hàng giờ và bạn vẫn phải viết mã. Khả năng thiết kế bằng mã giúp tránh việc quay lại Photoshop để lặp lại thiết kế trực quan. Khi bạn chuyển những thay đổi đó ngược dòng vào mã, bằng cách sử dụng CSS3 và Sass (mà tôi sẽ trình bày ở phần sau của bài viết này), chúng có thể xảy ra trong thời gian thực và chỉ mất vài phút.
Thời gian khởi chạy nhanh hơn
Trong những năm qua, khi tôi chuyển nhiều quy trình thiết kế ngược dòng sang mã, tôi đã trải qua một sự cải tiến thực sự - giảm khoảng 20 đến 30% thời gian đưa ra thị trường. Tôi càng làm điều này, tôi càng dành ít thời gian hơn cho những nỗ lực nhân bản. Tôi đang dành ít chu kỳ hơn để đi vào Photoshop hoặc Fireworks và sau đó lặp lại công việc trong mã.
Tại một số thời điểm, thiết kế phải giao diện với một số loại phụ trợ, cho dù đó là ứng dụng CMS, Rails hay thứ gì đó khác. Vì hầu hết công việc thiết kế của tôi là trong mã, tích hợp xảy ra sớm hơn là muộn hơn. Vài năm trước, một trong những khách hàng của tôi, PointRoll, đã chuyển từ nguyên mẫu sang sản xuất trong năm ngày.
Tại sao lại sử dụng HTML5?
HTML5 dễ dàng hơn các phiên bản HTML trước. Lấy ví dụ khai báo kiểu tài liệu. Trong các phiên bản trước của HTML, LOẠI TÀI LIỆU trông giống như thế này:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Và có sáu phiên bản khác nhau. May mắn thay, HTML5 LOẠI TÀI LIỆU trông như thế này:
! HTML DOCTYPE>
Nghiêm túc. Đó là nó. Đơn giản đến kinh ngạc.
Khi tạo một trang HTML tiêu chuẩn, có một số yếu tố phổ biến, chẳng hạn như đầu trang, vùng nội dung chính, thanh bên và chân trang. Tôi chắc chắn rằng bạn đã từng nhìn thấy một cái gì đó như thế này trước đây:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Không có gì khác thường ở đó. Nhưng khi đã điền đầy đủ nội dung, mẫu này sẽ chuyển sang dạng súp div. Ngược lại, với các phần tử ngữ nghĩa mới của HTML5, bạn sẽ có thứ gì đó đơn giản và dễ quét hơn nhiều, như thế này:
tiêu đề> điều hướng> / nav> / tiêu đề> bài viết> sang một bên> / sang một bên> / bài viết> chân trang> / chân trang>
Nhìn kìa. Một cái gì đó có ý nghĩa.
Thuộc tính dữ liệu kỳ diệu
HTML5 đi kèm với một hook tuyệt vời khác cung cấp cho bạn khả năng tạo ra ý nghĩa ngữ nghĩa của riêng bạn: dữ liệu-. Trước đây, nếu bạn muốn gán một thứ gì đó có ý nghĩa cho phần tử DOM, bạn bị giới hạn ở ID, lớp và vai trò.
Thật không may, ID phải là duy nhất. Các lớp học là phổ biến (yippee!), Nhưng việc sử dụng chúng có thể nhanh chóng trở thành một mớ hỗn độn. Vai trò là một nội dung chưa được sử dụng đầy đủ mang lại ý nghĩa quan trọng cho ARIA. Gần đây, tôi đang sử dụng dữ liệu- cho một nền tảng phân tích theo dõi sự kiện mà chúng tôi đang phát triển tại Inflection.Chúng tôi rất hâm mộ việc thử nghiệm các thiết kế của mình. Khi làm việc trên các ứng dụng hoặc trang có nhiều tương tác, chúng tôi muốn có thông tin chi tiết hơn về mức độ tương tác của khách hàng trong trang.
Nhập dữ liệu-. Với nó, bạn có thể gán, chuyển và kết nối thành mô hình ý nghĩa 'xác định ý nghĩa của riêng bạn'. Vì vậy, ví dụ, bạn có thể làm điều này:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Chúng tôi có thể đính kèm một trình xử lý bằng JavaScript vào trang và bất kỳ khi nào khách hàng di chuột qua hoặc nhấp vào nút này, chúng tôi có thể theo dõi hoạt động đó. Thay vì chỉ có thể theo dõi ai đó đã đăng ký qua OAuth với Twitter, chúng ta có thể thấy rằng họ di chuột qua Facebook, Twitter, rồi LinkedIn, và cuối cùng quyết định chọn Twitter cho mô hình OAuth của họ.
Hãy tưởng tượng mở rộng điều này cho một trang web như Pinterest hoặc thiết kế Myspace mới, nơi khách hàng kéo và thả các ô xếp để sắp xếp lại chúng dựa trên sở thích. Hoặc có thể ẩn các ô mà họ không quan tâm. dữ liệu- thuộc tính cho phép bạn đính kèm hoặc gán thêm một lớp ý nghĩa ngữ nghĩa cho những thứ mà bạn có thể xác định. Đối với các trang web và ứng dụng phụ thuộc nhiều vào Ajax, nó mở ra cơ hội vô hạn.
CSS3 - đó là Photoshop mới
CSS3 đã mang đến một cấp độ thiết kế giao diện hoàn toàn mới, vốn được sử dụng để yêu cầu hình ảnh nền, lát cắt và kỹ thuật ‘cửa trượt’ khét tiếng. Rất may, đó chỉ là dĩ vãng.
Hãy xem cách tạo một nút ấn tượng với độ dốc tuyến tính, các góc tròn, bóng văn bản tạo cho nó hiệu ứng nhấn chữ đẹp và ánh sáng khi di chuột. Học những kỹ thuật này sẽ đi một chặng đường dài. Mỗi người trong số họ có thể được sử dụng độc lập hoặc kết hợp khác nhau để làm nổi bật bất kỳ xu hướng trực quan nào đang thịnh hành trên web ngày nay.
Trước tiên, hãy thực hiện một vài điều chỉnh đối với giá trị mặc định nút> và input type = "submit"> các yếu tố. Giả sử bạn sử dụng một trong các thiết lập lại CSS tiêu chuẩn, chúng tôi sẽ chỉ thêm một chút kích thước và không gian thở.
/ * Các nút nút, có nút. ========================================= * * / button, input [type = "submit"] {height: 2.7em; đệm: .4em .7em; chiều cao dòng: 1,9; }
Chú giải: Các nút và đầu vào được gửi có thể phức tạp để thiết kế lại. Tôi đã tìm thấy bằng cách điều chỉnh chiều cao dòng thành 1,6 hoặc lớn hơn, bạn có thể tránh bị tấn công khi cần thêm một div hoặc khoảng cách bên trong nút> nhãn.
Bây giờ chúng tôi đã 'khắc phục' sự cố nút của mình, chúng tôi có thể tạo .btn để cung cấp cho chúng ta một nút sạch đẹp với các góc được bo tròn, gradient tuyến tính, đường viền và giao diện letterpress đó.
.btn {display: inline-block; viền: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; bán kính đường viền: 4px; đệm: .4em .7em; nền: # edeff2; background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (#fefefe), color-stop (0.55, # edeff2), to (# e4e6e9)); background: -moz-linear-gradient (tâm trên cùng, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; màu: # 6c7786; cỡ chữ: 1.1em; text-shadow: #fefefe 1px 0 1px; chiều cao dòng: 1.375em; con trỏ: con trỏ; }
Và sau đó là hiệu ứng di chuột đẹp với ánh sáng huyền ảo bằng cách sử dụng bóng hộp phương pháp:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; hộp-bóng: # 129ceb 0 0 2px; nền: # e6e9eb; background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (# f7f7f7), color-stop (0.55, # f6f6f7), to (# e6e9eb)); nền: -moz-lineargradient (đỉnh giữa, # f7f7f7, # f6f6f7 55%, # e6e9eb); màu: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; màu viền: # c9c9c0; }
Bây giờ, tôi không phải là người thích viết mã gradient tuyến tính. Nó dài và khó hiểu. Như bạn có thể thấy, tôi chỉ bao gồm phiên bản cho -moz, -webkitvà mô hình tiêu chuẩn. Nếu bạn muốn bao gồm các phiên bản -o và -ms, bạn sẽ cần phải nhân đôi mã.
Có hai lựa chọn khác. Một là trình tạo CSS3; có một số ứng dụng có sẵn trên web, bao gồm cả ColorZilla. Nhưng nếu bạn muốn nâng cao trò chơi của mình một chút, hãy cân nhắc tìm hiểu Sass: kết hợp với La bàn, đó là một món quà trời cho.
Sass + La bàn: ngon một cách kỳ diệu
Bạn có thể ngừng hy vọng về phiên bản kỳ lân CSS4. Nó ở đây và nó được gọi là Sass + Compass. Sass là viết tắt của Syntacally Awesome Stylesheets: bạn thừa hưởng tất cả các lợi ích truyền thống của CSS3 với những niềm vui bổ sung của các biến, bộ trộn, bộ mở rộng và các tiện ích khác.
Gần đây tôi đã cấu trúc lại một tệp CSS 5.000 dòng có hơn 30 biến thể trên cùng một màu xanh lam. Với Sass, tôi đã thay thế mọi biến thể bằng mã này:
màu: $ blue;
Bằng cách xác định $ xanh lam trong tôi _variables.scss , tôi có thể tạo màu mặc định mà mọi tệp CSS hoặc SCSS có thể tham chiếu. Bất kỳ ai viết CSS đều có thể sử dụng $ xanh lam và không phải lo lắng về việc sử dụng ống nhỏ mắt, tìm mã hex hoặc màu RGB, RGBA hoặc HSL.
Hãy nhớ rằng mã gradient tuyến tính? Thay vì viết một vài dòng mã, làm thế nào về điều này:
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Hãy để Sass và Compass thực hiện công việc nặng nhọc và tạo ra cú pháp chính xác cho bạn: xong. Giả sử bạn muốn có phiên bản màu đậm hơn hoặc nhạt hơn. Bạn có thể di chuyển kẻ mắt trong Photoshop hoặc chỉ cần sử dụng các lệnh làm sáng / tối trong Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
Điều đó sẽ tạo ra một gradient tuyến tính với 2% được làm tối $ xám mờ và 5% bị tối màu trắng ngà. Bỏ qua! Bạn thậm chí không cần mã HEX hoặc RGB.
jQuery: ồ, vâng, bạn có thể
Tôi có một lời thú nhận những thứ đã làm. JavaScript được sử dụng để đe dọa tôi. Sau đó, tôi tìm thấy jQuery. Tôi không tự nhận mình là một chuyên gia về JavaScript, nhưng tôi khá tự tin rằng mình có thể hoàn thành bất kỳ loại chuyển đổi hoặc chức năng nào mà tôi cần để sử dụng jQuery.
Lấy ví dụ, khả năng hiển thị đầu vào số điện thoại phụ trên màn hình bằng cách nhấp vào liên kết Thêm số mới. Sử dụng jQuery, bạn chỉ cần viết như sau:
// - Tiết lộ lũy tiến - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Tìm kiếm một cái gì đó cao cấp hơn? Có lẽ có một trình cắm cho nó. Các hành vi cơ bản là dễ dàng và những hành vi phức tạp có thể tiếp cận với jQuery.
Các khuôn khổ
Hai trong số những framework mạnh mẽ nhất hiện nay là Foundation và Bootstrap. Bây giờ, trước khi bạn loại bỏ các khuôn khổ CSS, hãy để tôi hỏi bạn một điều. Bạn có sử dụng jQuery không? Viên ngọc trên tay vịn? Django? Tất cả các khuôn khổ.
Cũng giống như jQuery và RoR, Foundation và Bootstrap được sinh ra từ việc nhận ra rằng có rất nhiều thứ chúng ta làm đi làm lại nhiều lần (chẳng hạn như đặt lại, kiểu chữ, lưới, biểu mẫu, nút, điều hướng và danh sách). Foundation và Bootstrap đều cung cấp hỗ trợ cho các thiết kế đáp ứng thông qua việc sử dụng các lớp trợ giúp. Cả hai đều được ghi chép đầy đủ và đã được thử nghiệm trên đường, vì vậy bạn có thể tự tin sử dụng chúng.
Một điểm khác biệt chính giữa hai hệ thống: Bootstrap dựa trên hệ thống LESS để xử lý trước CSS, trong khi Foundation dựa trên Sass. Tôi thích Sass hơn LESS do các khả năng bổ sung của nó, nhưng cả Sass và LESS đều bóp chết CSS truyền thống thành từng mảnh.
Một suy nghĩ cuối cùng về khuôn khổ. Đối với những người không muốn thừa hưởng sự cồng kềnh trong khuôn khổ của người khác, hãy cân nhắc chọn một cái hiện có và tước nó thành xương trần hoặc chọn một vài quả anh đào để cuộn của riêng bạn. Dù bằng cách nào, thực sự không có lý do gì để bắt đầu lại từ đầu.
Suy nghĩ cuối cùng
Muốn kiểm soát tốt hơn thiết kế của bạn cuối cùng xuất hiện như thế nào? Di chuyển nhiều quy trình ngược dòng sang mã. HTML5 cuối cùng cũng mang lại một số ý nghĩa cho DOM. Giải đố tốt đến vô nghĩa LOẠI TÀI LIỆUs và viêm bao tử. CSS3 là Photoshop mới: gradient tuyến tính, đường viền và bóng hộp FTW! Và với các công cụ như Bootstrap, Foundation, Sass và jQuery, việc chuyển thiết kế ngược dòng sang mã chưa bao giờ dễ dàng hơn thế.
Khám phá 55 ví dụ tuyệt vời về HTML5 tại Creative Bloq.
