Cara Memblokir Aplikasi dengan Firewall Windows 10

Cara Memblokir  Aplikasi dengan Firewall Windows 10

Mungkin belum banyak yang tahu bahwa Anda bisa memblokir aplikasi di Windows 10 agar tidak bisa terkoneksi dengan internet di computer cukup dengan fitur bawaan Windows Firewall. Hal ini terkadang diperlukan untuk mencegah aplikasi melakukan auto update. Untuk itu Anda bisa memblokirnya dengan mengikuti langkah-langkah berikut ini.

1. Pertama buka menu Settings (Windows+i) > pilih Update & Security.

2. Selanjutnya klik tab Windows Security >lalu klik pada menu Firewall & network protection.

3. Kemudian pilih pada menu settingan Firewall yang bernama Allow an app through firewall.

4. Selanjutnya pilih aplikasi yang akan diblokir, kemudian klik tombol Change settings.

Untuk memblokir aplikasi supaya tidak bisa terkoneksi internet caranya dengan hilangkan tanda centang pada pilihan koneksi Private dan Public. Anda bisa menghilangkan centang pada keduanya atau pilih salah satu saja.

Misalnya Anda ingin memblokir aplikasi pada koneksi public saja dan mengizinkan akses pada koneksi private, ataupun sebaliknya. Koneksi public adalah koneksi internet yang biasa Anda dapatkan dari Wifi di kafe atau tempat umum lainnya. Untuk koneksi private adalah koneksi yang digunakan di rumah/Kantor Anda sendiri.

5. Klik tombol OK lalu tutup semua jendela pengaturan untuk mengakhirinya.

Dengan melakukan pemblokiran aplikasi dengan firewall Windows 10 maka aplikasi tersebut tidak bisa lagi terhubung ke internet di komputer Anda. Untuk menghapus blokirannya cukup dengan mengembalikan centang pada koneksi baik private ataupun public seperti langkah di atas.

Itu tadi tutorial cara memblokir aplikasi dengan firewall di Windows 10, semoga bermanfaat.

Read More

Cara Setting Firewall Windows 10

Cara Setting Firewall Windows 10

Firewall merupakan program yang memiliki fungsi untuk memantau dan menyaring trafik masuk dan keluar untuk mencegah akses yang tidak diizinkan dalam suatu jaringan di system operasi Windows. Firewall memiliki peranan yang sangat penting untuk menjaga keamanan pada computer Anda. Firewall adalah fitur bawaan yang sudah melekat di operasi Windows ketika Anda mengintall system operasi Windows 10.

Firewal memiliki beberapa fungsi antara lain:

Sebagai Keamanan Jaringan Komputer

Semua lalu lintas jaringan yang masuk dan keluar harus melalui Firewall sebagai POS keamanan yang bertugas untuk melakukan pemeriksaan. Maka dari itu Firewall memiliki peranan penting dalam menjaga keamanan suatu jaringan computer.

Mencegah Kebocoran Informasi

Untuk fungsi ini, banyak firewall yang terinstall untuk mengamankan Protokol Transfer File (FTP), sehingga setiap lalu lintas data yang terjadi atas kendali Firewall. Hal ini berguna untuk melakukan pencegahan kepada pengguna untuk masuk jaringan dan mengambil data-data penting yang tersimpan di Komputer.

Menjaga Kerahasiaan Data

Komputer yang Anda gunakan tentu memiliki beberapa data yang tersimpan didalamnya bukan? Dan diantara data yang tersimpan tersebut pasti ada data yang sifatnya penting, apalgi kalua computer digunakan perusahaan keuangan. Tentunya data yang tersimpan sangatlah penting terkait rahasia perusahaan, dan akan berdampak negative jika data tersebut diketahui oleh pihak lain. Hal semacam inilah firewall dalam melakukan pencegahan agar data tidak bocor dan tidak dimodifikasi.

Baca Juga: Cara Membuka Windows Setting di Windows 10

Cara Mengaktifkan Firewall di Windows 10

Buka Windows Setting dengan shortcut tombol Windows+I pada keyboard

Selanjutnya pilih menu Update & Security pada kotak dialog Setting.

Kemudian pilih tab Windows Security, selanjutnya pilih menu Firewall & network protection.

 

Nah, disini ada tiga menu pilihan yaitu Domain network, Private network, dan Public network. Klik pada tombol Turn on untuk mengaktifkannya pada masing-masing pilihan tersebut.

