Iodinated seafood party together ignoring the scale

It’s half past three in the morning and I write this post while the book about use of iodized salt in bakery is printed. Infographics and tables I wrote about couple of weeks ago (Infographics Howto: Iodide! Iodate!) were used on the pages of this book. Some of them changed a bit, others changed a lot after discussions and specifications of charts targeting. Furthermore there happened to be two books not one as it was expected at the beginning. The second one is thinner about use of iodized salt in Denmark. I’ll write about changed charts at first and then I’ll describe the books makeup process.

Infographics

Some graphs wished to stay on certain places on the pages of the book so it would be easier to read them. Other graphs were disturbed with the fact they can visualize more information they visualized in the prior editions. More graphs just wanted to be even more handsome.

Culinary treatment impact on iodine contents in seafood (Fig. 1, page 8)

Usage of iodinated additives to impact iodine concentration in bakery (Fig. 2, page 23)

Captions on this graph were moved below so they won’t mess with the figure caption.

Impact of iodized salts on dough smearing (Fig. 3, page 30)

The long way I made selecting and composing the appearance of bars ended with simple solution. Though it looks obvious all prior steps were needed not just for this graph but also for other charts with bars in this books, including the first one described above.

Impact of iodized salts on gasification ability of the flour (Fig. 4, page 31)

As long as numbers are too close that would be to impossible with just scaling them to feet the page width. That’s why the bars have the parallel similar parts withdrawn so the difference is shown zoomed in. The skipped parts are properly marked.

Growth of the diameter with the lapse of time (Fig. 6, page 33; Fig. 7, page. 34; Fig. 9, page 36)

All three charts visualizing the growth of the diameters of colonies and mycelium with the lapse of time changed too. They now look less avant-garde while colour coding and captions are now more readable and obvious. I would send the prior edition to biennale while letting the second to find its mission in book.

Layout

Finished book in Russian is available for download in PDF (1,5 Mb). It is also available in miniature:

I start with the statement I was in a horrible rush and even though I tried my best to work on every line I’ve must have skipped something. I understand it’s not ok but I’ll try to live with that. I was in a lack of about a week and about a box of Portuguese vino verde ;)

I have a thing and a pony who helped me. Pony is bo, who edited the whole text way more readable than it was in source. The book is ‘Manual for Publisher and Author’ by Milchin and Chelcova.

Everything started with the grid which was then implemented in second book too.

Grid is flexible enough to work for one and two column layout (mouse over spreads to see the grid for them)

Grid works for one column layout with wide external margin and two column layout with equal margins. Two column layout is used particularly for appendix which is the separate document to show it is not part of the book text while it is part of the whole book.

Graphs and tables in both layouts are wider than text part. That makes reading more dynamic and pleasant. They are also placed after the text they illustrate to make reading more straightforward and one-directional.

Some tables were rotated 90° to make them more readable. The contents of table cells was aligned the way it would be easier to compare the data.

(Table 3, page 27)

I removed some obvious column headings to minimize redundant information.

There seemed to be a problem when I started working with appendix. As appendix is a separate document it has the separate page numbering. I spent and hour and a half to force Indesign to make it automatically but hand to place page numbers by hand ;) Appendix page numbering is placed on top of every page aligned to external edge.

Hint for Mac OS X users: you can use default application called Grapher (Applications › Utilities) to format mathematical formulas. After the formula is edited in Grapher copy it to the clipboard and paste as PDF to any application that supports that.

After I was to tired to even look at the book I made I started the creation of table of contents. As I worked with Indesign styles it was easy to compose TOC in couple of clicks but I wanted to use the whole spread and make something more creative.

I finished with way more traditional TOC so readers won’t be distracted starting from the third page.

The same decoration was used for appendix table of contents.

‘Dutch’ Book

This book in Ukrainian is also available for download (PDF, 706 Kb) and can be the fist for the eyes in miniature

The main problem with this book was insufficient number of pages that’s why one column is stretched on two column width. The tables don’t hang wasn’t so expressive but still dynamic.

Though the tables were more readable then in first book I still had to edit them.

(Table 3, page 10)

I united age groups with colour, made the left column more readable and changed the header so the table was easier to use.

It was a pity I had no source of the chart so I had to work with what I’ve got. To place make it more appealing and fit it into the layout.

(Chart 1, page 11)

I retrieved chart from PDF, made bars width equal and added marks on the left so the reader could estimate data concentration.

(Table 4, page 11)

One more long table was separated in two columns and it’s subheading was contrasted. Changes made table more readable and thus easy to use.

***

I saved all the fils, sent them to publisher and didn’t look at them for a couple of days. And now, when I am not sick looking at them, at three thirty in the morning I finalized the story of book creation. Pretty, usable and readable book made out of not so clear for the reader sources.

