This article shows you how to design and publish your first website using in5 inside Adobe InDesign. You will not write any code. You design the page the way you already work, and in5 turns it into a real website that opens in any browser.


A one-page scrolling website is the best starting point. It is simple to build, and it shows off the in5 features that matter most for the web.


Before you start


You need three things:

  • Adobe InDesign, with the in5 plugin installed. You can get the plugin from the in5 download page.
  • An idea for your page. A personal portfolio, a single product page, or an event page all work well.
  • Your images and text ready to place.

Step 1: Set up a web-sized document

Create a new document in InDesign. Set the page size in pixels, not inches. A width of around 1280 px is a good, common choice for desktop screens.


Add as many pages as you need for your sections. For a one-page scrolling site, in5 will stack these pages into one long page that the visitor scrolls through.


Step 2: Design your page


Lay out your page the way you always do. Place your images, add your headings, and set your type with paragraph and character styles.


in5 reads your InDesign layout directly. What you see in InDesign is what you get on the web. This is the first feature that helps you: you keep your typography, spacing, and layout exactly as you designed them. There is no separate web tool to learn.


Step 3: Add interactivity with native InDesign features

in5 supports the interactive features already built into InDesign. You add them once, and in5 writes the web code for you. These are the features that turn a static layout into a working website.


  • Buttons and hyperlinks (Window > Interactive). Use buttons to link from one section to another, or to send a visitor to an outside page. This is how you build navigation for your site without code.
  • Animations (Window > Interactive > Animation). Add a fade or a slide to a heading or an image. A small amount of motion makes the page feel alive when it loads.
  • Multi-state objects. Use these to build an image gallery or a simple slideshow in a single frame. A visitor can step through several images in the same spot on the page.
  • The Lightbox option. in5 can open an image or a linked page in a Lightbox. The content appears over the page, so the visitor never has to leave your site.
  • Embedded media. Place a video, or embed content like a map or a video player through a frame. in5 keeps these working in the exported site.


You do not need all of these for a first site. Pick one or two that fit your idea, and add the rest later.


Step 4: Make it work on phones with the Magic Layout Builder


Your visitors will arrive on phones, tablets, and computers. To fit every screen, you need a second version of your design sized for a smaller screen. in5 builds this version for you with the Magic Layout Builder.


Open the in5 menu and choose Build Wizards > Magic Layout Builder. The wizard creates a new alternate layout at the size you choose. It then uses InDesign's Adjust Layout feature to move and resize your content to fit the new screen size. You do not have to rebuild the page by hand.


Look over the new layout and make small adjustments where needed. The wizard does most of the work, but a heading or an image may want a nudge.


When you export, in5 reads both layouts and combines them into one responsive site. The right layout shows for each screen size. This is the Responsive Layouts feature, and it needs a Gold plan or higher.


This step is optional for your very first export. You can publish a desktop version first, then add a mobile layout with the Magic Layout Builder once you are comfortable.


Step 5: Export with in5


Open the in5 menu and choose Export HTML5 with in5.


For your first export, use the Easy Export Wizard. It guides you through the setup with simple choices. When it asks for a format, choose the one-page scrolling website. The wizard handles the technical settings for you.


A few settings worth knowing:

  • Page format controls how pages are shown. For a one-page site, choose a continuous or scrolling format so all your sections flow together.
  • Image optimization shrinks your images during export. This reduces the file size and helps your site load faster. Standard mode is a good default.

When you are ready, run the export.


Step 6: Preview and publish


in5 creates a folder with an index.html file and an assets folder. Together, these files are your website.

Open the index.html file in your browser to preview the site on your own computer. Check your links, your images, and your scrolling.


To put the site online, copy the index.html file and the assets folder to your web host. Most designers use an FTP program for this. Your host or web team can tell you where the files should go.


Why the output stays yours


The files in5 creates are open-format HTML5. This matters for three reasons:

  • The files are yours to keep, host anywhere, and edit.
  • There are no monthly fees to keep your exported site running.
  • You can open the HTML5 files and make small changes later without exporting again.

What to try next


Once your first site is live, you can build on it:

  • Add a mobile layout with the Magic Layout Builder for full responsive support.
  • Add a gallery with a multi-state object.
  • Add a short animation to your opening section.

in5 has 500+ tutorials and walkthroughs to guide you. When you want to go further with any feature above, the in5 video tutorials cover each one step by step.


You designed it in the tool you already know. in5 did the rest.


Here's a related video you might be interested in: https://www.youtube.com/watch?v=bAPPcw_FJe4