HTML5 For Web Designers

by Jeremy Keith

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

Continue reading

Topics Covered Include:

  • The road from XHTML to HTML5
  • Design principles of HTML5
  • Syntax: marking it up your way
  • Web Forms 2.0—sliders and spinners and color pickers, oh, my!
  • Canvas: drawing with code
  • Audio and video
  • Semantics and extensibility: microformats and boiling the ocean
  • New and changed HTML elements
  • New structure elements
  • New content models
  • ARIA, styling, and validation
  • Using HTML5 today—tactics and strategy
  • Shiny new toys: JavaScript APIs
  • Feature detection
  • The future of HTML5

price :

$18.00 + shipping


Standard Antarmuka Aplikasi

Dalam pembuatan sebuah aplikasi tidak lepas dari apa yang disebut dengan antarmuka, antarmuka sendiri adalah bagian dari sebuah sistem aplikasi yang menjembantani komunikasi antara pengguna dengan aplikasi.

Continue reading

Menurutu Theresa Neil, ada sekitar 13 standard model antarmuka yang banyak digunakan.  13 model itu adalah :

  1. Master Detail
  2. Column Browse
  3. Search/Results
  4. Filter
  5. Form
  6. Palette/Canvas
  7. Dashboard
  8. Spreadsheet
  9. Wizard
  10. Question & Answers
  11. Parallel
  12. Interactive
  13. Blank

berikut layout dari ke 13 model antar muka tersebut :

  1. Master/Detail , biasa digunakan untuk aplikasi2 yang banyak mengutamakan isi yang akan ditampilkan, terdiri dari 2 kolom baik secara vertikal maupun herizontal.
  2. Column browse, berbentuk vertikal dan horizontal dengan menambahkan jumlah kolom yang digunakan lebih banyak dari pada model master.
  3. Search, digunakan untuk tampilan yang banyak menggunakan fasilitas pencarian data dan biasanya sangat sederhana tampilannya. Memungkinkan pengguna langsung medapatkan keseluruhan data dari item data yang di temukan baik secara biasa atau dengan pencarain yang lebih spesifik.
  4. Filter, atau refine dataset digunakan untuk oleh tampilan sistem informasi yang bertujuan untuk memfilter data yang akan ditampilkan kedalam bagian bagian tertentu.  Pada panel biasanya didapati satu atau lebih following components seperti text field, slider, checkboxes, listbox, alternate listbox UI dan date range picker. Model ini biasanya digunakan untuk mengelompokkan data yang dicari secara dinamis. Sebagai contoh tampilan eBay
  5. Forms, digunakan untuk keperluan memasukan data kedalam sistem database . Banyak digunakan untuk sistem informasi yang berhubungan dengan pendaftaran dimana ada kegiatan pengisian data. Sebagai contoh tampilan pendaftaran pada Gmail.
  6. Palette/Canvas banyak dijumpai pada tampilan layar sistem informasi yang memuat flow diagrams, linier or non-linier processes, screen layout dan diagram-diagram. Sebagai contoh pada aplikasi Xmind, flowcart, Photoshop.
  7. Dashboard digunakan untuk menampilkan lebih dari satu informasi data yang akan ditampilkan bisa berupa grafik-grafik, tabel dan real time data yang semuanya ditampilkan dalam satu tampilan layar dan dapat dengan mudah dibaca dan dimengerti oleh pengguna dari data yang ditampilkan. Sebagai contoh adalah tampilan FiveRuns, Mint dan FaceOut.
  8. Spreadsheet digunakan oleh sistem informasi yang penggunanya dengan mudah untuk mencari , mengedit, menghapus dan mengisikan data tabel yang tersedia.  Sebagai contoh adalah tampilan dari MS Excel.
  9. Wizard biasanya dijumpai pada sistem informasi yang bertujuan untuk mempermudah pengguna untuk melakukan suatu proses pemasukan data, dengan cara dibantu dengan berupa urutan-urutan langkah yang harus dilakukan pengguna. Sebagai contoh adalah tampilan dari TurboTax dan langkah-langkah instalasi Mac-OS.
  10. Question & Answer dijumpai pada sistem informasi yang berfungsi untuk memberi penjelasan dari pertanyaan penggunanya. Pengguna dimungkinkan untuk mendapat informasi dan solusi dari pertanyaan yang dikemukakannya. Berbeda dengan model search dalam model ini ada semacam petujuk yang dapat dipilih atas permasalah yang ingin diungkapkan dalam bentuk pertanyaan dan solusi permasalahannya. Biasanya permasalahan-permasalahan yang sering dialamai pengguna akan ditampilkan sebagai petunjuk pertanyaan. Contoh sistem informasi ini adalah Quicken.
  11. Parallel panels merupakan model sistem antarmuka yang dapat dijumpai dalam bentuk jendela berukuran kecil dan hanya memuat suatu data informasi yang tunggal. Sebagai contoh info panel dari Mac-OS.
  12. Interactive Model, Model ini memiliki karakteristik yang interaktif dengan banyak elemen yang tersedia dan biasanya dapat menyesuaikan dengan keinginan penggunanya. Elemen berupa grafik, tabel, kalender, peta dan kotak editor dapat disusun menurut keinginan pengguna dalam satu layar dengan cara click dan drag and drop. Sebagai contoh adalah Google calendar.
  13. Blank, Biasanya model ini digunakan untuk menampilkan antarmuka yang memuat sebuah video atau memutar musik secara online, elemennya berupa icon play atau stop layaknya pemutar video dan musik pada umumnya. Sebagai contoh adalah tampilan dari youtube.

