Merancang Layer Killer Web UI Dengan Gratis - Ultimate Guide

Bidang desain web telah mengambil napas sendiri hanya dalam beberapa tahun singkat. Ada lebih banyak desainer aktif di seluruh dunia sekarang daripada sebelumnya, semua berkolaborasi pada ide-ide proyek inovatif. Dan konsep di balik banyak tren ini telah dikembangkan melalui desainer grafis profesional.

Ini bisa memakan waktu berbulan-bulan atau bahkan bertahun-tahun sebelum Anda sepenuhnya memahami teknis membangun antarmuka pengguna. Anda perlu mempertimbangkan ukuran dan penempatan elemen halaman, juga keterbacaan teks dan label. Dengan sedikit waktu luang, Anda dapat menggali pendekatan minimalis untuk membangun situs web dengan lebih sedikit dan mengurangi kebingungan. Dan bahkan kemudian, ada lusinan teknik desain lain untuk dipertimbangkan juga.

Untuk panduan ini saya telah memasangkan beberapa teknik desain antarmuka pengguna modern dengan gratis, Anda dapat mengunduh dan bermain dengan. Ini adalah harapan saya bahwa ini akan menawarkan beberapa motivasi kepada mereka yang tertarik dalam karier dalam membangun desain grafis / web. Bahkan perancang web profesional mungkin menemukan beberapa tren ini bermanfaat untuk proyek Anda berikutnya.

Berlatih dengan Templat Lengkap

Ketika Anda memiliki keterampilan untuk merancang tata letak Anda sendiri dari awal, tidak perlu memulai dengan template. Pemula, di sisi lain, mungkin merasa lebih nyaman mulai dari desain penuh dan mengerjakan detail yang lebih halus.

Ada beberapa unduhan gratis yang luar biasa dari templat situs web PSD lengkap untuk portofolio, beranda, blog, dan banyak kategori lainnya. Ini adalah desain yang sempurna untuk memulai dengan membiasakan diri dengan “umum” tata letak web. Setiap situs web akan memiliki kebutuhan berbeda untuk elemen halaman dan Anda harus menentukan item mana yang penting.

Berikut adalah contoh PSD yang disebut "AppCivilization", yang dirancang oleh Martin Fabricius. Tata letak ditampilkan untuk studio kreatif yang merancang aplikasi seluler dan mungkin situs web. Ke bagian bawah Anda akan menemukan panel kecil ikon aplikasi yang ditampilkan dalam portofolio. Anda juga akan melihat seluruh desain dipecah secara horizontal menjadi tajuk, tayangan slide teratas, konten utama, dan catatan kaki yang lebih gelap.

Sumber Asli - Unduh

Merancang Halaman Arahan

Mari kita lihat freebie lain yang juga dirancang oleh Martin. Contoh berikut ini adalah halaman arahan yang dapat Anda gunakan untuk menjual semua jenis produk. Biasanya ini adalah barang digital yang dapat diunduh oleh pengguna yaitu aplikasi, foto, ikon, templat, dll.

Sumber Asli - Unduh

Tetapi bagian terbaik dari desainnya adalah sangat fleksibel bagi pemula untuk bekerja. Header masih menggunakan navigasi atas kecil dengan gambar besar, tetapi tindakan pengguna yang diharapkan berbeda. Dia punya besar “Membelinya!” tombol yang menonjol tepat di atas flip. Pada halaman pendaratan produk ini akan menarik lebih banyak perhatian daripada tayangan slide jQuery.

Teknik UI hebat lainnya adalah tampilan fitur iPhone kecil di tengah jalan. Martin menyertakan foto pratinjau iPhone, tombol App Store, dan daftar kecil fitur-fitur utama. Ketika pengunjung mencari detail produk, Anda tidak dapat membuat hal-hal lebih sederhana daripada melalui daftar yang diformat.

Lebih banyak templat:

Berikut adalah beberapa templat PSD gratis yang kami rilis di pasaran:

• Templat PSD Situs Web Bisnis "BiZ"
• Templat PSD Situs Produk "ThinkJuice"
• Templat PSD Situs Bisnis Profesional
• Templat PSD Situs Portofolio "Polo360"

Anda mungkin juga tertarik dengan yang berikut ini:

• Templat situs web bisnis
• Tutorial halaman "Segera hadir" + templat

Navigasi Situs Utama

Menu dan tombol hanyalah alat untuk membangun elemen halaman yang jauh lebih besar. Tidak dapat disangkal bahwa navigasi utama situs web Anda memiliki tujuan yang sangat signifikan. Anda memerlukannya agar situs Anda mudah diakses dengan kemungkinan metode mundur untuk pengguna seluler.

Di bawah ini adalah bilah navigasi keren dengan efek tekstur jahitan. Gaya sorotan dapat ditampilkan sebagai kotak gelap atau sebagai ujung bawah yang menunjuk ke konten halaman. Gaya ini telah menonjol selama bertahun-tahun dan tampak hebat dalam pengaturan yang tepat.

Sumber Asli - Unduh

Freebie serupa lainnya adalah navigasi header bertekstur ini dirancang oleh Edi Gil. Saya sangat suka bagaimana navbar kedua ini mencakup daftar tautan dan beberapa tombol halaman tambahan. Anda akan ingin menawarkan tautan sekunder kepada pengunjung tempat mereka dapat menemukan profil Anda di Web.

Sumber Asli - Unduh

Gaya Menu Alternatif

Selain dari bilah navigasi horisontal khas ada gaya desain lain yang perlu dipertimbangkan. Tautan vertikal dapat dibagi menjadi beberapa sub-judul yang memberikan lebih banyak ruang untuk konten halaman.

Ambil contoh menu gratisan di bawah yang dirancang oleh situs web Icojam.

Setiap heading dibuat untuk meluas dan runtuh berdasarkan objek yang dipilih. Selain itu desain memungkinkan penghitung angka kecil untuk duduk di sisi kanan setiap kategori. Ini akan lebih baik diisi sebagai navigasi blog untuk menghitung berapa banyak posting yang diajukan di bawah setiap topik.

Sumber Asli - Unduh

Kiat / Tutorial navigasi:

• 50+ Bersihkan Script Navigasi Berbasis Tab CSS
• Breadcrumb Navigation Praktik Terbaik & Contoh
• Membangun Navigasi Seluler dengan jQuery
• Coding Navigasi Breadcrumb Di CSS3
• Merancang Navigasi Dengan KURANG CSS

Formulir Web yang Lebih Bersih

Era modern Internet jauh dari tempat pertemuan yang statis. Pengguna secara konstan berbagi informasi dan berinteraksi satu sama lain setiap hari. Sebagian besar berbagi teks dan media ini dikelola melalui formulir web.

Kita harus melihat beberapa contoh bagaimana Anda bisa mendesain input dan tombol yang tampak bersih. Desain elemen Anda bisa sangat membantu mengundang pengunjung untuk benar-benar menggunakannya. Dan ini pada gilirannya membangun kredibilitas situs Anda dan mendapatkan lebih banyak tampilan halaman.

Bidang Login

Ada beberapa contoh bagus formulir masuk PSD untuk dilihat. Login gratis ini via WP Scientist memiliki semua elemen standar Anda. Dua kolom input untuk login / kata sandi, tombol kirim, dan kotak centang untuk mengelola cookie sesi.

Model desain ini sangat cocok jika Anda dapat menerapkan efek melalui jQuery. Kepala panah kanan atas membuat Anda berpikir tentang pengaturan jendela sembulan. Ini adalah teknik yang luar biasa untuk menghemat ruang di situs web Anda dengan menyembunyikan formulir sampai pengguna mengklik tautan pendaftaran.

