Bagaimana Seorang Insinyur Front-End Tunggal Dapat Menggantikan Tim yang Beranggotakan Dua Orang

Berpikir Dengan Dua Pikiran

Permintaan dalam dunia desain web telah berubah selama beberapa tahun terakhir: desainer dengan keterampilan front-end, dan pengembang front-end dengan keterampilan desain, semakin diminati. Ya, Anda dapat berargumen bahwa pekerjaannya benar-benar berbeda—dan mungkin Anda langsung tidak menyukai salah satunya—tetapi sejujurnya, dalam enam tahun saya sebagai pengembang web lepas dan dua belas tahun sebagai desainer, saya sudah belajar bahwa jauh lebih sulit untuk bertahan hanya sebagai desainer web atau hanya sebagai pengembang front-end daripada sebagai insinyur front-end yang mengetahui kedua peran tersebut.

Mengenakan kedua topi memiliki banyak keuntungan: dari sudut pandang profesional saja, Anda dapat menemukan pekerjaan dengan lebih mudah dan mengenakan tarif yang lebih tinggi karena Anda membawa lebih banyak ke meja.

Tetapi bekerja sebagai teknisi front-end hybrid juga memiliki beberapa kelemahan yang perlu Anda ketahui—dan cara mengatasinya. Sebagai seorang desainer kreatif, Anda akan menggunakan "otak kanan" Anda, separuh yang bertanggung jawab atas informasi visual, spasial, dan persepsi—dengan kata lain, semua hal cantik dalam desain web. Sebagai pengembang front-end teknis, Anda akan menggunakan "otak kiri" Anda, mitra logis dan analitis untuk artis gila Anda di sebelah kanan.

Dan, karena Anda hanya satu orang, ini berarti Anda mengerjakan dua pekerjaan yang sama sekali berbeda pada saat yang sama, dengan otak yang sama—dan itu bisa membingungkan otak Anda. Jika Anda tidak dapat mengatasinya, Anda tidak akan menghasilkan pekerjaan yang berkualitas, atau mencapai potensi penuh Anda. Dan, jika Anda seorang pekerja lepas yang mencoba memenuhi deskripsi pekerjaan teknik front-end hybrid, Anda mungkin bersaing dengan tim yang terdiri dari dua orang (pengembang dan desainer), jadi Anda harus bekerja di bawah kerangka waktu yang sama sambil mempertahankan kualitas. (Tentu saja, Anda juga bisa dibayar seolah-olah Anda adalah tim yang terdiri dari dua orang!)

Mengetahui bagian mana dari otak Anda yang akan digunakan dan kapan menggunakannya adalah kunci untuk merampingkan proses Anda dan menghasilkan hasil terbaik tanpa frustrasi dan waktu yang cukup untuk tenggat waktu Anda. Terlepas dari kekurangan Anda, di kiri atau kanan, posting ini akan membantu Anda memahami keterampilan yang Anda butuhkan dan cara Anda mendapatkannya.

One Night Stand Dengan Proyek Anda

Oke siap? Besar! Katakanlah Anda telah diminta untuk mendesain situs untuk miniCloud, startup pemula yang menawarkan solusi VPS khusus. Di mana Anda mulai?

Sebelum saya memulai pekerjaan "nyata" pada sebuah proyek, saya suka tidur dengannya. Ini berarti melakukan penelitian menyeluruh tentang produk klien Anda, layanan, persaingan, dll. Singkatnya, Google keluar dari situ. Setelah itu, pikirkan proyek sepanjang hari: Bagaimana tampilannya setelah Anda selesai mengerjakannya? Bawa untuk makan malam, dan tertidur dengan desain baru dan seksi Anda. Selama tahap ini, selalu siapkan pensil (atau ponsel) untuk menuliskan ide-ide yang datang kepada Anda. Jenis kerja pikiran ini biasanya membantu menentukan aspek-aspek kunci dari proses Anda.

Biarkan Jus Kreatif Anda Mengalir: Proses Desain

Sekarang setelah Anda memiliki beberapa ide untuk dibangun, saatnya untuk memulai proses desain yang sebenarnya. Ini terdiri dari tiga langkah: 1) sketsa, 2) gambar rangka, dan 3) grafik. Ini adalah bagian di mana Anda membiarkan separuh otak artistik melakukan tugasnya dan menjadi gila dengan pensil, kertas, dan Photoshop.

