Comics And How Did I Get There

How to Use Comics to Communicate Ideas – now wait. How did I get here…?

Too often will I find myself somewhere, reading something that is completely unrelated to what I do or like doing. I will try to retract the steps that led me to that spot, usually with no successes. I’m at the same situation now, but am determined to go back and log the breadcrumbs of exploration that led me to, of all things, comics. I never read comics, and weren’t interested in it. And now I’m about to buy a book teaching how to use it to communicate ideas. So here’s how I got here.

About a month ago, I started to work on this Messenger App. Initially, I did the development work. I used python and flsk to build a server that acted as the back-end of the service. Later, a friend joined me. He is a much more experienced developer, and over time became the lead developer in the project. I did more of the product work – spec’ing and prioritizing as well as building the front-end of the bot, using Chatfuel as the CMS.

We needed a designer, and thought to hire a freelancer. We also wanted to experiment with the concept, because we think of it as a way to scale ourselves cheaply. I used Guru to find designers.

To hire a designer, a freelancer, I needed examples of the design work and styles that I’m looking for. And so I started to create them.

I started with Inkscape. In addition, I downloaded Sketch and illustrator for a trial period. The latter two didn’t stick at the beginning, and since I learned to use Inkscape quickly, I didn’t need them.

I learned Inkscape mainly through YouTube. I wasn’t familiar not only with the app, but also illustration and vector graphic. I never really understood bezier, or how to use it. But now I started to, and realized the potential of vector graphics.

As I learned more, I was drowning more and more into the design world. I started to think colors and see shapes. I made more and more illustrations of cloth items. (here are few examples.)

The designers I hired on Guru didn’t work out. One resigned after I hired her, because she didn’t feel comfortable with material design. The other submitted a horrible first draft, and I stopped the project short. And since I started to have a lot of fun creating the illustrations myself, I decided to keep doing it and complete the design work for v1 of the product.

I produced tens of items, and while doing so started to develop a design language for the app. (I was inspired by this video.)

Once I had the items, I moved to compose the outfits for the different genders and weather conditions. While Inkscape is great, it’s not as good when it comes to layout design. And so I tried Sketch and Illustrator again.

At that point I already made a lot of progress learning vector design, and started to get comfortable with the design workflow. And while I still didn’t get how to use Illustrator, working with Sketch was fun and flawless. In less than two days I completed the full sets of outfits.

I got totally excited about design, and felt that I can actually do it in a more serious way. And it that’s the case, then I must learn Adobe Illustrator, the gold standard for graphic design.

I started to read a ton of blog posts and tutorial. I watched many YouTube videos. And I started to see the power of Illustrator, and the endless capabilities it allows. Just two examples for features I wished for when working with Inkscape:

  • Illustrating fur. Here’s a video of how to do it in Illustrator.
  • Color refactoring – I needed to design for both boys and girls. Since the focus at the initial version was on newborns, all I needed to do, in most cases, was to simply change the color scheme of an item, to make is “girlish” or “boyish”. It took about 30 minutes in Inkscape, manually changing the colors. In illustrator, there’s a color refactoring function, that lets me create as many colors from the same item in seconds.

So Illustrator rocks. I need to learn it, and maybe I should do it in a structured course, rather than reading sporadic tutorial. A designer friend recommended Lynda, but I eventually signed up to 5 classes in Udemy (they had the January promotion, when all classes were only 10$ each, so I added to my cart whatever had illustrator in the title…).

I started with Adobe Illustrator CC Tutorial – Training Taught By Experts. A 12 hours course, that spans across 132 episodes. I completed it in less than a week. I continued to Learn to draw fashion with Adobe Illustrator CC – Beginners1.

While taking the courses, and getting deeper into Illustrator, I started to feel strongly about creating, painting and making illustrations. I bought an Intous Pro tablet, because I thought it will open me to digital art, and make the design process more efficient and much more enjoyable. I was right, and not only that, but using the Intous, I got even more eager to create. I wanted to replicate as much as possible the the physical sensation of sketching on paper.

And that’s were I started to contemplate on buying an iPad pro with a pencil… It took one day since I started playing with that idea till when I got one… a classic impulsive buy (though I bought a used one.)

The experience with the iPad, though I have it for less than a week, is amazing. I carry it with me everywhere, and find myself sketching when ever I have few minutes, such as when sitting in a cafe for lunch. I use it to also take notes, and can see how it replaces my pen and notebook that I love so much.

