3D: Daily Design Doodle. October 2017
#toHellWithDepression #dailyDesignDoodle
October 4, Wednesday
I’ve been on serotonergic sleeping aid for about a month. Why not doodle this mush away. I have an old project sketch from my school years called Jade. It was adorable. The world could use something adorable and responsible today.
Why not start from here. Originally I’ve made the assets for the project in Photoshop. The time has changed, I have changed, project froze. I’ve redrawn it in Sketch and quickly animated the resulting svg with css. It needs a reverse animation, a nicer tune on easing, a drop shadow, some play on the shade on the surface. But hey, first and foremost, it needs a purpose.
I’ve started this post to collect some progress notes. Let’s see how it goes. Today this CSS sketch is a Doodle.
October 5, Thursday
Tik-tok, 8pm on the clock. If you’ve ever been depressed, you know how improbably it is to accomplish any activity out of ordinary. Routine tasks fall somewhere in between “improbably” and “unlikely”, new ones lay on a far horizon of “once upon a time”. So hey, hello again, blog that no one read, I’m here to pot a new doodle!
If your lefty-liberal heart has dropped when you saw it — pick your heart up, I’m not a creep of any kind. I needed some material to build open source wireframes for modelling UI interactions. So, I’ve scanned what I’ve had on my hands and this century old MA-application has come up. There was some funky task like “read this article about why and how data changes the world around us and propose a project in line with the idea”. (Disclaimer: I may lie about the details, after all it was a century since then.) So, being a softie for all the burning inequalities I’ve made an app that would allow people get familiar with the minorities around them. Perhaps, I should release this project’s documentation one day, since in its naiveté it is very heartwarming.
Anyhow, I’ve put a base for the app wireframes and drawn the key characters today. All in Sketchapp, because, why not. Should I continue with it, I will release the whole svg character set under open license. And you get a minority, and you, and you! Minorities for everyone!
—
Hmm, half an hour later I’m still by the office desk animating this. For fun. Yes, that’s my idea of fun. If you have problems with this — most likely we have marginal chance of ever meeting each other. Hehe.
October 6, Friday
I have just a tiny gap of time before the plane. So I’ve used it to isolate this css block for animating a link underline. Was meaning to do it for a century. Because, you know, linear or on/off animation is “meh”. And then, it works much nicer in the UIs like the Login Page I’ve sketched for Digitalist WiFi.
Well, once on the plane I’ve had a couple of hours to doodle more. A night before it I’ve browsed the web making character studies (mostly, copying other’s stuff to see the anatomy of their styles). My idea is to find a simple-shape solution that can be animated with css to provide an illusion of a more or less spontaneous action of the character.
So, the body shape of the character is still one big question. I don’t want to go realistic on it. Well, personally, I do, because it would be fun to draw, but from the point of view of the app, it will be a mistake, since the idea was to have a distance from harsh “reality”. It was a purely escapist app concept, Zizek-style. But doll faces I’ve copied from my old app sketch were too withdrawn and plastic. This is why I’ve started looking for minor tweaks on the shapes of the eyes and the mouth that could fit flat-colour style and at the same time bring a change. Seems like masking eye shapes with flat eyelids will work.
October 7, Saturday
There is a great homie place in Vienna close to the Stadtpark called Hidden Kitchen. I like working here on Saturdays, cause unlike in many old dusty places in Vienna they have massive (and clean sic!) windows, cheerful staff and clean coffee machine. They also give you this brilliant little lemon biscuit on a side of your coffee.
I wanted to redraw some screens from this Jade app for ages. It is one of my utopian-yet-plausible projects. No commercial bone in it, yet a clear message and point to implement. There were many hippies, who reached out asking about “where can we get the app and use it in our project”. Sadly none of them wanted to join our efforts in making it happen, when they’ve learned it was only a concept. Oh, hippies, I love you.
It took me a while to re-draw the basics carefully (because, again, I wanna animate a character with code and this takes a bit of patience in building the assets). Thanks heaven, today we have (and this keeps me ever-excited) Pixabay and similar services full of Public domain imagery, so I didn’t have to hunt long for a picture of an old iPhone (since, you know original design was done for it) and a grocery store.
October 8, Sunday
I’ve needed a bit of a break, so Sunday sketching wasn’t eventful, but I’ve prepared a small svg character sprite to try out animations with svg sprites.
October 9, Monday
Alright, so the image sprite from above didn’t go in vane. Honestly, I’m under-slept and the wisest thing would be to go to bed. However, I’ve decided to push it through with a daily aspect of daily doodles and have made this sketch. It animates a loop of svg sprite symbols on click. The logic is very simple and generally this is exactly the same to the XML I was writing for Korulab. But it is helpful to start looking into it’s HTML version.
October 10, Tuesday
Somehow I was hoping I’d manage to avoid it, but no, I’ve had to draw a golden section block in Google Slides for BulletBiting project. It came apparently useful during lining adjustment of a work-related infographics in the Slides. It’s still not released fully in the BulletBiting. But so is the whole project now.
Well, this is surprising for myself, but I’ve actually sat for another couple of hours after work. First, I’ve published here some bits on the Shifting Gear project. Honestly, I need to revisit it and write a short clear story for web, because at the moment these extracts from the report are a bit all over the place. But well, it took me several years to even start. Who could think that unpaid projects are not the priority. Shocking, right?
And then, I’ve sad to myself that I should retouch Jade app description that I didn’t touch since 2013, so it was full of gibberish. Along the way I’ve sketched a Product Card screen for the app. It would be actually fun to sketch the whole navigation map for it, because the original concept was somewhat social and there is a space for some kind of gift tokens and personal accounts. Which in its turn mean that there is space for the whole universe of Jade characters that different users may pet.
October 11, Wednesday
So, out of the blue I’ve spent 9 hours at work today. There was no call for it, just didn’t feel like leaving some issues unresolved. But after that I’m pretty washed out, so no inspiration for anything major is left for today. Here comes a sketch that I’ve wanted to try out for a while though. It’s cropping user images with CSS and animating them a bit on hover. Not a bit of XXI century tech, but a handy thing to have around, when I need one.
It’s also exciting to find accounts like this on Unsplash. Often when I do prototypes of some apps and services and the audience is undefined (which, to be honest, happens more often than it should be in commerce) — I try use pictures of faces that are not typically European. Finding a good resource for this is sometimes problematic. Because, you know, you don’t find so much typing “not so European face” into a search bar.
October 12, Thursday
I’ve actually started another CSS sketch during the day. But then, the last thing I was trying at work (making some quick visual fixes to college’s charts) was to turn a basic stick figure into a crude version of something human-like. This set me in a mood to try Thought Cafe ft. Kurzgesagt style of a flat character drawing (Btw, if you don’t know them — both do amazing educational shorts).
I first thought to draw Hannah Arendt because her book was idling on my table. But then, I’ve figured, that it would be better to just go with the flow and study the references. I like how Thought Cafe does these simplistic faces. They are nicely animated with the idle eye squint. Ah, so simple yet functional. And then the absence of a neck makes the expressive motion for the head so much easier to design. What both of the studios was missing is detail level in the ears. It might be for a reason, say animating head tilt with an ear would be a lot of trouble. But as I don’t have any real aim at the moment, I went on to give my folks a pair of nice ears. I’m actually pretty annoyed with the hairdo’s I’ve drawn, but for good ones I need some nice reference study. Drawing the attributes like socks and a watch was predictably fun. But the time is flowing over midnight and I gotta go to bed. This drawing took much longer than I’ve anticipated (about 3 hours), because along the way I was trying to keep a layer structure of a file strict. Considering that I may wanna use it again.
Now I wonder (ever more than before) what kind of rig animations can be used on such models. AfterEffect’s puppet feature was simple, but also lame. Is there any freeware to do it? Is there any special soft just for this?
October 13, Friday
Seeing my sketch from yesterday Mathias has asked for one with himself. He was pretty specific about hiding his genitals (because he is so mature and grown up), which gave me a chance to draw a pair of briefs. On which, as I notice right now, I’ve forgotten to add this little penis pocket for peeing without taking your pants off. Does anyone use it at all? Or is it like a tiny pocket on the jeans that is just a legacy.
Anyhow, I actually didn’t stop yesterday night and I’ve learned one thing that I’ll share here now. When I’ve made the first sketch I’ve drawn characters’ arms as segments of the circle. There wasn’t any particular reason for it, it just seemed like a quick placeholder. At the same time it was incredibly limiting in terms of motion. As I did not have any plan — I didn’t care then, but I knew it must be fixed. So, staring into the Sketchapp’s (which is the only graphical soft I have on my home laptop, because I’m greedy.) I’ve finally realised that I can just use basic line of certain thickness (say 30pt) and a circle of the same diameter. With the right settings they should align, right? Right! So they did.
Of course, when the need comes one can convert this line into an outline and have a solid scalable blob.
Anyhow. The hardest part (after getting started — “getting started” is always ultimately THE hardest in my case) was actually to draw the pubes. The thing is that it is fairly easy to fish references for hair and facial expressions. Non of this would be a true manifestation of artistic intention. But to hell with this. It is not really the point of the design exercises. Well, when it came to pubes (surprise-surprise) — there were no references. There are some, of course, but all of them looked like crap and didn’t match the style. I wanted something scalable, easy and at the same time detailed enough. After some intense googling I’ve found an image of a ganja-somking middle age man in a Hawaii-shirt. A few top buttons were unzipped and the chest hair was styled as little spirals closely smashed together. Well, spirals would have not matched my drawing either, but at least this gave a nice direction. And now some yoga.
October 14, Saturday
Much less “productive” today, but starting a much more interesting case today. I’ve decided to look into Gmail UX and document the line of thought as I go. No need for more text here. All that has to be said is going to be said in the linked article.
October 15, Sunday
Wow, if was hard to put myself together and do any sketch today. Regardlessly, I’ve done a cut-and-paste redesign of the Google Inbox page for the article mentioned above. More words about it are spilled here.
October 16, Monday
I was meaning to try it for centuries and finally have made my first move. Today I’ve submitted an icon to the NounProject. Some day later I will also upload a pictures to Unsplash. It is great to have a chance to share work (however hilarious and marginal the topic is) with the greater audience. There were only two icons there today that they have on request “grindr”. However, it is a dating app with over 10 million installations on Android alone.
First I’ve wanted to fill the grid with a lot of different kinds of torsos. But during the night I have only that many hours to sleep. So I’d better move on. I still have the warmest feelings to the datings systems, since their terrible UX was exactly the reason that I have started being pro-actively interested in deeper strategic levels of media design. Let’s say this icon is my tiny tribute to it.
October 17, Tuesday
I will just draw something simple, he thought. I will pick some simple particle that no designer has drawn on the Noun Project and it will take about an hour to make a nice icon, he told to himself. Well, If you ever start drawing a Higgs boson surrounded by protons, charged and neutral particles (because, hey, a scheme of transition was easier, but looked much less epic) — be prepared that composing it in 100x100px frame is much like playing with beads. Anyhow, now I have something useful to release under public domain.
👨🎓 Nerding it up!
October 18, Wednesday
I’ve started again looking into this sketch again. The body shape of a character was super limiting. And I’m still thinking of giving up in this pixelated look. I guess at the moment I just need to find a good natural reference that would dictate further style. So, skipping the product work, I’ve spent a while doing quick animal studies.
October 19, Thursday
I’ve had a reference in my phone for a while, but haven’t been in a mood to make this drawing. Actually I’ve wanted to make it using svg lines, but there wasn’t a handy mobile app for it (there are a few editors, but they are terrible in handling layers). Today I was too lazy to sit by the table, so I’ve kicked back and drawn this in Autodesk SketchBook, while laying on the bed and listening to the lecture about pre-historic diets. Autodesk Sketchbook is actually a pretty great app. Eventually I’ll get a full license, if I have a bigger task at hand. Luckily it has a never-ending free trial.
I need this asset to get some practice with animating sprites using javaScript. It’s a bucket simple, but I’ve done it just once and now it’s only present in my memory as a ghost. But not tonight, not tonight.
October 20, Friday
Today I’ve picked a random tutorial online and put this pure CSS sprite animation to live. Gotta say, the first tutorial was pretty damn shallow and I’ve had to consult another one to be able to follow the basics. Thanks Google for being in my life. Anyhow, the times have change since my last try and nowadays animating your sprite with CSS has become ridiculously easy. It would not be a huge problem either to generate these animations dynamically with javaScript, knowing a number of the frames in each sprite.
October 21, Saturday
I almost thought of giving up on a sketch today. A wave of a mood swing has swung down pretty low and I’ve seemed to have all the load of Weltschmerz on my shoulders. I’ve spent about an hour staring blankly into the table, trying to start, moving a hand and getting morbidly bored by the time the hand has landed on a pencil or a keyboard. Hello, hormones!
Either way, a new iteration of screens for Jade app came to life when I’ve finally get hold of this madness. I’m pretty lucky to have found my interests in life. Because once I’ve started— hours of tryouts and work have just streamed by.
October 22, Sunday
Näh. I’ve started drawing an Ainu lady, based on an older flat person’s skeleton. After a bit of an agony on painkillers (because, at least something is clear now, my mood swings yesterday were a sign of a coming migraine today) I’ve got to something I can work on further later. But, to be honest, I need to practice with this more. As of now, my lady looks like some villain from Batman series.
Also, the fact that there are no references online in decent quality doesn’t make anything easier. There are either pimped up Ainu folk impersonators, which are not very interesting. Or, very old photos in low res, that are hard to inspect for details. Ainus are still interesting as a subject, since their history is pretty symbolic to how a sole idea of “nation states” has erased more cultures than ISIS can ever reach for.
October 23, Monday
So, I’ve started watching (once again) Convolutional Neural Networks for Visual Recognition class from Stanford. That is brilliant and all. But this made me think: “Hey, if I have to tell now, what’s the difference in between machine learning and deep machine learning — I’m done. Right here. Before the start.” So, I need to cover my basics in terminology in order to fully dig what the lecturers are saying. Also that’s handy to sift quality material on the subject from sheer rubbish. Oh, love, today, there is so much rubbish on anything remotely touching machine learning.
So, reading the basic article on machine learning on Wikipedia, I’ve figured, that I could do a set of icons for basic machine learning methods and release them under Public Domain. Miksei.
I have started with a Decision Tree Learning. I think, what I have drawn is a bit ambiguous as a stand alone icon, but pretty representative in context, side by side with the rest. Then I’ve been pretty exited about seeing if I can push the same style (thick solid line and clear shape) further, so I went on to the second one and made an icon for Association Rule Learning. This one came out more “iconic”. Also, generally, much better than the first one. But now I have to pause and read, watch, listen (do whatever works) on these methods more to say that I know what they are. They are pretty basic, but there are also levels of complexity that are exciting.
October 24, Tuesday
My brain was, probably, frozen during the first snowy Finnish morning this season. So there was no capacity for much learning today and I just went on drawing another icon. At first, when I’ve looked at the sample images of Artificial Neural Networks my reaction was: “Duh, boooring! Drawn it yesterday”. So I’ve already been imagining how I will be stretching in a favourite lower back yoga set in ten minutes. Well. This wouldn’t have been a good story if my hubris was left unchallenged.
So, apparently, composing connections in between 2–4–2 circles in aesthetically pleasing way is a nightmare. If the middle ones have been aligning with a grid, the ones on the edges looked like I’ve drawn them in PowerPoint. There were about 10 intermediate versions until I’ve finally gave up on finding a hidden grid, evenly spaced the nodes around the icon’s margins and … well, then I’ve been aligning tangent lines by hand with the precision to 0.01th of a pixel. But now I’m more or less happy with an outcome. What bugs me is that the direction of the flow is not clear for a person, who is not familiar with the concept. Meaning, it is not clear that this one should be read left to right while the other icons’ flow were built top to bottom. Well, YOLO, I guess.
October 25, Wednesday
Who’s not giving up? I’m not giving up. But, oh, is it hard to find a solution that reads well without compromising a chosen style. Note for future self: never pick uneven numbers (e.g. 3px) for icon decks with complex detailing.
I’ve nearly given up on having matching line thickness in this collection. Which made me sad, but the first trial looked so messy, that I didn’t think anything readable will ever work out. Well, if anything, I am stubborn. Today the first ever person has downloaded a Higgs Boson icon that I’ve designed earlier this week. Which makes me hopeful about the whole project. Live long and prosperous live, sandeep116 from noun projects! May the other 115 sundeeps treat you kind. You are my inspiration tonight. Well, to be honest, these guys are more inspiring.
October 26, Thursday
Inductive Logic Programming is, perhaps, the coolest icon I’ve ever drawn yet. Not only within this set, but rather generally. It is balanced, meaningful and it’s lining is exactly what I have been aiming for.
There wasn’t actually a single “inductive logic” icon or even visualisation that I could find. The closest were the word formulas like:
“special cases → generalisation”
While these formulas were helpful in understanding the essence of what inductive logic stands for, they are not good for visualisation of it. So, I’ve taken abstract thinking tests from the web as a reference. They usually suggest you to fill in a gap in a symbol matrix with whatever suits the matrix logic. Originally I thought: “Ah, will just put a question mark instead of a missing glyph”. Then I thought it was redundant and not interesting. So, I’ve made a few trial drawings with dashed strokes. Those looked crappy, because with such a thick line gaps in between stroke dashes should also be thick. The final looked clumsy.
In the end I’ve opted to using a 1px thick (or 1/3 of a baseline) line for the “assumed” path. Breaks the rule I’ve been sticking with until now. But then, so does the gap in between the large and small circles. It actually matches the thinnest lining in size, so that the final circle in the middle gets it’s neat ripple. Uhhhh, grid. Uhhh logic.
October 27, Friday
Again I thought that drawing a Support Vector Machine icon will be easy. And again I was wrong. Emotions on the resulting image are: ¯\_(ツ)_/¯
I was trying to have only the elements necessary to convey the sense of the drawing and not fall into rococo abundance of free floating nodes. A mental reference that I strive for in this icon exercise set is a USB icon. It’s free of rubbish. Today’s result is a bit of a fiasco. I will have to return and redo this one if further in the exercises I find a better way of depicting a data set on a plane. For now, I’m just happy it is symmetrical and clean, while being true to the concept of a Support Vector.
October 28, Saturday
Cluster Analysis is much easier to illustrate since the principle has a kind of A/B logical categorisation in its core. The challenge today was in finding a proportion of elements that would align nicely in 90px with more than 2 groups (The Noun project rationally requests 5px margin in 100x100px icons). Luckily for me, after working on wearable UIs for 4 years 90 pixels seem like a large canvas. Also, the patience to micro-alignments has became rock solid during these years.
October 29, Sunday
Either I’m getting quicker or Bayesian network was an easy case. But, I’ve been done within an hour.
October 30, Monday
Post-Soviet Russia took October 30th as the Day of Remembrance of the Victims of Political Repressions. It didn’t mean much to me as kid in the 90s when it was fixed in the calendar. It didn’t mean much to me in the 2000s when I was growing up, dreaming of speaking fluent English one day and meeting an actual foreign person for a chat. The discourse of Stalin’s repressions froze in a very cliche shape in my mind: camps, political motivation, psychopathic cleansing and citizens reporting each other to climb social ladder one step higher.
A few days ago I’ve learned the story of Aaron Swartz. I read his biography and I desperately want to meet him. Just to walk along the street and talk about in which particular ways can we make the world around us fair, non-violent, stable. He is the mind that happens to be dropped around the world once in a while. He is the voice that dares to be “boring”, dares to be “real”. And he is the action, that goes with the voice. He is the person of my generation I want to work with. I am lucky to have met numerous people like this in my life. And I am more than lucky to have some of them as my close friends. Every generation contains a limited amount of great ballerinas, limited amount of witty comedians and limited amount of great inventors like Swartz.
Swartz was slaughtered by the corporate law system. He put work to release the paywall of copyright from the knowledge that must (by all the common sense) belong to people whose money payed for it. Corporates and their lawyers trashed his life and lead him to suicide in the face of incarceration.
Copyright law is getting innocent people cut off from knowledge and security that comes with it. It is getting people to jail or dept for contributing to culture. It is blocking education, blocking science and ultimately — making people rivals, not cooperators. Copyright law leads to repression of today. Repression that is more meaningful to me, that the ones of 1930s, because today’s repressions are cutting of brilliant people of my generation. These repressions are killing of people who bring the only glimmer of light into the bloody dim of arrogance and ignorance that is our modern communication discourse. At the same time copyright law is an abstraction. It’s full of rotten legacy. It is a zombie marionette of Disney and Universal, of Warner and Fox.
To all the Aarons who are still alive and might stumble upon these words: Thanks you. You didn’t and you don’t have to go this way. Nolite te bastardes carborundorum.
October 31, Tuesday
Hey!
I’ve made it till the end of October without a break!
Dear diary, I feel almighty. Perhaps, I should run for a president or something of this kinds. But then the job of a president is all meetings and bullshit and I will have no time to try some new exciting tech stuff…
Anyway. I thought of taking a longer break from the Machine Learning icons and doing some more in-depth exercise today. But nature has had different plans and I have my nose blocked with the cold. So, scraping together the last power of will I’ve decided to not start anything new and just learn about one more machine learning method. Reinforcement learning is one of the methods that will haze fellow designers. There are these tech evangelists amid design community who’d say: “Oh, AI and Machine Learning are based on how the brain works. There is a closer bond now in human-computer interactions.” And is it exactly stories like the one of the reinforced learning that lead into this delusion. This method of building algorithms was inspired (sic!) by behaviourist psychology. Period. Connection to human (or any other animal) breaks here. Well, sure the inspiration has leaked here and there. I’d imagine that there are entire methods that have symbolically cross-pollinated naming. But nothing human has been embedded into the machine. It is just the methodology of metaphorical “training” that has given an idea to the first virtuoso coders. Well, I’m sure that since mathematicians and coders give a lot fewer stage talks than the designer — we are going to hear a lot of such mythification of math in the future.