Dalam penggunaanya bisa menggunakan secara tunggal dari model yang ada atau perpaduan dari model-model yang ada. Penggunaan model antarmuka yang tepat adalah dengan mengedepankan keinginan dan kemudahan bagi user dalam menggunakannya. Semoga bermanfaat salam!

zoelqivlie ;-)

Smashing eBook Series: #1 “Professional Web Design”

This e-book contains a selection of  best articles about professional Web design and the business side of web development. It contains 10 already published articles and 2 exclusive. For web dev and web designer must have it ;-) but, no free!
Continue reading

Tables of contens

Harsh Truths About Corporate Websites 9
You Need A Separate Web Division 9
Managing Your Website Is A Full-Time Job 11
Periodic Redesign Is Not Enough 12
Your Website Cannot Appeal To Everyone 13
You Are Wasting Money On Social Networking 13
Your Website Is Not All About You 15
You’re Not Getting Value From Your Web Team 15
Design By Committee Brings Death 17
A CMS Is Not A Silver Bullet 19
You Have Too Much Content 20
Conclusions 21

Portfolio Design Study: Design Patterns 22
Light vs. Dark Design 23
How Many Columns? 24
Introductory Block On Top? 26
Layout Alignment 27
Navigation Alignment 29
Search Box Design 30
Flash Elements 30
Where To Put Contact Information? 31
“About Us” Page 34
Client Page 34
Services Page 35
Portfolio Page 36
Workflow Page 37
Contact Page 38
Specials And Extras 39
Other Findings 39
Summary 40
Creating A Successful Online Portfolio 42
Pitfall #1: Obfuscating 42
Pitfall #2: Cramming Information 43
Pitfall #3: Overdoing It 44
Pitfall #4: Unusual Navigation 44
Pitfall #5: Visual Clutter 45
Principles of Effective Portfolio Design 46
Define your Criteria and Strategies for Success 46
Consider Multiple Portfolios 47
Target Your Market 49
Prioritize Usability 52
Use the Right Technology 52
Plan The Project 54
Limit The Scope And Type of Work You Promote 54
Provide Adequate Contact Information, Documentation And Explanations 56
Present Your Work In The Context of Your Goals 57
Infuse Your Personality In The Design 58
Promote And Leverage Your Work 60
Develop Long-Term Goals 60

