Wednesday column: Designing an interactive magazine – Icons

Each Wednesday, Talking New Media invites industry leaders to discuss industry topics involving digital publishing. This month we feature the columns of Nadi Tsech, a digital magazine designer based in Prague. Nadi’s own blog can be found at magpla.net, where her wonderful use of graphics makes each post a pleasure to read. This is the first of a series of seven posts; the second post can be found at the bottom of this page.


How to turn a print edition into an interactive magazine?
Start off with choosing interactive features you want to use in your magazine and then design icons.

Icons-1


Step 1.

These 9 features are used almost in every interactive magazine. We can even call them “standard features” or “basic features”. Every standard feature usually has its own icon. There are some examples of icons from existing magazines.

1. More info or “+” button
Icons-2

2. Close button
Icons-3

3. Link
Icons-4

4. Gallery
Icons-5

5. Audio
Icons-6

7. Buy
Icons-7

8. Page info
Icons-8

9. Scroll/Swipe
Icons-9

Depending on specific of a magazine you might need additional icons:
Recipe, Rotate your device, Map, Zoom, Social networks, Share, Pan and zoom, How to, Tip, Quote or any other button which might be useful.
Icons-10

Step 2.

Design an icon set for the magazine. Keep in mind these 4 simple things: shape, size, colour, description.

1. Shape

An icon set consist of 5–10 icons, most of them has one main shape (circle, triangles, rectangles) and some has specific shape (arrows or symbols). Let’s have a look at existing icon sets.

Icons-11
Icons-12
Icons-13
Icons-14
Icons-15
Icons-16

You can mix shapes:
Icons-17
Icons-18

2. Size

Usually all icons in a set have the same size but that is not the rule.
Icons-11
Icons-19
Icons-20

3. Color

There are 3 options:

1. Use colours of your brand (e.g. National Geographic)
national-gepgraphic-ipad-magazine-3
2. Choose special colours for an icon set, which reader can easily recognize.
tech
3. Change button colour depending on a page design
Icons-21

4. Description

Don’t be afraid to use text, especially, if there is no symbol for this action (e.g. Tip).
Icons-22


The second column in this series – Pop-Ups – can be found here

  • Alex Chaney 3 years ago

    Awesome ideas. I jumped in without putting much thought to an overall style plan for my magazine and ended up evolving it over time and quite honestly I’m still far from complete. If I were to start again today, I would do exactly what you are suggesting, but I would add to that and say go a little further with a full style guide. Nail your iconography, get your master pages sorted, chose section colors, etc. I’m now in the process of finally doing this, but I’m already 25 issue in. The great part about digital is that you can go back and retrofit previous issues and luckily for me, my back issues sell very well so it’s worth the effort and when I do retrofit, I sprinkle in new content as a thank you to my subscribers and readers.

    • Nadya Tsech 3 years ago

      Thank you. I agree it’s good to have a check-list something like: 1. master page (grid), 2. paragraph styles, 3. interactive features, 4. icons. I’ll check your mag!