Selama tahap desain ini, sangat penting bagi Anda untuk membiarkan sisi "pengembang" Anda mengawasi Anda sehingga Anda tidak menjadi gila dengan beberapa aspek situs web yang hampir mustahil untuk dibuat ulang dengan cepat menggunakan HTML, CSS, dan jQuery. Jika Anda mencoba menemukan kembali browser, pengembang front-end Anda akan membenci Anda karenanya. Dan pengembang front-end Anda adalah Anda — ingat?

Jadi, dipandu oleh praktik terbaik desain web (dan beberapa akal sehat), karena sangat kecil kemungkinannya Anda akan membuat terobosan baru dengan mendesain ulang situs web gaun pengantin teman Anda. Ini bukan untuk mengatakan bahwa Anda tidak harus bertujuan untuk membuat desain yang fantastis dan mengesankan. Tapi sebaliknya, datang dengan sesuatu yang Anda tahu layak. Proyek yang menciptakan kembali web biasanya dilakukan di waktu luang Anda tanpa tenggat waktu yang menggantung di kepala Anda.

1. Sketsa : Saya memulai dengan buku catatan kertas persegi dan beberapa pensil. Kertas persegi sangat bagus karena Anda dapat menggunakannya untuk desain berbasis grid. Anda tidak akan memiliki masalah nanti ketika Anda menerjemahkan sketsa Anda ke dalam gambar rangka dan, pada akhirnya, ke situs web berbasis grid. Untuk miniCloud, sketsa kami mungkin terlihat seperti ini:

Harap dicatat bahwa detail tambahan pada sketsa, seperti salju, burung, dan awan, adalah hasil dari penundaan saya dan tidak wajib di bagian mana pun dari proses desain Anda, tetapi terlihat bagus.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Sekarang setelah kita memiliki ide dasar tentang bagaimana tampilan situs kita, saatnya membuat wireframe yang dapat kita tunjukkan kepada klien. Ada banyak cara untuk menyelesaikan ini. Dalam beberapa kasus, Anda dapat melewatkan langkah tersebut sepenuhnya jika Anda merasa tidak perlu. Secara pribadi, saya menggunakan Photoshop untuk membuat kerangka ide saya karena itu adalah alat yang paling saya kenal. Ada banyak kit gambar rangka gratis di .EPS atau .PSD yang membantu Anda memulai dalam hitungan detik, jadi Anda tidak perlu membuat dan menggambar semua elemen dari awal. Ada beberapa solusi online juga jika Anda ingin menghindari Photoshop, tapi saya lebih suka offline. Bagaimanapun, memperluas sketsa kami, kami mungkin membuat wireframe situs web kami seperti ini:

1. Gambar : Ini adalah bagian favorit saya: mengubah gambar rangka menjadi situs web yang indah. Tapi tidak semua orang adalah aku. Jika Anda terutama seorang pengembang dan memiliki bakat yang sangat kecil untuk desain, warna, tipografi, dll., saya sarankan memulai dengan situs web lain untuk inspirasi desain. Ada banyak dari mereka, dan mereka dipenuhi dengan ide-ide hebat—siapa tahu, mungkin ada desainer dalam diri Anda yang menunggu untuk keluar? Saya merasa terbantu untuk menyimpan folder bookmark situs web yang menurut saya sangat bagus atau dirancang dengan baik. Picasso (?) pernah berkata, “Artis yang baik menyalin tetapi seniman yang hebat mencuri”—itu tidak berarti Anda mengambil desain orang lain dan menempelkan stiker Anda di atasnya. Alih-alih, dapatkan inspirasi dari karya orang lain dan tambahkan putaran dan pendekatan Anda sendiri ke dalamnya.

Saya melakukan semua desain saya di Photoshop. Idealnya, klien Anda akan memberi Anda bahan mentah untuk dikerjakan, seperti foto dan teks salinan yang dapat Anda gunakan sebagai pengganti placeholder. Ini terlihat jauh lebih baik ketika Anda mengirimkannya ke revisi.

 So, for step three, we take our wireframe and bring it to life: 

Omong-omong: jika Anda akhirnya menggunakan Photoshop, ada banyak sumber daya keren di luar sana yang akan membuat proses Anda jauh lebih cepat, seperti plug-in dan gaya. Saya bisa menulis seluruh posting tentang mereka sendiri, jadi saya hanya akan menunjukkan beberapa yang sering saya gunakan.

