Jumat, 09 Februari 2018

Adaptive atau Responsive Website yang Kamu Pilih?

Layout Halaman Adaptif

Tata letak halaman adaptif menggunakan kueri media CSS untuk mendeteksi lebar peramban dan mengubah tata letak yang sesuai. Tata letak adaptif akan menggunakan unit tetap seperti piksel, seperti tata letak statis, namun perbedaannya adalah bahwa pada dasarnya ada beberapa lebar tetap yang ditentukan oleh kueri media tertentu.

Permintaan media adalah ekspresi logika, dan bila digunakan dalam kombinasi dengan kueri media lainnya, mereka membentuk algoritma dasar. Jadi misalnya, tata letak halaman yang adaptif bisa dikatakan seperti, "Jika lebar browser 500 piksel, tetapkan wadah konten utama menjadi lebar 400 piksel. Jika browser berukuran lebar 1000 piksel, maka atur wadah konten utama menjadi lebar 960 piksel. "Di luar wadah konten utama, bagian lain halaman mungkin berubah lebar, tempat bertukar, atau dihapus. Misalnya, layout dua kolom bisa menjadi layout kolom tunggal jika browser terlalu sempit.

Tata letak adaptif adalah solusi stop-gap yang bagus jika tata letak statis lawas perlu dikonversi untuk mendukung perangkat mobile. Mereka juga biasanya memerlukan waktu pengembangan kurang dari tata letak yang responsif. Kelemahan utama adalah bahwa lebar perangkat di antara titik pemisah eksplisit sering kali kurang ideal, dengan ruang terlalu banyak atau ruang yang tidak cukup.

Layout Halaman Responsif

Tata letak halaman yang responsif menggunakan unit relatif dan kueri media, seolah-olah menggabungkan gagasan tata letak yang cair dan tata letak yang adaptif. Saat browser bertambah atau berkurang lebarnya, tata letak yang responsif akan lentur seperti tata letak yang cair. Namun, jika browser melampaui lebar tertentu yang didefinisikan oleh breakpoint query media, maka tata letaknya akan berubah lebih dramatis untuk mengakomodasi lebar lebar atau sempit.

Biasanya desain responsif dibangun menggunakan pendekatan mobile-first. Itu berarti tata letak mobile dirancang terlebih dahulu, dan kemudian saat browser menjadi lebih luas pada tablet dan desktop, perancang akan menemukan cara untuk memperluas tata letak mobile. Hal ini cenderung menciptakan pengalaman yang lebih baik secara keseluruhan, karena lebih mudah untuk memperluas desain daripada mencoba dan menyederhanakan tata letak yang besar untuk layar ponsel.

Adaptive atau Responsive Website yang Kamu Pilih?

Layout Halaman Adaptif

Screenshot dari tata letak halaman adaptif dengan browser berukuran 1440px dan 400px.

Tata letak halaman adaptif menggunakan kueri media CSS untuk mendeteksi lebar peramban dan mengubah tata letak yang sesuai. Tata letak adaptif akan menggunakan unit tetap seperti piksel, seperti tata letak statis, namun perbedaannya adalah bahwa pada dasarnya ada beberapa lebar tetap yang ditentukan oleh kueri media tertentu.

Permintaan media adalah ekspresi logika, dan bila digunakan dalam kombinasi dengan kueri media lainnya, mereka membentuk algoritma dasar. Jadi misalnya, tata letak halaman yang adaptif bisa dikatakan seperti, "Jika lebar browser 500 piksel, tetapkan wadah konten utama menjadi lebar 400 piksel. Jika browser berukuran lebar 1000 piksel, maka atur wadah konten utama menjadi lebar 960 piksel. "Di luar wadah konten utama, bagian lain halaman mungkin berubah lebar, tempat bertukar, atau dihapus. Misalnya, layout dua kolom bisa menjadi layout kolom tunggal jika browser terlalu sempit.

Tata letak adaptif adalah solusi stop-gap yang bagus jika tata letak statis lawas perlu dikonversi untuk mendukung perangkat mobile. Mereka juga biasanya memerlukan waktu pengembangan kurang dari tata letak yang responsif. Kelemahan utama adalah bahwa lebar perangkat di antara titik pemisah eksplisit sering kali kurang ideal, dengan ruang terlalu banyak atau ruang yang tidak cukup.

Layout Halaman Responsif

Screenshot dari tata letak halaman yang responsif dengan browser berukuran 1440px dan 400px.

Tata letak halaman yang responsif menggunakan unit relatif dan kueri media, seolah-olah menggabungkan gagasan tata letak yang cair dan tata letak yang adaptif. Saat browser bertambah atau berkurang lebarnya, tata letak yang responsif akan lentur seperti tata letak yang cair. Namun, jika browser melampaui lebar tertentu yang didefinisikan oleh breakpoint query media, maka tata letaknya akan berubah lebih dramatis untuk mengakomodasi lebar lebar atau sempit.

