IchaRisa: Converting Design to HTML

Kali ini pemateri kita yaitu Muhibbudin Suretno yang akan membagikan materi *Converting Design to HTML*

Melanjutkan dari materi sebelumnya yaitu soal UI/UX Design pada beberapa minggu yg lalu.

Disini sudah pada mempersiapkan tools yg ada pada bagian readme pada repo yang telah di share belum? Oke, sebetulnya alasan saya bikin materi ini karena kadang ada beberapa teman yang bertanya.

Apa sih template? apa pernah menggunakan HTML template? bagaimana cara membuatnya? seperti apakah kesulitan membuatnya?

Maka dari itu saya coba buat materi ini, untuk memandu teman-teman yang ingin mencoba membuat template sendiri. Beberapa waktu lalu saya telah membuat sample desain untuk "sebuah agensi desain rumah"

Next, pada desain ini ada bagian pot bunga yg menjadi background dari 2 section (nanti kita sebut hero dan testimony)

Malam ini kita coba convert desain tersebut menjadi sebuah template html

Pertama, kalian boleh clone / download dulu asset gambar pada repository ini https://github.com/muhibbudins/homies

Untuk kali ini kita akan mencoba framework css baru bernama Spectre.css. Kita ngga pake bootstrap dulu 😄 karena menurut saya terlalu mainstream

Next sekarang silahkan buat folder css & scss di dalam folder homies yang telah di download tadi. Setelah itu buat file index.html pada folder tadi lalu buat file style.scss pada folder scss.

Sekarang buka folder homies tadi pada text editor atau IDE kesukaan kalian.

Nice! sekarang silahkan paste code berikut ke file index.html

<!DOCTYPE html>

<head>

<title>Homies - Design Your Home</title>

</head>

<body>

</body>

</html>

Ini adalah struktur awal untuk template kita

Next kita masukan Spectre.css kedalam index.html dengan mereplace code  dengan code berikut :

Lalu karena pada desain ini kita menggunakan custom font, kita masukan juga font serta icon yang kita gunakan pada desain ini.

Disini saya menggunakan font Lobster, Oswal (500) & Quicksand (400 & 500)

Silahkan replace comment  dengan code berikut :

Make sure, code kalian pada bagian sebelum </head> adalah seperti ini ya :)

Dan pastiin juga kalau struktur folder kalian seperti ini

- Homies

|- css

|- img

|- scss

|- .gitignore

|- index.html

|- LICENSE

|- README.md

Sekarang kita coba mulai experiment dengan desainnya ya 😄

Silahkan nyalakan ruby sass dengan cara

Buka command prompt / terminal kalian pada folder homies dan jalankan command berikut sass --watch scss/style.scss:css/style.css.

Jika sudah seharusnya sudah ada 2 file baru di folder css yaitu style.css dan style.css.map

Kalau sudah silahkan buka file style.scss dan kita tuliskan beberapa variable yang akan kita gunakan

Codenya sebagai berikut (paste di file style.scss)

// Background

$bgHero : url(../img/hero.png);

$bgTestimony : url(../img/testimony.png);

$bgProjects : url(../img/projects.png);

$bgFooter : url(../img/footer.png);

// Color

$background : #F7FAFF;

$green : #2EC787;

$grass : #43E09F;

$ocean : #23CED9;

$blue : #2EBEC7;

$darkblue : #2D9CDB;

$darkBlack : #252525;

$black : #5C5C5C;

$darkGrey : #717171;

$grey : #828282;

$lightGrey : #E0E0E0;

// Font

$quicksand : 'Quicksand', sans-serif;

$oswald : 'Oswald', sans-serif;

$lobster : 'Lobster', cursive;

Next, kita siapkan dulu skeleton dari section yang akan kita buat. Silahkan replace comment  dengan code dibawah ini

</div>

</div>

</div>

</div>

</div>

</div>

Oke deh kita lanjut aja, sekarang kita buat navbar pada bagian atas dengan menambahkan code setelah <div class"heading">

Codenya sebagai berikut :

munculll...

Sekarang seharusnya keluar navbar polosan dari Spectre.css seperti ini

Kadang kala pasti bingung css nya seperti apa, disini kita akan memasukan gambar tsb sebagai background pada element body

Silahkan pastekan code berikut pada file style.scss dibagian bawah variable

/* Section Body */

