Text HTML in brackets.

Web Design Introduction for Graphic Designers

A lot of designers get a bad first impression of web design. In formal settings, web design classes can be heavily focused on learning code, and this feels jarringly different from visually-focused graphic design classes. This article is aimed at you, the graphic designer or design student who’s trepidatious about learning web design. I hope to connect the fundamentals of web design with the visual design that you’re used to.

Reading time
4 minutes, 50 seconds

Different rules

When you design for print, your tools make setting up layouts visually intuitive. If you want to move any object in InDesign, you click and drag it to where you need it. If you want to run text around a complex shape, it’s as easy as hitting a button.

Things are different on the web. It has a set of rules, like gravity, that set things up in a certain way.

Structure

HTML gives web pages their basic structure. HTML is text; it’s just instructions that tell a web browser what kind of content to show.

For example: If you’re adding a paragraph of text to a web page, you tell the browser that it’s a paragraph by putting these tags on either side:

<p></p>

This is your equivalent to dragging out a box for text in Illustrator or PhotoShop. You’re putting a box on the page for your text to live inside. Because…

  • on websites, everything is shaped like a box. Rounded edges are just visual trickery.
  • everything you add plunks itself down in an orderly column.
  • everything is in the order that you add it to the page.
Blocks in a vertical stack.

Except not everything

Images can go in the middle of another block. So can links, and markup used to modify text, like emphasis tags.

Inline and block

There are many different ways HTML content can be displayed. But the simplest way to think about them is to split them into two categories:

  1. Inline elements only take up the space they need.
  2. Block elements take up all the horizontal space they can.
Inline element that doesn't fill an entire column, and a block element that expands to fill an entire column horizontally.

Setting height

HTML boxes are almost non-existent when empty. When designing a web page, have dummy content on hand to fill in these boxes.

Styles

You can blow away all these defaults with stylesheets.

Broadly speaking, HTML tells the browser what things are. Styles change how they look.

List items taking up a lot of space in their default state, and taking up less space as inline elements.

Here’s an example. I have a shopping list that’s been marked up in HTML as a list.

If I don’t want it to take up all that horizontal space, I can use styles to tell it to be an inline element.

As inline objects, the list items will flow together on the same line.

Simplifying CSS

When you’re learning styles, you’ll get introduced to classes, IDs, and tags. You can attach styles to these “selectors” in your HTML. The rules behind selectors are complicated. Basically, rules you apply using IDs will overwrite rules you apply using classes.

The simplest way to sidestep this issue is to avoid styling with IDs at all. If you only style using classes, none of your style rules will have greater priority than another. This way, the only thing that matters is the order in which you write them.

Layout

There are plenty of ways to build a layout more complex than the default vertical stack.

Floating content

I hate floats. They’re frustrating to learn how to work with. But everything else is worse, or not yet supported by all browsers. So I’m going to show you the least painful way of working with floats.

Floats are applied through styles.

If you apply a float to an inline element, like a photo, it can float anywhere, even between two different blocks.

This is how you accomplish a simple layout where your text will wrap around a (rectangular) image.

Complex layout

For more complex layouts, it helps to think in terms of grid systems.
You may be familiar with grids in print. You can set up a 3-column grid in InDesign with just a few clicks. It can be that easy on the web, if you know what to expect.
For example, let’s create three columns with equal width. There are 3 steps:

  1. Create three boxes. These can be paragraphs or divisions or any other type of block.
  2. Give them a 33% width.
  3. Float them to the left to get them to float next to each other.
Illustration of the instructions mentioned above.

You have the option to float content to the right, or to the left. The simplest solution is to always float left, so you content won’t fall out of order.

Rows and columns

Floats can be finicky. As you start to play around with them, you’ll probably find them behaving in ways you didn’t expect. To fix this, think of your layout in terms of rows and columns.

A row can be any block that you tell NOT to float. It will contain columns inside of it.

Set up your floating boxes inside of it. These are the columns.

Then if you decide you make the layout even more complex, insert another row inside. And then more columns inside that row.

Complex layout with many rows and columns of different sizes.

If you start your project by taking a deep breath, and blocking everything out, it’ll give you a clear visual of the structure of your page.

And just as importantly, it’ll give your layout a consistent behaviour. Your layout will never completely rearrange itself every time you add something.

Conclusion

So to recap:

  1. Everything in HTML is just a block that you put on the page.
  2. But they don’t really show up until you fill them with something.
  3. Most types of content become blocks that take up as much horizontal space as they can.
  4. And you can pull them into columns if you tell them how wide to be, and make them float.
  5. Your life will be easiest if you always contain those columns in rows that are not floating.

Hopefully that gives you a clearer perspective on why the web works the way it does, and the many ways traditional graphic design techniques apply to it. If you have feedback or another tip to add, I’d love to hear from you.