Category Archives: Magazine Resources

Magazine Design Inspiration

Good inspiration site for tablet design:
/ / /
Good inspiration for magazine covers:
/ / /
I like this site for type inspiration, but it also had a magazine “category”:
/ / /
A few case study projects I came across on Behance:
/ / /
These are print publications, but I drool over their use of layout, type and simple color:
/ / /
Good overview of the “elements of a magazine page”:
Advertisements

Invision Code

The rep from Invision gave me a code that will allow you to have a free, upgraded  version of the app.

You need to use your school email and sign up here:

http://www.invisionapp.com/education-signup

The code is: 56-73-13-19.
If you already have an account, and want to be upgraded to this full free version, send an email to Nadav Reis, our rep at InVision:

7. Liquid and Alternative Layouts

Your goal will be to apply Liquid Layout rules to at least one screen of your app, and then try creating horizontal iPad versions and an iPhone version using Alternative Layouts.

Getting Started with Liquid and Alternate Layouts in InDesign

6.1. Usability Mockups

Essentially, usability testing is the practice of showing a mockup of your to non-biased potential user and observing how they interact with your design. You should have initial designs for all pages of your app needed to complete this. While you do not have an actual functioning app, you can still perform some basic usability testing of your own. This should give you some insight into whether the layout, navigation and concept of your app is clear to users. As we covered in class, there are a couple ways you can execute this test:

Options: Digital Prototypes

Clickable PDF: If you use only interactive PDF tools InDesign such as rollover buttons and clickable links to content, you can save your app as an interactive PDF file. When viewed in full-screen mode on a computer, your user can actually click around on these buttons in Adobe Acrobat. You could also send this to an iPad or other tablet device and accomplish some basic navigation. The important tools for this are located under Window > Interactive in InDesign. You will need to use the bookmarks palette to bookmark all the pages in your file and then use the buttons palette to create navigation buttons and point them to those pages.

InVision
Pros: easy way to do some basic linking and turn flat designs into a prototype. Cons: only accessible via web app, must be connected to internet to use.
http://www.invisionapp.com/

POP: Protyping on Paper: Need to download an app for this, basic version is free, meant to link together sketches.
https://popapp.in/

Adobe Digital Publishing: For the more adventurous, you can play with the digital publishing tools in InDesign. This enables you to do some basic screen scrolls, pull out navigation, slide shows etc as demoed in class. It’s possible to preview this on an iPad if you have an Adobe login, login within the Folio Builder in InDesign, and if you have the Adobe Content Viewer App on your iPad. The process of Bookmarks and Buttons is the same as the interactive PDF option, but the tools to create Scrollable Frames and Slideshows are located in the “Folio Overlay” palette. Here are some helpful videos on Digital Publishing Suite:
What is Adobe Digital Publishing Suite?
Collection of Videos on Learning Digital Publishing Suite
Adobe TV Tutorial: InDesign Layout to iPad App

 Analog Option. The Finger Point Method Using Prints

Here’s the old school way of usability testing used for websites at times. Print actual size print-outs of your screens, including duplicates of each page with in-between states such as a nav bar pullout. Starting with the top page, your user can then point with their finger where they want to click or swipe. When they “click”, you provide a corresponding printout for the page view they have “navigated” to.

Also…this:

Interface Origami

Interface Origami
Here’s an inspiring alternate way to bring life to your paper prototypes:

http://blog.tackmobile.com/article/interface-origami/

 

Inspiration

51 Examples of Digital Magazine Design
13 Best Magazine Covers 2014

Sharing some Pinterest boards that might have good inspiration on them for app layout:

http://www.pinterest.com/zokato/interface-design/
http://www.pinterest.com/laurentduserre/digital-design/
http://www.pinterest.com/maximelarivierm/design-int%C3%A9ractif/
http://www.pinterest.com/pixlpirate/ui-ux/
http://www.pinterest.com/aniamuchnik/interface/
http://www.pinterest.com/hykengo/interface-app-n-mobile-design/
http://www.pinterest.com/schlutr/digital-tablets/
http://www.pinterest.com/dodo/web-designui-and-mobile/
http://www.pinterest.com/donhkoland/interaction/
http://www.pinterest.com/freqforce/ui-alchemy/
http://www.pinterest.com/socialcloudjp/ui-ux-interface-design/
http://www.pinterest.com/Crasshh/ux-ui-atlas/

These might have some inspiration for information architecture:

http://www.pinterest.com/breanne1/beautiful-wireframes-ia-ux/
http://www.pinterest.com/anthonydever/ux-user-journey-maps-strategy-frameworks/
http://www.pinterest.com/yishin/concept/
http://www.pinterest.com/jvetrau/ux-process-models-other-diagrams/
http://www.pinterest.com/sprmario/uxploration/
http://www.pinterest.com/yishin/concept/