Hands up everyone who threw away macbook or ipod packaging with no regret. Good news: you are minority ;) Every one of us adores nice packaging sensation even if we don’t realize that. One can either create new cool box, either improve the idea that is used everywhere to make a packaging that feels nice.

Jolly colorful Kotex tampons on the left and random result from ‘tampax’ search query

Kotex makes hygienic tampons as their competitors do. I can’t say if tampons are good or bad, but my girlfriend uses them so I at least now they exist ;) The interesting thing about Kotex tampons is that it’s very easy and enjoyable to uncover them: just twist both end9s of the cover in opposite ways. The cover would wrap along perforation and the tampon would be ready to use. Furthermore, fixing one of the ends in your hand would allow to hold uncovered tampon by covered end without touching the tampon itself!

It is natural scenario for girls and women to hold one end to twist another. That’s the way to open nail polish, lipstick, mascara etc. It seems obvious that images used for Kotex packaging aren’t accidental

This way of opening the tampon is faster and easier than waste the time searching for the flap to pull like on the pack of cigarettes. So Kotex improved the usual and not the easiest action and made the addicting scenario out of it. They’ve just thought how to improve the working scenario.

***

While searching for post illustration I’ve seen Kotex has payed much attention to packaging and usability of its products. I am not sure if the competitors do the same but it would be interesting information to know.

Iodine Makes Me Clever tshirt print (dribbbbbbbble edition)

It looks like I am absolutely out of time and won’t be able to translate this post into english for a long time. So let’s consider pictures really worth a thousand words and enjoy the examples of the charts and graphs I made for the book about use of iodized salt in bakery.

(Info)graphics

I made a long way searching for the visualization of dough smearing

I had to rotate almost every table in the book 90° so it would be readable. People who made them didn’t understand how data in cells is compared.

***

The tables and charts are in Russian and there is almost no text but don’t get sad, post in English about how the whole book was is here:

Iodide! Iodate! — 2
Data Visualization on Stream and Books Layout Explained

Sign on the door of the office I share with Bo

I wrote a column for Yeti News about branding using game technologies which is a mix of one and a half clever thoughts and something stupid. If you’re good in reading in Russian, you are welcome to read my column.

Me wearing tshirt (photo taken with coffee mug, the quality is adequate)

I’ve suddenly won a tshirt from vitamins. The print is Marylin formed with sliced fruits. The quality of the tshirt with 100% polyester outside and 100% cotton inside is perfect. The quality of the print is good too.

Thanking the tshirt I’d like to give the vitamins a good advice. If you want your tshirt to be worn elsewhere home: to the Toshoshop birtgday, to the night club or even to the vacation in Lisbon, then avoid placing the huge logo right in front. Especially try to avoid such things if the logo isn’t integrated into the print. There are a bunch of places to place the logo: gently on a sleeve, endearingly on the back side under the collar, comfortably at the bottom in front but closer to the seam. Having tshirt with logo placed that way I could answer my friends’ enviously admiring questions: “Where did I get this tshirt from? I’ve won it from Vitrum vitamins!

***

By the way there is no logo on a tshirt on
Кстати, на странице Vitrum facebook page.

Please excuse the photo quality because it was taken with some Android HTC phone first generation iPhone

As you may know I’ve broken the glass on my iPhone 4 16Gb that was bought in Great Britain and was never locked. After that it was replaced with brand new front glass and I broke the back glass. So the back part of my iPhone now looks pretty much like decorated with stained glass and doesn’t cut the user because it’s very cool glass that looks quite stylish. As the glass was broken by me one can be sure it is designer’s edition of iPhone. As opposed to other designers I’ll sell my edition much cheaper than iPhone 4 costs here in Kiev (even if you decide to replace the back glass the final price would be still lower than used iPhone). You are welcome to contact me on this matter.

And if you still vague if the back glass is so important here is a story for you I wrote this winter. Thanks to it you would be as sure as I am that iPhone is not just about the back glass but more about user experience and being and iPhone.

Yet another story about every detail that matters

It’s cold in here, must be winter — paraphrasing pick up joke. I wear gloves already because I like wearing them and I don’t like to have cold hands. This morning I was in a hurry going down the street and listening music using default headphones attached to my iPhone 4. In a rush I was in I felt an overwhelming need yo know what time it was. As I wear no watches because I have clock in a phone the first impulse was to take the phone out of the pocket, slow down and look at it. Not the sort of things you do in a rush. Almost not thinking about what I was doing I just squeezed mic on default headphones wire to turn on voice dial and yelled angrily: ‘What time is it?’ in Russian Realizing what I was doing while asking the phone I expected ‘i don’t understand what you are asking better luck next time’ tone but was surprised to hear ‘The time is ten hours twenty four minutes’. The reply was in Russian too. Know what? That just brightened my morning!

I don’t know if other phones have this option but know I expect my phone to answer any question I have. I’ll start with: What’s the answer to the question of life the universe and everything?