Selanjutnya dibagian bawah ada 5 Pilihan Settingan yang bisa Anda gunakan dengan masing-masing kegunaan sebagai berikut:

Allow an app trhough firewall: digunakan untuk memblokir aplikasi yang terintall di Windows 10.

Network and Internet troubleshooter: digunakan untuk menjalankan troubleshoot ketika terjadi masalah pada firewall di Windows 10.

Firewall notification settings: digunakan untuk mengatur notifikasi atau pemberitahuan dari program firewall.

Advanced settings: Digunakan untuk setting firewall tingkat lanjut, misalnya pengaturan inbound dan outbond rules pada firewall, melakukan monitoring, dan pengaturan lainnya.

Restore firewalls to default: Digunakan untuk mereset semua pengaturan yang sudah dilakukan pada firewall kembali seperti semula.

Read More

Cara Setting Tampilan Windows 10

Agar tampilan Desktop Windows 10 yang Anda gunakan tidak membosankan, Anda perlu melakukan penyesuain settingan tampilan Windows 10 agar menjadi keren dan tidak membosankan. Jika tampilan desktop Widows Anda menjadi keren, maka Anda bekerja akan lebih semangat.

 

Untuk membuat tampilan desktop windows 10 Anda lebih keren, Anda perlu melakukan settingan sederhana seperti mengganti wallpaper, tema, dan pengaturan lainnya. Untuk membantu Anda dalam mengubah atau melakukan penyesuain tampilan agar menjadi keren bisa mengikuti langka-langkah sebagai berikut.

 

1. Mengganti Wallpaper

Wallpaper adalah bagian dari desktop yang pertama kali Anda lihat ketika menyalakan computer atau Laptop. Dengan mengganti wallpaper akan membuat nuansa yang lebih keren dan indah pada Windows 10, misalnya wallpaper dengan tema pemandangan. Untuk mengganti wallpaper Anda bisa mengikuti langkah berikut ini.

Baca juga: 5 Website Penyedia Wallpaper Keren

Cara Mengganti Wallpaper Windows 10

Klik kanan diarea kosong Desktop lalu pilih perintah Personalize.

 

Selanjutnya di kotak dialog setting pilih tab Background, selanjutnya dibagian pilihan Background pilih Picture dan dibagian Choose your picture klik tombol Browse. Pada kotak dialog yang muncul pili gambar yang sudah disiapkan, setelah itu klik tombol Choose picture.

Nah sekarang wallpaper desktop Anda sudah berhasil diganti dengan gambar yang Anda sukai.

2. Mengganti Aksen Warna

Untuk mendapatkan tampilan yang bagus dan keren, maka Anda bisa memadu padankan warna sehingga terlihat bagus dan sesuai dengan selera. Untuk itu Anda bisa mengganti warna aksen yang saat ini digunakan dibeberapa bagian dari Windows seperti Start menu, taskbar, Title bars, window borders, dan action center.

Langkah-langkah Mengganti Aksen Warna Windows 10

Klik kanan diarea kosong Desktop lalu pilih perintah Personalize.

Selanjutnya di kotak dialog setting pilih tab Colors.

 

Selanjutnya pilih warna yang diinginkan, jikai Anda ingin membuat racikan warna tersendiri bisa menggunakan Custom Color dengan klik tombol +. Selanjutnya jika sudah, jangan lupa beri centang pada bagian Start, taskbar, and action center dan Title bars and window borders. Untuk hasilnya bisa dilihap pada gambar di bawah ini.

3. Mengaktikan Efek Transparan

Seperti windows 7 sebelumnya, Windows 10 juga memeliki pengaturan efek transparan. Walapun dengan mengaktifkan efek ini akan sedikit memeratkan kinerja dari system. Untuk mengaktifkan efek transparan pada Windows 10 bisa mengikuti langkah berikut ini.

Klik kanan diarea kosong Desktop lalu pilih perintah Personalize.

 

Selanjutnya di kotak dialog setting pilih tab Colors, lalu aktifkan dibagian pilihan Transparency effects.

Dengan mengaktifkan efek transparan di Windows 10 akan memberikan efek tembus pandang pada tampilan dari kotak dialog atau jendela aplikasi, taskbar,dan start menu. Sayangnya di windows 10 tidak ada tingkat pengaturan transparasi tersebut.

 

