So in the last #buildingathing post, I described the general process from ideas to mechanics of working with Rails to make workflows that I wanted.

The whole point of that phase was just blocking in the big pieces. Do I have the pages that enable the workflows that I want. And underlying those workflows are "love letters" that I imagine getting from people who have a good experience with this (or at least a tolerable one, given that job hunting sucks so hard).

Anyways, I'm not going to pretend I'm an awesome designer here. I have a few ideas that I've already done, and some that I have to think about more. At this point, I'm almost not embarrassed to show it. I guess that means it's ready to talk about. Here are the ideas that I'm working with.

A Mess to Start

Without iteration, I would be completely useless. As a programmer, I don't write the best code the first time, so I tried to learn as much as I could about refactoring. It takes the pressure off of getting it right the first time, and I've learned to go through a similar process with design.

So you start with a mess. That's fine. I'm not sure how many "real designers" nail it the first time. I certainly can't. This design pass is the first attempt to somewhat clean things up, and it still needs work.

The first thing I ever read that made sense to me as a completely non-designer was this. It's a very accessible intro which reminds me of Gestalt principles, which is a bit deeper.

Anyways, these ideas of grouping things together are pretty timeless and applicable. It's also fairly easy to nudge things around in html, so I haven't bothered to open up some of the design programs I use (sketch, affinity, photoshop). And honestly, this keeps designs more realistic. When something involves complicated html and css (or even JavaScript) that isn't essential to the workflows, it's not just a complexity problem in the moment. It will be harder to change later, and I would say more likely to break actually (or not be supported by some device, browser, so on).

At this phase, and ideally later as well, custom tooltips, pop up modals, carousels, etc. are bad, even if they look good. Similarly, any heavy duty plugins or frameworks that require ignoring or reimplementing basic web functionality (buttons without cursor change on hover, form fields that you can't tab into, and similarly broken by default bullshit) should be avoided.

I desperately want to see some evidence that the UX afforded by some of these gadgets actually contributes to anything other than people feeling clever.

Simplicity

Ok, so as far as the stack, I'm trying my best to just get by with HTML and CSS. When that became a problem I introduced a little JavaScript. When that started sucking, jQuery. For the large scale context switching interactions though, the pages are going to load. The URL changes. It's fast enough. Do I need a caching solution and to think about maintaining a complex model of the data that is on my screen? Hell no.

I know this is getting a bit ranty, but seriously, look at the performance and experiences you're getting lately. The cracks are showing. You can find sites that limp along for years that are clearly half backbone or something, and half react or something. You can see sites that have spinners but aren't fast. You can see sites that are missing little web conventions you're used to (like "enter" to select an option in a form field). If you're pushing the web to be awesome, there are two options: first, make it about documents for people to share. Second, make your site as good and fast as a game. You're either supporting workflows or entertainment. The in-between framework solutions fail at both. Are you "delighted" by the link looking squishy when you click on it? If so, your standards for delight are shit, and will look cheesy as hell in like 3 years. Increase the page weight, and you're making it slower (and more expensive) to share documents. And I honestly can't imagine this "delight" is something people generally experience on the web. Have you fucking seen movies and videogames right now? That's the bar, and we're nowhere close.

Phew. Ok sorry. You still there? So... simplicity. A few things I've heard from Tufte are really good. His treatment of data and graphs strips everything unessential. Do you need those grid lines? That label?

So in web design, I'm looking for things to remove all the time. But in this project, I started with lots of borders and hr tags. Some have stuck around so far. But I'm on the lookout for where spacing is a better option for things to feel more like a group.

For fonts, I've been sticking to arial for now. It works fine everywhere (so no weird page style refresh) and it's basic. I haven't yet simplified the types of fonts I have (multiple styles, colors and sizes going on), but that's going to come together as my palette tightens up. I haven't looked into other fonts yet. My workflows don't care at the moment, and this has to be iterative because I don't have the upfront vision for this.

Graphics

I put them together in a few minutes with sketch. After playing around more with photoshop lately, it's really interesting to use a more constrained, vector-based tool. It was enough for me to see where I wanted them. And I think I like the idea of having the main pages all available up top like that for now.

After talking a bit with a friend today, I think making things more line-based is the way to go. I could take this further and just use a custom font thing (like font awesome), but I only need a few, and I'd rather not have the most important controls on the site be off-the-shelf.

Either way, the graphics now are working for now.

Grab Bag

Don't have too many colors
Don't have too many fonts
Don't introduce contrast if you don't need it (eg. a border around a box that itself has contrast with the background)
Most colors shouldn't be highly saturated (probably just one or two) if you want any subtlety in the scheme (and not look like legos or google)
White and light gray almost always
Circles and squares of the same width are not the same "weight"
Alignment on a grid doesn't necessarily look aligned
Almost aligned things look like mistakes
Almost the same color things (can) look like mistakes
Almost the same size things can look like mistakes
There are a lot of other styles than just size to make text indicate a hierarchy
Workflow first

Fix the Ugliest Thing

This is the main approach I've been taking. When I start to think it looks good I stop. It's likely not that it's good, it's that I've gotten used to it. Then it's time to code for a while, until I can see problems in the design again. Always good to have a friend point out things I can't see as well.

This Design Pass

So this has been the basic approach. I can:

Simplify
Group
Unify
Accent

I can choose any of these general ideas, and apply that lens to any element or the whole site. The design process has nothing to do with tools.

The Next Pass

Now that I've followed my instincts a bit (and I'm not quite out of ideas yet), I can have something that feels ok to me. That's enough to code and UX test against. I'll likely have another pass like this (mostly instinctual, to me, as in what is in my head) before I start to look at references.

