Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Desain Situs Web Portofolio Inovatif Menggunakan Alternatif UI / UX

by
Read Time:14 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Apa hal nomor satu yang Anda ingin situs web portofolio Anda lakukan? Menarik! Hari ini, Paul J Noble akan mengantarkan kita melalui pembuatan situs portofolio uniknya. Dia akan menunjukkan kepada kita petunjuk dan trik dalam Adobe Photoshop, serta beberapa pendekatan cerdas untuk berdiri keluar dari paket situs portofolio lainnya.


Membuat Situs Web Portfolio yang Berkesan

Pikirkan situs portofolio Anda adalah juru bicara online Anda untuk calon klien. Jika dilakukan dengan benar, seharusnya memperlihatkan kepada orang lain tentang apa yang Anda lakukan, menunjukkan pekerjaan terbaik Anda, dan beri mereka kesempatan untuk berhubungan dengan Anda. Itu semua sesuatu yang cukup jelas - jadi apa perbedaan antara situs web portofolio biasa dan yang benar-benar luar biasa?

Kunci untuk situs web portofolio yang efektif tidak hanya memiliki proyek hebat - ini meninggalkan kesan bertahan lebih lama pada pengunjung. Tentu, ini mungkin berarti memiliki ilustrasi yang luar biasa jika Anda seorang desainer grafis - tapi bagi perancang dan pengembang web, ini sering berarti perlu mendorong batasan UI/UX dan pengkodean untuk menunjukkan nilai terkuat kita.

Dalam tutorial ini, Paul J Noble akan menunjukkan kepada kita bagaimana ia menggunakan beberapa pendekatan sederhana namun inovatif untuk UI/UX di situs web-nya sendiri untuk membuat situs web portofolio yang dapat membentangkan harapan pengguna dengan menggunakan interaktivitas dan efek pencahayaan yang halus.

Ayo masuk lebih jauh!


Langkah 1 Canvas

Buat dokumen baru di Photoshop yang berukuran 1400 x 900. Terakhir situs HTML yang akan menampilkan elemen 'cair' (misalnya scalable) jadi kita perlu ingat bahwa desain akhir tidak akan menjadi ukuran yang tetap.


Langkah 2 Peletakan Dasar

Menciptakan latar belakang yang kuat adalah cara mudah untuk memulai sesuatu. Untuk desain ini kita akan menggunakan warna dasar
Itu cukup gelap untuk menonjolkan gambar latar depan sementara juga mengimbangi hitam murni yang mungkin muncul dalam gambar folio. Kita juga akan menggunakan beberapa warna biru untuk menciptakan warna gelap 'keren' yang akan berintegrasi dengan elemen antarmuka.

Pilih Layer > New Fill Layer > Solid Color dan tetapkan warna #252a3b.


Langkah 3 Peletakan Panduan

Karena kita menggunakan tata letak yang berskala, kita perlu menentukan lebar horisontal minimum. Untuk sebagian besar situs web komersial ini sekitar 1000 piksel untuk mengakomodasi pengguna dengan resolusi 1024x768. Namun untuk situs ini kami akan menargetkan 1100 piksel sebagai lebar minimum.

Pertama, pastikan unit panduan Anda disetel ke piksel. Ini bisa diatur dengan masuk ke Preferences > Units & Guides.

Lalu, pergi ke View > New Guide. Karena kita akan menempatkan konten kita di tengah dan kita menargetkan lebar minimum 1100 piksel, kita harus menempatkan panduan vertikal pada 150px dan 1250px.


Langkah 4 Membuat Texture Pattern

Striping diagonal yang halus akan membantu mengangkat desain dengan menciptakan pemisahan antara item portofolio latar depan dan latar belakang bertekstur.

Untuk mencapai hal ini kita akan menerapkan layer Pattern fill. Namun, pertama kita harus menciptakan pola.