4. Menggunakan Ikon dan Taskbar Kecil

Secara standar, ikon dan taskdar yang digunakan Windows 10 menggunakan ukuran yang besar. Sehingga tampilan ikon di desktop terlihat kurang proporsional. Dengan menggunakan ikon yang lebih kecil akan membuat tampilan layar terasa lebih lega dan rapi. Untuk melakukan hal tersebut di atas ikuti langkah di bawah ini.

Baca Juga: Cara Mengganti Icon Recycle Bin Windows 10

Klik kanan pada desktop yang kosong, selanjunya pili View > Small icons.

Selanjutnya klik kanan pada area kosong Taskbar, lalu pilih Taskbar Setting.

Selanjutnya aktifkan pilihan Use small taskbar buttons.

Dengan mengaktifkan pilihan ini, maka tanggal yang bisanya terlihat dibawah jam akan menjadi hilang.

  

5. Mengaktifkan Dark Mode

Akhir-akhir ini menggunakan tema Dark Mode menjadi hal yang popular dikalangan pengguna Komputer. Dengan menggunakan tema yang bernuarsa gelap ini akan membuat penglihatan tidak mudah lelah. Selain itu tema Dark Mode ini akan memperlihatkan tampilan Desktop Windows 10 menjadi jauh lebih keren.

Di Windows 10 ini sudah ada thema dark mode bawaan yang tinggal Anda aktifkan dengan cara sebagai berikut.

 

Klik kanan diarea kosong Desktop lalu pilih perintah Personalize.

 

Selanjutnya di kotak dialog setting pilih tab Colors, lalu pilih Dark dibagian pilihan Choose your color.

Read More

7 Cara Membuka Setting Windows 10

Secara default Windows telah memiliki settingan standard, namun apabila Anda ingin menyesuaikan settingan yang ada di Windows 10 bisa dilakuan. Jika di versi Windows XP dan Windows 7 sebelumnya menu setting ini belum ada, untuk melakukan pengaturan Anda menggunakan menu Control Panel.

Control Panel di Windows 10 juga tetap dipertahankan dan bisa digunakan, akan tetapi untuk melakukan pengaturan banyak hal akan sering menggunakan Windows Setting.

Untuk membuka windows setting bisa dilakukan dengan banyak cara diantaranya dengan shortcut  keyboard, melalui Start Menu, Windows Search, Comanpromt, dan melalui tombol notifikasi di taskbar. Berikut ini beberapa cara untuk membuka Windows Setting di Windows 10.

1. Membuka Windows Setting Melalui Start Menu

Untuk cara yang pertama ini, Anda cukup klik Start menu di layar desktop Anda, kemudian klik Ikon Setting seperti yang terlihat pada gambar di bawah ini.

2. Membuka Windows Setting Melalui Shortcut Keyboard

Nah, di cara yang kedua ini merupakan langkah yang paling cepat untuk membuka Setting di Windows 10 karena cukup menekan kombinasi tombol Windows+I pada Keyboard.

3. Membuka Windows Setting Melalui RUN Command

Cara membuka Setting Windows 10 yang ketiga adalah dengan menggunakan RUN command dengan cara menekan tombol Windows+R pada Keyboard kemudian pada jendela RUN yang muncul ketikkan perintah ms-settings:

4. Membuka Windows Setting Context Menu Desktop

Apabila Anda sedang berada di desktop windows, Anda bisa mengakses Windows Setting melalui context menu. Context Menu adalah menu yang muncul ketika Anda melakukan klik kanan di area tertentu.

Untuk membukanya cukup klik kanan di area kosong desktop, kemudian pilih salah satu perintah Display Setting atau Personalize.

Setelah itu di kotak dialog yang muncul berikutnya klik menu Home.

5. Membuka Windows Setting Melalui Taskbar

Windows Setting bisa juga di buka melalui dari menu context menu di Taskbar. Caranya dengan klik kanan di area taskbar yang kosong, selanjutnya pada menu yang muncul pilih perintah Taskbar Setting.

Setelah itu di kotak dialog yang muncul berikutnya klik menu Home.

6. Membuka Windows Setting Melalui Windows Search

Selain itu juga Anda bisa membuka Windows Setting dengan mengetikkan kata Setting di Windows Seacr yang ada di taskbar, maka secara otomatis pencarian akan memunculkan perintah setting. Setelah itu klik perintah setting yang muncul tersebut.