Sumber Asli - Unduh

Formulir di bawah ini gratis untuk diunduh berkat desainernya Gil Huybrecht. Dia menggunakan pola yang sama dengan latar belakang kasar dan tekstur kertas. Yang terutama saya suka tentang desain Gil adalah elemen "kebesaran". Jauh lebih ramah mendarat di formulir login yang mengisi seluruh halaman. Pengguna dapat dengan mudah melihat apa yang mereka ketikkan dan ada lebih sedikit kekacauan.

Sumber Asli - Unduh

Jika Anda berpengalaman sebagai pengembang frontend menggunakan CSS3, maka sangat mudah untuk menerjemahkan grafik ini menjadi kode. Anda bahkan dapat menerapkan efek cahaya luar yang dipilih dan sudut bulat untuk bidang tombol dan input.

Kontak

Bentuk lain yang akan Anda temukan di hampir setiap situs web adalah formulir kontak. Ini biasanya akan mencakup bidang untuk nama pengirim, email, dan konten pesan.

Freebie di bawah ini adalah contoh luar biasa dari menggunakan tekstur dan ikon khusus.

Desainnya juga menggunakan teks placeholder bukannya label. Ini berarti bahwa ketika formulir pertama memuat setiap bidang diatur dengan nilai default (mis: nama Anda). Tetapi saat Anda mulai mengetik, placeholder akan kosong dan konten Anda malah ditampilkan. Semua browser yang memenuhi standar akan mendukung efek ini dan dapat menghemat ruang pada halaman Anda.

Sumber Asli - Unduh

Freebie luar biasa lainnya yang bisa Anda ambil adalah formulir kontak dengan tab yang dirancang oleh orang berbakat Jonno Riekwel. Desain ini jauh lebih sederhana dan tidak menampilkan label di atas setiap input. Ini adalah solusi yang bagus untuk bisnis besar atau pemula yang perlu mengirim pesan melalui berbagai departemen di perusahaan.

Sumber Asli - Unduh

Tutorial Formulir Kontak:

• Formulir Login / Registrasi: Ide dan Contoh Indah
• Buat Formulir Login Efek tumpukan kertas
• Buat Formulir Kontak HTML5 / CSS3 Berbasis Ajax

Pita dan Spanduk

Hanya 6 atau 7 tahun yang lalu sudut bulat mulai meningkat dalam tren desain populer. Sekarang kita telah datang lebih jauh dengan drop shadow dan pita sudut.

Sumber Asli - Unduh

Beberapa elemen ini dapat digunakan sebagai highlight desain, seperti penghitung komentar atau sebagai tanggal penerbitan untuk blog. Pita yang dijahit di atas sangat cocok untuk portofolio atau halaman proyek tempat Anda ingin menarik perhatian pengunjung. Anda juga dapat mencoba pita vertikal serupa di mana desain jatuh dari atas.

Efek halaman kecil ini sangat membantu meningkatkan tata letak Anda. Pengunjung memperhatikan dan akan menyukai basa-basi estetika ini. Tetapi perhatikan bahwa pita sudut kecil hanya bagian dari tren desain ini.

Sumber Asli - Unduh

Selain itu, desain spanduk lengkap menjadi sangat populer untuk membangun pengenalan merek. Anda dapat menggunakannya di logo, navigasi, beranda, atau bahkan pada posting blog unggulan. Implikasinya praktis tidak terbatas dengan kemampuan desain yang baik.

Membungkus Pojok

Efek spanduk pita lain yang sangat spesifik dilakukan dengan membungkus desain di sudut halaman Anda. Ini membangun ilusi halaman Anda menjadi 3-D dan pita melilit bagian atas situs web Anda.

