Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Lima Tips Cepat Desain Web dari Tim Envato

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Saya baru saja bersenang-senang menghabiskan dua minggu di Malaysia di 2012 Envato Meetup. Tempat yang luar biasa! Selama kami tinggal di sana, saya mengambil kesempatan untuk melirik melalui bahu rekan-rekan saya, mengambil tips dan trik ketika mereka bekerja. Berikut adalah lima tips brilian desain web dari tim Envato yang saya rasa Anda akan mencintainya..


Melompat ke Masing-masing Tips Cepat:


Stuart Richardson
Tuts+ Front End Developer

Stu adalah seorang advokat besar dalam menggunakan CSS Preprocessors, khusus Sass dengan Compass. Selama konferensi Envato dia memandu kita melalui bagaimana ia menggunakannya ketika membangun tema marketplace, menunjukkan dengan sempurna seberapa efisien Sass dapat bekerja pada proyek-proyek besar, multi situs.

Marketplace kami adalah semua varian dari tema yang sama:

Standar pendekatan CSS akan mengharuskan Anda (misalnya) membangun stylesheet dasar untuk menyimpan sebagian besar dari styling struktural, dengan tambahan stylesheet untuk mengubah warna dan grafis untuk setiap situs. Yang terbaik, Anda akan mempertahankan beberapa salinan file CSS yang sangat mirip (jika tidak identik).

Tidak demikian dengan Sass. Dengan menulis satu set SCSS stylesheet dasar (parsial), ditambah file variabel Sass untuk setiap varian situs, struktur proyek Anda akan terlihat lebih seperti ini:

Parsial adalah potongan aturan style yang dapat disertakan dalam file utama - mereka dapat digunakan kembali di file lainnya juga. Dengan mengawali nama file dengan "_" file SCSS parsial tidak akan dikompilasi ke dalam CSS deployable mereka sendiri, mereka hanya akan berkontribusi terhadap file aplikasi yang Anda pilih untuk dibangun.

Misalnya, Anda mungkin memiliki file Sass yang menentukan semua bentuk style dalam proyek Anda. Anda namakan file-nya "_forms.scss" dan membawanya ke dalam file aplikasi Anda tanpa garis bawah atau ekstensi file:

Tidak ada "_forms.css" akan dihasilkan, tetapi aturan dalam "_forms.scss" akan memberikan kontribusi ke file yang telah Anda tarik ke dalam.

File variabel Anda akan mengatur semua aspek dari tema yang dapat diubah, seperti warna link, logo dll. Mereka mungkin terlihat seperti ini, misalnya:

Nilai ini kemudian dapat digunakan dalam file Sass aplikasi utama, atau parsial apapun yang diimpor:

Untuk menghasilkan tema baru semua yang harus Anda lakukan adalah mengubah variabel-variabel dalam satu file (atau drag di _variables.scss yang berbeda). Untuk mengubah fitur di semua tema, anda hanya perlu menjaga satu file; parsial mana yang style tertentu terjadi.

Kita sudah diperkenalkan Sass dan Compass pada Webdesigntuts+ sebelum saat ini, jadi lihatlah jika Anda belum pernah melakukannya.


Cameron Jones
Front-end Developer

Cameron telah membuat salib pribadinya untuk membuat segala sesuatu yang kita lakukan responsif. Dia sudah meninggalkan tanda RWD-nya di situs Rockable Press yang baru dan Creattica, dan akan segera bekerja dengan sihirnya pada Tuts+..

Berikut adalah tip hebat untuk membantu Anda memvisualisasikan tata letak web, di beberapa resolusi, dalam hitungan detik.

Pergilah ke situs Benjamin Keen di mana dia memiliki "Bookmarklet Tes Desain Responsif" JavaScript. Ubahlah ukuran viewport yang ingin Anda uji, kemudian menghasilkan bookmarklet.

Semua yang perlu Anda lakukan sekarang adalah drag link yang disediakan ke bookmark Anda. Setiap kali Anda melihat sebuah situs di browser, tekan tombol bookmarklet dan tata letak akan muncul di semua berbagai resolusi!

Tapi tunggu! Masih ada lagi! Cameron telah mengambil satu langkah lebih lanjut dan hotkey yang ditetapkan untuk bookmarklet ini; sekarang semua yang perlu dilakukan adalah mengetik kalimat yang tepat (misalnya "rwd") di url bar dan bookmarklet akan membawa efeknya. Sempurna jika (seperti saya) Anda memilih untuk tidak memiliki toolbar bookmark yang besar pada layar setiap saat.

Cameron menggunakan Firefox, yang memungkinkan Anda untuk menetapkan hotkeys bookmark dengan fitur Smart Keywords yang berguna. Saya biasanya bekerja di Chrome, yang sayangnya kurang dengan fitur ini. Namun, ada cara disekitar ini, karena ini adalah mungkin untuk menetapkan hotkeys untuk memicu mesin pencari. Sekarang mari kita menambahkan bookmarklet ke Chrome dengan cara ini:

Pertama, klik-kanan bar url dan pergi ke "Edit Search Engine.."

Kemudian Anda akan diberikan pilihan untuk menambahkan mesin pencari atau query. Ini akan bertindak sebagai hotkey, jadi berikan nama (apa pun yang Anda suka), menetapkan kalimat (seperti Cameron's "rwd"), kemudian paste JavaScript bookmarklet ke input terakhir.

Catatan: bookmarklet Anda harus URL yang di-encode, jadi pastikan itu terlihat seperti ini:

bukan ini:

Erik Meyer memiliki tool yang berguna untuk encoding URL jika Anda membutuhkannya.

Jadi hanya itu! Kunjungi halaman yang sedang Anda kerjakan, ketik kata kunci ke dalam bar url dan bang! Pengujian RWD Instan!


Rodney Blackney
Designer

Pinterest tidak cukup macho untuk Anda? Delicious juga.. (tunggu, apakah orang-orang masih menggunakan delicious?) Perlu cara untuk bookmark konten yang sebenarnya, back up ke Dropbox Anda, dan mendapatkan inspirasi visual oleh apa yang dibookmark orang lain? Rodney menganggap tidak ada yang lebih baik dari Gimme Bar:

Antarmuka modular yang akan menjadi pemandangan yang akrab bagi Anda yang pin dan bookmark dengan layanan lainnya. Ikuti, favorit, backup, kemudian berbagi melalui semua saluran sosial yang sudah Anda pasang di...

Periksa apa lagi yang Rodney buat di Twitter dan Dribbble!


Jacob Zinman-Jeanes
Designer

Ada satu hal; Ketika saya bertanya Jacob untuk tips cepat, ia menyarankan sedikit ekstensi lorem ipsum, yang akan membantu Anda memompa pengisi teks ke desain Anda.

Tapi Jacob tanpa disadari mengajarkan saya sebuah pelajaran alternatif yang berharga selama konferensi Envato: "Jangan mempercayakan iPad Anda kepada Jess Hooper". Jess bekerja di kantor Melbourne dan merupakan anggota dari tim review. Dia berbaik hati menawarkan untuk menjaga iPad saya ketika dia meninggalkan grup dan kembali ke hotel untuk satu malam.

Pada hari berikutnya, sementara saya berjuang melalui hutan Malaysia, ini datang melalui ponsel seseorang:

Sebuah Tumblog yang didedikasikan untuk iPad saya dan tindakan di hari yang menentukan itu.

Hanya bercanda, Jacob adalah seorang desainer yang sangat berbakat. Anda akan telah melihat pekerjaannya di tempat-tempat seperti situs million.envato.com dan 1,000 Tema WordPress, bersama dengan banyak dari bundel Marketplace dan situs Rockable. Tips yang dapat diambil dari ini adalah:

Bangunlah sebuah Tumblog setiap kali Anda memiliki kesempatan.

Itu sederhana, cepat, itu menyenangkan dan Anda dapat berlatih keterampilan tema Anda. Jess, saya akan membalasmu.


Jeffrey Way
Tuts+ Premium Course Producer

Melihat pekerjaan Jeff dan, bahkan jika ia tidak mengajar Anda, Anda akan belajar dari dia. Apa yang saya ambil dari dia kali ini mungkin tidak terdengar seperti penghemat waktu terbesar di dunia, tapi di sini adalah:

Anda tidak harus menutup tag daftar item Anda, biarkan browser melakukannya untuk Anda!*

*tidak berarti wajib..

Ini terasa tidak wajar, sedikit seperti menghilangkan tanda kutip dari atribut html:

tapi tenang, itu baik-baik saja. Waktu berikutnya Anda menemukan diri Anda berputar-putar pada item daftar, cobalah melakukannya seperti ini:

Banyak aspek dari markup HTML yang kita telah dilatih untuk berpikir sebagai kewajiban, pada kenyataannya, sepenuhnya opsional. Kita cenderung untuk berpikir tentang hal ini sebagai yang tidak valid karena cara validasi XHTML yang digunakan untuk memukuli kami lebih dari itu. Jika Anda lebih memilih untuk meninggalkan tag </li>, jika itu akan menghemat waktu Anda, buang mereka. Browser masih akan tahu persis apa yang Anda maksudkan.

Hal yang sama dari </html>, </head> dan </body>. Untuk informasi lebih lanjut tentang mengapa sebenarnya hal ini terjadi, periksalah buku Rockable terbaru Jeff pada HTML5.


Kesimpulan

Baiklah, saya harap Anda menemukan tips acak ini berguna dalam beberapa hal (saya tahu).

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.