Website QA for Designers | Kalob Taulien | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

6 Lessons (15m)
    • 1. Website QA for Designers

      0:55
    • 2. Getting started with a real life example

      3:38
    • 3. How to adjust spacing between components

      2:22
    • 4. How to adjust overlapping components

      3:53
    • 5. Your final project

      1:06
    • 6. Summary

      3:15
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

55

Students

1

Project

About This Class

Welcome to Website QA for Designers

As a web designer, you want to make pixel-perfect websites. But when it comes to someone else coding that website (aka. a web developer) they often won't care as much as you do. 

––

It's your job to make sure the web developer codes a website that looks exactly like your design, otherwise what was the point of designing the website in the first place?

––

In this course, I'm going to show you a few tips and tricks to working with a web developer including the best way to make live website adjustments and sharing the changes you've introduced with your developer in a way that's quick and friendly, but also helps the developer. 

There are two reasons you'll want to learn how to work better with a web developer:

  1. Web developers are notoriously known for being black and white thinkers. Saying things like, "add more spacing to the top" is too vague. Web developers don't know how much spacing to add.
  2. It'll strengthen your relationship with your web developer peers and make you look like a web designing superhero. (Seriously, the designers I've worked with that do these tricks I present in this course are HEROES to their peers and employers)

Who am I, and why did I make this course?

I'm Kalob Taulien, a fullstack web developer. That means I write frontend code (ie. working with designers) and backend code (ie. working with system architecture). I've worked at 2 globally recognized web agencies and have worked with dozens of designers. 

The best projects (websites) with the nicest designs and more successful teams have had this one thing in common: the designer and developer can work well together to make a pixel-perfect website. 

I strongly believe it's a waste of effort to involve a designer if the website isn't pixel-perfect. Designers put a lot of time, effort, and consideration into their decisions. I personally love seeing beautiful designs come to life. 

What's in this course?

