Programming Throwdown - Basics of UI Design for Engineers
Episode Date: July 13, 2019Surprise! Weekend episode :-D Every piece of code you write is either going to be for computer-to-computer interaction, or for human-machine interaction. For the latter, how do you make your ...interface easy to understand and use? Erik Kennedy, independent UX/UI designer, dives into user interface (UI) design. We cover the best tools for making quick prototypes, common design mistakes, and his journey from software engineer to freelance designer. This episode is a great way to get excited about design and has plenty of resources for first-time designers. Check out the show notes for details! Show notes: https://www.programmingthrowdown.com/2019/07/episode-92-basics-of-ui-design-for.html ★ Support this podcast on Patreon ★
Transcript
Discussion (0)
programming throwdown episode 92 basics of ui design for engineers with eric kennedy take it
away patrick hey everyone uh we're here with another interview episode. And we've got Eric on the call. And we're got what I think is going to be a pretty
exciting topic, something I don't know so much about. And it's a really big field design. And
even just UI design, it's always been on my list of, I feel like I've made a few crappy UIs just
to get past something. So yeah, definitely. Yeah, I think we've all been there before. So hopefully we'll get some illuminating tips here today. And we have our guest, Eric,
Eric Kennedy. Why don't you go ahead and introduce and tell the folks a little bit about yourself?
Hey, yeah, thank you. So my name is Eric Kennedy, and I am a freelance UX and UI designer. And I also teach UI and soon to be UX online. But I didn't start
there. Like I actually started from a dev background back in the day. I really hadn't
programmed at all until I got to college. And then freshman year, very first semester,
there was an intro to programming course. And I tried it. And I loved it so much that I ended up
switching my major over to software engineering and doing some internships as a dev.
But basically, I mean, I kind of drifted my way from there.
Like, I really liked developing, but the thing I liked about programming was just doing these little side projects where you kind of, like, thought of an idea.
You, like, cranked it out.
You know, you worked until 3 a.m.
It was just you.
You didn't need anyone else's permission. You didn't need anyone else's approval. You just, you could turn whatever you were
thinking of into a reality. And I love that. But then doing a couple developer internships, I was
like, man, this is, it's a little more like industrial scale than I thought. And it just
wasn't quite the same. So I eventually shifted over to PM. And then from there, realized that
most of the things I liked about being a PM were things like wireframing new features and talking to users, doing user research or doing usability testing.
And at some point, it just sort of dawned on me like, hey, there's a word for doing these things.
It's not called being a PM.
It's called being a UX designer.
So then I jumped into UX design, and I was doing that freelance. And very
early on in the course of doing UX design, I'd have clients who would look at these wireframes,
right? Because as a UX designer, like one of the final deliverables I'm going to be handing to my
clients are these wireframes of their sites or their apps. And it's, you know, they're just these
black and white drawings. They're kind of sketchy.
You know, maybe they even use Comic Sans as the font.
But the point is they just sort of get across,
like, here's what's on each page of the app.
And here's how kind of everything flows together.
And like the goal is for it to be usable and simple.
And it doesn't look very nice, right?
So my clients would see this and they'd be like,
wow, this is cool.
Like, this looks good.
But hey, any chance you could, you know, make it look like an app?
I'd be like, ah, shoot.
This is so outside of my wheelhouse.
My first attempts at trying to make an app look nice, look professional, were just disasters.
So I went on this multi-year quest.
I mean, it's still continuing.
But I went on this multi-year quest where like any good freel's still continuing, but I went on this multi-year quest
where like any good freelancer,
I said, yeah, yeah, I can do that.
I can do that.
And then like frantically scrambled
to try and figure out visual design
like while doing other UX projects.
And it just kind of took off from there.
Maybe some of your listeners
have stumbled upon an article I wrote.
It was back in 2014 at this point
called Seven Rules for Creating Gorgeous UI.
And it was sort of like the first stab
at the most important things
I had learned about visual design.
As a total visual design beginner,
as a much more like left brain
analytical style thinker,
it was just kind of a couple things
that I had picked up on
that I couldn't find anywhere else,
just like really tactical advice.
So I was like, okay,
I'm going to publish this out here.
And then I've continued writing about design since then.
Definitely do UX and UI and even a little bit of front end development for all my clients
now.
So I really like that.
So, yeah, that's kind of how I stumbled my way into design through like every other subfield
in tech.
Nice.
So I have like a thousand questions, but OK.
So first of all, so you mentioned UI versus UX thousand questions but okay so first of all so you
mentioned uh ui versus ux so how do you kind of uh well first of all what do they mean and what
do you mean by the difference oh geez yeah this is like a bad joke in design because it's like
there's ux designers ui designers ux and ui designers product designers ux researchers
uh what else we got am i missing one interaction. There's so many. It's like, what do all these terms mean? I try and keep it really simple. I say UI is how it looks, user interface,
that's how it looks. And UX, user experience, that's how it works. Is it usable? Is it intuitive?
Is it simple and easy to use? So yeah. So you mentioned that, you know, you would try to draw
these sketches of what it would look like that you call them wireframes. Can you maybe like describe so I've come across this before, but like, what kind of
tooling do you use? And what it looked like? Were you actually sketching on a piece of paper? Or how
are you getting started doing that? Oh, yeah. I mean, it always starts on paper, right? Because
paper is the cheapest way to throw it like it's the cheapest way to design something,
you can make a draft that you can visually evaluate yourself or show to one of
your teammates. And you can do that in seconds, right? You can like get that validation of is
this what we want to do even at the highest level or not. And once you've sketched a bunch of stuff
out on paper, you know, it could be a couple ideas, it could be like 10, 20, 30, you're like,
all right, now I think I have a good enough idea of what I want to go and put in a digital version of this wireframe. And so for those digital versions, back in the
day, I was using Balsamiq. I've kind of transitioned over to using Sketch now, just because I also do
the UI design in Sketch. But either of those apps are just fantastic apps. So for someone who's
never built a UI before, so they do some coding, and all of a sudden they realize, oh, I really
need a graphical user interface here rather than just command line. Although command line is great. What is the first
thing for them to try doing? Should they sit down and start trying to do wireframes or should they
try finding a framework to start doing all that in? Yeah. Well, I think fundamentally the wireframes
is more important than the framework. Frameworks are great, but they almost come a little bit later in the process.
Okay.
So if you're taking the design process as a whole, where let's say you have some app, it's your side project, and you realize, okay, I'm officially in over my head.
I need to make this interface.
I've never really done this before. definitely doing those kind of low fidelity sketches and wireframes and just getting a sense of does this does you know if i lay things out in this way can i look at the most important tasks
and each of those most important tasks are actually they like almost could not be made simpler they
don't require any extra taps or clicks they don't require any extra thinking you just make them like
as dead simple as possible and then the things that are important, those can kind of fade in the background.
But that's what wireframes help
with. When you get a wireframe,
kind of run through some of those things in your
own mind or show it to someone.
Be like, hey, if you saw this screen
and we wanted you to create
a new user, how would you do that?
A tap here. Wrong.
It's like, shoot, okay, now I know I need to make
that easier to see or whatever.
So that's kind of where it starts.
And that's just the UX side of things.
When you get to the visual side of things, then it's a little bit different.
And I can talk about that too.
So I just did a look-see real quick.
So Sketch is $100 a year.
Unless you're a student, then it's $50 a year,
which doesn't seem too bad if someone wants to try it and get started.
I mean, it's cheaper than Photoshop.
Oh, yeah.
And I think it has a 30-day free trial, too.
I might be wrong about that.
Yeah, you're right.
You're right.
So how do you draw the line?
So you've kind of alluded that there's this difference between the interaction and the look.
And you kind of described your arc through this giant collection of topics and fields.
So someone just starting out, how important is it for them to mentally kind of make the distinction
between the sort of style, the look versus the interaction?
And which one do you think is better to go focus on first?
The interaction is better to focus on first. I mean, I think there
is a degree to which if someone sees something that looks really just awful, they'll like next
close the tab move on, they're not going to go download that app because they just don't think
it's because you're signaling so strongly that it's just kind of like unprofessional or like,
you know, if you if you give off these indicators in the visual design that it's
not very high quality, like there was not a lot of professional experience put into something,
it could drive some people away unless they really need and want that app and are otherwise
excited about it. So there is some of that. But I think it's almost worse where someone goes
through the, you know, your site looks good enough and they download
the app and they open it up. And then you make the tasks that they're going to be doing again
and again in your app. You make those difficult and unintuitive and they just can't figure it
out. That's almost worse. Because then they got so close and they're still going to end up
abandoning you. So I think to be clear, making it usable, if people can't use it, like, it doesn't matter how look it, how nice it looks. Yeah, so in that sense, the usability and the UX are primary. kind of field that I've practiced most in. To hear you talk is so interesting to hear how different
it is. So you mentioned, you know, first acquiring a user on a website, and then getting them to take
some action, like download the app and do something and how thinking about that whole process. And
it's literally so far away from anything that I do. It's actually very interesting to just hear
how even though you know, oh, we can both be in a similar field, and just have such a different
approach. So, you know, for me, it would be a developer, you know, we can both be in a similar field and just have such a different approach so you know for me it would be a developer you know getting an application i wrote and if it only had a command
line interface that would probably be preferable or perfectly acceptable for them or it may just
be computers calling it and to hear the amount of different things you talk about somewhat sounds
overwhelming like oh i need to make a website to convince someone to use this yeah human beings
are messy so how do you i mean do you feel
that process so like you originally you know we're starting out as a coder and did some work there i
imagine maybe a little similar to what i described and then moving out and sort of doing more on your
own and being responsible for that whole package do you feel like that was a really difficult change
for you to do or did did that come pretty natural you? Jeez, you're making me think back.
I think, you know, honestly, I think some of it was natural.
I've always, even though the kind of the UI art school stuff seemed a little bit more foreign to me when I first started it,
the whole like psychological challenge
and kind of putting yourself in the mind of someone
who's never seen your site before or seen your app before,
I've always really enjoyed that.
That's just been kind of this like deep mental challenge.
So I think I kind of slid into that very naturally.
And also, I mean, like I said,
I also enjoyed the other parts of being a UX designer.
Like, and we could talk about usability testing too,
but like when you do usability testing,
it's almost painful to watch someone,
to make something that you think is so
good, so usable, so simple, right? And then you watch a video or you watch in person and someone
struggles with it and just consistently misses everything you tried to make obvious and clear.
And it's just, it's almost masochistic, but I kind of love that because it's like,
you're not so smart. You really have to meet them where they are. And when I say you're not so smart, I'm referring to myself. I'm not referring to the user. In some sense, if you're not so smart. Like, you really have to meet them where they are. And when I say you're not so smart, I'm referring to myself.
I'm not referring to the user.
In some sense, if you're going to be a good UX designer,
you have to realize that it's never the user's fault.
Like, basically, coding docs aside,
like, normal software just should not require manuals.
And it's really sad to watch people, like,
blame themselves when they use bad software to go,
ah, dang, I did the wrong thing.
I'm so bad at this.
I'm so dumb.
It's like, no, no, there should have been a designer doing their job because there are
better ways to design software.
So that's fascinating.
So I mean, those sound very valuable lessons, right?
And stuff that I would probably be very embarrassed if someone had to sit down and use stuff I
wrote.
But so how do you, like, what would you go about in the beginning so you're early you
don't have like this isn't your thing do you just like show it to friends and family like how do you
get that user feedback yeah i mean so one of the blessings of working on little side projects is
a lot of times you are the user and if you are the user you already understand some of the things that your users are going to know and not know when when you make this app for them um and you'll
also be in a community of people who are kind of like similar mindsets so a lot of times yeah just
show them to like friends family co-workers whoever it is uh like kind of doing that sort
of guerrilla user testing really isn't it's not like you need to go do some official study and like,
you know, it's nothing too fancy.
You're just trying to get any feedback as to,
like, is this basically usable?
Or are people going to like absolutely struggle
from square one?
One thing, it seems like a bit of a catch 22
or chicken and egg, I don't know, one of these things,
they all sound the same to me,
but where, you know, if you deploy version one of your app, and the user experience is really bad,
then no one will try version two. But that means you can't make it better. Like,
how do you kind of keep from getting trapped in that?
Yeah, well, I think, again, there's something working in your favor, which is the people who
are going to try version one anyways, are going to be the most desperate people to have that
problem solved so they might be willing to put up with a little
more pain and yeah
it's like as soon as you identify there's
issues with version 1
release version 2 because if you're like
hey listen I heard y'all
there's a lot of problems with version 1
and we're fixing them like download
version 2 you're going to love it
then the people who are staying
with you, despite how unusable the app is and despite how difficult it is for them, they're
going to just fall in love when you have version 2. And that's only going to accelerate. So yeah,
it does seem like a chicken and an egg, but I don't think it's unmanageable.
Yeah, it makes sense.
If someone doesn't consider themselves a sort of artistic
person or someone who uh would would not necessarily find themselves in the same circles with with kind
of artsy people does that kind of preclude them from this work do you think they can still make
progress is that an acquired skill or something you're born with yeah well i think you absolutely
can make progress with it like i'm definitely living proof of it i can't i can't show on a podcast my first design but they look nothing
like the stuff that i've been doing very recently um so in that sense yeah you can absolutely um
can absolutely develop at it and i think what's what's cool and what no one really ever told me
is it's if you read a lot of design writing online it just seems like kind of artsy fartsy
for lack of a better term like a little it's a little it's oh it's subjective oh uh you know
there's still all these mystical considerations you never really know what's going to work it's
creative it's open-ended and it's like okay i guess technically those things are true but i
think you can make a lot of traction on visual design just approaching it analytically.
So like one exercise that I would highly recommend to anyone who wants to devote some time into visual design to get better at it, just because they anticipate, hey, maybe I'm going to have a side project a year for the next decade.
Or maybe I want to start my own thing. And I really, you know, when that time comes along,
I really want to be able to do the, like, just ace the visual design of it until I can hire a
designer. One exercise I would highly recommend is do copywork. Okay, and I can send you a link
to an article I wrote about this for the show notes. But copywork is just, it's, it is the
practice of recreating a design
that is better than you could do and you recreate it pixel for pixel so if they use like size 32
helvetica bold or whatever like you put that helvetica bold on their exact same font exact
same location you can use an app like sketch or i mean technically photoshop or figma or whatever
to do this but the idea is just
by recreating these designs that were created by professional designers at least presumably
you're going to be unconsciously picking up all these little tactics about what they do so I have
all my students do this exercise and it's amazing the things that they recognize they're like oh I
never realized how much alignment matters and it's
like yeah that's absolutely true it's mind-blowing how important alignment is you would just never
expect it until you uh until you start to do it or um you know oh i tried to make this shadow for
this element and it totally wasn't working until i realized they had a shadow for the ambient light
plus a shadow for the directional light or something like that that's a little that's a
little advanced that's a tiny detail.
But it's just the whole gamut of things.
In this article I wrote.
I remember mentioning doing some copy work.
On a site for Epicurrence.
A design conference.
And one thing that this site did.
Was it had like this size 300 font.
Where it was just a couple letters but it was like
almost an artistic element and yet it was type on the page there were letters and i was like wow i
would never have even thought ever to make something at size 300 and yet it looks really
cool when they're doing this um so there's just yeah you just pick up these little tips and tricks
and things that you never would have expected and that's what's awesome about copywork is then any
of those little strategies that you that you find in doing expected. And that's what's awesome about copy work is then any of those little strategies
that you find in doing this,
you can apply those to your own designs.
And you start, it's just like by osmosis.
You're like, okay, here's the lessons
that this person utilized when doing it.
And sure, you're gonna miss some stuff.
You're not gonna understand the rationale
for every single decision the designer made,
but you're gonna catch so much more
than if you just look at the design
and try and be like, okay,
I wanna design something like this. It's good luck that is tough that's a really awesome
insight because i have recently for some reason fallen into a rat hole of listening to music
theory videos on youtube or watching sort of music theory videos and they say something very similar
like basically learning to cover your favorite artist or you know play classics and almost
you know sort of exactly the same insights you're you're sort of giving but as an engineer i find that now i'm trying to think of
like kind of why it's so different which is you know when i see a video game which is how often
people you know get started into interest in coding the amount of things you would need to do
to sort of make a all the pieces of doom work from scratch is such a mount everest that you wouldn't even
really attempt it you might attempt it but you would do terrible at it so i guess like maybe
it's just the level of complexity like i'm not sure like the behavior all of that but it's not
a common practice to sort of sit down and copy a piece of code you really like uh or at least not
at the level you're talking about this is just a hunch but i wonder if you could scale down that
task so like take something like clean coding practices i wonder if you could like find a well just one file it
doesn't have to be the whole project but you just find one file where you're like whoa this was
really well written it's super clean i'm going to like recreate it line by line and just kind
of let that soak in like see how they name stuff see how they whatever yeah that's a good point
yeah that makes sense i think a lot of the a lot of
the coursework you do in university is like this right it's like implement bubble sort
implement quick sort and you know obviously those things have been done to death but
but it's not just trying to train that but i feel like the difference is slightly
they're uh whatever you would call it and i guess like martial arts like katas or whatever like
they're specifically for the purpose of learning those things you're indicating they're not sort of like copy a masterpiece or copy a piece of inspiration like no one will be
inspired to continue encoding by learning how merge sort works yeah maybe one person but not
many people yeah so that makes sense yeah i wonder as we get more and more people uh in the field
right like trying there's always this push to you know, enable people to do coding just in various aspects. I wonder if we'll start to have to turn to finding ways of getting people inspired where they really can make about that, like, because that's how it feels at first to just be like, wow, this is this thing I made is completely derivative. But so when you're first starting out in design, and I mean, heck, even when you're when you're much more advanced in design, it's like, I highly doubt I'm doing much of anything that I haven't seen somewhere. It's just that the number of sources that I draw from is so large that it's not like
copying off of one thing. It's copying off of like 20 or 30 things for just, you know,
some random website. And that's like, that's what creativity is mixing and matching to make
the most of whatever the problem like to, to make the best solution to the problem that you have.
So if you're just starting out in design, yeah, it might feel kind of like,
oh, I'm just like copying off this one thing.
Well, okay, find more things that you like
and try and figure out the different aspects
that you like of each one
so you can kind of combine them into one.
I don't recommend just like going to stripe.com
and being like, wow, this looks awesome.
I'm going to use the same exact buttons,
the same exact page brands, you page. Don't do that. But yeah, it's okay to really
like other styles and to combine aspects of those. And one other thing I've heard,
and I tell my students this too, is if you're worried that you're too much aping one person's
style, you're copying off one style too heavily, it's like okay look at that soak up all the stuff that they
did good that they did well close that tab or close that app or whatever and then the next day
begin your design and don't look at it again don't look at the inspiration so like design but only
through what you kind of soaked up overnight not like you're not allowed to like just look at
theirs and then make yours then cross check theirs and edit yours or whatever so that stuff will all help with if you think your designs
are like too much based on one person's style yeah that makes sense what is a like a website
or an app where you just said wow that was unbelievably like novel amazing design uh
recently yeah yeah recent one.
So I actually just wrote a blog post, or it was an email to my newsletter, but then I posted it as a blog post too.
And it was on a health website called, let me pull it up here real quick.
Where is it?
It's crazy that I can't remember the name of it, and yet I wrote like thousand words about it foundation medicine so just foundationmedicine.com but this is one site that when I loaded up I was
like wow they did a lot of things very well now we're all going furiously on our computers oh yeah
it looks cool they start drawing those triangles on that lady's face yeah there's like nice animation
there's high quality photography the fonts are really nice like the thing i talk about in my blog post on this is um they kind of have this motif of hexagons
like you see this pattern again and again throughout the site and it kind of ties it
together but you look there's like this hexagon and the logo and then you look and they have the
they draw these triangles which of course make hexagons and then if you look at the fonts like
look at um see it kind of in the e or even the
shape of the s a lot of those lowercase letters are sort of shaped like hexagons more than ovals
oh yeah so and you'll see it you scroll down and you're gonna see it like with the little dna thing
or um under better care today there's a one and a two which are both embedded in just plain old
hexagons so it's just like this little motif comes up again and again and um i mean not only did they make a thousand other good design choices but one thing that's
very cool about this is they tie it all together and make it look very intentional and like act as
one whole yeah this is awesome so when you go to a website like this and like those things you
point out that's awesome because i wouldn't have even noticed that those fonts are subtly
angled until you point that out that their logo was a hexagon like i didn't
even notice that when i looked at it uh but i mean i agree you look at this you're like oh this looks
really cool so how do you sort of i guess i would call it bootstrap yourself up from like i have no
eye for this aesthetic you know i go here i'm like man okay i know when i see it like it looks good
but i wouldn't know how to sort of decompose this like is there a good method for sort of starting and what to
look at what to do i guess you were kind of mentioned you know trying to copy it and maybe
you would sort of figure it out if you tried copying it let's let's i mean let's back it up
even from there you want to talk about what you should do from day one because certainly the the
bit about the hexagons like that is not 101 level like design knowledge.
I wouldn't expect even my students to like just notice that going to some site.
So the stuff that really is kind of more foundational is I would say just analyzing when you see something you like, trying to analyze why you like it.
And also see if you can find examples that are kind of like, I don't know
if counterfactuals is the right word, but like they don't have that particular quality and you
don't like the site as much. Like try and find something that is critical to a particular site
looking good. So like one thing with this foundation medicine site is my guess is that
big face staring at me, that high-quality photo,
if I used a lower-quality photo that wasn't in focus
or that was maybe in color,
I think they're all black and white.
Is that true?
Yeah, that's right.
That that wouldn't work,
that it would look too much,
it would be too much,
or the yellow triangles over it would then look weird
and wouldn't stand out as much
and would maybe mess with the color of the person's skin too or something like that. You just wouldn't see
them as well. Yeah, it looked like acupuncture or something. Yeah, or you might. Yeah, it looked
like some terrible torture. Or I might hypothesize that, okay, here's this cool font. I don't even
know what it's called here. I'll just go use my what font browser extension.
It's GT Sectra.
Okay, GT Sectra.
That's cool.
What do I think works about this font?
Even if I don't recognize the hexagonal stuff,
maybe it needs to be a serif.
Maybe it needs to be a serif
because this has to have a very professional,
buttoned-up feel, almost like research-like.
And so just something that's one of those high-quality,
just a font that feels trustworthy and almost prestigious or something,
and delicate, that's what I want.
And I could go and test that by putting in whatever, Helvetica,
or even a nice sans-serif like Proxima Nova or Gotham or something,
which I think they use one of those elsewhere
on the page. And I could check. I mean, especially if you can use the little dev tools in your browser
and just kind of start swapping things out or mess around with the site, see what ruins it.
See what ruins the feel where you're like, oh, yeah, this isn't as good. And you can start to analyze.
OK, so this is what the what this is, what the the goodness of the design's appearance relies on.
It relies on this font being serif and large and looking this nice at a big size.
It relies on these photographs being extremely high quality and black and white.
One of the big things that you'll discover in doing this sort of exercise, like I mentioned it once before, but alignment is huge. Like you are almost certainly,
if you're a beginning designer, you are almost certainly underestimating how important alignment
is and how much you just need to align everything on the page. At least if you want kind of a neat,
simple, clean appearance. Basically every element will be aligned with at least one other element.
And when I say that centering counts as a form of alignment in that regard.
So centered or aligned with other elements, that's huge.
You could say similar things about white space.
I'm on a Mac, so I can just press whatever it is,
Shift-Control-Command-4 is the little hotkey I use.
Like I'm going to go take a photo.
Oh, my keyboard shut off.
Well, I think that's it.
And I can get a little measurer that'll say if you press that that uh hotkey you'll get a little it'll tell you how big of
a rectangle you're clicking and dragging on your screen and you can i use that to really quickly
make measurements of how big something is how tall is this header it's like well how tall is
a normal header took me a while and then i realized okay it seems like most headers are like on the order of 70 pixels um and maybe they'll get a
little bit bigger maybe if it's an extra space dot website they'll be bigger if there's a version that
is sticky when i scroll down the page it might be a smaller version but like 70 pixels okay just a
good place to start or like go look at um at some kind of a division of this page,
this foundationmedicine.com. It's like how much white space is between, say, the where it has the
one to comprehensive genomic profiling, and then that orange box below it. It's like, on my page,
that might be like 70 or 100 pixels. And until you measure that, here, I'm actually going to go see. I want to see what it is.
Yeah, one thing I noticed is the...
Ah, it is 180.
Okay, to be fair,
I'm looking at a different monitor.
It's 180 pixels of white space.
And so one thing is like,
if you were in Sketch,
or even if you were in CSS,
but you really shouldn't try
and do all your visual design from CSS,
disclaimer.
It's like, if you were in CSS,
would you write margin bottom 180 pixels like
that seems like an absurdly large number and as a beginning visual designer i would be like no
it can just be like 50 or something or 48 why not make it divisible but like um the point is when
you kind of design visual first and you really analyze what you like and and what seems to be
important about it you're gonna find all these things wow they align so much more than i thought wow they stuff in so much
white space and it's not even crazy um and so on yeah they made those two the the picture and then
the orange box are at different heights and that way it doesn't just make a big rectangle it kind
of keeps them distinct yeah they do that's true yeah this is this is awesome, it kind of keeps them distinct. Yeah, they do. That's true. Yeah, this is awesome.
And they kind of do that throughout, right?
Even their little link to their blog towards the bottom,
where there's no picture,
they have that same motif repeated with the little...
Yeah, right.
Yep.
And even the, you could say the same thing happens
at the very top where they have the header image.
It's like there's a white rectangle coming in
from the bottom sort of cutting off. It's a oh yeah yeah yeah so just hearing you sort of like describe
this i already feel myself uh brightening at the kind of interesting things you could go in here
and do and measure and i want to try myself and we we mentioned this a little bit in this sort of
warm-up before the show we were talking about uh this notion of like a place to go listen and just hear how designers talk. Like, do you have any good resources for
people or recommendation? I know you have some stuff. Are there like, who do you go to just hear
how this stuff works and how people think and what they talk through when they sort of decompose a
website or any related topic? Oh, yeah. Well, I mean, my biggest recommendation is well, let me
give the free one first. So I have a blog.
It's mainly about visual design, learnui.design.blog.
And there's a number of posts that really break down visual design in this kind of an
analytical way.
Like we've been talking about it right now.
We haven't, I would like to believe we haven't really been talking about anything that's
too fuzzy or crazy.
So you can go there and you can find a lot of stuff.
But also I have a course and it's linked from the same site, learnui.design. The name of the course
is learnui.design. And one of kind of my teaching principles in making this course was just letting
it be sort of a place where when a student logs on, it's a video course. So they basically look
over my shoulder for like 20 hours of video as I'm just kind of
narrating the stuff that I would think about.
And then all the videos are done in sort of a manner of like real world projects.
Some of them are directly based on client projects I've had.
Some of them are a little bit made up.
But the idea is each project tries to sort of talk about one particular skill that that
lesson is about.
So that is one option.
But certainly for just diving in right at the start, the free option is like, check out,
check out my blog. And as for like, where I hear this, probably it's like, I'm a freelancer. So I
am, I mean, I'm currently in my home office. There's, there's technically a couple designers
across the street from me,
but we don't actually talk about this stuff super often. So one of the biggest places where I hear
it is in my own, in the Learn UI Design student community. It's just a Slack group, but we've got
a lot of students now who are going out there and analyzing sites that they like and don't like,
and bringing back these little tactics, and hey, I noticed this, or I noticed that, or why does this look does this look so good or why doesn't this look good so for me that's where i get some of
this so for this field like you mentioned you know kind of like slack rooms or for other stuff you'd
hear oh maybe there's a subreddit where people do this or or something else do you feel like are
there sort of schools of thought here that people sort of fall into lines like oh analytical analysis
is really good or no no no you can't
there's no rules just break all the rules like are there kind of different factions within design
and how this works or it's pretty much everybody approach it in a in a similar manner i don't know
i mean maybe my answer is i'm coming from one end of the spectrum here like uh in that when i
learned visual design i was so frustrated where it's like, okay, I started out awful with colors.
And if you look at some of my first designs, it's like the two colors I would use would be kind of a yellowish green that in retrospect looks kind of pukey and like brown.
It's like you can't have two grosser colors.
And if you look at most professional designed apps, it's like I'm not designing like a theme for a sewer, right?
Like if you look at most professional designed apps, you're not going to see brown.
And you're not very often going to see yellow green. You're more often going to see something that's a bright yellow or a golden yellow or even just an orange.
And brown is really going to be an accent color at most.
It's hardly ever a theme color.
Yeah, I think at one point I noticed almost all the websites were blue.
Yes.
It just seems like Microsoft's blue.
Yeah, all the company websites seem to be blue well blue blue is we can talk about this too because if your
audience has a lot of like side projects where they need to pick a color for a logo or just
kind of go with a one color theme um that choice that choice is important and and so what's
happening is when people pick blue blue like so let me back up one second here okay if you google
for this stuff you're gonna find a lot on the psychology of colors. And as far as I can tell, all that stuff is completely bogus.
There's stuff that's like, okay, yellow means trustworthiness.
I don't know what it is.
Yellow means passion, right?
And then they'll show some yellow logos like Shell, like the gas station.
It's like, no, this is not yellow for passion.
This is yellow because it's a seashell
what other color would you make a seashell um and so it's like that stuff just didn't help it was
so frustrating and so i've tried to like analyze what works and and what doesn't work and only
write that kind of content and one thing i think I've landed on with this color,
picking a one color for your app,
blue is the safe choice.
Blue is a practical choice because in terms of the,
if you talk about kind of the natural luminosity
or the sort of the natural brightness
or lightness of a particular color,
it's like yellows are all very bright.
You can't have a dark yellow.
It just becomes brown.
We don't even have a thought for dark yellow.
That's not a thing.
But blues can really span a big gamut.
And blues can naturally be quite dark.
And that's really nice because it stands out from white.
So you can have, say, like a link be blue.
And even if you have dark gray text, a blue link is actually, it's going to hold its own.
It's not just going to be, like imagine if all your your links were yellow they would look like little gaps in the page if you
just had a paragraph of text with some links in it those yellow links would just if you squinted
they would just disappear so like blue is a very practical color blue is a very safe color it's a
very universal color it doesn't it's not like red red is the most eye-catching color that's probably
the most important thing to know about red so if you you pick red for your app's color, you're going to be
competing with every
normal red element in your page
every time you actually need to get a user's attention.
Every time you actually need to show them an error message
or kind of, you know,
maybe they filled out a form wrong or something
and you want to show a little message telling them that.
It's like, you're also competing with, if you have a
red header, that. And a red logo,
that. uh other red
elements interesting yeah it's just like it's like it's just shouting um it's like a miracle
that the youtube mobile app kind of works at all because they just have a ton of red and yet it
seems to work fine so yeah they have that uh you know if something goes wrong in youtube they take
to that page or it has a i think it says something like patrick you'd probably, but it says something like a team of monkeys is working to fix it. I mean,
they just, they just have to take you to a whole new website because yeah, you wouldn't be able to
see it. Yeah. Yeah, exactly. That's one way around it. Um, I remember when I was first working on
one of the color videos for learn UI design, I was like, how does Airbnb solve this? Cause they
kind of have, it's a little bit of a pinkish red and and it's not so saturated. It's not so rich. So it's not in your face, but it's like,
what do they actually use for error messages? And I looked, and their solution, which was kind of
surprising, and it might have changed over time, is they basically make it impossible for you to
see an error message. They just so carefully, like, choose what you can type,
what you can't type, what you can select,
so that it's very, very difficult to get into an error state.
I basically, like, could not find one.
Maybe there was one where they used orange.
And it's like, oh, I wouldn't have thought of that.
But that's suitably far away from kind of your pink-red.
And it also looks good with it.
So why not? so there's logic
to these things right that's the i mean that's the point of what i'm saying is we just talked about
the practical reasons for choosing blue um the practical reasons for choosing or not choosing
red how to deal with error messages if you did choose red uh so there are rationales uh kind of
like underlying so much of this stuff and it was just very frustrating for me as a beginning designer because it was like no one is saying these things.
Like I have to discover each of these for myself.
Yeah, I mean, that's one really interesting thing.
I always thought that, I mean, until we had this discussion, that there was like a really strong element of voluntarism.
That basically you could do whatever you wanted. But what you're saying is like, no, if you just randomly pick colors, especially like all the primary colors, then your website will look like a five-year-old built your website.
Yeah, which sometimes, I mean, if you're making a website that just needs to be really friendly and maybe like kid-friendly or aimed at kids too, it's like, great, do pick all the primary colors.
That'll work fantastically and it'll signal exactly who the website is for.
But I would say that it's actually you said volunteerism i'm not totally sure what that means but it just means like you do whatever you want and it'll just work okay so it's kind of
halfway in between i would say you can do whatever you want as long as you have at least one solid
reason for it um and sometimes and sometimes your solid reason is like let's say you're making like a website for
an environmental non-profit guess what every environmental non-profit has is their theme color
green green so what if your rationale was i'm going to pick something that is not green it could
and in that sense yeah there's going to be some things that you shouldn't make it um perhaps but
it gives you so much more leeway for what you actually do choose um so that's wonderful and that counts as
a rationale it's like we need to distinguish ourselves from the sea of green competitors or
whatever you call other non-profits um so yeah it's like as long as you can have some solid reason
you still you still have leeway in what you can do eric this conversation has been uh going amazing
but we're going to take a break for a second and uh jason's going to tell us a little
bit about oscon hey everyone so this is the uh last opportunity uh you know we do the show monthly
and and the conference is going to be later on this month so definitely check it out um you can
still use the oscon.com slash PT. That's for programming throwdown.
And you can get a pretty sweet discount.
If you don't want to use that link, you can also use the discount code.
So when you go to checkout, you do PT25 and get 25% off.
I tried PT99.9.
It doesn't work.
PT25, that's the code you want to use.
You get 25% off.
It applies to all the different
passes. So bronze, silver, and gold passes. On any of those, you can get 25% off. There's a bunch
of open source folks that are going to be there. There's also just even more broadly a lot of
opportunities to understand what's shaping software development. So they're going to be
talking about AI. They're going to be talking about blockchain, pretty much cloud computing. Anything that you would read about if you're
trying to read contemporary news on CS or software engineering is going to be talked
about at length from industry experts. So people from Google, people from AWS. So yeah,
give it a shot. The passes start at $750 when you register with that code.
So try it out and let us know how it goes.
If any of you go to the OSCon, shoot us an email.
Let us know what you thought about it.
Check it out.
All right, Eric.
So we talked a little bit about design and about colors.
And all this is actually extremely fascinating.
But once someone gets past sort of thinking through what they want a website to look at,
there's the kind of,
I want to spend a few minutes talking about,
I don't know what you call it, like brass tacks,
the fundamental aspects,
like what equipment do you use to do your designs?
We were talking about, you know,
maybe don't choose a framework at first later,
but most of the people listening to this
are probably coming from a programming background
and they're itching to know,
like what web framework should I use? Or if I'm building an app, like what language am
I going to use? Or how am I going to make the design look? Do you have any sort of thoughts
or comments about directing people on on first steps down down that avenue?
Sure. Yeah. So it's a little bit tough, because it depends on like, how deep you want to get in
the design rabbit hole um i think maybe
the elephant in the room is what about bootstrap and i would just say the answer to this is going
to vary depending on how deep you want to go with design but uh bootstrap is great in that it really
makes it really solves some problems that it would have just been nice if like native html just had done um and it and it gets things that look nice and consistent but if you use the default fonts and
the default colors and the default icons you're going to have a site that looks like a bootstrap
site and that that is kind of like wandering into the environmental ngo space with a green logo that
has like a tree growing out of a hand or something.
So you're definitely not setting yourself apart by doing that. And yet I recognize at the same time,
it's like depending on what else you have going on, if you're coming from a backend perspective,
to just be like, yeah, just learn CSS and roll it all yourself. It's like, that's a tall order,
especially if you're also trying to learn UX and UI design as well. So I'm not necessarily going to say that. That is what I do for most of
my client projects at this point, is just do it all custom. Don't really start with a framework.
But I think that's more just a personal preference. And I've been able to invest the time over the
years to get good at the CSS and the visual design and knowing how they relate.
So what you describe, and this is in my field, so it's probably a really poorly formed question,
but I'm going to ask it anyways, which is, you know, describing drawings and wireframes
and static things.
But that healthcare website we were looking at earlier has some animation.
I imagine sometimes people are going to be designing things with interactivity where
there's going to be things moving around or changing or shifting or sort of flowing, not
just a sort of static layout.
How do you sort of reason about adding those elements or how to bring those in?
Yeah, that's a great question. So this is something where, like, whatever your prototype
is, whether it's a prototype in code, or a prototype in some some app that is made for
animation, like Framer is a good example, then you almost need to get to that level
before you can make the call of,
is this what we want to ship or not?
So for me, a lot of times that does just happen in CSS
because it's not going to save me any time
to write it in Framer first.
I'm still going to have to get in there
and tweak the easing curves and whatever.
But this is something that i would say as even if
you're like no i'm not going to do a site with a bunch of animation and crazy stuff going on
it's like well do you have hover states do you have hover states on your buttons because that's
something where you can try and make that call in a program like sketch and say okay i think my
hover state is going to be this variation it's going to be blue it's a blue button but then when
i have a hover state it's going to be blue. It's a blue button. But then when I have a hover state, it's going to be a slightly darker, maybe a little bit more saturated version
of that same blue. And you kind of tweak it and you put those colors in your code. And it's like
you need to play around with that in your browser, in my opinion. You need to see that in your
browser before you can actually say, yes, this is what I want or this is not what I want. It happens
all the time where I'm like, OK, this looks good in Sketch, but then I get it in CSS and it's like,
oh, this feels actually like really drastic, like hovering okay, this looks good in Sketch, but then I get it in CSS, and it's like, oh, this feels actually really drastic.
Hover states, it should be subtle, but it should be noticeable.
And it's like just getting that balance kind of right.
It's like I don't need something to flash too dramatically or whatever.
And yet I do want people to be able to tell when they're hovering on something.
Almost everything clickable should have some sort of indication that you can click on it.
So that's a problem even if you don't go deep into animation.
So how transferable is the, you're sort of describing, you know, kind of like CSS,
which to me makes it sound like you're talking mostly about sort of web stuff. But if someone's
saying, oh, I'm going to make an iOS or Android app, like how transferable do you feel? Like if
someone came to you with a job to go design, and maybe that you have that in your portfolio, but come to you and say, Hey, I want to design
for an iOS app. Do you feel confident in being able to transfer your skills? Or is it really a
whole different world? Oh, yeah, absolutely. So with visual design, in particular, the foundations
are exactly the same. There's some things that are a little more important on on web and bigger
screens, tablet and desktop.
Like white space is just going to be,
it's going to be a little bit more.
And then there's other things
that are more important on mobile.
Like you may need to get quite specific
with exactly what font sizes and styling you use,
just because you can't have a huge range
of font size and styles.
Like things need to be pretty compact
or else they're
going to run run over into multiple lines and be very very long on a mobile screen so because you
have less of a range to work with you need to get more precise in that range um but yeah overall the
two skills are like very transferable the thing that's more different is the ux the ux of a mobile
app there's certain paradigms where,
like in my opinion,
the paradigms we've developed for how to navigate around mobile apps are brilliant.
If you look, we use material design
as a fantastic example of this.
We use like shadows to kind of hint
at different layers of things
that are sliding over each other
or merging into one thing
or dropping off the side of the screen
or like they come on from the side of the screen or like
they come on from the side of the screen while the content you were looking at kind of shrinks
towards the background or something like there's just we use so much um motion and sense of location
and navigation and it's actually really subtle but you can open up any any like well professionally
designed app on your phone and and just pay attention to when i go from
one screen to the next they're almost never like just on like totally the same level like it's
gonna appear as if something is rised is like once one uh notch closer to you and is sliding over
the screen that you were just looking at um whether it's from the side or from the bottom or
whatever there's just so much motion in 3D.
And that's just one thing.
But the UX of mobile apps extends a lot beyond that.
We've just really had to deal with these space constraints.
And I think we've kind of risen to the challenge.
Yeah, that makes sense. That's awesome.
I noticed with my Chase app, it's like that.
When you go to pay, there's this three-step process,
and each step is sliding over.
And it makes you feel like all the three steps are there at the same time.
You're just only looking at one at a time.
It makes you feel like there's this landscape that you're crossing.
Yeah, it's fantastic. I don't know that I'm going to stake any examples on the Chase app, but what you're saying sounds like a perfectly smart decision to make as a designer.
Yeah, you almost do want to give users a sense of place even when they're in this abstract digital experience.
So we talked a little bit about replicating things that we like or existing stuff.
And then occasionally I'll run across something on the web where,
I don't want to say like a fad, but something new is catching on.
So the one that I remember vividly recently is when you would scroll down a page,
the page wouldn't scroll down, it would scroll over.
I don't know what that's called, but it would scroll to the right.
So if you scroll down the page, the page wouldn't move sort of up on your screen.
It would slide to the right.
And it would just keep sliding and sliding.
Yeah, okay.
But obviously, like some ideas probably seem crazy at first but then they
they catch on like how do you for i guess especially beginners like what is the balance
between doing what it seems sort of safe and sort of pushing the boundaries or breaking them oh my
gosh this is a good question and and i i um i'm gonna give this answer of it depends which i hate
because whenever i say it depends it means i don't really know. It means there's probably some divider line that I just haven't
thought about enough to articulate yet. But because a lot of trends in design, I feel like
actually make a ton of sense. So when things started going much flatter around 2013, 2014,
like all of our shadows and gradients just kind of dropped off.
And all of a sudden, there were a lot of trends around like just say like really clean, simple
fonts. And then shadows came back a little bit. And there have been certain trends around shadows.
There were these like diagonal shadows that were there for app icons for like a year or two. And
they looked really cool. And they still kind of look cool.
And there's no harm in using them,
but it was definitely like a trend where it very suddenly appeared
and was adopted by a lot of people all at once.
And then I feel like maybe in the last couple years,
we've gotten so used to seeing these clean, simple, flat sites
with very plain
sans serif fonts.
And now you see many more interesting serif fonts, especially at big sizes where you can
see all the details of those fonts.
And that's kind of a trend, but it's also an awesome trend.
And when people pick these high-quality serifs and show them at really big sizes, like that
Foundation Medicine is a decent example of it.
We talked about how cool that font looks.
It's like, I didn't even know what that one was.
So yeah, in some sense, that's trendy.
But it's also a trend that's very,
it makes sense given where we are at
and what everything else looks like at the time.
So I wouldn't necessarily say don't use,
don't do trendy stuff.
Like it can work.
And if you like how it looks,
and you have a rationale for why it
should be that way go for it like i'm not going to tell you not to yeah i mean i guess with web
one of the things is nice is the ability to update it's not like a book where you ship it and then
that stays locked in that state forever where you're going to feel in five years like groaning
when you remember what it was it looked like yeah you you can ship a if it's trendy and
it goes away in two years you can always update your website and and do the new thing yeah totally
so you also one thing i want to talk about for a few minutes uh before we finish up here is you
mentioned that you do freelancing and i know this is something that that comes up a lot not necessarily
in design but even just in programming like working for the man or working for yourself or you know this back and forth and freelancing do you want to talk a little bit about
how your experience has been freelancing like how do you how do you get work yeah like do you do you
feel scared about that like i mean what has that been like for you because i feel a lot of people
will at some point in their career sort of have that as an option or a question yeah
no that's that's a great question okay the way i frame
getting work as a freelancer is like this the very first project that you have to try and find
you have say you say you don't have any freelance experience at this point um it's going to be tough
it's going to be tough because you're going to need to convince someone to pay you money to do
something that you have not done in the exact capacity that you're suggesting. And that's okay. That's just kind of the way of things. And you can't change that.
So you do your first project. But if you do a good job, the moment you've done that first project,
you now have, even if you had to go to a bunch of meetups to find this person, or you posted
on a bunch of job sites, or whatever you had to do to track down this project. The moment you've completed your first project and
done a good job at it, you now have two potential avenues where your next project could come from.
It could either be A, the same person who wants to hire you again because you did such a good job,
or B, someone that this person tells, like they tell someone else, one of their other like little
CEO startup friends or someone else in the industry hey you're looking for a designer hire this person
like eric did such a good job so you should hire him too um and the more and so that makes finding
the second project easier than finding the first one and like it just continues and if you were to
kind of chart this amount of work it takes to find each project, each incremental
project as it comes. It's like on the whole, that chart should decrease as it moves to the right.
You should just see the amount of work go down and down and down. And eventually it hits zero,
where you don't even have to find, you don't even have to spend extra hours finding a project.
Like you'll still need to do an intake process to make sure you're a good match for that client
and they're a good match for you. But at some point it's like they emailed you and maybe
you said, yeah, like let's talk a little bit now. And if this looks good, I can start in two weeks
and you just smoothly transition right over to the next project. And then at some point that
amount of incremental work to find the next client would theoretically it goes negative,
which I just interpret to mean uh you actually
have more people coming to you with projects than you can actually take on there's more demands for
your time more people who want to hand you money to do what you love than you can possibly say yes
to and that's fantastic because then you can really start to specialize and um and you're not
necessarily worried about the about the future and And you don't necessarily have this feast and famine cycle that afflicts a lot of freelancers.
But the thing is, it is the toughest at first.
And if you just kind of keep your eye on trying to get through that beginning hump to get to a point where it is smoother sailing.
Like, I'm not going to speak for everyone here, but it just feels like it gets better and better. So you I mean, inevitably, you have the someone doesn't pay or you did something and the
communications was poor and the expectations are mismatched. Do you sort of establish up front how
you plan to deal with that? Do you just sort of take it as it comes? Like, I feel like that's a
sort of unknown or unknown, unknown, the thing that sort of scares people like, well, what's going to happen?
Yeah, I've had very few problems with not getting paid.
And I believe even for people who really hemmed and hawed and also, OK, another disclaimer,
these haven't been for years.
Like the the clients who who who are who either don't pay you or or who really put up a stink about paying you, those are the clients.
They're kind of the lower quality clients that you have to settle for early on in your career.
Like when you get farther along, you can, and you have, you know, when you have that curve of how much incremental work is it to find your next client and that starts to decrease it's like at some point you can just pass on someone who has those warning signs because one thing i've learned is clients
typically if they it's no client has just one red flag and other than that looks like all green
lights like it's either no red flags or like five of them so if you have a client that is like asking
you at least as a designer they're like they seem like they're going to be really micromanaging.
Like their feedback is not particularly good.
Their communications are not great.
It's like, that's also going to be the client who struggles to pay you on time.
And the moment you can avoid them, you should.
But in the beginning days,
sometimes you just kind of have to risk it.
And that was like a...
There's an interesting philosophical point there
because I've noticed the same thing
in dealing with intra intra office situations that that invariably there are times where just it's just like a like a meteor strike or just something happens that just causes conflict.
But but but ninety nine percent of the time when there's a conflict, one of those two people or probably even both of them or all of them have been in many other conflicts.
So it's like that trend of you see something bad, there's probably a lot of other bad things.
I mean, what's this saying?
It's like if you see a cockroach, there's 50 other behind the wall or something like that.
Oh, geez.
Yeah, that's the same.
It's the same point.
Yeah.
Wow.
That's a scary.
I don't like that saying. I don't like it either. I don't think it's true. I mean, it's kind of, it's the same, it's the same point. Yeah. Wow. That was a, that's a scary, I don't like that.
Yeah.
I don't like it either.
I don't think it's true.
I mean, it's an old wives tale, but, but, but yeah, the idea is, you know, you're right
that you can, while you're setting up the contract, it sounds like you, you, you, you,
you, um, so I guess when you set up these contracts, you probably do it in person or
on VC or something.
So you can kind of see how the person is you know get that non-verbal
communication no honestly no um so despite living in Seattle which is like a decent place and
there's plenty of potential clients a very small proportion of my clients have been uh local it's
it's more often than I'm going it's it's a remote job um so which is cool because it means you can freelance
from basically anywhere uh but yeah i i why so that's a good question like why have i been able
to do it without seeing the person's non-verbal communication um you know i'm not i don't know
there might be an aspect of luck to it where it's like uh or or learning to identify those other red
flags apart from oh oh, this person
probably just won't pay me on time. Certainly, I mean, one warning sign for not getting paid on
time is, is this project totally self-funded? Like if there's someone who is not discernibly rich,
who is paying you thousands of dollars, that's going to hurt them a little bit. And they might
have a lot of opinions that they want to make and a lot of things that they want exactly right
before they pay you. And that's no fault to them.
But it's just something that you have to recognize as a freelancer. Okay, this might be this guy
might be like really exacting, like overly exacting, perhaps he might actually make my
life like pretty miserable and not worth the money that I'm getting for it. So it's just a potential
thing to look out for. But especially if you already
have a client who's raised money from VCs or something, and you're doing some work from them,
or they're wealthy from another business, and they're trying to start this other thing,
and they're getting you on board. It's like, those are good signs. Because one,
I mean, one, it means they're not like lacking for the cash that they will pay you
with, which is great. They can keep up their end of the bargain. But it also means that they've
passed some sort of real life filter for doing quality work. If you've raised VC money, like
ostensibly, you're one of the few and one of the select and someone thought it was worth taking a
very large bet on you. Likewise, if you had a prior business that was really successful,
that's also a real life filter for people. Like not many people have successful businesses and
are then going to start these projects and pay you thousands or tens of thousands of dollars
just to see how the project goes. So like those are good signs. I found that the very best clients
are extremely busy. And the funny thing about it is the very best clients I've had,
they could have been designers and another life they easily could have done my job.
I'm just there so that they can focus on the stuff that only they can do. And I just like
make the design problems go away for them. So that's what I've learned. That makes sense.
That's awesome. We've talked a little bit about people who who kind of work remote and obviously
like what you're mentioning, like I don't know of a way to be more remote employee because I guess you're just by yourself.
But it sounded like you didn't have anybody else. How do you I mean, how often do you find that you work from home versus work elsewhere?
Not unless you're on a customer site, but just you just travel somewhere and you're you know, this is kind of always the dream you see sort of see pitched online.
Like you could work from anywhere. You know, you could take a vacation to rome and be
working from your hotel room in rome um if that's something that appeals to you do you find that
that's something that you do a lot or that you find is a little overrated um maybe both i think
the thing is i now have two kids so long-term travel like so uh earlier this year we actually actually went to Spain for about a month and a half.
And it was really nice.
It was really relaxing.
I got done a fraction of the work that I intended to.
A lot of that was just now I'm traveling with a family.
And so especially with young kids, it's like that's just tough.
Having a routine at home is a way better place for productivity.
And that was something I kind of craved by the end of that trip is like ah like i really want to like actually get stuff done um
yep but at the same time like um i was freelance when my wife and i got married and we i mean this
was just incredible we we said wow we don't actually need to like have an end date on our
honeymoon set ahead of time we can just going. And whenever the bank account runs low, we'll pause. I'll work and and then we'll keep going. And that was what we
did. And so we took like a nine month lap around the world and it was just incredible. Wow. Yeah.
So like the dream is real. And it's and if that's something where, you know, if anyone in your
audience is thinking about doing that, yeah, it it's so possible um but it's
also it's not for everyone like it's it's something where i think i will do more when i have older
kids like in terms of travel but um not for right now it's just a slightly different stage of life
so i'm not really in the like doing long-term travel living the the tim ferris life or whatever
so i mean that sounds pretty cool and you mentioned so you're sort of married and have kids
but do you find that you look to other sources for sort of the water cooler kind of talk do you
kind of like how do you fulfill that banter with other people that you might
normally have around the office but that's sort of obviously missing in your setup oh yeah well
so the water cooler banter is not really something i miss. I mean, I think it helps that I am totally an introvert. So by the time five o'clock rolls
around, I've had like, maybe one meeting, like I'll have like two meetings a week or something.
And so by the time five or 530 rolls around, I'm like, cool, I am now like amped up to like,
go talk to friends and hang out and just have a good time all night or, you know, to a reasonable time in the night. Cause guy get up.
But,
um,
so I think that helps.
I've done like,
for me,
it's just a personality thing.
I think almost everyone else I've talked to who's been alone in their office,
as long as I have,
it's kind of like,
this is a little miserable,
man.
And I'm like,
I don't know.
I like it.
It works for me.
Uh,
so yeah,
introversion helps.
I don't know what else I can add there.
I always just love hearing different people's take on it because like you pointed out, it
works for you, but other people seem to be made miserable by it.
Yeah, yeah, it's tough.
Well, and that's kind of the freelance thing in general.
And what I say to people, it seems like everyone these days is just kind of, they wonder.
They just wonder about freelance.
They wonder if they could cut it and have just a life that's like 100% on their, mostly on their terms or whatever.
And it's like, yeah, for some personality types, that's totally worth it.
And I think I probably could have called this about myself.
I had just never really stopped dreaming about starting my own thing or going freelance or whatever.
But for some people, oh my gosh, that's not the answer.
You're going to be miserable.
You're going to be miserable you're
going to be alone you're going to have all this risk it's going to be really uh it's just going
to weigh on you very heavily and the the rewards that come with working on an established team on
an established project um with the same people day in and day out uh and that and that um and
getting a reliable paycheck and not having to worry about that. It's like for some people,
that's a much better deal.
So it's like, yeah, Freeland,
it's just not for everyone.
And I totally get that.
This has been awesome.
Before we sort of wrap it up here,
you mentioned you have a blog that there's a course you have.
Is there anything else
that you want to pitch to people?
How do people get in contact with you?
All that fun stuff.
Yeah, so probably the best way, if you liked the stuff
that I said about design, the best way to check out more is to go to learnui.design. And that is,
there's really, there's three things there. So I do have a course on user interface design. It's
an online video course, 20 hours of video. It's like pretty comprehensive. It's everything I
wished I had known when I first started doing visual design. So you can check that out, learnui.design.
And then there's also the learnui.design blog, learnui.design slash blog.
That's all the like, I mean, it's a novel, at least, worth of free design content.
It's all very analytical.
It's just I've really tried to write in depth and write this sort of stuff that, again, I wished I had heard when I started doing this.
So check that out as well. And there's also a newsletter where I send even more content,
most of which, well, basically all of which is not on the blog. And that's at learnui.design
slash newsletter.html. Hooray for using static pages. So yeah, that's probably the best place
to learn more. And then you can also, if you have any questions, you can email me, eric at learnui.design
or find me on Twitter.
It's Eric, E-R-I-K-D
as in David Kennedy.
Well, thank you so much
for coming on the show.
This has been awesome.
Yeah, this is amazing.
I feel like I'm going to go
sign up to your newsletter right now
because I'm curious
to keep a pulse on this.
This stuff's been fascinating.
Awesome. Glad to hear it.
Thank you for having me.
The intro music is Axo by Binar Pilot. Programming Throwdown Thank you for having me.