In today’s exercise, we’ll draw a bunch of small page layouts. This will help to improve the way you visualize web pages, and break them down into their basic parts. Rather tham spend a lot of time fleshing out the details, like text and other content, we’ll just be using basic shapes.
Carbon Copy: Google Login Page
Today we’re going to take an existing page and try to duplicate it pixel-for-pixel. The goal of this exercise is to get some experience with building a fully-designed web page down to the last detail, but without having to come up with the design yourself first. This one is pretty long, but I think the experience is worthwhile. If you finish this whole thing yourself, you should feel accomplished.
Get Better at Page Layout
One thing that I always find difficult is how to lay out a new web page. Starting with a blank slate is intimidating, and it’s tough to know what should go where. You’ve got to worry about spacing and navigation and then you’re thinking about the pretty header design and the footer and the fonts and the colors…
Let’s try to get better at designing pages by starting at a high level with a simple problem to solve.
Improve Your Design Skills
If you’re a software developer, like I am, you may have noticed how apps and websites have become more and more design-heavy over the years. Maybe you’ve thought to yourself, “I could do that!” After all, you’ve got an eye for good design, right? You can tell the good from the bad. You know to avoid Comic Sans, and not to put solid red text on a solid green background, and that pretty colors and big fonts make everything look great.
Maybe you’ve even tried your hand at imitating the designs you see. It’s hard, though, isn’t it? Your own work never comes out looking as good as something produced by a “real” designer, and you become disheartened by how difficult it is. You go back to writing code. You’re good at that. It’s what you get paid for. But despite that, there’s still a feeling inside that you could be a designer. You just need to learn.
I’ve been there too. In fact, I still am. That’s why I started this site: to help developers and other technically-minded people learn a thing or two about design – and while I’m at it, improve my own design skills. Let’s take a look at how we’ll grow together.
