Segmented

So I woke up at 5am as I love to do and decided to do something epic. I had papers to fill and two personal projects to work on. So I decided to draw the digits for Betali Typeface. The process of creation is also widely presented on my Instagram.

As you can see on the picture, one better doesn’t draw numbers on the sunrise or when the Sun is down as long as digits designed on the sunset are pretty awesome. Good to know but that didn’t help me to get closer to finishing the font. I was going to post this funny dependency of Sun position and digits design when that strange curvy 8 fell into my eye. The reason it did was me interest in LEXON Script Clock two days ago. I like how the designers made those segmented numbers.

After tweaking a bit I had a hero to use and create digits from. So I quickly created the numbers and tested if they are awesome enough. They are. Okay, now I have a set of symbols in case I want to create a segmented clock. Not bad for the Sunday morning I was going to spend playing retro games like Tetris or Unreal Tournament.

There are things to improve, like readability. What if I start with WATCH app? That will lead me to three personal projects instead of two!

Going Unusable

Skipping all that you don’t say part I feel like this morning is the morning to explain some basic things I’ve repeated plenty of times for years.

There are two reasons to do it. First I am tired to explain the same thing, and having a post I can send it, thus promoting my blog. Second is I have a couple of live examples of Usability being not the same to Awesome User Experience. Third reason (of those two) is that I am in a mood to write something beautiful today.

Where did that usability come from

Ages ago (back in 1998) I was a young web designer doing local projects. I had to explain every client why it was unacceptable to write vivid green letters on a vivid red background, why the links had to be underlined and why all other things that make site easy to use were a must. The clients, though, had their own ideas on how everything should have looked and functioned, usually contradicting common sense and technology level.

Well, at least that never changes ;)

By means of JavaScript, later newborn CSS, tables and mother wit the sites were created.

So to explain in one word what the perfect site should be I didn’t use fancy but usable. That’s why I preferred to do mass media sites or complex portals, rather than something like wedding dresses shop site.

Well, I was wrong

Not in that part where I don’t want to do a site about wedding dresses. But in the part where I claim sites have to be usable. To be precise, I wasn’t right back that days, but I would be wrong now, deciding to create site that is just usable. It’s standard set of rules nowadays.

Usability → User Experience

It happened about 2005 or 2006, when web soaked into our veins and occupied a portion of the brain. I will not be surprised if future studies find out that there is a part of the brain responsible for everything related to internet stuff. People got totally used to websites, and with iPhone in hand one could visit any site or service one wants.

To get more people and customers everyone started working on unique or good UX. User’s experience of using your product should be somehow distinctive. That’s it, no secrets. That doesn’t mean unusable or may be does. Up to you.

Finally! Samples!

Those who use Facebook, please raise your hands. You, two, are you shy to raise a hand, or what? All those who think Facebook is hard to work with or use, please keep your hands raised. Good to see those two raised their hands as well.

Yes, Facebook is unusable. Yes, it provides tons of irrelevant information, let alone ads. Yes, Facebook changes the options and controls very often, forcing users to search for them in all the menus and submenus. That is done on purpose.

I’ve read a blogpost of some Facebook employee and then, when in Bay Area, met a guy who worked on Facebook UI (well, part of some part of it) and he told me absolutely the same. Facebook has a good usable design. It is so beautiful your eyes will start bleeding rainbows. It is so usable, you won’t see that irrelevant posts that make you mad, and have all the information on the tips of your fingers. There is a Facebook that can make you happy.

And studies show it would dramatically decrease your time on the website.

Why would you be there and like posts you’d never like to see if you got the information needed with no clicks or scrolling? Who would read and click all those ads, if the photo from your yesterday party wearing turkey on your head is right in front of your eyes? Who would chat in browser if the site is opened and closed for a minutes, not tens of minutes? At the end of the day, how are you supposed to procrastinate if you get only relevant and up to date content? Go read Medium for that!

So we’re sentenced to blame Zukerberg for unusable interface, while he is more interested in providing us catchy user experience, that ties us to Facebook, forcing to scroll miles of feeds.

Now the second story. It’s actually about the latest version of my website: genn.org. I’ve updated my portfolio. I also reorganised it. Instead of putting several parts of the project to different categories, I grouped everything by projects. As since 1998 I made a lot of interesting things I prefer to post selected, favourited design solutions.

Like naming, identity, design and website design for ill&mates. That’s a big and long project. In past that could be objects to put in logo, website, graphical design, business cards categories.

Or like calendar for UNICEF. It’s just calendar and this is one project. Just graphical or print design category. That’s it.

Or like naming, identity, promo materials and packaging for Honey Bunny. Objects to put in logo, branding, identity, packaging, maskot, naming. But all of them are in one project.

