Nah apakah Anda juga termasuk dalam web developer ? Tentu Anda harus memperhatikan banyak hal yang akan membuat Anda akan kalah dengan orang lain. Anda juga harus memiliki trik-trik tertentu agar menjadi yang terbaik dari orang lain ! Seperti apa triknya ? Yuk langsung saja :
1. Perhatikan Desain !
Desain adalah hal yang sangat-sangat penting dalam pembuatan web. Karena apa yang pertama kali dilihat client adalah desain. Maka dari itu saya menyarankan Anda untuk belajar desain web yang baik agar orang lain juga bisa menilai bahwa desain Anda adalah desain yang menarik ! Nah lalu bagaimana caranya untuk membuat desain web yang menarik ? Ini dia :- Pertama, sebelum Anda menjadi desainer web yang hebat, awali dengan belajar desain MINIMALIS pada website. Seperti apa desain minimalis itu ? Ini dia tutorialnya
1.1 Mendesain Minimalis Pada Website
Sebelum kita mulai, pastikan kita sudah mempunyai PHOTOSHOP. Jika belum, sebaiknya Anda download dulu di internet. Jika sudah, langkah selanjutnya adalah Anda mendownload file-file berikut sebagai pendukung dalam pembuatan web desain minimalis.File pendukung photoshop : (wajib download)
http://www.mediafire.com/file/zk7jjcss6u2p7w3/simpel-web-design-resource.zip
Install Action
Pertama-tama kita akan menginstall 2 buah file, satu untuk 960.gs dan pattern dari subtlepattern. Setelah anda download file resource, didalamnya terdapat 2 file yang bersangkutan, buka file tersebut dengan photoshop untuk menginstallnya (atau drag and drop ke jendela Photoshop). |
Mempersiapkan Canvas Grid
Kita akan menggunakan sistem grid dari 960.gs sebagai acuan dalam proses pendesaian web yang akan kita kerjakan. Untuk itu dalam jendela action photoshop, Anda akan menemukan folder 960_GRIDS, klik pada action 12-Column-Grid lalu klik icon “play” untuk menjalankan action.
Menyiapkan background
Klik dua kali pada layer background, sebuah dialog akan muncul mengkonfirmasi untuk mengconvert background ini menjadi layer, beri nama background dan klik ok. |
Membuat Logo
Selanjutnya kita akan membuat logo “Simpel”. Klik Ellipse Tool, lalu buatlah lingkaran kecil seperti berikut (kira-kira satu grid) dengan warna#69ccca dan ubah nama layer menjadi “logo” (double click nama layer untuk merubah nama layer): |
#69CCCA, size:48px) dan “Web Development Team” (Font: Georgia, style: Italic, warna #69CCCA, size:12px) atur posisinya seperti berikut.
Membuat menu
Kita tambahkan menu utama untuk web kita, menu ini sederhana saja, hanyalah sederet teks biasa. buat menu menggunakan “Horizontal Type Tool (Tool)” atur warnanya menjadi#69CCCA, size:16px. Ketikkan “Home Blog Contact us” dan atur posisinya seperti berikut.
Membuat area Konten Utama
Tahap selanjutnya kita akan membuat background untuk Konten Utama. Dengan menggunakan “Rectangle Tool (U)” buatlah sebuah persegi panjang dengan lebar 960px (dari garis guide terawal hingga terakhir) untuk tinggi disesuaikan, Ubah nama layer menjadi “Konten Utama”.
#e0e0e0, atur optionsnya seperti berikut
Membuat pattern untuk ornamen
#88CD50, #F4ED47, #E7913A dan #6BCFCD.
Menambahkan Ornamen/Stripe
Kembali aktifkan window desain web kita sebelumnya, Untuk menambahkan ornamen, buat persegi panjang dengan “Rectangle Tool (U)” seperti gambar berikut :
Menyiapkan background untuk footer
Buat persegi panjang dan atur posisinya seperti berikut, pastikan layer ini berada di atas layer “Konten Utama” lalu buat clipping mask seperti pada langkah sebelumnya :
Mengisi Konten
Selanjutnya kita akan mengisi area konten ini dengan beberapa element yakni, Heading, Fitur-fitur, Slider dan Testimoni/Quote.Heading
Tambahkan teks heading dengan font:”Museo”, warna#248886,
ukuran font: 26px. Ketikkan “We are a professional web developer &
web designer team, and here is what we can do for you” (atau gunakan
teks sendiri), buat rata tengah dan atur posisinya seperti berikut:
Fitur
Kita tambahkan 3 fitur, lebar dari masing-masing fitur adalah 4 Grid (jadi pastikan konten untuk tiap fitur tidak melebihi 4 grid). Tambahkan 3 icon yang disertakan dalam file resource, atur posisinya seperti berikut:
#248886 dan ukuran 16px.
#555555, ukuran:11px :
#B6FAF9 dan atur posisinya di salah satu fitur sebagai background.
Membuat Bayangan Pemisah
Garis pemisah yang akan kita tambahkan berupa shadow/bayangan halus. Untuk membuatnya pertama-tama buat layer baru, beri nama “shadow-separator”. Aktifkan Brush Tool, pastikan warnanya hitam, Klik kanan pada canvas dan ubah ukuran master diameter mejadi 700px, pilih type “Soft Round 27px”.
Slider
Slider ini akan menampilkan Slideshow (bisa diisi dengan screenshot-screenshot project yang telah dikerjakan). Tambahkan Judul “Our latest projects”, atur ukuran dan warnanya sesuai dengan heading yang kita buat sebelumnya.
Testimoni/Quote
Untuk Testimoni kita akan menampilkan testimoni-testimoni dari client yang telah dilayani. Judul dengan ukuran sama dengan Heading “What they say”.
#555, size:20px atur posisinya seperti berikut.
Footer
Untuk bagian footer, kita akan menambahkan logo beserta alamat kantor, dan di sebelah kanan kita tambahkan menu lagi. Copy layer “logo” dan teks “imple”, buang Gradient overlay (dengan cara di unchecklist atau di drag ke tong sampah di jendela layer), ubah warnanya menjadi#A7A7A7 dan perkecil ukurannya sedikit.
#a7a7a7 dan atur posisinya seperti berikut:
Mengorganisasi Layer
Jika anda tidak melakukan organisasi layer, mungkin hal ini tidak masalah bagi anda, namun bagaimana jika anda bekerja dengan team dan bukan anda yang melakukan proses slicing? mereka akan kebingungan dengan layer yang acak-acakan. Untuk itu, selalu organisasi layer anda sesuai dengan bagian-bagian yang ada dengan memasukkannya ke dalam folder/set yang bersangkutan.Klik icon “Create a New Set” (icon bergambar folder yang terdapat di bawah layer window) untuk membuat folder lalu klik dan drag tiap-tiap layer yang bersangkutan pada folder yang sesuai.
Berikut ini adalah organisasi folder yang saya lakukan:
Finising
Jika anda belum menyimpan pekerjaan anda, segera save. Lakukan penyimpanan secara berkala untuk menghindari hal-hal yang tidak diinginkan mengingat listrik di negara kita sering idup mati :D. Berikut ini link download file PSD dari apa yang anda kerjakan di atas.1.2 Contoh Mendesain Portofolio Pada Website
Nah, portofolio ini adalah hal yang sangat penting. Walaupun sebenarnya Anda tidak perlu membuat portofolio yang terlihat wah, tapi yang terpenting adalah isi portofolio Anda itu sendiri. Ok, tapi disini saya tidak membahas mengenai bagaimana cara membuat isi portofilio yang baik, tapi disini saya akan mencoba menjelaskan bagaimana cara mendesain portofolio di website agar terlihat indah serta enak dibaca dan responsif.Sebelum memulai sebaiknya kita mengetahui terlebih dahulu apa yang akan kita buat. Berikut ini adalah contoh portfolio yang akan kita buat – DEMO
Ingredients
Seperti layaknya memasak, membuat website juga perlu bahan-bahan, berikut ini bahan yang kita perlukan, karena disini penulis hanya membuat contoh, maka contoh-contoh portfolionya pun diambil dari beberapa website, bukan buatan pribadi.
- Jquery
- CSS Reset dari Meyer web
- Google Font Montez & Sofadi One
- Magnific Popup
- Critters – Ohh Deer (Gambar untuk header)
- Q2. What do you do in your spare time? (Gambar untuk bagian How I Work)
- Logan Evolution (Gambar Untuk Gallary, hanya untuk demo)
Berikut struktur file yang telah disiapkan, file css ditaruh di folder css, gambar ditaruh di img, gambar untuk gallery ditaruh di folder images, sedangkan plugin popup ada di folder popup.
Struktur HTML
Selanjutnya kita langsung membuat struktur HTML yang digunakan.Membuat Header
<div id="banner">
<header id="logo">
<img src="img/logo2x.png" alt="">
<h1>Bos Tut Web</h1>
<span id="jobdesc">
An Indonesian Illustrator
</span>
</header>
<div id="overlay"></div>
</div> Membuat Konten Website, disini kita belajar menggunakan fungsi css display: table , table-row, dan table-cell untuk membuat kolom yang tingginya rata di bagian class .box, hampir mirip fungsinya dengan tag table yang biasa kita lihat
<section>
<span>How I Work</span>
<div class="section">
<div class="content">
<div class="box">
<img src="img/box1.jpg" alt="">
<h3>Step 1: Sketch.</h3>
<p>Pencils Graphite (H) on 17x14" Strathmore Windpower Bristol</p>
</div>
<div class="box">
<img src="img/box2.jpg" alt="">
<h3>Step 2: Inking.</h3>
<p>Inks Windsor Newton Series 7s (0-2), Copic Technical Pens, White Out. Scanned at 1200DPI (Bitmap)</p>
</div>
<div class="box">
<img src="img/box3.jpg" alt="">
<h3>Step 3: Coloring.</h3>
<p>Finish Treatment: Photoshop Gradiant layers, hue/adjustment layers. Diffusion achieved using solid fill layer based on colour channel, blurred and reducied to 20% Opacity.</p>
</div>
</div>
</div>
</section> Membuat Bagian Gallary, bagian gallery ini disesuaikan dengan aturan-aturan dari plugin Magnific Popup
<div class="gallery">
<div class="box"><a href="images/1.jpg" title="Gambar 1" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/1.jpg" alt=""></a></div>
<div class="box"><a href="images/2.jpg" title="Gambar 2" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/2.jpg" alt=""></a></div>
<div class="box"><a href="images/3.jpg" title="Gambar 3" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/3.jpg" alt=""></a></div>
<div class="box"><a href="images/4.jpg" title="Gambar 4" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/4.jpg" alt=""></a></div>
<div class="box"><a href="images/5.jpg" title="Gambar 5" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/5.jpg" alt=""></a></div>
</div>Membuat Bagian Testimonial
<aside class="testimonial">
<span>Testimonial from <strong>'Steve Jobs</strong></span>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, voluptates, neque. Nesciunt, iste, soluta</h3>
</aside> <footer>
<div class="content">
<div class="box">© All Right Reserved</div>
<div class="box"><strong>Find me on: </strong><a href="http://www.twitter.com/tut_web">Twitter</a> / <a href="http://www.facebook.com/bos.tutweb">Facebook</a> / <a href="#">Dribbble</a> / <a href="#">Instagram</a><br><br><strong>Phone:</strong> +62210000000; <strong>Email:</strong> tut.webdesign@gmail.com</div>
</div>
</footer> Telah selesai dengan HTML selanjutnya kita percantik struktur website tersebut dengan CSS
Struktur CSS
Styling bagian Header/* --- Banner ------------------------- */
#banner{
width: 100%;
height: 70%;
background: url(img/banner.jpg) 0 0 repeat;
background-attachment: fixed;
position: relative;
}
#banner #overlay{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(img/overlay.png) 0 100% repeat-x;
}
#logo{
width: 100%;
position: absolute;
bottom: 10%;
z-index: 5;
text-align: center;
}
#logo img {
cursor: pointer;
display: inline-block;
width: 128px;
height: 128px;
border: 3px solid rgba(255,255,255,.5);
border-radius: 50%;
}
#logo img:hover{
border: 3px solid rgba(255,255,255,.7);
}
#logo h1{
margin: 0 auto;
text-align: center;
font-family: 'Montez', cursive;
font-size: 100px;
color: #eee;
text-shadow: 1px 1px 1px #000, 1px 2px 3px #555;
}
#logo #jobdesc{
display: block;
width: 100%;
text-align: center;
margin: 5px auto;
color: #eee;
font-size: 20px;
text-shadow: 1px 1px 1px #000;
} /* --- Section ------------------------- */
section{
width: 900px;
max-width: 900px;
margin: 40px auto;
}
section span{
background: #C09A7F;
padding: 4px;
border-radius: 0 5px 0 0;
color: #eee;
font-size: 12px;
}
.section{
display: table;
width: 100%;
}
.section .content{
display: table-row;
width: 100%;
}
.section .box{
display: table-cell;
padding: 10px;
width:31.3333%;
}
.section .box:nth-child(1){
background: #eee;
border: 5px solid #C09A7F;
}
.section .box:nth-child(3){
border-radius: 0 0 10px 0;
}
.section .box:hover{
background: #ddd;
}
.section .box h3{
padding: 10px;
font-size: 18px;
font-weight: bold;
}
.section .box p{
padding: 10px;
line-height: 1.5em;
}
.section .box img{
width:100%;
max-width: 100%;
height: auto;
border-radius: 10px;
}
/* --- Gallery ------------------------- */
.gallery{
display: table;
width: 900px;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.gallery .box{
display: table-cell;
vertical-align: top;
padding: 5px;
}
.gallery .box img{
width:100%;
height: auto;
border-radius: 5px;
border: 2px solid #eee;
}
.gallery .box img:hover{
opacity: .8;
} .testimonial{
position: relative;
width: 900px;
max-width: 900px;
text-align: center;
margin: 20px auto;
background: #C09A7F;
color: #fff;
}
.testimonial span{
position: absolute;
right: 0;
bottom:0;
padding: 5px;
background: rgba(0, 38, 51, .5);
font-size: 11px;
}
.testimonial h3{
margin: 50px;
padding: 50px;
display: block;
line-height: 2em;
}
.testimonial h3:before{
content: " \201C ";
}
.testimonial h3:after{
content: " \201D ";
}footer{
border-top: 3px solid #ddd;
padding: 30px auto;
display: table;
width: 900px;
max-width: 900px;
margin: 40px auto;
font-size: 12px;
}
footer a{
text-decoration: none;
color: #666;
padding: 2px;
border-bottom: 1px solid #ddd;
}
footer a:hover{
background: #ddd;
}
footer .content{
width: 100%;
display: table-row;
vertical-align: center;
}
footer .box{
display: table-cell;
padding: 10px;
width: 50%;
}
footer .box:nth-child(2){
text-align: right;
}@media (max-width: 860px){
section,
.gallery,
.testimonial,
footer{
width: 90%;
}
.gallery{
padding: 0;
}
.section .box:nth-child(1){
border-radius: 0;
}
footer{
text-align: center;
}
footer .box{
display: block;
width: 90%;
}
}
@media (max-width: 640px){
#banner{
height: 101%;
min-height: 350px;
}
#logo h1{
font-size: 75px;
}
.gallery .box{
/*display: block;*/
}
.section .box{
margin:auto;
display: block;
width: 80%;
padding: 5%;
border-radius: 0;
}
footer .box:nth-child(2){
text-align: center;
width: 90%;
}
footer .box strong{
display: block;
}
}Setelah tampilan oke, kita tambahkan animasi pada header agar headernya bisa bergerak perlahan, disini kita menggunakan jQuery
(function(window, $) {
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var y = 0,
f = 0.45;
function move() {
y -= f;
$('#banner').css('background-position', 'center ' + y + 'px');
requestAnimationFrame(move);
}
move();
})(window, jQuery);Sedangkan untuk gallery agar bisa muncul popup kita tambahkan script seperti berikut, script itu didapat didokumentasi dari plugin nya.
$(document).ready(function() {
$('.gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
tPrev: 'Previous (Left arrow key)', // title for left button
tNext: 'Next (Right arrow key)', // title for right button
tCounter: '%curr% of %total%', // markup of counter
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>' + item.el.attr('desc') +'</small>';
}
}
});
});Selesai .
Okai, diatas adalah salah satu contoh pembuatan halaman portofolio yang terbilang cukup baik sebagai landasan untuk sukses !
1.3 Inti dalam desain website Anda agar terlihat profesional !
Sebenarnya dalam mendesain web itu tidak terlalu sulit Anda hanya butuh waktu untuk berpikir bagaimana desain yang benar-benar enak dilihat serta responsif. Anda bisa mengambil desain dari sana maupun dari sini, yang saya maksudkan adalah Anda bisa mencari ide desain dari website-website lain lalu Anda tuangkan menjadi satu desain di website Anda. Maka dari itu perlu kesabaran dan terus mencoba agar mendapat desain yang sungguh enak dilihat. Lalu apa patokannya ? patokannya adalah mata Anda sendiri. Mata Anda sendiri yang menilai apakah itu sudah baik atau bukan. Sepengelaman saya sebagai admin komputer67 ya saya juga pernah mendesain2 dan hal yang paling penting hanyalah bersabar untuk mendapatkan desain yang sempurna. Saya sendiri pun juga bukan orang desain. Tapi yang terpenting adalah Anda bisa membuat tampilan yang bisa dinikmati mata Anda sendiri yang secara otomatis pasti juga bisa dinikmati oleh orang lain.2. Belajarlah Bahasa Pemrograman Web !
Belajar bahasa pemrograman web itu sangat penting. Jelas dong web developer yang belum sukses aja sudah pasti bisa pemrograman web, apalagi yang sukses dan kaya raya ? hehe,, oke tapi tanpa panjang lebar lagi, langsung saja di postingan ini Anda akan dijelaskan secara rinci bagaimana proses yang benar dalam belajar bahasa pemrograman disertai EBOOk lengkap dari HTML, JAVASCRIPT, PHP, SERTA FRAMEWORK2NYA JUGA..
Yuk langsung saja masuk kesini :
http://komputer67.blogspot.co.id/2017/01/cara-membuat-website-profesional.html
3. Pikirkan Ide Menarik !
CONTOH IDE MENARIK :
1. Startup di Bidang Biologi
2. Startup di Bidang Energi
3. Kecerdasan Buatan Yang Terintergrasi Dengan Website
4. Membuat Sebuah Website Yang Mampu Mempertemukan Pasien Dengan Dokter Secara Langsung ( Live Chat)
5. Bagaimana Caranya Agar Pengguna Website Bisa Menggunakan Matanya Untuk Memilih Menu.
6. dll
Semua ide-ide tersebut hanya didapat dari hal-hal yang tidak mungkin dilakukan. Tapi ingatlah semuanya akan terjadi hanya JIKA ada orang yang mau berpikir keras untuk melakukan hal tesebut. Lalu darimana datangnya ide-ide menarik lainnya ? Bagaimana bisa kita menciptakan website dengan ide yang sangat menarik serta cara kerja yang profesional ? Yuk baca nomor 4
4. Bekerja Sama Dengan Bidang Lain !
5. Pelajari Managemen Proyek
Suatu pengembangan aplikasi merupakan suatu proyek yang harus di atur, direncanakan, dan dilakukan dengan baik. Dengan mempelajari manajemen proyek maka anda dapat melakukan kolaborasi dengan yang lain dalam mengembangkan aplikasi. Anda juga dapat memperoleh efektifitas dan efisiensi waktu dalam menyelesaikan suatu proyek.
6. Setelah Semuanya Siap, Saatnya Promosi !
6.1.1 Promosi Lewat Group
Inti dari promosi di Facebook itu adalah SHARE DI GROUP. Dengan Anda share di group2, maka informasi yang Anda berikan akan cepat meluas karena 1 group bisa berisi lebih dari 1000 orang. Bahkan ada kan group yang isinya 100 rb. Lalu gimana jika kita ngeshare sebanyak 100x, artinya sudah ratusan ribu bahkan jutaan orang melihat apa yang Anda promosikan.
6.1.2 Promosi Lewat Ads
Bila Anda punya uang, pakai saja ads di facebook, itu sebagai jalan pintas Anda untuk promosi di facebook selain cara di atas. Serta bila Anda menggunakan ads di facebook ini sebaiknya Anda menggunakan video. Karena Video akan lebih powerfull untuk promosi.
6.2 Promosi di Instagram
Inti dari promosi di Instagram adalah buat GAMBAR YANG MENARIK dulu... Karena dengan gambar yang menarik maka Anda akan lebih mudah menarik orang untuk ngefollow kita. Lalu bagaimana gambar yang menarik itu ? Anda bisa cari di google "instagram grid design" atau semacamnya, Anda bisa kreasikan sendiri dan bisa dibuat sendiri. Kalau pengalaman dari admin komputer67 sih pakai corel aja biar lebih mudah dalam crop nya. Selanjutnya bila Anda sudah memiliki instagram yang menarik, langkah selanjutnya adalah ngefollow orang banyak. Kalau saya ya 60 orang / jam. Lalu tunggu 2-3 hari bila orang tersebut tidak follback, langsung saja unfollow.
Lalu bagaimana caranya biar kita bisa tau orang yang tidak follback ke kita ? Yaitu dengan aplikasi di android yang bernama "Follow Meter" Bisa Anda cari sendiri di playstore, saya malas nulisnya hehehehe....
6.3 Promosi di Twitter
Sebenarnya untuk promosi di twitter ini saya belum pernah... hahahah, tapi intinya Anda tetap harus ngtweet secara rutin ! Tekniknya sama juga seperti di Instagram, yaitu follow orang banyak lalu bila orang tersebut tidak follback, langsung saja unfollow dia. Mudah kan ? Itu adalah cara yang paling benar. Jangan pernah menggunakan auto follower atau semacamnya, karena itu akan merusak produk Anda sendiri.
7. Jam Dan Hari Yang Tepat Untuk Promosi di Instagram
Langsung saja nih ya, saya tau cara ini juga barusan, tapi ini jujur KEREN banget ini.Oke Anda penasarankan ? Yuk langsung saja :
1. Pertama jika Anda ingin melihat hari apa yang tepat untuk promosi di Instagram Anda maka cara yang paling tepat ya dengan mengecek history2 orang2 yang telah like di instagram Anda kapan mereka paling sering like, kapan mereka paling sering komen, serta jam berapa paling sering mereka like atau komen. Jelas dong kita tidak mungkin menghitung satu persatu, tapi untungnya sekarang sudah ada aplikasinya untuk menghitung OTOMATIS dan menghasilkan data yang sangat BERGUNA. Apa nama aplikasinya ? ICONSQUARE
2. Sekarang masuk ke https://pro.iconosquare.com
3. Register seperti biasa lalu masukan akun instagram Anda seperti biasa
4. Lalu masuk ke halaman iconsquare lalu pilih analyze - Engagement
5. Lalu scroll ke bawah, dan pilih tanggal serta like/komen/engagement
sebenarnya ada 1 trik lagi yaitu SEO, tapi akan kita bahas di post selanjutnya.Tetap stay di fanspage kami komputer67 !
8. Terimakasih. Semoga sukses !
sumber : http://www.tutorial-webdesign.comhttp://www.ruangfreelance.com/12-langkah-jadi-web-developer/
http://www.ariona.net/
Anda akan tutup dengan quotes :
Success is a lousy teacher. It seduces smart people into thinking they can't lose.
0 komentar :
Post a Comment