20 Langkah dan Cara Membuat Web Dengan Mudah

Hi Sribuddies! Sribu ingin sharing mengenai langkah – langkah yang harus diperhatikan dalam cara membuat web. 

Seperti yang kalian ketahui, website adalah salah satu yang berperan penting dalam dunia usaha. Buktinya akhir-akhir ini banyak sekali perusahaan yang menggunakan website sebagai media promosi. Jadi, tidak heran kalau banyak perusahaan yang rela mengeluarkan biaya yang cukup tinggi untuk membuat dan mempercantik media ini.

Tetapi, banyak sekali designer yang tidak mengerti bagaimana cara membuat web. Padahal, untuk membuat website, designer tidak bisa sembarangan dengan cara membuat web sesukanya, tetapi designer harus memperhatikan beberapa aspek cara membuat web dengan baik. Pada topik kali ini, Sribu akan memberikan langkah – langkah cara membuat web. Disimak ya, Sribuddies!

1. Tuangkan inspirasi ke dalam kertas

 initial sketch cara membuat web 1

Tidak sedikit web designer yang pada awalnya langsung menuangkan inspirasinya pada software desain seperti Photoshop tanpa memikirkan konsep seperti apa yang akan Anda gunakan. Sebaiknya saat ingin memulai mendesain suatu website, langkah awalnya  cara membua web adalah menuangkan content serta layoutnya ke dalam kertas.

 

2. Mulailah sketsa top level framework

 UX sketch cara membuat web 2

Langkah kedua dalam cara membuat web adalah mulailah menggambar level paling atas. Mengapa Anda harus membuatnya dari level paling atas? Karena dengan hal tersebut, Anda dapat mengerti konsep website tersebut secara keseluruhannya. Yang disebut dengan top level framework adalah User Interface website itu sendiri, yang berguna dalam memberikan feedback kepada pengguna website Anda nanti.

 

3. Tambahkan grid pada PSD anda

 grid cara membuat 3

An example of a 978 Grid with a 10px baseline

Sebelum memulainya dalam Photoshop, Anda wajib menambahkan grid dalam PSD Anda. Sebenarnya langkah cara membuat web ini sangat mudah, tetapi banyak sekali designer yang melupakan hal ini. Padahal langkah ini digunakan agar tata letaknya konsisten dan terlihat seimbang serta membantu Anda dalam membuat template yang responsif. 

 

4. Pilih jenis tulisan

 typography cara membuat web 4

Terkadang banyak sekali designer yang berpikir semakin banyak font yang digunakan, maka website itu semakin kreatif. Padahal, kenyataannya semakin banyak font yang digunakan, maka user semakin pusing dalam membacanya. Pada langkah cara membuat web ini, designer diharuskan untuk memilih font  yang dapat dibaca dengan baik oleh user pada content, dan memilih font yang menarik untuk judulnya. Jangan sungkan untuk memakai huruf besar atau font yang jarang dilihat, karena itu membuat user semakin tertarik dengan website Anda.

 

5. Pilih warna tema anda

 colours cara membuat web 5

Sangat penting untuk memikirkan tema pada suatu website, agar warna yang tercipta tidak memusingkan user. Tetapi tetap pikirkan kesinambungan terhadap komponen-komponen yang terdapat di website tersebut. Tidak ada salahnya untuk mencari inspirasi pada website-website terkenal saat ini untuk membuat standard dan perbandingan untuk cara membuat web.

 

6. Buatlah tata letak

 B-reel homepage cara membuat web 6

Langkah cara membuat web ini sangatlah penting. Tata letak dapat membantu dalam menyoroti bagian apa yang penting dari content tersebut. Karena masing-masing bagian harus dapat menceritakan content masing-masing. Mulailah dengan membuat layout yang paling sederhana yang dapat anda bayangkan, kemudian tambahkan komponen-komponen yang hanya diperlukan. Karena sebenarnya untuk membuatnya tetap sederhana adalah hal yang sulit dilakukan.  

 

7. Evaluasi kembali apa yang telah dikerjakan

 search button cara membuat web 7

