Contoh Statis Routing-1

Pada gambar di samping, merupakan contoh topologi dengan menggunakan 4 alamat jaringan yang berbeda. Alamat IP address tiap interface router sudah ditentukan.

Berdasarkan konfigurasi tersebut, untuk menentukan konfigurasi routing secara statik pada masing-masing router, seperti sebagai berikut :

Router 1 : dari 4 network tersebut, pada router 1, 2 network sudah terhubung langsung pada router tersebut, sedangkan 2 network lain berada disebelah router 2. Maka untuk melakukan konfigurasi routing secara statik harus mendefinisikan 2 network yang belum terhubung tersebut. yakni sebagai berikut :

ip route 192.168.20.0 255.255.255.0 192.168.40.2

ip route 192.168.30.0 255.255.255.0 192.168.40.2

Router 2. dari 4 network tersebut, pada router 2, terdapat 3 network yang sudah terhubung secara langsung yaitu : 192.168.20.0/24, 192.168.30.0/24, dan 192.168.40.0/24, sehingga hanya tinggal 1 network saja yang belum bisa dijangkau oleh router 2 yaitu 192.168.10.0/24. Agar network 192.168.10.0/24 dapat di hubungi oleh host yang berada di ke-3 network tersebut, maka konfigurasi routing statis adalah sebagai berikut :

ip route 192.168.10.0 255.255.255.0 192.168.40.1

 

Contoh Subnet Routing Statis-1

Berdasarkan gambar arsitektur jaringan tersebut untuk pengaturan subnet jika alamat jaringan yang akan di subnet adalah 10.0.0.0/8 maka menghasilkan subnet dengan tahapan sebagai berikut :

Pertama tentukan kebutuhan bit untuk host, sbb : 400 host -> 512 = 2^9, 1000 host -> 1024 = 2^10, dan untuk 15.000 host -> 16384 = 2^14.

Kedua menentukan jumlah subnet bit, sbb : 400 host ->  9 bit host maka total subnet bitnya adalah 32-9 = 23 (SM=255.255.254.0), 1000 host ->  10 bit host maka total subnet bitnya adalah 32-10 = 22 (SM=255.255.252.0), dan 15.000 host ->  14 bit host maka total subnet bitnya adalah 32-14 = 18 (SM=255.255.192.0).

Ketiga menentukan alamat subnetwork, sbb:

  1. Subnetwork A : 14 bit host dan 18 bit subnet,
    10.0.00|000000.0, ->10.0.0.0/18 (next subnet)
    10.0.01 |000000.0,->10.0.64.0/18
    10.0.10 |000000.0,->10.0.128.0/18
    10.0.11  |
    000000.0,->10.0.192.0/18 (subnetwork A)
  2. Subnetwork B : 10 bit host dan = 22 bit subnet,
    10.0.00|0000|00.0,->10.0.0.0/22
    10.0.00|000 1|00.0,->10.0.4.0/22 (Subnetwork B)
    10.0.00|00 10|00.0,->10.0.8.0/22 (next subnet)
    10.0.00|00 1 1|00.0,->10.0.12.0/22
    ……………………………
    10.0.00|1 1 1 1 |00.0,->10.0.60.0/22
  3. Subnetwork C : 9 bit host dan = 23 bit subnet,
    10.0.00|00 10|0|0.0,->10.0.8.0/23 (Next Subnet)
    10.0.00|00 10||0.0,->10.0.10.0/23 (subnetwork C)
  4. Subnetwork D : 2 bit host dan = 30 bit subnet,
    10.0.00|00 10|0|0.000000|00,->10.0.8.0/30 (subnetwork D)
    10.0.00|00 10|0|0.00000 1|00,->10.0.8.4/30
    10.0.00|00 10|0|0.00001 0|00,->10.0.8.8/30
    ……………………………………………..
    10.0.00|00 10|0|1.1 1 1 1 1 1 |00,->10.0.9.252/30

