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.

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.

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. Paint.net 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!

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:

Performance
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

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

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.

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.

Figma or XD (again)

I’m all set up at my new desk. I have a riches of monitor space. They are attached to arms so I can lift it up and show the work to someone standing next to me. My new laptop is the Dell XPS 13-9350. No USB port! Crazy, but its working well so far.

I’ve been working in Figma designing my new product, and I just got an email from Adobe announcing their 2018 line including the new Adobe XD. I am still so torn on which tool to commit to.

On the one hand, Figma has concurrency, constraints and a good component library.  On the other hand, Adobe is going to pour resources into their product. They already have the library somewhat matched.

If I take the long view, I should choose Adobe. They are going to win the war. They are too big with too many resources.

If I take short view, Figma is better now and I can always learn Adobe later.  However, I know me and I tend to stick with one tool for a long time.

This is a hard choice. If Adobe had their concurrent designing worked out then I would probably switch now. I am going to install XD now and just play with it for a few minutes.

I just noticed that it’s a 7-Day Trial.  Hmm. $10 per month or $119.88 a year. Are you serious Adobe? A 12 cent discount?! This bullshit alone makes me want to stick with Figma. That’s just lame. It would have been better to not include an annual option at all.

Sometimes Adobe makes it so hard to love them.