How to be focussed at work a.k.a. “distracted by shining objects”

I feel that i lack focus.

From my initial guess and amateur psychoanalyses :p, I attribute my lack of focus and ocassional frustration to two things:
Read more

May 5, 2008 | Filed Under Web, personal, self-dev, web design, web-dev | 3 Comments 

[learning] CSS positioning

Several things I learn today about CSS positioning:
1.  float removes the element from natural flow (how the markup was structured)
2. clear drags the layout back from all the ‘floating’ going around (usually for footer).
3. clear doesn’t apply to inline elements
4. using negative margins

May 4, 2008 | Filed Under web design, web-dev | Leave a Comment 

CSS framework utk bikin grid layout

Tadi browsing2, nemu web:

http://960.gs/

Di sini, Nathan Smith, si pemilik situs, menyediakan seperangkat file yang dapat didownload dan digunakan secara gratis utk mulai membuat rancangan berdasarkan grid.

Grid-based design? kenapa? karena…. ternyata desain itu nggak asal2an, ada itungannya.

Nah, bagaimana agar komponen webpage terlihat proporsional? Pakelah grid.

*ooo gitu…. manggut2, mewanti2 diri agar tidak lupa*

Anywayy…. ini gw quote dari entry blog asli si Nathan Smith mengenai isi package ini:

I should note that the 180 KB download size isn’t for the CSS framework alone. That download bundle is for all the files: printable sketch sheets, design templates for Fireworks, Photoshop, OmniGraffle and Vision + the CSS and HTML. The 960.css file itself is only 4 KB when compressed.

Pas baca2 situs ini (hanya satu halaman intro dan satu halaman demo, tapi berguna banget), gw baru ngerti kenapa 960 itu dibawa2 di nama situsnya. Ternyata si angka sakti ini didapatkan dari perhitungan grid yang paling ideal utk resolusi layar komputer user.

Nine-Sixty

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Ngeh akhirnya gw. Dan gw seneng, dapat satu angka pasti yang bisa ngebantu gw dalam mendesain layout web. Maklum, *buta design*

Beginilah programmer yang pelit, gak mo gaji designer, jadi mati2an belajar design biar gak jelek2 amat, lol.

April 26, 2008 | Filed Under Web, web design | 1 Comment 

[tutorial] Web page layout

Found an excellent tutorial / presentation about how to design a web layout. Setelah muter2 nyari artikel yang ngejelasin ttg “where to start when designing web pages”, gw menemukan satu presentation yang top banget. Judulnya: “grids are good”. Penyusunnya namanya Khoi Vinh. Dia design director utk NYTimes online.

Presentation ini ngajarin kita gimana menyusun elemen2 dalam web page, how to make them better structured, look proportional and usable. Dibeberkan secara scientific, bukan cuma trial and error. Something I am definitely needing, having no talent in art n design, lol.

Dalam presentasi ini, Khoi me-makeover homepage Yahoo. Hasilnya..? keren. nuff said.

U can download the PDF file here (8MB, but totally worth it):

http://www.subtraction.com/pics/0703/grids_are_good.pdf

Be sure to browse around on the blog also, www.subtraction.com

April 24, 2008 | Filed Under web design | 1 Comment