Kebutuhan akan suatu konsep dan mekanisme belajar mengajar (pendidikan) berbasis TI (e-learning) menjadi tidak terelakkan lagi. Konsep sistem pembelajaran mandiri ini membawa pengaruh terjadinya proses transformasi pendidikan konvensional ke dalam bentuk digital, baik secara isi (contents) dan sistemnya. Sistem pembelajaran mandiri itu sendiri biasanya berbentuk website, yang dapat kita akses dengan internet. Penggunaan berbagai macam device di masyarakat Indonesia menjadi sorotan untuk merancang suatu sistem pembelajaran mandiri yang dapat diakses pada berbagai macam dan bentuk device. Perancangan antarmuka tersebut dikembangkan dengan memperhatikan kemudahan (usability) terhadap pengguna dalam menggunakan layanan ini. Dalam merancang sebuah antarmuka yang baik, langkah awal yang harus dilakukan adalah dengan membuat sketsa (gambaran) awal dari website tersebut. Tahap berikutnya adalah pembuatan antarmuka website tersebut dengan menggunakan kode HTML5. Selanjutnya menambahkan framework bootstrap supaya tampilan website tersebut terlihat lebih baik dan responsive. Penelitian ini menghasilkan sebuah website sistem pembelajaran mandiri yang dapat diakses diberbagai perangkat (device) yaitu PC desktop (berbagai jenis web browser), Tablet PC (berbasis Android dan iOS), dan smartphone (berbasis Android, iOS, Windows Phone dan Blackberry). Tampilan website tersebut dapat menyesuaikan dengan lebar layar perangkat, yang biasa dikenal dengan teknik responsive web design.

The Requirement of concept and learning mechanism (education) based IT (e-learning) becomes inevitable. The concept of system self-learning have make impact in transformation process of education conventional into digital form, either on contents or in system. System self-learning itself is usually shaped website, when we can access with internet. The employing of different device in Indonesian become spotlight for to design of website system self-learning when we can access in different type of device. The user interface design for each devices must meet the requirements so that any user can experience and access the service in the most user-friendly manner. In kind of the user interface design, the first phase is should to begin with make a sketch of website. The next phase is a making of the user interface with HTML5 code. Furthermore is to add framework bootstrap so as to the display of website will look the well and responsive. The product of this research is a website system self-learning which can be access in different device like PC desktop (kind of web browser), Tablet PC (based Android and iOS) and smartphone (based android, iOS, Windows Phone and Blackberry). The display of website can adjust itself with width screen device, commonly known as responsive web design techniques.

Kata Kunci : sistem pembelajaran mandiri, usability, HTML5, responsive web design