body {

background-color: $background;

background-image: $bgHero;

background-repeat: no-repeat;

background-size: 700px 1000px;

background-position: top right;

font-family: $quicksand;

}

Hasilnya seperti ini

Selanjutnya kita coba custom navbar di atas agar sesuai dengan desain yg diinginkan

Kita pastekan code berikut pada file style.scss

/* Section Heading */

.heading {

background-color: white;

box-shadow: 0px -4px 13px 0px rgba(20, 20, 20, 0.7);

}

]

Code diatas akan membuat navbar diatas menjadi warna putih dan memiliki bayangan

Lalu tambahkan lagi code berikut untuk mempercantik tulisan serta button pada navbar diatas

/* Sub Section Heading */

.navbar {

padding: 15px 0;

&-brand {

color: $grass;

font-family: $lobster;

font-size: 28px;

line-height: normal;

margin-bottom: 5px;

}

.btn {

color: lighten($darkGrey, 8%);

padding: 6px 20px;

font-size: 14px;

&-active {

color: $grass;

}

&-primary {

background-color: $grass;

border: 0;

color: white;

border-radius: 20px;

margin-left: 20px;

}

Code berikut akan merubah warna serta jenis font untuk brand name, serta merubah warna dan ukuran font pada bagian menu sebelah kanan

Hasilnya sepertti ini

Lanjut kita buat bagian hero atau bagian section pertama setelah navbar

Silahkan masukan code berikut pada bagian <div class="hero"></div>

Dan tambahkan code berikut pada file style.scss

/* Section Hero */

.hero {

width: 100%;

min-height: calc(100vh - 70px);

display: flex;

align-items: center;

justify-content: center;

&-title {

font-size: 64px;

font-family: $oswald;

color: $green;

line-height: 1.1;

margin-bottom: 10px;

}

&-sub_title {

color: $darkGrey;

margin-bottom: 40px;

font-size: 16px;

}

.btn {

border: 1px solid $darkblue;

background-color: transparent;

color: $darkblue;

padding: 14px 48px;

height: auto;

border-radius: 30px;

}

Pada code diatas kita membuat sebuah section bernama hero dengan tinggi 100vh (viewport height) dikurangi tinggi dari heading / menu (70px), lalu kita tambahkan property flex box untuk membuat content yg berada di dalamnya menjadi center vertical & horizontal. Serta mengganti warna dan ukuran title, sub title & button.

Hasilnya

Bagian atasnya sudah, selanjutnya kita coba buat bagian testimony yang berada dibawah section hero

di bagian ini kita coba membuat sebuah section review dari customer berupa card yang berisi apa yang di reviewnya serta commentnya

Silahkan masukan code berikut setelah code <div class="testimony">

Hasil

Jika kalian sadar pada code berikut saya menggunakan pseudo classes css: before untuk membuat tulisan TESTIMONY yang mengambang dibagian kanan

Itu adalah salah satu best practice setelah background yg ada pada body tadi

Selanjutnya kita coba membuat bagian projects setelah bagian testimony

Pastekan code berikut di dalam code <div class="projects">

Hasil

Lalu, ini bagian paling panjang codenya ya itu berisi list project dari agensi desain ini

Replace code  dengan code berikut :

Hasil

kalau background vas nya ilang jadi putih kenapa ya?

Hasil

Boleh inspect element dan screenshot bagian console?

Next kita masukan code berikut pada bagian <div class="contact-us">

Dan stylenya pada file style.scss

featureType: "poi",

elementType: "labels",

stylers: [{

visibility: "off"

}]

}, {

featureType: "water",

elementType: "labels",

stylers: [{

visibility: "off"

}]

}, {

featureType: "road",

elementType: "labels",

stylers: [{

visibility: "off"

}]

});

}

</script>

Foala, we finish it. Templatenya sudah selesai sesuai dengan desain yang telah di buat

FYI, and it's important! Spectre.css sepertinya mengusung konsep Adaptive Design bukan Responsive Design seperti kebanyakan framework

So sedikit PR untuk kita dan ini bisa menjadi pelajaran tambahan untuk kalian mengembangkan template yang sudah kita buat ini 🙂

Untuk bagian mobile belum saya kembangkan lagi 😄

IchaRisa

ke3

Rabu, 17 Januari 2018

Converting Design to HTML

Tidak ada komentar:

Posting Komentar

Metode Perancangan Basis Data

Laporkan Penyalahgunaan