Sudah tugas designer untuk membentuk cara user mengakses suatu website. Dan terserah Anda pula berapa kali feedback yang akan didapatkan oleh user. Terkadang designer sering terlalu terpesona dengan apa yang telah Anda buat, sehingga Anda tidak mengevaluasi apa yang sudah Anda buat. Padahal sangat penting untuk memikirkan kembali pola interaktif yang telah dibuat untuk melihat bagaimana meningkatkannya.

 

8. Tantang diri anda

Setiap designer seharusnya dapat menantang diri sendiri dalam setiap project yang Anda dapatkan. Karena suatu insipirasi tidak selalu datang dari perusahaan yang ingin membuat website, tetapi terkadang terserah Anda bagaimana dan seperti apa website tersebut nanti.

 

9. Perhatikan detil sekecil apapun

 game work in progress cara membuat web 9

Hal ini sangat penting untuk diperhatikan untuk cara membuat web. Terkadang Anda melupakan detail-detail kecil dalam komponen yang telah Anda buat, seperti gradient kecil pada Button atau stroke halus pada TextBox. Tetapi secara keseluruhan, selain hal ini adalah hal penting, hal ini termasuk hal yang menyenangkan.

 

10. Perlakukan setiap komponen seolah-olah itu bisa disampaikan pada kontes desain

 video component cara membuat web 10

Setiap komponen yang dibuat harus seperti dapat berdiri sendiri layaknya komponen yang terbaik yang pernah dibuat. Dan tidak ada salahnya, designer meninggalkan nama atau ciri khas Anda di dalam website tersebut untuk menunjukkan sedikit hormat untuk Anda.

 

11. Pertajam pekerjaan anda

 blurry pixels cara membuat web 11

Selain pertimbangan estetika, ada beberapa hal umum yang harus dihindari dalam cara membuat web dan rangka menciptakan kerja yang baik. Salah satu hal yang harus diperhatikan adalah ketika user mencoba untuk mempertajam gambar atau komponen suatu website. Dalam beberapa website, banyak sekali komponen-komponen yang nge-blur. Itu membuat user kesal karena Anda menilai website itu tidak baik dalam hal tampilan.

 

12. Rapikan PSDs anda

Hal ini (bersama dengan penggunaan grid) adalah salah satu bagian yang paling penting  saat merancangmenggunakan Photoshop.  Designer harus menyimpan file secara bersih, karena ini akan membuatnya lebih mudah untuk mengekspor bagian yang berbeda, mempercepat proses desain dan bekerja dengan file bersama dengan desainer lainnya.

 

13. Desainlah dengan skenario terbaik, tetapi siapkan kemungkinan terburuk

 Clear app cara membuat web 12

Sebagai desainer, tugas Anda adalah memecahkan masalah melalui kendala yang berbeda. Dalam cara membuat web, kendala berkisar dari isu-isu konseptual dan teknis untuk konten isu-isu yang terkait. Designer harus bisa membangun sebuah website yang bisa bekerja tidak hanya dalam scenario yang ideal, tetapi juga dalam scenario terburuk.

14. Terobsesilah dengan desain sampai anda membencinya

Bagi pencinta desain seperti para designer tentunya sangat mencintai saat-saat mendesain pada website. Langkah cara membuat web ini adalah langkah dimana para designer sudah mengerahkan semua kemampuannya ke dalam website sampai Anda merasa capek dan membencinya. Hal itu sangat lumrah, karena itulah yang disebut tanda kedewasaan karena itu artinya anda akhirnya belajar dari kesalahan anda sendiri.

 

15. Hindari menghabiskan waktu terlalu banyak saat mendesain konsep awal sebelum berbagi dengan klien

Ketika mengusulkan konsep interaktif atau desain look and feel’, Anda perlu memastikan bahwa Anda dan klien dalam presepsi yang sama sesegera mungkin. Setelah itu terjadi dan konsep awal disetujui, Anda dapat bersantai sedikit dan mulai produksi.Tetapi jika setelah menyajikan konsep pertama dan klien tidak jatuh cinta dengan hal itu, Anda harus mengumpulkan umpan balik yang cukup untuk membawa konsep yang lebih tepat kepadanya sesegera mungkin.