***

I am not joking, my iPhone 4 is for sale. Please email or leave a comment below. Thank you ;)

Aloha! It just dodged my head that besides facebook (link on the right), twitter (link on the right), walkyrie (link on the right) and other flickrs (link on the right) I have mega! I’ll try to unforget this fact yet another time ;)

While my friends’ blood is boiling because of Oxford Dictionary that now includes internet slang OMG LOL OK <3 I try my best to contaminate the English language myself. My super-evil sidekick is Ann Lee who added my casual comment presspresso to the Urban Dictionary! That’s the way to spoil the language!

Not so long ago me and my fellow antique, travel and glamour photographer from Minsk started a project called Walkyrie. Time passed by and here we are with helveticized vintage photo number 100. One-wow-hundred. It’s not just some kind of milestone or a reason to have some champagne but also some kind of a birthday.

As we are going to print the catalogue of walkyries in the nearest future but not today and we wanted with all two of our hearts to do something special to celebrate we’re 100 walkyries high, we decided to create the thing we’ve never saw before — ebook stuffed with artistic material like any printed design or art catalogue. The format chosen was ePub. You can read it with reader on your mobile device or computer. There are two versions of album (every is about 15 Mbytes): Walkyrie × 100 which should work with any and every reader and the iBooks special edition Walkyrie × 100 Interactive. You can always find links to both versions on walkyrie.org. I recommend to download interactive version if you’re using iBooks on your iPhone, iPod or iPad. Here is a tip how to add ePub to iBooks from Apple. And while the file is downloading let me tell you how it was creating the interactive art catalogue.

Why so interactive?

The idea of creating interactive ePub that can be viewed with default applications on idevices captured my mind long ago but I didn’t pay much attention to it. One day Ameagari asked in his twitter if anyone saw an interactive ePub. I didn’t and didn’t find any true interactiveness on the web. So I made one now ;)

It wasn’t so easy

My friend got a special t-shirt from NYC with lettering ‘fuck rude people, fuck subways, fuck rain, fuck high prices…’ and so on. I can make such t-shirt after creating and testing Walkyrie × 100 Interactive for iBooks. The words except ‘fuck’ would be ‘webkit’, ‘z-index’, ‘font-family’, ‘jquery, ‘iBooks’ etc. I’ll tell you why.

The interactivity of our artistic album is in the ways you browse it and get information. You can use it as an ordinary ebook but you can also click the circle (SVG image to look good on every screen resolution) and get a walkyrie fortune — random of 100 pages with pictures. It’s like fortune cookie.

Another interactive future is the ability to see the transcript if you can’t read it on the image.

Both things are nothing special but we didn’t want any more. May be in the next version ;)

Interactiveness doesn’t work almost anywhere except iBooks and even iBooks are not so good with it. You have almost no control on font choice, size and text align. You can’t control z-index (overlapping of elements) without tricks. You can’t control items layout some times (I had to use bloody tables, back to 2002). You can’t control if items will fit one page or more. The known bug is that sometimes, when one is leafing the catalogue backwards in iBooks on iPhone and then one does it the normal way blank pages may appear but not on the regular basis. Remember the t-shirt?

Tips

I think some of my beloved readers and you, the pretty girl from Korea, who googled this page, will find the following information interesting. There would be just lines of technical info so everyone not interested can skip to the next chapter.

Any ePub file is the zipped collection of some stuff and .xhtml’s with CSS, Javascript and other stuff you need on the pages like images. I made ePubs using Sigil for two reasons. First is it has perfect name that suits my needs and magic. Second is it works and has version for Mac OS X. Also it’s opensource if that matters for you. The shortened structure of the book in unusable and hard to edit tree view (hello, opensource) is below.

To work with elements I used jQuery. To react to touches I used this code:

1. $('#transcript').bind('touchstart', function(e){
2. …
3. });

To hack the issue with z-index (iBooks just acts if it was Internet Explorer 3 to it) I had to call webkit for help:

1. var tra=$('.help').height()+30;
2. $('.help').css('-webkit-transform','translateY(-'+tra+'px)');

That’s all nothing more interesting there. I think everyone interested is capable with embeddin SVG image with all that Midxmidymaxymidy ;)

Read don’t interact

All the readers I tested on touch devices aren’t capable with interactivity you can provide in book. They don’t expect you to interact with the book as they have to provide you interaction with the application. So when you have an interactive area on any page of you ebook and user taps it it’s quite not obvious if he expects it to interact (as he may be not used to interactivity and know nothing about it) or just wants application to show menu or some information. While iBooks handled everything not bad I had to remove showing the tip when you tap the photo and create the separate link. The reason is in the tests: I myself accidentally tapped the photo when I wanted to flip the page and though I was touching just the right side of the screen. And as you can control almost nothing the creating of interactive ux is quite a challenge. Also iBooks doesn’t provide any back/forward navigation so if you even clicked a link in an ordinary book to see the notes there is no simple way to get back to reading.

