Category Archives

4 Articles
Tentang Pengembangan Laman Situs

Tentang Pengembangan Laman Situs

Laman Depan

Saat ini, ada konsep yang bernama landing page. Inti dari landing page adalah konsep Call To Action (CTA). Ada sebuah tombol atau borang yang mengajak langsung pengunjung untuk beraksi. Aksi yang dimaksud misalnya mengajak untuk mendaftar atau membeli.

Kebetulan situs ini tidak untuk kepentingan komersial. Bahkan, Anda bisa saja menolak semua cookies yang ada di situs ini karena itu dari pihak ketiga. Ya, saya menggunakan tombol CTA untuk ke halaman daftar tulisan blog.

Saya menggunakan LayerSliderWP yang telah dibeli oleh Humas UI untuk membuat tampilan. Tematik yang saya gunakan (Limitless) sudah mendukung langsung. Tinggal saya mempelajari tulisan yang ada.

Poster

Saya iseng-iseng membuat sebuah poster dengan cara yang benar karena sayang melihat poster web hanya sebuah satu gambar JPEG. Kerap kali kita senang membuat poster/infografis daring bermodalkan sebuah gambar besar. Sayangnya, mesin-mesin pencari tidak dapat menangkap isi data poster/infografis tersebut. Sehingga, informasi yang sebenarnya ingin disebarkan ke web menjadi terbatas saja. Selain itu, ukuran menjadi sangat besar.

Untuk itu, perlu dibuatkan sebuah poster/infografis ala web. Saya menggunakan RevSlider yang telah dibeli Humas UI sebagai perkakas.

Konsepnya sama seperti menggunakan penyunting grafis seperti GIMP/Photoshop. Gambar dijadikan beberapa lapisan (layer). Beberapa lapisan yang berisi info berupa tulisan biasa. Untuk ikon dan gambar orang, misalnya, baru digunakan lapisan grafis.

Basi, ‘dong?

Tentu tidak! Dengan adanya fonta daring (web font) yang dapat diakses dari Google Fonts, dapat dibuat tulisan dengan jenis huruf yang nyeleneh seperti yang dijumpai pada komputer pribadi.

Tentunya, pembuatan poster ICACSIS 2015 yang saya buat jauh dari sempurna. Ada beberapa perbaikan yang saya pikir perlu:

  1. Menggunakan flat design dengan menghindari latar belakang gambar. Selain lebih sederhana, ukuran total menjadi lebih kecil.
  2. Menghitung piksel yang benar sehingga konsisten pada semua tampilan.
  3. Belajar desain yang lebih menarik. 🙂

Demikianlah, saya masih dalam taraf belajar.

Gambar Latar

Dari studi kasus situs IBM, ada dua hal yang saya dapat pelajari, yakni gambar yang digunakan untuk latar blok CTA dan gambar yang digunakan untuk efek paralaks. Selain itu, permainan warna yang digunakan oleh IBM cenderung warna-warna kalem dan komposisi foto yang warnanya terbatas sehingga dapat dikompresi dengan ukuran yang kecil.

Gambar untuk CTA

Yang menjadi misteri adalah ketika menghitung berapa dimensi gambar latar, kalau pun seharusnya menggunakan gambar latar. Kalau saya lihat dari IBM.com pada laman MobileFirst-nya, mereka menggunakan dimensi 1600×400px dan 1600×520px. Di beberapa laman lainnya ada yang 1600×450px.

Gambar untuk Parallax

Untuk tipe gambar parallax, dimensi yang digunakan oleh IBM pada laman cloud computing adalah 1480×987px.

Terakhir

Saya masih penasaran untuk membuat landing page yang bagus. Saya lihat, situs-situs seperti IBM minim animasi. Mungkin untuk mengurangi distraksi dan membuat berat sistem.

Ah, saya jadi ingin mengoprek lebih lanjut.

Post with Featured Image

Post with Featured Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a mi non nunc commodo congue. Suspendisse facilisis risus ut tincidunt pharetra. Sed sed nibh eu odio tristique aliquet non at nisl. Cras mollis eros a arcu consequat sodales. Nunc nec mattis arcu, ac sodales lacus. Etiam sit amet nisl dictum, congue orci lobortis, scelerisque tellus. Praesent fermentum risus a nisl pretium, sit amet dignissim erat dapibus. Nunc justo orci, venenatis vitae viverra vitae, semper ac nibh. Nunc et arcu vitae turpis facilisis lacinia. Integer faucibus velit sem, at blandit nunc faucibus vitae.