In this course you'll take a website I coded, and make live-adjustments to it to make it look and feel better – as if you were working directly with me. The website you'll be QAing is rocketman.learnwagtail.com

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Teacher

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Website QA for Designers: Hello and welcome to web design, QA for designers. So what we're going to be doing in this course, this short course is we're going to be looking at a website that a developer has made for you, the designer, and how you want to give them some feedback. And so I've worked with lots of designers in my past. I am a web developer and I'm going to show you some of the best practices that they have done and some of the things that make my job really, really easy and just make it really great to work with designers. So if you're looking at possibly working with a developer or you already worked with a developer and you want to get along with them a little bit better. This is going to be the course for you. This is also just going to make your site's looks so much better if you can give developers exact instructions. Hi, my name is Caleb Colleen. I've been a web developer for 20 years, 20 odd years. I've been teaching online for about eight years now. And today I'm going to be teaching you website design QA for designers. 2. Getting started with a real life example: Alright, let's get started here. So when we see a website like this, and this is a fairly good website, but it's not pixel perfect by any means. You as a designer, might look at this and go, there are some things that are just a little bit off here and you're going to want to adjust them. Now there's two ways to communicate this with your designer or your developer rather is you could say, hey, make this background image a little less dark. But that's really vague. And you need to sort of know what value to give them. Remember, developers are a lot of the times very black and white thinkers. So saying something vague, like he make it a little lighter is really hard on them. Instead, what you could do is on your page, you can right-click inspect. And your panel might look a little different from mine. I have mine in dark mode. So if I just hit this little thing here, there's a little icon. Go to Theme, light, system preference or dark edges changed mine to dark. And so what I did there was I right-clicked on this, went to inspect in order to open up to my elements here. And so when I hover over things, you can see that it's showing me what I'm hovering over. So this is the nav bar and you can see the padding and spacing and stuff around there. This is the hero area, the jumbotron. And so when I click on this or when I click on the nav, the things on the right change. And we can see if I scroll all the way down here, the jumbotron has a padding top, a 144 padding bottom, a 144, and a margin on the bottom of 32 pixels. Now, that's fine. Let's assume we don't want to change anything there. Let's say we just wanted to change that background image. You're maybe not the image itself, but we wanted to change how it actually looks. So what we can do is we can look at this and just sort of read it. And it's fairly readable in my opinion. So we've got a background. There's a linear gradient. It has a 180 degrees, so we know that it's flipped upside down somehow. Rgba. As a designer, you are probably familiar with RGB and a is just alpha. So that just makes it a little bit transparent for us. Also known as opacity or opacity. So it's got a starting point and ending point and then a second parameter and here just for that image. And so we can even hover over and it'll show us that image itself. We can see that it's a lot lighter than the actual image up here. Let's go ahead and click into this. And let's take that 60 down to 0. And this is what it looks like when it's going from 0 at the top to Do, to Do to Do is 0.8 down here, that's 80% at the bottom. And so maybe that looks a little bit better. Or maybe you need to really increase it to meet accessibility needs for a particular client you're working with. Let's crank that number up to 90%. And he gives way darker at the top and a little lighter at the bottom. And we can still kind of see through that layer on top. Then what you can do. Then you can say, hey, developer, Look, I know you, you're working on this, but I made this little adjustment. Could you just change the background and you can even copy and paste this and copy this whole thing. Copy it. So Command Z or Control C, a copy that and then paste it on Slack or an email or wherever you're talking to your developer, pace it to them and just say, hey, by the way, this jumbotron area for this hero area needs to have a background of this particular value. 3. How to adjust spacing between components : Okay, let's take a look at padding. So in the last lesson, we looked at this background image and we said actually it needs to be a little bit dark or a little bit lighter. In this lesson, let's go ahead and say that these links here need to be a little closer together. And so let's right-click on that link. Go to Inspect and make sure that elements is open. And you can actually hover over these elements. So this is going to be selecting all of them. All of them again. This is going to select one individual element in an LI, another ally in other LI. I'm just getting ally from down here. So let's go ahead and yeah, we could go one layer deeper and we can see that there's actually some padding around the word Services. So if I bring this up and scroll all the way down, we're going to see there's a padding on the left. 48 pixels, on the right, 48 pixels, top and bottom are eight pixels as well. So we know that there's some sort of padding. So what we can do here is in our filter at the top, we can say padding, type in the word padding. And it's going to give us a bunch of stuff in here and that's totally fine. And we can click into one of these and we can change this. So this is three REMS and it doesn't really matter what a RAM is, it's a developer type of measurement. In this case, I'm using REMS here, but we can change that to two. And then I just hit tab a couple times and I'll change this one to two. And it tightens it up a little bit. And now if you ever wanted to flick between two of them, what we can do is just undo those and write new ones. Padding right to REMS, padding left to REMS. And you can see it overwrites these top ones here. So let's go ahead and toggle off these. This is what it looks like before. And this is what it looks like now. And now you can actually see the difference. And you can see as a designer, how this would be very, very helpful for not only you, but for your developer as well. And then when you're done, you can simply say, hey developer, I changed the padding on this nav length. This class is equal to a nav link where it says services contact, wait til course, things like that. I change I padding to be to REMS instead of three REMS. Could you change that for me? And then again, just you can copy and paste this whole thing to them. 4. How to adjust overlapping components: Alrighty, let's look at one more example. So I'm going to scroll down the page here and see if we can find oh yeah, here's one. So this is layering on top. Let's go ahead and inspect this. And I'll move that down just a wee bit. And we can see that this is being moved over somehow. So we don't know how this is being moved over. And this is going to require a little bit of extra CSS knowledge, cascading style sheets. And so if you don't know CSS, I have CSS courses on this platform and lots of other platforms, which you can get a quick little tutorial on how CSS works. But in this case, I'm clicking this section here. And I know that this is the one that's being moved over because it looks like it's being moved over. Either this section is being moved over to the left or this image is being blown up and move to the right. Presumably, this is being moved to the left. So I click in there and in my styles I can see what's going on. So it's flex basis, flex, shrink, flex grow. If you don't know these things, that's totally okay. It has a width here. So we can change this width. So it's 42% right now. We can make this bigger and bigger and bigger if we wanted to. But that's not going to do anything because flex basis also needs to be bigger. There we go. So we can just fiddle with these as well. So if you're like, oh hey, Caleb, as a developer, you should have known better. This should have actually been wider than we could have made it wider. And let's give her patient context here. So if we wanted these to line up, just like that, we would have used the flex basis 47 and a width of 47% as well. What it originally was with 42, I believe. Yeah. So it looks something like that. We could've done 47 and that just lines it up nicely. And then you as the designer can actually play around and be like, oh, this is actually what it should have been, should have been 47. You had 42, maybe it was a typo. Who knows? Now let's move this back down to 42. And let's say we didn't want this to be layered over as much so we could say left. So we'd do in position relative left, 140. And I'm just going to use the up and down arrows. And this is just going to move it around for me. And so I'm using shift up and this just moves it around. So this is where originally sat. And let's say we wanted it to just layer over just a tiny bit, so 60 pixels instead of a 140 pixels. There we go. And we could do the same thing with the bottom. We could click into the bottom, move it down, move it up. We could change the padding on the inside. So having so if we want to tighten that up or if we want to make that much more padded, we could do that as well. We could do all sorts of stuff. I, let's change the color in here from white to red. We change that to now. We wouldn't do white to red because that's disgusting. But we could do from white to F5, E5.5. So it's not as bright and interface. So let's just add another attribute here, fff. And all I did was click at the end of the semicolon end. It just sort of brings me to this new area where I can write more color colon FFF or hashtag FFF. And this is changing the color. So this is very, very, very subtle, but it is toggling the color for us. And then when you're done with all of this, you can just copy all of this CSS. Tell your developer, hey, this is what I'm selecting. You can even select this part as well. I'm selecting the CC, IAT, ImageContent, and then copy all of this down here. Paste that to them and they can use those values. 5. Your final project: Okay, so for a little bit of practice, what I would like you to do is go to rocket man dot learn wag tail.com, and just tinker around with some of the stuff, things that you think could look better to you. Go ahead and right-click, inspect, and play around with things like the color or the padding or the spacing. You can even change background images. You can change everything on the page if you wanted to. Go ahead and give this a shot to try changing something in the hero to make it look a little better, a little more design friendly. And then when you're done, just close this, don't refresh your page because you're going to lose your work if you refresh your page. But then take a screenshot of your work and I'd like you to share it with the class. So take a screenshot of the changes that you made. Share it with the class. I made the site and so I know it's not perfect. Feel free to rip it apart and make it significantly better if you like. Don't forget to share your screenshot in your skill share project down below. That will be your project for this course. And when you're done that, let's head on over to the final lesson where we recap quickly what we learned. 6. Summary: Hey there designer, My name is Caleb telling I've been your instructor throughout this course. I am a web developer. I've been working with designers for a number of years. And this sort of trick, this tip that I've been giving you in this course is exactly the kind of designer that I like to work with. And it always makes for a great sort of team dynamic. And so if you have to work with a developer and developers can be difficult to work with. I know that I'm a developer. I'll admit that if you want to be able to work with him a little easier, sometimes knowing a little bit more about how the world works is really helpful. So in this course, what we did was we right-click back to, I'll do that again slower. Right-click. Inspect, select an element. We can go down here, all the way down. We can see that there's padding in there and we can change that padding violate going up to the top element style, we could say padding 50 pixels. That's just on this one individual component here, not all of them. Or we could go down here and we could say the color now has to be red, and that changes the colors to red. We also did inspect this section. We changed the linear gradient from 60% to 80% to 90% down to 80%. And we can change that as well. Let's do this, reverse it. No, let's do this. Yeah, that's better. So I just changed the direction of the linear gradient. You can mess around with things like that as well. If you ever noticed there's like a little too much margin or too much padding. I know, for instance, rate here. This contact has a margin top of three, m T3, that's what that means. Margin top three. But there's also a margin bottom. And let's say we don't want that. We could say margin bottom 0. And you can see that's just sort of move that content just a little bit and let's toggle that. And that's all that's doing. We also went in here and we worked with well, a lot of things flex basis, which is a form of width. We worked with left, bottom and padding and color as well. So you can change all sorts of stuff in there. And then lastly, all you do is you select whatever you changed, you copy it and paste it to your developer and say, hey, these are the things that I change. I just change the padding to the left and the bottom by like four pixels or something to make it so design perfect that you, you'll want to put this site that you're working on with the developer in your portfolio. So that was a quick little recap of what we did in this very short course. If you want to learn more about CSS so that you can really get a good grasp, a good handle on how to work with your developer. You can take one of my CSS courses as well on this platform. Thank you for taking this course. I hope you learn something. I hope this was a useful little trick for you. Please feel free to share this with your friends, your family, your designed friends, whoever you want to share with, this has made my life tremendously more helpful as a developer. And I know it has made the relationship between me and my designers a lot better as well. Thanks for taking my course and I hope to see you in another one.