Can You Use Affinity Publisher for Web Design?

Affinity Publisher is a fine alternative to Adobe InDesign with an emphasis on digital publishing. It provides numerous benefits for content creators of all skill levels. However, many creators ponder if they can create designs for their websites with the app.

You can use Affinity Publisher for web design, but your options will be limited. The app does not output HTML or any other web code. Therefore, you must import any web design you make with it into another application that can do the conversion or translate it by hand.

Despite the limitations, Affinity Publisher does offer some impressive web-compatible features that integrate well with other Affinity applications. By reading further, you will learn how to use these features to develop websites and other web applications.

Can You Develop Websites Using Affinity Publisher?

Presented as an open-source alternative to both Adobe InDesign, Affinity Publisher offers numerous features that make it very competitive in the market.

Affinity lets you create the following:

  • Single and multi-page documents suitable for publication
  • Books
  • Brochures
  • Flyers
  • Magazines
  • Other layout-based media for both physical and digital distribution

You can even import graphics, typography, photos, and other elements from Affinity’s other application through a simple drop-in interface called StudioLink.

Affinity Publisher and Web Design

Much of Affinity Publisher’s web features arise from its lack of historical legacy. InDesign’s foundation lies in traditional printed media. As such, its web features seem haphazardly tacked on to it. In contrast, Affinity Publisher has the look and feel of a web designer with a matching interface.

Affinity Publisher lets you:

  1. Choose a variety of screen sizes, fonts, and pre-set web-friendly layouts
  2. Design for specific devices including the Apple Watch, iPhone, iPad, Kindle, and Nexus

For instance, it offers left-handed facing-page documents. Such a layout feels weird for traditional media, but it makes perfect sense for two-page spreads in e-magazines, interactive PDFs, and eBooks.

Limitations for Using Affinity Publisher in Web Design

Despite the numerous web design features, Affinity Publisher still has some steep limitations you must overcome.

You are limited on the following things:

  1. Page size
  2. Graphics
  3. Hyperlinks
  4. Basic layouts

This is because Publisher does not support web-specific elements such as JavaScript or CSS styles. The application also does not generate HTML, CSS, or any other Web-based code. Affinity Designer is a much better tool for designing websites and applications. This is because it has vector-based tools for creating web elements such as logos, buttons, banners, and forms.

However, even Affinity Designer has limitations that make it ill-suited for web design as well. As a result, your best bet is to leave the Affinity application for a true “What You See Is What You Get” website design tool.

Creating Web Hyperlinks in Affinity Publisher

Even with these limitations, you can make decent web page designs with the Affinity suite of applications. Both Publisher and Designer come with numerous built-in tools for creating web-friendly documents. You must eventually port your documents to another application for coding, but these apps will make your design process easier and more professional than you could without them.

Built-in Hyperlink functionality is a key feature web designers find useful. Hyperlinks give web designs their interactivity and basic functions, allowing you to go instantly from one web page to the next. Affinity Publisher will let you create them and keep track of them so you can edit them as needed.

However, creating hyperlinks in Publisher can challenge even the experts as it is not always obvious from the primary menus and toolbar. Fortunately, there are a few ways to do it, though most of them contain the same basic steps.

1. Name Your Layers

Before you start adding links everywhere, you should add layer labels to everything, including the shapes. These names will help you understand your hyperlink destinations.

2. Open the Hyperlink Panel

You will be adding most of your hyperlinks through the hyperlink panel you can assess from the Studio option under the View menu. As such, you want to open the panel every time you want to add or edit your links.

3. Select the Appropriate Objects or Layers

You add links by selecting the linked objects and text and then selecting “Insert Hyperlink” from the “Interactive” option from the right-click menu.

4. Follow the Instructions

In the popup window, you select the type of links such as Page or Website. You then insert the destination in the field provided before clicking the “Ok” button.

5. Use the Hyperlink Panel to Make Edits

Finally, you can use the entries in the Hyperlink panel to make edits and other alterations to the links.


While you can design websites and web applications using Affinity Publisher, it comes with some steep limitations. If you can live with these drawbacks, you will find the simple interface a powerful tool during your web design and planning process.