Sedangkan untuk mengatur statis routing dari masing-masing router adalah dengan memperhatikan sejumlah network yg belum terhubung dengan masing-masing router. Untuk router R1, subnetwork yang terhubung adalah 10.0.192.0/18 dan 10.0.8.0/30, sedangkan dua subnetwork lain yang tidak terhubung langsung adalah 10.0.10.0/23 dan 10.0.4.0/22, maka definisi statis routingnya pada R1 adalah sebagai berikut:

ip route 10.0.4.0 255.255.252.0 10.0.8.2
ip route 10.0.10.0 255.255.254.0 10.0.8.2

Sedangkan untuk router R2, subnetwork yang terhubung langsung adalah 10.0.8.0/30, 10.0.4.0/22 dan 10.0.10.0/23, sedangkan yang tidak terhubung langsung adalah 10.0.192.0/18, maka definisi statis routing untuk R2 adalah ip route 10.0.192.0 255.255.192.0 10.0.8.1

Sehingga hasil subnet dan statis routingnya adalah seperti pada gambar berikut ini:

 

Case 2 : subnet & Routing

Dari desain arsitektur gambar tersebut, tentukan pengaturan subnet dari alamat ip address 172.16.0.0/16 untuk beberapa subnet-subnet seperti pada gambar. Untuk network R1 ke Internet (R4) alamat jaringannya menggunakan 200.100.1.8/30 dan untuk network DMZ menggunakan alamat 202.155.19.0/24. Pada network DMZ konfigurasikan 2 server yakni web server (www.myserver.com) dan satu lagi DNS server.

Konfigurasikan masing-masing router arsitektur tersebut untuk mengalirkan trafik antar network menggunakan statis routing dan juga buat konfigurasi lain menggunakan dinamis rauting.

Case 1 :Subnet dan Routing

Dari desain arsitektur berikut, tentukan pengaturan pengalaman berdasarkan kebutuhan pengguna, kemudian lakukan konfigurasikan pengaturan trafik routing menggunakan statis dan dinamis pada masing-masing perangkat router tersebut.

Gunakan alamat network dengan private IP Address 172.16.0.0/16 untuk masing-masing subnet. Untuk koneksi ke Internet telah ditentukan alamat IP network yakni 200.175.10.100/30. Untuk Internet (cloud symbol) dapat anda tentukan konfigurasi untuk jaringan Internet public.

Permasalahan umum Antarmuka Pengguna

“Suatu aplikasi dapat berfungsi dengan baik ketika antarmuka yang tersedia dapat memandu dan mendukung pemakai aplikasi melalui alur kerja yang mudah dipahami”

Kemudahan dan user friendly antarmuka aplikasi dapat mempengaruhi kecepatan penggunaan aplikasi untuk mendukung tujuan di ciptakannya aplikasi tersebut. Antarmuka pengguna, tentu sudah didesain menurut tahapan dan standard yang baku, misalnya standard desain UI/IX, Desain antarmuka berbasis Lean UX, Desain antarmuka pengguna dengan metodologi desain sprint, dan lain sebagainya, namun sering kali masih di temukan beberapa kekurangan atau bisa dikatakatan kesalahan desain.  Beberapa kesalahan-kesalahan yang harus diperhatikan agar bisa dihindari antara lain:

  1. Kurangnya Feedback atau tidak tersedianya Feedback yang komunikatif.
  2. Antarmuka dalam satu aplikasi tidak konsisten antara satu dengan antarmuka yang lain
  3. Pesan kesalahan yang tidak memberikan panduan yang komunikatif dalam memberi informasi pengguna.
  4. Nilai standard inputan tidak ada, sehingga pengguna aplikasi harus menghabiskan banyak waktu untuk memikirkan isian
  5. Ikon bisu, tanpa keterangan atau label sehingga tetap menyulitkan pengguna tentang fungsi dari tombol/ikon tersebut
  6. Ikon/menu/link yang sulit diakses, misalnya ukuran terlalu kecil, posisi peletakan yang terlalu menepi dan berhimpitan dengan lainnya.
  7. Window pop-up pengisian data yang menghalangi informasi yang menyebabkan pengguna harus geser window pop-up atau bahkan harus membuka menutup pop-up tersebut.
  8. Informasi-informasi yang tidak diperlukan muncul, misalnya data ditampilkan dari keseluruhan isi tabel, tanpa melakukan filter penampilan sesuai dengan kebutuhan pengguna.
  9. Kumpulan menu yang beragam. Sekumpulan menu dalam satu windows yang memiliki fungsi yang beragam, tidak spesifik terhadap suatu fungsi pada obyek tertentu.
  10. Peletakan instruksi kontradiksi yg berdekatan. Misalnya antara hapus dan simpan yang saling berdekatan, memungkinkan terjadi kesalahan dalam memilihnya

