The Graphic Designer's Guide to Portfolio Design, 3rd Edition

Chapter 10

The Web-Based Portfolio

Web Page Design

I want you to design a four-page editorial spread for me, using Adobe InDesign. “Piece of cake,” I hear you say. “No problem!” You gather your images and body copy. You write a headline and a sub-headline, add a few touches here and there, and voilà—a terrific page design is created. Oh, if only it were that easy in Web design! You see, in traditional page design, the layout is not hindered by anything but your imagination. You have complete control over layout and type usage. The same is not true in Web design. Web pages are created using a language called HTML (hypertext markup language), which provides the content and structure of the pages. It also says where images, type, and other elements should be.

Why Web Page Design Isn’t Like Page Design

The good news is that programs such as Dreamweaver (or a WYSIWYG Web editor) can help you to realize your vision. The bad news is that your vision may need to be compromised a bit. Having said that, let’s see just what we need to make the Web site of your dreams.

Step 1: Start with a layout.

Step 2: Gather your assets.

Step 3: Create and code your interface.

Step 4: Publish your pages.

Step 1: Start with a Layout

You’ve gathered your artwork. You have all of your sketches for your design, and you’re ready to begin the development of your Web site. If you’ve read chapter 9, you have familiarized yourself with the basics of interface design. You have thought about the questions that ...