00:00:18.400
lightning talk on farming and permaculture later if we like. Uh appreciate being here. This is I was at
00:00:23.840
the first rails conf. I've been at about half of them and this is uh the fifth time I've had the privilege to speak.
00:00:28.960
So, um, it's it's one of these things if we've you don't think about how long you've been doing this stuff and then you look back and so some of you may
00:00:35.440
know me from writing the Rails view book as well that's now almost 13 years old. So, probably needs an update. So, today
00:00:42.719
we're going to go over a whole lot in 30 minutes. So, here's our road map. We'll talk about the why. We'll talk about the
00:00:48.239
UX side of things. We'll talk about some visual design things. And then we're going to put it all together and do everybody's most dreaded thing of a live
00:00:54.879
attempt. So, first with the why. For decades, we've worked in silos. Product
00:01:00.480
decided what to build. Engineering made it work. And design made it pretty. But three separate circles, three separate
00:01:06.320
languages of how we communicate, three separate processes. But now, in recent
00:01:11.520
times, this is starting to change. Silos are blending and merging. New AI tooling is changing our expectations of what we
00:01:17.600
can output. AI now can generate design. It can critique interfaces. It can help with user research. It allows product
00:01:24.479
managers and designers to prototype in real code and we are the oneperson framework right so to that end we're all
00:01:32.159
becoming more multiddisiplinary rails developers who can understand UX
00:01:37.600
designers who can code product managers who understand technical constraints well maybe that last one's a bit of a
00:01:42.960
stretch but we'll keep going the convergence is happening whether we're practicing it or we're not so this
00:01:48.640
doesn't mean that we have to become this unicorn the mythical unicorn where you can do all the things But we want to be
00:01:54.000
better at collaboration. So if you think about what is user experience, this is a great map of the disciplines of user
00:02:00.159
experience. And as you can see, we even have software development down here in the corner. But we can't possibly be
00:02:06.560
full stack and do all these things. Well, what we can be is very very well-developed team-based individuals
00:02:12.560
with multiple descenders. But whenever I start talking about you know, hey,
00:02:17.920
developers should design, designers should code, things of that nature, right? What I hear back from most of my friends in the development space is I
00:02:24.640
can't design. I can't push those pixels around in Figma. And we usually think about design as the visual design side
00:02:30.720
of things. And that is a big part of it. But as Jobs said, design is not just
00:02:36.959
what it looks like and feels like. Design is how it works. And this, friends, is where we have an inordinate
00:02:42.640
ability to affect outcomes. We commit code changes. We push to production. We
00:02:49.200
fix the missing edge cases. when that bug comes in. So we are actually the gatekeepers of what happens in our
00:02:56.319
product and that is something where we need to identify designs and push things out and and improve them. But one of the
00:03:03.680
main issues we have is that we have our mental model in the developer experience world that is totally different from
00:03:09.440
what we're trying to ship. We're thinking models, views, and controllers. We're architecting around how these
00:03:14.959
things interact. But the user has no idea about this. So they just want to share something with
00:03:20.800
their friends. They want to know where do I write? How do I know people are actually going to see it? Did I publish
00:03:26.159
it or not? These are all features that we have to work through. But from a flow
00:03:31.599
perspective, we often end up with disconnected. And this has gotten better in the last 20 years, but we still have
00:03:37.519
a lot of apps where things are you have to go over to this area, fill out this form, then you can come back and add
00:03:42.640
this thing because this select wasn't populated. So we have a disconnect.
00:03:49.120
Seven restful actions makes a lot of sense. You know, it's pretty easy to work with. We've been doing it for a
00:03:54.239
while. But the user doesn't think I need to hit postp pound new, right? They just say, I want to tell people about my
00:04:00.400
weekend. So, if we think about more complex things in modeling, we're not
00:04:06.640
sitting there and saying, oh, well, these relationships tie things together to the user. They don't care. This is my stuff. Now, how we has many belongs to
00:04:14.959
all those things, you know, that that's secondary in their mind. this just my stuff. So we have to start thinking
00:04:21.359
about things from flow. So we need to start stop optimizing for how the system works per se and start optimizing for
00:04:28.560
how the user wants to work. And this is where the overlapping circles become powerful. When we can understand both
00:04:34.000
the technical architecture and the user mental model, you bridge a gap that pure design and pure engineer can't do. But
00:04:41.520
this feels a little muddy and intimidating. You got this big gray blob in the middle. Is that really what I'm going to do? And a more realistic look
00:04:48.000
at this is the multiddisciplinary advantage. You are an engineer who happens to understand the language of
00:04:54.560
product, the language of business, the language of design. You can affect some of these things, but you're not
00:05:00.000
necessarily the only person doing it. So with that in mind, we're going to think about things and I'm going to give you
00:05:06.240
some UX tips to do and then some visual design things that we can do immediately in your individual products or working
00:05:11.919
on a large team. So experience design getting we want to get
00:05:18.000
the core right here right. So what do we work on is always that first question and Jesse James Garrett who was one of
00:05:23.680
the founders of adaptive path said it really well right this is the most essential task for any designer and I
00:05:30.560
would argue anybody working in product if we are solving the wrong problems our products fail so we want to sit there
00:05:36.720
and say hey let's let's get this right let's make these decisions up front right we all want to be in the room it
00:05:42.000
shouldn't just be product coming and saying here's your PRD peace out it shouldn't be the designers going off to
00:05:47.120
the mountain and coming back with some beautiful mock-ups that don't really understand the flow or the the problem space, right? So, how do we get into
00:05:54.320
that problem space? This is called a journey map. This is about the Smithsonian Institution in Washington
00:05:59.840
DC. The orange is the visit to the building itself. Everything else around it though is how people hear about it,
00:06:06.880
learn about it, talk about it, share it to their friends when they get back. What are the things that they want to look up? And all of these have touch
00:06:13.120
points. Some of them are software, some of them are not. But when we go and look at this whole journey map of of from the
00:06:20.080
minute they hear about our product to the minute they leave or experience or how it exits out, we can start to
00:06:26.240
identify, oh, hey, you know, we got this uh we got this onboarding thing that happens here. That's something we can
00:06:31.360
play with. We've got this kind of weird thing that happens when somebody orders something and this return happens.
00:06:36.479
That's something we want to look at. So, we can start pulling those things out as, you know, highle tasks. And then we
00:06:42.560
can start saying, all right, well, where where do we want our time? Right? We've got X hours in the day. We've got X
00:06:48.000
budget to burn. What What do we do here to make the biggest impact? And we only want to work on the top two quadrants.
00:06:54.319
The upper right is where it's going to be hard, but we might think differently. We might change the paradigm and we
00:07:00.800
could win there. The upper left is where we have a whole lot of things we can win on because people users hate it what's
00:07:06.479
out there and it's a high need for them. So finding out you you know sometimes we
00:07:12.720
like to just get in there and like, hey, I know I can ship some stuff. I closed a whole bunch of bugs. Tuesday was awesome. But the reality is that that
00:07:19.360
may not have much benefit to the end user. So thinking about these things is very important to identify the job to be
00:07:26.000
done, the project that we're going to go after. And then once we've identified those jobs to be done, we want to anal
00:07:32.000
go through and break those things down into flows. Should be pretty common here. This is a login flow, right? We do
00:07:38.160
this all the time. This probably is the lowest priority thing to fix unless you have onboarding
00:07:44.000
uh or onboarding issues. But giving you an idea of like this helps us identify all the different
00:07:49.520
touch points. And you can actually merge this into some wireframes too. So instead of having to just say this is a
00:07:55.280
page that's a square. Hey, I'm going to do a quick little scribble of what that stuff is on that page. We got a picture.
00:08:01.199
We got some words. Maybe I got a map here. Oh, I've got a I've got a list of items that's a nav. Right? We start to
00:08:06.400
talk about a little bit about what this flow is. what my design's going to be.
00:08:11.759
Another thing, this has now been around for 31 years. So 1994, Jacob Neielson
00:08:17.120
published it. Uh usability heristics and they apply to almost any human computer
00:08:23.199
interaction you can think of. And if your app is messed up in any of these, that's a great place to start. Uh and
00:08:29.759
they're they're pretty simple. They're also pretty broad. So this can be something where you want to go read about what each one of these means. You
00:08:35.599
I mean we could do a whole workshop just on these things, these 10 items. Um but you know, let's take um visibility of
00:08:42.560
system status. So that's not just a red or green light in the upper corner saying we're we're up or there's a
00:08:48.160
problem, right? It's not status.github, although that's an important part of it. Is this am I breaking this or is this
00:08:53.440
broken? That's one part. But is this thing here? Is it why is why am I here?
00:08:58.480
What's happening? Where am I? All of these things kind of go hand in hand and that helps the user understand what
00:09:03.839
they're doing. All of this stuff in UX comes out of HCI. It comes out of those the the early work that was done at
00:09:10.800
Xerox Park and all of that that era. And so it's all evolutionary out of those things. It's not just pretty pixels.
00:09:18.399
A lot of times you want to ask why whenever we're we're trying to debug something. This is failing. Why? Person
00:09:23.680
keeps person drops off here. Why? And you want and there's famously the five W's which was popularized by the Toyota
00:09:30.480
production system Taishiono uh in the 1930s4s is where it originates and he
00:09:36.399
popularizes this in the '60s. Uh but the five is an arbitrary number. It's asking why until you actually get to a root
00:09:42.720
cause and there are other techniques such as fishbone diagrams that comes out of Kawasaki in the 60s as well. trying
00:09:48.160
to understand the reason this problem exists actually because other times you're often just putting uh you know
00:09:55.360
lipstick on the pig. You're just band-aiding over something instead of finding out why this thing is actually going down.
00:10:01.760
Uh another one to do that's going to be a lot of fun is the squint test. Right? So this vis helps you with visual
00:10:07.040
hierarchy issues. Dear god sea of red squint at this squint so you can't really see it. What
00:10:13.120
do you see? You see an explosion of red. What's the most important thing on this page besides that they want you to spend
00:10:19.440
money? Who knows? Everything is the same. So like in the Incredibles when everybody's super, nobody is. Same thing here. All
00:10:25.680
of these elements want to be super and they're all you you've made it so loud that one, I kind of need to close the
00:10:31.200
tab and two, I don't know where to go. If I'm looking for my login, I'm going to hope it's in the upper right hand
00:10:37.279
corner based on convention, which thankfully it is, but I don't know what else to do because there's so much noise
00:10:42.320
here. Here's a B2B uh example. This I did a decade and a half ago with when I was helping Procore spin up. And this is
00:10:49.600
a uh change order. So change orders in construction. Uh really important because the original design didn't work
00:10:56.240
quite right. This is where Chip Gains calls up on the phone says, "Yeah, I took out your wallet and I need another $15,000."
00:11:02.160
So what's the most important information here? We've taken it and put it in a very dark high contrast block. And it's
00:11:08.959
going to answer two questions. How much does this delay my schedule? And how much more money is this going to cost? From there, everything else is secondary
00:11:15.519
and and you can work around, but your eye immediately is going to do figure ground and jump to that. And we'll see
00:11:21.600
another example with just type of figure ground and how your eye jumps to something like that.
00:11:27.600
I encourage everyone to sketch. And this could be on a whiteboard. This can be what I do a lot. I went to architecture school, so I use trace paper because you
00:11:34.399
can overlay really quickly, stack up pages and stuff. Or you can do it in a Moleskin notebook or just a piece of
00:11:39.680
paper. And here we're talking it's all boxes and arrows and scribbly lines. So
00:11:45.200
this is something that is really easy for everybody involved to do. Product engineering and design can all sit there and scribble out potential futures of
00:11:51.600
this page or this flow. And you can get down into the nitty-gritty too, right? So this is a minor interaction. This is
00:11:58.079
one little row of of how I'm returning a PDF document. You so different states of
00:12:03.279
that. Let's we don't have to sit here and do crazy high fidelity mocks all the time. we can do a lot of sketching and
00:12:09.600
really go right into code, especially once we've established some of the things we're going to talk about in the next section. Another one that we're
00:12:15.920
going to do here at the end here is called a sixup. And a six-up is six different ideas that could be for this
00:12:21.440
page. And what you do is you do it really quickly. So, hey, two minutes, everybody sketch six ideas. Then we
00:12:26.720
present to each other and then everybody starts to do it again. We do it like two, three times. And you'll see the whole room gravitates towards one
00:12:32.560
solution or maybe two or three solutions. But really quickly, you start pulling ideas from each other. It's a very fun collaborative exercise.
00:12:40.720
Everyone's favorite though is research, right? Two ways to do this when we don't have a research budget. One is shadow
00:12:46.720
your users. And you can do this in person. You can do this with software now. You can actually watch you can have like Microsoft Clarity is a free version
00:12:53.040
that will actually record the session and you can watch the mouse clicks happen. Uh and it can you can actually
00:12:58.240
get rid of uh PII as well. So you don't have to worry about credit card information, things of that nature. Um, and or if you have the opportunity, if
00:13:04.320
you're doing internal tools, go sit and watch somebody use it. Because no matter what you do asking a question, when you
00:13:09.360
watch them use it, you're immediately going to see all sorts of problems. Like they won't sit there and say, "Oh, well, yeah, this thing is weird and I have to
00:13:15.920
enter it in this way." You're going to say, "Why does it take you 15 minutes to close this sport case? Oh, you know,
00:13:22.000
you're already off the phone with the person, but because you have double entry here. You've got to do this here. You've got to go way out of your flow.
00:13:27.200
Okay, we got we can catch all these things to start fixing them, right?" And let's talk about the reality here that
00:13:34.079
AI is a a gamecher and a force multiplier for a lot of these things. We can get ideas, we can help jumpst start
00:13:40.880
conversations. So here are some techniques that we can use in uh with with Claude or something like that,
00:13:46.560
right? So persona generation, I need to talk about what are my different kinds of users? What are you know who who's
00:13:52.399
going to be using this product? Usability audit. We can now upload artifacts into these things and they can
00:13:58.240
do analysis on them. Not great, but a lot of these things can just get your mind flowing. Be like, "Oh, I didn't think about that. Huh, let's try that
00:14:05.440
one." And then journey mapping, which we saw earlier, like you know, a lot of times with these things, we we are very
00:14:10.800
good about the software and what we're doing in it, but we don't always necessarily understand where this software hits, where people are using
00:14:16.720
it, how it interacts with their daily life. Kelly Gooto is a researcher out of San Francisco and she does amazing stuff
00:14:22.320
where they actually follow people around with video cameras and film them and turn that into a story. And it's really
00:14:27.760
deep research. If you have that budget, definitely give her a call. But it's it's the kind of stuff that you can you
00:14:32.800
can kind of start to imagine and work out and that'll help you improve your product. And now let's let's just be
00:14:39.360
honest here. There is the taste aspect, right? So for those of you who don't know who this is, this is Rick Rubin. He's a famous music producer and he
00:14:45.760
caught a little flack recently for saying that he doesn't he's not a musician. He just has good taste. But
00:14:52.320
it's also that he knows how to manage creatives. Let's be honest cuz you can't get a record out the door without managing disperate personalities. But
00:14:59.120
there is a taste aspect to this and but that's the visual design pretty branding
00:15:04.240
all of that kind of stuff. User experience is more science. And so that way to that end there is effectively
00:15:11.279
manuals of practice. There's things we can do. And so it's like great where's that manual? Right? Because I would read it if you could find it. And what I
00:15:18.000
would say is that this is the missing manual of practice. I've used this book for over a decade now. They just released the second version. Um, this is
00:15:25.120
from Leah Buie and Joe Nati joined her for the second edition. What's so great about this book is it has a whole bunch
00:15:30.800
of different techniques and it talks about what's a card sort, why do you use a card sort? What are your expectations
00:15:36.240
to come out of it? What are the pros and cons of using this? And it has all these different basic UX techniques that help
00:15:41.760
you work with how do I make information better? How do I make flows better? And so you can actually sit there and try
00:15:47.199
these things out at home on your own projects or maybe at work a little bit and see if this works out for you like
00:15:52.560
hey we're hitting this wall. What what from this book would would help us. So this is a great great thing to play with
00:15:58.800
especially as far as a you know not going and buying a 30 book library and trying to ingest all of UX. All right so
00:16:05.600
visual design fundamentals get through this pretty quick so we can jump into the scribbling which is always the fun
00:16:10.959
part. So type whites space color starting with type the good news is is
00:16:17.440
type is 95% of what you need to do which is everybody's what everybody right so
00:16:23.120
if you think about the hierarchy here how many how many of you actually followed the way it said you would
00:16:30.560
probably about half at least yeah some people are like no man I read it from the top I'm like okay that's fine not every this but this is this is what we
00:16:37.199
talk about when we talk about this is the squint testing right your your brain goes to high contrast large thing. It's
00:16:43.120
how we're wired and then you can work your way around to see the secondary information. So this is a type scale,
00:16:48.959
right? And so we're going to do the same thing. We're actually going to define a type scale for our application. We want to use the minimum number of type font
00:16:56.480
size combinations and weight. What'll happen with an app invariably is you get people building this stuff by hand and
00:17:02.959
so you just start to get a whole lot of drift and over time you end up with like 30 40 different type declarations. the
00:17:08.160
consistency actually hurts if you don't have it. So looking at setting something up like this is super important
00:17:15.760
on uh key value pairs. We echo a lot of key value pairs, right? That's 90% of
00:17:20.880
what we end up doing, right? But what's the hierarchy here? Hierarchy is all wrong. Is the information important or
00:17:27.199
is the key important? I don't care about the key. Care about the value. Okay, cool. Let's flip the bold. You know
00:17:32.960
what? The key is really, really secondary. Let's make it smaller. Okay, now I'm starting to see something. that becomes more much more legible,
00:17:40.000
much more scannable. But how about we start talking about can I make this a sentence? How do I talk about this? Do I
00:17:46.960
actually say first name John, last name? No, usually they don't. Hi, I'm Jonath.
00:17:52.160
And then, you know, now we can sit there that that's all just the same font size there. So, okay, that's all right. But
00:17:57.919
now, if I bold a couple items, those jump out. I make the name bigger. And this is one of those things where you can try different fonts and different
00:18:03.840
styles and they have different feels, right? So a quick win in your app is going to be start with a three-level
00:18:09.600
type scale and work your way up from that. So H1 H2P and your your LI are going to be the
00:18:16.080
same as your P tag, right? So start with that and then work your way up from there.
00:18:21.440
Whites most underused thing in software. We have a lot of managers who'll be
00:18:27.840
like, hey, you've got extra space on there. You can put another thing there. And the answer should be no.
00:18:34.400
Here's an example from the Rails guys that I worked on with the docs team. So on the left is if there is no padding
00:18:39.760
and margin on any of those elements. Pretty crammed together. Hard to see where the paragraph breaks are. Just
00:18:46.720
spacing out lines, putting some margin and padding in there. Immediately you start to make this a lot more scannable,
00:18:52.480
a lot easier to hit to. And we have the same type scale here, right? The only change here is I went margin. I went
00:18:57.600
star margin padding zero when I was making up this slide. So that's that's
00:19:02.799
kind of something to think about. Just margin and padding can give you that much flexibility. And this is a great
00:19:09.679
tool. We'll see if this will play. Yes, it will. Um, so this is uh this is up on GitHub and you can go around and play
00:19:15.679
with it. And what's really fun is you can start moving when you variableize these things and you take them up to CSS
00:19:21.360
variables or to to SAS variables now you can change them globally and you can start to see what adjusting different
00:19:27.360
things has as far as a change. So this is and and you can randomize it and do
00:19:33.200
all sorts of fun stuff with it. But this, you know, you can change the fonts and all sorts of, you know, headlines and different sizing, button sizing like
00:19:38.960
we're seeing right there. Uh, so this gives you an idea of some of the things that can become variables. And if you
00:19:44.240
do, if you pull these out to variables and echo them throughout your CSS, they become far cleaner. So dark mode, too,
00:19:51.919
right? Uh, so quick white space win. Turn these things into variables and give your UI some breathing room. Color.
00:19:59.200
So, color palette inspiration is always one of the hardest things. I hate doing it and I've been doing design since I
00:20:04.559
was in high school. So, I love this site, this uh this account, Alex Stash.
00:20:10.160
He's he's over in Europe and he just publishes he's got almost 200 color palettes that are free for brand and product use. So, I went through I had a
00:20:17.840
friend that needed an update to her podcast site. So, there's his thing. There's the design on the right. So, you can start to see how I've pulled certain
00:20:23.760
things in and started using them in the design. Now, famously, there's a 603010
00:20:30.240
rule. What is the 603010 rule? It means that most of your backgrounds, most of your your stuff is going to be these
00:20:36.000
light neutrals. They're going to give you enough definition to move things and separate things, but they're really this
00:20:41.280
gray light off, you know, not much of a color palette. 30% is kind of more of your like highlights, your brand stuff.
00:20:48.000
And then you're going to have an accent color. And that's success states, warnings, things of that nature. We want
00:20:53.840
to use this to help balance out our pages so they don't become explosions of color because very easily in in product
00:21:00.559
it can get a little noisy. Consumer product design has all sorts of people
00:21:05.679
bend this in all sorts of ways. So, but most of what I've been working on for the last two years and 20 years is uh
00:21:12.080
B2B stuff and this pretty much holds true. Want to follow standards. Don't
00:21:17.200
make your success message red and your fail message green. I mean that should be pretty self-evident but you know the
00:21:23.760
these colors have been established and are under so when there's a standard just stick with it. Now something to
00:21:28.880
think about with red and green specifically this is a product color oracle you can download for Mac, Linux or Windows. So you have no excuse. Um
00:21:35.760
and this actually runs and you can change your whole screen. So if I'm looking here in Figma and I want to
00:21:40.799
apply and check out one of the the modes, it has three different modes. So
00:21:45.840
here's what it changes to for this is what a color blind person might see. So we can see how much difference happens
00:21:51.520
and we lose so much definition between the red and the green. You can see it mostly up in the top with the photograph and the head header bar just disappears
00:21:58.080
entirely. So why does that matter? If we're using spotlight colors in an app, we need to show meaning with shape, not
00:22:05.440
just with color. So those are the two things for color wins that you can do really quickly. Pick an accent color and
00:22:11.200
try and clean up your app if you have a lot of color drift. And then always pair meaning with a non-color indicator. So
00:22:17.679
if you have a if you've got a red circle and a green circle, put an X and a check in it. Something like that, right? All
00:22:23.200
right. Some quick AI techniques, color pallet generation, typography pairing,
00:22:28.799
design critiques. These these will all get you something. And we'll we'll see really quick here in a second. So, uh,
00:22:34.080
more AI ticks and trips, tricks and tips. There we go. Uh, this is a book that Patrick Neman wrote and it came out
00:22:40.640
last year and it's got a whole bunch of ideas. So, if you want to play with this, go ahead and pick it up. You can get it from Amazon or a PDF version of
00:22:47.120
it as well. And uh it's got a whole lot of examples of hey, this is how this works. And they have a Slack community too where people are experimenting and
00:22:53.440
trying all sorts of stuff. So a lot of fun. In the same way we're doing all sorts of crazy stuff on on Claude with
00:22:59.520
development and experimenting there. The same thing is happening in design and product. So definitely figure it out. So
00:23:05.919
all right, we're going to do something live and we'll see how much I fall on my face. Um, so if you went through the
00:23:11.520
rail the new Rails tutorial that Chris Oliver finished recently, you build an e-commerce store, right? And so, uh,
00:23:18.000
let's start real quick and say, "Okay, hey Claude, I want a, uh, color palette.
00:23:23.120
What does it do?" Well, what's fascinating is that, uh, it comes back with a color palette that's pretty close to the Ruby on Rails palette, but it's
00:23:28.720
not quite. It got red, but it got the wrong red. So, it's again fine. It's a fun thing to play with and try, right?
00:23:35.120
But so we get the 603010 rule here and that's what that comes out at with, you know, we're going to have darks and
00:23:40.480
lights and then a little bit of red accent. So we're going to switch over here to the iPad and see how this goes.
00:23:48.080
All right, fingers crossed. So first things first, we want to do research, right? So when I'm doing visual design
00:23:53.520
research, there's two great places. One is Bayart Institute. Bayart Institute's been around for 20 years. We started
00:23:59.360
using them in 2004 when I was a creative director because they had really really good e-commerce research like tested
00:24:07.600
research and checklist for UX. The other is mobin.com which documents every like
00:24:13.039
every couple weeks they're posting new onboarding flows or new app flows and things like that so you can see what
00:24:18.400
other people are actually doing. Uh this is really helpful in getting kind of an idea of how the visual design world is
00:24:24.960
currently what the current trends in visual design is. Baymmart is very much about the UX side of things. So these
00:24:30.559
two together are really helpful. So when you start up your uh if you've gone through and built this, this is what you
00:24:36.880
end up with, right? Pretty boring, pretty straightforward kind of vanilla rails experience. You know, we've got
00:24:43.279
our our login screen. We've got a products before and after a products index up top before and after login.
00:24:49.279
We've got, you know, product create down at the bottom. We got product show at the bottom right. So kind of a mess. And
00:24:56.240
there's a there's one thing we do at the very end of the tutorial where we add a little bit of HTML and CSS. Nothing
00:25:02.640
fancy, but just a little bit of of cleanup here gets us to this. Still nothing crazy, nothing to write home
00:25:08.559
about, but we've got a little more visual hierarchy happening and and things are a little bit better. So, what
00:25:13.679
we're going to do is a six up. What are some ways that this page could be laid out better? Let's see here. So,
00:25:22.799
if I'm going to start here, this is this is the kind of stuff I encourage you all to do. I'm going to put this down so I'm not I can actually draw better. So, you
00:25:28.880
know, we're going to want some kind of header nav, right? We're probably going to have a big footer block down here at the bottom.
00:25:34.720
What we have right now, we have this image and then we've got a headline. That's our title. You know, we want to
00:25:42.159
have maybe a little bit of detail. We want a price point. And we want a button. Buy now. Add to cart. Add to
00:25:48.480
your list. Lots of ways this could evolve. Um, we can do another one where
00:25:53.520
we're gonna go and same thing. Big bar at the bottom, little bar at the top. Let's reverse it.
00:26:00.480
So, I got that. You know, now I got a title. Okay, cool. Uh, maybe we'd have some
00:26:07.279
graphics under here, too. Uh, let's say we're a big lifestyle brand instead. You know, we want we have all these great
00:26:13.600
photos. We got some cool stuff. So, we're going to have on every product page, we're going to have a really big cool header image. Then, we're going to
00:26:20.080
have our product title. Then, we're going to have something else. You know, we'll have some other photographs kind of happening down here. We'll have some
00:26:26.159
details again. Buy now. Um, some other options. You can kind of
00:26:31.200
keep going through and doing this, but the point is that you want to say, "Hey, you know, I'm going to make a circle.
00:26:37.360
We're going to have all our features be circles." Whoops. No, Siri.
00:26:43.440
um you know and you start adding those things in. Right? So uh it's you know and you can do as many of these as you
00:26:49.679
want. This is the goal is to do these. You notice I'm going really fast and that's intentional. I don't want to spend time making this perfect. I want
00:26:55.840
to get as many potential ideas on paper as possible. Then I'd sit there and we'd all talk about them and we'd go back and
00:27:00.880
do it again and we're going to start gravitating towards something, right? And so I'm running a little short on time here so I can show you like here's
00:27:06.799
what I did last night. Same idea, right? But you can start to see the different kinds of layouts that come out of that.
00:27:12.320
Right? So now we know we have our logo. We've got some colors that
00:27:18.720
came across with it. So let's say we're just going to do something relatively straightforward. We're going to kind of
00:27:24.480
work on our final here. So I've got my Rails logo. You know, we're going to do some kind of like bar at the top. We'll
00:27:31.120
do, you know, a light gray up here, down at the bottom. You know, I want to
00:27:36.720
have, you know, some this will be like my Zillow nav that has like everything ever known to man listed. And we're
00:27:43.200
going to use the darker gray down here because we have that, you know, those kind of darker grays as part of our palette. Oops.
00:27:49.760
Still light. Try that again. There we go. Um, and now let's go back. We'll say
00:27:56.480
photo time. What are we going to do? We're going to have our big picture here. And we'll add some other ones
00:28:03.120
here, here, and here. We'll have some breadcrumbs, right? Navigation. We want to be able to know
00:28:08.159
where we are in the system and how we can get back out. That's always important. Big title probably is going
00:28:14.480
to be multiple lines. You may it may be really short, but we want to plan for the worst case scenario in our titling.
00:28:20.240
Uh then we're going to say maybe, you know, publisher, author, and then we'll say price point, so $1 million. And um
00:28:28.480
buy now. And you know, with the buy now button, right, we're going to that's going to be where we're going to have our our color flare come in. Oops. Here
00:28:34.720
we go. So, right there. Boom. And there's our Rails logo. Make that red. So, this is a really quick and dirty
00:28:40.480
idea of a wireframe. What's great with this is now I can immediately go and build this and oh, I could build this in
00:28:46.240
Figma. I could do whatever I want. The point being that we don't have to only use and wait for high fidelity mocks.
00:28:54.559
All of this is something you all should and can do. And so, doing this is this
00:28:59.760
is the UX part of design because this is the flow. If that's 10 pixels to the left or the right, not the end of the
00:29:06.159
world. But how I get to this page, how I work through these flows, what happens with session, how do I onboard, how do I
00:29:12.960
add to my cart, what happens if I've added to my cart and I leave, I come back. These are the things that we make the decisions on. We code these things.
00:29:20.080
These are the things that you want to affect. And so I actually was working on this this morning. See if it came in. it
00:29:27.039
did not come in, but there um I'll I'll post the final of this in the um the shared version, but I did a mockup of it
00:29:33.520
u of what this could be. So, you can basically work these things, work these
00:29:38.880
techniques and apply them across everything you're doing. And this is not something again that has to be hard.
00:29:44.559
This is the faster you do it, the more scribbling you do, the more collaborative this becomes, the more wins you're going to see from it. So
00:29:50.640
when you think about these UX things, go back and review. Look at your you look at your your uh ways to do your squint
00:29:56.480
test, your flows, check out your journey maps, think of the holistic picture, look at your type, look at your color,
00:30:01.760
look at your padding. That's going to give you huge wins right out of the gate. And so from if you want to get in
00:30:09.039
touch with me, I'd love to talk with you. I think we're out of time for questions, but I'll be around all day and uh and this evening, too. Also, uh
00:30:16.000
developerux.com if you're really interested in the type thing. I took there's a talk I did at Railscom remote
00:30:22.080
which is about an hour that's a type in from 2020 21 and then there's a a
00:30:27.360
version of that that's been turned into a three-hour course and if you would like there's 40% off with rails comp 25 right now and then you can find me on
00:30:34.240
Twitter blue sky mastadon ruby social LinkedIn etc. So, uh, thank you very much. I appreciate your time.
