by Glen Lipka Fri, 17 Nov 2017 22:50:16 +0000 en-US hourly 1 32 32 2075023 Google Interprets Material in Many Ways Fri, 17 Nov 2017 22:50:16 +0000 Continue reading "Google Interprets Material in Many Ways"

Material Design isn’t one single thing, even at Google.

I spent about 5 minutes taking some screenshots of different Google properties and their interpretation of Google Material Design. None of these are “pre-material”. Quick looks:

The new Google Calendar is much better than the original mess. However, they are stretching material in new ways. Notice the blue SAVE button on the top right. Also, the fields have background colors and icons on the left.

Google Inbox (to me) is a nice improvement over GMail. Notice the blue SEND button on the bottom left. Form elements are transparent with gray lines.

The new Google Contacts is very material-y. Notice the form elements and the SAVE button at the bottom right with no box around it.

In Maps, Adding a place is pretty lame. This feels pre-material, but notice the slightly different button at the bottom right.

The sign in is a big NEXT button with material form elements.

The edit home address in maps has a SAVE button on the top to the left of a cancel link. No background box here.

The new Google Analytics is still pretty old. Yuck.

Google keep has a DONE link (not SAVE) with no button box on the bottom right.

I could go on and on.  What is the point?

The Point
The point is that there is no such thing as perfect Material Design. If you are using it at all, you must realize that even at Google, they are making it up as they go along. They have rough guidelines, but even things as simple as form elements and SAVE buttons are done in a wide variety of ways. The shadows aren’t consistent, the placements aren’t consistent. Nothing is consistent.

If you use Material at all, you are in danger of looking “off guideline” because Material is not a robust enough system to cover every case.

You need to make your design be different enough to claim it is YOUR style. Don’t just ape the material guidelines. Have a style that is unique to your situation and case. One day Material will seem old and dated. Don’t be a slave to the fashion.

]]> 0 7174
My Dog has Pancreatitis Wed, 15 Nov 2017 18:58:50 +0000 Continue reading "My Dog has Pancreatitis"


Pancreatitis happens when the pancreas becomes inflamed. That’s an organ near the stomach that helps digest food and control blood sugar. (Source)

Leroy was not eating and passing blood all over the floor. It’s freaking me out.

The treatment is not really a treatment. You give him fluids and hope it goes away. Modern medicine is amazing and can do crazy things, but doctors will also admit that they really don’t understand 99% about how our bodies really work.

One colleague was talking about anesthesia that his child had received. The doctor said they know that certain drugs will knock you out for some period of time, but they really don’t understand WHY they knock you out or why some people react more or less to certain drugs.

Our bodies are incredibly complicated. This doesn’t mean we won’t understand them one day, but for today, it’s mostly a mystery. I remember my wrist odyssey being so frustrating because no one really knew what was wrong.

Doctors often look for the usual suspects and then give up or start experimenting until they stumble upon the right answer.

Health Care is the most amazing thing and the most frustrating thing in modern society. No wonder people get so riled up about it.

]]> 0 7171
Axure RP Revisited 2017 Wed, 08 Nov 2017 21:25:23 +0000 Continue reading "Axure RP Revisited 2017"

Just for kicks, I downloaded Axure RP. I have been using Figma and thought, “I wonder how long it would take me to make this in Axure. 10 min later, I was giving it a try.

Meta Point
Whenever you are curious about something, just do it. Don’t wish for it, don’t hem and haw. Just follow Shia LeBeouf’s advice.

It’s amazing to me how many people think curious thoughts and then refuse to act upon them. OK, </soapBox>

Axure Review
Bottom line: Axure is by far the most flexible prototyping tool short of actually programming the UI. It is so ridiculously powerful that the limit is truly your imagination. <fullStop>

Design principle #3: Simple things should be simple and complex things should be possible.

Unfortunately, Axure does not follow this design principle. Everything is complicated. Everything.  The perfect use case for Axure is “Big company, lots of people, need to test the shit out of the UI”. For example let’s say you wanted to test the software that controls a big piece of medical equipment like a MRI machine. Axure is a great way to test a very realistic experience. The operator is likely NOT a designer. It’s probably a web developer taking designs and using Axure to turn them into a prototype.