7. Membuka Windows Setting Melalui Natifikasi

Untuk cara yang terakhir untuk membuka Windows Setting bisa dilakukan dengan cara klik tombol Notifikasi yang berada di pojok kanan bawah dekat dengan Jam dan Tanggal, kemudian pili menu All Setting.

Itu tadi 7 Cara Membuka Windows Setting pada sistem operasi Windows 10. Semoga tutorial kali ini bermanfaat untuk Anda.

Read More

Belajar dengan Prototipe Sederhana Part3

Panduan Cerdas

Panduan Cerdas awalnya diperkenalkan di Sketch dan kemudian diadopsi di Photoshop setelah fitur menjadi hit. Adobe XD menjelaskannya di bagian bantuan mereka: “Saat Anda memindahkan objek atau artboard, gunakan Panduan Cerdas untuk menyelaraskan objek atau artboard yang dipilih dengan objek atau artboards lain. Penjajaran didasarkan pada geometri objek dan artboards. Panduan muncul saat objek mendekati tepi atau titik tengah dari objek lain. "

 

Mari saya mulai dengan mengatakan bahwa objek adalah istilah umum yang digunakan untuk menggambarkan lapisan bentuk, lapisan teks, grup atau bitmap pada kanvas. Pada dasarnya, semua jenis lapisan atau grup adalah objek.

 

Panduan adalah isyarat visual yang mengilustrasikan bagaimana benda-benda sejajar satu sama lain - mereka dapat menampilkan jarak antara dua lapisan, atau menunjukkan apakah suatu lapisan telah terpaku pada batas-batas benda lain atau tepi artboard. Adobe XD akan mencoba mengantisipasi di mana Anda ingin memindahkan layer, dan secara otomatis beralih ke lokasi itu ketika Anda mendekatinya, sambil menunjukkan seberapa jauh Anda telah meninggalkannya sampai Anda mencapainya. Anda dapat menentukan jarak secara manual dengan memilih layer pertama, menahan Option / Alt, dan mengarahkan kursor ke layer kedua.

 

Perataan Manual

Mari kita mulai dengan meratakan layer secara manual, jadi kami memahami perbedaannya. Beberapa saat yang lalu kami mengelompokkan dua lapisan teks menjadi satu - pilih keduanya sekali lagi (tahan Shift sembari mengklik) dan klik tombol Align Center (Secara horizontal) di Inspektur, atau gunakan pintasan: Cmd + Control + C (Shift + C di Windows).

2-9. Lapisan yang berpusat secara manual

Panduan Cerdas Saat Memindahkan Lapisan

Sekarang pilih grup yang sebenarnya. Anda dapat menggunakan alat Pilih (pintasan keyboard: V) dan memilih grup dengan mengkliknya, atau menggunakan tombol Esc untuk melintasi wadah induk, yang merupakan grup. Pindahkan sampai dua hal terjadi:

1.    Muncul 28px di bawah formulir

2.    Ini terkunci ke tengah-mati artboard secara horizontal

Anda akan tahu bahwa Anda telah melakukan ini dengan benar karena garis-garis berwarna dari panduan cerdas akan menggambarkan apa yang telah diambil oleh objek (yang akan menjadi pusat deadboard artboard, seperti yang ditunjukkan oleh garis vertikal yang muncul). Anda juga akan melihat jarak relatif antara grup fungsi pencarian dan grup teks sambutan (seperti yang ditunjukkan oleh nilai numerik).

2-10. Menyelaraskan dengan panduan cerdas

Panduan Cerdas Dengan Opsi / Alt-Tahan

Pilih lapisan paling bawah dari grup ini, tahan Option (Alt di Windows), lalu arahkan kursor ke atas lapisan paling atas. Ini adalah pendekatan manual (juga dikenal sebagai Option / Alt-hold) untuk mengukur jarak relatif antara dua lapisan. Anda dapat memindahkan layer seperti biasa sambil menahan opsi, jadi gunakan tombol panah ↑ → ↓ ← sampai jaraknya 5px

2-11. Panduan dengan opsi / alt-tahan