Prototype Aplikasi – User Interface Design

Proyek pembuatan aplikasi yang diawali dengan perancang antarmuka (UX designer)  membuat deliverables sebagai alat untuk berkomunikasi. Secara umum  deliverables meliputi wireframe, mockup dan prototype.  Prototype adalah deliverables dinamis dan sudah dapat merespon setelah di-klik, sedangkan Wireframe dan mockup merupakan deliverables yang bersifat statis.  Mockup adalah Dynamic deliverable yang bersifat high fidelity design sedangkan wireframe adalah  Dynamic deliverable yang bersifat low fidelity design.

Wireframe dapat disebut sebagai blueprint dalam arsitektur aplikasi. Tujuannya  bukan desain visual, namun menyampaikan susunan, struktur, layout, navigasi dan organisir konten. Wireframe dibuat dengan menggunakan warna hitam putih, karena lebih menekankan isi dari konten.

Mockup menyampaikan aspek visual design, termasuk gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk dibuat berdasarkan perspektif pengguna.

Prototype merupakan design interaktif yang sudah dapat diklik dan  akan mendapat respon aksi dari pengguna. Prototype mensimulasikan bagaimana user berinteraksi dengan antar muka secara nyata, meningkatkan komunikasi yang efektif sehingga memungkinkan perancang sistem untuk menguji user journey dan menemukan masalah potensial pada tahap awal. Prototype dapat dibuat menggunakan tools design dan dapat juga dengan menggunakan Software Developer tools. Prototype yang dibuat menggunakan software developer tools disebut dengan Language Prototype Design. Kelebihan language prototype design adalah mempercepat proses software development execution karena sudah menggunakan antar muka pada tools tersebut dan menghasilkan code program, namun kelemahannya pengembang aplikasi dibatasi dalam mengembangkan pada bahasa pemrograman yang lain.

Berikut kumpulan Prototype aplikasi-aplikasi yang dibuat oleh mahasiswa semester 2 pada matakuliah Design Antarmuka pengguna angkatan 2018.

