Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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 creating an online resume is the perfect way to really start talking about typography and what topography is like on the Web versus what it's like in print. The biggest heads-up I can give you is think fluid, not rigid. Jeffrey Zeldman really sums it up in this article on web design. "Web design is the creation of digital environments that facilitate and encourage human activity, reflect or adapt to individual voices and content, and change gracefully over time while always retaining your identity." Now that's the key to being a good designer on the web.
Notice that the words or the verbs being used are all about activity and reflecting and adapting and changing. We can't think of this as being static like a piece of paper that once it's through the printer, it's done. So I want to go to his homepage, which is A List Apart, and this is considered to be one of the great examples of text or typographic design on the web. He's really used mostly a text- based layout on his homepage here. But I want to show you three things that you might not think about that really emphasize that the user has a lot of control and the browser is what we're always looking through to see our web pages.
One of the things is that if you go up to Firefox in to View and choose zoom, right off the bat, you can see that we can zoom in or zoom out using the Command+Plus or the Command+Minus or if you are on Windows, Ctrl+Plus or Ctrl+Minus and Command+0 or Ctrl+0 takes you back to the regular size. Well let's just see what kind of havoc this wreaks. So if I start doing Command+Plus, notice I can make this get very, very large. It totally changes the look and feel of this website, but there are people with disabilities who are looking at web pages in much enlarged text views, and if I do the Command+Minus and this is equally useless, because we really can't read the content.
I'll go back to Command+0. But I just wanted to show you that something that any user can do right inside their own browser. They don't need to have the web developer's toolkit, or know anything about creating web pages. Another thing that the user can do is come up to View and go to Page Style and turn that off and now we really do just have a text document, just a string of text in one column with images. Now, as a designer, this should be helpful to you, because when we turn off the styles, you see that all of this is in fact text and there are very few images on this page, just a few.
Most of it is text and most of it is unordered lists. The user can turn this off anytime they want. You don't have any control over it, because the users at their desktop doing what they want to do with their browser in their own environment. Another thing that the user can do, and I want to demonstrate this in Pasadena City College's homepage, is they can change the size of the browser. Many people at work, work with their browser in a very small viewport size, because they don't want their employer to know that they are doing other things. So they'll put their documents on top of the browser and then quickly switch back and forth.
But as you see as I move this viewport around, this text because it's in a fluid layout is resizing itself. So you print designers, this is going to drive you crazy unless you let go of control and the idea of rigidity, and think about doing things proportionally and doing things in a way that can change and adapt with the way browsers and web pages are displayed. Let's go back to Jeffrey Zeldman's homepage and let's look at some of the features that I think are outstanding. Well, first off the bat, when you look at this, your overall first impression is that it feels like a scholarly journal or an academic journal, or something you might read like the New Yorker.
He uses a lot of whitespace. It's uncrowded. He uses texture, and light, and color, and he uses varying density of text. Some things are at 100% black. Some things change when you interact with the page. Other things are just dark gray. So this limited color palette and this use of varying tones of black is also very instrumental in how you perceive this. It doesn't reach out and grab you and shake you around. It lets you sort of see level by level by level, or what we call information hierarchy.
The most important than the next level, than the third level. He does this hierarchy using size, weight, and style. He also carefully does letter spacing. One of the weakest things in any graphic design school is teaching typography but he has carefully done what he can to create letter spacing, word spacing, using italics in a way that we can see it, but it doesn't become pixelated on an all pixel screen. He's using another design element, which comes from print, which is the grid. This is very grid like if we could superimpose lines on this.
So this grid is an organizational element. All of these elements help us see the main content and see primarily a 90% text document, viewed through the viewport in a browser on a desktop. So just keep this in mind, fluid not rigid, move design with typography, keeping in mind that the user has control over the browser and how it displays.
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.