16. Bertemanlah dengan Developer

 developer Rafael Mumme cara membuat web 16

Developer adalah orang-orang kreatif yang mencintai pekerjaan Andasama seperti designer. Tetapi developer tidak selalu termasuk dalam proyek dari awal, melainkan sering kali hanya terlibat ketika konsep diputuskan dan peran kreatif Anda telah diganti. Proses ini salah, beberapa ide terbaik datang dari tim developer. Jadi pastikan Anda bergabung dengan Anda dari awal project.

17. Jelaskanlah dengan detail saat presentasi, dan anggap mereka tak tahu apa-apa

Desain terbaik dapat diabaikan atau dibuang jika Anda tidak menyampaikannya dengan benar. Selalu ingat bahwa apa yang benar-benar jelas bagi Anda mungkin tidak begitu jelas bagi seseorang melihat desain Anda untuk pertama kalinya. Sehingga, pada saat mempresentasikan desain kepada klien, anda harus menjelaskan sedetail mungkin dengan cara yng menarik dan tidak membosankan.

18. Cintai semua ide anda, tetapi jangan terlalu terikat

Ada garis tipis antara mengetahui kapan untuk mengadvokasi ide-ide Anda dan belajar untuk menyadari ketika tim Anda atau klien tidak melihat Anda sebagai the one. Sebagai desainer Anda harus percaya terhadap apa yang Anda lakukan, tetapi Anda juga harus terbuka dengan cepat membalik ide itu dan datang dengan sesuatu yang lain. Jangan lupa bahwa ada lebih dari satu solusi yang unik.

19. Ikuti perkembangan desain anda saat proses perkembangan

Jika Anda bekerja di dalam kantor, Anda mungkin telah menyadari betapa mudahnya untuk menemukan diri berjuang dengan desain sebuah proyek baru ketika yang sebelumnya sedang dikembangkan. Berlawanan dengan keyakinan umum, pekerjaan Anda pada sebuah proyek tidak berakhir ketika PSD dan styles- sheet dikirim.

Jika Anda benar-benar peduli tentang desain Anda, jangan sungkan untuk menghubungin developer dan bantu Anda untuk memastikan bahwa semua pixel kecil sempurna.

20. Tunjukkan pekerjaan yang telah anda buat

 style sheets cara membuat web 20

Inilah langkah terakhir dalam cara membuat web. Sebagai designer, saat yang paling menyenangkan bukanlah saat anda menyelesaikan hasil akhir anda, tetapi saat semuanya sudah diimplementasikan secara baik. Tetapi itu tidak dapat dibilang semuanya selesai. Anda pun harus memberikan kontribusi terhadap pengetahuan masyarakat dan membuatkan study case tentang progress dari pekerjaan Anda.

Nah, sekarang Sribuddies tahu kan bahwa terkadang hal yang para designer anggap sepele adalah sesuatu yang sangat penting? Mulai sekarang sribuddies harus memperhatikan hal-hal kecil dalam cara membuat web agar terciptanya suatu website yang baik. Ayo jangan lupa mengimplementasikan langkah-langkah ini ke dalam kontes desain di Sribu. Untuk langkah-langkah  lebih mendalam kunjungi cara membuat web di Photoshop. Untuk tips-tips mengenai desain lainnya main aja ke Facebook Fan Page Sribu.com atau Twitter account Sribu di @sribudotcom.

 

Salam,

Ryan Gondokusumo

Founder Sribu.com

 

 

* Credits to:

 creativebloq.com

 ^ Pro Tips: 20 Steps To The Prefect Website Layout