Mari kita gunakan apa yang telah kita pelajari untuk menambahkan beberapa elemen lagi. Sejauh ini kami telah melihat lapisan bentuk pertama, lapisan teks, pengelompokan lapisan, penyelarasan, panduan cerdas, dan beberapa dasar lainnya. Mari kita rekap sebagian dari itu dan tutup layar ini, mulai dengan komponen navigasi bawah dengan empat tautan.

Buat persegi panjang dengan panjang 345 x 44px (44px, lebar dan tinggi, adalah ukuran minimum untuk target ketukan - ketuk target yang lebih kecil dari ini sangat sulit bagi pengguna untuk mengetuk). Gunakan Option / Alt-Hold untuk memastikan bahwa persegi panjang memiliki margin 15px di tiga sisi.

2-12. Merekam panduan cerdas

 Sekarang kita memiliki bentuk dasar komponen navbar.

Gambarlah persegi panjang lain dengan lebar 25% dari total lebar navbar (karena kita harus membuat empat tautan di dalam navbar, di mana setiap tautan adalah 25% dari total lebar). Mulai gambar Anda dari sudut kiri atas navbar's rectangle. Anda akan melihat panduan pintar lagi, menunjukkan bahwa gambar Anda akan patah dari sudut lapisan itu, yang merupakan apa yang kita inginkan.

2-13. Menggambar dengan snap

Dengan alat Ellipse (E), gambarlah lingkaran 14 x 14px (tahan Shift untuk mempertahankan rasio aspek) dan kelompokkan bersama-sama tautan dan lingkaran navbar, yang menggantikan ikon navbar untuk saat ini. Gandakan grup ini tiga kali dan seret masing-masing secara horizontal untuk mendistribusikannya secara merata di dalam navbar. Terakhir, kelompokkan seluruh komponen.

2-14. Membentuk komponen

Mengganti Nama Layers

Kami sekarang memiliki lo-f mockup dari navbar, tetapi kami juga memiliki banyak objek yang diberi nama "persegi panjang" dan "grup", yang membingungkan jika Anda mencoba menemukan lapisan dalam daftar lapisan.

Pada saat ini tidak ada jalan pintas untuk mengganti nama layer, jadi Anda harus mengklik dua kali pada nama layer di daftar layer, dan ganti nama itu dengan mengetikkan nama baru untuk layer tersebut. Mengganti nama layer membantu Anda menjaga kebersihan dalam desain Anda, dan membuat daftar layer terlihat jauh lebih membingungkan.

2-15. Mengganti nama layer

Tutup layar ini dengan membuat tiga layer lagi:

1. Sebuah persegi panjang, berganti nama menjadi "Logo BG"

2. Layer teks yang disebut "DISHY"

3. Grup yang berisi dua layer ini, diubah namanya menjadi "Logo"

Pusatkan grup secara horizontal / vertikal di ruang atas.

2-16. Mengisi layar pertama

Fast-forward

Maju cepat 30 menit dan kami memiliki layar tambahan. Ketika pengguna telah mencari jenis masakan menggunakan formulir di layar pembuka, mereka kemudian diundang untuk mengatur lokasi mereka sehingga aplikasi dapat mengembalikan hasil yang relevan dengan lokasi pengguna.

Dalam bab berikutnya kami akan membuat prototipe / mendemonstrasikan pengguna ini mengalir, tetapi untuk sekarang mari kita coba mempercantik layar ini sambil mempelajari tentang alat desain Adobe XD lainnya. Dari arsip, ambil armada dukungan bernama C2.xd untuk melanjutkan.

 

2-17. Maju cepat

 Ulangi Grid

Ulangi kisi memungkinkan Anda untuk mengulangi objek secara horizontal dan / atau vertikal - ini adalah cara yang jauh lebih cepat untuk menduplikasi dan mendistribusikan objek sehingga Anda tidak perlu menggandakan dan memposisikannya secara manual. Pilih grup "Lokasi Terbaru" dari papan seni "Tetapkan Lokasi" yang saya tambahkan ke fle dukungan, dan tekan tombol "Ulangi Kotak" di inspektur, atau gunakan pintasan keyboard Cmd + R (Ctrl + R di Windows) .

2-18. Buat grid ulangi

