- 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)