Anyway!

Get our walkyries on your device and enjoy having them with you. You can always impress you friends, colleagues or have something to look it while eating pizza.

As it is and art object our walkyries catalogue is notable on every bookshelf even if it’s virtual!

***

This is the second ebook challenge for me in last week and a half that was made not much longer then previous. Something is in the air.

I didn’t post to blog like for ages. Now I am back, at least I hope that my drafts won’t grow mouldy and I’ll finish them. What’s the best way to tell your brain to start working? Make something interesting and resource-intensive. So we (me and akella) did it — 24 hours project. It took us 33 hours to finish. When it was 26th hour we started to notice that it takes more than two dozens of hours, on the hour 30 we understood that we are a bit late. Anyway, we finished and one of us went to have some meal and another started writing the blog post, fell asleep right in front of his display and pushed a ‘Publish’ button just now ;)

Project Idea

The idea is sweet and neat — to give the ability to read books on iPhone without installation of any additional software. I loved this idea because I love simple and interesting things and akella was fond of it because he couldn’t install any application on his locked to AT&T iPhone which was hardware unlocked. As the process doesn’t include the installation from AppStore or Cydia we should create HTML-application. I forgot the correct name Apple calls them.

Project Design

The first groundwork was made almost half a year ago and it was something like iBooks we can see now. As I joined the process I came up with idea of ‘separate book — separate icon’ and separate application. So the library is stored online and you can use any book you want even downloading it for offline use. Besides using the trendy idea of storing everything you don’t need somewhere and the things you need on your device this approach makes reading book really about reading — nothing redundant, just you and the book. The negative side was that it wasn’t very convenient for storing more than two or three books. We accepted it once more understanding that all books are stored online and ready to be downloaded. The folders in iOS 4 proved we were not so wrong and up to dozen books now can be organized in one nice icon.

The whole application and its work can be separated on two phases. Phase 1: choosing or creating book to read and adding it to iPhone Home Screen. Phase 2: Reading the book even if the iPhone isn’t connected to the internet.

Supported formats so far are .html and .fb2 but we are working on compatibility with others.

Project GUI

Pictures finally ;) You could check the live version and compare it with the sketches but now it’s down. We’ll resume it shortly!

Everything started with application icon in different sizes because I had a hope that there is a way to make different apple touch icons for different devices. There isn’t.

The first thing user sees starting the project site is the interface to find a book in catalog and browse it or to create the book of existing .html or .fb2 file. Search results and catalogue of all books look almost the same but catalogue provides the ability to filter books by genre.

Then we moved to the screen sketches. After the user have chosen the book it starts loading. User can start reading it already. When it’s loaded the hint describing how to save the book appears. The arrow shaped background points right on the plus icon in the bottom toolbar of iOS Safari.

After the book is added to Home Screen, book icon appears there. This is the end of Phase 1.

Next time user taps the icon he sees the loading screen (takes couple of seconds to load a normal book on iPhone 4 and a bit longer on iPhone 3GS). And after the book is loaded user can read it. It automatically remembers last read place and scrolls to it.

That’s it. So easy, so cool!

There is a special version (differs a bit now) for those, who didn’t use iPhone, iPod Touch or iPad to access the site.

Fun Facts

• The GUI is 100% made in vector graphics editor
• All icons and our logos are used on site/in application in vector using SVG
• All graphical elements, except icons and arrow shaped background, are 100% CSS. Yes! These gradients, shadows and backgrounds are not pictures!
• Apple Touch Icon in iOS 4.0 looks crappy and blurry and there is no way to fix it except updating to iOS 4.1
• All fonts used are default in iPhones, iPods and iPads
• Thanks to all that stuff application looks the same on iPhone, iPhone 3G, iPhone 3GS, iPhone 4 and iPod Touches. We are waiting for the iPad test results ;)

How everything looks on iPhone 4 (bigger) and iPhone screens. Almost the same ;)

Oh, as to the backstage, there were lotsa things one of them is different ideas about organizing the book download process:

tl;dr

Surf to project site (will be resumed shortly) with your iDevice to save books right to your Home Screen and read them later. No additional software needed. Formats supported are .html and .fb2. We luv ya!

I caught one post in the sea of the drafts I have here. There are 10s of them. Anyway, I’ve chosen one and publish it today because this morning twitter is overfilled with messages like “I want to sleep”. I don’t have a problem waking up with a smile (I don’t use don’t use alarms, imagine that ;). Anyway I sometimes think it’s wrong to get up early. But let’s get back to the topic. Below is the remastered version of text comics I’ve sent to bo one morning.

This strip can also be considered a Friday tribute to Friday 4Koma which I like a lot.