1. CSS3Ps : Plug-in Photoshop berbasis cloud gratis yang mengubah layer Anda menjadi CSS3.
2. Divine Elemente : Membuat tema WordPress langsung dari PSD Anda. Ini bagus untuk memulai proyek WordPress Anda dengan cepat. Meskipun mereka mengatakan "Tidak Diperlukan Keterampilan HTML", Anda sebenarnya memerlukan beberapa jika Anda ingin mendapatkan hasil yang luar biasa.
3. Pola Halus : Kumpulan pola gratis untuk digunakan dalam desain Anda, biasanya sebagai latar belakang. Detail seperti ini membuat semua perbedaan saat Anda mencoba mengubah desain Anda dari bagus menjadi mengagumkan.

"Slice It Up": Proses Front-End

Setelah saya selesai dengan tahap desain dan menerima OK dari klien yang senang, saya siap untuk mengubah gambar statis saya menjadi situs web langsung. Ingat, pada titik ini, desain kita masih sebatas itu: sebuah desain. Kami memiliki cara untuk pergi sebelum siap untuk web.

Pada tahap ini, saatnya menggunakan bagian kiri otak Anda yang lebih analitis.

Dalam dunia desain web, kami menyebut proses ini sebagai "mengiris". Meskipun istilah ini lebih akurat beberapa waktu lalu, sebelum CSS menjadi blok bangunan visual utama web dan Anda harus memotong setiap bagian kecil dari PSD atau PNG Anda dan memasukkannya ke dalam tabel kecil yang mengerikan, itu tetap ada.

Jika Anda seorang desainer web dan belum tahu cara 'front-end', Anda beruntung—karena coding dapat dipelajari (tidak seperti memiliki bakat alami untuk desain). Saya akan merekomendasikan Anda berinvestasi dalam beberapa tutorial video online seperti Lynda.com dan membahas dasar-dasar pengembangan front-end. (Daftar sumber daya yang lebih pasti dapat ditemukan di sini.) Dalam hitungan jam, Anda akan beralih dari nol hingga membaca kode. Dan dalam beberapa hari, Anda akan menulisnya sendiri. Dan dalam beberapa bulan, Anda akan menjadi master HTML dan CSS—maka tidak ada yang bisa menghentikan Anda dalam hal pekerjaan teknik front-end.

Sekarang, jika Anda membuat beberapa gambar rangka yang bagus (pada tahap sebelumnya) menurut beberapa kisi yang Anda rasa nyaman, Anda akan tahu persis bagaimana Anda ingin situs Anda dikodekan. Cara tercepat adalah dengan menggunakan semacam kerangka kerja front-end, seperti Bootstrap.

Setelah Anda memahami desain berbasis kisi, Anda akan mulai melihat setiap bagian situs web Anda sebagai sekumpulan baris dan kolom. Hal pertama yang saya lakukan ketika saya mengatur struktur HTML saya, sebelum saya menambahkan konten nyata atau CSS, adalah menulis di baris, lalu kolom, lalu hal-hal dasar seperti navigasi, diikuti oleh teks dan placeholder gambar. Ini memungkinkan Anda mendapatkan struktur dasar terlebih dahulu dan membangun dari sana. Melihat gambar rangka ini, kita dapat melihat enam baris:

1. Logo / Navigasi
2. Penggeser gambar
3. teks pengantar
4. Gambar kategori
5. Berita / penawaran terbaru
6. catatan kaki

Setelah kami memasukkannya ke dalam struktur HTML Bootstrap, kami akan memiliki sesuatu seperti ini:

Banyak situs web dasar menggunakan kode yang sama (atau serupa), dan saat Anda mengerjakan lebih banyak proyek, Anda akan melihat bahwa pengembangan situs web sebagian besar merupakan proses berulang, dan tidak ada gunanya menulis kode yang sama pada setiap iterasi. . Inilah sebabnya mengapa kerangka kerja berguna! Apakah Anda membuat sendiri atau memutuskan untuk menggunakan Bootstrap atau Foundation—tidak masalah. Yang penting adalah Anda dapat mempertahankannya nanti dan mengembangkannya jika diperlukan.