Mauris nec gravida ipsum, ac pulvinar urna. Nunc rhoncus convallis tellus, a sodales elit dignissim lobortis. Ut sed mattis ipsum. Nulla dapibus est adipiscing blandit hendrerit. Donec pretium massa ut elit dignissim mollis. Mauris sem massa, ornare ut magna mollis, aliquam molestie erat. Vivamus vitae urna tempus, ultricies mauris eget, porta neque. Sed hendrerit porttitor neque.

Vivamus vel rutrum quam, laoreet cursus lectus. Fusce fringilla mollis dui, vitae consectetur leo gravida et. Proin porttitor fringilla dolor, eget auctor tellus volutpat sit amet. Suspendisse congue ligula in tincidunt tempor. Mauris pharetra ornare ipsum, sed vulputate dolor. Praesent tristique consequat dictum. Aenean ullamcorper ligula et pretium auctor. Fusce lobortis dolor a porttitor malesuada. Curabitur posuere adipiscing hendrerit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a mi non nunc commodo congue. Suspendisse facilisis risus ut tincidunt pharetra. Sed sed nibh eu odio tristique aliquet non at nisl. Cras mollis eros a arcu consequat sodales. Nunc nec mattis arcu, ac sodales lacus. Etiam sit amet nisl dictum, congue orci lobortis, scelerisque tellus. Praesent fermentum risus a nisl pretium, sit amet dignissim erat dapibus. Nunc justo orci, venenatis vitae viverra vitae, semper ac nibh. Nunc et arcu vitae turpis facilisis lacinia. Integer faucibus velit sem, at blandit nunc faucibus vitae.

Mauris nec gravida ipsum, ac pulvinar urna. Nunc rhoncus convallis tellus, a sodales elit dignissim lobortis. Ut sed mattis ipsum. Nulla dapibus est adipiscing blandit hendrerit. Donec pretium massa ut elit dignissim mollis. Mauris sem massa, ornare ut magna mollis, aliquam molestie erat. Vivamus vitae urna tempus, ultricies mauris eget, porta neque. Sed hendrerit porttitor neque.

Vivamus vel rutrum quam, laoreet cursus lectus. Fusce fringilla mollis dui, vitae consectetur leo gravida et. Proin porttitor fringilla dolor, eget auctor tellus volutpat sit amet. Suspendisse congue ligula in tincidunt tempor. Mauris pharetra ornare ipsum, sed vulputate dolor. Praesent tristique consequat dictum. Aenean ullamcorper ligula et pretium auctor. Fusce lobortis dolor a porttitor malesuada. Curabitur posuere adipiscing hendrerit.

SEO Unchained

SEO Unchained

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sem aliquet elit elementum consectetur eget eget lorem. Curabitur semper purus orci, a cursus magna molestie nec. Aenean vel lectus posuere nisl luctus vehicula. Ut suscipit felis nisl. Vestibulum vitae libero ac diam euismod commodo sed id lacus. Ut porta, eros ac laoreet fringilla, massa magna ornare orci, in viverra tortor turpis in mauris. Nulla consequat et justo ac ullamcorper. Sed iaculis faucibus justo, in ultricies quam sagittis at. Nunc faucibus leo vel est porta fermentum. Nunc iaculis dui et dolor malesuada, et congue neque imperdiet. Mauris quis feugiat eros, quis porta libero. Etiam ut laoreet erat. Mauris nulla risus, dapibus at orci vel, suscipit dictum dolor. Nunc scelerisque sed tellus sed tempus.

Suspendisse potenti. Donec eu orci feugiat, auctor urna id, vulputate odio. Nulla sed metus dignissim, congue tortor non, convallis velit. Proin vitae tempus nulla, eu molestie leo. Fusce gravida bibendum nibh ut molestie. Maecenas dignissim nunc arcu, quis sagittis nisi rhoncus ullamcorper. Praesent non tincidunt neque. Aenean congue fermentum condimentum. Pellentesque pretium, velit et vulputate mattis, mi tortor pretium eros, vel lacinia nulla velit sit amet leo. Maecenas interdum pulvinar iaculis.

Aenean vestibulum, ligula id luctus ultricies, leo est viverra felis, eu viverra ipsum velit ut turpis. Mauris id lectus dui. Suspendisse non varius orci. Nam vitae erat aliquet, rhoncus lectus a, aliquet diam. Aenean malesuada sodales tellus vitae viverra. Nullam justo elit, sollicitudin et fringilla ut, mattis non quam. Curabitur ac nunc facilisis, mollis metus aliquet, congue sapien. Vestibulum fringilla, odio vitae condimentum pellentesque, velit felis blandit dolor, quis venenatis nulla mauris eget enim. Ut orci ante, fringilla ut sapien sit amet, egestas venenatis ante. Morbi porttitor lacinia quam sed aliquet.