And so, as I start to express myself visually, I want to, well, learn how to do it better. I’m writing a spec for one of the projects I’m working on at Outbrain, and thought that a storyboard that illustrates user stories might be a good way to convey my thoughts and the user flows I had in mind. And so I started to read about using storyboards for product design. One of the articles I read led me to this book. And that’s were I paused, and started to write this post.

I was never interested in comics, let alone creating them. But for some reason, I have a strong feeling that that’s going to change very soon…

Can’t wait for the next learning adventure.

Illustrations – v2

In an earlier post I shared some of my illustrations for Baby Weatr, a Messenger app that helps parents chose an outfit for their newborn baby based on the weather. As I gained more experience in illustrations (note: I’m not a designer), a style started to emerge. Here are the outcomes of the second iterations.

I created most of those illustrations in Inkscape, while transitioning to Illustrator. Finally, I then used Sketch to create complete outfits (see example at the bottom of this post).

These are the styles we’re using in the app:


And here’s how items then added to a complete outfit:

Girl 20f-less


What I’ve Been Working On Lately – Recap

I didn’t write for a while1. And it’s not that nothing had happened. The opposite… so much learning and new experiences that I didn’t find the time to log. No, it’s not a lack of time, but rather not internalizing how important it is to stop, asses and capture what I’m learning as I go.

But it’s better done late than never2. So here’s a list of projects I’ve been working on, in no particular order, followed by the list of new skills I’ve learned.


Outbrain News Brief for Alexa

This is a simple skill for Alexa, that reads summaries of top news stories. So as a user, you have to add this skill to Alexa, and can then ask Alexa “what’s in the news”. Alexa then calls a web service, which I developed. This web-service calls Outbrain and ask for the latest news (using the Sphere platform). It then sends the articles it gets from Outbrain to a summation service (Agolo), and returns them back to Alexa, which then reads the summaries to the user.

Outbrain skill for Alexa

Similar to the skill above3, but with more functionality. This is actually the initial stage of a conversational experience, where users will be able to interact with Alexa to get personalized news stories. So users will be able to guide Alexa through conversation to article from site, or on topic they are interested in, or discover new content based on their interest graph. Here’s a simple sequence diagram that illustrating the current user flow:


My Clipboard


Now that’s where things become more interesting, working on my stuff… This is a skill for Alexa that serves as your clipboard. You can say “Alexa, ask my clipboard to remember 212 322 4432” and she’ll remember this phone number for you. “Alexa ask my clipboard what’s in my clipboard” (yeah, redundant, I know…) and she’ll repeat the phone number for you.

Why is it helpful? imaging that you’re on the phone and can’t take a note, or fine a pen to write one down… let Alexa handling it for you… But if you think about a smarter clipboard, one that takes keys and values, you can do much more interesting stuff. For example, ask Alexa to remember that you put your passport in the top drawer. Later on, you can ask her where did I put the passport. But that’s a longer term functionality… I first need to finish the current iteration and get it public (it’s not at the time of writing this…).

Baby Weatr


Baby Weatr is a Facebook Messenger app4 that helps parents decide how to dress their kids appropriately for the weather. Well, it designed around my lack of any skill to translate weather into baby wear. So to make sure I’m not endangering our daughter, I decided to build this decision support app.

I’m working on it together with a friend, but this was an opportunity to tie together a lot of the things that I like, and always wanted to use more, such as coding and design5. Initially we tried to outsource the design work, but working with chip freelancers produced deliverable at the quality we paid for, meaning bad. On the other hand, hiring capable designer is expensive. So, I decided to hone on the opportunity to connect with the right side of my brain, and design the first version of the app myself.

Baby Wear is live on Messenger now, so if you need help dressing up your baby – I would love to get your feedback…

Try Baby Weatr


While working on the projects above, I did quite a bit of coding. What’s more, this time I coded almost professionally (some of  what I built is going to be used by my company…).

I found that I need to log what I’m doing, so I can backtrack if needed, and won’t make the same mistakes twice. I found that it also accelerated my learning (similar to how writing does…). Git commit, or inline commenting weren’t enough, as I wanted to capture not only the outcome of my thinking, research, trail and error and refactoring. But rather, I wanted to put capture my deliberations and place bread crumbs as I go. I wanted to be able to read back and understand why I made certain decisions. For example, why I selected one data structure and not another, how do I start a flask project, and how do I run a flask app and make it reload every time I make a change.

And so I started to maintain a file called development log, or dlog. I keep it open as part of my workspace and include it in my git repository. Here’s an example of how it looks like (the dlog is in the bottom right quadrant):

I thought that might be something that other developers find helpful, and put it on a separate blog (here). I’m contemplating with the idea of opening this blog for others, with the assumption that if many developers log their process, it will serve as a new form of knowledge repository, stack-overflow extension, or companion to readme documentation.

