• Pengaturcaraan
    • Laravel
    • UI/UX
    • SEO
  • Teknologi
    • Mata Wang Kripto
  • Filem & Siri
  • Motivasi
    • Agama
    • Kata Inspirasi
    • Viral
  • How to?
Mencari
Facebook Twitter Instagram
Azmir Shah
  • Pengaturcaraan
    1. Laravel
    2. UI/UX
    3. SEO
    4. View All

    Apa itu Laravel? Adakah ia lebih baik berbanding Core PHP?

    24/04/2019

    4 laman web yang memberi inspirasi UIUX

    28/02/2021

    4 aplikasi rekaan UI/UX yang menjadi kegemaran saya

    25/06/2019

    Perbezaan wireframe, mockup dan prototaip untuk UI/UX

    18/06/2019

    Panduan On-page SEO yang semua orang wajib tahu!

    08/02/2021

    Apa itu SEO? Kenapa ia penting kepada laman web?

    10/10/2020

    LT Browser: Menguji reka bentuk responsif laman web anda secara offline

    22/02/2022

    Bagaimana cara debug ghost CSS secara manual

    15/02/2022

    Beza camel, snake, kebab dan pascal case dalam penulisan kod

    12/02/2020
  • Teknologi
    1. Mata Wang Kripto
    2. View All

    Cara beli token di Pancakeswap

    08/01/2022

    11 tip trade kripto untuk golongan pemula

    05/10/2021

    Panduan menjual mata wang kripto di Binance P2P Malaysia?

    10/06/2021

    5 platform jual beli Bitcoin di Malaysia untuk pemula

    21/02/2021

    Tiktok memintas Google sebagai laman web paling popular

    02/01/2022

    Keburukan ekonomi gig kepada gigger

    18/01/2021

    Apa itu ekonomi gig? Adakah Malaysia terkesan?

    09/12/2019

    Pemuda Ini Meramalkan Teknologi Dan Masa Hadapan

    24/08/2016
  • Filem & Siri

    Idiocracy (2006): Filem bodoh yang buat anda berfikir sejenak

    7.0 01/01/2022

    Ulasan Love Destiny (2018), Drama Thai yang anda patut tonton

    7.3 24/09/2021

    7 Drama Korea terbaik lakonan Lee Jong-Suk

    06/02/2021

    Tonton movie online secara percuma dengan Streamio

    17/01/2021

    7 filem manusia genius terbaik sepanjang zaman

    16/12/2019
  • Motivasi
    1. Agama
    2. Kata Inspirasi
    3. Viral
    4. View All

    Panduan melaksanakan solat jenazah dengan sempurna

    22/01/2017

    Peranan Yang Dimainkan Si Ayah Mempengaruhi Tingkah Laku Anak-Anak

    22/12/2015

    Pengisian Kuliah Ustaz Azhar Idrus Di Surau Al-Iman

    13/11/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 3

    12/11/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 2

    29/10/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 1

    22/10/2015

    Kisah Katak : Apa Beza Diri Anda Dan Katak Ini?

    20/12/2015

    Kisah Penjual Tempe Yang Penuh Dengan Pengajaran

    27/11/2015

    Cerita Rakyat Daripada Jepun Ini Sarat Dengan Pengajaran

    23/10/2015

    Mesej Seorang Bapa Kepada Anaknya Ini Pasti Membuatkan Anda Tersentuh

    15/10/2015

    Matlamat: Jangan Fokus Padanya, Jangan Berkongsi Pada Sesiapa

    28/03/2019

    Pakar Psikologi Berpendapat Kita Perlu Menerima Diri Kita Yang Seadanya Sebelum Bersedia Untuk Berubah

    17/01/2016

    7 Perbezaan Golongan Menengah dan Orang Kaya Yang Anda Kena Tahu

    16/01/2016

    7 Tabiat Yang Mampu Meningkatkan Produktiviti Kerja Anda

    14/01/2016
  • How to?

    Cara hantar Whatsapp tanpa save nombor seseorang

    17/10/2022

    Cara install aplikasi Disney+ Hotstar di Samsung TV Malaysia

    08/02/2022

    Cara menyelesaikan masalah “card information is invalid” di Samsung Pay

    12/06/2021

    Terlupa judul lagu? Ini cara cari lagu dengan bersenandung

    23/02/2021

    Buka akaun perniagaan Maybank online tanpa introducer

    02/02/2021