Now I am waiting for the huge software project to become public, to post it as a project, not a couple of screenshots. I have dribbbbbbble and Behance to post fragments of my work.

If I’d want to show just logos or infographics, I’d made sections and list of works. But I want every attendee of my portfolio to be absorbed by the things I made. Like in modern art gallery, please, take your time, enjoy the colours, thoughts, combinations and communication. There is a link between you and the thing you are looking for. Value that moment.

That’s the Awesome User Experience I designed and it works. For those impatient there is Behance. Quite usable, nah?

I was going to finish here but remembered the story proving I was right about that Awesome UX.

Proof

One of the headhunters called me to ask: “Excuse me, I wonder if you have like another portfolio?” I didn’t understand what she wanted and why she didn’t like mine. It’s not that bad, really.

“The one with something less creative.” — asked the lady.

I sent her link to my Behance saying my portfolio is me, while on Behance I just popularise what I do. If someone gets interested in me I’d prefer him or her to be interested in my way of thinking etc.

Long story short, later she called me to say none of her clients wanted to see Behance while some of them loved the portfolio on genn.org. Because of the Awesome UX, I assume.

t.A.T.u. The Retrospective

It was 2003 and thanks to my friend Slava I was highly influenced by David Carson, who was like in superflous opposition to perfect minimal vector shapes of Scandinavian design. The funny thing I was inspired by different photos of skies, concrete and industrial constuctions, pseudo-technical vector trash etc. I tried not to look at David Carson’s works so I couldn’t steal an element. I looked through The End of Print, closed it and never opened again until the project was finished.

I listened to t.A.T.u. but found out they don’t help much, so I started to listen the songs reversed (yes, backwards, so Friend or Foe was like Foe or Friend) and that helped to graze the corners and lines.

I used like thousands of grunge brushes, most of them made by myself. I studied tens of techniques to deteriorate the photos. I combined default fonts as text with decorated text saved as images. Don’t forget that was 2003 and coding wasn’t like nowadays. It was more like puzzle, where you don’t have PNG with alpha-channel, advanced CSS or normal JavaScript. I kept that in mind while drawing every element of the design.

Today I found this lo-res picture of the design and no signs of the sources. I messaged my friends I worked with back then in hope they were more responsible than I was and had backups. It seems to me they don’t, but while writing this post I remembered about one DVD at parents home that may help me. Anyway, the worse it looks the more David Carson it is.

Check the full t.A.T.u. website design in ‘Work’ and appreciate on Behance.

Thus the Icon Was Born

We in VideoGorillas are doing revolutionary app (as there are those who do something not revolutionary nowadays) that allows to stream live video right from your GoPro to the internet. It is called LIVE4 and the version I will be talking about is LIVE4 GoPro Android.

Even though it was hard to xml-ise and implement for the most Droids out there, I made the app according (and sometimes complementing) Google Material Design guidelines. This post is the story of one 24 by 24 dp icon in this design. You can check the current LIVE4 GoPro Android Material design in progress on my Behance.

Place

It was decided that for the next release we are going to add GoPro controls to the application. So you won’t need to press something on camera except turning it on to work with it. All or the most settings you set on GoPro are going to be in the app. I added the item GoPro Camera Settings to Settings section of the app and thought of improving the UX. There in the app is a screen where you see preview of what your GoPro sees right now and where you can start your live broadcast. There is also the button to turn GoPro off—as the camera’s battery drains quite fast, we want users to have more time to stream. So the obvious place was to place GoPro Camera Settings shortcut icon next to the Power icon.

Settings and Start live streaming states of the application

Tapping on both shortcut icon and GoPro Camera Settings list item should open the list of GoPro settings that looks pretty much like the Settings section.

But I didn’t know there is a problem that will carry me away while solving it. I had to replace that gray rectangles with icon (pictogram).

Sign Language

Before starting explaining how far I was carried I have to get off a subject to explain the strategies for working with icons in LIVE4 GoPro Android app. We will be back to GoPro settings shortly, don’t worry. As I am doing the Material Designed app, I try to use guidelines provided by Google, including icon guidelines, as much as possible. You know how mad I am about it from time to time, when there is the inconvinience in guidelines. So if there is no icon or metaphore for icon I need, I create it (draw) myself, based on visual language of Material Design. Seems pretty obvious and easy to plan, right? But we also have GoPro. And GoPro has it’s own visual language and icons. And GoPro users know that icons by heart, because most of the time the icon is the only thing they see on their GoPro camera screens.

Android Material Design Trash icon on the left and GoPro Trash icon on the right

No wonder Google icons and GoPro icons differ. Whenever it relates to general workflow that doesn’t affect GoPro, I use Material Design metaphored/styled icons. When it’s about interaction with GoPro I tend to use GoPro metaphors which are more obvious for users and highlight on subconsious layer that the user is doing something with GoPro.