If you are a SaaS designer, Axure is complete overkill. The learning curve is crazy high and the usage is quite clunky. Here is an example modal of making an interaction or as they call it a “case”.

That’s alot of stuff to look at. The main screen is pretty intense as well.

I finished my evaluation in about 20 minutes. I am uninstalling it, but that doesn’t mean I think it’s bad. It’s actually quite good for a different person in a different case. (Web developer in a big company that needs to heavily test).

I would suggest to them that an information architecture and graphic design update is needed. No one should use Arial…ever. Other than that, they could redesign the tool from the ground up for a more designer friendly case. Either way, they have not innovated since I reviewed Axure in 2010.

Maybe I’ll give it another try in 2023.

]]> 0 7163
Top Gun Revisited Sat, 04 Nov 2017 23:38:32 +0000 Continue reading "Top Gun Revisited"

I haven’t watched Top Gun in decades, but I just watched it again. Its such a classic. However, I have a major complaint.

Goose dies and they send him back up with a new partner. The partner yells at him and he loses his temper. Viper says, “Its only been a few days.” WHAT?? They sent him back up literally a few days later? He doesn’t get to mourn the loss of his best friend?? What kind of sick shit is this? Goose’s wife says “He loved flying with you but he would have flown anyway.” Then Charlie (the girl) finds him in a bar and basically calls him a loser and a quitter. His best friend just fucking died a few days ago, give him a break for crying out loud! Why are they rushing a grieving man to be in a multimillion dollar aircraft?

Ok, so he goes to graduation and they say there is an emergency. They call Mavericks name. WHAT?? Why would they call his name? He said he can’t fly. He proved he can’t fly. His best friend (have I mentioned this yet) JUST DIED!!

Then they go back to the original ship in the beginning of the movie. Ok that is dumb, but whatever. And the bad guys wait until the Top Gun team get there (halfway around the world) before having a firefight. Ok, that doesn’t make sense either, but whatever.

When I watched this as a kid, I loved this movie. Why didn’t I ever notice this before? Such a classic movie, but give the guy at least a week to grieve.

Talk to me Goose. Talk to me.

Last thing, near the end “launch Willard and Simpkin!” Are those their call signs?? Im Iceman, Im Maverick. I’m Willard! What the hell? How didn’t I see this before?

Come on Goose. Talk to me.

]]> 0 7160
Social Anxiety Fri, 03 Nov 2017 20:29:06 +0000 Continue reading "Social Anxiety"

According to the Social Anxiety Institute:

Social anxiety is the fear of interaction with other people that brings on self-consciousness, feelings of being negatively judged and evaluated, and, as a result, leads to avoidance.

I am absolutely familiar with this feeling. Although I can be charming, outgoing, and gregarious in group situations, I constantly have this feeling of being negatively judged. Although it surprises some people, I am an introvert. Spending time with people makes me uncomfortable and tired. To recharge my batteries, I need to be alone. I can “bend” my introversion when I need to be on stage or give a presentation, but it is always hard work.

Next week is Dreamforce and there are events being thrown all about town. One example is the MoMa party being thrown by the best event person I have ever known, Sandra. (Those who know her, know this is true) I could go to the party, but all I can think about is how tiring it would be. I know I would meet up with colleagues and friends and probably have a good time. I also know the artwork at the MoMa is terrific. However, on the other hand is my social anxiety whispering negative thoughts into my inner ear.

Sometimes, the good guy wins this internal battle and sometimes the bad guy wins. You might be asking, “Glen, who gives a shit? Why aren’t you blogging about Design Tools and UI Patterns?”

Good question.

I guess the reason is that I want to give an example to the people who have social anxiety issues that you can still prosper and still advocate for yourself. I want to bond with my tribe, wherever they are. I often call them Misfit Toys.

If you want to be a great designer, you have to understand yourself and others. If you are a misfit toy, there is always room on my island and I would be happy to help.

]]> 0 7156
Startup People Thu, 02 Nov 2017 23:28:02 +0000 Continue reading "Startup People"

What makes someone a really good employee for a startup?

I was at a company culture outing a few years ago (small startup) and some people said they wanted to work there because they wanted to be part of a rocket ship. They thought the previous experience of the leadership team was such that the company would obviously be part of a huge new success story. This really freaked me out at the time.