Anda akan melihat bahwa komponen ini sekarang memiliki dua pegangan yang dapat disentuh. Tarik yang tepat untuk mengulangi komponen secara horizontal, dan yang bawah untuk mengulanginya secara vertikal. Dalam hal ini, kami ingin mengulanginya secara vertikal, jadi maju dan lakukan itu. Perhatikan bahwa tidak masalah jika kontennya meluap di atas artboard; pada kenyataannya, pada bab berikutnya kita akan mempelajari semua tentang prototipe yang dapat digulir.

2-19. Komponen berulang

Jika Anda menggunakan kursor untuk mengarahkan kursor ke ruang di antara objek yang diulang, Anda akan dapat mengklik dan menyeret ruang itu untuk menyesuaikannya. Sesuaikan jarak ke 20px (Anda akan melihat penyesuaian jarak berlaku untuk semua objek yang diulang).

2-20. Menyesuaikan ruang antara objek yang diulang

Read More

Belajar dengan Prototipe Sederhana Part2

 Menentukan Ukuran Font

Saat merancang layar sederhana, Anda harus sangat memperhatikan ruang. Mengapa? Karena Anda dapat secara besar-besaran melebih-lebihkan atau meremehkan efek menyisipkan gambar, menentukan font, dan membuat gaya di kemudian hari (ini adalah tahap yang kami sebut prototyping high-fidelity). Akan sangat menghancurkan untuk menyadari bahwa desain yang indah yang telah kami tiru, yang menawarkan pengalaman pengguna yang luar biasa, tidak terlihat atau merespons dengan sangat baik begitu visual telah ditambahkan.

Sementara low-fidelity mockup dianggap dasar / minimal, kita perlu agak realistis dengan konsep ruang. Ketika datang ke menggambar bentuk yang saya maksud nilai lebar dan tinggi, tetapi ketika datang ke teks yang saya maksud adalah ukuran font. Jika Anda pikir Anda akan menggunakan font sans-serif sederhana dalam desain akhir Anda, maka tetap menggunakan font sistem sans-serif seperti Helvetica di mockup low-f Anda.

Membuat Layers Teks

Mulailah langkah berikutnya dengan mengetuk T untuk Teks pada keyboard dan mengklik kanvas tempat Anda ingin teks tersebut muncul. Kami ingin lapisan teks ini menjadi cairan (yaitu, untuk mengubah ukuran secara otomatis tergantung pada nilai teks), jadi tidak perlu menggambar lapisan ini. Lapisan teks fluida memiliki atribut lebar dan tinggi dinonaktifkan di inspektur. Anda harus membungkus konten secara manual dengan menambahkan jeda baris menggunakan Return (Enter in Windows).

Adapun nilai teks, ketik "Makanan Laut", karena ini adalah aplikasi makanan.

Terus mengetuk Esc sampai Anda kembali ke alat bergerak, dan seret-luruskan layer teks ke arah kiri bidang input.

Secara default, font harus Helvetica Neue, dan beratnya harus Reguler, tetapi Anda harus mengubah ukuran font menjadi 14px menggunakan inspektur. Saat ini, warnanya tidak masalah.

Helvetica Neue adalah font sistem yang akan sangat mirip dengan font sans-serif yang akan kita pilih nanti; 14px adalah ukuran font yang tepat mengingat penggunaannya. Ingat, ruang dan ukuran adalah fokus Anda di sini, bukan warna, font, dan estetika lainnya.

2-7. Lapisan teks cair

Sekarang mari kita tambahkan beberapa teks yang menjelaskan apa yang dilakukan aplikasi, karena ini adalah layar pembuka. Tekan T untuk Teks lagi, tapi kali ini gambarkan bidang teks menggunakan mouse sehingga kita dapat mengedit atribut lebar dan tinggi. Kami akan memperkirakan lebarnya pada 190px dan membiarkan teks berjalan selama dua baris. Buat beberapa teks boneka lorem ipsum untuk saat ini. Teks akan secara otomatis membungkus ke baris kedua karena kita menggambar lapisan teks ini dan membelokkan lebar, sebagai lawan membuat lapisan fluida.

Untuk saat ini Anda dapat menyisipkan lapisan teks ini di mana saja di sepertiga bawah layar, tetapi pastikan ukuran fontnya 24px - ini adalah judul utama layar kami, jadi itu perlu menonjol.

Juga, tekan tombol rata tengah di inspektur.

2-8. Memperbaiki layer teks

Layer Duplikat