At these pictures you can see bottom sheets. Left one is about deleting files on GoPro and the right is about choosing YouTube event or creating a new one. I used GoPro Trash icon for deleting files from GoPro SD Card, but I used default Material Design Create icon for Create a new event item. I also created a custom icon of the video file for Delete last file recorded which is based on generic Material Design recommendations for file icons and Video Mode icon used in GoPro.

Getting Back to GoPro Settings

As you can see, UI balances between two visual languages if we talk about icons.

So the first thing I thought of — let’s take the default GoPro Settings icon and use it. Actually, there is a couple of metaphores for Settings in GoPro Camera UI, but the wrench is more common as to me and is even used in manuals to represent setup or settings for a specific mode.

The good idea turned out to look not so good.

Okay, let’s try a different approach. We have a lot of icons for setting up different Android things. Let’s do something in Material Design visual language.

Top icons are Material Design default and bottom icons are custom sketches

I loved the idea with this camera shape and arrows inside, but when done with GoPro shape it’s just gear inside the rectangle. So I outlined it and it started to look like brigthness setting icon. I also tried to put wrench inside the Material Design default circle — tough luck. But then I spotted the part of visual language I needed:

After a couple of tweaks (I had to decrease the radius of the cutout, so it won’t hide so much GoPro making it unrecognisable) and the icon was there.

But it still wasn’t the end. Testing on the live stream start state approved the icon doesn’t work good with the Power icon next to it. I even tested the other one, with outlined rectangle:

And thanks to outlined rectangle icon the thing I felt subconsciously became obvious: ‘Power’ icon has to be redrawn. It was made based on the icon on GoPro ‘Power’ button, but now it has to be based more on Material Design.

I've got the power!

I’m tired writing so much. Here is the evolution of the ‘Power’ icon. Left is initial, right is final, every one of them was test on device to see which suites better. That did it! The perfect ‘GoPro Settings’ icon was created and it fit the UI like it was there from the very beginning.

And I didn’t even noticed before how much I didn’t like the previous ‘Power’ icon. It wasn’t bad, but this one is much better.

No time to explain! Tap!

The one and only illustration of iOS 7 GUI in this post

Morning glory and despair. In the next couple of days we will not just get bored with #iOS7 but also annoyed by #iOS7bored. I don’t want to discuss certain icons (hey, Safari!) or hipster colored gradients — that will be discussed in millions of comments on thousand of blogs. There is nothing interesting in discussing the visual of new iOS 7. The main idea about it is you will not want to lick the icons any more. Not even once (they are too sharp now).

Knight Moves

The icon on Lisbon Metro train doors and Martim Moniz station decoration

The doors of Lisbon Metro not just warn you about leaning but also highlight the risk of being trapped by closing doors. The Martim Moniz station is decorated with knights and one of them is used to illustrate that icon. This station is called after the noble knight who sacrificed himself by lodging himself in the doorway, preventing the defending Moors from fully closing the door of São Jorge Castle.

Dome

Here’s something I’ve been working for about three weeks. That thing I called applied infographics. After the 20th time I explained what I did to my friends and colleagues I decided it’s time to show the thing to the world.

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

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.

Data Visualization (Infographics) Howto: Iodide! Iodate!

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.

Twenty Ate

33 hrs project

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

Waking Up

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.

Adobe-kadabra Creative Suite 5

Adobe presented it’s new Creative Suite 5 in Kiev. I visited Adobe’s master classes for InDesign earlier, so I was eager to visit this one too. The presented material is fully covered by Creative Suites 5 descriptions on Adobe’s site so I’ll just say thanks to Markus Bledowski (Adobe evangelist) and Russell Viers and list youtube videos describing features I like most and post brief comments. Jokes and quotes are there at the bottom of the post!

MINI Cooper Made for Me

It was a 5-years-long waiting for MINI to hear my thoughts (as they did in c1rca) and make the Cooper I’d buy. Not just buy but also adore, love, respect, be proud of and drive like I’m riding a dream. Here it is — coming soon MINI Cooper Countryman. Besides it’s new design and perfect body it has normal amount of doors. MINI fans can blame me I don’t feel the spirit, banish Countryman out of Cooper family — I don’t care. I just want to ride this perfect six-speed manual gear box beauty!

Just because it’s MINI, the ads are wonderful. I’ll spoil the joy a bit offering you to watch Countryman ad prior to teaser of that car.

Prawn the Queen Salad

I love to cook and dislike using prewritten recipes. Even if I read the recipe I do the dish my own way and it always tastes better ;) I’ve made a salad that I called “Prawn the Queen” recently. It isn’t just tasty but it looks pretty. So I present you the recipe and infographic of this salad. Let’s file it under hightech ;)

