BAB II METODOLOGI. 2.1 Kerangka berfikir Studi

Ukuran: px

Mulai penontonan dengan halaman:

Download "BAB II METODOLOGI. 2.1 Kerangka berfikir Studi"

Glenna Kurniawan
6 tahun lalu
Tontonan:

1 BAB II METODOLOGI 2.1 Kerangka berfikir Studi Gambar 2 Bagan kerangka Berfikir Sumber: Penulis Pada awalnya penulis membuat main maping ide, berupa rencana tujuan aplikasi kedepan, seperti perencanaan pembatasan segmentasi, mengetahui target user seperti apa gaya hidupnya, kebiasaan, aktivitasnya dari pagi sampai malam, tingkat pendidikannya, pekerjaan user yang menggunakan aplikasi, pembatasan usia, selera mereka, tingkat perekonomian mereka Tataran Lingkungan Karya ini diimplementasikan untuk fashionista yang ingin berbagi pengetahuan atau pengalamannya seputar fashion, selain itu memberikan info atau berita ter up to date fashion di seluruh dunia sekaligus promosi item atau produk bagi toko online yang ingin meningkatkan penjualan. 5

2 Tataran Sistem Sejauh ini aplikasi sharing photo sudah banyak ditemukan namun kebanyakan tidak fokus, aplikasi aplikasi yang sudah ada tidak memikirkan pembatasan kontent yang akan di upload, karena dengan adanya pembatasan kontent dan khusus di satu bidang akan menjadi salah satu pembentukan identitas karakter aplikasi sehingga user lebih mudah menangkap fungsionalitas aplikasi tersebut Tataran Produk Dari survey yang didapat, pengguna aplikasi menyukai tampilan yang simple, fresh, berwarna, dan interaktif serta memuat banyak ilustrasi. Pengguna aplikasi di handphone kurang menyukai aplikasi yang tampilannya flat berupa list dan teks saja. Berbeda dengan aplikasi lain yang sejenis yang lebih mementingkan informasinya dan tidak mementingkan nilai estetisnya, aplikasi STYYLI menampilkan desain interface yang modern, mudah dipakai dan menarik bagi semua kalangan dalam menyampaikan informasi Tataran Elemen Dalam merancang user interface dan user experience aplikasi, terdapat beberapa proses perancangan yang penulis lakukan sebagai berikut: A. Perencanaan Setelah melakukan brainstorming dan menentukan garis besar konsep tentang user interface dan user experience aplikasi aplikasi rekomendasi fashion serta informasi pendukung yang ingin dimasukkan. B. Analisis Penulis melakukan proses mengumpulkan informasi data tentang user interface dan user experience yang berkaitan tentang aplikasi yang di buat selain itu dan membuat list apa saja yang di butuhkan dalam proses ini agar dapat mengetahui fungsi masing-masing fiture C. Perancangan Langkah selanjutnya yang penulis lakukan adalah proses perancangan user interface dan user experience secara keseluruhan, dari mulai riset hingga 6

3 perancangan gambar, teks, material yang akan digunakan, dan elemenelemen pendukung seperti 1) Warna Warna yang akan digunakan dalam karya user interface aplikasi STYYLI lebih condong ke warna yang mengangkat tentang fashion dan lebih bersifat clean, misal warna utama hitam, biru toska, dan merah, kenapa kombinasi warnanya dengan merah dan biru toska, merah yang mewakili kategori fashion pria sedangkan warna biru toska sendiri mewakili kategori fashion wanita. 2) Huruf Huruf yang digunakan dalam karya ini menggunakan Jenis huruf Lane narrow, dan open sans yang bersifat tegas, Mudah dibaca,sangat cocok untuk menampilkan informas 3) Visual Visual terdiri dari elementer user interface, icon, dan illustrasi a) User Interface User interface yang akan di tampilkan akan menggunakan style simple, clean dan modern agar bertujuan penyampaian informasi didalamnya sampai ke user. b) Icon Icon yang akan dibuat menggunakan style outline agar bertujuan memberikan kesan lebih segar di bandingan dengan icon-icon detail di tahun sebelumnya c) Illustrasi Illustrai yang akan di gunakan untuk menyampaikan cerita pada opening, yaitu cerita tentang perubahan fashion disetiap periodenya, mulai dari periode tahun 30 an sampai ke periode tahun sekarang ini. 7

4 2.2 Proses Perancangan Konsep Requirement ( batasan permintaan kebutuhan) a. splashcreen b. Opening c. Front Page 1) Login 2) Sign Up 3) Forgot Password d. Home 1) Trending News Fashion 2) Latest News 3) New Item 4) Product of the day 5) Feed e. Timeline 1) Post 2) Photo User Profile 3) Likes 4) Comments 5) Share 6) Tag 7) Take Picture f. News 1) Trending News 2) Latest News 3) Other News g. Profile 1) Profile user 2) Style 3) Walkdrobe 4) Favorite 5) Follow 6) Edit 8

5 h. Settings 1) Setting Profile 2) Setting connect social media 3) Edit Bio Struktur Pembuatan struktur flow aplikasi ketika requirement sudah ditetapkan, kemudian baru penulis membuat bagian itu dengan kasar berupa point point utamanya saja, menggunakan sketsa Wireframe Pembuatan sketsa setiap halaman tampilan user interface yang sudah di bentuk strukturnya dan dibuat lebih mendetail disetiap halaman, pada saat penulis membuat wirframe tahap pertama mulai dari sketchbook dan di warnai berdasarkan warna dasarnya Gambar 2.1 WIreframe Sumber: Penulis Visual Design Style menggunakan simple dan clean kerena style seperti ini cocok di implementasikan untuk pembuatan user interface dan user experience aplikasi yang fokus kepada penyampaian informasi kepada user agar membantu informasi tersebut mudah di tangkep, selain tidak banya ornament yang 9

6 mengganggu mata dan banyak ruang kosong agar mata tidak lelah dalam melihat. 10

dokumen-dokumen yang mirip

BAB V ULASAN KARYA PERANCANGAN

BAB V ULASAN KARYA PERANCANGAN Gambar 5.1. Splashscreen Gambar 5.2. Opening fashion history Splashscreen (gambar 5.1) dibutuhkan ketika aplikasi pertama dibuka dan tampil sementara proses loading berlangsung.