Azmir Shah
aplikasi untuk membuat prototype web, marvel prototype, free prototyping tools app ,mockup freeaplikasi untuk buat prototype,software buat prototype, buat prototype, aplikasi buat prototype, fungsi wireframe, buat mockup aplikasi, wireframe software, cara buat wireframe, aplikasi rekaan ui/ux, uiux, ui ux, rekaan ui/ux, uiux design, designing, wireframe, mockup, prototype, prototaip, buat wireframe, buat mockup, buat prototaip,
UI/UX

4 aplikasi rekaan UI/UX yang menjadi kegemaran saya

Azmir ShahBy Azmir ShahNo Comments6 Mins Read
Share
Facebook Twitter Telegram WhatsApp

Memberikan pengalaman terbaik kepada pengguna menerusi aplikasi rekaan UI/UX menjadi satu kemestian kepada pembangun laman web. Penghasilan wireframe, mockup mahupun prototaip merupakan satu tugasan yang kebiasaan dilakukan oleh Front end developer atau UI/UX specialize.

Tugasan ini melibatkan kreativiti yang memerlukan orang seperti kami untuk menterjemahkan rekaan berdasar user requirement specification (URS) ataupun kehendak pengguna kepada bentuk rekaan laman web atau aplikasi yang menepati citarasa semasa, bertema, konsisten dan fresh.

Baca : Perbezaan wireframe, mockup dan prototaip

Saya juga tidak terlepas daripada keperluan untuk berkarya dengan grafik ini. Lebih-lebih lagi ketika berada di fasa awal pembangunan, idea itu perlu divisualkan menerusi wireframe agar rakan sekerja dapat gambaran tentang bagaimana sesuatu sistem ataupun aplikasi mudah alih berfungsi. Kalau tidak, kelautlah semua bersama imaginasi yang berbeza.

Aplikasi rekaan UI/UX yang menjadi pilihan saya

Bergantung kepada projek, keadaan dan kekangan masa, saya tidaklah mempunyai satu aplikasi khusus untuk membuat rekaan UI/UX. Sebaliknya saya sering bertukar aplikasi mengikut kepada mood dan persekitaran perkerjaan. Jika saya bekerja seorang, saya lebih suka menggunakan perisian offline, jika saya berkerja secara berkumpulan, saya lebih suka menggunakan aplikasi online supaya sebarang perubahan dapat dibuat terus dalam mesyuarat kerana fungsinya secara real time.

Dengan lambakan aplikasi di pasaran, saya percaya kesukaran ini bukan terletak pada alatan, sebaliknya pada pemilihan alatan. Nak pakai mana satu, betul tidak? Haha. Lebih-lebih lagi banyak pihak yang menawarkan perisian yang percuma untuk fungsi premium menyebabkan anda tidak mempunyai masalah untuk menghasilkan wireframe, mockup atau prototaip dalam tempoh masa yang singkat.

Dah alang-alang menulis ini, saya ingin kongsikan juga kepada anda 4 aplikasi yang saya biasa gunakan untuk melakar idea untuk dijadikan wireframe, mockup mahupun prototaip. Manalah tahu anda juga menggunakan aplikasi yang sama. Mana tahu juga anda nak beralih arah untuk menggunakan aplikasi lain. Baiklah ini adalah senarainya.

4. Photoshop

wireframe guna photoshop, photoshop, guna photoshop, wireframe photoshop, mockup photoshop, prototaip photoshop
Rekaan splash screen untuk projek LeoTrip

Ini memang perisian yang wajib ada di setiap komputer pengaturcara a.k.a programmer. Walaupun bunyinya tipikal, ianya sangat membantu dalam membuat kemasan yang kompleks dalam penghasilan logo yang mungkin akan digunakan dalam mockup itu tadi. Sebab itulah perisian ini menjadi standard industri dalam dunia digital. Ia mampu membuat apa sahaja hal yang melibatkan grafik termasuklah mengubah anda daripada gemuk ke kurus. Hehehe.

