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.

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

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.

Site structure schemes

Here is a couple of schemes. Schemes of the site structure. I usually create them while working on site information architecture to keep the whole data interaction under control. As I refer to them pretty often, I spend an extra couple of minutes to make them look fancy. These schemes can be expanded or reduced while developing the site but when the IA/UX stuff is developed and decorated (that’s what clients like to call ‘designed’) the site structure schemes usually look quite eye catching. Take a look at this one, pixelated header of which works as the post of the illustration:

Two traffic advices for Yandex

Offline UX for Girls

One of the mega.genn.org readers commented ‘How to Draw a Flying Kawaii Cat’ saying that his girlfriend was surprised. She thought he was reading about tampons because something in my instructions appeared to her like Tampax. The reader replied he was reading about the cats, not tampons. If your girlfriend sees you reading this post, tell here it’s about user experience, not tampons.

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.