Anda dapat menduplikasi layer dengan pintasan keyboard Cmd + D (Ctrl + D di Windows), tetapi juga dengan menahan Option (Alt di Windows) dan menyeret layer, secara efektif membuat salinan. Pilih salah satu metode dan duplikat layer teks heading utama, lalu ubah ukuran font layer teks baru ini menjadi 14px - ini akan digunakan sebagai teks sekunder.

Gunakan Inspektur untuk Mengatur Ketinggian yang Cocok

Ingat, jika Anda menggambar lapisan teks, atribut lebar atau tinggi tidak akan cair, jadi pastikan layer teks Anda memiliki ketinggian yang sesuai dengan menggunakan inspektur.

Group Layer

Lapisan pengelompokan memungkinkan kita untuk menggabungkan lapisan sehingga mereka dapat dipindahkan bergantung satu sama lain (atau hanya karena lebih bersih / rapi untuk menggabungkan lapisan terkait). Untuk Menggunakan Inspektur untuk Mengatur Ketinggian yang Cocok Ingat, jika Anda menggambar lapisan teks, atribut lebar atau tinggi tidak akan cair, jadi pastikan layer teks Anda memiliki ketinggian yang sesuai dengan menggunakan inspektur. Mempelajari Dasar-Dasar dengan Prototyping Low-Fidelity 24contoh, jika kita ingin memindahkan input bidang, termasuk lapisan teks dan tombol kirim, kita dapat memilih semua lapisan sekaligus (klik masing-masing sambil menahan Shift) dan gunakan pintasan keyboard Cmd + G (Ctrl + G di Windows) untuk mengelompokkannya bersama.

Anda dapat memisahkan grup lapisan dengan memilih grup dan menekan Cmd + Shift + G (Ctrl + Shift + G di Windows).

Saat kami di sini, ulangi langkah-langkah ini dengan lapisan teks yang menjelaskan apa yang dilakukan aplikasi. Pengelompokan harus menjadi kebiasaan, karena itu adalah cara yang rapi untuk menjaga desain Anda teratur saat berkembang.

Klik melalui

Klik dua kali atau Cmd + klik untuk memilih lapisan di dalam grup - ini dikenal sebagai "klik-tayang".

Read More

Belajar dengan Prototipe Sederhana Part1

Pada tutorial mengenal interface Adobe XD, dan bahkan melihat ke shortcut keyboard dari alat yang paling umum. Ini harus memberi kita dasar yang baik untuk bekerja ketika kita mengeksplorasi lebih banyak Adobe XD, kemudian melanjutkan untuk merancang maket aplikasi sederhana.

Layar Selamat Datang

Ketika Anda pertama kali membuka Adobe XD, seperti pada sebagian besar aplikasi desain, Anda akan melihat layar selamat datang yang meminta Anda untuk memilih kit UI yang sudah jadi, atau memulai desain baru dari awal (dengan memilih artboard). Anda juga dapat memilih untuk membuka kembali file yang ada.

UI Kits

Seperti yang disebutkan dalam tutorial sebelumnya, Adobe XD menawarkan kit UI untuk Apple iOS, Google Material, dan Microsoft Windows - kit ini berisi elemen UI asli yang ditemukan dalam sistem operasi, dan Anda dapat menggunakannya untuk merancang maket yang lebih cepat daripada membuat ulang elemen ini sendiri. Jika Anda membuat aplikasi iOS, misalnya, Anda dapat menggunakan kit Apple iOS untuk mengekstrak komponen desain asli, seperti bilah status atau tombol sakelar.

2-1. Adobe XD UI kits

Memilih Artboard

Selama buku ini kita akan merancang aplikasi iOS pemesanan makanan menggunakan iPhone 7 ukuran standar sebagai basis. Jadi pilih iPhone 6/7 dari daftar artboards, dan mari mulai prototipe.

2-2. Memilih artboard

Kembali ke Proyek yang Ada

Jika Anda sudah memiliki desain yang sedang Anda kerjakan, Anda dapat menekan Cmd + O (Ctrl + O di Windows) untuk menemukan dan membukanya. Atau cukup pilih dari daftar Recent Files, jika Anda belum lama membukanya.

2-3. Membuka file

Low-Fidelity Prototype

Dasar Prototipe Sederhana adalah tentang mengkonseptualisasikan gagasan dalam bentuk paling dasar tanpa tipografi, warna, atau estetika apa pun. Mengapa membuang waktu memikirkan visual ketika Anda belum memantapkan tata letak dan pengalaman pengguna?

