Design Guideline Implementation — Sprint 5 Blog Azahra
Sebagai hipster dari kelompok PPL A3, saya bertanggung jawab untuk membuat design guideline dari platform yang kami buat, yaitu ConnectDot. ConnectDot merupakan situs pencarian kerja bagi orang-orang yang tidak memiliki ijazah perguruan tinggi. Berikut adalah design guideline yang telah saya buat.
Design guideline ini sudah digunakan untuk membuat mockup dan implementasi platform secara real. Contoh-contoh dari penggunaan design guideline yang telah saya buat dapat dilihat dari beberapa gambar berikut ini.
Dari segi typography, iconography, dan imagery ConnectDot sudah mengimplementasikan design guideline dengan baik. Di mana jenis font yang digunakan dan ukurannya sudah saya buat dalam bentuk code base scss sehingga mudah digunakan oleh teman kelompok saya yang lain. Beberapa ukuran font terkadang masih belum sesuai mockup karena terkadang kami tidak selalu membandingkan mockup dengan implementasi aslinya secara detail. Semua icon yang digunakan sudah saya upload ke image serving kami yaitu Google Cloud dan cara penggunaannya sudah saya jelaskan di wiki GitLab kami.
@import url(http://fonts.googleapis.com/css?family=Poppins|Quicksand);
$fontP : 'Poppins';
$fontQ : 'Quicksand';$fontSizeJumbo1: 3.75em;
$fontSizeJumbo2: 3.44em;
$fontSizeHeading1: 3.125em;
$fontSizeHeading2: 2.5em;
$fontSizeHeading3: 2.25em;
$fontSizeParagraph: 1em;$connectDotBlue : #0074B7;
$connectDotDarkBlue : #003B73;
$connectDotLightBlue : #60A3D9;
$connectDotGreen: #6CB0AB;
$connectDotDarkGreen: #10564F;
$connectDotLightGreen: #92DDC9;
$connectDotGreenButton: #5FC6CB;
$connectDotYellow: #FFFA70;
$connectDotGrey: #E5E5E5;
Color palette yang saya buat di design guideline sudah diikuti dengan baik dalam pembuatan mockup dan implementasinya. Warna-warna primer sudah digunakan sebagai warna yang mendominasi platform ConnectDot. Design guideline buttons juga sudah diikuti dengan baik di mana saya sudah menyediakan juga base scss untuk button styling.
.Button {
border: none;
cursor: pointer;
font-family: $fontP;
background-color: white;
line-height: $fontSizeParagraph;
&:hover {
background-color: $connectDotGrey;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}
&:disabled {
background-color: rgba(0,0,0,0.35);
box-shadow: none;
cursor: not-allowed;
}
&:disabled:hover {
background-color: rgba(0,0,0,0.6);
}
&--shadow {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
&--small {
width: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
@include media-breakpoint-up(xs) {
font-size: 1em;
};
@include media-breakpoint-up(md) {
font-size: 1em;
};
@include media-breakpoint-up(lg) {
font-size: 1.25em;
};
}
&--medium {
width: auto;
padding-left: 15px;
padding-right: 15px;
@include media-breakpoint-up(xs) {
font-size: 1.2em;
min-width: 80px;
height: 50px;
};
@include media-breakpoint-up(md) {
font-size: 1.2em;
min-width: 193.75px;
height: 93.735px;
};
@include media-breakpoint-up(lg) {
font-size: 1.2em;
min-width: 155px;
height: 75px;
};
}
&--large {
width: auto;
padding-left: 20px;
padding-right: 20px;
@include media-breakpoint-up(xs) {
font-size: 1.4em;
min-width: 120px;
height: 65px;
};
@include media-breakpoint-up(md) {
font-size: $fontSizeHeading1;
min-width: 270px;
height: 115px;
};
@include media-breakpoint-up(lg) {
font-size: $fontSizeHeading1;
min-width: 274px;
height: 109px;
};
}
//this is for usual buttons in navbar
&--transparentFontWhite {
font-size: $fontSizeHeading3;
font-family: $fontQ;
padding: 10px;
background-color: transparent;
color: white;
height: 100%;
margin-right: 0.5vw;
margin-left: 0.5vw;
&:hover {
color: $connectDotGrey;
background-color: transparent;
box-shadow: 0px 0px 0px;
}
}
&--transparentFontDarkBlue {
color: #1A2858;
font-size: $fontSizeHeading3;
font-family: $fontQ;
padding: 10px;
background-color: transparent;
height: 100%;
margin-right: 0.5vw;
margin-left: 0.5vw;
&:hover {
color: $connectDotGrey;
background-color: transparent;
box-shadow: 0px 0px 0px;
}
}
&--whiteFontGreen {
font-size: $fontSizeHeading3;
font-family: $fontQ;
font-weight: bold;
width: auto;
padding-left: 15px;
padding-right: 15px;
margin-right: 0.5vw;
margin-left: 0.5vw;
color: $connectDotLightGreen;
@include media-breakpoint-up(xs) {
height: 40px;
};
@include media-breakpoint-up(md) {
height: 50px;
};
@include media-breakpoint-up(lg) {
height: 65px;
};
}
&--darkBlueFontGreen {
font-size: $fontSizeHeading3;
font-family: $fontQ;
font-weight: bold;
width: auto;
padding-left: 15px;
padding-right: 15px;
margin-right: 0.5vw;
margin-left: 0.5vw;
color: $connectDotLightGreen;
background-color: #1A2858;
@include media-breakpoint-up(xs) {
height: 40px;
};
@include media-breakpoint-up(md) {
height: 50px;
};
@include media-breakpoint-up(lg) {
height: 65px;
};
}
&--darkblue {
background-color: $connectDotDarkBlue;
color: white;
&:hover {
background-color: $connectDotBlue;
}
}
&--lightblue {
background-color: $connectDotLightBlue;
color: black;
&:hover {
background-color: $connectDotBlue;
}
}
&--green {
background-color: $connectDotGreenButton;
color: black;
&:hover {
background-color: $connectDotGreen;
}
}
&--yellow {
background-color: $connectDotYellow;
color: $connectDotDarkBlue;
&:hover {
background-color: #eae66a;
}
}
&--rounded {
border-radius: 9999px;
}
&--squared {
border-radius: 10px;
}
//this is for 'cancel' button
&--secondary {
border: 3px solid $connectDotDarkBlue;
box-sizing: border-box;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
background-color: white;
color: black;
}
}Form yang dibuat juga sudah mengikuti design guideline yang ada di mana judul form memiliki panel kecil di atas panel utama yang berisi konten formnya. Teman saya, Yudhis, telah membantu membuat implementasi panel secara React component sehingga dapat digunakan secara langsung oleh teman-teman yang lain.
export const Panel: React.SFC<PanelProps> = ({children, className=''}) => (
<div className={className.split(' ').reduce((acc, next) => `${acc} ${next}`, 'Panel')}>
{children}
</div>
);Menurut saya, sejauh ini, tantangan terbesar dalam menjaga konsistensi mockup dengan implementasinya adalah mengenai ukuran dan spacing antar-komponen. Hal ini juga dipersulit dengan adanya perbedaan ukuran layar yang belum semuanya kami handle. Karena penyesuaian ukuran layar bukan prioritas utama kami, maka sejauh ini kami hanya mengusahakan agar setidaknya platform kami dapat digunakan di berbagai ukuran layar, tanpa mempertahankan layout secara rapi.