Desain di bawah ini 100% gratis untuk diunduh dan dapat digunakan untuk ide-ide proyek Anda sendiri. Anda dapat melihat bagaimana ini akan menarik perhatian pengunjung dan mengapa tren ini telah berkembang menjadi kegilaan. Berhati-hatilah untuk tidak terlalu sering menggunakan spanduk. Secara massal, ini bisa sangat menjengkelkan seperti efek glossy / mirrored "web 2.0" yang lebih lama.

Sumber Asli - Unduh

Merancang dengan Tombol

Selain dari tautan, Anda akan mendapatkan interaksi terbanyak dari pengunjung dengan tombol. Item halaman ini dapat melakukan apa saja dengan bantuan panggilan jQuery dan Ajax kecuali Anda juga dapat menggunakan tombol untuk menautkan ke konten statis, seperti unduhan gratis misalnya!

Kit UI di bawah ini, dirancang oleh Matt Gentile memiliki lebih dari sekadar tombol. Perangkat PSD-nya fantastis untuk pemula yang ingin mengambil gradien dan tekstur untuk membuat bentuk yang serupa. Sering kali Anda akan menemukan tombol berkualitas lebih tinggi dalam kit UI daripada dengan PSD tunggal.

Sumber Asli - Unduh

Cara Membuat Variasi

Saat Anda menghabiskan waktu mempraktikkan teknik-teknik ini, Anda akan ingin membuat banyak gaya berbeda dari waktu ke waktu. Ini dapat mengakibatkan beralih tombol yang sama antara berbagai proyek dan tata letak. Contoh yang baik adalah set tombol susu yang ditawarkan oleh desainer Robert van Klinken.

Sumber Asli - Unduh

Masing-masing dari tiga tombol asli memiliki gaya gradien yang berbeda, kecuali hover dan status aktif yang terlihat serupa. Saat bekerja di Photoshop Anda harus mencocokkan warna antara gradien atau memindahkan warna ke lapisan efek. Dengan pemahaman ini Anda bahkan dapat membuat tombol sendiri yang ditetapkan untuk diunduh gratis!

Sumber Asli - Unduh

Tekstur Kayu + Kertas

Ketika Anda perlu meningkatkan desain tata letak dasar Anda maka Anda harus pindah ke metode yang lebih licik. Tekstur selalu diterima jika Anda dapat menerapkannya dengan baik melalui latar belakang CSS atau konten set-lebar. Dan dua tekstur paling populer yang pernah saya lihat adalah kayu dan kertas kosong.

Ide notepad sangat sederhana tetapi dapat berfungsi menjadi desain branding yang keren baik sebagai bagian dari elemen antarmuka pengguna atau dibangun ke dalam keseluruhan tata letak Anda. Tetapi kertas tidak selalu terlihat terbaik dengan sendirinya, dan tekstur lain dapat membantu gaya berbaur. Di sinilah tekstur kayu yang lebih rinci bisa ikut berperan..

Sumber Asli - Unduh

Gambar akan menonjol dan terlihat indah terbungkus kulit luar. Seluruh konsep tekstur adalah memberi situs web Anda perasaan atau emosi tertentu. Tema kayu dapat membangkitkan rasa rumah dan alam. Bahkan ada kit UI web kayu yang mengagumkan untuk diunduh oleh Jeremiah Wingett. Jika Anda merasa kreatif, coba kumpulkan beberapa tekstur Anda sendiri dan lihat bagaimana kinerjanya di lingkungan berbasis web.

28 Tekstur Kayu Resolusi Tinggi

Kesimpulan

Desainer web terbaik adalah mereka yang berlatih setiap hari dan tidak pernah membiarkan kegagalan mereka menghalangi tujuan akhir mereka. Anda harus responsif dan bangkit kembali dengan cepat dari upaya yang berhasil maupun yang gagal. Kiat dan gratis dalam panduan ini harus menjadi titik awal yang baik untuk mulai belajar bagaimana membangun konsep halaman yang berbeda untuk proyek web. Dan kami ingin membaca pendapat Anda tentang masalah ini di area diskusi pasca.