#Group-A

  1. DC Extended Universe (aplikasi live streaming, informasi terkait dengan DC)  oleh Mario Angelo Kevin Buga Langoday : wireframe, prototype dengan mockingbot, video-design
  2. Instrumen (Aplikasi Instrumen Sekolah berbasis android) oleh Adrianus Hernowo Wahyu Pandito: wire-frameprototype dengan mockingbot, video-design.
  3. BOLA (Baju Olah RAga adalah layanan aplikasi penjualan online baju oleh raga) oleh Onastatia Sahartian Onastatia Sahartian: wire-frameprototype dengan AdobeXD, video-design.
  4. MegaPict.id (Aplikasi  jasa dokumentasi untuk berbagai acara) oleh Indana Nazulfa: wire-frameprototype dengan AdobeXD, video-design.
  5. Nusantara (Aplikasi tiket pemesanan dan paket wisata)  oleh  Yulian Tino Lesta: wire-frame, prototype dengan AdobeXD, video-design.
  6. Bacain (Aplikasi jual buku online)  oleh  Abyan Akbar Indroyono: wire-frameprototype dengan AdobeXD, video-design.
  7. SIX Game Store (Aplikasi untuk jual beli game dan peralatannya)  oleh  Leonardo Gunawan: wire-frameprototype dengan mockingbot, video-design.
  8. NewsiCyCa (Aplikasi sistem informasi Cyber Campus versi Mobile)  oleh  Calvin Young: wire-frameprototype dengan AdobeXD, video-design.
  9. Komputerku (Aplikasi toko komputer online berbasis mobile android)  oleh  Kevin Owen David Kurniawan: wire-frameprototype dengan AdobeXD, video-design.
  10. SmartCity (Aplikasi menampilkan informasi tentang kota dan pelaporan masalah perkotaan)  oleh  Deo Marvin Yahya: wire-frame, Language prototype dengan CSS , video-design.
  11. YokOlahRaga (Aplikasi untuk persewaan tempat olah raga terdekat dari lokasi kita) oleh  Irvan Adi: wire-frameprototype, video-design.
  12. E-Service (Aplikasi untuk service gadged Online berbasis Android)  oleh  Aldo Julianto: wire-frameprototype dengan mockingbot, video-design.
  13. Farmasi-Care (Aplikasi untuk pembelian obat melalui apotik-apotik yang terdaftar)  oleh  Michael Vinsent Djulianto: wire-frameprototype dengan AdobeXD, video-design.
  14. Aplikasi  oleh  Reiki Arlansyah Rokhani: wire-frame, prototype, video-design.
  15. KATROL (Aplikasi untuk menghubungkan para UKM bidang katering sebagai ajang promo dan jembatan transaksi)  oleh  Aprianto: wire-frameprototype dengan AdobeXD, video-design.
  16. PET-CARE (Aplikasi untuk pemeliharaan hewan dan kebutuhannya)  oleh  M. Dimas Aditya Pamungkas: wire-frameprototype dengan mockingbot, video-design.
  17. Rent-Trans (Aplikasi untuk persewaan sarana transportasi meliputi mobil, sepeda motor, Bus, Private Jet, Kereta Api, Sepeda, Heli Kopter, JetSky, Kapal Pribadi)  oleh  Meisya Jala Girinda: wire-frameprototype menggunakan AdobeXD, video-design.
  18. MakeUpbyMe (Aplikasi untuk penjualan makeUP dan tutorialnya)  oleh  Sahla Salsalbila Arza Saat: wire-frameprototype dengan mockingbot, video-design.
  19. E-Sekolah (Aplikasi untuk sistem informasi tentang presensi, nilai, peminjaman buku, portal berita sekolah)  oleh  Moh. Nofi Oke I Bagus Putra: wire-frameprototype dengan mockingbot, video-design.
  20. KONVEKS (Aplikasi untuk pemesanan baju dalam jumlah partai)  oleh  Rifqi Ahmad Alhuwaidi: wire-frame, prototype dengan mockingbot, video-design.
  21. WaveAccustica Aplikasi  oleh  Toddi Erlangga: wire-frameprototype dengan Mockingbird, video-design.
  22. AdaEvent (Aplikasi untuk melihat informasi tentang event dan create event)  oleh  Reva Eka Prasetyo: wire-frameprototype dengan AdobeXD, video-design.
  23. OnlineStore (Aplikasi untuk transaksi jual beli online) oleh  Jacky Setiawan: wire-frameprototype dengan mockingbot, video-design.
  24. JalanYOK (Aplikasi untuk traveling dan pemesanan tiket)  oleh  Azril Hari Nugroho: wire-frame, prototype dengan AdobeXD, video-design.
  25. Crita.co (Aplikasi untuk e-book mobile)  oleh  Nikolaus Christian Aditama: wire-frame, prototype dengan AdobeXD, video-design.
  26. OLShopku (Aplikasi untuk penjualan baju online)  oleh  Isnaini Hayati: wire-frameprototype dengan mockingbot, video-design.
  27. J-property (Aplikasi untuk jual beli rumah) oleh Abraham Filipo : wire-frameprototype dengan AdobeXD, video-design.

