BAB V KONSEP PERENCANAAN 5.1 Konsep dasar Perencanaan

BAB V
KONSEP PERENCANAAN
5.1
Konsep dasar Perencanaan
5.1.1 a. Ide
Ninja dan Serving in the dark. Kenapa bertemakan Serving in the Dark?
Karena pada saat ini penulis menganalogikan seorang Desainer dengan seorang
Ninja. Desainer pun seperti Ninja bahwa atasannya tidak memerintahkannya untuk
memakai alat tertentu untuk berperang. Karena yang dilihat hanyalah hasil akhir
dan efektifitas dari penggunaan alat tersebut.
Tema yang diangkat dalam desain ini adalah era di zaman rezim shogun
masih berkuasa, samurai masih bebas membawa pedang kemana-mana. Dan masih
digunakannya para Ninja, yaitu prajurit khusus yang terlatih untuk menjadi matamata dan mencari informasi yang bermanfaat untuk tuannya.
b. Kenapa Harus Ninja
Penulis hidup di zaman disaat film
Ninja bertebaran. Mulai dari film buatan
Jepang hingga film holywood. Bahkan
banyak sekali film kartun yang mengangkat
tema tentang Ninja. Sedikit banyak penulis
Gambar 24. Arsitektural rumah jepang zaman edo
terpengaruh dengan keadaan seperti ini.
Kemudian penulis telah menyadari bahwasanya hampir tiap-tiap desainer
web proffesional dunia pun menyukai sebutan dan menyebut diri sebagai Ninja.
c. Budaya Lokal
Pada kesempatan ini Penulis hanya mengambil ide tentang penokohan
Ninja. Hingga saat ini penulis belum mendapatkan ‘chemistry’ untuk menggunakan
penokohan dari karakter budaya lokal. Kebutuhan mengenai mengangkat budaya
lokal penulis rasa belum ada. Sehingga untuk pembuatan Karya pada saat ini penulis tidak menggunakan Budaya lokal.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
35
5.1.2 Menentukan Target Pasar
Dalam berusaha untuk mengefektifkan desain Portfolio yang dibuat, Target
Pasar perlu ditentukan agar Portfolio bisa lebih jelas dan bisa memperoleh hasil
yang maksimal.
Demografis
Psikografis
a.Dewasa (26-45 tahun) (primer)
a.Orang yang mengerti Komunikasi
b.Pria dan wanita
dan Promosi
c.Pendidikan minimal S1
b.Orang yang dinamis dan modern
d.Strata sosial menengah ke atas
c.Pemilik perusahaan yang cerdas dan
e.Status sosial, pendapatan minimal
mengerti arah tujuan untuk maju.
6 juta/bulan
d.Wirausahawan yang ingin mengembangkan usahanya
Geografis
Spiritografis
a.Jangka pendek, seluruh indonesia
a.Perusahaan atau orang yang berse-
b.Jangka panjang, Asia dan Aus-
mangat untuk mengembangkan
tralia
produknya dengan memanfaatkan
teknologi yang tepat guna.
Behaviouristik
a.Orang-orang yang tidak bisa lepas
dari apa yang namanya koneksi
internet.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
36
5.2
7
Rincian Konsep
Perencanaan
5.2.1
Benchmark
Agar mempermudah penulis mewujudkan konsep desain penulis, penulis
melakukan sebuah benchmark , dengan melakukan hal tersebut diharapkan penulis
bisa membuat sebuah desain yang mencapai tujuan dan sasaran dengan‘benar’.
Gambar 25. web portfolio ‘ndesign-studio.com’
a. Navigasi
Sistem navigasi yang sederhana yang digunakan oleh www.ndesign-studio.com membuat
pengunjung focus kepada isi dari website
tersebut. button atau tombol yang hanya berupa
link saja.
Gambar 26. website ‘toriseye.quodis.com’
b. Animasi
animasi
yang
digunakan
oleh
www.toriseye.quodis.com membuat website
menjadi lebih hidup. Animasi yang bergerak
yaitu burung kertas yang bergerak kearah kiri
layer dan awan yang bergerak ke kanan layer
benar benar bagus.
c. Style
Penggunaan gambar 3D mungkin sedikit berlebihan tetapi apa yang dilakukan oleh
www.saizenmedia.com
membuat
website
menjadi sangat interaktif, air yang mengalir
dedaunan yang bergerak kicauan anak ayam dan
lainnya menjadikan website ini menakjubkan.
Komposisi dan penataaan tata letak yang sesuai
membuat website ini menjadi lebih hidup dan
atraktif.
d.Warna
Warna keseluruhan dari website menggunakan
Gambar 27. website ‘nightwish - saizemedia.com’
warna yang dingin. Warna yang digunakan
adalah dengan menggunakan dominan warna hitam untuk menunjukan kesan yang misterius dan
elegan seperti bagaimana seharusnya ninja itu terlihat. Pencahayaan akan menggunakan suasana
malam hari seperti yang dilakukan oleh www.saizenmedia.com.
7
Benchmark adalah sebuah metode peningkatan kinerja secara sistematis dan logis melalui pengukuran dan
perbandingan kinerja dan kemudian menggunakannya untuk meningkatkan kinerja.(Abbott, 2001)
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
37
5.2.2
Konsep Multimedia
Multimedia adalah penggunaan dan pemrosesan beberapa media (text,
audio, graphics, animation, video, and interactivity) yang berbeda untuk menyampaikan informasi atau menghasilkan produk multimedia (music, video, film, game,
entertaiment, dan lain-lain) Atau penggunaan sejumlah teknologi yang berbeda
yang memungkinkan untuk menggabungkan media (text, audio, graphics, animation, video, and interactivity) dengan cara yang baru untuk tujuan komunikasi.8
Gambar 28. Konsep Multimedia
Dalam kategori ini media yang digunakan (tampak pada gambar 29 ) adalah
a. Media Teks
b. Media Audio
c. Media Video
d. Media Animasi
e. Media Graph / Image
f. Media Interactivity
g. Media Special Effect
8
Berdasarkan menurut Maroebeni pada blognya di http://maroebeni.wordpress.com
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
38
Konsep Multimedia
a. Media Teks
e. Media Graph / Image
Media teks berupa informasi
Gambar yang digunakan
berkaitan
ialah berupa gambar 3D.
dengan
website
Portfolio online. Teks yang
Penggunaan
karakter
digunakan menggunakan huruf sans
Ninja, diorama suasana pedesaan di saat
serif karena teks yang ditampilkan
malam.
banyak dan agar terkesan modern,
Menyesuaikan dengan target pasar.
f. Media Interactivity.
Efek
b. Media Audio
Jika memungkinkan Penulis akan
menggunakan audio berupa
sound effect dengan suara
air yang mengalir agar
p e n - gunjung merasa nyaman dan
tenang. Penulis tidak menggunakan
sound pada button.
c. Media Video
Tidak ada video yang ingin ditampilkan mengingat tidak ada
kebutuhan penulis untuk
menampilkan video.
transisi
yang
akan
pengunjung rasakan disaat
pengunjung meng-klik link
untuk berpindah halaman. Efek Parallax
yaitu efek dimana terjadi perbedaan
pergeseran background dimana lapisan
background bergerak dengan jarak
berbeda. Sehingga terasa seperti 3D.
g. Media Special Effect
Penggunaan warna yang gelap
untuk
mengesankan
efek
misterius. Pergerakan efek
kabut yang bergerak secara terus
d. Media Animasi
Animasi yang digunakan adalah
animasi kabut atau awan yang
bergerak dari kiri dan kanan.
Awan yang tebal yang
memberi kesan misterius.
menerus, bergerak dari kiri ke kanan.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
39
5.3
Proses Mendesain Website
Ada Enam tahapan proses mendesain website, namun secara garis besar
tahapan tersebut bisa dikelompokkan menjadi tiga tahapan. Tahapan itu ialah,
tahapan
a. Pra-Produksi
b. Produksi dan
c. Paska-Produksi.
PRA-PRODUKSI
PRODUKSI
PASKA-PRODUKSI
Gambar 29. Proses Mendesain Website
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
40
5.3 a. Pra-Produksi
i. Definisi Projek
i-1 Wawancara Klien
Karena pada Projek kali ini penulis membuat portfolio
Gambar 30. Tahapan Pra-Produksi
online interaktif untuk diri sendiri maka proses wawan-
cara klien tidak dilakukan, yang dilakukan ialah Wawancara terhadap diri sendiri.
Apa yang diinginkan Penulis bisa diketahui dengan menggunakan metode 5w + 1h.
What
Ingin Membuat website Portfolio online interaktif yang unik dengan menggunakan
teknologi terkini.
Where
Halaman website bisa diakses di www.ninja.web.id
When
Diluncurkan atau dipublikasikan disaat diadakannya pameran Tugas Akhir
Why
Kebutuhan pribadi untuk memiliki website ‘showcase’ alias website untuk unjuk
gigi sekaligus website yang menampilkan portfolio yang penulis buat.
Who
Target Pasar bisa dilihat pada halaman 36.
How
Website ini dibuat dengan menggunakan teknologi terkini. Penggunaan Javascript
sebagai pengganti flash dalam membangun interaktifitas dengan pengunjung.
i-2 Brief Projek
Ninja dan Serving in the dark. Kenapa bertemakan Serving in the Dark?
Karena pada saat ini penulis menganalogikan seorang Desainer dengan seorang
Ninja. Designer pun seperti Ninja bahwa atasannya tidak memerintahkannya untuk
memakai alat tertentu untuk berperang. Karena yang dilihat hanyalah hasil akhir
dan efektifitas dari penggunaan alat tersebut.
Tema yang diangkat dalam desain ini adalah era di zaman rezim shogun
masih berkuasa, samurai masih bebas membawa pedang kemana-mana. Dan masih
digunakannya para Ninja, yaitu prajurit khusus yang terlatih untuk menjadi matamata dan mencari informasi yang bermanfaat untuk tuannya.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
41
i-3 Persona (kepribadian tampilan)
Website yang dibuat ingin ditampilkan dengan warna gelap agar mengesankan misterius dan sesuai dengan ide awal yaitu ingin membuat website dengan
penggunaan karakter ninja yang hidup dizamannya.
Karakter Ninja dibuat sesuai dengan karakter penulis, seperti Gaya rambut
dan Gaya berpakaian. Namun
tidak seperti Ninja yang digambarkan selalu mengenakan penutup muka berupa kain, penulis
berusaha mengangkat pencitraan
bahwa ada Klan (baca:keluarga)
Ninja yang selalu mengenakan
topeng dalam setiap kesempatan.
Informasi ini penulis dapatkan
Gambar
G
b 31.
3 P
31
Proses P
Pembuatan
b t K
Karakter
kt
dari Komik terbitan Dark Horse yaitu ‘Path of The Assasins’.
Selain pembuatan karakter, Penulis juga membuat sketsa latar yaitu suasana
rumah yang ada di tengah hutan di Jepang di era zaman ‘edo’. Rumah arsitektural
jepang, pohon bambu dan jembatan penghubung semakin mendramatisir suasana.
Juga ada awan yang bergerak yang akan membuat website semakin realistis.
Gambar 32. Ilustrasi gambar latar
Membuat Portfolio Online Interaktif
http://digilib.mercubuana.ac.id/
42
i-4 Spesifikasi Teknis yang dibutuhkan
Ukuran
: 1366 x 768px (resolusi LCD 19inch dan resolusi Laptop)
Layout
: Horisontal
Warna
: kecenderungan warna gelap
Software
: Adobe Photoshop dan Illustrator
- Blender 3D
- Notepad ++ (Text Editor)
- Instant WP (web server untuk localhost)
- CMS Wordpress
Gambar 33. beberapa software yang penulis gunakan untuk membuat website
Lainnya:
- OS Windows 7
- Browser Chrome, Firefox dan IE8
- Beberapa plugin web developer Google Chrome
- JRuler dan Pixus (Desktop ruler)
- ColorPic (Color Picker)
- Font Picker (software memilih huruf)
Domain
: www.Ninja.Web.id
Hosting
: kapasitas 100mb (www.iixmedia.com)
Jenis Website : Dinamis
Info tambahan :
Desain website akan di translate menjadi sebuah themes yang bisa digunakan oleh
CMS Wordpress. Hal ini tidak terlalu sulit penulis lakukan karena sejak tahun 2010
penulis telah mempelajari hal ini.
Membuat Portfolio Online Interaktif
http://digilib.mercubuana.ac.id/
43
Teknik web menggunakan HTML5 dan CSS3 dimana efisiensi gambar bisa
dimaksimalkan sehingga proses load (memuat) suatu halaman bisa semakin optimal. Website ini akan ditampilkan dalam bentuk ‘One page Portfolio’ (Portfolio
satu halaman) dimana semua informasi ditampilkan hanya dalam satu halaman.
Kekurangan teknik ini ialah kecenderungan load yang lama jika kita tidak memperhitungkan informasi yang ingin ditampilkan. Kelebihannya ialah load halaman
hanya satu kali sehingga web terkesan sangat cepat.
Selain itu penulis akan menggunakan teknik Parallax dimana antara
gambar1 dan gambar2 bisa bergerak dengan kecepatan yang berbeda sehingga
menimbulkan efek 3D.
Estimasi Biaya
Berikut perkiraan biaya untuk membuat website portfolio online :
No
Keterangan
Biaya
1
Pembelian Domain (pertahun)
Rp. 25.000
2
Pembelian Hosting (pertahun)
Rp. 90.000
3
Pembuatan Artwork 3D
Rp. 1.100.000
4
Lain-lain
Rp. 1.000.000
Total
Membuat Portfolio Online Interaktif
http://digilib.mercubuana.ac.id/
Rp. 2.215.000
44
5. Test dan
Perbaikan
3. Desain
Visual
1.Definisi
Projek
bulan 1
bulan 2
bulan 3
2.Struktur
Website
4. Mengembangkan
Website
Gambar 34. Timeline Projek
6. Luncurkan
atau Publikasikan
i-5 Timeline Projek
Merencanakan batasan waktu Projek ini agar bisa selesai tepat pada waktunya. Berikut adalah estimasi penghitungan lamanya waktu pengerjaan
Perawatan melalui website
Perawatan melalui hosting
- Membalas Komentar Pengunjung
- Menghapus komentar Spam
- Memperhatikan Statistik Web
- Memperhatikan sisa ruangan kosong
kapasitas hosting
- Mem-banned IP address SPAM
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
45
5.3 b. Produksi
Tahapan yang dilakukan dalam proses produksi
diantaranya ialah
i. Membuat Struktur Situs
ii. Desain Visual
iii.Mengembangkan Situs
iv. Test dan Perbaikan
Gambar 35. Tahapan Produksi
i. Struktur Situs
i-1.Konten
Konten yang ingin ditampilkan selanjutnya akan di kelompokkan sesuai konsep
multimedia
Portfolio
Karya
yang
pernah
didesain dan direalisasikan
Profil
mengenai pemilik website,
siapa saya dan apa yang
saya sukai
Blog
Catatan Web yang dibuat,
membahas mengenai trend
desain web atau kegiatan
keseharian
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
Projek Terbaru
Menampilkan
terbaru
yang
dibuat.
karya
pernah
Jejaring Sosial
Menampilkan link dan
Facebook like button
Kontak
Kontak
yang
bisa
dihubungi untuk Projek.
46
a. Media Teks
Penggunaan font dipilih berdasarkan karakteristik website Portfolio ini.Untuk
judul, huruf yang digunakan adalah tipe San Serif yang memiliki karakter Jepang,
hal ini dilakukan untuk menambah unsur personalitas dalam web. Adapun teks pada
bagian content menggunakan font sans serif untuk menunjukan kesan yang dinamis
dan tidak kaku.
Berikut Informasi lainnya yang ingin ditampilkan, diantaranya:
Tagline
Layanan Jasa
Setelah pengunjung melihat yang memiliki
Secara umum pekerjaan yang diterima adalah
situs web, mereka akan ingin tahu apa yang
seputar Web design dan interactive. Namun
kita lakukan. Di sinilah kita menjelaskan apa
secara khusus pelayanan yang diberikan adalah
yang kita lakukan dengan menjelaskannya
sebagai berikut:
pada sebuah tagline. Tagline harus pendek dan
- mendesain web , baik itu berupa web statis
tajam, ringkas. Menunjukkan apa yang kita
maupun dinamis.
lakukan.
- membuat interface.
Tagline yang digunakan adalah kalimat: 'Serv-
- membuat icon.
ing in the Dark'
- membuat CD interaktive atau media sejenis-
Maksud dari tagline-nya adalah. Penulis ingin
nya.
menunjukan sisi misterius dari seorang web
- Illustrasi gambar Vector.
designer sekaligus menyesuaikan dengan
- Illustrasi dengan menggunakan pensil.
tema web ini yaitu Ninja. Tagline ini sesung-
- membuat media promosi online, seperti mem-
guhnya merupakan salah satu dari prinsip
buat
seorang Ninja yaitu 'Serving in the dark'.
125x125px, 250x250px dan yang semisalnya.
Melayani
- Modelling 3D
dalam
kegelapan,
melayani
Banner
dengan.
berbagai
ukuran
'Tuan'nya dalam bentuk perlindungan tanpa
harus menunjukan
depan
dirinya
di
publik.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
47
Keahlian
- Web desain | HTML | CSS | Jquery | - Ajax
Profil
- Membuat Gambar Vector
informasi lengkap yang akan pengunjung
- Flash
dapatkan mengenai siapa saya. Untuk
- SEO
memudahnya penulis membagi informasi
- Desain Logo
ini menjadi dua buah bagian, Quick Fact
- Desain User interface
dan About. Namun informasi ini juga
- Mendesain Icon
terdapat dalam halaman yang sama. Keter-
- Wordpress
angan dari 'tentang saya' ini adalah:
- Prestashop | Opencart
Tentang Saya
Bahasa dan Komunikasi
Quick Fact
Bahasa adalah bagaimana cara kita mengek-
- Desainer Web
spresikan diri sendiri. Namun penggunaan
- Online merupakan bagian dari gaya
hidup.
bahasa ini disesuaikan dengan Target Pasar
- Umur saya adalah 25 tahun.
yang telah tetapkan sebelumnya. Walau
- Ayah dari seorang putra dan putri.
bagaimanapun Portfolio online ini bersifat
Nama saya Erwin Prasetyo. Usiaku adalah
pribadi, bahasa yang digunakan adalah
25 tahun, seorang web desainer yang
bahasa yang biasa penulis biasa ucapkan
tinggal di daerah Tangerang, Indonesia.
Saat ini saya bekerja sebagai freelancer
dan akan lulus Sebagai Sarjana Desain di
sehari-hari. Bahasa yang di gunakan mesti
tepat dan cermat, tidak terlalu formal namun
juga tidak terlalu banyak melantur.
Universitas Mercubuana.
saya mengembangkan sebuah desain
fungsional,
kreatif,
detail
dengan
mengekspos kesederhanaan dan stkitar
web terbaru sebagai prinsip
utama.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
48
Kontak
Kontak yang digunakan dalam website Portfolio
interactive ini memiliki 2 jenis. Yang pertama
adalah 'Get in touch', informasi yang didapat dari
pengunjung adalah mengenai:
- nomor kontak mobile phone penulis
Blog
- alamat email dari penulis
Blog ini adalah berupa aktifitas dari penulis
- id YM untuk melakukan kontak dengan Yahoo
sebagai desainer. Blog ini berisikan tentang
messenger
berita mengenai:
halaman ini bersifat statis, karena sifatnya yang
i.
perkembangan website
satu arah.
ii.
inspirasi hari ini
Kemudian yang kedua adalah 'halaman kontak'.
iii.
aktifitas desainer
Ini adalah halaman dimana pengunjung bisa
Blog ini juga memiliki sisi interaktif.
mengirimkan pesan tanpa harus membuka web
Dimana setiap tulisan dalam blog ini bisa
mailnya. Halaman ini berupa contact form.
dikomentari oleh pengunjung. Tujuan dari
Halaman ini bersifat dinamis dan memiliki sisi
pembuatan blog ini diantaranya adalah
interaktif. Dahulu halaman ini disebut sebagai
untuk
Guest book, namun trend web pada saat ini
membangun
keakraban
dengan
pengunjung, dan tentu saja itu merupakan
adalah
halaman
bagian dari promosi juga.
halaman kontak.
tersebut
disebut
sebagai
b. Media Audio
Jika memungkinkan Penulis akan menggunakan audio berupa sound effect dengan
suara air yang mengalir agar pengunjung merasa nyaman dan tenang. Penulis tidak
menggunakan sound pada button.
c. Media Video
Tidak ada video yang ingin ditampilkan mengingat tidak ada kebutuhan penulis
untuk menampilkan video.
d. Media Animasi
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
49
Animasi yang digunakan adalah animasi kabut atau awan yang bergerak
dari kiri dan kanan. Awan yang tebal yang memberi kesan misterius.
e. Media Graph / Image
Gambar 36. Ilustrasi gambar latar
Gambar / illustrasi
Penggunaan gambar latar yang besar dan
cenderung
menguasai
halaman
untuk
menimbulkan kesan interaktif. Gambar akan
dibuat dengan menggunakan gambar tangan
dengan menggunakan alat-alat Grafis yaitu
pencil kemudian pewarnaan akan dilakukan
secara komputerisasi dengan menggunakan
software grafis.
Bentuk (Shape)
Penggunaan elemen yang memiliki sudut tidak
lancip (rounded) dan Geometris . Serta penggunaan Bentuk Natural yaitu bentukan
hewan,tumbuhan dan manusia.
Secara rinci penggunaan elemen bentuk yang
digunakan adalah sebagai berikut:
- Manusia. (Ninja).
- Pepohonan yang tumbuh di jepang.
- Gedung dan bangunan Jepang pada masa
pertengahan.
- Cuaca
- dan bentuk-bentuk pendukung lainnya seperti
batu, air dan yang semisalnya
Ruang Kosong
Warna / Tekstur dan Cahaya
Ruang kosong ini digunakan sebagai "tempat
Warna yang digunakan adalah Warna web safe
istirahat” bagi mata agar tidak menjadi jenuh
RGB. Untuk warna latar, warna yang digunakan
terhadap pesan-pesan yang akan disampai-
adalah warna yang dingin, untuk memberikan
kan. Penempatan ruang kosong ini diterap-
kesan yang sederhana, sehingga mudah diingat.
kan setelah Layout dan pembagian
Warna yang digunakan adalah dengan menggunakan dominan warna hitam untuk menunjukan
kesan yang misterius dan elegan seperti
bagaimana seharusnya ninja itu terlihat.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
50
Produk
Terkait dengan produk yang ditampilkan dalam tugas akhir berbentuk portfolio online ini (website), Produknya ialah berupa Layanan Jasa Desain Web,
Pengembangan Web serta Desain Grafis dan Multimedia.
Desain dan Pengembangan Web
www.ninja.web.id (versi awal)
Desain dan Pengembangan Web
www.anandajaya.com
Desain dan Pengembangan Web
www.erwinprasetyo.com
Desain dan Pengembangan Web
www.apeb.co.id (prototype)
Desain Web
mds (prototype)
Desain dan Pengembangan Web
www.irwanrudiyanto.com
Desain Web
www.betainstitut.com (customized
theme)
Desain Web
www.pempekmeranjat.com
(customized theme)
Desain Web
www.rumahrandang.com
(customized theme)
Gambar 36. Portfolio yang ditampilkan
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
51
Logo
a. Sketsa awal
Pada awalnya logo yang penulis buat
untuk Website Portfolio ini adalah berupa
sebuah pintu gerbang (bahasa jepang: no
mon) Makna yang terkait dalam logo ini
adalah
bahwasanya
Gerbang
adalah
tempat segala aktifitas itu dimulai yaitu
Gambar 37. Logo Sketsa Awal
ada yang masuk dan ada yang keluar.
Melambangkan sebagai sesuatu yang dinamis, dan juga seuatu yang bersifat kendali. Apabila ada
ancaman dari Luar maka Gerbang bisa menjadi sebuah pelindung, karena ia akan tertutup dan
menolak sesuatu yang akan masuk.
Faktanya Gerbang sendiri dianggap oleh bangsa jepang menjadi sesuatu yang penting, bisa kita
lihat dari banyaknya penggunaan Gerbang untuk memasuki suatu daerah di jepang. Atau bahkan
dalam arsitektur nya pada masa lampau, Gerbang selalu digunakan dalam setiap bangunan.
Membuat Portfolio Online Interaktif
http://digilib.mercubuana.ac.id/
52
f. Media Interactivity
Interaktifitas dibangun dengan cara membuat gambar latar bergerak (animasi).
Animasi ini tidaklah menggunakan Flash tetapi menggunakan JQuery dan CSS 3.
adapun objek yang akan di animasikan diantaranya ialah awan
g. Media Special Effect
Penggunaan warna yang gelap untuk mengesankan efek misterius. Pergerakan efek
kabut yang bergerak secara terus menerus, bergerak dari kiri ke kanan.
CMYK
RGB
WEBSAFE
: 100 %
:0%
: 00
: 100 %
:0%
: 00
: 100 %
:0%
: 00
: 100 %
CMYK
arti warna hitam :
Elegan dan menunjukan sebuah kecenderungan Misterius.
RGB
WEBSAFE
:0%
: 196 %
: C4
: 100 %
: 22 %
: 16
: 100 %
: 28 %
: 1C
arti warna merah :
Kuat, berani, percaya diri, gairah
: 20 %
Merah adalah warna yang punya banyak
arti, mulai dari cinta yang menggairahkan
hingga kekerasan perang. Warna 8 ini tak
cuma memengaruhi psikologi tapi juga fisik.
Penelitian menunjukkan menatap warna
merah bisa meningkatkan detak jantung dan
membuat kita bernapas lebih cepat
8
Menurut Leatrice Eisman, seorang konsultan warna dan penulis buku More Alive With Color dikutip di
http://nasional.kompas.com/read/2008/10/09/15551015/psikologi.dan.arti.warna
Membuat Portfolio Online Interaktif
http://digilib.mercubuana.ac.id/
53
i-2. Diagram Situs
home
service
Sekilas tentang
keahlian
profil
tentang saya
tentang situs ini
Projek Terbaru
Jejaring Sosial
penjelasan lengkap
tentang keahlian
Ringkasan Blog
kontak
portfolio
kumpulan karya/
projek yang telah
dikerjakan, disusun
berdasarkan kategori
other
Blog
Gratisan/Freebies
Jualan
Gambar 38. Diagram Situs (Sitemap)
Pemetaan pada website bertujuan agar perencanaan web semakin mudah. Dan
mempermudah sistem navigasi nantinya. Dengan melakukan hal yang demikian
maka urutan halaman akan lebih mudah dibuat dan struktur website akan
men-
jadi rapih.
Banyaknya Halaman utama ialah empat halaman. Halaman itu diantaranya:
- Service
- Profil
- Portfolio
- Other
Keterangan
Service
Informasi
yang
ditampilkan
pada
halaman ini berupa
rangkuman dari tiga
halaman
utama
lainnya
Profil
Informasi
mengenai profil
pemilik website
Portfolio
Menampilkan karya
penulis dalam bentuk
thumbnail
yang
apabila di klik ukuran
gambar akan menjadi
besar.
Membuat Portfolio Online Interaktif
http://digilib.mercubuana.ac.id/
Other
Tambahan informasi
yang ingin ditampilkan di website.
Informasi itu diantaranya blog.
54
i-3. Deskripsi Diagram
akses
ingin tahu
keahlian yang
dimiliki
ingin tahu
siapa pemilik
web
home
ingin tahu
karya yang pernah
dibuat
masih tertarik
dengan website
ini
like
Halaman FB
service
profil
portfolio
other
tertarik untuk
bekerja sama
membuat web
Kontak
Gambar 39. Deskripsi Diagram atau User Experience
tinggalkan
pesan via
website
Kontak form
database
Keterangan:
1. Pengunjung mengakses Halaman web www.ninja.web.id
2. Dihalaman awal, terdapat ringkasan dari isi web ninja.web.id, jika pengunjung suka maka ia akan
menekan tombol ‘like’
3. Jika ia tertarik untuk membuat website pengunjung akan mengunjungi halaman kontak, dan ia
akan melihat informasi kontak. Jika ingin meninggalkan pesan langsung ia bisa menggunakan
kontak form.
4. Susunan halaman mempengaruhi psikologi pengunjung.Susunan Halaman ialah sebagai berikut
Halaman Service
Halaman Profil
Halaman Portfolio
Halaman Other
Dengan susunan halaman seperti demikian, diharapkan akan mempengaruhi keingintahuan pengunjung, dengan asumsi sebagai berikut:
Pengunjung di saat mengunjungi halaman ini ia mengetahui keahlian dan layanan jasa si pemilik
website, maka langkah berikutnya ia akan mencari tahu informasi siapa pemilik website. Setelah itu
ia akan melihat semua karya si pemilik website. Kemudian ia juga bisa mengetahui kegiatan si pemilik website, dengan mengunjungi halaman other
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
55
STORYBOARD
No.
1.
Halaman
Service
Visual
audio
Menampillkan ringkasan Informasi
mengenai keahlian dan informasi
secara
ringkas
isi
dari
website
www.Ninja.web.id
- Menu Navigasi
- Tombol like
- Tombol Kontak
- Kontak Form
2.
Profil
Menampillkan Informasi mengenai
keahlian dan informasi secara ringkas
isi
dari
website
www.Ninja.web.id
- Menu Navigasi
3.
Portfolio
Menampillkan karya dalam bentuk
thumbnail yang apabila di klik maka
gambar akan menjadi besar.
- Menu Navigasi
4.
Other
Menampillkan kegiatan lagi pemilik
website dengan menampilkan blog
- Menu Navigasi
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
56
Layout
Gambar 40. Layout
Layout atau tata letak merupakan sebuah esensi yang penting, guna menciptakan efek keteraturan dan harmonisasi. Penggunaan layout diteentukan dengan
menggunakan grid system dan pembagian kolom.
Dalam Website Portfolio ini jumlah kolom yang digunakan adalah 1
kolom. Penggunaan grid sistem bertujuan agar pengunjung bisa mudah mengikuti
alur baca sehingga cukup sistematis dan tidak membuat bingung.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
57
i-4. Wireframes
Halaman Home atau Service
Halaman Profil
Halaman Portfolio
Halaman Other (lainnya)
Gambar 41. Wireframe
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
58
ii Desain Visual
ii - 1. Draft Desain Visual
Halaman Service
Halaman Profil
Halaman Portfolio
Halaman Other (lainnya)
Gambar 42. Layout Desain Web
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
59
ii - 2. Komentar
Logo Final
Ketika website telah masuk ke bagian tahapan
‘visual design’ logo pintu gerbang dirasa
kurang memorable, dan solusinya untuk
menambah nilai pada web ini ialah dengan
menggunakan gambar topeng yang digunakan
karak- ter ninja sebagai logo utama website ini. Font
disesuaikan dan digunakan karakter font yang tegas
Gambar 37. Logo Final
dengan tagline menggukan Font jenis Handwriting
font : Diavlo
6x
3.5x
0.5x
x
font : Freestyle Script
Gambar 43. Logo Standard
CMYK
RGB
WEBSAFE
: 100 %
:0%
: 00
: 100 %
:0%
: 00
: 100 %
:0%
: 00
font : Delicious
arti warna hitam :
Elegan dan menunjukan sebuah kecenderungan
Misterius.
: 100 %
CMYK
WEBSAFE
: 196 %
: C4
: 100 %
: 22 %
: 16
: 100 %
: 28 %
: 1C
: 20 %
8
RGB
:0%
arti warna merah :
Kuat, berani, percaya diri, gairah
Merah adalah warna yang punya banyak arti, mulai
dari cinta yang menggairahkan hingga kekerasan
perang. Warna ini tak cuma memengaruhi psikologi
tapi juga fisik. Penelitian menunjukkan menatap
warna merah bisa meningkatkan detak jantung dan
membuat kita bernapas lebih cepat 8
Menurut Leatrice Eisman, seorang konsultan warna dan penulis buku More Alive With Color dikutip di
http://nasional.kompas.com/read/2008/10/09/15551015/psikologi.dan.arti.warna
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
60
ii - 3. Perbaikan Desain dan Memilih Desain
Perbaikan yang terjadi pada pada tahapan desain meliputi:
- Perubahan Logo
- Perubahan pada sisi penggunaan bahasa indonesia pada menu navigasi dan segala
aspek bahasa yang terdapat pada website. Namun demikian pada istilah-istilah
asing yang terasa aneh dan sulit dimengerti jika diterjemahkan, maka penulis tidak
menterjemahkan ke bahasa indonesia
- Perubahan warna dan membuat desain untuk latar belakang. Diawali dengan
gambar pensil, diwarnai kemudian dibuat versi 3Dnya. berikut adalah proses pembuatan latar belakang
Artwork Gambar 2D
Artwork Gambar 3D
Final Artwork Gambar 3D
Gambar 32. Diorama
Gambar 43. Proses pembuatan desain latar belakang
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
61
iv - Mengembangkan Situs
iv - 1. Konfirmasi Spesifikasi Teknis yang digunakan
Spesifikasi Teknis yang dibutuhkan
Ukuran
: 1366 x 768px (resolusi LCD 19inch dan resolusi Laptop)
Layout
: Horisontal
Warna
: kecenderungan warna gelap
Software
: Adobe Photoshop dan Illustrator
- Blender 3D
- Notepad ++ (Text Editor)
- Instant WP (web server untuk localhost)
- CMS Wordpress
Gambar 44. beberapa software yang penulis gunakan untuk membuat website
Lainnya:
- OS Windows 7
- Browser Chrome, Firefox dan IE8
- Beberapa plugin web developer Google Chrome
- JRuler dan Pixus (Desktop ruler)
- ColorPic (Color Picker)
- Font Picker (software memilih huruf)
Domain
: www.Ninja.Web.id
Hosting
: kapasitas 100mb (www.iixmedia.com)
Jenis Website : Dinamis
Info tambahan :
Desain website akan di translate menjadi sebuah themes yang bisa digunakan oleh
CMS Wordpress. Hal ini tidak terlalu sulit penulis lakukan karena sejak tahun 2010
penulis telah mempelajari hal ini.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
62
Teknik web menggunakan HTML5 dan CSS3 dimana efisiensi gambar bisa
dimaksimalkan sehingga proses load (memuat) suatu halaman bisa semakin optimal. Website ini akan ditampilkan dalam bentuk ‘One page Portfolio’ (Portfolio
satu halaman) dimana semua informasi ditampilkan hanya dalam satu halaman.
Kekurangan teknik ini ialah kecenderungan load yang lama jika kita tidak memperhitungkan informasi yang ingin ditampilkan. Kelebihannya ialah load halaman
hanya satu kali sehingga web terkesan sangat cepat.
Selain itu penulis akan menggunakan teknik Parallax dimana antara
gambar1 dan gambar2 bisa bergerak dengan kecepatan yang berbeda sehingga
menimbulkan efek 3D. Menterjemahkan desain kedalam bentuk HTML dibuat
dengan menggunakan Notepad ++. Menggambar dengan Code, istilah yang sangat
super sekali buat saya. Namun demikian dengan proses ini, web bisa lebih efisien
dan optimal dalam me-load tiap-tiap halaman.
Gambar 45. Notepad ++ software utama untuk coding website
Untuk proses pembuatan gambar 3D penulis dibantu oleh ‘sahabat pena’
yang dikenal melalui Facebook. Seorang Kawan yang tinggal di Kota Malang.
Wisnu Sekti namanya, beliau sering menjuarai lomba 3D.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
63
iv -2. Review Projek Timeline
Merencanakan batasan waktu Projek ini agar bisa selesai tepat pada waktunya. Berikut adalah estimasi penghitungan lamanya waktu pengerjaan
5. Test dan
Perbaikan
3. Desain
Visual
1.Definisi
Projek
bulan 1
bulan 2
bulan 3
2.Struktur
Website
4. Mengembangkan
Website
Gambar 46. Timeline Projek
6. Luncurkan
atau Publikasikan
Estimasi pengerjaan sekitar 45 Hari efektif. Satu hari dihitung selama 12jam. Agar
projek bisa sesuai dengan rencana dan projek bisa dikerjakan secara professional
maka penulis membuat tim kreatif yang dipimpin langsung oleh penulis. Berikut
susunan tim kreatif
- Erwin prasetyo
Project Leader, Konseptor, Web Desainer, Pengembang Web (wordpress), Desainer
Grafis dan Editor
- Wisnu Sekty
3D Blender Artist,
- Lia Amalia
Desainer Grafis & Digital Imaging artist
- Aga Pillar, Ryan Hernando, Dwi Pamungkas dam Nasrudiyanto
Tester Web
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
64
iv -3. Membangun dan Mengintegrasikan situs
Gambar 47. Proses Membangun dan mengembangkan situs
a . Desain Website
Proses yang dilakukan
pada tahapan ini
- Membuat dan Menentukan Layout
- Menentukan Warna
- Menentukan Style yang
akan digunakan
- Membuat Tombol
- Membuat Navigasi
b . Translate HTML
Proses yang dilakukan pada
tahapan ini
- Menterjemahkan apa yang
telah di buat dalam desain
dengan
menggunakan
Adobe Illustrator kedalam
bahasa HTML. Coding
sangat
berperan
besar
disini. Karena teknik telah
di tinggalkan karena kurang
efisien.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
c. Translate Wordpress
Themes
Setelah desain web di
translate menjadi bahasa
HTML selanjutnya bahasa
HTML tersebut disesuaikan kembali agar bisa
mengikuti standard struktur themes wordpress.
Wordpress seperti CMS
lainnya
menggunakan
bahasa PHP sehingga
tingkat keamanan web
lebih aman.
65
Gambar 48. Desain Website dengan menggunakan software Adobe illustrator CS5
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
66
Gambar 49. Translate HTML dan Translate Wordpress Themes menggunakan Text Editor Notepad ++
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
67
Gambar 50. Cek code yang error dengan menggunakan google chrome. Klik-kanan kemudian pilih inspect elemen
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
68
Gambar 51. Instant WP aplikasi web server agar CMS Wordpress bisa dijalankan.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
69
Gambar 52. Dashboard Wordpress. Tempat untuk memanage data website.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
70
Mengintegrasikan Facebook ke
dalam website.
Penulis mengintegrasikan website
dengan jejaring sosial facebook.
dengan menggunakan Like Box
- Buka halaman
https://developers.facebook.com/do
cs/reference/plugins/like-box/
- Atur konfigurasi ‘Like Box’ yang
ingin digunakan.
- ‘ Get code’ , pilih iframe.
- Salin code tersebut kemudian di
tempel dibagian website yang ingin
ditampilkan. Penulis memasang like
box di sidebar di dalam artikel
- selesai
Gambar 53. Mengintegrasikan Website dengan jejaring sosial Facebook
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
71
Tampilan Website Jadi
Berdasarkan data yang diperoleh seperti penentuan konten yang ingin
ditampilkan, sitemap dan wireframe. berikut tampilan situs yang telah dikembangkan. Dalam proses ini prosesnya ialah Desain Web - HTML - wordpress theme
Gambar 54. halaman “Home”
Menampilkan secara ringkas isi
keseluruhan dari website
Kontak yang digunakan dalam
website Portfolio interactive ini
memiliki 2 jenis. Yang pertama
adalah 'Get in touch', informasi
yang didapat dari pengunjung
adalah mengenai:
- nomor kontak mobile phone
penulis
- alamat email dari penulis
halaman ini bersifat statis,
karena sifatnya yang satu arah.
Kemudian yang kedua adalah
'halaman kontak'. Ini adalah
halaman dimana pengunjung
bisa mengirimkan pesan tanpa
harus membuka web mailnya.
Halaman ini berupa contact
form.
Halaman ini bersifat
dinamis dan memiliki sisi
interaktif. Dahulu halaman ini
disebut sebagai Guest book,
namun trend web pada saat ini
adalah halaman tersebut disebut
sebagai halaman kontak.
Gambar 55. halaman “Profil”
Menampilkan informasi
mengenai Profil, Keahlian yang
dimiliki, dan halaman kontak
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
72
Gambar 56. halaman “Portfolio”
Menampilkan karya pilihan yang
pernah dibuat
Portfolio ini hanya berupa thumbnails saja. Thumbnails ini bila di
klik pengunjung maka akan
menampilkan gambar dalam
ukuran yang lebih besar.
Gambar 57. halaman “Lainnya”
Menampilkan informasi mengenai
tulisan terbaru (blog), gratisan
dan jualan
Gambar 58. halaman blog.
informasi lainnya yang didapat
diantaranya. Tulisan terbaru dan
Facebook Like box
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
73
v. Pengujian
Anda harus menyediakan waktu untuk pengujian formal. Idealnya, Anda
harus mengidentifikasi seseorang untuk menjadi Lead Quality Assurance. Prioritas
ini adalah untuk membuat rencana QA realistis, mengelola proses pengujian,
masalah prioritas.
Memperhatikan Kualitas
1. Konten - akurat, dimengerti, ejaan, tata bahasa (review yang dilakukan oleh konten
kontributor / editor konten)
2. Links - review situs link yang rusak
3. Fungsi - cara situs melakukan fungsi didefinisikan dalam proyek asli
definisi, membuat daftar tugas dan melakukan pengujian metodis
4. Validitas - validate (X) HTML, CSS memvalidasi
5. Aksesibilitas
6. Browser / OS / Resolusi
7. Kecepatan Koneksi - menggunakan Analyzer Web Page untuk mendapatkan analisis
8. Usability - kegunaan perilaku informal atau formal sesuai dengan target pasar.
9. Search Engine Optimization - meninjau situs untuk markup semantik.
10. Load Testing - hubungi administrator server untuk membahas teknik pengujian
beban
11. Keamanan - permintaan otomatis SecurityXM Pindai, review otorisasi file,
tinjauan
metode otentikasi, melakukan tes otentikasi
Prioritaskan Masalah
Mengambil waktu untuk melakukan pengujian sebelum produksi merupakan
elemen penting dalam peluncuran sebuah situs yang berkualitas. Ada keseimbangan
antara kesempurnaan dan kualitas realistis yang harus diperhatikan. Seperti memantau daftar masalah yang ditemukan selama fase pengujian, memprioritaskan mereka
dalam setidaknya tiga kategori:
Prioritas 1 - kritis, harus diperbaiki sebelum peluncuran
Prioritas 2 - Perbaikan untuk situs menjadi lebih baik
Prioritas 3 - Peningkatan untuk masa depan, baik ide / fitur, akan mempertimbangkan
untuk masa mendatang.
Memperbaiki dan Mengatasi Masalah.
Setelah Masalah ditemukan, langkah berikutnya ialah memperbaiki masalah
tersebut dengan sesegera mungkin dengan memperhatikan jadwal yang telah ditetapkan.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
74
5.3 c. Paska-Produksi
vi. Luncurkan / Publikasi
vi - 1. Style Website
Sebuah panduan Style Website terdiri dari unsur-unsur :
- Visual Desain Standar - logo, warna, tipografi (untuk menjaga standar merek yang
ditampilkan)
- Konvensi Penamaan - untuk file, direktori, css, gambar, judul
- Struktur Situs - dokumen situs diagram dan menunjukkan bagaimana struktur
dibangun dalam sebuah website
- template - menyediakan (X) HTML template dan tata letak CSS menunjukkan,
tipografi, ukuran,
- Memperhatikan aspek warna, navigasi, menu
font : Diavlo
6x
3.5x
0.5x
x
font : Freestyle Script
Gambar 43. Logo Standard
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
font : Delicious
75
vi - 2.Peluncuran Situs
Website akan diluncurkan bertepatan dengan Pameran Tugas Akhir Kelas
Karyawan - Program Studi Desain Produk / Grafis dan Multimedia Fakultas
Teknik Perencanaan dan Desain. Pada Tanggal 18 - 19 Februari 2012.
vi - 3. Maintenance (perawatan)
Merencanakan Perawatan yang dibutuhkan
Setelah merencanakan lamanya waktu yang dibutuhkan untuk membuat
website. Kemudian langkah penting lainnya ialah Merencanakan perawatan yang
dibutuhkan website portfolio online ini. Perawatan dari 2 sisi, melalui website
dengan cara mengakses CMS Wordpress dan sisi lainnya merawat melalui hosting.
Perawatan yang dilakukan diantaranya:
Perawatan melalui website
Perawatan melalui hosting
- Membalas Komentar Pengunjung
- Menghapus komentar Spam
- Memperhatikan Statistik Web
- Memperhatikan sisa ruangan kosong
kapasitas hosting
- Mem-banned IP address SPAM
Waktu untuk perawatan via Web dilakukan tiap pekan pertama, sedangkan
perawatan melalui Hosting dilakukan tiap pekan kedua. Hari yang ditetapkan ialah
hari Rabu, untuk menghindari lalu lintas pengunjung yang (mungkin) padat.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
76
vi - 4. Domain dan Hosting
Gambar 59. Daftar harga Domain di www.iixmedia.com
Nama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan
komputer ataupun internet. Nama domain berfungsi untuk mempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk
mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang
rumit yang dikenal sebagai alamat IP. Nama domain ini juga dikenal sebagai sebuah
kesatuan dari sebuah situs web seperti contohnya "wikipedia.org". Nama domain
kadang-kadang disebut pula dengan istilah URL, atau alamat website.
Ada beberapa domain yang populer seperti .com , .net , .org . Namun
sayangnya apa yang dimaukan penulis tidak ada. Untuk mengecek tersedia atau
tidaknya domain bisa menggunakan ‘alat’ ini yaitu www.whois.com.
Akhirnya penulis mendapat domain yang bagus. Domain ini adalah domain
indonesia yang dijual di www.pandi.or.id. Domain itu adalah www.Ninja.Web.id
Selain domain yang bagus harganya pun terjangkau. Bila domain .com berharga
sekitar Rp 90 ribu rupiah pertahun, untuk domain .web.id harga sewa pertahunnya
hanya Rp 25 ribu rupiah.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
77
Gambar 59. Spesifikasi Domain www.Ninja.Web.id
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
78
Hosting
Gambar 60. Daftar harga Hosting di www.iixmedia.com
Hosting adalah tempat untuk menyimpan Data di server yang nantinya akan
diakses melalui website. Hosting terdiri dari 2 jenis, Hosting yang berada di dalam
negeri dan Hosting yang berada di luar negeri. Hosting Luar negeri biasanya terletak di Amerika atau biasa disebut hosting USA. Sedangkan Hosting Dalam negeri
disebut IIX yang terletak di gedung cyber, Kuningan Jakarta Selatan.
Keduanya memiliki kelebihan dan kekurangan. Hal yang bisa kita cermati
ialah, jika banyak pengunjung berasal dari dalam negeri, maka sebaiknya menggunakan hosting dalam negeri agar akses bisa lebih cepat dibandingkan hosting luar
negeri.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
79
Gambar 61. Spesifikasi hosting www.Ninja.Web.id
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
80
5.4 Strategi Pemasaran
Strategi Pemasaran yang penulis gunakan ialah ‘Menembus Pasar’. Strategi
ini sebenarnya digunakan untuk meningkatkan penjualan dengan menawarkan
barang atau jasa kepada sasaran pembeli yang sama, baik yang telah mengguanakn
barang atau jasa maupun yang belum. Tujuannya ialah memperoleh pangsa pasar
yang yang lebih besar.
Upaya-upaya praktis yang dapat dilakukan antara lain:
a. Meningkatkan periklanan agar dapat dikenal dengan baik. Misal dengan mem
buat banner online yang di pasang di website lain.
b. Melakukan promosi penjualan dengan cara memberikan hadiah, diskon, voucher
dan sebagainya.
c. Meningkatkan pengenalan merek dengan melakukan publisitas misal dengan
membuat halaman facebook.
5.4.1. Media Promosi
Media promosi yang dilakukan untuk meningkatkan reputasi dan agar
merek www.Ninja.Web.id semakin dikenal oleh masyarakat yang sesuai dengan
target pasar ialah dengan melakukan publikasi dan memasang iklan secara online.
Banner ini nantinya akan ditaruh di forum semisal Mac.Web.id ataupun Kaskus.
Berikut spesifikasi ukuran desain banner yang akan dibuat untuk mengiklankan
www.Ninja.Web.id
a. 125 x 125px
b. 300 x 300px
c. 480 x 60 px
d. iklan berupa teks melalui Google Adsense
e. Wallpaper yang bisa di download secaera gratis di website www.Ninja.Web.id
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
81
Adapun desain yang dibuat ialah dengan menggunakan ornamen pola ombak
jepang dan, warna merah yang akan membuat audience menjadi tertarik disebabkan
warna merah secara psikologis cenderung lebih menonjol dibandingkan warna lain.
Jenis file yang dibuat berupa file .Gif sehingga bisa dibuat animasi transisi
Berikut adalah desain banner untuk mempromosikan www.Ninja.Web.id
a. Banner ukuran 125 x 125 px
transisi 1
transisi 2
skala 1: 1
b. Banner ukuran 300 x 300 px
300px
300px
transisi 1
transisi 2
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
skala 1: 2
82
c. Banner ukuran 480 x 60 px
skala 1: 0.75
d. iklan berupa teks
Ninja.Web.id - Membuat Website unik dan Menarik
e. wallpaper desktop (1366 x 768px)
skala 1: 0.25
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
83
5.4.2. Media Publikasi
Dengan menggunakan jejaring sosial proses publikasi dilakukan. Beberapa
saat sebelum dilakukannya Publikasi, informasi mengenai hal tersebut di umumkan
di halaman facebook www.facebook.com/ninjawebid. Tanggal publikasi di lakukan
bertepatan dengan Pameran Tugas Akhir yaitu pada tanggal 18 Februari 2012.
Gambar 62. Profile Picture Halaman Facebook
sebagai salah satu media publikasi yang digunakan untuk mempromosikan Ninja.Web.id.
Penggunaan kata-kata bersifat mengajak dan
memberikan informasi secara ringkas isi dari
Ninja.Web.id
Gambar dibuat berdasarkan desain dari website
Ninja.Web.id. Penggunaan Karakter Ninja yang
sedang menggunakan Laptop yang sedang membuka halaman Ninja.Web.id. Desain dibuat ‘out
of the box’ dengan karakter Ninja yang seolah
olah keluar dari kolom profile picture.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
84
Gambar 63. Halaman FB Ninja.Web.id
Gambar 64. Statistik Halaman FB Ninja.Web.id
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
85
5.4.3 Aplikasi Desain pada media cetak
1.
2.
3.
4.
1. Secondary sheet
2. Letterhead
3. Envelope
4. Name Card
Gambar yang ditampilkan skala 1 :50
Gambar 65. Aplikasi Desain Pada Media Promosi
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
86
5.
6.
7.
8.
9.
10.
5. Mousepad
6. Pembatas Buku
7. Cover CD
8. CD label
9. Sticker
10.Mug
Gambar yang ditampilkan skala 1 :50
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
87
5.5 Pameran Tugas Akhir
Pameran tugas akhir merupakan salah satu pelengkap dan persyaratan agar
karya tugas akhir ini dianggap berhasil dan memenuhi persyaratan yang dibuat oleh
pihak Universitas Mercu Buana
5.5.1 Konsep Pameran
Proses Kreatif akan
ditampilkan
pada
dinding sebelah kanan
Saya mendapat posisi stan pameran di posisi No. 3 (lihat pada ilustrasi di bawah. Desain
pameran dengan suasana rumah jepang, khas dengan pintu geser dan dinding kayu. Material gambar akan di cetak dengan cetak digital.
ukuran : lebar: 5meter ; Tinggi: 2meter
ilustrasi dibuat oleh vivi
Gambar 65. Konsep Pameran
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
88
5.5.2 Dokumentasi
Gambar 66. Stan Pameran
Stan Pameran dengan nuansa interior
rumah jepang. Topeng Ninja dibuat
sebagai media pendukung.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
89
Pameran Tugas Akhir 18 - 19 Februari 2012
Stan Pameran dengan
nuansa interior rumah
jepang. Topeng Ninja
dibuat sebagai media
pendukung.
Berbagi
Serunya
website
Ninja.Web.id, kali ini bersama Bpk
Ari Subekti, Salah satu Dosen yang
selalu mendukung dan memberikan
semangat untuk berpikir positif dan
kreatif.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
90
Menarik perhatian pengunjung dengan menggunakan
Mini X-Banner.
Beberapa
contoh
aplikasi
desain
Ninja.Web.id pada
Desain stassionery
Buku Komentar tempat dimana pengunjung
bisa memberi komentar dan meninggalkan
informasi agar dapat saling berhubungan.
Membuat Portfolio Online Interaktif www.Ninja.Web.id
http://digilib.mercubuana.ac.id/
91