Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

A Web Developer’s Guide To Adobe InDesign

Over the past several years, there has been a big divide between designers: those who work in print distribution and those in digital distribution. The irony is that, despite the disputes, name-calling and flat-out arguments between the two camps, their techniques and methods are far more common than many believe. Both sides of this communications field are heavily influenced by each other. Grid systems and typography now play a strong role in Web-based design, and usability and user experience play a big part in developing print material.

Adobe InDesign is the primary application of print designers for laying out multiple pages and assembling print documents. This article gives you, the Web-based developer, a look at some of the tools in InDesign that translate directly into what you currently use. We’ll look at how the terminology in the two fields compare and how to apply your expertise to this other industry.

Jumping Right In Link

Folder Structure Link

As with any Web development project, organizing from the start ensures that you will have minimal problems with the files later on. Similar to many website root folders, InDesign gives you a main document folder and a resources folder:

Folder Structures1

Above on the left is my folder structure for InDesign, and on the right the folder structure for my website. They are so similar that, if not for the different file extensions (.indd and .html), they would be practically the same.

Setting Up the Document Link

Setting up an InDesign document is similar to setting up a mobile website. You specify the height, width and purpose of the document. For print-based items, set the “Intent” to “Print.” If you will be using the file for an eBook or digital publication, then specify “Web.” If you will be using the document for both, then specify “Print” to ensure that the colors are maintained properly.

Highlights of InDesign’s New Document Window2

The margins in InDesign are guidelines that are positioned on the page and are not like Web margins that affect objects on the page.

Your Main Tools Link

If you’re familiar with Photoshop and Illustrator, then you are used to finding the main group of tools on the left side of the workspace, at least by default. InDesign is the same. The way you interact with and build objects on the page, though, works slightly different than Adobe’s other design software. Containers are needed in order to place images, vector objects and textual content on the page.

You can import vector objects directly into the document, but you will usually be importing files into content boxes that you position in the layout. This should come easily to you because Web design operates on the same principle: creating DOMs that contain images or text, and then positioning them in the layout. The one major difference is that, while objects are positioned in a Web document relative to their structure (unless otherwise styled), objects on an InDesign layout are always given an x and y position based on the overall page (by default, the top-left corner, similar to absolute positioning).

Because we are working with a vector- and object-based layout, one of the main tools you will use for the majority of your editing is the Selection tool Pointer Tool Button, which gives you control of position and size. It also is used to select an object in order to change its properties. This is quite different from Photoshop, in which you edit individual layers. To change the color of an object, you need to select it first using the Selection tool, and then adjust it using one of the various ways to change color.

These content boxes can be created with various tools. The Type tool Type tool button enables you to create a box for text. The Rectangle Frame tool Rectangle Frame tool button creates a box to add an image or linked resource. The Rectangle tool Rectangle tool button is not assigned to any particular kind of content. These three frame types allow you to build the layout any way you want.

In spite of both the Rectangle and Rectangle Frame tools, many designers who were trained on older software use only the Frame tool. The one difference between them is that the Frame tool shows a placeholder (an x). The Rectangle tool merely allows for a cleaner workspace but does not affect the final output.

InDesign’s Text Contextual Bars3

The context bars and option panes help you style the content. As in Photoshop, various objects will open up a context-sensitive toolbar at the top, allowing for quick editing based on the type of object(s) selected and the tool selected.

Also like in Photoshop and Illustrator, a multitude of panes are available to control the values associated with an object. Again, they apply only to selected objects. Selecting an option from a pane when an object is not selected will not cause any objects to change.

Style Sheets And Their Origins Link

CSS did not originate with the Web. The model of defining a set of instructions in order to style content was originally built for desktop publishing applications. In InDesign, this takes the form of object styles, paragraph styles and character styles. There are also table styles, row styles and cell styles for designing table objects, but we’ll stay away from these in this lesson.

Styles in InDesign work similar to Web-based CSS but have one major difference: you cannot group multiple style sheets of the same type. For example, you cannot apply multiple paragraph styles to one paragraph. However, you can apply a character style sheet to content in a paragraph that already has a style sheet applied to it.

Shortcuts and menu locations for the panes are given below. But the panes will already be open on the right side of your workspace if you have selected WindowWorkspaceAdvanced or have selected the “Typography” option. These function exactly like the panes in Illustrator and Photoshop: you can snap them together and arrange them to your liking, and they contract to icon format.

Object Style Sheets Link

Draw a content box on the page using the Rectangle tool. With the box selected, you can modify the content box — including the border, background and corner effects — as you would a div object. If you give it, say, a background color, a drop shadow and rounded corners, you can save that style by selecting a new “Object Style” in the Object Style pane when the object is selected (WindowStylesObject Styles, or Command/Control + F7). You can give the style a name (much like a class name) and modify any of the style properties you’ve assigned.

After saving this new style, you’ll still need to apply it to the object. This may sound redundant; however, you’ve only created a new style based on the properties of the selected object. By clicking on the new style with the object selected, you will apply that style. Think of it like adding class="object_style" to an HTML element after you’ve set up the CSS.

Paragraph Style Sheets Link

Select the Text tool, and click in the newly styled box. Add a few paragraphs of content (you can cheat by going to TypeFill With Placeholder Text). With your cursor in the first paragraph, you can start changing some of the properties of what, in Web terms, would be the <p> tag by using the Paragraph pane (WindowType & TablesParagraph, or Command/Control + Alt + T).

Notice that options for modifying font size, letter spacing and weight are not available. This is because these aspects relate to the characters of the paragraph. While a paragraph style can and most likely will include instructions for these values, the Paragraph pane does not provide access to them.

Let’s create a paragraph style via the Paragraph Style pane (WindowStylesParagraph Styles, or Command/Control + F11). This opens a new window that gives you God-like control over all aspects of the text. Name your style, and jump to the “Basic Character Formats” option on the left.

InDesign’s Paragraph Styles Window4

This is what I meant when I said that character properties could be defined in the paragraph style. Change the font size, weight and spacing here, and click “OK.” As you did with the object styles, you will still need to apply it to the paragraph you are working with. To do this, put your cursor in the paragraph text or select a portion of it, and then click on the paragraph style’s name. If you have selected the entire object using the Selection tool, then the paragraph style will be applied to all of the content.

Character Style Sheets Link

With the Type tool still selected and your cursor in the paragraph, highlight a portion of the text. Using the Character pane (WindowType & TablesCharacter, or Command/Control + T), adjust the properties of the characters. You can add italics or bold or change the font family.

Once more, let’s create a style that incorporates these modifications. In the Character Styles pane (WindowStylesCharacter Styles), create a new “class.” Name it something relevant, save it, and then apply it to the highlighted text. This would be akin to adding a little <span> tag to some text in a paragraph, which allows you to apply styles to that text independent of the parent element.

CSS vs. Style Sheets Link

We’ve just gone over a lot here. The reason we went over these three things is to illustrate that, unlike CSS styling, I cannot add a second style sheet of the same type to an element. In CSS, I can do something like this:

<div class="orange_box rounded"></div>

This would apply two styles to the same object (the orange box). InDesign attributes of a given type (whether object, paragraph or character) must be contained in a single style. Higher-level styles are overwritten by child items. For example, character styles overwrite paragraph styles, which in turn overwrite object styles; but you cannot apply multiple styles to a single object, etc.

As in CSS, I could overwrite an object manually. For instance, I could apply a style sheet that gives a paragraph a font size of 11 points and a leading (line height) of 14 points, but then manually change the leading to 16 points by adjusting it in the Character pane. This would result in Web code like:

<p class="standard_body" style="line-height: 16px;"></p>

As you can see, we end up with code that would be considered poor practice by most people. However, it does allow us to customize as issues arise.

Play Around With The Tools Link

Now that you’ve been introduced to how set up a document, start playing around with the tools, using what you already know of Photoshop or Flash. Position elements on the page, modify their color and font face, and create the layout for a product that you’ve already built.

In the next lesson, we’ll dive head first into learning how to create consistent layouts with some advanced style sheet options, and we’ll examine how to build a page structure from scratch. So, don’t forget your towel5.

Additional Resources Link

For some more tools to help you build an initial layout and to learn the basics of building a document, please see the following:

(al) (il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2011/06/Folder-Structures-Large.png
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2011/06/InDesign-New-Document-Large.png
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2011/06/Context-Bars-Large.png
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2011/06/Paragraph-Styles-Window-Large.png
  5. 5 http://en.wikiquote.org/wiki/The_Hitchhiker's_Guide_to_the_Galaxy
  6. 6 https://www.smashingmagazine.com/2011/03/17/indesign-tips-i-wish-i-d-known-when-starting-out/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Matthew currently freelances and works as a consultant for a multitude of companies. He specializes in graphic communication software however has extensive knowledge in design workflows and development processes. He is currently one of 3 Toronto InDesign User group Representatives, involved with several start-ups including the Toronto Social Media Café and HTML5 Meet-up Group.

  1. 1

    I use InDesign for my wireframes. Works great!

    10
    • 2

      Interesting, if you don’t mind me asking, whats your process from there?

      4
      • 3

        If I may humbly reply, the easiest thing to do after designing in InDesign is simply converting few elements needed for your html, jpg or svg.

        Then I simply wrote my css layout according my grid in InDesign. It does save times for some projects by having a “visualised” calculation on screen :)

        PS. is there some sort of an automation tool to create css out of paragraph styles? That would be awesome! :D

        0
        • 4

          In InDesign CS5.5 you can export as HTML and choose ‘Embedded CSS’ from the options. The CSS will be written for you in the HTML file (though if you’ve mapped the styles to standard tags it assumes you’re using a separate style sheet and won’t give you the CSS).

          0
    • 5

      I was thinking of doing that. Cool to know it works. :)

      0
    • 6

      Where is the example website so it can be evaluated?

      2
  2. 7

    Bjørn Johansen

    June 23, 2011 10:45 am

    At my company, all the web designers acually use InDesign. Photoshop is for image processing, Illustrator is for vector graphics and InDesign is for layout.

    6
    • 8

      This makes sense to me, but then I come from a print background.

      2
    • 9

      Damned… these web designers must lose an incredible amount of time when they have to cut the layout into html. InDesign is great for any print project but terrible for any web project (except wireframing).

      4
    • 10

      Interesting… I’ve never thought of using ID for web. We use Fireworks in our studio. It seems to be a great hybrid of vector and bitmap.

      1
    • 11

      Milton Cantellay

      March 27, 2013 8:03 pm

      Yes, this is exactly how I use Adobe CS applications. Illustrator for illustrations (duh), Photoshop for image manipulation, Fireworks for web graphics, InDesign for layout (web/print). I’ve met so many designers that just use Photoshop for everything, seems like such a huge hassle to me.

      0
  3. 12

    InDesign is not a web authoring tool. I can see it’s benefits for some, but it’s simply not an effective part of my workflow. Converting character and paragraph styles may help for some, but I write the font attribute in css in a way that InDesign most certainly does not output, so I’d have to rewrite it anyway. I find it easier to mockup and develop from Notepad++, get things done much faster that way.

    11
  4. 13

    Nuno Bentes

    June 23, 2011 3:00 pm

    Ok… i have to admit that sometimes Photoshop it´s a bit hard on the web development!!! But did you try Fireworks? Does anybody tried Fireworks on web development?

    -3
    • 14

      Fireworks is an awesome design tool, especially if you understand how to make symbols with custom scripts.

      2
    • 15

      Jez Make Hay

      June 23, 2011 11:27 pm

      Fireworks is definitely awesome – it supports ‘pages’ too so you can have multiple layouts in one file (Homepage, Internal etc) and even create a ‘master’ type page with elements that other pages share (like a shared header on your layout). The vector drawing tools are ideal for creating web page elements and I find them easier and more intuitive to use than Photoshop

      1
      • 16

        That´s the point… if exist a tool as Fireworks why should we adapt Indesign (a print based software) to this kind of situations?

        1
  5. 17

    this is what i looking for, thanks matthew and smashing magazine TEAM

    0
  6. 18

    I’ve never used ID for any web creation… but I might have to try this out to see.

    Thanks!

    0
  7. 19

    Thank you for the info. The important matter is where can I use it for.

    -2
  8. 20

    James Fritz

    June 23, 2011 9:20 am

    Another great point to mention that it is possible to map InDesign’s Character and Paragraph styles to h1-h6, p, strong, em, span with CS5.5. This is really useful if you are getting a finished print piece and want to reporpose the content for the web. If the designer was using styles (hopefully they were), you can map Headline to h1, subhead to h2, and so on. Then export the entire page to HTML without CSS and get clean content.

    5
    • 21

      Matthew Potter

      June 23, 2011 2:20 pm

      James, you’ve hit it on the nose there. I’m planning on making this into a series of use cases. The style conversions to html and PDF tags as well as custom class names are on the list. It’s great to see that your working with them already, not many are taking advantage of that yet.

      1
  9. 22

    Kristam Moffett

    June 23, 2011 10:34 am

    I usually find ID a nightmare – never even though to use it for any web development. Handy tips there guys!

    -1
  10. 23

    Eelco Deuling

    June 23, 2011 11:34 am

    I am the only member of a small design agency in the Netherlands who can actually write websites. All my colleagues use InDesign for website design: it is the tool they use most of the time, so why not? Actually, it is faster to design a website in InDesign than in Photoshop (a multi column setup takes half a minute to set up in InDesign: a similar setup in Photoshop takes half an hour if you do not use a standard setup).
    Remember to switch measurements to points (in stead of millimeters) so you can translate the design to pixels without to much trouble.

    5
  11. 24

    I’m not sure how much value this would offer web developers, but I definitely see it for designers. I came from a print background and used ID quite frequently. I think switched to doing web full time and started using Photoshop to do mockups, as is kinda the standard. PS is an absolutely awful tool for creating websites, primarily because its not object oriented, so you just end up tripping over the layer groups all the time. I switched to using ID for layouts last year and would never go back.

    I find personally I don’t get too much into the style aspect of things, but that is definitely something you could build a tool kit of common styles you use, almost like how you use a CSS reset when beginning to code. I find the best part is being able to reference old designs and just copy and paste elements from one to the other.

    Doing stuff like rounded corners and dropshadows is a snap. Try resizing a rounded corner box in PS to understand how ridiculous it is for web design.

    6
    • 25

      Fireworks is THE software for web design. Try it and see how quickly you can create web pages.

      0
  12. 26

    Photoshop is the worst took for web design…especially for those of us who do their own front-end developing. Defining styles from the get go and being consistent produces clean markup and CSS while reducing headaches.

    Personally, I use Illustrator (sticking to a rigid pixel grid) but I make copious use of styles. The ease of making columns, setting up document grids, and text styles is something I long for in Illustator. Maybe I’ll try it for the next project?

    1
    • 27

      snagg dabbit

      June 23, 2011 3:32 pm

      Iif you long for easy columns, document grids and textstyles, what the hell are you doing in Illustrator? InDesign had all of those since v1.0..

      5
  13. 28

    Nuno Bentes

    June 23, 2011 2:39 pm

    Hi Matthew Potter

    Good post this one!!! I had no idea that someone could use Indesign to produce web layouts… ok, of course you can use whatever you want i know that, but why should you adapt a print/typographic software to do this kind of work? Why? Do we have any kind of advantage?

    Why should we use Indesign, if we have softwares such as Photoshop or Fireworks that were developed to serve also the web development?

    I´m not saying that we can not do the same with Indesign, what i´m trying to say is if we have softwares more prepared for this situation, why should we use Indesign?

    “Each monkey in their tree”… (in Portugal we use this expression for this kind of context LOL, i´m not sure if this makes sense in english…)

    Indesign – Print Development
    Photoshop – Web Development & Image Processing
    Fireworks – Web & Icon Development

    P.S- Sorry about my english

    -2
    • 29

      snagg dabbit

      June 23, 2011 3:34 pm

      “Cada macaco no seu árvore” ? (Google Translate)

      1
      • 30

        I wanted to say… each software should be used for a specific task! Photoshop it´s good for image processing, Indesign it´s the best tool for print based media…

        1
      • 31

        Cada macaco no seu galho :)

        0
  14. 32

    Morales Dixon

    June 24, 2011 12:08 am

    Great article. Thank you so much. My wife is a web designer and she really liked this article. I’m also a JavaScript developer. I also recommend readers to take a look at Network Information API.

    -2
  15. 33

    This has to be the best explanation of how to get started in InDesign for me that I’ve ever read! NOW it actually makes sense. haha

    -4
  16. 34

    Surely this article should be called “A Web Designers’s Guide To Adobe InDesign”.

    1
    • 35

      Yes, no developer would ever touch InDesign, nor Illustrator for that matter.

      -1
  17. 36

    never realized that indesign can be used for that

    3
  18. 37

    Aweee Where was this tutorial 2 months ago!? lol

    I had the WORST experience with this program using it the first time.

    1
  19. 38

    InDesign is basically a layout application. I use it for webdesign because i hate counting pixels in Photoshop, aligning in PS sucks, making columns and margins in PS sucks. So i create layout in Indesign bring it into PS and design from there, then i go to Dreamweaver or Textwrangler and code. I originally started designing for print so i have an extensive knowledge of InDesign, so the process is pretty easy for me. InDesign CS5.5 is kinda amazing, the new features added have made it more than just a layout tool, not it can be used with more interactivity for the end user.

    2
    • 39

      Hi RVLT – You said you create layout in Indesign then bring it into PS and design from there…How do you convert InDesign into PS? I just paid a firm to create a website layout for me and they used InDesign. My web developer doesn’t use this program. Can he convert this InDesign to PS to edit and build out the website?

      0
  20. 40

    John Mindiola III

    June 27, 2011 3:05 pm

    This article could be a great primer for web folks who need to crank out some print work.

    -4

↑ Back to top