Dengan Photoshop, saya tidak merasakan kreativiti saya tersekat. Saya boleh gubah aset dari serata tempat dan tukarkannya menjadi bahan terbaik untuk rekaan laman web. Lagipun Photoshop CC pun sudah punyai keupayaan untuk extract kod css untuk setiap rekaan yang dihasilkan menggunakannya (tanpa plugin ye) menyebabkan saya masih setia bersama Photoshop.

3. Sketch 3

sketch 3 design, sketch 3, sketch 3 wireframe, sketch 3 mockup, sketch 3 prototype,
Contoh paparan muka depan sketch 3

Saya mula menggunakan aplikasi ini sekitar tahun 2015 ketika syarikat tempat saya bekerja sangat fanatik kepada produk Apple. Setiap perkakasan yang ada di pejabat menggunakan sistem operasi Mac OS menjadikan saya tanpa sengaja diperkenalkan dengan Sketch 3. Ketika itu Sketch 3 sangat hot dan ianya hanya terhad kepada pengguna Mac OS sahaja menjadikan pengguna window terlopong dengan kecanggihan Sketch 3.

Sektch 3 sangat mesra pengguna dan ianya sangat mudah dan minimalis. Pandangan pertama saya menggunakan aplikasi ini, saya sangat gemarkannya kerana ianya mempunyai komuniti yang sangat ramai. Ini menyebabkan penghasilan lambakan material daripada logo sehingga ke theme yang memudahkan saya untuk menghasilkan mockup yang menarik. Nak font cantik ada, nak butang cantik ada, nak logo cantik ada, bak kata astro macam-macam ada.

2. Adobe XD

adobe xd, rekaan menggunakan adobe xd, design adobe xd
Contoh paparan Adobe XD

Ingat tak saya cakap pengguna Windows terlopong dengan kecanggihan Sketch 3, tahun berikutnya keluar satu aplikasi daripada Adobe yang diberi nama Adobe XD. Aplikasi ini mempunyai fungsi yang hampir sama dengan Sketch 3 iaitu aplikasi penghasilan rekaan berbentuk vektor untuk rekaan pengalaman dan grafik laman web dan aplikasi mobile, cuma ianya cross platform. Maka bersoraklah pengguna windows yang kini mempunyai alternatif.

Pengalaman dengan Adobe XD ini tak lama, saya mula menggunakannya sejak tahun 2019 iaitu tahun ini. Dari pandangan mata kasar, ianya aplikasi tipikal untuk rekaan UI/UX mempunyai kemampuan yang lebih berkuasa seperti kemampuan untuk berintegrasi dengan produk Adobe yang lain, asas animasi dan voiceXD. Apa itu voiceXD? Korang buat voice command dengn playback dekat prototaip korang beb. Canggih sungguh.

1. Figma

aplikasi uiux, figma, design wireframe, design mockup, design prototype, rekaan wireframe, rekaan mockup, rekaan prototype, aplikasi pilihan, wireframe, mockup, prototaip,
Mockup projek mobile cryptocurrency e-wallet

Selepas saya berhenti daripada syarikat lama, saya mula mencari alternatif aplikasi yang mampu mengantikan Sketch 3 kerana ketika itu saya sangat selesa menggunakannya. Tanpa disangka saya menjumpai satu aplikasi alternatif untuk pengguna window yang diberi nama Figma. Saya dah pakai lebih daripada 4 tahun Figma ini, menurut saya ianya sangat berbaloi buat anda yang inginkan aplikasi rekaan UI/UX yang percuma dan punyai fungsi penuh.

Menariknya, Figma membenarkan anda untuk import rekaan daripada sketch 3 (.sketch) terus ke dalam board anda dan membenarkan anda menggunakannya tanpa sebarang masalah. Ini memberi keuntungan kepada diri saya untuk mendapatkan material bahan-bahan pembinaan web daripada sketch3 sedangkan rekaan yang anda sedang buat menggunakan Figma. Kelebihan inilah yang menjadi saya setia dengan Figma.

Bukan itu sahaja, Figma juga merupakan web aplication yang menjadikan ia boleh diakses menerusi internet. Anda boleh berkerja dengan ramai orang kerana ia bersifat real Time. Buktinya, saya sering melakukan semakan rekaan (design) secara serentak dengan pengaturcara yang lain dalam meeting syarikat. Anda boleh nampak mouse yang bergerak dan kerja-kerja yang dilakukan oleh pihak lain.

Yang mana yang anda suka?

