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 ;-)

Free HTML5-CSS3 Template from 52FrameWork


52framework is a complete tool to help you start building with HTML5 and CSS3.
Continue reading

  1. With the use of new tags
  2. Input fields,
  3. rounded-corner
  4. text-shadows
  5. and  more.

It includes a grid system and CSS reset (that is modified for HTML5).
Demo: http://demo.52framework.com/
Download 52FrameWork: http://52framework.com/downloads/

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)

The Woork Handbook (for Web Dev)


The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.
Continue reading

This book is a miscellanea of articles on his blog in the past year. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and he received a lot of requests to distribute a printable version of its contents. In the past days he worked hard to prepare a first version of this handbook and distribute it for free. The Woork is Antonio Lupetti personal website with tons of nice articels for web dev.

Download

Sebelum Belajar Membuat Web

Saya suka di tanya sama teman-teman atau para peserta workshop saya , “mas belajar web site dari internet dimana ya?” atau “mas punya sources untuk belajar web?” padahal simpel saja jawabnya ” buka google.com dgn key “web site tutorial” atau “belajar web”” pasti akan dapat ratusan link tentang hal itu ..:-), tapi kalau itu mah bukan jawaban yang baik…suatu saat saya akan di balas sama orang lain juga nantinya kalau saya menanya sesuatu ..dengan jawaban yang sama…curiga pas saya nanya “mas tau jalan ini gak?” dan bakal di jawab tanya aja dengan google.com dengan kata kunci naman jalan itu…huahuahuahua…apes deh!.., hold! .

grungydesignfinalsmall

Continue reading

Ini ada beberapa link site untuk belajar membuat layout yang bagus untuk disimak!

Psdfan.com

grungydesignfinalsmall

Hv-designs.co.uk

finished

Talk-mania.com

1b

Back to sebelum belajar membuat web, kalau untuk belajar membuat web memang diperlukan beberapa kemampuan yang harus dipenuhi, tidak susah dan tidak mudah juga.  Kemampuan seni atau jiwa seni saja tidak cukup untuk hal ini, kenapa? karena dengan kemampuan seni yang benar-benar matang dan dahsyat tetapi tidak memiliki kemampuan untuk mentransformasikan kedalam bentuk layout web, html dan sebagainya maka hal tersebut tidak ada artinya..malah akan pusing sendiri.  Tetapi sebaliknya dengan amunisi code dan kemampuan layout web yang tinggi tetapi tidak ada kemampuan seni yang baik juga tidak ada artinya ;-).

Sumber inspirasi menurut saya juga hal yang sangat penting dalam belajar web, perkaya sumber – sumber inspirasi mulai dari sumber icon, model layout web, teori warna, teori interaksi komputer dengan manusia, efek-efek buat web baik flash maupun javascripst, dan sebagainya…,pengalaman saya dulu saya suka sekali mebookmarks setiap web yang menurut saya bagus untuk inspirasi web nantinya..tidak disadari saya dengan jumlahnya yang kian hari terus bertambah…belum lagi langganan rss yang saya ikuti…tapi memang hal tersebut benar – benar membantu saya karena kita tidak akan kehilangan link/alamat web mereka tanpa harus googling lagi. Dikala saya stag! saya bisa mengunjungi mereka atau puyeng dengan data dari google yang bejibun.

Peka terhadap trend dunia web yang ada sekarang juga sangat utama, karena ini akan mempermudah kita dalam focus terhadap proses belajar web kita, dulu saya sangat bangga kalau bisa buat link di dalam .html karena trend saat itu bisa membuat link memang menjadi favorit di awal kebangikatan dunia design web. Sekarang saya focus dengan trend web yang memenuhi crossbrowser / dapat jalan dengan baik disemua browser yang menjadi trend saat ini. Clean code atau alur penulisan code yang tertata baik juga perlu kita persiapkan karena hal ini membantu kita untuk selalu  rapi dan hal ini mempermudah kita dalam menganalisa permasalah yang nantinya bisa kita temua dikemudian hari.

Berdiskusi dengan para pakar atau teman sesama yang sedang belajar web baik secara online atau offline merupakan hal yang jangan dilupakan, karena sekecil apapaun informasi dari mereka sangat berguna bagi kita, kembali lagi ke hal tadi…dari pada tanya ke google mending tanya sama teman dulu..he3x..kalau mentok atau tidak puas baru kita ke google.

Dukungan peralatan juga menjadi hal yang utama, baik software maupun hardware. Berangkatlah dari software yang mudaha dan benar-benar cocok buat kita untuk dapat memahami dalam belajar web itu lebih baik. Menggunakan notepad, kenapa tidak kalau itu lebih membuat kita cepat mengerti dan hafal dalam penulisan code …ketimbang menggunakan dreamweaver yang penuh dengan tab dan kita bingung menggunakannya…tetapi perlahan-lahan kita beralih ke software yang lebih pro juga jauh lebih baik berarti ada usaha untuk berkembang dan maju ;-)

Membaca buku dan majalah tentang design web baik yang cetak atau yang elektronik juga sangat diperlukan,  bisa jadi kta belajar sambil duduk di kereta dalam perjalanan ke luar kota atau di pesawat..hitung..hitung bergaya ….he3x..yang lain baca koran dan komik kita buku web heheheh.

Akhirnya selamat belajar membuat web ;-)

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 noupe.com, karena resource sangat beragam dan selalu baru ;-) tapi yang lain juga bagus loh! he3x…saya tidak memasukkan smashingmagazine.com karena sudah amat terkenal “menurut saya loh” ..;-) berikut 8 Web tutorial and resources buat para web designer dan development itu :

  1. Noupe.com
  2. noupe

    Continue reading