Hampir semua yang Anda butuhkan untuk sebuah proyek telah dibuat sebelumnya, dan kemudian dibuat ulang beberapa kali. Jadi, untuk tugas besar apa pun, carilah di sekitar dan tanyakan kepada orang lain apakah mereka memiliki saran sebelum Anda menerobos tembok terlebih dahulu. Sebagian besar kerangka kerja besar memiliki komunitas yang sangat aktif yang membuat kode dan plug-in tambahan untuk mempermudah pekerjaan Anda. Jadi, bekerjalah dengan cerdas, bukan keras—dan belajarlah setiap hari. Dan, jika Anda benar-benar membutuhkan sesuatu yang belum pernah dibuat oleh siapa pun sebelumnya, maka Anda sedang membuka jalan baru! Tulis tentangnya dan bagikan dengan komunitas—itu akan membantu Anda tumbuh sebagai desainer dan pengembang.

Memilih CMS

Untuk beberapa proyek rekayasa front-end, Anda akan selesai segera setelah desain Anda ada di halaman web langsung. Ini biasanya situs yang lebih kecil (misalnya, untuk usaha kecil, pengacara, dokter gigi, dll.). Namun seringkali, Anda atau klien Anda ingin memiliki kendali atas konten situs web. Dalam hal ini, Anda memerlukan Sistem Manajemen Konten (CMS). Tujuan CMS adalah untuk memungkinkan Anda mengedit dan memublikasikan konten ke halaman web tanpa harus membuat kode setiap detail baru dengan tangan, atau bahkan kode sama sekali.

Dari semua CMS besar, saya akan menyebut diri saya seorang Penginjil WordPress: Saya memujinya kepada pengembang lain, terutama pemula, karena keserbagunaannya, kemudahan penggunaan, dokumentasi komprehensif untuk pengembangan, komunitas besar, sejumlah besar plug-in gratis, dan seterusnya, dan seterusnya…

Jika seseorang memberi tahu Anda bahwa Joomla! lebih baik, terutama untuk proyek yang lebih kecil—maka mereka tidak tahu apa yang mereka bicarakan. Bagaimanapun, jangan hanya mengambil kata saya untuk itu: unduh WordPress dan Joomla! tema pemula, lihat setiap folder, lalu tanyakan pada diri sendiri—mana yang ingin Anda jelajahi dalam peran front-end baru Anda?

Saya akan membutuhkan seluruh artikel untuk menulis tentang topik ini, tapi percayalah pada saya yang satu ini seperti Anda akan mempercayai Baz Luhrmann pada tabir surya.

Jika proyek Anda sangat kecil dan Anda hanya membutuhkan CMS sederhana yang dapat diimplementasikan tanpa keterampilan pengkodean, saya sarankan Anda menggunakan CouchCMS. Hanya dengan beberapa tag XHTML, Anda dapat mengaktifkannya dan menjalankannya dalam hitungan menit, dan bahkan nenek Anda akan tahu cara menggunakannya.

Memelihara Situs Web Anda

Setelah Anda mengirimkan situs web Anda, dan Anda memiliki pelanggan lain yang puas, yang tersisa untuk Anda lakukan adalah memelihara situs tersebut. Jika Anda telah membuat situs HTML sederhana yang tidak memiliki konten baru, Anda mungkin sudah selesai.

Jika Anda telah menggunakan CMS, Anda harus memastikan bahwa teknologinya selalu mutakhir sehingga Anda terhindar dari pelanggaran keamanan. Ini termasuk CMS itu sendiri dan semua plugin yang Anda gunakan. Jika Anda mengikuti saran saya dan menggunakan WordPress, Anda akan diberi tahu melalui email untuk setiap pembaruan yang tersedia.

Ini adalah rata-rata proses saya. Memang, ini tidak akan berhasil untuk semua orang, dan tentu saja tidak akan berlaku untuk setiap proyek. Tapi saya harap ini membantu Anda para desainer di luar sana mendapatkan keterampilan yang Anda butuhkan untuk menjadi insinyur front-end yang hebat, dan sebaliknya, sehingga kami dapat terus mengembangkan bakat kami sebagai pengembang front-end.

Saya hanya bisa menunjukkan pintunya. Kaulah yang harus melewatinya. - Morpheus, Matriks

PS: Anda dapat menemukan PSD dari template di atas dan desain keren lainnya di portofolio dribbble saya.