Buat dokumen baru 12x12 piksel dengan latar belakang transparan dan tambahkan layer fill baru dengan warna hitam (#000000).

Sekarang, tambahkan layer baru (Layer > New > Layer). Dengan menggunakan pencil tool dengan ukuran brush 1px, gambarlah tiga baris persis seperti gambar di bawah ini.

Matikan layer fill dan atur opacity layer sampai 6%. Untuk menyimpannya sebagai pola kita pilih Edit > Define Pattern.

Kembali ke kanvas asli kita, buat layer baru dengan tekstur dengan memilih Layer > New Fill Layer > Pattern dan pilih pola yang telah ditentukan sebelumnya.


Langkah 5 Navigasi

Sekarang setelah kita membuat basis kita, kita bisa menggunakan beberapa lapisan datar yang terdiri dari elemen utama situs web ini

Pertama, navigasi kita. Karena situs web ini akan dirancang untuk tidak memiliki scroll vertikal, kita dapat memposisikan navigasi untuk menyelaraskan ke bagian bawah layar.

Buat Grup baru di layer palette dan beri label pada grup ini ‘Navigation'.

Kemudian buat layer baru menggunakan Rectangle Tool (U). Dengan jendela Info terbuka, gambarlah bentuknya jadi 1400x61 (lebar penuh jendela dokumen dan tinggi 61 piksel). Sejajarkan layer ini di bagian bawah jendela dokumen.

Sekarang, aplikasikan gradien ke layer dengan mengklik kanan layer shape di Layers palette dan pilih Blending Options lalu periksa Gradient Overlay (alternatifnya, pilih Layer > Layer Style > Gradient Overlay).

Di Gradient Editor, klik pemilih warna bagian bawah untuk membuka Color Picker. Untuk warna kiri (bagian bawah shape) gunakan #2f313a. Untuk warna yang tepat (atas shape) gunakan #3c3f49.

Selanjutnya, buat layer baru dan berikan label 'highlight' ini. Dengan menggunakan Pencil tool dengan brush 1px dan warna #ffffff, gambarlah garis sambil menekan-tahan shift di bagian atas bentuk empat persegi panjang yang telah dibuat sebelumnya. Kemudian atur opacity layer ini menjadi 6%.


Langkah 6 Logotype

Buat layer teks baru 20 piksel dari sisi kiri dokumen dan sejajarkan teks yang akan dipusatkan secara vertikal pada layer empat persegi panjang navigasi.

Dalam contoh ini, font DIN Light telah diaplikasikan pada 14px dengan loose tracking 200. Untuk membuat pergeseran antara dua bagian dari tipe logo dua warna digunakan. Untuk bagian pertama #dddddd dan bagian kedua yang lebih gelap #737375.

Selanjutnya, tambahkan drop shadow halus untuk membuat tampilan teks menjadi masuk ke latar belakang. Pilih Layer > Layer Style > Drop Shadow.

Hilangkan tanda centang pada 'Use Global Light', ubah arah ke -45 derajat, atur ukuran menjadi 0px, jarak 1px dan opacity 30%.


Langkah 7 Tombol Navigasi

Untuk tombol navigasi utama kita akan menggunakan bentuk empat persegi panjang bulat.

Buat grup baru yang disebut 'buttons'.

Buat Rounded Rectangle Shape baru yang berukuran 279x31 dan offset 20 px dari sisi kanan jendela dokumen dan terpusat secara vertikal di kotak navigasi.

Klik kanan layer pada layer palette dan pilih Blending Options. Periksa Gradient Overlay dan gunakan nilai #292c33 sampai #43464f. Klik OK dan kemudian cek Bevel & Emboss.

Untuk Bevel & Emboss set ukuran menjadi 0px dengan arah 122 derajat. Kemudian atur opacity Highlight dan Shadow menjadi 10% untuk menciptakan efek pencahayaan yang konsisten dan halus.

Tambahkan label teks menggunakan pengaturan font yang sama seperti yang diterapkan untuk jenis logo. Karena label tombol terdapat di ruang vertikal yang lebih kecil, ukurannya harus dikurangi hingga 12 px dan tambahkan tracking ke 100. Gunakan warna yang sama seperti tipe logo namun menerapkan warna yang lebih ringan untuk label halaman yang aktif.

Untuk memisahkan tombol sambil mempertahankan tampilan navigasi yang terang benderang kita harus menggambar dua garis, masing-masing lebar 1px. Yang pertama harus hitam (#000000) dan yang lainnya putih (#FFFFFF). Atur opacity untuk layer putih sampai 6% dan layer hitam menjadi 12%. Duplikat layer ini dengan Shift-clicking masing-masing lalu klik kanan untuk seleksi. Posisikan layer salinan dengan jarak yang konsisten di dalam navigasi.


Langkah 8 Tombol Social Media

Tombol ini memiliki fungsi yang berbeda dari sisa nav jadi kita akan menerapkan gaya yang menyarankan hal ini. Mari kita bawa masuk tombol ini untuk melengkapi navigasi utama.

Pertama, buat grup baru yang disebut 'social' dan kumpulkan grup ini di grup induk 'navigation'.

Sekarang, gunakan alat Rounded Rectangle dengan radius 4 px dan tahan tombol shift, buat bentuk segi empat 25x25 px. Letakkan ini secara vertikal tengah di navigasi dan posisikan shape 22 px ke kiri tombol navigasi utama.

Klik kanan shape yang baru saja dibuat dan pilih Blending Options.

Tambahkan drop shadow. Untuk drop shadow ini kita akan menggunakan warna putih (#FFFFFF) dan mengatur mode blend menjadi Lighten. Atur jarak 1px, lebar 0% dan ukuran ke 0px. Ini akan menciptakan efek tepi bawah yang menyala dan karenanya tombolnya menjadi inset.

Selanjutnya, saat masih di jendela Layer Style, cek inner shadow. Gunakan hitam (#000000) dengan opacity pada 39%, jarak 1px dan ukuran 4px.

Terakhir, pilih Color Overlay dan gunakan #353741. Ini akan meratakan tampilan bentuk dan menambah kontras dengan latar belakang.

Untuk ikon media sosial, kita akan mengambil gambar yang ada dan menelusuri tepinya menggunakan pen tool untuk membuat jalur (pastikan Paths dipilih di menu Options tool).

Setelah membuat jalur ikon, gunakan Path Selection Tool dan klik kanan jalur yang baru saja Anda buat (pastikan jalur dipilih di Paths palette). Pilih Define Custom Shape ... Simpan Shape.

Kita sekarang bisa menggunakan ikon sebagai objek vektor terukur. Dengan menggunakan Pen tool, ganti Options to Shape Layers (item kiri atas pada bar Options) dan pilih Custom Shape Tool, lalu pilih ikon yang baru saja dibuat. Tekan-tahan tombol Shift, seret benda agar sesuai dengan tile ikon.

Atur opacity ikon menjadi 20%.

Ulangin langkah ini untuk ikon media sosial yang lain.


Langkah 9 Panduan Lain

Dalam contoh ini kita akan menampilkan gambar folio yaitu 640x480 px.

Karena kita ingin mengarahkan gambar fitur secara vertikal ke dalam ruang di atas navigasi, kami perlu menambahkan beberapa panduan lagi. Pilih View > New Guide dan tambahkan panduan horizontal 180px dan 660px. Ini akan memposisikan gambar yang kita lihat di tengah ruang vertikal di atas navigasi.

Kami juga memerlukan beberapa teks di sebelah kiri gambar unggulan sehingga kami akan menambahkan panduan vertikal pada 400px dan 350px untuk memberi margin pada teks dan memberi ruang navigasi di samping gambar. Akhirnya tambahkan panduan vertikal pada 1040px dan 1070px untuk menentukan tepi gambar yang dilihat dan margin antara gambar yang berdekatan.


Langkah 10 Membuat Placeholders Gambar

Buat grup baru yang disebut 'Projects'. Kemudian, dengan menggunakan Rectangle tool, gambarlah persegi panjang 640x480px yang sejajar dengan kiri atas panduan vertikal pada 400px dan bagian atas ke panduan horizontal pada 180px. Ini akan menjadi tempat bagi foto utama kita.

Klik kanan layer yang baru saja dibuat dan pilih Rasterize Layer.

Sekarang, tekan tahan tombol Alt, klik dan seret layer untuk membuat salinan. Pindahkan layer ini ke kanan layer dengan margin 30px untuk menyelaraskan dengan panduan di 1070px dan menggunakan garis dasar yang sama.

Buat dua salinan lagi dan sejajarkan ini ke bagian bawah masing-masing dengan margin 30px di antara keduanya.

Kemudian, pergunakan Paint Bucket tool, isi setiap shapes dengan warna #252a3a.


Langkah 11 Vignette

Buat Grup baru dengan nama 'Vignette' di bawah grup 'Navigation' dan di atas grup 'Projects'.

Buat layer baru dan gunakan alat Paint Bucket untuk mengisi layer dengan warna foreground #0f1219.

Menggunakan alat Ellipse, menggambar garis besar yang memotong di sudut-sudut panduan gambar utama.

Nah, untuk menciptakan efek sketsa, kita perlu memotong bagian ini sambil melakukan penyesuaian tepi potongan. Untuk mencapai ini kita akan menggunakan Select > Modify > Feather. Feather yang telah di seleksi dengan 60px lalu potong layer seleksi (Ctrl-x / Command-x).


Langkah 12 Membuat Projek Masks

Karena kita akan menampilkan pekerjaan, kita perlu menempatkan beberapa tangkapan layar pada placeholder. Kembali ke grup 'Projects' dan tempel tangkapan layar sementara placeholder utama dipilih. Ini akan menyisipkan layer diatas placeholder. Kemudian, klik kanan layer dan pilih Create Clipping Mask.

Tempel tiga tangkapan layar lainnya ke placeholder yang berbeda.

Mengurani opacity untuk setiap tangkapan layar kecuali untuk tangkapan layar di tengah 20%.


Langkah 13 Memasukkan Teks

Untuk membubuhi keterangan setiap proyek, kita akan menggunakan tiga layer teks. Buat grup baru di atas kelompok 'vignette' ke “rumah” lapisan ini.

Untuk yang pertama, judulnya, kita akan menggunakan font ringan. Dalam contoh ini saya telah menggunakan DIN Light namun jenis huruf serupa lainnya juga bisa bekerja dengan baik. Menggunakan alat Text menggambar kotak teks di dalam panduan di sebelah kiri gambar utama dan 40px di bawah pemandu atas. Atur warna ke #FFFFFF, tracking ke -25 untuk jarak huruf yang lebih ketat dan gunakan ukuran font 28px.

Kami juga akan menambahkan baris untuk kategori dan tanggal proyek. Atur ukurannya menjadi 14px, tracking hingga 100, force caps dan gunakan warna #338966 untuk menyesuaikan baris ini.

Kemudian, untuk badan teks, kita akan menggunakan font sistem seperti Lucida Grande atau Lucida Sans Unicode 12px dengan warna #8C8F95 dan tinggi garis 18px.


Langkah 14 Tambahkan kontrol tetikus

Untuk menavigasi situs web folio kita, kita akan mengizinkan kontrol tetikus atau keyboard. Penempatan intuitif untuk tombol arah navigasi sesuai dengan fungsinya. Misalnya tombol panah kanan akan menuju ke kanan gambar utama.

Untuk tombol kita akan menggunakan bentuk tembus yang bisa menggeser opacity pada aktivitas hover atau klik. Buat grup baru yang dinamakan 'Buttons' yang berada di atas kelompok 'Vignette'.

Kemudian, buat dokumen baru dengan dimensi 37x37px. Menggunakan alat pen, menggambar bentuk chevron seperti di bawah ini. Mengulangi proses di Langkah 8, menggunakan Path Selection Tool, klik kanan shape dan pilih Define Custom Shape. Simpan shape.

Kembali ke kanvas utama kita, gunakan alat Custom Shape untuk memasukkan shape yang telah dibuat sebelumnya.

Kemudian, pilih Edit > Transform > Flip horizontal. Ini akan mengarahkan panah ke kanan. Kloning bentuk ini dan gunakan Edit > Transform > Putar 90 derajat Searah jarum jam untuk membuat bentuk penunjuk arah ke bawah.

Posisikan masing-masing shape ini di tengah sisi arah masing-masing. Biarkan margin 15px jadi tombolnya bisa tumpang tindih dengan gambar yang berdekatan dan kurangi opacity sampai 12%.


Langkah 15 Peta Orientasi

Agar pengguna tahu di mana mereka berada dalam portofolio secara keseluruhan, kita akan mendeskripsikan desain grid dan menggunakan garis dengan ketinggian yang berbeda untuk mewakili kolom gambar dan indikator untuk menetapkan posisi penayangan sekarang.

Buat grup baru yang disebut 'Orientation' dan letakkan grup ini di atas kelompok 'Vignette'.

Dengan menggunakan alat Pencil, pilih brush Square yang disetel dari menu fly-out. Kemudian, dengan warna #FFFFFF dan ketebalan 5px, gambar garis sejajar dengan pemandu batas paling kiri dan tinggi 60px.

Klon layer ini dan posisikan 2px ini ke kanan. Ulangi ini sampai 12 baris.

Atur opacity untuk semua layer menjadi 12%. Dan cara mudah untuk melakukan ini adalah mengatur opacity untuk layer pertama, lalu klik kanan pada layer dan pilih Copy Layer Style. Kemudian pilih semua layer yang tersisa dan pilih Paste Layer Style.

Stagger layer ini dengan menggunakan perintah Edit > Free Transform untuk mempersingkat / meningkatkan setiap baris.

Akhirnya, buat layer baru dan gunakan pencil lagi untuk menggambar penanda pada baris pertama. Inilah indikator posisi kita.


Langkah 16 Kontrol Keyboard

Seringkali kontrol keyboard akan menawarkan pengalaman navigasi yang intuitif. Namun, kita harus mengizinkan pengguna mengetahui bahwa keyboard dapat mengendalikan navigasi. Untuk mencapai hal ini kita akan membuat ikon panah keyboard.

Buat grup baru yang disebut 'Keyboard' dan letakkan ini di atas grup 'Vignette'.

Dengan menggunakan alat Rectangle Shape, tarik persegi (tahan Shift) 20x20px dengan warna #262a34. Klik kanan layer pada Layer palette dan pilih Blending Options. Periksa Stroke dan terapkan stroke 1px di bagian luar dengan warna #32343f.

Kemudian, dengan menggunakan alat pen (pastikan gaya disetel ke Default di bar Option) dan dengan warna #fff gambar panah dengan titik persegi. Sesuaikan seperlunya dengan alat Direct Selection. Atur opacity menjadi 20%

Pada layer palette, tekan shift pilih dua layer yang baru saja dibuat. Klik kanan dan pilih layer Duplicate. Kemudian, dengan menggunakan opsi menu Edit > Transform, putar layer salinan ke orientasi yang benar. Ulangi langkah ini untuk membuat keempat ikon.


Kesimpulan

Baik! Sekarang kita selesai dengan bagian desain proyek ... yang berarti semua yang perlu kita lakukan adalah kode itu menggunakan beberapa HTML dasar/CSS, jQuery Hotkeys, dan beberapa trik jQuery tambahan. Jika ada yang ingin melihat bagaimana Paul mengkode desain ini, beri tahu kami dikomentarnya agar kami bisa mengaturnya!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.