April 1st, 2011

Jak studuji

Filed under: Know-how — Ondřej Válka @ 09:20

Mám rád knihy, protože se soustředí na dané téma a jdou do hloubky. Vetšinou jsou taky zárukou toho, že je autor znalý problematiky (když už o něčem píše knihu).

Ne vždycky si ovšem můžete můžete dovolit přečíst celou knihu na téma. Někdy vás tlačí čas, jindy potřebujete udělat rychlý research k projektu. A pak je tu samozřejmně každodenní problém informačního přetížení — mnoho, často nesouvisejících, informací.

Osobně mi pomáhá odkládat zajímavé informace a později je shlukovat do nějakých tematických celků. Dělat si výpisky z přednášek, kde jste byli. Výpisky z knih které jste četli. Podobně to dělá třeba Relpost nebo Luke Wroblewski (čtěte jeho zápisky z konferencí An Event Apart nebo pravidelné pondělní shrnutí Data Monday). Mimochodem zrovna Lukův blog je jeden z těch, které opravdu stojí za to číst.

K projektům: pokud děláte research, snažte se ho nějak vizuálně zachytit. Ne jen jako seznam odkazů (už jen proto, že research z webu je samozřejmně jen jeden z mála způsobů). Já třeba používám klasické prezentace. Vzniklá PDFka se jednak snadno posílají klinetům a druhak jsou docela dobře znovupoužitelné.

Co je ale možná největší přínos takového zachycování informací, že se po měsíci ohlédnete a řeknete si: toto jsem nastudoval. Bez debat a dohadů o tom co umíte nebo neumíte vás prezentují jasné a nezvratné výsledky.

A vidíte to nejen vy, ale především všichni, kteří se o vás zajímají (ať kolegové nebo klienti).

February 6th, 2011

Wallpaper reinvented

Filed under: Know-how — Ondřej Válka @ 21:52

Since I switched to the Mac OS X a few years ago, I started to use my desktop in a different way then before. All the application icons I use every day were moved to the Dock and the desktop itself became a blank space.

Just for a second, try to thin out what does your table desk looks like. Is it cluttered up with stuff or is it a workbench where current items are operated? I use my desk in the second way and the same is for my desktop. Anyway, from time to time, the desktop gets filled up and mastering all the files becomes difficult.

Is there a way of managing desktop in an effective an elegant way? As I got used to a GTD-like system of personal project management, I came with an answer to the question.

Having divided the desktop in 5 vertical bars I gained 5 space for 3 to 6 projects. Just a few notes on the system:

  • The very right bar is an inbox and working space for any short-time temporary files and drives that are mounted to the system.
  • The bar next the very right one is an inbox in fact. It’s the place where to put all the inspiration images, links and documents, found while browsing the Web. I clean up this space usually once a week.
  • If a project is extensive, it usually takes up a whole bar. If there are more projects, placing the icons to the top (resp. to the bottom) of the screen one gains a space for all of them.
  • The system is able to handle large amounts of icons which might not be possible without using it.

Not satisfied with the colors? Design your own scheme!

August 4th, 2010

Celostránkové třídy a identifikátory

Filed under: Know-how — Ondřej Válka @ 14:57

Pište HTML kód jako znovupoužitelné komponenty, víceméně nezávislé na rodičovských prvcích.

V HTML kódu často přidávám prvku <body> (nebo některému jinému vysoko posazenému prvku) nějakou třídu nebo identifikátor. Označím tímto tak např. stránku s unikátním obsahem nebo třeba šablonu podstránky.

Využívám toho k odlišnému stylování vybraných částí layoutu – jejich vzhled upravuji podle toho na které stránce nebo ve které šabloně se nacházejí.

<body class="layout-subpage" id="page-about">
    …
</body>

Na první pohled to vypadá docela prakticky.

Nevýhody tohoto přístupu se objeví, jakmile vyvíjíte složitější web. Pokud layout prochází změnami, bývá nutné překydávat kusy kódu sem a tam. Celý koncept se pak stává nepraktickým a je třeba sáhnout po flexibilnějším řešení.

June 5th, 2010

Podmíněné komentáře efektivně

Filed under: Know-how — Ondřej Válka @ 12:00

Ani ten nejlepší kodér se bez nich neobejde. Podmíněné komentáře jsou mocný nástroj k ladění kaskádových stylů pro Internet Explorer. Rád bych zde předvedl, jak je efektivně používat.

Metoda Obelix

Klasický způsob použití podmíněných komentářů spočívá v připojení zvláštního kaskádového stylu v hlavičce HTML dokumentu (pro libovolné IE, pro vybranou verzi IE, příp. pro skupinu verzí).

<!--[if IE 7]>
   <link rel="stylesheet" href="ie7.css" media="screen">
<![endif]-->
<!--[if lte IE 6]>
   <link rel="stylesheet" href="ie6.css" media="screen">
<![endif]-->

Metoda Asterix