email
  • idur

    keren nehh tipsnya sangat membantu para web designer .. top top

    • http://www.sribu.com/ Ryan Gondokusumo

      @98aa6903b3036b8d5027db3f3479ad4c:disqus: Terima kasih telah membaca artikel ini… :)

  • http://uzaklab.com/ Wahyu Kristianto

    Dari seluruh pembaca artikel ini, adakah yang sudah bisa bikin web dengan 20 langkah diatas?

    • http://www.facebook.com/masdeny Deny Desi Ariyanto

      Haha… Saya beluuuumm…

      • http://www.sribu.com/ Ryan Gondokusumo

        @facebook-1588472175:disqus gimana kabarnya, mas? thank you sudah berpartisipasi dalam comment di artikel ini. semoga bisa berguna :)

    • http://www.sribu.com/ Ryan Gondokusumo

      @kristories:disqus semoga 20 langkah diatas bisa berguna bagi semua pembaca. terima kasih sudah membaca artikel berikut :)

    • ivanDroiners

      klo anda sama seperti saya,masih mentah soal web design dan gg ngerti satu pun dari bahasa pemrograman seperti htm,html,php dan sql atau mysql, serta belon paham tentang domain dan hosting jangan harap dengan membaca tutor ini anda bisa membuat website.

  • Daniel To Verdener

    thx ya …
    dapet ilmu baru buat persenasi nih

    • http://www.sribu.com/ Ryan Gondokusumo

      Sama-sama @danieltoverdener:disqus :)

  • chandler novaine

    Kalo tipsnya lebih ke arah hal-hal yang praktis gitu mungkin lebih bermanfaat ya. Seperti misalnya poin 1,2 dan 3. Selebihnya sepertinya ke arah teori dan pengembangan diri, bukan spesifik ke desain web.

    Asumsi saya, yang nongkrong disini kan kebanyakan desainer, entah itu beginer atau expert. Jadi tipsnya serasa agak dangkal buat pemula, atau malah klise buat yang udah expert. hehe..IMHO ya ini..

    Maaf kalo malah mengkritik. Soalnya saya mengharapkan sesuatu yang lebih saat mengklik link di facebook tadi. Thx.

    • http://www.sribu.com/ Ryan Gondokusumo

      @chandlernovaine:disqus: Terima kasih atas inputnya. Point no 1-2-3 memang lebih teknikal. Artikel ini dibuat untuk mengingatkan lagi desainer senior dan membuka mata yang desainer yang masih baru, apa saja yang musti dilakukan. Membuat sebuah website berbeda dengan membuat logo. Di sini kerja tim juga diperhitungkan seperti point no 16. Mindset yang musti diaplikasi berbeda dan itulah yang musti disadari.

  • http://www.mongkiki.com/ Wahya Biantara

    Pakai http://Klakat.com nggak perlu 20 langkah. Begitu Sign Up udah punya website hihihih. Thanks bro @jetenduro:disqus tips nya

    • http://www.sribu.com/ Ryan Gondokusumo

      @wahya:disqus: Hehe…ada yang minta backlink nih kayanya….

      • http://www.mongkiki.com/ Wahya Biantara

        Hihihihiii sekalian sungkem sama pak boss :)

        • http://www.sribu.com/ Ryan Gondokusumo

          @wahya:disqus: Salam buat temen-temen di Lumonata :D

  • Ryan Gondokusumo

    saya tidak memiliki semua alatnya bagaimana ini ?

    • http://www.sribu.com/ Ryan Gondokusumo

      Pembaca blog ini tahu user saya yang asli. Anda tidak perlu pakai-pakai nama saya untuk komen di blog ini.

  • denikian

    Artikel yg sangat berguna..
    Krn saya sendiri sampe skrg masih sangat tidak teratur :p

  • gie

    bermanfaat sekali informasinya , trima kasih

    • http://www.sribu.com/ Ryan Gondokusumo

      @7f898725c88b01f8cc7f454457ab26a8:disqus : Sama-sama :)

  • ilham bagas

    bagai mana ya caranya yang lebih jelas ? salam anak” smpn 2 jepara

  • Ari Supriatna

    ..terima kasih tipnya mas!

    • http://www.sribu.com Ryan Gondokusumo

      @Ari: Sama-sama, Anda dapat melihat tutorial lainnya juga dengan menuju ke search box kami dan ketik tutorial

  • rika sulistyo

    website apa-apaan ini!!!gak jelas…..buang-buang waktu …….

  • edhar pinoet

    artikel yang menarik,,,

    • http://www.sribu.com/ Ryan Gondokusumo

      @8bb350b4ca1d9c86e4a8951e5ee0fb30:disqus: Terima kasih :), Jangan lupa lihat artikel kami yang lainnya di popular post yang lain.