Biasanya desain responsif dibangun menggunakan pendekatan mobile-first. Itu berarti tata letak mobile dirancang terlebih dahulu, dan kemudian saat browser menjadi lebih luas pada tablet dan desktop, perancang akan menemukan cara untuk memperluas tata letak mobile. Hal ini cenderung menciptakan pengalaman yang lebih baik secara keseluruhan, karena lebih mudah untuk memperluas desain daripada mencoba dan menyederhanakan tata letak yang besar untuk layar ponsel.

Kamis, 08 Februari 2018

Responsive Design Yang Harus Kamu Ketahui


Google telah secara resmi merekomendasikan Responsive Web Design sebagai metode pilihan mereka untuk membangun situs web seluler. Jika Anda memiliki situs web atau blog, sekarang saatnya mempertimbangkan beralih ke desain responsif alih-alih mempertahankan situs web mobile dan tablet yang terpisah.

Jika Anda baru mengenal konsep Responsive Web Design (RWD), berikut adalah pertanyaan umum yang mungkin Anda miliki seputar teknik ini.


Mengapa saya harus mengganti situs saya dengan RWD?

Situs web Anda terlihat hebat di layar desktop namun mungkin tidak benar bila situs Anda dilihat di ponsel cerdas atau tablet. Begitu Anda membuat desain responsif, situs web akan terlihat bagus (dan mudah dibaca) di semua layar.

Dengan Desain Responsif Anda dapat membuat satu desain dan secara otomatis akan menyesuaikan diri berdasarkan ukuran layar perangkat mobile. Pendekatan ini menawarkan banyak keuntungan:

Ini menghemat waktu dan uang karena Anda tidak perlu mengelola situs web terpisah untuk desktop dan telepon genggam.

Desain Responsif bagus untuk SEO situs web Anda (peringkat pencarian) karena setiap halaman di situs Anda akan memiliki satu URL dan dengan demikian jus Google diawetkan. Anda tidak perlu khawatir tentang situasi di mana beberapa situs menautkan ke situs seluler Anda sementara yang lain menautkan ke situs desktop Anda.

Laporan Google Analytics Anda akan melukis gambaran yang lebih baik tentang penggunaan situs Anda karena data dari pengguna seluler dan desktop akan dikonsolidasikan.

