InDesign offers unique advantages for kick-starting a website design, such as its unmatched typographic control, pixel-perfect positioning, and fluid, intuitive layout environment. InDesign offers designers who want to quickly create webpage prototypes a powerful toolset with robust text and object styles, page grid features, and interactivity—and none of the limitations of Photoshop, complexities of Dreamweaver, or burdens of hand-coding HTML and CSS. This course shows aspiring web designers how to set up documents for the web, utilize web fonts for maximum compatibility, design a navigation bar, and even mimic CSS with InDesign styles. The final chapter shows how to export your mockups as HTML, CSS, PDF, SWF, and web-optimized images that can be shown to clients or quickly published to the web.

Topics include:

  • Understanding web concepts such as pages, pixels, and the box model
  • Working within web colors and grids
  • Working with type and type styles
  • Designing a nav bar with tables
  • Setting up a template with headers, footers, and modular content
  • Experimenting with liquid and alternate layouts
  • Adding interactive content such as links and video
  • Exporting flat PNG and JPEG comps
  • Exporting HTML and CSS content

Feedback on InDesign for Web Design from Lynda.com users

  • “Wow. I have been discussing with other designers that InDesign could and should be used as a web layout tool and this course 100% backs my claim. Print designers who are beginning to design web pages should absolutely watch this course, especially with CS6. 100% satisfied. Very knowledgeable, well spoken. I picked up up other InDesign shortcuts and tricks that don’t have anything to do with web design that I can also use in my print workflow!”
  • “Offers great insight about Indesign’s functionality and compatibility for web design. Extremely knowledgeable! A real world approach.”
  • “I was looking for something that would allow me to ‘hit the ground’ running with a web design project I recently accepted. And boy oh boy, did Michael Murphy deliver. Thank you for offering such an in-depth, useful tutorial. It’s bridged the gap between my years of InDesign experience and my rudimentary knowledge of web page design. Michael offered tips, tools, and outside resources that I can put to use immediately. Not only is Michael Murphy an expert in this subject area, he delivers his lessons in a clear, succinct style, explaining each step of the process in a way that is easy to follow. His example files are meticulously built, providing an invaluable resource.”

Sample movies from InDesign for Web Design

Simulating a 2-level collapsing navbar with tables and conditional text

 

Creating working navigation buttons

 

Using separate InDesign files for a modular template

 

Working with web colors