Archive for June, 2012


Selain mengerjakan Mondes dan Integration,saya juga mengerjakan aplikasi SINAS… berikut penampakannya…

SINAS-LOGIN

untuk tampilan dalamnya mirip dengan mondes…

SINAS-MIGAS

SINAS-MIGAS

saya menggunakan plugin JQUERY …

Inside Sinas

Inside Sinas

Demikian…

Saat ini saya dan teman – teman sedang mengerjakan aplikasi Mondes dan Integration milik BP-Migas. Seperti biasa saya kebagian mengerjakan UI dan UXnya…

Jujur saya masih kurang sreg dengan ahsil desainnya, tp yahh untuk sementara saya posting aja deh di sini… kali aja bisa dapat masukan.

MONDES

MONDES

 

yang diatas itu adalah salah satu aplikasi di dalam Integration , namanya palikasi mondes.

klo halaman loginnya dan aplication choosernya dibawah ini.

login integration

login integration

 

chooser integration

chooser integration

 

Demikian…

Sekarang saya dan kawan – kawan di kantor sedang mengerjakan aplikasi Mondes dan Integration milik klien kami yakni BP-Migas. Seperti biasa , saya kebagian tugas untuk mendesain tampilan (User Interface) dan User Experiece (UX) dari aplikasi ini.

Dalam desain ini saya coba mengaplikasikan penggunaan CSS3 dan coba bereksperimen dengan CSS3 transition dan kerframing. Nah ini dia yang baru!. Ternyata dengan menggunakan CSS3 kita bisa loh membuat sebuah animasi sederhana seperti yang biasa dilakukan oleh javascript, tentunya dengan coding yang jauhhh lebih simple!. Kita bisa buat button hover yang smooth, dan animasi pada saat loading page atau bahkan bisa looping sesuai kebutuhan.

Berikut beberapa petikan CSS3 transition dan keyframing :

1 ) ini yang kerframing, maksudnya kita bisa bikin animasi yang berjalan sendiri tanpa perlu interaksi dari mouse.

welcome {
background:url(../images/bg4.jpg);
padding:5px 15px 5px 10px;
color:#ffffff;
position:fixed;

left:auto;
text-align:center;

border-bottom-right-radius: 15px;
border:0px 1px 1px 1px solid #ffffff;
border-left:5px solid #f11815;

-moz-box-shadow: 0px 0px 5px #888;
-webkit-box-shadow: 0px 0px 5px #888;
-o-box-shadow: 0px 0px 5px #888;
box-shadow: 0px 0px 5px #888;

-webkit-animation: headTitle 3s ease;
-moz-animation:    headTitle 3s ease;
-o-animation:     headTitle 3s ease; /*infinite looping*/

}

@-webkit-keyframes headTitle {
0%   { opacity: 0; top:-100px;}
100% { opacity: 1; top:0px;}
}

@-moz-keyframes headTitle {
0%   { opacity: 0; top:-100px; }
100% { opacity: 1; top:0px; }
}

@-ms-keyframes headTitle {
0%   { opacity: 0; top:-100px; }
100% { opacity: 1; top:0px; }
}

2) ini untuk yang transition saya gunakan untuk button.

a.ctl00_mnHeader_1:hover {
text-decoration: none;
display:block;
background-color:#ffffff;
border-radius:5px;
padding-left:4px;
padding-right:4px;
padding-top:2px;
padding-bottom:2px;
color: #000000;

-moz-transition-property: background-color, color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
-o-transition-property: background-color, color;
-o-transition-duration: 0.5s;
}

sebagai catatan, penggunaan teknik ini berbeda diantara beberapa browser, misalnya firefox harus menggunakan sintax -moz-, untuk opera -o- dan untuk chrome dan safari -webkit-.

 

Kemarin sala satu rekan kerja di kantor , meminta saya untuk membuat desain banner untuk keperluan acara perpisahan anak TK. gladi Siwi, tempat anaknya.

Yahh… dengan kemampuan laptop yang seadanya ( karena ga punya corel draw dan adobe illustrator saya bermasalah, maka saya menggunakan photoshop untuk mendesainnya and you know what?? laptop aku beraaaatttt bgt), saya coba deh tuh untuk ngedesain.

Teknik yang digunakan sih sederhana, cuma pake fasilitas blending option, trus pake font unik dan pake tool selection buat nge cut foto.Juga ada pake filter blur.

Hasilnya :

Banner Farewell chalkboard

Banner Farewell chalkboard

 

Desain lainnya seperti ini

Banner Farewell baloon

Banner Farewell baloon

 

Silahkan disimak… sederhana sihhh… karena butuh cepat.. hehehe