Guides and Sample Code

Developer

Apple News Format: Design Tutorial

On This Page

About This Tutorial

With Apple News Format, you can create signature visual designs for your articles in News. Use Apple News Format to bring your articles to life with beautiful typography, rich photo galleries, and compelling multimedia content. News is inherently responsive, adapting your article’s layout for optimal viewing on any iOS device.

This tutorial will help you learn some of the best practices for the basic design and layout of an Apple News Format article.

Beautiful Designs, Intelligent Layout

The images below show an Apple News Format article like the ones you’ll build in this tutorial. These images show some of the design and layout features of Apple News Format, such as a drop cap and a mosaic. Apple News is responsive, adapting the layouts to any iOS device.

First screen

image: ../Art/anatomy1_2x.png

Second screen

image: ../Art/anatomy2_2x.png

Third screen

image: ../Art/anatomy3_2x.png

System Requirements

Before beginning the tutorial, make sure you have the following installed:

  • macOS or OS X 10.11.3 or later

  • iOS 10 or later SDK (This is part of the Xcode installation.)

  • Java 8

  • News Preview

  • The required version of Xcode for your News Preview version, as specified on the News Preview page.

    After you install Xcode, launch the application and agree to all license agreements. When you see the Welcome to Xcode window, you have finished installing Xcode.

  • Text editing software of your choice. This is necessary only if you are doing the tutorial hands-on. See Choosing and Opening a Text Editor.

Options for Working Through the Tutorial

You have two options for completing this tutorial:

  • Option 1: Hands-on. (Recommended.) Use the instructions in this tutorial to revise the article.json file located in the downloadable Article Structure example. Preview your changes as you go, using the News Preview tool.

  • Option 2: Download and read as you go. Follow along by looking at the downloadable examples that represent the completion of each stage of this tutorial. Preview these articles in the News Preview tool.

Downloading the Article Bundle Examples

An Apple News Format article bundle is a folder that contains the article JSON and can also contain the article’s images.

  1. On your Desktop, create a folder named News_Design_Tutorial.

  2. If you are doing this tutorial hands-on, download and unzip the following examples:

    • Article Structure (News_Design_Tutorial_1_Article_Structure.zip)—The code and images for the basic structure of an article. Note that this article can’t be previewed because it doesn’t contain sufficient content. You’ll add this missing content as you work through the tutorial.

    • Galleries (News_Design_Tutorial_5_Galleries.zip)—Article with image collections, including a gallery and mosaic.

    Alternatively, if you are just reading through this tutorial, download and unzip the following examples. These examples contain the code and images for the article at the completion of each stage of this tutorial. Note that these articles can be previewed using the News Preview tool.

    • Components, Styles, and Layout (News_Design_Tutorial_2_Components.zip)—Article with some components, styles, and layout.

    • Images (News_Design_Tutorial_3_Images.zip)—Article with a photo and captions.

    • Quotes (News_Design_Tutorial_4_Quotes.zip)—Article with a pull quote.

    • Galleries (News_Design_Tutorial_5_Galleries.zip)—Article with image collections, including a gallery and mosaic.

    • Embeds (News_Design_Tutorial_6_Embeds.zip)—Article with embeds, including a tweet and a map.

  3. Move the folders you downloaded in step 2 into the Desktop/News_Design_Tutorial folder.

Previewing the Article Bundle Examples

You can preview an article at any time, using News Preview and the article bundle.

  1. Open News Preview. If you’re asked, agree to the license agreement.

  2. For the purposes of this tutorial, when News Preview prompts you to enter your channel ID, you can click Skip. Entering a channel ID affects the channel name that appears in News Preview.

  3. Click a device to preview the article on that simulated device. For example, you can choose iPhone 7 Plus.

  4. For the article you want to preview, drag the article bundle folder, and drop it on the specified area in the News Preview window. For example, drag and drop this folder: Desktop/News_Design_Tutorial/News_Design_Tutorial_5_Galleries/.

    The article preview is displayed in the simulated device window. The preview may take a minute to load. The simulated device will automatically open News and preview your article. You do not need to open News, click Next on the News welcome screen, or do anything else.

At any time, while you are using the simulated device:

  • Change the device scale, by choosing Window > Scale and then a scale level.

  • Change the device orientation, by choosing Hardware > Rotate Left or Hardware > Rotate Right.

  • Scroll through the article by clicking and dragging, or simulate tapping by clicking. For example, click a photo to view the photo more closely, and then click Done to return to the article.

Choosing and Opening a Text Editor

Although you can use any text editing software to edit JSON files, software specifically intended for code has some important advantages:

  • Color coding by data type makes your code easier to read.

  • Line numbers make it much easier to find JSON errors reported in the News Preview console.

  • You can look closely at your code's organization, by “hiding” or “folding” the contents of a set of brackets.

  • You can quickly reformat your code, for example changing between spaces and tabs for your indentation.

To open a JSON file using your preferred text editor, follow the macOS steps to choose an app to open a file.

When you install News Preview, it might become your default application for opening JSON files. If you want to change the default application for JSON files, follow the macOS steps to permanently choose an app to open a file.

Updating Your Article Preview

Your article preview will automatically update whenever you save changes to the article.json file.

For example:

  1. If you are not already doing so, follow the steps to preview Desktop/News_Design_Tutorial/News_Design_Tutorial_5_Galleries/.

  2. In your text editor, open Desktop/News_Design_Tutorial/News_Design_Tutorial_5_Galleries/article.json.

  3. In the text editor, find the text By Urna Semper, and replace the characters Urna Semper with your own name.

  4. Save the file.

    The preview updates, and the byline of the article now includes your name. This may take a minute. A check mark in the News Preview window indicates that the update is complete.

You do not need to drag and drop the file again, or quit and reopen News Preview.

Debugging Your JSON

If your preview does not automatically update when you save changes to the article.json file, News Preview might have found an error in your JSON. To view any errors:

  • In News Preview, choose Window > Console.

    If an error was found, the console shows some more information. This information sometimes includes the line number in your code where the error was found.

More Resources