Every startup is exactly like a rocket ship, except that there is no place to sit, no engine, no wings, no navigation and no idea how rockets work. In other words, it’s just a dream, a vision of the future. It’s not a rocket ship at all. You don’t want to hire people who want to be on the ship. You want to hire people who want to BUILD the ship, because it doesn’t exist yet.

Imagine you build half a ship and start flying it into space and then realize that you completely forgot oxygen masks and everyone is going to die in moments. You want people who can build an oxygen system out of random parts, while flying a thousand miles an hour. You want people who climb out on the wing and jerry-rig a new kind of engine just because it is needed at the time. You want people who think quickly, collaborate together and figure it out. You don’t want the people who manage a large organization effectively. You don’t want solid B+ workers. Each person needs to be the A-Team, with a specialty and a mentality of working through problems.

We all know these sorts of people. They create systems from scratch. They find the one vendor who can unlock a huge use case. It’s not scalable at all and won’t survive the long-term growth, but it gets the job done in the short run. A startup needs these people desperately. You don’t break out of orbit without them.

Of course, as you grow and get into orbit, you need a completely different set of people. We all are perfect people if you just adjust the situation and timing. Are you in the right position at the right time?

]]> 1 7150 Removing Backgrounds from Photos Tue, 31 Oct 2017 17:31:21 +0000 Continue reading "Removing Backgrounds from Photos"

]]> I have been an ongoing customer of Photoshop for the life of the product with steady upgrades every year. However, today, I canceled my Photoshop subscription. My main reason is that I just don’t use the program frequently enough. I basically use it to crop images or eliminate the background on photos. It’s not like I am an avid photo manipulator or a creative services production artist.

I Googled Photoshop replacement and found two options that look fine to me. and GIMP. I am trying the development version of GIMP right now. It’s taking a long time to boot up for sure. OK I’m in.

I hate it.

Ok to be clear, my use case is simple. I want to take a photo and remove the background. Here is the original:

In Photoshop, this is pretty easy with their selection tool. I tried in GIMP, it took a while to figure out the method. (Yes, I looked in the help system) The magic selection tool has thresholds, but I found it very difficult to find the edges in a way that wouldn’t take me an hour per picture. I gave up after ten minutes.

Next I tried Paint.NET. It’s a much smaller download and a nicer looking interface. It also had a magic selection tool, with tolerances. I followed their instructions but found it extremely hard to manage. You have to drag the tolerance and keep adding to your selection.

Finally, I just googled: Remove background from photo. Do you know what came up?  My old friend Microsoft PowerPoint. It has a tool called Remove Background under format.

First one on the left. Holy Buckets! I had no idea this was there. Again, I feel like Microsoft has this awesome design tool that NO ONE KNOWS ABOUT!

It took about 20 seconds of fiddling and voila.

In fact, I could have reverted to the original image at any time. It works like “crop” – non-destructive on the image. See, I can keep the rock below.

I could have messed around with the bottom a little more to make it smooth, but this was fine. It’s not a perfect feature. It could use a tolerance spectrum to make it less/more sensitive. However, this is WAY more power than people realize is inside PowerPoint.

Good on ya Microsoft!

]]> 2 7144
A proposal for improving artboards in design tools Mon, 30 Oct 2017 16:31:16 +0000 Continue reading "A proposal for improving artboards in design tools"

In Sketch, Figma, Adobe XD and others there is this concept called an artboard. It’s basically putting all of your different screens on one mega screen and you organize it as you see fit. You zoom in and out to go to where you want to go. Unfortunately, although its the new cool thing, I find the usability to be terrible. Here is a picture of my current project.

On the left hand side you have your different artboards (or Frames in Figma) and a tree of all the different content. I have an alternative proposal for all of these design tools. Introduce a new object called a “Page” which can contain one or more different artboards. Show one page at a time and organize them in a tree on the left. Here are the benefits:

It’s slow to have all those layers on the screen at the same time. I don’t need it. I don’t need to scan through them. I work on one screen at a time. By optimizing the content this way, you are loading less information into the browser and can make things work faster.

Linking the prototypes
One might ask how you link the screens together in prototype mode if they aren’t on the same screen. My answer is simple. Just drag the line into the tree and link that way. Let me show you my project with the links turned on.

Are you seriously telling me that this is helpful?  Oh, but wait, maybe if I just turn on the links for a single screen?