#Group-B

  1. e-Gorgeous (Aplikasi untuk makelar kecantikan) oleh  Kristin Angelina: wire-frameprototype dengan mockingbot, video-design.
  2. E-Klontong (Aplikasi untuk jual beli bahan kebutuhan pokok) oleh  Muhammad Ilhamil Mi’roj: wire-frameprototype dengan mockingbot, video-design.
  3. Sikat Narkoba (Aplikasi untuk melaporkan tentang kejadian penyalahgunaan narkoba merupakan redesign dari aplikasi SikatNarkoba propinsi Jawa Tengah)  oleh  Melania Rizky Eka Putri: wire-frameprototype dengan mockingbot, video-design.
  4. Sematik (Aplikasi untuk sewa motor dan mobil)  oleh  Theo Pande Nandito Sinaga: wire-frameprototype dengan AdobeXD, video-design, video-using.
  5. Ovra Make-up (Aplikasi untuk menjual makeUp dan untuk memanggil perias ke rumah) oleh  Meilinda Nurqasanah: wire-frameprototype dengan mockingbot, video-design.
  6. Healthier (Aplikasi untuk memesan obat secara online, pemesanan ambulan dan konsultasi kesehatan) oleh  Anisah Nadiyah Fatin: wire-frameprototype dengan mockingbot, video-design.
  7. Popuri E-Store (Aplikasi untuk penjualan personal untuk merchandise berbasis web) oleh  Aditya Lila Saputra: wire-frameprototype dengan AdobeXD, video-design.
  8. Schoolink (Aplikasi  untuk menampilkan info-info di lingkup sekolah) oleh  Aditya Ramadhan: wire-frameprototype dengan AdobeXD, video-design.
  9. RemoteJOBS (Aplikasi untuk marketplace freelancer)   oleh  Muhamad Lutfhan Nugraha Sani: wire-frame,file Design Prototype, Hasil prototype dengan Gravit Designer, video-howto, video-design.
  10. Petshop (Aplikasi untuk jual beli produk-produk kebutuhan hewan piaraan)  oleh  Muhamad Risqiwahid: wire-frameprototype  menggunakan mockingbot, video-design.
  11. Mundo (Aplikasi untuk mencari event, mencari lokasi event dan menyewakan lokasi event)  oleh  Djatu Hamidan Ardiwinanto: wire-frameprototype, video-design.
  12. Penjualantiket (Aplikasi untuk pemesanan tiket pesawat dan kereta api)  oleh  Alif Maulana Muhammad: wire-frameprototype menggunakan AdobeXD, video-design.
  13. Kursus Bahasa (Aplikasi  untuk kursus segala jenis bahasa) oleh  Nabila Intan Assaufa: wire-frameprototype menggunakan mockingbot, video-design.
  14. Fire Netz (Aplikasi untuk menyimpan foto secara otomatis) oleh  Audrey Cinderry Kala: wire-frameprototype dengan mockingbot, video-design.
  15. Penjualan Online FreshTime (Aplikasi untuk penjualan online produk-produk sayur, buah, dan makanan beku) oleh  Aditya Nur Farika: wire-frameprototype dengan mockingbot, video-tutorial, video-design.
  16. Travel Adict (Aplikasi untuk penjualan tiket travel) oleh  Muhammad Miftahul Hadi: wire-frameprototype dengan AdobeXD, video-design.
  17. SUNMORI (Aplikasi  untuk cuci motor panggilan kerumah) oleh  Fabian Daffa Rafrisah: wire-frameprototype dengan AdobeXD, video-design.
  18. Redesain Dana (Aplikasi untuk pembayaran elektronik) oleh  Muchammad Tedy Adiaksa: wire-frameprototype dengan AdobeXD, video-design.
  19. Re-Design PegiPegi (Aplikasi penjualan tiket)  oleh  Muhammad Muchlis Riski: wire-frameprototype dengan AdobeXD, video-design.
  20. LiRoom (Aplikasi  pemesanan buku) oleh  Nagia panji yudha pratama: wire-frameprototype dengan mockingbot, video-design.
  21. Re-Design SiCyca Stikom (Aplikasi untuk sistem informasi siber campus)  oleh  Dwi Ari Wijaya: wire-frameprototype dengan AdobeXD, video-design.
  22. goTravel (Aplikasi   Travel berbasis Mobile Devices) oleh  Aldito Doni Pasha: wire-frameprototype menggunakan AdobeXD, video-design.
  23. CangZ-In (Aplikasi  oleh  Mohammad Reza: wire-frame, prototype, video-design.
  24. Enjoi-SecondStore (Aplikasi  jual beli barang bekas ) oleh  Mochammad Sofyan Fanani: wire-frameprototype dengan mockingbot, video-design.
  25. Klimis (Aplikasi booking antrian untuk potong rambut) oleh Rizal Refandi : Klimis, Prototype dengan AdobeXD, video-design

Dasar GUI Pemrograman Java

Berikut contoh aplikasi GUI pada pemrograman Java dengan menggunakan class SWING dan AWT.  Dengan contoh ini akan dipahamkan tentang penggunaan komponen dasar SWING (GUI) pada pemrograman java yang meliputi :

  1. Top Level Container: JFrame, JDialog ,
  2. Intermediate Container : JPanel,
  3. Atomic Component : JButton, JLabel, JTextField, JTextArea,
  4. Layout Manager: Flowlayout, BorderLayout, BoxLayout,
  5. Event Handling : penekanan tombol, mouse over dsb.

Contoh-contoh program jawa tersebut seperti berikut :

  1. JForm
    import javax.swing.JFrame;
    public class gui1{
             public static void main(String[] args) {
                JFrame a=new JFrame(“Latihan Frame”);
                a.setSize(400,150);
                a.setVisible(true);
             }
    }
  2. JButton – FlowLayout
    import javax.swing.JFrame;
    import javax.swing.JButton;
    import java.awt.FlowLayout;
    public class gui2 {
                 public static void main(String[] args){
                      JFrame a=new JFrame(“Mencoba Frame”);
                      FlowLayout tampilan=new FlowLayout(FlowLayout.CENTER);

                      JButton b1=new JButton(“Satu”);
                      JButton b2=new JButton(“Dua”);
                     JButton b3=new JButton(“Tiga”);
                    JButton b4=new JButton(“Empat”);
                   JButton b5=new JButton(“Lima”);

    a.setLayout(tampilan);

                  a.add(b1);
                  a.add(b2);
                  a.add(b3);
                  a.add(b4);
                  a.add(b5);
                  a.pack();
                  a.setSize(600,100);
                  a.setVisible(true);
            }
    }
  3. JButton – BorderLayout
    import javax.swing.JFrame;
    import javax.swing.JButton;
    import java.awt.BorderLayout;
    public class gui3 {
    public static void main(String[] args){
          JFrame a=new JFrame(“Mencoba Frame”);
          BorderLayout tampilan=new BorderLayout();
          JButton b1=new JButton(“Satu”);
          JButton b2=new JButton(“Dua”);
          JButton b3=new JButton(“Tiga”);
          JButton b4=new JButton(“Empat”);
          JButton b5=new JButton(“Lima”);      a.add(b1,tampilan.NORTH);
          a.add(b2,tampilan.EAST);
          a.add(b3,tampilan.WEST);
          a.add(b4,tampilan.SOUTH);
          a.add(b5,tampilan.CENTER);
          a.pack();
          a.setSize(400,500);
          a.setVisible(true);
          }
    }
  4. JCheckBox
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.Box;
    import javax.swing.BoxLayout;
    import javax.swing.JCheckBox;
    public class gui4{
    public static void main(String[] args){
        JFrame a=new JFrame(“Coba Frame”);
        JLabel label=new JLabel(“Menu makan siang : “);
        JCheckBox cb1=new JCheckBox(“Nasi Goreng”);
        JCheckBox cb2=new JCheckBox(“Nasi Soto Ayam”);
        JCheckBox cb3=new JCheckBox(“Nasi Pecel”);
        JCheckBox cb4=new JCheckBox(“Nasi Rawon”);
        Box b=new Box(BoxLayout.Y_AXIS);
        b.add(label);
        b.add(cb1);
        b.add(cb2);
        b.add(cb3);
        b.add(cb4);
        a.add(b);
        a.pack();
        a.setSize(400,500);
        a.setVisible(true);
        }
    }
  5. JRadioButton
    import javax.swing.JFrame;
    import javax.swing.Box;
    import javax.swing.BoxLayout;
    import javax.swing.JRadioButton;
    import javax.swing.ButtonGroup;
    public class gui5{
    public static void main(String[] args){
        JFrame a=new JFrame(“Coba Frame”);
        JRadioButton rb1=new JRadioButton(“Es Jeruk”);
        JRadioButton rb2=new JRadioButton(“Es Tea”);
        JRadioButton rb3=new JRadioButton(“Es Teler”);
        JRadioButton rb4=new JRadioButton(“Es Degan”);
        ButtonGroup gr=new ButtonGroup();
        gr.add(rb1);
        gr.add(rb2);
        gr.add(rb3);
        gr.add(rb4);
        Box b=new Box(BoxLayout.Y_AXIS);
        b.add(rb1);
        b.add(rb2);
        b.add(rb3);
        b.add(rb4);
        a.add(b);
        a.pack();
        a.setSize(400,500);
        a.setVisible(true);
        }
    }

Wireframe berbagai Aplikasi tugas Matakuliah Desain Antarmuka Pengguna kelas Q1

  1. e-Gorgeous, wireframe aplikasi makelar kecantikan oleh Kristin Angelina
  2. E-Klontong, wireframe aplikasi jual beli kebutuhan sehari-hari oleh Muhammad Ilhamil Mi’roj
  3. Sikat Narkoba, wireframe aplikasi untuk konsultasi tentang Narkoba oleh Melania Rizky Eka Putri
  4. Sematik, wareframe aplikasi persewaan kendaraan oleh Theo Pande Nandito Sinaga
  5. Ovra Make-up, wireframe aplikasi layanan Make-up oleh Meilinda Nurqasanah
  6. Healthier, wireframe aplikasi layanan kesehatan, obat dan ambulan oleh Anisah Nadiyah Fatin
  7. Popuri E-Store, wireframe portal e-commerce oleh Aditya Lila Saputra
  8. Schoolink, wireframe aplikasi berbasis android sekolah oleh Aditya Ramadhan
  9. RemoteJOBS, wireframe aplikasi marketplace penjual jasa dan layanan oleh Muhamad Lutfhan Nugraha Sani
  10. Petshop, wireframe aplikasi  penjualan kebutuhan dan kunsultasi binatang piaraan oleh Muhamad Risqiwahid
  11. Mundo (Create and Buy Event With Ease), wireframe aplikasi  jual beli tiket, dan Event Organizer oleh Djatu Hamidan Ardiwinanto
  12. Penjualantiket, wireframe aplikasi  penjualan tiket Pesawat dan Kereta oleh Alif Maulana Muhammad
  13. Kursus Bahasa,  wireframe aplikasi mobile kursus berbagai bahasa oleh Nabila Intan Assaufa
  14. Fire Netz, wireframe  redesign Instagram oleh  Audrey Cinderry Kala
  15. Penjualan Online FreshTime, wireframe Penjualan Online oleh Aditya Nur Farika
  16. Travel Adict, wireframe paket wisata online oleh Muhammad Miftahul Hadi
  17. SUNMORI, wireframe aplikasi layanan mencuci sepeda motor berbasis aplikasi oleh Fabian Daffa Rafrisah
  18. Redesain Dana, wireframe Redisign aplikasi Dana oleh Muchammad Tedy Adiaksa
  19. Re-Design PegiPegi, wireframe Re-Design PegiPegi oleh Muhammad Muchlis Riski
  20. LiRoom, wireframe aplikasi pemesanan/pembelian buku oleh Nagia panji yudha pratama
  21. Re-Design SiCyca Stikom, wireframe re-design Sicyca Stikom Surabaya oleh Dwi Ari Wijaya
  22. goTravel, wireframe aplikasi Travel berbasis Mobile Devices oleh Aldito Doni Pasha
  23. CangZ-In, wireframe Booking Cafe oleh Mohammad Reza
  24. Enjoi-SecondStore, wireframe aplikasi penjualan barang bekas oleh Mochammad Sofyan Fanani

Wireframe berbagai Aplikasi tugas Matakuliah Desain Antarmuka Pengguna kelas O1

  1. Wireframe Project DC Extended Universe oleh Mario Angelo Kevin Buga Langoday
  2. Instrumen wireframe aplikasi sekolah oleh Adrianus Hernowo Wahyu Pandito
  3. Bola-Baju OlAh raga Wireframe layanan aplikasi penjualan online baju oleh raga oleh Onastatia Sahartian
  4. MegaPict oleh Indana Nazulfa
  5. Nusantara wireframe aplikasi layanan wisata oleh Yulian Tino Lesta
  6. Bacain  oleh Abyan Akbar Indroyono
  7. SIX Games Store wireframe untuk jual beli aksesoris untuk Game oleh Leonardo Gunawan
  8. NewSiCyCa wireframe Sistem Informasi Akademik Stikom Surabaya oleh Calvin Young
  9. Komputerku Wireframe aplikasi oleh Kevin Owen David Kurniawan
  10. Smart City Wireframe aplikasi Smart City di Indonesia oleh Deo Marvin Yahya
  11. Yok Olah Raga Wireframe pemesanan lapangan/sarana olah raga oleh Irvan Adi
  12. E-Service Wireframe aplikasi E-Service,aplikasi untuk pengguna gadget yang malas men-servis-kan gadget karena tidak ingin repot
  13. Farmasi-Care Wireframe aplikasi layanan farmasi oleh Michael Vinsent Djulianto
  14. E-Tilang CCTV Wireframe E-Tilang yg didukung dengan CCTV oleh Reiki Arlansyah Rokhani
  15. Katrol Wireframe Katering Online oleh Aprianto
  16. Pet-Care Wireframe layanan online pemeliharaan dan penjualan kebutuhan binatang piaraan oleh M. Dimas Aditya Pamungkas
  17. Rent-Trans, wireframe persewaan sarana transportasi oleh Meisya Jala Girinda
  18. MakeUpbyMe, wireframe layanan MakeUp oleh Sahla Salsalbila Arza Saat
  19. E-Sekolah, wireframe Sistem informasi sekolah oleh Moh. Nofi Oke I Bagus Putra
  20. konfek, wireframe penjualan partai barang-barang konfeksi Rifqi Ahmad Alhuwaidi
  21. WaveAccustica, wireframe aplikasi peminjaman alat musik oleh Toddi Erlangga
  22. AdaEvent, wireframe aplikasi pembuatan dan informasi event oleh Reva Eka Prasetyo
  23. OnlineStore, wireframe penjualan online oleh Jacky Setiawan
  24. JalanYok, wireframe travelling oleh Azril Hari Nugroho
  25. Crita.co, wireframe aplikasi tentang cerita oleh Nikolaus Christian Aditama
  26. J-Properti, wireframe aplikasi untuk jual beli rumah oleh Abraham Filipo
  27. OLShopKu, wireframe aplikasi penjualan baju online oleh Isnaini Hayati

Evolusi proses pengembangan perangkat lunak

Evolusi proses pengembangan perangkat lunak : 

  • Diagram pertama menggambarkan awal hari industri perangkat lunak, ketika programmer menginisiasi produk perangkat lunak, kemudian membangun dan menguji.
  • Pada era berikutnya, manajer profesional ikut andil untuk membantu memfasilitasi proses dengan menerjemahkan peluang pasar menjadi persyaratan produk.
  • Diagram ketiga, desainer grafis dibawa untuk membuat ikon dan elemen visual lainnya dalam proses pembuatan aplikasi.
  • Diagram akhir menunjukkan pendekatan Goal-Directed untuk pengembangan perangkat lunak, di mana keputusan tentang fitur, bentuk, dan perilaku aplikasi divisualisasikan dalam design antarmuka. Selanjutnya proses pengembangan disepakati dengan sejumlah biaya (software cost).

Referensi : Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: the essentials of interaction design. John Wiley & Sons.