Tujuan kami saat ini adalah menggunakan Adobe XD untuk membuat ide yang mungkin sudah Anda jelajahi dengan pena dan kertas kuno yang bagus. Setelah itu, ketika kami memiliki mockup sederhana di Adobe XD, kami akan menggunakan alat prototyping untuk menunjukkan aliran pengguna (bagaimana layar terhubung ke layar lain), dan kemudian meminta umpan balik.

Selama buku ini, mockup sederhana ini akan berkembang menjadi prototipe yang berfungsi dan dinamis, kemudian menjadi prototipe high-fdelity dengan warna, ikon, font, dll.

Mockup low-fidelity kami akan sangat didasarkan pada kit UI resmi Adobe XD, Dishy, yang dapat Anda unduh di sini jika Anda ingin melihatnya sekarang.

 

Memulai dengan Shape Layer

Mari kita mulai dengan layar selamat datang aplikasi kami. Ini akan terdiri dari logo, kalimat pengantar, dan beberapa komponen yang dapat ditindaklanjuti seperti bilah navigasi dan bilah pencarian.

 

Kami akan mulai dengan menggambar beberapa persegi panjang yang akan membatasi struktur dasar layar kami, di mana fungsi pencarian akan menjadi fokus. Tekan R untuk memilih alat bentuk Rectangle.

 

Sekarang, dengan menggunakan mouse, gambar persegi panjang hingga mencapai lebar penuh artboard (375px), dan tinggi 445px. Anda dapat memeriksa nilai-nilai ini menggunakan inspektur di sisi kanan.

2-4. Membuat persegi panjang

Snaping Layer ke Poin Tertentu

Jika Anda mulai dengan mengarahkan mouse ke sudut kiri atas artboard, mouse akan secara otomatis beralih ke lokasi tertentu, dan ketika Anda menyeret ke arah tepi kanvas, tepi persegi panjang akan membentur juga di sana (dan lapisan lainnya, jika ada tersedia). Dengan menjentikkan, Adobe XD dengan asumsi Anda akan ingin menyelaraskan lapisan dari (atau ke) lokasi tertentu itu.

Merancang Bersama Inspektur

Jika Anda merasa sulit untuk membuat ketinggian yang tepat 445px (ini bisa sulit dengan beberapa tikus), gunakan inspektur untuk menyatakan ketinggian secara manual dengan memasukkan nilai yang tepat ke dalam bidang (H bidang dalam kasus ini). Anda seharusnya tidak menemukan masalah dengan lebar feld (W) karena Adobe XD akan secara otomatis menjentikkan bentuk ke tepi artboard.

Menggunakan Tombol Panah

Anda juga dapat menggunakan tombol panah untuk mengubah nilai - tombol ↑ akan meningkatkan nilainya sebesar 1, dan tombol ↓ akan menguranginya sebesar 1. Jika Anda menahan Shift saat menggunakan tombol panah, nilainya akan bertambah atau berkurang sebesar 10 bukannya 1.

Sekarang mari kita buat dua persegi panjang lagi. Satu akan menyerupai bidang pencarian dan yang lainnya tombol kirim. Mari kita mulai dengan tombol kirim.

Buat persegi panjang lain, tapi kali ini sebagai persegi 73 x 73px - tahan Shift sambil menggambar bentuk untuk mempertahankan aspek rasio.

Seret sehingga terkunci ke sudut kanan bawah persegi panjang lainnya, tetapi pertama-tama, ketuk Esc untuk tidak fokus dari lapisan dan kemudian Esc sekali lagi untuk kembali ke alat pindahkan.

2-5. Lebih banyak persegi panjang

Ulangi langkah ini dengan persegi panjang lain - 304 x 73px - dan seret ke kiri bawah persegi panjang asli kami yang lebih besar.

2-6. Bahkan lebih persegi panjang

 

Layer Teks

Saat ini tidak jelas apa yang kita miliki di sini. Kami tahu bahwa ini adalah fungsi pencarian, tetapi siapa pun yang menguji prototipe kami tidak akan menyadarinya, jadi penting untuk menambahkan konteks ke mockup low-fidelity. Kami pergi untuk minimalis, tidak kabur. Dengan mengingat hal itu, mari kita tambahkan beberapa teks ke bidang input.

Read More