Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.
So as web designers we really need to keep a few principles of typography in the back of our mind. We should be doing that whether we are graphic designers or web designers. But especially on the web, some of these principles can be guidelines and help us see our work and evaluate our work in a different way. We use type because we need to read things. We need it to be legible. So as you see in the example on the left, it's too crowded. It's not enough space. It's too small. It's difficult to read. It looks garbled and messy. It's like looking at a doctor's handwritten prescription.
It doesn't make you want to read it. It's difficult to read. It makes you anxious. The one on the right, however, is well spaced, has good leading or good line-height. It uses negative and positive. It groups ideas according to paragraphs. It's readable and legible and it's pleasing to look at and well designed. We have to be careful as designers that we're responsible to the user and to the reader. A second principle that's very important is Contrast. As you can see on the one on the left, the purple font on the yellow background is distracting. It's irritating.
It might even cause you to have a brain flick. And the example on the bottom of white on a pale, pale gray, is very, very difficult to see, especially on a monitor where we're using light emitting color. But if you look at the one on the right you can see that by using contrast, and using weight, and using tone, we can make our ideas and our subjects and information become more clear. So, I have given you an example of black and bold on the top and on the bottom reversing that out. But in each case the contrast actually makes it easier to see.
And the third principle you want to really think about, what is the appropriate size for the appropriate medium? Whereas 10 point is used frequently in books, in print, 10 point or a small, small font on the web may be inappropriate. Typically for body text on the web, we use a much larger font-size. As you can see, something that would be 12 point in print might be 0.8 em, or 80% for relative values on the web. This is easier to read. I'm really trying to think about what size is comfortable for body text and will make it easy for the reader to follow along and see what they're looking at, [00:02:234.16] as well as be able to read it.
Hierarchy is really talking about information and what is important for the person to read and how we want them to see it. I like to think of hierarchy as sort of first read, second read and third read. And one great thing about web design is our actual formatting tags in HTML, the H1, H2 and H3, take that idea in hand. It's semantically marked up, according to emphasis, according to importance, according to meaning. On the left you see that everything sort of has the same weight and you really can't distinguish things, but on the bright side you can see that by using all caps, using italics, using bold, indenting, changing your font-sizes, using different styles with different kinds of headers, we can differentiate between meaning and meaning is what we want the user to get on a first read.
This is important to do in hierarchy. We need to vary the size to differentiate content consistently. We want to show what's important in the information. Sometimes color helps, sometimes boxes help, but whatever you do think about how to make your reader go through on a first, second, and third read. How to show what's most important secondary and what's body. And the fifth principle, Space. This is where negative and positive space can really be important. On the left side, again we see that the line-height is way too small.
In the second example on the left, the line height is too large, and at the bottom we see by having it justified, the spacing of the letters becomes so spaced out that it makes it actually difficult to group the letters as words. For instance, down here where it says "spacing and," it looks like it's some weird word. So we have to be careful about how we use negative and positive space. If you look at the example on the right side, this one showing is 12 points with 14.4 leading, or if you were doing it on the web, it might be 0.8 or 1.2 line-height.
An example of putting white type on black and then creating different indents, using a large capital to introduce a paragraph. It's called breathing room and we use negative and positive space to make it easier to read and also to make it aesthetically pleasing. The sixth principle, Context. What are we creating this text for? What is its value or use? I'd tried to give some extreme examples. On the left, this font is for a happy birthday card.
It might be great if your boyfriend or your husband or son is a nerd, but it's not typically what you might choose as a font. Fonts have personalities just like people. So you want to make sure that the font that you choose serves its purpose. What the design of the font was made for was to communicate some idea or some message. In the second one, using this kind of Medieval Script type font, this kind of Heavy Metal font isn't really a great idea for announcing your baby's new arrival.
And Our Deepest Sympathy, done in sort of a Neon Light Broadway font, isn't very good either. The On Your Wedding day looks like something you'd see on a billboard in an old vaudeville show. So although they're all interesting, dynamic and strange fonts, the message that we're trying to get through the text isn't being communicated with the design of the font. If you look on the right though, the Happy Birthday is clear and fun and spirited and Congratulations on your new baby! even looks like maybe the baby had the crayon and wrote out the message.
The third example, Our Deepest Sympathy, is using a font that's softer, gentler, handwritten, has delicacy and that's what we want in the case of someone passing away or dying. We're also using black-and-white to emphasize what the occasion is. And the final one, On your wedding day. It's script-like. It looks like it was done with the calligraphic pen. It's hopeful. It's really making us think about a celebration. So remember that context, what the message is, should also be reflected in the type of fonts that we choose.
The seventh principal, Output or Display. In what context or in what kind of format or a distribution method are we going to see this? On the left you see an example of print. And in print, our Garamond Pro Title done with body text of 12 points and leading of 14.4 is easily readable. But as you can see, even in this movie this is difficult to read on Screen. The Serif font and the small point size makes it hard for us to really get in there. The text starts breaking apart.
But if we look at the one on the right, it's appropriate for the Screen. It's larger. It's bolder. It's heavier contrast. Helvetica is a very nice Sans- serif font and it's easy to read. But notice we are using 14 point with 16.8 leading. So, it makes a complete difference, but it's easy to read. It feels like it's the right size for body text. Now some of this is intuitive and some of this is just simply reading and looking. But one of the big issues on the web today is that people are making screen body texts so small that it's very difficult to read and it's breaking apart.
It's hard to see it because of those pixels. Keep in mind we are looking at images through this little grid and light is being emitted from behind the screen into our eyes and dilating our pupils in a different way than seeing reflective color and reflective pigment on paper. And finally principle number eight is subjectivity. A lot about being a designer is the way we feel about the subject matter, the way we feel about our target audience, and the reason that we're designing is to try to communicate those messages, those meanings, those emotions, those things that we care about so much.
If you'll look at the example on the left, each one of these has an interesting font, but I don't know if it makes the message of these famous quotations any more clear. But if you look on the right, you see that by actually thinking of typography as being shapes and being graphic designs, we can make emphasis on certain words. So now when you look at the Pablo Picasso quotation, you think action! is the foundational key to all success. And I'm reading it the way I sort of see it.
In the example of the Buddha one, "do not dwell on the past, do not dream of the future." It makes it mantra-like. Then we conclude with one important message: concentrate the mind on the present moment. So by making the type larger and slowing down the reading, we slow down the thought and we focus on what we try to do in this quotation, which is to get you into a meditative state. And the last one is a Shakespearean quotation, and it's about music and love and play. So, emphasizing those words using tonality changes going from a dark, dark gray, to a medium gray, to a pale gray, moves our eye through in a lyrical and fun way.
It makes it seem as though we are dancing and hearing lutes in the background and watching medieval players dance in the court. So it's really important that we add our subjectivity. The reason we all want be designers is to add something more, to put something in between, to add meaning and to add deep experiences that enrich us. When we are talking about typography, one of my favorite sites that's been very helpful for me is this site called I Love Typography. It's designed a guy named Johno.
And this is a very great place to start if you really want to get some ideas about how to be not only a typographer but an artist who uses type. So, this article I highly recommend and I want to conclude by telling you that there are lots of people out there who love typography, who design well with typography and are sharing their ideas and their thoughts and the things that they have learned. Remember if I leave you with nothing else but fluidity and not rigidity, that you should love typography and remember that typography is way more than fonts.
There are currently no FAQs about Creating an Online Resume: Hands-On Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.