Still not helpful!  By having the links go to the tree on the left, then I could collapse the tree nodes to simplify my view.

Finding the screen you want
Once the project hits a certain size, I can’t find anything anymore. Having pages lets me organize my thinking. I would have sections of the application and probably one more layer of sub-sections. Then I would have each use case flow on one page each. Then my single flows are easier to scan and my sections are organized together.  I am planning on moving my artboards around to see if I can do this better, but for now, it’s pretty hard.

This really isn’t any better. I find myself wanting to put giant labels for the sections, which doesn’t help anyway

There are other minor benefits, but I think it would a major improvement in organization to have pages (and sub-pages) that separate the content in the tree. I would hope that this would actually make the products easier to scale in a performant way.

Sometimes I feel like most designers are using these tools for really simplistic projects, like a basic mobile app. I make big expensive software. I need a design tool that works for many screens.

]]> 0 7137
Design Tool Sadness (2017) Sun, 29 Oct 2017 00:16:24 +0000 Continue reading "Design Tool Sadness (2017)"

I want the best of all my tools. Here is my perfect mashup:

  • Powerpoint
    • Table Editing
    • Text formatting
    • Ease of use
    • Storyboarding
  • Figma
    • Symbols
    • Constraints
    • Concurrent editing
    • Cool-factor
  • Adobe XD
    • Performance/speed
    • Large community
    • Stable financial resources

Yesterday, I was trying to wire up the prototype of the system I am working on and Adobe XD was sucking so bad that I literally screamed. Their symbols are garbage. Who the fuck thought that changing a symbol on one artboard should change it everywhere?  You can’t see the changes you are making and don’t realize you fucked up your whole system! I gave up and switched back over to Figma and started re-creating from scratch.

Today, in Figma, I was trying to make a basic table. It literally took me hours of figuring out the perfect way to set up the symbols so I can make other kinds of tables semi-quickly.  In PowerPoint it would have taken under a minute. In Figma, even with the symbols, each table will take a long time. In Adobe XD, they have this thing to “Repeat Grid”. It’s novel, but it totally is inferior to a simple table object. PowerPoint has had this for 20+ years. Why is this so hard?

So for today, I am back to Figma.

The whole things makes me sad. Why are design tools so messed up? Why doesn’t Microsoft make a designer friendly version of PowerPoint? Why can’t PowerPoint use Google Fonts to embed fonts? MS Office makes BILLIONS of dollars. Why can’t they improve it??

I seriously wonder how big the engineering teams are for Microsoft PowerPoint, Figma and Adobe XD. Are they all the same sizes? I hear that Figma has some good stuff in the works for the end of the year. I am hopeful.

]]> 0 7134
Designing your prototype structure Thu, 26 Oct 2017 16:58:04 +0000 Continue reading "Designing your prototype structure"

It’s rare that you get to build a system from scratch. The early decisions you make will stick around for a long time. Last week, I built a new design system for my new job. For this project, I chose Adobe XD over Figma. When Figma releases new performance enhancements, I might change my mind, but its Adobe for now.  I refactored it a few times and have been thinking about the structure.

DISCLAIMER: I don’t think I have all the answers. I am doing this on my own and no one has shown me best practices. I am learning and exploring by doing. If someone has wisdom on this, please let me know

For explanation sake imagine you have the following general frame of an application.

In Adobe XD, I have the following tree to make the above frame.

Horizontal Rows vs. Columns
As you can see in the above structure, I broke the frame down into columns. That way, in theory, I could change the widths of the columns and resize the areas. Unfortunately, Adobe XD fucks this up pretty badly. It scales everything rather than allow me to lock the height/width of certain elements. Figma constraints definitely help there.

If I structured it as Rows it would look like:

Not only is it a little longer, I STILL need to break down the columns just to keep track of which section is which. I also never move the height/width of the rows. The row is always 100% wide and the height doesn’t really change.

So my learning is that the first structure (Column Structure) makes the most sense. However, the lack of constraints certainly makes resizing difficult.

There is a whole other set of decisions based on what things should be symbols and what shouldn’t. I’ll have to blog about that another time. Adobe needs to make some serious headway on their symbols. They suck right now. Anyway, there is probably 3 people in the world that this blog posts helps, so there you go.

]]> 0 7127