Isi
- Manfaat mendesain dengan kode
- Data dulu
- Kebaikan seluler gratis
- Menemukan bahasa yang sama
- Belajar lebih cepat
- Iterasi cepat
- Waktu peluncuran lebih cepat
- Mengapa HTML5?
- Data- atribut magis
- CSS3 - ini adalah Photoshop baru
- Sass + Compass: sangat lezat
- jQuery: oh, ya bisa
- Kerangka
- Pikiran terakhir
Artikel ini pertama kali muncul di edisi 235 majalah .net - majalah terlaris di dunia untuk desainer dan pengembang web.
Saya tidak pernah menjadi penggemar berat melakukan pekerjaan lebih dari yang dibutuhkan. Saya cenderung mengevaluasi metode dan alat berdasarkan kemampuannya untuk membuat saya, atau tim saya, lebih efektif. Seberapa cepat mereka membawa kita ke produk yang berfungsi? Seberapa efektif mereka dalam berkomunikasi? Apakah mereka menyingkir dari jalan kita?
Selama bertahun-tahun, saya telah menyesuaikan proses desain dan alat saya. Saya membayangkan saya akan terus melakukannya. Itulah sifat dasar mendesain untuk teknologi dan web. Industri ini terus berkembang; proses dan alat kami juga harus berkembang.
HTML5 dan CSS3 mempermudah transisi lebih banyak proses desain ke hulu - jauh dari Photoshop dan lebih banyak lagi menuju desain yang hidup dan bernapas. Alat seperti Foundation, Bootstrap, dan jQuery membuat proses desain Anda lebih mudah dipindahkan ke kode yang lebih mudah didekati.
Manfaat mendesain dengan kode
Pertama, saya tidak menganjurkan untuk melepaskan Photoshop, atau editor desain visual lainnya dari alur kerja Anda. Sebagai gantinya, saya akan fokus pada manfaat dari memindahkan desain itu ke dalam kode lebih cepat daripada nanti.
Data dulu
Hal yang selalu saya sukai tentang mendesain dengan HTML adalah hal itu mendorong pemikiran dari perspektif yang mengutamakan data. Sebaliknya, dengan menggunakan program menggambar seperti Illustrator, OmniGraffle, atau Balsamiq, Anda mulai dengan sebuah kotak dan mengisinya dengan data.
Dalam HTML Anda membuat DOM (model objek dokumen), seperti membuat daftar isi. Ini adalah kembali ke desain informasi yang sebenarnya dengan hierarki yang bermakna. HTML5 selangkah lebih maju dengan penambahan elemen semantik baru: artikel, bagian, header, samping, footer, dan sebagainya. Pendekatan yang mengutamakan data ini berpadu apik dengan desain yang mengutamakan seluler dan responsif.
Kebaikan seluler gratis
Jika Anda membaca ini, Anda mungkin mendesain untuk seluler. Dan kemungkinan Anda harus merancang satu atau dua formulir. Dengan HTML5, Anda beruntung. Sebelum HTML5, jenis masukan Anda cukup banyak berupa bidang teks atau sandi. HTML5 memperkenalkan sejumlah jenis masukan tambahan, termasuk:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Yang benar-benar hebat tentang jenis masukan tambahan dan unik ini adalah bahwa peramban seluler di iOS dan Android mengenalinya dan secara otomatis menukar keyboard yang sadar kontekstual - tanpa perlu pengaya atau peretasan jQuery khusus. Oh, dan jika browser Anda tidak tahu apa itu input type = "email"> adalah, maka defaultnya adalah input teks.
Menemukan bahasa yang sama
“Sungguh luar biasa bagaimana desainer dan pengembang kami dapat bekerja dalam bahasa yang sama” - John Drago, pengembang aplikasi di Inflection.
Lihat apakah ini terdengar asing. Saya berada di ruang konferensi dengan setengah lusin pengembang aplikasi sisi server yang dapat membuat kode lingkaran di sekitar saya di Ruby, Python, Java, atau .NET. Saya satu-satunya desainer. Beberapa saran saya awalnya dianggap terlalu rumit untuk diterapkan. Saya berjalan ke papan tulis dan mulai menulis beberapa HTML dan CSS di papan tulis tentang bagaimana desain dapat diimplementasikan. Tiba-tiba nada percakapan berubah dan salah satu pengembang dengan enggan berkata, "Ya - jika kita melakukannya dengan cara itu, itu bisa berhasil."
Memindahkan lebih banyak proses desain saya ke dalam kode telah meningkatkan percakapan dengan pengembang. Ada tambahan rasa hormat yang diperoleh dengan mengetahui cara menyusun desain Anda dalam kode. Anda tidak perlu menjadi ahli untuk mendapatkan rasa hormat itu. Sementara keterampilan HTML dan CSS saya sangat kuat, keterampilan JavaScript saya paling-paling biasa-biasa saja. Dan saya tidak malu mengakuinya. Namun, saat bekerja dengan frontend, atau pengembang sisi server, fakta bahwa kita dapat berbicara dalam bahasa yang sama, atau bertemu di tengah jalan, adalah keuntungan besar.
Belajar lebih cepat
Meskipun wireframe dan komposit visual dapat membantu dalam perencanaan, artefak statis ini bersifat teoretis. Berapa kali Anda mencoba menjelaskan interaksi kepada seseorang, hanya untuk meminta mereka menanggapi, "Saya rasa saya harus melihatnya." Semakin cepat Anda mendapatkan prototipe, sesuatu yang dapat berinteraksi dengan orang lain, semakin cepat Anda dapat merasakan desainnya dan melihat apakah idenya berhasil.
Iterasi cepat
Kapan terakhir kali desain akhir yang dikirim ke produksi sama persis dengan desain Photoshop Anda? Hampir tidak pernah. Dengan desain produk digital, perubahan terjadi secara konstan. Selain itu, perubahan seperti meningkatkan ukuran tajuk Anda dari 22pt menjadi 24pt di beberapa lusin layar dapat memakan waktu berjam-jam di Photoshop. Smart Objects memberi Anda beberapa tingkat desain berorientasi objek di Photoshop. Sayangnya, sebagian besar desainer visual yang saya kenal tidak cukup menggunakan Smart Objects. Dengan CSS, karena mendorong pendekatan desain yang lebih sistematis, perubahan tipografi membutuhkan waktu beberapa menit, bukan berjam-jam.
Bagaimana dengan mengubah gradien linier pada semua tombol Anda? Atau ukuran perbatasan? Bagaimana jika mengubah dari sudut persegi menjadi sudut bulat 2px? Di Photoshop, ini bisa memakan waktu berjam-jam dan Anda masih harus mengkodekannya. Kemampuan untuk mendesain dalam kode membantu menghindari perjalanan kembali ke Photoshop untuk iterasi pada desain visual. Saat Anda memindahkan perubahan tersebut ke atas ke dalam kode, menggunakan CSS3 dan Sass (yang akan saya bahas nanti di artikel ini), perubahan tersebut dapat terjadi dalam waktu nyata dan hanya membutuhkan waktu beberapa menit.
Waktu peluncuran lebih cepat
Selama bertahun-tahun, saat saya mengalihkan lebih banyak alur kerja desain saya ke dalam kode, saya mengalami peningkatan nyata - sekitar 20 hingga 30 persen pengurangan waktu ke pasar. Semakin banyak saya melakukan ini, semakin sedikit waktu yang saya habiskan untuk menduplikasi upaya. Saya menghabiskan lebih sedikit siklus menggunakan Photoshop atau Fireworks dan kemudian mengulangi pekerjaan dalam kode.
Pada titik tertentu, desain harus berinteraksi dengan beberapa jenis backend, apakah itu CMS, aplikasi Rails, atau yang lainnya. Karena sebagian besar pekerjaan desain saya ada dalam kode, integrasi terjadi lebih cepat daripada nanti. Beberapa tahun yang lalu, salah satu klien saya, PointRoll, beralih dari prototipe ke produksi dalam lima hari.
Mengapa HTML5?
HTML5 lebih mudah daripada versi HTML sebelumnya. Ambil contoh deklarasi tipe dokumen. Di versi HTML sebelumnya, file DOCTYPE terlihat seperti ini:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Dan ada enam versi berbeda. Untungnya HTML5 DOCTYPE terlihat seperti ini:
! DOCTYPE HTML>
Sungguh. Itu dia. Sangat sederhana.
Saat membuat halaman HTML standar, ada sejumlah elemen umum, seperti header, area konten utama, sidebar, dan footer. Saya yakin Anda pernah melihat yang seperti ini sebelumnya:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Tidak ada yang luar biasa di sana. Tapi setelah diisi dengan konten, template ini berubah menjadi sup div. Sebaliknya, dengan elemen semantik baru HTML5, Anda mendapatkan sesuatu yang jauh lebih sederhana dan lebih mudah untuk dipindai, seperti ini:
header> nav> / nav> / header> artikel> samping> / samping> / artikel> footer> / footer>
Lihat itu. Sesuatu yang masuk akal.
Data- atribut magis
HTML5 hadir dengan hook mengagumkan lainnya yang memberi Anda kemampuan untuk menyusun makna semantik Anda sendiri: the data-. Sebelumnya, jika Anda ingin menetapkan sesuatu yang berarti ke elemen DOM, Anda dibatasi pada ID, kelas, dan peran.
Sayangnya, ID harus unik. Kelas bersifat universal (huh!), Tetapi menggunakannya dapat dengan cepat berubah menjadi berantakan. Peran adalah aset yang kurang dimanfaatkan yang memberikan arti signifikan bagi ARIA. Baru-baru ini, saya telah menggunakan data- untuk platform analisis pelacakan peristiwa yang kami kembangkan di Inflection.Kami sangat suka menguji desain kami. Saat mengerjakan aplikasi atau halaman yang memiliki banyak interaktivitas, kami ingin memiliki wawasan yang lebih terperinci tentang keterlibatan pelanggan dalam halaman.
Masukkan data-. Dengannya, Anda dapat menetapkan, meneruskan, dan menghubungkan ke model makna 'definisikan sendiri'. Jadi, misalnya, Anda bisa melakukan ini:
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 ">
Kami dapat melampirkan pendengar dengan JavaScript ke halaman dan setiap kali pelanggan mengarahkan kursor, atau mengklik tombol ini, kami dapat melacak aktivitas itu. Alih-alih hanya dapat melacak seseorang yang mendaftar melalui OAuth dengan Twitter, kami dapat melihat bahwa mereka mengarahkan kursor ke Facebook, lalu Twitter, lalu LinkedIn, dan akhirnya memutuskan untuk memilih Twitter untuk model OAuth mereka.
Bayangkan memperluas ini ke situs seperti Pinterest, atau desain Myspace baru di mana pelanggan menyeret dan melepaskan ubin untuk menyusun ulang berdasarkan minat. Atau mungkin menyembunyikan ubin yang tidak mereka minati data- atribut memungkinkan Anda untuk melampirkan atau menetapkan lapisan tambahan makna semantik untuk hal-hal yang dapat Anda tentukan. Untuk situs dan aplikasi yang sangat bergantung pada Ajax, ini membuka peluang tanpa batas.
CSS3 - ini adalah Photoshop baru
CSS3 membawa tingkat desain tampilan dan nuansa yang dulunya membutuhkan gambar latar belakang, irisan, dan teknik 'pintu geser' yang terkenal. Untungnya, itu semua adalah masa lalu.
Mari kita lihat cara membuat tombol mewah dengan gradien linier, sudut membulat, bayangan teks yang memberikan efek penekanan huruf yang bagus, dan cahaya saat mengarahkan kursor. Mempelajari teknik-teknik ini akan sangat bermanfaat. Masing-masing dapat digunakan sendiri-sendiri, atau dalam berbagai kombinasi untuk menarik hampir semua visual menarik yang sedang tren di web saat ini.
Pertama, mari buat beberapa penyesuaian ke default tombol> dan input type = "submit"> elemen. Dengan asumsi Anda menggunakan salah satu penyetelan ulang CSS standar, kami hanya akan menambahkan sedikit ukuran dan ruang bernapas.
/ * Tombol tombol, yang memiliki tombol. ======================================= * * / tombol, masukan [type = "submit"] {height: 2.7em; padding: .4em .7em; tinggi garis: 1.9; }
Protip: Tombol dan masukan yang dikirimkan bisa jadi rumit untuk ditata ulang. Saya telah menemukan dengan menyesuaikan tinggi baris ke 1,6 atau lebih besar, Anda dapat menghindari peretasan yang membutuhkan div atau span ekstra di dalam tombol> menandai.
Sekarang kami telah 'memperbaiki' masalah tombol kami, kami dapat membuat .btn kelas untuk memberi kita tombol bersih yang bagus dengan sudut membulat, gradien linier, garis besar, dan tampilan letterpress itu.
.btn {display: inline-block; batas: 1 piksel solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; radius batas: 4px; padding: .4em .7em; latar belakang: # edeff2; background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (#fefefe), color-stop (0.55, # edeff2), to (# e4e6e9)); latar belakang: -moz-linear-gradien (tengah atas, #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; warna: # 6c7786; ukuran font: 1.1em; text-shadow: #fefefe 1px 0 1px; tinggi baris: 1.375em; kursor: penunjuk; }
Dan kemudian efek hover yang bagus dengan kilau halus menggunakan box-shadow metode:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; latar belakang: # e6e9eb; background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (# f7f7f7), color-stop (0.55, # f6f6f7), to (# e6e9eb)); background: -moz-lineargradient (center top, # f7f7f7, # f6f6f7 55%, # e6e9eb); warna: # 45484b; text-shadow: rgb (255.255.255) 1px 1px 0; warna batas: # c9c9c0; }
Sekarang, saya bukan penggemar berat menulis kode gradien linier. Itu panjang dan membingungkan. Seperti yang Anda lihat, saya hanya menyertakan versi untuk -moz, -webkit, dan model standar. Jika Anda ingin menyertakan versi -o dan -ms, Anda perlu menggandakan kode.
Ada dua opsi lainnya. Salah satunya adalah generator CSS3; ada beberapa yang tersedia di web, termasuk ColorZilla. Tetapi jika Anda ingin sedikit meningkatkan permainan Anda, pertimbangkan untuk menyelami Sass: dikombinasikan dengan Kompas, itu berkah.
Sass + Compass: sangat lezat
Anda bisa berhenti berharap untuk edisi unicorn CSS4. Ada di sini dan disebut Sass + Compass. Sass adalah singkatan dari Syntactically Awesome Stylesheets: Anda mewarisi semua manfaat tradisional CSS3 dengan kegembiraan tambahan berupa variabel, mixin, extender, dan pernak-pernik lainnya.
Saya baru-baru ini memperbarui file CSS 5.000 baris yang memiliki lebih dari 30 variasi dengan warna biru yang sama. Dengan Sass, saya mengganti setiap variasi dengan kode ini:
warna: $ biru;
Dengan mendefinisikan $ biru di saya _variables.scss file, saya dapat membuat warna default yang dapat direferensikan oleh setiap file CSS atau SCSS. Siapapun yang menulis CSS dapat menggunakan $ biru dan tidak perlu khawatir menggunakan pipet, menemukan kode hex, atau warna RGB, RGBA atau HSL.
Ingat kode gradien linier itu? Alih-alih menulis beberapa baris kode, bagaimana dengan ini:
@include background (gradien-linier (# b1cfdc, # 7a9cac));
Biarkan Sass dan Compass melakukan tugas berat dan menghasilkan sintaks yang benar untuk Anda: selesai. Katakanlah Anda menginginkan versi warna yang lebih gelap atau lebih terang. Anda dapat memindahkan pipet di sekitar di Photoshop, atau cukup gunakan perintah terang / gelap di Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
Itu akan membuat gradien linier dengan 2% digelapkan $ lite-grey dan 5% digelapkan putih pucat. Voil! Anda bahkan tidak memerlukan kode HEX atau RGB.
jQuery: oh, ya bisa
Aku harus membuat pengakuan. JavaScript digunakan untuk mengintimidasi saya. Kemudian saya menemukan jQuery. Saya tidak akan mengklaim sebagai guru JavaScript, tetapi saya cukup yakin saya dapat melakukan hampir semua jenis transisi, atau fungsi yang saya perlukan untuk menggunakan jQuery.
Ambil, misalnya, kemampuan untuk menampilkan masukan nomor telepon sekunder di layar dengan mengklik link Tambahkan nomor baru. Menggunakan jQuery, Anda cukup menulis ini:
// - Pengungkapan progresif - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Mencari sesuatu yang lebih maju? Mungkin ada plugin untuk itu. Perilaku dasar mudah dan perilaku kompleks dapat didekati dengan jQuery.
Kerangka
Dua dari kerangka kerja paling kuat saat ini adalah Foundation dan Bootstrap. Sekarang, sebelum Anda menutup kerangka CSS, izinkan saya menanyakan sesuatu. Apakah Anda menggunakan jQuery? Ruby on Rails? Django? Semua kerangka kerja.
Sama seperti jQuery dan RoR, Foundation dan Bootstrap lahir dari kesadaran bahwa ada banyak hal yang kami lakukan berulang kali (seperti reset, tipografi, kisi, formulir, tombol, navigasi, dan daftar). Foundation dan Bootstrap keduanya menawarkan dukungan untuk desain responsif melalui penggunaan kelas helper. Keduanya didokumentasikan dengan baik dan telah diuji jalan, sehingga Anda dapat menggunakannya dengan percaya diri.
Satu perbedaan utama antara keduanya: Bootstrap didasarkan pada sistem LESS untuk praproses CSS, sedangkan Foundation didasarkan pada Sass. Saya lebih suka Sass daripada LESS karena kemampuan tambahannya, tetapi Sass dan LESS menghancurkan CSS tradisional berkeping-keping.
Satu pemikiran terakhir tentang kerangka kerja. Bagi mereka yang tidak ingin mewarisi kelebihan kerangka orang lain, pertimbangkan untuk memilih yang sudah ada dan mengupasnya hingga tinggal tulang, atau memetik ceri dari beberapa untuk menggulung sendiri. Apa pun itu, tidak ada alasan untuk memulai dari awal setiap saat.
Pikiran terakhir
Ingin lebih mengontrol bagaimana desain Anda akhirnya berubah? Pindahkan lebih banyak proses ke atas ke kode. HTML5 akhirnya memberi pengertian pada DOM. Pembebasan yang bagus untuk yang tidak masuk akal DOCTYPEs dan divitis. CSS3 adalah Photoshop baru: gradien linier, borderradius, dan kotak-bayangan FTW! Dan dengan alat seperti Bootstrap, Foundation, Sass, dan jQuery, memindahkan desain ke hulu ke kode tidak pernah semudah ini.
Temukan 55 contoh HTML5 yang menakjubkan di Creative Bloq.