For me, reference gets easier once something is close to good. Too far away and I'm unlikely to end up with anything that doesn't feel like a complete rip off. The question changes completely from "how can I make that?" to "I chose to make this element this way, and their choice seems stronger. What did I miss?"

The more specific I can critique myself (or others can) the closer to good it is. The ugliest thing (to them) might not be what you expect. And the odd paradox about the ugliest thing is that it as everything is improving, the ugliest thing stops being so inherently ugly. However, it actually stands out more because other things are looking good.

So the next pass is looking for ugliest things and probably having ideas on how to fix them. In the pass after that, I'll be out of my depth and need reference.

Mechanics

As far as how I'm going about this, I'm not worrying about it. The code is not complex enough to be concerned with organizing my css for instance. I put it in the main css file or inline it in the html at will.

When that's too slow for testing, I'm adding it directly with the developer console.

It's Perfect

Just kidding. It looks like hell, but that's really ok. There are way more people who can make things iteratively than those who can nail it their first time. I'd rather let that first group know they're not alone than appease the very smart/critical (I feel this group doesn't actually overlap all that much by the way). My email is wide open, but I don't have comments here. I honestly don't care what Joe Commenter has to say. I need to know what references can contribute to the design. I need to know the real pain points people have in job hunting so I can imagine the love letters and build workflows to support them. I don't care if I used the wrong [there, their, they're]. I'm still working on a ton of "ugliest things" I can find on my own.

I'm increasingly unfazed by the specter of critiques of things not being perfect. I don't even (mostly) feel the need to qualify myself as "not a real ________" anymore. I've never seen someone describe making a site in this much detail, and I think that's more valuable than presenting myself as someone who makes things look easy.

There are about, I don't know, a hundred(?) 15 year olds on youtube that are collectively better at whatever their thing is than most people will ever be. People have been drawing these comparisons forever: "Mozart was __ years old when ____" or whatever. It's never been more obvious, but it also doesn't matter. We'd be so culturally poor if we only let a hundred "true geniuses" run things. Try to find anyone who fancies themselves a Platonic "philosopher king" and hoo boy, please let me know about their leadership style.

Anyways, for this project, for me, it's love letters, workflows, instincts, references/critiques, and iteration.