Better User Experience With Storytelling 62
It Begins With a Story 62
Revealing the Design in Stories 63
The Power of Emotion 65
The Basics of Storytelling for User Experience 68
Happily Ever After: The Reality 72
A Few Modern-Day Storytellers 73
The Storytelling Experiences Around Us 83

Designing User Interfaces For Business Web Applications 89
Websites vs. Web Applications 89
First, Know Your Users 91
Design Process 94
Design Principles 97
Essential Components Of Web Applications 103
Don’t Forget UI Design Patterns 105
Case Study: Online Banking Application 107
Final Thoughts 108

Progressive Enhancement And Standards Do Not Limit Web Design 109
Shiny New Technologies vs. Outdated Best Practices? 110
The Mess That Is The Web 110
Creating Celebrities And A Place We Wish We Were At 111
Hollywood And Advertising Teach Us Nothing 112
The Myth Of Innovating Exclusively Through Technology 113
Innovation Isn’t About New Toys 114
The Corporate Spin On Innovation, And Its Consequences 115
The Stockholm Syndrome Of Bad Interfaces 116
This Is Not About Technology Or Design 117
Where Is The Beauty Of The Web? 119
To Recap: Our Issues 120
Why Standards Matter, And What “Following Standards” Means 122
Progressive Enhancement Works 123
Best Practices Come From Application And Iterative Improvement 125
Together We Can Do This 126

Color Theory for Professional Designers 128
Warm Colors 130
Cool Colors 134
Neutrals 137
In Brief 143
Traditional Color Scheme Types 144
Creating a Color Scheme 155
Conclusion 163

Is John The Client Dense or Are You Failing Him? 165
Explain Why You Are Asking About Money 165
Justify Your Recommendations In Language John Can Understand 166
Include John In The Process 167
Educate John About Design 168
Communicate With John Regularly 169
Explain John’s Ongoing Role 170
The Moral Of The Story 171

How To Identify and Deal With Different Types Of Clients 173
The Passive-Aggressive 173
The Family Friend 175
The Under-Valuer 176
The Nit-Picker 177
The Scornful Saver 178
The “I-Could-Do-This-Myself”-er 179
The Control Freak 181
The Dream Client 182
Wrap-up 183

How To Respond Effectively To Design Criticism 184
Have The Right Attitude 187
Understand The Objective 188
Check Your First Reaction 190
Separate Wheat From The Chaff 190
Learn From It 191
Look For A New Idea 192
Dig Deeper When Necessary 193
Thank The Critic 195

Web Designer’s Guide to Professional Networking 196
Why Network? 196
Networking Tips for Designers 200

download sampel
for full version here ($9.90)

Brave Zeenat WP Theme “it’s Free!”

Brave Zeenet WP Theme is portfolio form Dizeno Co. It’s free Clean Free WordPress Portfolio Theme. Dark style with amazing ideal for photographers, artists and designers to showcase their portfolios.

Side One

Continue reading

Download Theme | Download PSD

Some features:

  1. Fixed Width
  2. Widget Ready
  3. Right Sidebar
  4. Twitter Ready
  5. Homepage configurable to show 5 categories with three latest posts from each category
  6. Jquery Slider
  7. 3 Category Templates: Full Posts, Excerpts, Thumbnails Only
  8. Page Template for Search & Tags
  9. 2 Page Templates: Contact Page, Services Page with three tabs to show content, sample work and contact form
  10. Help Document included
  11. Source Files (PSDs) included for template, page headers, portfolio titles, logo and buttons
  12. Compatible with All  (IE7, IE8, Firefox, Opera, Chrome, Safari, Flock)
  1. Lightbox popup gallery  image:
  2. Gallery Thumbnail :
  3. Contact form:

10 PhotoShop Brushes For Designers

10 Photoshop Brushes for make unique and inspiration your artworks ;-),

Continue reading


