- Hey designers. Welcome to my desk. Welcome back to a new video. I want to document my process today as I give some development feedback on a design that I created and that the developer I worked with, Cory, has built and sent to me to look at. Being able to look at a design, evaluate the build and give feedback to a developer is an important part of
being a web designer, If you're building out the site yourself. It's also a good process
to go through, I suppose, if you are building out your own design. For critiquing it and
making sure things are where they're supposed to be and doing what they're supposed to do. I'm very lucky that Cory, who has a YouTube channel of his own, by the way, I'll leave
a link to it down below in the description. He's a great developer. He's got a good eye for design. There's often not a lot of huge things that I need to give feedback on. But there's always little details and things that I see
because I'm the one who created the design. They might have gone and missed
in translating the design from Figma over to code. So, I want to show you my process today, for how I look at a build and
send feedback to Cory on it. (upbeat music) So this is the page that
we're gonna be looking at. It is the build of the page I designed to promote our free migration
service that we have. So, if you're moving to
ConvertKit from another tool, we will help you move over
for free and get all set up. So, that's what this
page is communicating. I actually did a video where
I walked through my planning and wire framing process of this project. Never did the design phase, so, if you'd be interested in that, vote on the poll up on screen right now. Anyway, first thing that
I do when I am coming to evaluate a design, let me move this down so that you can see, is, I use this little Chrome extension to take a full page screen capture. 'Cause what I do, and then down with that, is I upload a capture of
the design to Envision, and that's where I leave notes for Corey. And I talked about this in my video that I did about Envision, but here in this video you're gonna get to see that in more detail. So, I've created a new
section called dev feedback. I'm gonna come and, I have to make sure that
I add @2x on the end because that's what tells
Envision that this is original. And I also like to just compress the image because it's 2.9 megabytes
and that's a big screenshot. Once it's compressed then
I would just drag it, the much smaller file, into this dev feedback section in Envision. So, this is gonna be
where I leave the comments and this will kind of act as a checklist for Cory to go through, but I
will look at it in this view, so that I'm looking at
the live page, obviously. What I do is, basically
just start from the top and work my way all the way down. And, this is a first draft
that Cory had sent me, so he knows that there's
still some things to work on but it's my first chance to
get a look at what he's built and start giving feedback for comparison. This is the design that Cory is working from. He's already let me
know that the curve is, the thing there is still to come. So, I'm not gonna bother
to give feedback on that because he already knows that that's a thing that he's still gonna add. What I end up doing is,
basically flipping between my design in Figma and the build, and just seeing what the differences are and what I need tweaked, basically. So, the first thing I noticed
is that this icon here looks very close to the top. I'm gonna come into Figma
and just measure around about what the space was that I gave this. I like to measure just
by drawing rectangles. I know there's other ways to do it. Yeah, this is about 85
pixels of space here. And that's definitely not as much there. So, first piece of feedback
I'm gonna go in and give. Load this page, turn on
comments, and I'll say, (keyboard clicking) see how this comment, as well, has this mark as resolved. So this is what Cory goes through and does when he makes the changes. This is a functioning form, but I'm just gonna do a
pass of the page first before I interact with that and check it. Another thing that Cory
already let me know that he hasn't quite done yet
is the arrows between these, so again, not gonna bother
to give feedback on that. This SVG doesn't, see
how the boxes are thicker than the ones I have here? I think something's gone
wrong when I exported that. So, I'm just gonna leave
a comment about that and that might be something
that I need to fix. (keyboard clicking) Next thing is this quote. Like I said, Cory's got
a good eye for design, so I love that he has highlighted
this last line in bold because it's the most convincing
line of this testimonial. So, that's cool. That's not something that
I put into the design. It's a thing he added, and it's great. One thing that needs to change, though, is in my design this quote is italicized. And this is actually a
change that I want to make across all the quote on our site. Sometimes I make little
changes to patterns that we already have set up,
and I forget to highlight them. So yeah. (keyboard clicking)
(relaxing music) The next thing that I'm seeing
is the spacing is a bit off. See how there's more space
here than there is here. I would prefer those to be even. That's what I kind of
mocked up in this design. And it looks like it's really the blue that needs a bit more space. Yeah, let's leave that as a feedback. (keyboard clicking) We're still working on
getting a good design system built in code. So, I know that once we have that it's gonna mean a lot less
of these little small issues. 'Cause a lot of the stuff
that I often do in my designs will just become standard
in our code, in the build. This heading here looks too small to me. I'm not sure if I made it that small. In my design it's an H2. And in here. Let's come in. Sometimes I go and
inspect element, as well. Just to play around with things. Okay. So, it is an H2, but it has
a special font size on it. So, what's happenin' there? I also don't understand rem as font sizes so sometimes I use this to
see what it's telling me. (keyboard clicking) Anyway. FAQ's. Pretty boring. But, the text is formatted. All good. So, yep. Next thing I notice is that
this here has uneven spacing. I had intended it to match
the pattern that we had on these pages here
where there is even space above and below. So, that's something that
I neglected to point out to Cory before we started. Which again, this is
just another reason why the design system in
code is gonna help us. (keyboard clicking) I'm just gonna check how many columns I had this thing spanning. Yep, that looks about the same. And so it's live. Cool. This button seems a little
smaller, though, interestingly. (keyboard clicking) Yeah, there we go. So, because I used to
code our marketing slide which is actually why
got into the mess where things are not aligned. That's my fault. I do know what classes
and things we have set up so I can go in developer
tools and change things then to suggest to Cory
exactly what he needs to add to get it to be what I was imagining. (keyboard clicking) That's the first run of the page. The next thing I'm gonna do is look at it at a few different screens sizes. So, let's shrink it in. See what happens here. This looks fine. There's still that same issue, of course. (keyboard clicking) I was just noticing that this text here needs to look a little bit different on what is essentially
a vertical iPad screen. So, I can come in the
code and change classes. We use Bootstrap for our grid. To see what would be best here. I think it helps to do this
rather than just me saying, "This should be wider". If I take the time to
go in and see exactly what needs to change,
then it can help Cory and we're speaking the same language. As part of the design system that we are currently
working on implementing we wanna have common
classes for spacing, too. So, instead of me saying up here where I said the exact pixels that I thought padding needed to be. We're gonna have a language
together for talking about that. So, I can say, "This needs
medium spacing", for example. And he'll put that in and it will be what we needed it to be. Okay, so I've had a look at that. Now, let's refresh the page and
look at how this form works. So, basically when I interact with this it's gonna then show me the table for what migration options are available for different subscribe accounts. So let's see how it's working. Cool. I love how he's done this
little spin around thing here. This is again another
reason why Cory is great. I didn't ask him to do that. He just thought that would
be cool, and he added it. Which is awesome. So let's see what happens if I say this. Okay, so, I don't like
how that changed there. I want to make sure that these fields are the same width all the time. 'Cause I just presented
him with a static mock up. That's not something he
could have known before. And not something that
I would have thought would be a problem. And let's say that. And then we'll show them. Cool. So, I like the functionality of that. I just don't like how things change around when you're moving the form. (keyboard clicking) Now I'm gonna take a full page screenshot of the different options here that you get when you fill out the form. Okay. So I think there needs to be
slightly less space in here. So we'll leave that as feedback. (keyboard clicking) I think this free is a little bigger than I have it in my design. Let's see what the font size I used there. I think this is because I've
gone off our set font size and used 15 pixels when we
have 14 and 16 in our code. (keyboard clicking) I'm also noticing an odd
issue with these SVG's, too. I'm seeing a little like, yeah, that's looking a bit off. That little line on the box. So, I need to work on that. (keyboard clicking) Something I'm noticing,
too is that, I think, we're missing a line here. Yeah, we need email template to be crossed out on this thing. (keyboard clicking) So I think that's the issue and that's why this bit
here is sitting down lower than the others. I want all these titles
to be on the same line. So again, I'm not just
commenting, "Hey, this is off". I'm thinking myself about what
the reason for that could be. And trying to provide a solution. (keyboard clicking) Sometimes I write something
like this just to tell Cory what I'm going for here. Because I don't know if
changing padding is the answer. I don't know if it's something
to do with the button. I don't know. But, I'm telling him my
goal is for the spacing to be even at the sides and at the bottom. And so then he can figure out what the best solution for that is. (keyboard clicking) All right, let's see what
happens if we click get started on one of these options. Right, we get to our migration form. Which is great. This looks exactly how it needs to. But we do need that quote
still to be italicized. So, I would just take a
screenshot of this page, also. Send to him. Let's see what happens to this
when I shrink screens, too. See this doesn't probably need to be quite so thin on the screen. I think we've got this spanning
eight columns at the moment. Ten, oh. Six, okay, yeah that's really small. That can be wider for sure. And what about if we go to one of these larger ones. Cool. So, something I asked for Cory to do was to have the data
that already been input in the form previously
follow over to here, as well. So, this is pre-filled
and this is pre-filled in the form. Which is great. And he has managed to do that, so that's awesome. We use Gravity Forms for things
like this on our website. So Cory hasn't laid out this form himself, but he's gone through and
added classes to style. Things to match my design. So, that's looking good. I won't make you sit
and watch as I fill out this whole form and go through
the last few detail checks, but I hope you enjoyed seeing this process of how I evaluate and give
feedback on the build of website. The main things I'm looking out for are does it match the design that I gave? I look out for spacing. That's often an area
where issues can happen. It's where my keen design
eye immediately goes to and sees things that may not be immediately obvious to anyone else. Yeah, spacing, fonts, looking at images and how they're performing. And also testing on different screen sizes and making sure it's looking it's best and doing what I want it to do. This is just the first
draft of Cory's build and it's also the first pass of me going over and giving feedback to it. So, mostly paying attention
to the bigger things that needed to change at this stage. And inevitably, once
Cory makes these changes, which because I've put
them all in Envision, he can ask me questions in there, as well, if there's anything that needs clarifying in the feedback that I've given. But, once he makes those
and gives me another build to look at, inevitably
I'll catch a couple smaller more finer detail oriented things that will still need to be changed. So, yeah, usually the feedback process is a couple of rounds for the
build of a website like this. Hope you enjoyed seeing
the process, though. And please make no
judgements over our lack of a design system at the moment. Like I said, it's coming, and I'll probably film the
video on that when it happens. Right now the design system
is really just in Figma, it's not reflected in the code base. But anyway. Hope you enjoyed this, none the less. Thanks for watching. And I will see you in my next video. Bye. (upbeat music)