Things I’ve learned

Chatbots Messenger Apps

Well that’s not new for me… my team is dedicated to messaging apps for awhile now. I think I mentioned before that we’re responsible for the CNN app on Messenger and Kik, as well as for the apps of other notable publishers. What I did learn is how to view these type of apps as the best way to develop an MVP, and how you can build a full experience with building blocks, and minimum amount of code, or back-end services.

I’m used Chatfuel6 as the content management system for the Baby Weatr app, and love the way I can control the behavior of the app, and build it to match the way I’m thinking about flows. Here’s how the Baby Weatr app looks like within Chatfuel: chatfuel-baby-weatr.png

Assistant devices

Assisted device are the conversational version of messenger apps. Here, a user can interact with a device with voice, rather than with text. I’ve been working with Alexa on the skills I mentioned above. I also experimented with Google Home, and their platform.

I think that these experiences are the real revolution in AI and conversational design, and messaging apps, or chatbots are just a stop in the way. I suspect that FB is going to kill their (less than) year old platform, and bet on live video, VR and maybe voice recognition. Right now the messenger apps are like a ghost town, Much more to say about that, and about what messenger apps are good for (hint: MVP). I’ll keep that to another post.


Python isn’t new to me. I use it occasionally to write scripts to streamline my workflows, or automate tedious manual work. (Automate the Boring Stuff with Python was the book that got me started with python. Highly recommended.)

But this is the first time I’ve used python for real products and services. Using it more intensely I’ve learned how friendly the language is, and how well it fits the way I think about code. I wrote so much, that even google took note, and invited my to the google coding challenge7, mistaking me with a real developer :-). google-code-challange.jpg


That’s the backbone of almost every one of the projects I listed above. Flask, and it’s Alexa extension – Flask-Ask, are super easy and intuitive packages that help creating web services. I created a template (TODO: push this template to GitHub) and I use it as a starting point with new projects.


Now, that were my passion is at these days. I’ve just finished a 12h Illustrator course in Udemy, and in the middle of a… Illustrator 4 Fashion class. All I think about are shapes and colors, and how I can make them in Adobe Illustrator, my hands are glued to the new Intous Pro I’ve just bought.

In a way, I’m where I wanted to be when I did my bachelor degree – code and design (I graduated as a software engineer, with focus on machine learning and… graphic design).

But in my journey to Illustrator I actually made two stopped, in Inkscape and Sketch. I started with Inkscape, which is great. It’s easy to learn and very powerful. What I like most with Inkscape is the control over the creation and modification of paths, which is way easier and more intuitive than Sketch and Illustrator. I did most of the clothing items to Baby Weatr using it, and posted samples of these designs in a previous post.

But Inkscape lacks in layout and layer management. I also missed smart guides, which makes the interface design much controllable. And so I’ve started to learn Sketch.

I love Sketch’s workflow, as well as the way it lets me organize design assets alongside my artboards. But, it’s not a replacement to Inkscape when it comes to actual illustrations. What I ended up doing is creating the cloth items’ illustrations in Inkscape, and importing them into Sketch, where I did the layout created the sets of outfits.

Here’s how the Baby Weatr project looks like in Sketch: sketch-outfits-page.png sketch-cloth-items.png

And then, as I drawn deeper and deeper into design, I’ve started to learn more about Adobe Illustrator. I tried it while using Inkscape and Sketch, but it seemed too complex, and inaccessible to me. But the more complex it seemed, the more attracted to it I became (no wonder I use Emacs…). When I finished all the clothing sets I needed for the beta launch of Baby Weatr, I decided to get serious and learn Illustrator. After all, it is the tool for designers…

And as I mentioned, 150 episodes later that took 15 hours and span over 3 course, I’m at a point where I feel comfortable with the tool, and starting to do art and design work in it.

Phooo, there was a lot of catching up I needed to do… but it feels good to look at that list and appreciate all the things that I had the chance to learn and experiment with.



And now, just to make sure this post is going to get published, I used one of my hacks, and put it on scheduled publishing…


And no, there’s no new year resolution involved in this writing. I don’t like this practice, and don’t set those resolutions…


This skill is still in development, so not public and can’t be added to Alexa yet.


aka chatbot, but I denounce the term, because it’s lame…


I graduated as a software engineer, with a focus on machine learning and… graphic design.


They were actually a fierce competitor when we tried to get the CNN project 🙂


I completed several stages, but didn’t go all the way, because I had other things to work on, and I’m not going to make a career switch…