Hal yang sama akan berlaku untuk statistik pembagian sosial (Facebook Likes, Tweets, + 1's) karena versi mobile dan desktop dari halaman web Anda akan memiliki URL yang sama.

Desain Responsif lebih mudah dipelihara karena tidak melibatkan komponen server-side. Anda hanya perlu memodifikasi CSS yang mendasari halaman untuk mengubah tampilannya (atau tata letak) pada perangkat tertentu.

Apa yang harus saya ketahui untuk memulai dengan Desain Responsif?

Desain Responsif adalah HTML dan CSS murni. Anda membuat aturan di CSS yang mengubah gaya berdasarkan ukuran layar perangkat pengguna.

Misalnya, Anda bisa menulis aturan yang mengatakan jika ukuran layar pengguna kurang dari 320 piksel, jangan tampilkan sidebar atau jika ukuran layar lebih besar dari 1920 piksel (widescreen desktop), tingkatkan ukuran font bodi. teks ke 15px

Bagaimana cara memeriksa apakah situs web tertentu menggunakan Desain Responsif?
Itu mudah. Buka situs web itu di browser desktop manapun dan ubah ukuran browser. Jika tata letak situs berubah saat Anda mengubah ukuran, desainnya responsif.

Jika saya pergi dengan pendekatan Desain Responsif, apakah situs web saya akan bekerja dengan peramban lama?


Sebagian besar ya. RWD menggunakan media-kueri CSS3 dan HTML5 (untuk semantik yang lebih baik) yang tidak didukung di versi IE yang lebih lama. Namun, ada solusi berbasis JavaScript - respond.js dan modernisasi misalnya - yang menghadirkan kekuatan CSS3 dan HTML5 ke browser lawas termasuk IE6.

Apakah Desain Responsif dimainkan dengan baik dengan jaringan periklanan seperti Google AdSense?


Jika Anda menggunakan iklan di situs web Anda, Anda harus memilih format dengan hati-hati karena unit yang lebar (seperti spanduk utama 728 × 60 piksel) mungkin tidak sesuai dengan layar ponsel 320px. Saya lebih suka menggunakan unit persegi panjang standar (seperti 300 × 250) karena mudah dipasang di layar smartphone dan desktop layar lebar.

Ada ribuan perangkat mobile. Resolusi layar apa yang harus didukung oleh situs web responsif saya?
Saya akan merekomendasikan pengaturan break point untuk setidaknya viewports berikut di MediaWatch CSS3 Anda - 320px (lansekap iPhone), 480 px (potret iPhone), 600px (Tablet Android), 768px (iPad + ~ Galaxy Tabs) dan 1024px (lanskap iPad dan desktop).

Rabu, 07 Februari 2018

Cara Mengatasi Broken Link pada Website Wordpress

Saya menduga Anda juga ingin memiliki plugin WordPress untuk tugas ini jadi saya menemukan plugin yang sangat populer dan baru diperbarui dengan lebih dari satu juta unduhan.

Plugin ini akan memantau blog Anda, mencari tautan yang rusak dan memberi tahu Anda jika ada yang ditemukan. Saya akan merekomendasikan untuk menggunakan plugin ini untuk memantau keseluruhan situs dan pengecekan tautan, namun tidak tepat untuk pembersihan artikel lama. Ini memiliki beberapa fitur praktis, tapi ini tidak efektif untuk tugas kita.


  • Monitor link di posting Anda, halaman, komentar, blogroll, dan bidang kustom (opsional).
  • Mendeteksi tautan yang tidak berfungsi, kehilangan gambar dan pengalihan.
  • Memberitahu Anda melalui Dashboard atau melalui email. Membuat broken link tampil berbeda di postingan (optional).
  • Mencegah mesin pencari mengikuti link yang rusak (opsional).
  • Anda bisa mencari dan menyaring link dengan URL, anchor text dan sebagainya.

Pemeriksa link rusak


Di sini Anda pergi, dengan alat ini Anda dapat dengan mudah menemukan link yang rusak di posting. Memperbarui tautan ini bisa sedikit berantakan dan menyita waktu, karena Anda perlu benar-benar menemukan tautan di artikel dan kemudian Google menjadi tujuan barunya.


  • Buka postingan di dashboard WordPress agar anda bisa mengeditnya
  • Gunakan perangkat lunak pilihan Anda untuk mencari tautan yang rusak di posting (disarankan: ScreamingFrog)
  • Buka tautan yang rusak di browser
  • Salin tautan yang rusak dan telusuri (lihat Kode: CTRL + F untuk penelusuran) di pos WordPress, sehingga Anda dapat melihat bagaimana judul sebelumnya dipanggil atau mendapatkan beberapa kata kunci untuk dicari
  • Gunakan Google untuk mencari kata kunci ini untuk menemukan apakah link telah mengubah tujuan
  • Jika anda menemukan artikel / resource tersebut, cukup ganti link di postingan WordPress dan anda selesai
  • Jika Anda tidak dapat menemukan posting sebelumnya, pilih saja artikel baru atau hapus tautan sepenuhnya

Ini adalah proses yang sangat berantakan yang perlu Anda lakukan, tapi saya belum memikirkannya atau menemukan cara untuk melakukannya dengan lebih cepat dan tidak yakin apakah Anda dapat melakukannya sama sekali. Jika Anda tahu solusi yang lebih baik, tolong beritahu saya - saya akan sangat, sangat bersyukur!

Selasa, 06 Februari 2018

Plugin-plugin Anti Spam Untuk Wordpress


Akismet

Tidak ada brainer sebenarnya, meski dengan kritik tentang plugin ini akhir-akhir ini, saya masih berpikir itu adalah plugin yang harus dimiliki. Ini mendapatkan sebagian besar spam keluar dari jalan dan memiliki beberapa fitur berguna di panel komentar seperti tombol Check for Spam misalnya ..

Plugin wordpress akismet

AntiSpam Bee

Jika Anda benar-benar membenci Akismet karena alasan apa pun Anda bisa mendapatkan Antispam Bee dengan cara lain. Ini menggunakan sistem yang mirip dengan Akismet, namun alih-alih mengirimkan komentar ke Akismet, Anda mengirimkan komentar ke Project Honey Pot yang berbasis komunitas.

Anda bisa mendapatkan kunci API untuk HoneyPot dan bergabung dalam memerangi spammer dengan melaporkan spammer dan belajar dari laporan spammer orang lain.

Growmap Anti Spambot Plugin: GASP

Plugin Anti Spambot Growmap: GASP
Kalahkan spambot otomatis dengan menambahkan kotak centang yang dihasilkan sisi klien meminta penulis komentar untuk mengonfirmasi bahwa mereka bukan spammer.

Plugin sangat sederhana, namun memiliki kotak centang unik dan bukan CAPTCHA klasik. Spammer memiliki alat bantu yang membantu memecah captchas, namun mereka perlu melakukan upaya ekstra untuk mendapatkan checkbox tersebut. Dan secara pribadi saya benci untuk mengisi captcha's ketika saya hanya ingin meninggalkan komentar di blog favorit saya, saya lebih memilih kotak centang sederhana. Mencoba di 1WD dan bekerja.

Terengah-engah

SI CAPTCHA Anti-Spam

Jika Anda masih menginginkan CAPTCHA di blog Anda, ini adalah plugin terpopuler untuk itu. Plugin ini menambahkan metode anti-spam CAPTCHA ke WordPress dalam bentuk untuk komentar, registrasi, kehilangan kata sandi, login, atau semuanya. Untuk WP, WPMU, dan BuddyPress.

Plugin captcha wordpress


Dengan plugin ini Anda akan dipersiapkan dengan sangat baik untuk SPAM masa depan yang datang ke situs Anda!

Tendensi Deskripsi Produk Dalam Internet Marketing

Pertimbangkan rute yang mungkin membawa Anda ke halaman produk. Mungkin Anda Googled kamera tertentu dan navigasikan langsung ke link produk, melewatkan rumah dan sekitar halaman.

Mungkin Anda mengeklik tautan yang dibagikan oleh teman di media sosial atau menemukan produk berkat penargetan ulang iklan. Apapun masalahnya, Anda melewati ekosistem tradisional dan meningkatkan taruhan interaksi Anda dengan halaman produk. Hal ini, pada dasarnya, menjadi homepage.

Jika Anda mendarat langsung tanpa konteks, halaman harus cukup menarik untuk dipegang perhatian Anda, namun cukup rinci untuk menangkap penjualan. Dan mencapainya bukan hal yang mudah.

Pendekatan Multi-Faceted

Pertimbangkan usaha yang masuk ke dalam penulisan uraian produk. Setiap item memerlukan uraian unik minimal 250 sampai 400 kata. Awalnya mungkin tidak banyak, tapi jika Anda menawarkan 1.000 produk, Anda melihat 400.000 kata salinan - dua kali panjang "Moby Dick." Dan Herman Melville tidak perlu melakukan pemotretan, mengambil inventaris , dan menugaskan produk terkait setelah selesai menulis.

Mendapatkan halaman produk dengan benar memerlukan masukan dari pengembang, perancang, penulis, fotografer, dan manajer proyek. Setiap elemen harus berpusat di sekitar konten, memperkuat pesan melalui tombol komplementer, skema warna, font, dan fungsionalitas.

Optimalisasi halaman produk memerlukan investasi waktu dan sumber daya yang signifikan, namun memberikan pengembalian investasi yang hampir segera. Inilah halaman produk berkinerja tinggi yang mencakup:

Melibatkan Deskripsi Produk

Menyusun katalog produk lengkap adalah satu-satunya cara untuk mendapatkan lalu lintas organik yang serius. 95% orang yang diwawancarai dalam survei eCommerce mengatakan bahwa deskripsi produk memainkan peran penting dalam keputusan pembelian mereka.

Setiap deskripsi harus mencakup hasil yang disusun dengan baik dan informatif terhadap produk, bersama dengan diagram ukuran untuk setiap item tertentu jika sesuai. Misalnya, ASOS menawarkan panduan ukuran yang spesifik untuk subkategori yang berbeda, seperti "Pelompat dan Kartu Pria". Sumber daya ini mencegah orang untuk menavigasi untuk mencari ukuran di tempat lain atau hanya meninggalkan penjualan dengan frustrasi.

Selain pengirimannya, di sinilah Amazon benar-benar berhasil. Halaman produk mereka tidak akan pernah memenangkan penghargaan desain, tapi itu adalah hal yang sekunder bagi mereka: Ini tidak glamor, namun pelanggan sangat tidak mungkin meninggalkan halaman produk mereka karena mereka kehilangan informasi.

Senin, 05 Februari 2018

Adaptive atau Responsive Websites

Layout Halaman Adaptif

Tata letak halaman adaptif menggunakan kueri media CSS untuk mendeteksi lebar peramban dan mengubah tata letak yang sesuai. Tata letak adaptif akan menggunakan unit tetap seperti piksel, seperti tata letak statis, namun perbedaannya adalah bahwa pada dasarnya ada beberapa lebar tetap yang ditentukan oleh kueri media tertentu.

Permintaan media adalah ekspresi logika, dan bila digunakan dalam kombinasi dengan kueri media lainnya, mereka membentuk algoritma dasar. Jadi misalnya, tata letak halaman yang adaptif bisa dikatakan seperti, "Jika lebar browser 500 piksel, tetapkan wadah konten utama menjadi lebar 400 piksel. Jika browser berukuran lebar 1000 piksel, maka atur wadah konten utama menjadi lebar 960 piksel. "Di luar wadah konten utama, bagian lain halaman mungkin berubah lebar, tempat bertukar, atau dihapus. Misalnya, layout dua kolom bisa menjadi layout kolom tunggal jika browser terlalu sempit.

Tata letak adaptif adalah solusi stop-gap yang bagus jika tata letak statis lawas perlu dikonversi untuk mendukung perangkat mobile. Mereka juga biasanya memerlukan waktu pengembangan kurang dari tata letak yang responsif. Kelemahan utama adalah bahwa lebar perangkat di antara titik pemisah eksplisit sering kali kurang ideal, dengan ruang terlalu banyak atau ruang yang tidak cukup.

Layout Halaman Responsif

Tata letak halaman yang responsif menggunakan unit relatif dan kueri media, seolah-olah menggabungkan gagasan tata letak yang cair dan tata letak yang adaptif. Saat browser bertambah atau berkurang lebarnya, tata letak yang responsif akan lentur seperti tata letak yang cair. Namun, jika browser melampaui lebar tertentu yang didefinisikan oleh breakpoint query media, maka tata letaknya akan berubah lebih dramatis untuk mengakomodasi lebar lebar atau sempit.

Biasanya desain responsif dibangun menggunakan pendekatan mobile-first. Itu berarti tata letak mobile dirancang terlebih dahulu, dan kemudian saat browser menjadi lebih luas pada tablet dan desktop, perancang akan menemukan cara untuk memperluas tata letak mobile. Hal ini cenderung menciptakan pengalaman yang lebih baik secara keseluruhan, karena lebih mudah untuk memperluas desain daripada mencoba dan menyederhanakan tata letak yang besar untuk layar ponsel.

Meningkatkan SEO Post dengan Plugin Wordpress

Kemungkinannya adalah, jika posting Anda diurutkan dengan baik, Anda melakukan sesuatu dengan SEO atau promosi sosial Anda. Tidak banyak yang dapat Anda lakukan pada artikel lama, karena artikel sudah sesuai untuk kata kunci tertentu.

Anda masih dapat memeriksa kata kunci mana peringkat artikel Anda dengan baik dan Anda mungkin menemukan bahwa Anda menargetkan kata kunci yang salah dengan plugin SEO yang ada. Jika Anda ingin mengetahui kata kunci mana yang menghasilkan lalu lintas ke pos yang tepat yang dibaca di bawah ini.

Ikuti langkah berikut jika Anda memiliki Google Analytics:


Buka halaman Content / Landing dan klik tulisan yang ingin Anda teliti;
Pilih dimensi sekunder: Kata kunci dan Anda akan melihat kata kunci teratas yang digunakan untuk menemukan pos Anda;
Gunakan informasi ini untuk mengubah, memperbaiki frase kunci pencarian yang ada yang Anda targetkan di pengaturan post SEO. Oh, Anda juga bisa mengupdate headline dan meta deskripsi SEO;
Posting kata kunci

Plugin SEO yang Disarankan Untuk Memilih Untuk Optimalisasi WordPress


Saya tidak yakin plugin SEO mana yang Anda gunakan sekarang, tapi inilah yang saya sarankan. Dulu saya menggunakan plugin All in One SEO, namun beberapa bulan yang lalu saya beralih ke plugin Yoast WordPress SEO dan belum pernah merasa puas lagi!

WordPress SEO oleh Yoast

Tingkatkan SEO WordPress Anda: Tulis konten yang lebih baik dan dapatkan situs WordPress yang sepenuhnya optimal menggunakan plugin WordPress SEO oleh Yoast.

Dengan plugin ini Anda dapat dengan mudah mengoptimalkan konten baru dan yang ada dengan menetapkan judul utama SEO, kata kunci fokus, deskripsi meta. Plugin ini sangat membantu untuk mendapatkan posting Anda dan seluruh situs WordPress siap untuk SEO.

Saya tidak akan memberikan tip tentang cara menggunakan plugin ini karena semua pelatihan yang Anda butuhkan disertakan di dasbor WordPress itu sendiri!

4 Cara Sederhana Desainer UX Dapat Meningkatkan Kehadirannya secara Internal

1 - Promosikan pengguna

Menghabiskan banyak waktu untuk meneliti dan membentuk personas berarti Anda memiliki pemahaman mendalam tentang pengguna produk itu.

Gunakan pengetahuan mendalam Anda tentang pengguna untuk mempromosikan kebutuhan pengguna di seluruh perusahaan. Klik untuk tweet.
Mengarahkan fokus pada pengguna di seluruh perusahaan tidak hanya membantu memastikan bahwa upaya tetap relevan dengan kebutuhan pengguna, namun juga membantu memposisikan diri Anda sebagai ahli pengguna.

Ini tidak berarti memasang lencana pada baju Anda atau melambaikan bendera.

Fokus pada perluasan kehadiran Anda dengan mempromosikan pengguna terlebih dahulu.


2 - Pinjamkan keahlian Anda ke tim / proyek lain

Seringkali, berbagai tim menjalankan proyek "mikro" yang mungkin memiliki dampak yang tidak terkendali terhadap pengguna.

Bagi tim yang tidak sering berinteraksi dengan pengguna, menilai implikasi dari keputusan yang berbeda mungkin sulit dilakukan.
Anda dapat menggunakan pengetahuan Anda di sini untuk masuk, mendiskusikan berbagai dampak dan menyarankan tindakan tindakan apa yang dianggap paling mudah dilakukan.

Di lain waktu, ini mungkin bukan tipuan pengguna.

Tim mungkin mencari proses baru untuk mengatasi proyek atau membentuk solusi dengan lebih baik. Mereka mungkin ingin mendapatkan pemahaman pengguna yang lebih dalam, sehingga personas Anda mungkin cocok untuk dilihat.

Dengan cara ini, Anda menyimpan pemahaman menyeluruh tentang keseluruhan usaha UX perusahaan - namun juga memastikan bahwa tidak ada keputusan yang lolos melalui celah yang dapat mempengaruhi pengalaman pengguna Anda.


3 - Tunjukkan tim lain tentang apa yang Anda ciptakan

Ketika Anda terjebak mewawancarai atau menggunakan Sketsa sepanjang hari, seringkali satu-satunya orang yang akhirnya mendengar tentang Anda lakukan adalah manajer langsung atau rekan dekat.

Namun, saat Anda maju melalui revisi atau fitur baru, terus tim lainnya diperbarui. Mendengar tentang rencana baru adalah satu hal, namun melihat kemajuan visual adalah hal lain.

Tunjukkan pada mereka apa yang Anda lakukan, biarkan mereka bersemangat dan melihat perkembangan secara visual. Klik untuk tweet.
Saya telah melihat perbedaan di mata orang-orang antara bercakap-cakap tentang gagasan baru versus menunjukkan visual mereka. Kemajuan visual adalah cara yang bagus untuk menginspirasi orang!


4- Temukan cara untuk melacak dampak bisnis Anda

Melacak usaha Anda melalui metrik adalah cara yang bagus untuk memamerkan kemajuan Anda kepada orang lain, namun juga memberi diri Anda cara untuk mengukur kemajuan Anda sendiri.

Misalnya, hasil tes yang menyebabkan keputusan menaikkan keterlibatan atau pendaftaran adalah cara yang bagus untuk menunjukkan dampak yang telah Anda buat.

Terkadang tidak jelas metrik apa yang cocok, atau bagaimana cara melacak hasilnya - jadi jangan takut untuk bertanya! Klik untuk tweet
Jika Anda tidak yakin, carilah tim atau orang lain dan lihat apakah mereka memiliki gagasan. Duduklah bersama para manajer dan lihatlah metrik desain / desain yang mereka minati.

Tips Praktek Web Design Untuk Hasil yang Lebih Baik

Menjadi lebih baik pada apa pun membutuhkan banyak waktu dan usaha. Merasa seperti Anda berada dalam kebiasaan dengan kemajuan keterampilan desain web Anda? Coba ini:


  1. Temukan situs web yang sangat Anda sukai. Mungkin cari galeri desain.
  2. Bukalah program pilihan pilihan Anda dan cobalah untuk menyalinnya secara identik *. Ambil screenshot halaman penuh dari situs untuk referensi dan lapisan yang cepat.
  3. Selama proses penyalinan ini, akan ada banyak kesempatan untuk melakukan spin Anda sendiri pada disain dan membuatnya sendiri.
  4. Konversikan desain akhir Anda ke dalam HTML / CSS. Jika Anda terjebak, mintalah bantuan.
  5. Ulangi.

Saya telah mendengar banyak perancang web pemula mengeluh bahwa mereka tidak dapat menjadi lebih baik karena mereka tidak memiliki klien untuk dijadikan situs. Anda tidak memerlukan klien untuk membuat website. Saya sudah lama berteman dengan banyak musisi. Kupikir mereka mengunci diri di ruang piano selama 6 jam pada hari Sabtu di bawah lembaran musik yang sedang berlatih. Kenapa kita tidak melakukan itu?

5 Sumber Inspirasi Web Design Yang Luar Biasa

Memiliki bank inspirasi desain web berkualitas telah membuktikan aset besar pada alur kerja saya. Dengan masuknya daftar sumber daya inspirasional, saya dapat terjun ke proyek lebih cepat dan lebih efektif, dan lebih memenuhi tuntutan singkat kreatif apapun.

Lingkup proyek desain web dapat dengan cepat mempersempit jumlah sumber daya yang tersedia, sehingga sulit menemukan inspirasi yang tepat untuk tugas Anda. Tetapi memiliki beberapa tempat mulai yang andal dapat membantu Anda memenuhi kebutuhan klien, sekaligus mendorong Anda untuk mengeksplorasi solusi desain baru dan mendorong kreativitas Anda.

Dengan pemikiran tersebut, berikut adalah 17 sumber untuk membantu Anda mengimbangi tantangan yang ditimbulkan oleh proyek niche dan membangun gudang inspirasi desain web premium Anda.

1. Best Website Gallery


Sebuah galeri yang sangat curated dari inspirasi desain web premium yang dijalankan oleh satu orang, David Hellmann. Dia memulai proyek sampingan ini di tahun 2008, dan dia masih kuat, mungkin karena ini juga berfungsi sebagai galeri inspirasi pribadi David.

(Yang merupakan ide bagus, pikirkanlah, mungkin pada akhir posting ini Anda akan terinspirasi - dan dipersenjatai - untuk mulai membangun galeri inspirasi pribadi Anda sendiri!)

Best Website Gallery, atau BWG, menggunakan sistem pemberian tag sehingga Anda dapat dengan cepat menemukan situs berdasarkan gaya, pendekatan desain, fungsionalitas, dan lainnya. Dan dengan lebih dari 2.000 situs berkualitas untuk dibaca dengan teliti, ini sangat berguna.

Mengapa Anda harus pergi ke BWG untuk mendapatkan inspirasi desain

Karena BWG menawarkan galeri yang luas dan berkualitas tinggi yang dikurasi lengkap dengan pencarian dan sistem pemberian tag yang kuat. Ini sangat baik untuk:

1. Situs web portofolio
Jika Anda adalah tipe orang yang suka ambil bagian dalam Reboot 1 Mei setiap tahun, sangat berguna untuk memiliki begitu banyak portofolio desainer lain yang berguna untuk dicuri agar tidak terinspirasi.

2. Agensi situs web
Agen cenderung menarik kreativitas kaliber tertinggi, sehingga situs web mereka sering diberi peringkat tinggi di antara yang terbaik dari yang terbaik di web. Ini bisa menjadi inspirasi tidak hanya untuk situs web agensi Anda sendiri, tetapi juga situs klien, bisnis, atau portofolio apa pun.

3. Inspirasi warna
BWG memberi Anda kemampuan untuk memfilter situs dengan warna, sehingga Anda dapat dengan mudah menemukan palet cantik yang mencakup warna merek klien Anda!

2. CSS Nectar

Situs web inspirasional CSSnectar diuji tiga kali lipat. Pertama, ada biaya untuk mengirimkan situs web untuk ditinjau, dan menurut saya aman untuk berasumsi bahwa orang tidak akan membayar untuk tunduk kecuali jika mereka yakin dan bangga dengan pekerjaan tersebut. Kedua, tim kreatif meninjau setiap pengiriman sebelum ditayangkan. Akhirnya, masyarakat kemudian memberi suara pada desain, kode, dan kreativitas situs web. Yang terbaik diberikan pita digital dan sebuah tempat di halaman pemenang.



Mengapa Anda harus pergi ke CSSNectar untuk mendapatkan inspirasi desain

Tiga kata: Triple. Diperiksa Konten
Meskipun Anda dapat menemukan konten dan ilustrasi desain yang dikhususkan untuk manusia di sekitar web, proses kurasi tiga tahap yang mencakup pakar pilihan tangan benar-benar membawa krim dari hasil panen ke atas.

Pilihan penyaringan terperinci
CSS Nectar membuat pencarian inspirasi untuk jenis situs tertentu mudah dengan tag dan filter mereka, termasuk kategori, fitur, negara, dan tag warna.

3. Abduzeedo


Abduzeedo menawarkan inspirasi desain kaku sehari-hari, jadi selalu ada sesuatu yang baru untuk dilihat. Dan karena staf tidak membatasi diri pada desain web, Anda akan merasa terbantu dengan merentangkan paradigma desain pribadi Anda ke dimensi baru. Lagi pula, tidak ada yang bisa dikatakan bahwa situs Anda selanjutnya tidak dapat terinspirasi oleh iklan cetak, bukan?

Mengapa Anda harus pergi ke Abduzeedo untuk mendapatkan inspirasi desain

Mereka menyoroti luasnya disiplin desain
Abduzeedo bukan hanya untuk inspirasi desain digital. Sebagai gantinya, mereka menonjolkan segala hal mulai dari fotografi hingga arsitektur. Dan karena setiap kreatif tahu, keluasan dan variasi inspirasi dapat merangsang cara-cara baru untuk mendekati masalah apa pun.

Beragam format

Abduzeedo juga membawa keragaman ke dalam permainan inspirasinya melalui beragam media tempat mereka bekerja. Selain pertunjukan harian mereka, mereka juga membawa kreativitas melalui cerita-cerita panjang, wallpaper, dan bahkan (terkesiap) acara IRL.

4. SiteInspire


Dijalankan oleh Daniel Howells of Howells Studio, situsInspire menawarkan perpustakaan besar situs web inspirasional yang dapat dengan mudah disaring dengan sistem pemberian tag yang luas. Menggunakan beberapa tag sekaligus dapat benar-benar memperbaiki jenis inspirasi web yang Anda dapatkan, dan beragam kombinasi dapat menghasilkan beberapa hasil yang menarik.

Mengapa Anda harus pergi ke situsInspire untuk inspirasi desain web
Sistem penandaan yang elegan membantu Anda menghubungi dengan benar inspirasi.

Inspirasi berbasis subjek
Seperti yang Anda perancang lepas dan perancang agensi tahu betul, terkadang Anda memerlukan inspirasi untuk industri tertentu atau vertikal bisnis. Apapun industri yang Anda butuhkan untuk inspirasi, tag subjek SiteInspire akan membawa Anda ke tempat yang tepat.

Navigasi berbasis gaya
Terkadang, Anda kurang tertarik pada subjek atau industri daripada keseluruhan tata letak, atau bahkan hanya dengan pola desain tertentu.

Sayangnya, ketika Anda mencari hal-hal seperti "navigasi yang tidak biasa" di situs inspirasi lainnya, hasilnya biasanya bukan yang Anda cari. Untungnya, siteInspire memiliki filter / tag hanya untuk itu dan sangat bagus untuk menemukan inspirasi bertarget hiper.

5. Behance – Discover



Desain halaman web Behance membuat sangat mudah untuk menemukan sejumlah besar inspirasi desain web dari komunitas kreatif mereka yang sangat beragam. Alihkan pengaturan pencarian Anda untuk menentukan jangka waktu, popularitas, dan / atau lokasi. Misalnya, Anda bisa melakukan pencarian untuk "desain web yang paling dihargai dari minggu terakhir di Toronto, Kanada" dan temukan hasilnya. Jika tidak ada yang lain, ini akan memberi Anda apresiasi baru untuk ukuran - dan bakat - komunitas kreatif dunia!

Mengapa Anda harus pergi ke Behance untuk mendapatkan inspirasi desain web

Mengingat bahwa Behance adalah bagian dari keluarga perusahaan Adobe, ini mungkin adalah komunitas kreatif terbesar dan paling aktif di dunia. Dan pilihan penyaringan yang sangat terperinci dapat membantu Anda menemukan apa saja yang Anda cari, dari tipografi terbaru dari Jepang, hingga desain UI yang paling banyak dibahas dari Meksiko, hingga penulisan naskah terbaik di kampung Anda sendiri.

Inspirasi masyarakat yang dikurasi

Filter seperti "paling dihargai" memberi Anda gambaran tentang ketidaksadaran kolektif kreatif, dan memastikan Anda melihat yang terbaik dari yang terbaik - dari sudut pandang yang terbaik.

Filter "alat yang digunakan"

Sebagian besar situs inspirasi bersifat agnostik tentang alat yang digunakan dalam proses kreatif. Tidak begitu Behance, yang memberi Anda cara praktis untuk melihat apa yang orang lakukan dengan platform atau alat yang diberikan dengan filter Alat Bantu yang Digunakan (di bawah "Filter Tambahan"). Inilah proyek paling dihargai di dunia yang dibuat dengan Webflow, misalnya.

Minggu, 04 Februari 2018

Typography, Kenapa Penting dalam Web Desain?


Sementara video yang mengagumkan dan foto yang menakjubkan bisa mendapatkan banyak kemuliaan secara online, kenyataannya adalah bahwa Web terutama konten teksnya. Jika ada satu area di situs Anda di mana beberapa perhatian desain tambahan bisa berjalan jauh, itu adalah tipografi situs itu.

Selama bertahun-tahun, situs web hanya terbatas untuk bisa menggunakan beberapa "font aman web," seperti:
  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Tahoma
  • Lucida
  • Impact,
  • many more
Ini adalah font yang pada dasarnya dijamin dipasang di komputer Anda (karena ini adalah tempat sebuah situs web membaca fontnya). Namun, dalam beberapa tahun terakhir, pemilihan font untuk situs web telah menghasilkan lompatan yang signifikan dengan pengenalan @font-face.

Dengan metode ini, file font dapat disertakan bersama dengan sumber daya lainnya, seperti gambar, yang harus digunakan situs web agar ditampilkan dengan benar. Alih-alih mendapatkan font dari komputer pengguna, sebuah situs web malah bisa menggunakan file font yang disertakan sehingga memungkinkan akses ke beragam pilihan font yang digunakan dalam desain itu!

Sementara memiliki akses ke lebih banyak font sangat bagus, bagaimana Anda memanfaatkannya masih penting. Sebenarnya, dengan sejumlah besar kemungkinan yang tersedia bagi para desainer web saat ini, keterampilan tipografi yang kuat lebih penting daripada sebelumnya.

Selain itu, memiliki sejumlah besar font yang bisa dipilih sangat mengagumkan, namun Anda tetap harus membuat pilihan yang tepat untuk proyek khusus Anda. Memahami jenis font (serif, sans-serif, slab-serif, display, dll) yang tepat adalah kuncinya.

Tipografi bukan hanya tentang pemilihan huruf, tapi juga tentang ukuran dan warna yang Anda gunakan untuk pesan serta bobot huruf, jarak di sekitar huruf dan kata-kata itu, dan banyak lagi. Yang terpenting, ini tentang konten teks yang mudah dan menyenangkan untuk dibaca. Inilah contoh yang bagus: