Cara Merancang Halaman Web

8/16/2019 Cara Merancang Halaman Web

1/26

CARA MERANCANGHALAMAN WEB


2/26

CARA MERANCANG HALAMAN WEB

Jika Anda ingin mendesain dan membuat halaman web,ini akan !auh lebih mudah !ika Anda membuat peren"anlebih dahulu# $i %ase peren"anaan, peran"ang dan klienbeker!a sama untuk menemukan %rmat dan tata letak 'ang sesuai dengan kebutuhan mereka# )rses peren"a

mempengaruhi "rak atau ga'a situs tersebut, bisa dibmerupakan aspek terpenting dalam mendesain web,khususn'a !ika itu untuk keperluan bisnis#


3/26

A MEMB*A+ +R*-+*R $AAR

.# +entukan %ungsi situs web tersebut#

/# Buatlah diagram peta situs &site map(#

0# Cbalah metde pen'usunan knsep dengan kartu#

1# Gunakan kertas dan papan buletin, atau papan tulis

2# Buatlah in3entaris knten#


4/26

. +EN+*-AN 4*NG5 5+* WEB +EREB*+#

• Apakah web tersebut memerlukan tre%rn

kmentar pengguna6 )erlukah penggunantin'a6 Apa web tersebut berrientasi artikel

gambar6 emua pertan'aan ini dan pertanmembantu Anda dalam mendesain dan meran"a

• )rses peren"anaan ini bisa disusun terutama !ika itu untuk perusahaan besar dan b

terlibat dalam pem

Jika Anda membuat situs pribadi,Anda mungkin sudah tahu

!awabann'a# Namun, !ika Andamembuat situs untuk rganisasi,

perusahaan, atau rang lain, Andaperlu men"ari tahu apa 'ang

mereka inginkan dan %ungsinalitassitus tersebut# emua 'ang Andatentukan di sini akan berpengaruhsaat halaman web selesai nantin'a#


5/26

/ B*A+LAH $5AGRAM )E+A 5+* &5+MA)(#

$iagram peta situs mirip dengan diagr&7w "hart(, menun!ukkan bagaimanapengguna beralih dari halaman satu kehalaman berikutn'a# Anda tidak memehalaman web di tahap ini, "ukup aliranumumn'a sa!a# Anda bisa menggunaka

prgram kmputer untuk membuat diaatau membuat sketsa sendiri di kertasGunakan diagram ini untuk menun!ukkknsep pen'usunan hierarki dan knekhalaman web#


6/26

0 C8BALAH ME+8$E )EN9**NAN-8NE) $ENGAN -AR+*#

alah satu metde ppuler pen'usunan web se"aragrup adalah dengan menggunakan se!umlah kartuuntuk mengetahui harapan setiap rang# Ambilse!umlah kartu "atatan dan tulis satu per satuknten dasar halaman web di masing:masing kartu#

usunlah kartu:kartu ini bersama dengan tim Andauntuk menemukan knsep terbaik# Cara ini ""kdigunakan saat Anda berklabrasi dengan ranglain dalam pembuatan halaman web


7/26

1 G*NA-AN -ER+A $AN )A)AN B*LEA+A* )A)AN +*L5 )*+5H#

5ni adalah metde peren"anaan risindengan anggaran ke"il, Anda bisa de"epat menghapus atau menggeser kdan mengubah alurn'a# Gambarlah dweb Anda di kertas, lalu hubungkan k

kertas itu dengan benang, atau gambgaris di papan tulis# Cara ini sangat "digunakan dalam sesi "urah pendapa


8/26

2 B*A+LAH 5N;EN+AR5 -8N+EN#

ebenarn'a ini "enderung lebih tepat digunakandalam peran"angan web ulang daripadaperan"angan web baru# Masukkan setiap bagianknten atau halaman web 'ang sudah !adi kelembar la!ur &spreadsheet(# Buatlah "atatan berisi

tu!uan masing:masing knten atau halamantersebut, gunakan da%tar ini untuk menentukanbagian 'ang perlu dibuang dan 'ang perludipertahankan# Anda bisa men'ederhanakanstruktur web dan memudahkan prsespendesainan ulang nantin'a#


9/26

B MEMB*A+ -ERANG-A $AAR H+ML

.# Buatlah kerangka dasar &wire%rame( untuk memantahierarki halaman web#

/# Cbalah metde Gra' B


10/26

. B*A+LAH -ERANG-A $AAR &W5RE4RAME(*N+*- MEMAN+A)-AN H5ERAR-5 HALAMANWEB#

-erangka dasar H+ML adalah"etak biru dari situs 'ang akan

Anda buat, han'a menggunakantag paling dasar dan "nth&bl"k=template( knten# -erangka

ini men!awab pertan'aan, >Apa

'ang terlihat di web dan dimana6? )em%rmatan dan

pengaturan ga'a tidak diperlukandalam pembuatan kerangka ini#

• Anda bisa melihat struktur dan diagram ali

kerangka dasar sebelum Anda memilih

• -erangka dasar H+ML tidak statis seperti

Anda bisa dengan "epat menggeser "

memb

• -erangka dasar bersi%at interakti% 'ang mebagi pengembang web maupun klien# -arena

ditulis dengan kde H+ML sederhana

mena3igasikann'a dan mengetahui "ara halaman web# Hal ini tidak bisa dilak


11/26

/ C8BALAH ME+8$E GRA9 B8@#

Blk atau srt knten halamanweb Anda di Gra' B


12/26

0 C8BALAH )R8GRAM )EMB*A+-ERANG-A $AAR#

Ada berbagai prgram 'angbisa Anda gunakan dalamprses pembuatan kerangkadasar web# Ban'akn'a kde&bahasa( pemrgraman web

'ang harus Anda kuasaiberbeda:beda untuk masing:masing prgram# Beberapaprgram 'ang "ukup ppulerantara lain

• )attern Lab# itus ini khusus untuk >desain atm

dianggap sebagai >mlekul? 'ang men'usun h

• Jump"harts# Halaman web ini men'ediakan la'a

dan pen'usunan kerangka dasar web# itumengharuskan Anda berlangganan, tetapi Anda

kerangka web dengan "epat tanpa harus mengp

• Wire%'# Wire%' adalah situs lain 'ang menawarka)engembang web bisa mendapatkan


13/26

1 G*NA-AN MAR-AH &MAR-*)( H+MLE$ERHANA#

-erangka dasar 'ang baikakan mudah dikn3ersikan kesitus aslin'a# Jangan terlalumemikirkan pengaturan ga'aweb selama prses

pembuatan kerangka ini#Gunakanlah markah 'ang bisadipahami dan diubah denganmudah#

• -erangka dasar sederhana !auh lebih baik# markah adalah untuk membangun struktur# +a

diatur nanti dengan C dan


14/26

2 B*A+LAH -ERANG-A $AAR *N+*-E+5A) HALAMAN WEB#

Anda mungkin tergda untuk men'amakan setiap halamweb dengan satu kerangka dasar# N'atan'a, hal ini hanmembuat situs Anda men!adi biasa sa!a dan membsanBuatlah kerangka berbeda untuk tiap halaman, Anda akmengerti bahwa setiap halaman memerlukan desain se


15/26


16/26

. )ER5A)-AN -8N+EN EBEL*MMEMB*A+ HALAMAN WEB#

Anda akan !auh lebih mudahmelihat pratin!au tampilan web !ika Anda sudah memiliki kntenaktual daripada menggunakansampel atau pla"ehlder# Andatidak perlu memiliki terlaluban'ak knten, tetapi maketAnda akan !auh terlihat lebihbaik !ika menggunakan salinangambar aslin'a#

• Anda tidak harus memiliki seluruh materi artikelharus ada pk


17/26

/ 5NGA+LAH BAHWA -8N+EN 9ANGBAG* B*-AN HAN9A BER55 +E-#

5nternet !auh lebih kmpleksdaripada halaman websederhana berisi tulisan# Andamemerlukan berbagai kntenberbeda agar bisa

men"iptakan web 'ang bagusuntuk menarik danmengundang pengun!ung#Cnthn'a

• +ransmisi web atau w

•


18/26

0 M5N+ALAH BAN+*AN 48+8GRA4ER)R84E58NAL#

• Jika Anda ingin memasukkan

%t ke dalam situs Anda, kesan

pertama 'ang didapatkan dari

web Anda akan !auh lebih baik

!ika diisi dengan %tgra

pr%esinal# atu %t 'angbagus !auh lebih bernilai

daripada dua puluh %t

berkualitas rendah#

• Carilah sar!ana seni %tgra 'ang baru lulus s

lebih murah dibandingkan dengan %tgra%e

sudah la


19/26

1 +*L5LAH AR+5-EL BER-*AL5+A#

-nten tulisan di halaman webakan menentukan !umlah trakweb Anda# Walaupun Anda tidakperlu terlalu memusingkanpembuatan knten dalam prsesperan"angan ini, tidak ada

salahn'a untuk mulaimemikirkann'a karena nantin'aAnda !uga memerlukan kntense"ara reguler saat situs sudahakti%#

• elain knten artikel, ada materi tulisan 'an

miliki dalam prses pen'usunan halaman web# kntak, nama perusahaan, atau apa pun 'an

se"ara multi


20/26

D MENGUBAH KONSEP MENJADISITUS

.# usunlah elemen:elemen dasar#

/# Buatlah tata letak sederhana#

0# Buatlah maket#

1# Ganti "nth knsep dengan knten asli#

2# Buatlah pedman ga'a web## +erapkan ga'a web tersebut#


21/26

. **NLAH ELEMEN:ELEMEN $AAR

usunan elemen ini akanteraplikasikan di setiap halaman disitus Anda, misaln'a "atatankepala, "atatan kaki, dan menuna3igasi# Aturlah dengan ga'a'ang sangat sederhana sehingga

Anda bisa memeriksa tampilansemua halaman# Hal ini sangatberguna saat Anda berlan!ut keprses pen'usunan tata letak web#

• Jangan terlalu memusingkan detail, "balah &pratin!au( tampil


22/26

/ B*A+LAH +A+A LE+A- E$ERHANA#

Mulailah dengan menggeserpsisi !am dari klmkerangka dasar ke lkasiaktual di halaman#Cnthn'a, Anda mungkin

ingin menggeser "nth menuna3igasi ke sebelah kirihalaman dan da%tar pkkberita ke kanan#

• +eruslah bereksperimen dengan tata letak we

halaman, sebelum Anda berlan!ut ke tahap rang lain ikut melihatn'a untuk memeriksa

'ang Anda


23/26

0 B*A+LAH MA-E+#

Gunakan prgram seperti )htshpuntuk membuat maket atau "nthhalaman situs Anda# Gunakan tataletak 'ang telah Anda susun sebagaipanduann'a# Anda bisa membuatmaket lebih "epat dan mendapatkanhasil 'ang diinginkan dengan prgram

penglah gambar# Hasil gambar:gambar ini nantin'a bisa di!adikansebagai re%erensi dalam prsespenulisan kde pemrgraman web#

• Masukkan knten aktual di dalam maket u


24/26

1 GAN+5 C8N+8H -8NE) $ENGAN-8N+EN AL5#

+ambahkan knten dan elemen ke halaman web# Janganmemusingkan pengaturan ga'a web untuk saat ini, sussemuan'a ke lkasi 'ang benar# Hal ini akan membantudalam menin!au perubahan ga'a web 'ang Anda buatnantin'a#


25/26

2 B*A+LAH )E$8MAN GA9A WEB#

Hal ini sangat penting untukmen!aga perpaduan ga'a,terutama untuk situs 'ang besar#

Jika situs tersebut ditu!ukan untukkeperluan bisnis dan sudahmemiliki merek atau "rak sendiri,

hal ini harus dipadukan dengandesain situs# Hal:hal 'ang perludipertimbangkan dalampembuatan pedman ga'ahalaman web

•

•

•

• +autan &akti%, tida

• )e


26/26

+ERA)-AN GA9A WEB +EREB*+#

etelah Anda menemukan ga'a dan desain 'ang pas,implementasikanlah# C adalah salah satu "ara termuduntuk mengimplementasikan ga'a di halaman web atauseluruh situs tersebut# Lihat petun!uk berikut untuk lebimemahami detail penggunaan C#

Cara Merancang Halaman Web

Documents

Transcript of Cara Merancang Halaman Web