Dalam dunia website, Mockup/Wireframe adalah rancangan awal sebuah desain web yang dibuat secara manual menggunakan photoshop, atau software pengedit gambar lainnya. Mockup merupakan gambar model atau prototif halaman web secara full dan detail. Format mockup ini biasanya berbentuk file .PSD (Photoshop Document).
Tampilkan postingan dengan label Desain Web. Tampilkan semua postingan
Tampilkan postingan dengan label Desain Web. Tampilkan semua postingan
Apa itu Mockup/Wireframe (Website) ?
Ditulis oleh
Syakir Rahman pada
6/19/2014 09:00:00 AM
Kategori : Desain Web, Website, Wikiwebia
Cara Mengubah Style Scrollbar Blog/Web pada Chrome, Opera & IE
Ditulis oleh
Syakir Rahman pada
6/11/2014 10:26:00 AM
Kategori : css, Desain Web, Tutorial
Tampilan Scrollbar di sebuah situs terkadang menjadi perhatian lebih karena sering kali scrollbar ini mengurangi keindahan desain web jika tidak diubah stylenya. Misalnya, pada desain web bergaya flat, akan sangat tidak cocok jika ada sebuah elemen memiliki konten yang banyak sehingga memanjang kebawah, namun height(tinggi)-nya dibuat tetap(fix) sehingga menampilkan scrollbar secara otomatis.
10 Tips Web Design Untuk Kebergunaan(Usability) Website
Ditulis oleh
Syakir Rahman pada
6/09/2014 02:26:00 PM
Kategori : Desain Web
Faktor Kebergunaan desain sebuah website adalah salah satu hal yang harus diperhatikan seorang Web designer. Maksud dari kebergunaan ini artinya desain web anda harus berorientasi pada pembuatan dan penempatan fungsi-fungsi yang efektif dan mudah digunakan pengguna. Kita tidak boleh asal mendesain tanpa tahu apakah nantinya itu efektif, bermanfaat, mudah diakses atau tidak.
Apa itu Responsive Web Design ?
Ditulis oleh
Syakir Rahman pada
5/14/2014 04:45:00 PM
Kategori : Desain Web, Wikiwebia
Responsive Web Design adalah suatu keadaan sebuah halaman web dimana tampilannya akan cocok, rapi dan tetap enak dilihat jika diakses dari perangkat apapun dengan resolusi layar yang berbeda. Misalnya, ketika anda mengakses blog ini dengan perangkat (PC/HP/Tablet) yang berbeda, anda akan melihat tampilannya berbeda karena menyesuaika dengan layar. Secara umum, sebuah halaman web tidak bisa menyesuaikan tampilannya sendiri dengan resolusi layar perangkat yang mengaksesnya.
Mengenal Twitter Bootstrap (Framework CSS)
Ditulis oleh
Syakir Rahman pada
1/14/2014 08:30:00 AM
Kategori : css, Desain Web, Software & Tools
Sebelumnya, saya pernah membahas tentang pengertian dari Framework. Nah, kali ini saya akan membahas salah satu dari framework dari jenis Framework CSS. Framework ini bernama Twitter Bootstrap. Jika anda lihat sekilas dari namanya, mungkin anda mengira software ini adalah sesuatu yang mirip dengan media sosial twitter (jika ya, sama seperti saya dulu :D). Namun, anda salah besar.
Twitter Bootstrap adalah framework css opensource (gratis) yang awalnya dikembangkan oleh tim twitter untuk para web designer. Bootstrap merupakan framework paling banyak dipakai saat ini. Dibandingkan dengan framework css lain, bootstrap memiliki fitur yang lebih lengkap dan penggunaannya sangat mudah.
Beberapa fitur twitter bootstrap adalah responsive design, menu dropdown, clean icons, dan masih banyak lagi. Saat ini, Twitter bootstrap sudah mencapai versi 3. Karena kelengkapan fiturnya, hampir semua jenis website dapat didesain menggunakan bootstrap.
Lebih lengkap tentang Bootstrap, anda bisa langsung mengunjungi webnya yaitu http://getbootstrap.com. Sedangkan untuk mendownloadnya, anda bisa klik link github ini (Versi 3).
Twitter Bootstrap adalah framework css opensource (gratis) yang awalnya dikembangkan oleh tim twitter untuk para web designer. Bootstrap merupakan framework paling banyak dipakai saat ini. Dibandingkan dengan framework css lain, bootstrap memiliki fitur yang lebih lengkap dan penggunaannya sangat mudah.
Beberapa fitur twitter bootstrap adalah responsive design, menu dropdown, clean icons, dan masih banyak lagi. Saat ini, Twitter bootstrap sudah mencapai versi 3. Karena kelengkapan fiturnya, hampir semua jenis website dapat didesain menggunakan bootstrap.
Lebih lengkap tentang Bootstrap, anda bisa langsung mengunjungi webnya yaitu http://getbootstrap.com. Sedangkan untuk mendownloadnya, anda bisa klik link github ini (Versi 3).
Download Gratis Template CSS Blog New jenuh
Ditulis oleh
Syakir Rahman pada
10/08/2013 03:46:00 AM
Kategori : Desain Web, Portofolio, Template CSS
Jarang-jarang saya bisa ngeshare karya saya di blog. Namun, kali ini mungkin akan menjadi pertama kalinya saya mulai berbagi karya-karya web design saya kepada anda sekalian. Yaa, saya berniat untuk membuat dan berbagi template web di blog ini. Untuk saat ini, saya hanya akan berbagi template CSS-nya saja. Artinya template yang berisi file .html dan .css beserta gambar penunjangnya saja. Bukan template yang bisa langsung di install di Blogger maupun Wordpress.
Waktu yang saya punya belum cukup untuk membuat template Blogger maupun tema Wordpress yang layak dibagikan. Walaupun begitu, saya tetap berusaha membuat template CSS yang berkualitas yang tujuan sebenarnya adalah menginspirasi anda dalam mendesain web maupun blog anda.
Nah, untuk kali ini saya akan berbagi template CSS bernama "New Jenuh", Template yang saya buat ketika saya sedang jenuh ngeblog (Lebay). Berikut ini adalah Screenshootnya
Untuk bisa mendownloadnya, silahkan klik link dibawah ini :
[Download Template CSS New Jenuh]
Waktu yang saya punya belum cukup untuk membuat template Blogger maupun tema Wordpress yang layak dibagikan. Walaupun begitu, saya tetap berusaha membuat template CSS yang berkualitas yang tujuan sebenarnya adalah menginspirasi anda dalam mendesain web maupun blog anda.
Nah, untuk kali ini saya akan berbagi template CSS bernama "New Jenuh", Template yang saya buat ketika saya sedang jenuh ngeblog (Lebay). Berikut ini adalah Screenshootnya
Untuk bisa mendownloadnya, silahkan klik link dibawah ini :
[Download Template CSS New Jenuh]
Google Meluncurkan "Google Web Designer" untuk Desainer Web
Ditulis oleh
Syakir Rahman pada
10/05/2013 06:09:00 AM
Kategori : Desain Web, Google, Software & Tools
Ada kabar yang sangat baik bagi seorang web designer dan atau web developer. Yaa, Google telah meluncurkan sebuah Software bernama "Google Web Designer" .
Google Web Designer adalah sebuah software yang dibuat dengan berbagai fitur untuk memudahkan anda membuat desain web modern dan interaktif tanpa harus 100% memanipulasi desain dengan kode CSS. Alat ini membantu anda untuk seminimal mungkin menggunakan kode CSS.
Tools ini ditujukan untuk para ahli dan menengah dalam membuat konten web berbasis HTML-5, Desain responsive, Iklan dan masih banyak lagi. Google web designer memungkinkan anda dengan mudah membuat iklan untuk tampilan PC dan seluler. Hal ini sangat membantu pengiklan online untuk membuat banner dan animasi iklannya.
Google Web Designer adalah sebuah software yang dibuat dengan berbagai fitur untuk memudahkan anda membuat desain web modern dan interaktif tanpa harus 100% memanipulasi desain dengan kode CSS. Alat ini membantu anda untuk seminimal mungkin menggunakan kode CSS.
Tools ini ditujukan untuk para ahli dan menengah dalam membuat konten web berbasis HTML-5, Desain responsive, Iklan dan masih banyak lagi. Google web designer memungkinkan anda dengan mudah membuat iklan untuk tampilan PC dan seluler. Hal ini sangat membantu pengiklan online untuk membuat banner dan animasi iklannya.
Fitur Google Web Designer
1. Modus 2 animasi (Two Animation Modes)
Modus Langsung : Memungkinkan anda membuat animasi satu demi satu gambar dan secara otomatis akan ada frame diantaranya.
Modus Tingkat lanjut : Menganimasi tiap elemen dengan menggunakan layer, dan dengan mudah mengganti lokasi elemen.
2. Desain 3 Dimensi (Full 3D Authoring Environment)
Membuat dan memanipulasi konten 3D melalui sebuah pengurutan/array dalam tools dan dengan kekuatan CSS3. Memutar objek dan bahkan desain 2D, memvisualisasi transformasi dan translasi 3 dimensi sesuai kebutuhan anda.
3. Tampilan Desain dan Tampilan Kode (Design View and Code View)
Walaupun alat visual sangat membantu, itu tidak akan pernah dapat mewakili kreatifitas, imajinasi dan visualisasi anda secara penuh. Oleh karena itu, dalam setiap pembuatan desain secara visual, anda dapat melihat kode-kode CSS yang membangun desainnya secara otomatis dan melihat perubahan kode dalam setiap pembaruan desain.
4. Alat Ilustrasi (Illustration tools)
Untuk menambahkan sebuah elemen atau tag html baru, anda dengan mudah dapat membuatnya dengan menggambarnya dengan menggunakan Tag tool.
5. Mudah Membuat Iklan (Easy Ads Wokrflow)
Anda dapat dengan mudah membuat iklan yang dapat diterbitkan dalam platform atau perangkat apapun (Responsive). Pilih dari DoubleClick Studion atau AdMob, atau dengan Generic Option untuk membuat konten dalam jaringan iklan apapun. Tidak menggunak koding apapun.
Nah, itulah fitur-fiturnya. Anda bisa mendownload softwarenya yang masih versi beta ini di http://www.google.com/webdesigner/.
Semoga bermanfaat
~Muhammad Syakirurohman~
Mengenal apa itu CSS dan bagaimana menggunakannya
Ditulis oleh
Syakir Rahman pada
8/31/2013 05:16:00 PM
Kategori : css, Desain Web, Tutorial
Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke CSS3.
CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.
Sebagai blogger, Anda juga harus tahu apa itu CSS dan bagaimana menggunakannya agar mudah untuk merancang blog anda. Kode CSS membuat pembaca blog kita menjadi nyaman dan betah berlama-lama di blog kita sehingga pageviews situs kitapun meningkat. Namun, itu semua tergantung bagaimana kita menggunakannya sehingga bisa memikat pengunjung. Untuk itulah serial tutorial ini dibuat :) .
PENGENALAN DASAR
Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.Contoh penulisan kode css :
Body {background-color: white;}
‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.
CARA-CARA PENGGUNAAN CSS
Untuk latihan penggunaan CSS, langkah pertama yang harus anda lakukan adalah membuat file dengan menggunakan Software kode editor seperti Notepad, lalu namai file dengan format ‘.html’. Lalu praktekkanlah cara-cara berikut ini. Ada 3 cara untuk menggunakan kode CSS di situs Anda.
1. CSS sebagai atribut/elemen/bagian dari tag HTML.
Oke, sebagai contoh, lihat gambar screenshoot kode CSS di bawah ini:
‘Div’ adalah tag html/Mark up yang dihiasi oleh kode css. kode cssnya adalah ‘style =’ padding: 5px 20px; … ‘. Cara ini biasanya dipakai jika kode cssnya sedikit.
2. CSS dalam tag <style type=”text/css”> (Kode CSS) </ style>.
Kode css terletak antara tag ‘style’ yang biasanya diletakkan dibawah elemen <title></title>(Tapi, tidak untuk gambar ini). Dengan cara ini anda harus menentukan nama selektor. Pada gambar diatas, selektornya adalah ‘.download’.
3. CSS sebagai file terpisah.
Kode pada gambar diatas adalah kode html untuk memanggil kode css yang terpisah. Kode itu biasanya diletakkan dibawah elemen <title></title> pada sebuah file html. Dalam cara 3 ini, kode css berada pada file .css yang dibuat dengan cara yang sama yaitu dengan sofware notepad, namun diberi format .css.
Untuk Latihan cara 3 ini silahkan anda buat folder. Dalam folder itu anda buat lagi file .html, misalnya latihan.html . Lalu buat file css-nya misalnya style.css.
Dalam file latihan.html, silahkan ketikkan kode dibawah ini :
<html>
<head>
<title>Latihan</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
</head>
<body>
<div class=”download”>
<a href=”#”>Download</a>
</div>
</body>
<html>
<head>
<title>Latihan</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
</head>
<body>
<div class=”download”>
<a href=”#”>Download</a>
</div>
</body>
<html>
Simpan, lalu buka di browser. File .html anda belum dihias karena kita belum menambahkan kode css kedalam file style.css. Jadi, silahkan masukkan kode seperti dibawah ini, tentu anda bisa merubah-rubahnya :
.download {
padding:5px 20px;
background:#000;
border:1px solid auto;
text-transform:uppercase;
font-size:20px;
}
padding:5px 20px;
background:#000;
border:1px solid auto;
text-transform:uppercase;
font-size:20px;
}
setelah itu simpan, lalu refresh file latihan.html yang sedang dibuka di browser
Selamat mencoba :) .
Keterangan :
Cara 1 dan 2 sebagian besar digunakan dalam blog blogspot/blogger. Sedangkan, Cara 3 biasanya digunakan dalam situs web berbasis wordpress ataupun yang lainnya, karena membutuhkan ruang untuk menyimpan file css.
Jika menggunakan cara2 dan 3, Anda harus melengkapi tag html yang akan anda hias dengan atribut ‘id’ atau ‘class’. Ini adalah 2 cara untuk penamaan selektor pada kode css. Jika menggunakan atribut ‘id’ (misal: <div id=”download”></div>), maka selektor dalam kode cssnya adalah sebagai berikut :
#download {
Properti:nilai;
}
Properti:nilai;
}
Sedangkan, jika menggunakan atribut ‘class’ (misal:<div class=”download”></div>), maka selektor dalam kode cssnya adalah sebagai berikut :
.download {
Properti:nilai;
}
Properti:nilai;
}
Dengan kata lain, hanya dibedakan dengan tanda “#” dan “.” .
Nah, lalu jika anda ingin menghias tag tertentu dalam file html, misalnya seluruh tag h1 yang ada, Maka anda dapat menuliskan selektornya tanpa menggunakan tanda apapun. Seperti ini :
h1 {
properti:nilai;
}
properti:nilai;
}
Jika anda masih ada yang belum ngerti dengan penjelasan saya diatas, silahkan ditanyakan lewat komentar.
Sekian dari saya. Semoga bermanfaat dan selamat belajar :) .
~Muhammad Syakirurohman~
Langganan:
Postingan (Atom)
Kategori
- Bisnis Online
- css
- Curhat Blogger
- Desain Web
- Etika Ngeblog
- Freebies
- Guest Blogging
- Out Of Topics
- Pemula
- Portofolio
- Promosi Blog
- SEO
- Seri Artikel
- Smartphone
- Software & Tools
- Template Blogger
- Template CSS
- Tips Menulis
- Tips Ngeblog
- Trik Blogger/Blogspot
- Tutorial
- Website
- widget
- Wikiblogia
- Wikiwebia
- Wordpress
Blogger templates
Popular Posts
-
Setelah beberapa hari saya pertimbangkan, akhirnya saya memutuskan untuk memindahkan blog ini ke wordpress self hosted. Awalnya saya ragu ka...
-
Dalam pemrograman web, anda akan mengenal istilah Client-side dan Server-side Scripting. 2 istilah itu digunakan untuk mengelompokkan beber...
-
Jika anda menjadi seorang programmer, anda tidak akan terlepas dari yang namanya software & tool (Alat) untuk membantu anda bekerja. Sa...
-
Setelah sebelumnya saya pernah membahas tentang bagaimana membuat elemen website SEO friendly , kali ini saya akan membahas cara mengoptima...
-
Salah satu faktor SEO blog anda yang paling penting adalah banyaknya halaman web blog anda yang terindex di google. Semakin banyak halaman ...
-
Sebagai seorang pengguna internet, blogger atau bahkan web developer kita harus mengenal dan mengetahui elemen atau hal-hal yang ada pada s...
-
Dalam dunia website, Mockup/Wireframe adalah rancangan awal sebuah desain web yang dibuat secara manual menggunakan photoshop, atau softwar...
-
Semakin hari, aktifitas blogging di Indonesia semakin marak dan berkembang. Perkembangannya dapat dinilai dari banyaknya blog yang ada, k...
-
Sudah tidak dapat dipungkiri lagi, bahwa sering kali seorang blogger kehilangan semangat ngeblognya entah karena perfomance SEO blognya men...
-
Jarang-jarang saya bisa ngeshare karya saya di blog. Namun, kali ini mungkin akan menjadi pertama kalinya saya mulai berbagi karya-karya we...