Pojďme to nyní zkusit trochu jinak. Na tento způsob jsem narazil kdysi kdesi. Popsán je také v SitePoint CSS Reference.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>Podmíněné komentáře efektivně</title>
     </head>
     <!--[if lte IE 6]><body id="ie6" class="ie non-ie7 non-ie8"><![endif]-->
     <!--[if IE 7]><body id="ie7" class="ie non-ie6 non-ie8"><![endif]-->
     <!--[if IE 8]><body id="ie8" class="ie non-ie6 non-ie7"><![endif]-->
     <!--[if !IE]>-->
          <body id="non-ie" class="non-ie non-ie6 non-ie7 non-ie8">
     <!--<![endif]-->

          ...

     </body>
</html>

Veškerý obsah webu tímto obalíme do jakéhosi kontejneru, který obdrží třídy a identifikátor podle použitého prohlížeče. S kouzelným HTML nápojem tak přichází velká CSS síla.

     input.checkbox { position: relative; top: 3px; }

#ie6 input.checkbox { top: 1px; }
#ie7 input.checkbox,
#ie8 input.checkbox { top: -1px; }

Prakticky tak vzniká podmínka, s níž lze jakoukoliv CSS definici uplatnit pouze pro danou verzi IE. V praxi použito např. na webu ABS Jets.

Co s tím, Panoramixi?

Takto použité podmíněné komentáře zvyšují udržovatelnost a přehlednost kaskádových stylů.

  • Nemusím pamatovat na vytvoření zvlášních stylopisů. Mám je k dispozici, jakmile potřebuji začít ladit.
  • Veškěrý kód k jednomu prvku zůstává na jednom místě a netříští se do více souborů. Odpadá nutnost editace a správy takových souborů.
  • Snadnost použití umocňuje aplikace na prvek <body>, jakožto prvek nejvyšší úrovně – podmíněný selektor díky tomu podmínkou vždy začíná. Sémantický kód není narušen nadbytečným <div>.
  • Vyjadřovací síla podmíněných komentářů dostává další rozměr – lze ji uplatnit např. při použití jQuery. Zacílit lze i např. všechny prohlížeče kromě IE 7.

January 18th, 2010

Everyday prototyping

Filed under: Know-how — Ondřej Válka @ 01:38

Prototyping is a must. No matter what business you deal with, prototyping should be a welcome guest that helps you figure out the right decisions in quick-and-dirty way. Today I’d like to reveal my prototyping techniques, related not only to Web sites.

Wearable mockup

T-shirt mockup Designing a T-shirt for signály.cz I have to find out which size of the illustration would fit best. A paper cutout (based on a quick sketch) together with an old blue T-shirt allowed me to show the final product to the client without touching a mouse/keyboard.

All the equipment I used was a pen, a paper, a scissors, a T-shirt and a half-assed mobile phone camera. Having finished the phone call with the client I was able to create an almost final design solution in half an hour.

From paper to computer screen

The text was originally published at Wireframes magazine. Thanks Jakub!

A part of a school project was to create a paper mockup. Having considered all the problems I’m going to resolve I’ve made a list of proper goals:

  • I have to create a paper prototype of an audio/video manager app. I already have the creative brief and the technical brief.
  • The prototype should contain all the screens and dialogue boxes of the app. It should be compact, easy to store, portable all-in-one solution.
  • It should provide quick and fancy user testing.

I wanted to have the whole app in a single notebook. Because the app would have a single window interface, the solution had crossed my mind immediately.

The result with all its benefits you can see below.

Audio/video manager app mockup

See all the cutouts photos at Flickr.

  • A page = a screen. Using such solution provides you with a lot of space around every screen. Put down some thoughts, notes and explanations.
  • The main frame of the app can serve as a stencil when drawing new screens. Speeds ups the drawing process and keeps the notebook full of drawings clean and consistent.
  • In addition, the space around every screen serves as a place for pop-up windows, dialog boxes and other elements made from post-it papers.
  • The main frame stencil can hide all the stuff around a screen and turns a set of described wireframes into a testable prototype in a moment.

Take such prototype anywhere, create new screens in a bus or train, test with your mates during a coffee break and finally archive it next to your past prototypes. Worth trying, isn’t it?

Keep your eyes on I ♥ wireframes—a popular wireframes showcase.

Off the wall prototype

Since signály.cz is a Christian organization, we wanted to have our very own cross. We’re a non-profit organization, so the design solution has to be low-cost and easy to produce.

Using 2 moodboards I’ve suggested a solution, but it would have been complicated to be produced and also quite different from our corporate design too.

Moodboards

Together with a couple of friends we’ve designed a cross that perfectly goes along with our design style. A few sketches came in handy.

Final production process included a paper prototype of the cross. In 15 minutes we joined some blank papers to show the final shape.

The cross was hand-crafted together with a few skillful friends of mine. Thank you, guys—the result was amazing.

Cross

The good, the bad and the ugly sketchbook

I can’t remember how many times a day a open one of my sketchbooks to draw a design concept or put down an inspiring idea.

Actually, I have 3 sketchbooks. The fat one is A4 format where I put every single possible sketch: wireframes, banner proposals, sketches etc.

The big one is A4 format too, suitable for text notes. While reading books or articles I put down notes, diagrams etc.

sketchbooks

Don’t miss great Flickr group User Experience Sketches.

The little one is a pocket-size notebook that I try to take with me everywhere. The ideas and concepts I’d like to remember but I haven’t time to carry out now I keep here. Such notebook could one serve as a springboard when searching for ideas.

Show must go on

Now it’s your turn. Show off your projects!