テグザー So we finally met again

It was 1994 and I got a thing that is wannabe for 10 years old master of the universe as my birthday present — 5¼” floppy discs drive. It was equipped with adapter that allowed to plug it to computer. Oh, that was a computer that I used to rule assembler and basic worlds. The computer that couldn’t start Turbo Pascal just because it didn’t have 16 colors to represent GUI. There were just white, cyan, magenta and black in one mode and you could switch to more warm palette where you had yellow, green, red and black again. You couldn’t combine palettes, but that didn’t seem to be the problem and the games were interesting and breathtaking. And after I got a 5” drive I could start them from the floppies not from the cassettes that made me quite happy. One of the games that made me listen to the cawing of the drive was Thexder (テグザー). The robot — main hero of the game — that was running through mazes and could transform to a jet made me miss quite a lot homework.

Portugal Pro

It’s almost a year since I’ve visited Portugal. I can’t forget this country and want to come back to comfy streets of Lisbon, feel +20 °C in December, walk by bank and finally buy that t-shirt with tram #28 on it. I didn’t think that I want it so much until Tonya Shoo asked me in facebook: “Hello! I’ve noticed you’ve been to Lisbon. We are going there too, would you please recommend anything?… I’ve already read about Vino Verde.” I wanted to write something brief and clear, but tough luck ;)

New rules when dialing from Ukraine

No you don't know what it's like. Welcome to my life

Part of Life series second season 21st episode

It’s hard to believe but being addicted to series three years ago was a shame. Nowadays even in the night clubs you can hear someone discussing the latest House M.D. episode crying trying to be louder then music. I already wrote about my favourite series, and not once. Looks like it’s time to make a new list — the more series I watch, the more I adore.

About couple of weeks ago I finished watching Life series. The plot is about offbeat detective Charlie Crews, who returns to the force after serving time in prison for a crime he didn’t commit. He gets from $5 to 50 millions for his silence. He also like fruits and Zen. Everything else is subject of watching ;) You’d better watch it in English, because only some episodes are translated and that translation is awful… as usual.

Looks like the 21st episode would be the last, but it was not the plot of the series that made me write this post. I was impressed by soundtracks during hunt on Russian mafia: that were songs of Tatu and Russian “rapper” Seryoga. Those who aren’t afraid of spoilers or arent’ going to watch series can push the play button on the top picture to see themselves how soundtracks work ;) Respect nbc!

Kettle that boils me

I bought a new kettle today Copco Torino (central on the photo) to replace the old one made in Czechoslovak and burnt like heretic. It’s a miracle that I could find a pretty-looking kettle that suits my kitchen design. I was desperate about other kettles and was about buying electrical one (they got pretty designs). The sparkling circle on it’s lid is whistler and the lid is opened by the gentle press on the front part of handle. I was proud to know that this water boiler without only a hint on spout is 2005 Housewares Design Award winner.

Please Say Something

Romantic story about the cat who loves mouse who hates world and everything is in pixels. I remember my 90’s with Another World and Flashback with their unique inimitable vector polygon graphics with no antialiasing. Please Say Something looks like not like ancestor, but something that reminds of these games intros and gameplay. Perfect story, perfect ideology, perfect characters. Also it somehow have something in common with scandinavian design and infographics. I am really impressed and consider it to be reborn or may be start of new trend in animation. Good job O’Reilly! Have a look in HD! It’s worth it!

(Russian) Boas Lisboa

(Russian) Новый MacBook

(Russian) No CX101

(Russian) Почему Эсквайр стал хуже, чем Esquire был лучше

(Russian) Don't ever call me Theodor

(Russian) Speed Racer

(Russian) Glamour de Chine

(Russian) Why So Serious?

(Russian) Рассказ о сайтах в G-Club

(Russian) The world is still unperfect and we have plenty of fuckups to fix

(Russian) wall•e: мужчины с Земли, женщины с Аксиомы

(Russian) Поедая сплавы

(Russian) О том, как на отдыхе похожи удобные вещи и интересные комиксы

(Russian) Robots don't go to Heaven

(Russian) Панда Кунг-Фу

(Russian) Juno Reactor Live in Kiev!

(Russian) С днем рождения, Киев

(Russian) Серийные убийцы времени

(Russian) Cloverfield

(Russian) Я был в Праге. Она хорошая

(Russian) Как я провел лето

(Russian) Три Х сестрицы

(Russian) Mac OS X Another Cat

(Russian) Что вы говорите?

(Russian) There is path to follow!

(Russian) c1rca cx101

(Russian) Аниме, дождь, я и снова осень

(Russian) Эй, вы, упыри и оборотни, давайте занимайтесь своим скотоложеством!