Akhirnya selesai juga saya me-redesign portal favorit saya, portal yang saya besarkan bersama teman-teman di komunitas digital art Jogjakarta “Jogjaforce“. Hampir kurang lebih 4 tahun portal itu bertahan dengan segala suka dan dukanya ;-).  Designdiary(DD) tidak jauh berbeda dengan portal-portal lainnya yang membedakan hanya adanya event submission untuk majalah digital yang bernama Design Flip untuk saat ini sudah mencapai edisi 4 dengan lebih dari 50 designer dari seluruh dunia yang berpartisipasi menyumbangkan karya-karya mereka. Konsep dari Designdiary adalah simpel dan open publish sehingga siapa saja boleh me re-publishnya tetapi harus mencantumkan sumbernya yaitu DD dan termasuk urlnya.

Continue reading

Pada versi yang ke 6 kalau boleh saya bilang, theme yang diangkat adalah simpel clean, black and white. Saya mencoba menggunkan theme dari Simple Balance 2.2 ( Blogsessive
) sebagai core / framework themenya selebihnya saya modif termasuk sisi right dan left sidebarnya. Simpel Balance saya suka karena ada beberapa fitur yang sudah ter integrasi semisal pemasangan ads image di sisi sidebar secara otomatis , feedburner rss integration dan lain sebagainya. Alur css dan code themenya saya sangat suka, ini kalau di lihat dari sisi teknis, mudah di pahami dan diuraikan membuat saya mudah memodifnya. Layout saya berkaloborasi dengan “Amin”.

Detail :

- HTML, PHP, CSS, Javascripts (jQuery).

-Wordpress, Theme Blogsessive “simpel balance 2.2″.

Selamat menikmati ;-)


Saya ter- inspirasi dari opening film The Kite Runner yang menurut saya sangat amat bagus dan dahsyat! :-), terutama model typonya yang bisa mengadaptasi dari kaligrafi timur tengah.

Continue reading

Versi The Kite Runner :

Dibuat oleh : MK-12 team Sebuah agensi digital art  dari kansas USA yang banyak sudah amat terkenal dalam pembuatan opener film-filem besar bahakan seri 007 yang baru juga mereka yang buat ;-).

Bicara The Kite Runner, bagi saya filmnya memang menyentuh hati dan membuat kita menjadi sadar akan keagungan Allah S.W.T dan semua yang berjalan diatas muka bumi ini adalah kehendak-Nya …nanti deh saya akan coba review film ini ;-).

8 Web tutorial and resources buat para web designer dan development

Dunia desain memang sangat menarik dan penuh tantangan and yang jelas hasil baliknya tidak diragukan lagi…”fulus!” ;-). Kali ini saya akan berbagi link situs – situs refren yang suka saya kunjungi sebagai seorang web designer,  ada 8 situs yang memang menurut saya sangat bagus dan memberikan penjelasan dengan detail. Satu lagi jangan lupa untuk membookmark serta berlengganan RSS-nya. Dari ke delapan itu yang paling saya suka adalah, karena resource sangat beragam dan selalu baru ;-) tapi yang lain juga bagus loh! he3x…saya tidak memasukkan karena sudah amat terkenal “menurut saya loh” ..;-) berikut 8 Web tutorial and resources buat para web designer dan development itu :

  2. noupe

    Continue reading

10 Free Unique WordPress Theme

Many of themes for wordpress is made everyday and make big category for it.  WordPress is great blog engine with fast grow up population on word wide web. So it make some people to be creative to develop theme.  I have some resource for you to free download theme  with unique category, I think it so unique because it have different layout , colors, typo and more. ok enjoy it ;-)

1. WordPress fun |  Smashing Magazine | download

Continue reading

2. Modern Oak | Drweb | donwload


3. Ciel Du Soir | download


4. One Fine Day | download


5. Duffy | download


6.Deep Blue | download


7. Aspire | download


8.Agregado | download


9. PassWord | download


10. Outdoorsy | download