BAB IV KONSEP PERANCANGAN

BAB IV KONSEP PERANCANGAN A. Tataran Lingkungan 1. Informasi a. Sejarah Kota Lama adalah potongan sejarah, karena dari sinilah ibukota Jawa Tengah ini berasal. Semarang dan Kota Lama seperti dua sisi mata uang yang tak bisa dipisahkan begitu saja. Dan tentu saja ini menghadirkan keunikan tersendiri. Sebuah gradasi yang bisa dibilang jarang ada ketika dua generasi disatukan hingga menciptakan gradasi yang cantik sebenarnya. Pada dasarnya area Kota Lama Semarang atau yang sering disebut Outstadtatau Little Netherland mencakup setiap daerah di mana gedung‐gedung yang dibangun sejak zaman Belanda. Namun seiring berjalannya waktu istilah kota lama sendiri terpusat untuk daerah dari sungai Mberok hingga menuju daerah Terboyo. Secara umum karakter bangunan di wilayah ini mengikuti bangunan‐bangunan di benua Eropa sekitar tahun 1700‐an. Hal ini bisa dilihat dari detail bangunan yang khas dan ornamen‐ornamen yang identik dengan gaya Eropa. b. lokasi Lokasi merupakan sesuatu yang penting dalam hal ini oleh karena itu dalam rancangan desain web ini memberikan informasi letak dan posisi gedung yang ada di kota lama semarang dengan keberagaman sejarah yang ada didalam kawasan kota lama semarang. 2. Budaya Kota Lama Semarang adalah kota yang memiliki beragam cagar budaya dan bangunan yang bersejarah oleh karena itu kota lama tersebut harus dilestarikan agar bangunan yang ada dikota lama semarang tidak punah dimakan 21
oleh zaman yaitu dengan merancang website agar budaya yang ada di semarang dapat dilestarikan. 3. Publikasi a. Edukasi Teknologi informasi meliputi segala hal yang berkaitan dengan proses, penggunaan sebagai alat bantu, manipulasi, dan pengelolaan informasi. dalam hal ini sangat berperan dalam mengedukasikan kepada para audiens / masyarakat luas khususanya masyarakat semarang yang belum mengenal lebih jauh tentang wisata kota lama semarang. b. Event Event merukan media publikasi yang banyak di selenggarakan di kota semarang dengan media ini kita mengetahui beberapa event atau budaya yang ada dikota semarang yang sudah menjadi adat yang turun temurun dari nenek moyang kita. B. Tataran Sistem 1. Cara penyebaran Cara penyebaran yang dilakukan adalah melalui internet, Di era yang semakin canggih ini, berkomunikasi tak perlu lagi menggunakan surat, melainkan menggunakan fasilitas digital yang tersedia saat ini, seperti halnya di internet. Internet mampu berperan sebagai media komunikasi, media akses website untuk audiens,dengan internet memudahkan kita dalam penyebaran informasi yang ada di kota lama semarang. Sejumlah penelitian menunjukkan bahwa ada hubungan kuat antara manfaat ponsel dan pertumbuhan ekonomi. Teori yang digunakan di sini adalah bahwa ponsel mendorong peningkatan akses terhadap kesempatan pendidikan, sumber daya kesehatan, bisnis dan kesempatan kerja. Kehidupan manusia sehari‐hari tidak terlepas dari kebutuhan untuk berkomunikasi antara yang satu dengan yang lain. Salah satu alat yang biasa digunakan manusia untuk 22
berkomunikasi jarak jauh adalah telepon genggam atau handphone. Teknologi handphone selalu mengalami kemajuan dari waktu ke waktu. masyarakat tinggal mengakses website kota lama semarang dengan handphone masing‐masing yang sudah dilengakapi dengan internet. 2. Cara Pemanfaatan Meskipun internet sudah sangat mendunia, namun ternyata masih banyak di antara kita yang masih belum paham manfaat website. Website adalah salah satu alat penunjang, sebagai media untuk memberikan atau menyebarkan informasi dan promosi secara online di dunia internet. Dengan website kita dengan mudah menyebarkan informasi yang ingin kita sampaikan secara luas ke seluruh dunia tanpa dibatasi oleh ruang dan waktu.khususnya mengedukasi audiens yang belum mengenal lebih jauh tentang kota lama semarang. Mempromosikan keberadaan nama gedung/lokasi dan juga sejarah gedung kepada masyarakat indonesia umumnya serta masyarakat kota semarang khususnya. Kurang lebih 50 juta orang di Indonesia mengakses internet. dapat mengedukasi audiens yang belum mengenal lebih jauh tentang kota lama semarang dan kegiatan usaha lokal yang ada. C. TATARAN PRODUK 1. VISUAL a. Layout Layout adalah penyusunan dari element‐element menggunaka elemen‐
elemen desain yang berhubungan ke dalam sebuah bidang sehingga membentuk sususnan artistik, tujuan utama layout adalah menampilkan element grafis dan teks agar menjadi komunkatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan. 23
Sketsa Gambar 9 : sketsa ( Dokumen pribadi ) Grafis Gambar 10 : halaman home ( Dokumen pribadi ) 24
ukuran gambar : 600 x 800 pixel Resolution web : 72 dpi Gambar 11 : halaman tujuan wisata ( Dokumen pribadi ) 25
Gambar 12 : halaman sejarah ( Dokumen pribadi ) Gambar 13 : halaman acara ( Dokumen pribadi ) 26
Gambar 14 : halaman google eart ( Dokumen pribadi ) Gambar 15 : halaman google map ( Dokumen pribadi ) 27
b. Warna Warna memberikan dapmpak spikologis,sugesti,suasana bagi yang melihat dn dapat mengkomunikasikan desain kita kepada audience secara efektif. Gambar 16 : Roda warna (Sumber : google.com ) 28
Respon spikologi warna merah : Power,energi,kehangatan,agresif,berpendirian,dinamis dan percaya diri. Warna ada di beberapa tembok yang ada di gedung kota lama semarang. Respon spikologi warna orange : Penggunaan warna orange pada kota lama semarang dikaitkan dengan warna‐
warna yang mendominasi sebagaian warna cat tembok dan gedung. c. Typografi Typografi merupakan seni memilih dan menata huruf pada ruang untuk menciptakan kesan khusus dalam membuat produk desain web yang merupakan salah satu unsur penting yang turut serta menyertai dan melengkapi sebagai kebutuhan informasi.dalam perancangan desain web wisata kota lama semarang menggunakan jenis huruf serif dan sans serif. Jenis font yang digunakan dalam web : Ukuran Font : d. Bentuk Merupakan bagian dari elemen‐elemen grafis yang berfungsi sebagai 29
membentuk karakteristik website kota lama semarang. D. TATARAN ELEMEN 1. Material ( Software ) a. Adobe Ilustrator Alat yang digunakkan untuk pembuatan logo kota lama semarang dan element lainnya yang berbentuk vektor. b. Adobe Photoshop Alat yang digunakkan untuk merisize,dan juga memberi effect serta mengoptimize photo yang digunakkan pada website kota lama semarang. c. Adobe Dreamwever Alat yang digunakkan untuk melayout dan juga untuk kebutuhan yang friendly dalam pembuatan website kota lama semarang. 2. Material ( Coding ) a. HTML Wadah pembentukan layout dengan menggunakan elemen yang dihasilkan software grafis. bahasa untuk memarkup (memformat). HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan “konten” (kata‐kata, gambar, audio, video dan lainnya) dari “Penampilan” (Definisi dari tipe konten dan instruksi bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe‐tipe konten. Element‐elemen memiliki 30
satu atau lebih “tag” yang memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri dengan kurung siku, dan tag “penutup” (tag yang menandakan akhir dari konten) diawali dengan garis miring. Gambar 17 : HTML ( Dokumen pribadi ) b. CSS Pembentukan style terhadap elemen dan action pada website, CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. 31
Gambar 18 : CSS ( Dokumen pribadi) c. JAVASCRIPT Pengaturan segala aksi yang terdapat pada website, JavaScript adalah bahasa pemrograman berbasis java yang merupakan interface pembantu dalam pemrograman web. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan Tag SCRIPT. Gambar 19 : javascript ( Dokumen pribadi) 32
3. Material ( Publish ) a. Hosting Wadah server untuk menyimpan data, suatu space atau tempat di internet yang kita gunakan untuk menyimpan data‐data situs kita.Setiap situs yang ingin kita onlinekan sehingga banyak orang bisa mengaksesnya, harus disimpan pada suatu host. b. Domain Nama situs anda yang unik di dunia internet. Unik disini berarti nama situs anda hanya andalah pemiliknya di internet. nama domain : www.semarangoldcity.com c. Cpanel Sytem administrator upload dan download media pada server, memberikan tampilan grafis dan peralatan automasi yang dibuat untuk memudahkan proses hosting di sebuah situs web. cPanel menggunakan 3 tingkat struktur untuk memberikan fungsi administrator, agen, dan pemilik situs web untuk mengatur berbagai macam aspek dari situs web dan administrasi server melalui sebuah penjelajah web standar. 1. Visual ( visual ) a. Layout Visual yang menarik dan memudahkan audiens dalam penggunaan website. b. Warna Pemilihan warna dari logo dan elemen dalam website yang dinamis dan terstandarisasi sehingga membuat web lebih menarik. c. Typografi Memilih dan memperhatikan typografi dalam penggunaan dan pembuatan web agar mudah terbaca dalam penyampaian 33
informasi tepat pada target audiens. d. Bentuk Menggunakan elemen‐elemen grafis yang berfungsi sebagai membentuk karakteristik website. 2. Visual ( User Friendly ) a. Gui Interface Sebuah tampilan web untuk memudahkan posisi menu website yang akan dibuat. b. One Page Penggunaan one page website ini mengefisienkan kapasitas website di server. c. Parallax Istilah "paralaks" pertama kali berasal dari visual efek videogame 2D Side Scrolling yang menggunakan gambar latar belakang dengan kecepatan gerakan yang berbeda untuk menciptakan ilusi kedalaman selama bermain game. Hal ini umumnya dilakukan dengan membuat latar belakang permainan bergerak lebih lambat dari latar depan dengan tujuan untuk membuatnya tampak lebih jauh. Konsep yang sama berlaku untuk desain situs paralaks di mana latar belakang situs bergerak pada kecepatan yang berbeda dengan sisa halaman lainnya untuk efek visual yang mengesankan yang memungkinkan untuk aplikasi kreatif yang tak terhitung jumlahnya untuk online storytelling. Parallax desain memberikan kesempatan besar bagi penyedia jasa web design surabaya untuk: 34

Memukau pengunjung dengan kedalaman halaman dan animasi pada website 
Melakukan pendekatan bercerita untuk memandu pengunjung melalui situs 
Membuat kunjungan pada halaman bertahan lebih lama dengan mendorong pengunjung untuk menelusuri seluruh halaman 
Memancing keingintahuan 
Mengarahkan pengunjung ke ajakan untuk bertindak 
Meningkatkan kredibilitas situs dengan tampilan interaktif yang inovatif. Gambar 20 : Parallax scrolling ( Sumber : http://google.com.) d. Bootstrap Memudahkan pengunjung dalam mengakses web di berbagai device. 35