Selesai sudah penerangan 4 aplikasi rekaan UI/UX yang saya pernah guna dan suka gunakan ketika membuat rekaan wireframe, mockup dan prototaip. Saya percaya setiap satunya mempunyai kelebihan dan kekurangan masing-masing. Saya harap senarai yang ada ini tidak menghadkan anda untuk mencuba aplikasi yang lain pula kerana saya percaya, terdapat banyak lambakan aplikasi di luar sana yang sama atau lebih baik daripada yang senaraikan ini. Cuma perlu cari sahaja.

Baca juga: KiplePay: e-Wallet dari kaca mata pengguna celik IT

Bagi saya pula, ada beberapa hal yang saya titikberatkan ketika memilih sesebuah aplikasi. Antaranya komuniti yang ramai. Saya memerlukan material untuk rekaan (design) saya. Tak akanlah saya nak buat balik icon, pakai sahajalah yang sedia ada. Itu yang bagusnya kalau ada komuniti, saya punyai pilihan untuk resuse the material.  Selain daripada itu, boleh juga berkongsi ilham daripada segi reka bentuk aplikasi, baru boleh buat yang terbaik.

Baiklah, terima kasih semua kerana sudi membaca. Jika ada apa-apa soalan, jangan segan silu boleh diajukan diruangan komen. Jika anda ingin berkongsikan pengalaman menggunakan aplikasi selain daripada ini, dipersilakan juga.

adobe xd aplikasi ui ux aplikasi ui ux design aplikasi uiux aplikasi untuk desain ui ux aplikasi untuk mockup aplikasi untuk prototaip aplikasi untuk prototype aplikasi untuk ui ux aplikasi untuk ui ux design aplikasi untuk wireframe figma konsep wireframe mockflow mockplus online mockup photoshop prototype tool sketch 3 sketch app tutorial ui ux ui ux design wireframe design tool wireframe examples
Share. Facebook Twitter Telegram WhatsApp
Previous ArticlePerbezaan wireframe, mockup dan prototaip untuk UI/UX
Next Article Logo Proton dari tahun 1983 sehingga sekarang
Azmir Shah
  • Website
  • Facebook
  • Twitter
  • Instagram

Seorang programmer yang mempunyai pengalaman yang tidak seberapa. Memiliki kelulusan daripada universiti terkemuka di Malaysia dan secara jujurnya beliau meminati Elon Mask lebih daripada Bill Gate.Seorang yang bercita-cita tinggi, kini bekerja sebagai Front-End developer di salah sebuah syarikat di Shah Alam.

Artikel Berkaitan

4 laman web yang memberi inspirasi UIUX

Perbezaan wireframe, mockup dan prototaip untuk UI/UX

Leave A Reply Cancel Reply

Cari Sesuatu?
Sosial Media
  • Facebook
  • Twitter
  • Instagram
  • Telegram
Artikel Terbaru
Review

Cara beli kad NFC Touch N Go dengan mudah dan pantas

By Azmir Shah11/02/2023
Review

Ulasan projektor murah Q3 Pro dan pengalaman menggunakannya

By Azmir Shah26/10/2022
Tutorial

Cara hantar Whatsapp tanpa save nombor seseorang

By Azmir Shah17/10/2022
Review

Pengalaman tukar skrin samsung s20+ secara percuma

By Azmir Shah10/10/2022
Makanan

5 Sarapan tidak sihat menurut Pakar Perunding Kardiologi

By Azmir Shah01/03/2022
Kategori
Mengenai Kami
Mengenai Kami

Platform penulisan untuk kami kongsikan segala informasi yang bersarang di minda. Berkongsi pengetahuan untuk anda para pembaca yang budiman.

Pautan Berkaitan
  • Dasar Privasi
  • Hubungi
  • Tentang
Artikel Terbaru

Cara beli kad NFC Touch N Go dengan mudah dan pantas

11/02/2023

Ulasan projektor murah Q3 Pro dan pengalaman menggunakannya

26/10/2022

Cara hantar Whatsapp tanpa save nombor seseorang

17/10/2022

Pengalaman tukar skrin samsung s20+ secara percuma

10/10/2022
© 2023 Hak Cipta Terpelihara. Direka untuk Azmir Shah.

Type above and press Enter to search. Press Esc to cancel.

Go to mobile version