Simon O

DISPLAYING POSTS BY: Simon O (4)

Simon O is the designer behind the field guide app.

 

A face for your field guide

19 August, 2011 09:30 by Simon O

Part Four: HTML Layouts

This is the final and perhaps the juiciest part in the series because it’s where the design meets the code in a harmonious display of passion.

Alright, enough flowery language, let’s have a look at how the ‘species’ page of the app works. This is the destination page your users will land on once they’ve selected an animal/item. On the iPad version of the Field Guide it’s a single page that consists of all the details. On the iPhone/iPod app, these sections are split into individual tabs.

Once you’ve downloaded the code, you’ll notice that we’ve chosen to lay out the details with HTML.

Where the HTML things are.The detail view area consists of HTML (in a UIWebView container).
Image: Simon O'Shea
Source: MV

This allows you to easily change presentation, links and styling, but above all, it allows you to transfer an existing design to an iOS app if you already have a web-based version of your field guide. Vice versa, with a bit of tweaking and testing, it also allows you to transfer these layouts to the web or other mobile platforms.

So let’s see what makes up a Species/Item page…

 

The Files

  • Species/Item Page (iPad): template-ipad.html
  • Details Page (iPhone): template-iphone-details.html
  • Distribution Page (iPhone): template-iphone-distribution.html
  • Scarcity Page (iPhone): template-iphone-scarcity.html
  • Stylesheet (iPad): style.css
  • Stylesheet (iPhone): style-iphone.css

  

The Markup

If you’re familiar with HTML, these layout template files should be pretty straightforward. For the iPad template, the page is divided into two main <div>s, with class names leftcolumn and rightcolumn. I’ve labelled these for identification practicality over formal semantics, so feel free to change the names if you’re partial to the latter school of thought. These are set to float left in the stylesheet, next to one another.

The leftcolumn holds the <header> of each animal/item, containing the common and scientific names. This is followed by the main details, each of which has a heading (<h3>), followed by a custom tag that tells the app where to insert specific animal data. The custom tag takes the form <%propertyname%>. For example, to display Distinctive Markings as a paragraph, you would insert the custom tag <%distinctive%> between paragraph tags.

eg:  <p><%distinctive%></p>

The taxonomic data of the animal is displayed as tabular data using a <table> element.

The rightcolumn in the template consists of ‘widgets’ or styled containers that we’ve created to display key information. There are three of these widgets: Distinctive Markings, Distribution and Endangered Status. On the iPad version of the app Distribution and Endangered Status each have information on the ‘back’ to explain the graphical data displayed on the map and status chart. This is initially hidden and can be viewed by the user by tapping the i icon. We’ve enabled this to be accessed using a combination of CSS3 and JavaScript to create a ‘Flip’-style animation. On the iPhone version this information is displayed in a separate widget underneath both the map and status chart.

You may notice that the map <img> tag is repeated in the back div of #distribution, seemingly printing two map images within the widget. This is to give consistent height to the Distribution widget when it is ‘flipped’ and with the styling included it also gives the effect of translucency, showing the reversed map when reading the back pane of the widget.

 

Detail View of the iPad App. Mouse-over to see HTML elements and classes.Detail View of the iPad App. Mouse-over to see HTML elements and classes.
Image: Simon O'Shea
Source: MV

 

The Styles 

The styles for the Species page templates are contained within the linked files style.css and style-iphone.css. I’ve written a number of properties assigned to HTML elements, classes (.) and IDs (#).

Please note that because this is an app for iOS and it’s using the latest Safari rendering engine, there are many CSS properties that may not display when testing in your standard desktop web browser. In particular I’ve used CSS3 properties such as gradients, transformations and animated transitions as well as –webkit specific properties that may not yet be standardised CSS. These fancy styles allow you to push the boundaries of HTML and iOS and can significantly save load time and file size. However, it is worth noting that in order to view them on your computer, you’ll need to test them in a recent version of Apple’s Safari or Google Chrome and to get the best results you should test their compatibility on various versions of iOS.

 

The Images 

Another advantage of using HTML and CSS is that you can save on the amount of images you use. For example each icon used on the Endangered Status widget is an 88px x 88px image. Simply setting a width and height of half the dimensions (44px x 44px) in your CSS means that the icon will render crisply for both the Retina Display and regular displays using just the one image file.

Another example of cutting back on images is using CSS entirely to create graphics. The Endangered Status ‘tracks’ and ‘bars’ are made entirely of CSS gradients and rounded corners. This means that they require no image files and are resolution independent, looking great no matter how far the user zooms in.

By now you’re probably exhausted, so I think that’s enough! If you have any questions, comments or suggestions, please don’t hesitate. We look forward to seeing what you can build on top of our Field Guide. Good luck with your app!

Comments (8)

 

A face for your field guide

17 August, 2011 16:42 by Simon O

Part Three: Interface Icons

The key to making your field guide app accessible and user-friendly for your audience lies in the design of the interface. In addition to this is the behaviour of the app. But for this blog post, we’re going to concentrate on the ‘look and feel’ and what you can do to make your app shiny and fresh on the inside.

In the previous post we scratched the surface of giving your app an identity by creating a splash screen and an icon. For this post, we’re going to look at some of the visual elements within the interface of the app.

The interface is comprised of the layout of the app, icons et al. And in the case of iOS, a lot of the hard work is done for us. With the Museum’s Field Guide, we based our layout for the iPad app on interface recommendations specified in the Apple Human Interface Guideline (HIG) documentation. There were a few reasons for this, which above all was that we wanted the interface to be familiar to iPhone/iPad users and new users alike as well as preventing the interface from getting in the way – letting the content be the feature. In addition we added specific icons and elements tailored to the Museum’s fauna content. For example, each animal species page has an image gallery, audio browser and ‘widgets’ that we created to display distribution information and the endangered status.

Let’s begin by taking a look through each of the visual elements that make up the Field Guide app. First and foremost is the main menu that contains access to the animals. This is the ‘Animals by Group’ home screen menu on the iPhone and iPod Touch or the menu on the left of the iPad app, which can be accessed by tapping ‘Animals’ when in portrait mode. Each top-level navigation item displays a silhouette icon of the animal group and once tapped displays a secondary navigation containing a square thumbnail photo of the specific animal. So let’s have a look at these closer and get a bit technical…

  

Animal Type Icons (top level navigation)

Each of these has a silhouette icon with two instances or ‘states’ – a default state in which a light grey icon is displayed and then a white icon in its active state (when the user taps on it). Of course you can make these any colour you like, however it’s best to always have the active state white, so that when tapped it ‘reverses’ out from the active blue highlight that surrounds each item in the list, matching the white text of the item.

Icon StatesActive state of an animal group, in this case, Butterflies.
Image: Simon O'Shea
Source: MV

It is also best to create your icons as a vector or line-based image rather than a pixel-based image. This means you can increase or decrease the dimensions of the image in future, without losing any quality of the original image. Vector images can be drawn with a software package such as Adobe Illustrator, Corel Draw or Inkscape.

Vector iconsVector icons.
Image: Simon O'Shea
Source: MV

Once you have the look of each icon, you need to determine the size and file type for export. It might be an idea to transfer your vector files to a pixel-based editor for the export process. An application like Adobe Photoshop, Fireworks, GIMP or Paint.net is best. You need to create two versions of each icon, one with default dimensions for iPad screens and iPhone and iPod Touch screens which are earlier than 4th generation. You also need to export versions of these for the Retina Display, which need to be double the dimensions. These versions should be exported as 72ppi 24-bit or 32-bit PNG files with transparency. In the Field Guide the icons need to fit within a width and height of approximately 60 pixels (120px for hi-res Retina). I’ve made our animal icons 56px × 43px each and 112px × 86px for the hi-res Retina Display. Therefore for each icon we need four files in total – one default state, one active state, one hi-res default state and one hi-res active state.

Resources:

 

 

Comments (0)

 

A face for your field guide

5 August, 2011 15:42 by Simon O

Part Two: Splash Screens and App Icons

In the first post of this series, we illustrated how to create optimised versions of your photos at various required sizes for output. Using these same principles, in this post, were going to show you how to create images for your splash screen and home screen.

One thing to think about if you havent already is the visual identity of your field guide. What will it look like in terms of a logo, branding, colours and featured imagery? This is based on your intended audience and the feeling you'd like to convey. Also give some thought to the consistency of the brand across the various aspects of your app. Using only one or two typefaces and a consistent colour scheme helps your app appear not just professional, but like you've put some thought into how your app represents your content, which you've no doubt been crafting for a long time. If this all sounds foreign to you, its worth getting a graphic designer involved to help you through this process. 

So once you have a look that would make Beyoncé jealous, youll need to think about what it is you want to display when your users start up the app the splash screen or launch image. This is the first thing users will see once they launch your app. It only shows for a few seconds, so keep it as simple as possible. Think of your splash screen as a billboard. If you're driving down a freeway and see an advertisement on the side of the road, you've got a couple of seconds (if that) to read it. So it's best to save that essay for inside the app.

As far as technical requirements are concerned, there are a few versions to consider. For an iPad app splash screen, youll need a PNG or JPEG image with dimensions of 768 x 1004 pixels. The iPhone and iPod Touch splash screen requires a 640 x 960 pixel image for the Retina Display (Apples 326ppi high density display). You'll also need to supply a version at half the size (320 x 480) for iPhones and iPod Touches that arent young enough to have a Retina Display. Here are some examples of the screens we created for the Museum Victoria Field Guide..

 Splash Screens from MV's Field Guide

To get a feel for how your splash screen will look in the real world, you may like to preview these at their native size on the device before you proceed with development. One way to do this is to import the images into iPhoto and then sync them with your iPhone, iPod or iPad.

There is one more image that your users will see before theyve launched your app in fact, before they've even downloaded your app which is the application icon. This is used as an icon on the home screen as well as acting as a badge in the app store. This must be an opaque square image with 90 corners. Apple requires that you provide this with dimensions of 57 x 57 pixels, 72 x 72 pixels for iPad, 114 x 114 pixels for Retina Display and 512 x 512 pixels for the App Store. In iOS, your icon will automatically be displayed with rounded corners and a drop shadow. Your icon will also have reflective shine unless you create a pre-composed image, which you can specify in your apps Info.plist file.

For further information on these image specifications, you can view the Image Creation Guidelines on Apples website.

Comments (8)

 

A face for your field guide

11 July, 2011 10:10 by Simon O

Part One: Optimising Your Images

In this series of blogs were going to discuss the visual aspects of your app and how we approached the design of Museum Victorias Field Guide app. In later posts, I'll cover the design and branding of your app which is seen most prominently on the splash screen and home screen, I'll run you through how to make interface elements such as icons and how to create layouts to display your data, using HTML and CSS.

In this post we're going to focus on the main images of the Field Guide app in this case the photos of the animals. Before we jump straight in, you'll notice that when you select any animal in the Field Guide app that there is at least one hero image for each animal and sometimes multiple images as you can see indicated by the gallery module. There is also a square thumbnail image for each animal. These appear next to each individual animal within the Animal Groups and are usually the same as the first hero image.

So let's take the European Honey Bee or Apis mellifera as an example. If you search for it in the app, it appears like so (Figure 1). It has a thumbnail in the Insects listing as well as three images in the gallery of the main panel.

 

European Honey Bee (Apis mellifera) on the iPad app. Required image assets highlighted in colour.European Honey Bee (Apis mellifera) on the iPad app. Required image assets highlighted in colour.
Image: Simon O. Photo Credit: Flagstaff Studios
Source: Museum Victoria

The thumbnails should be a square crop of the original image. We found that saving them at dimensions of 150 x 150px was optimal for both the regular iPad and iPhone Retina displays.

Full-size images in the app should not be larger than 1024 pixels in both width and height. So, for example, you could have a landscape image at 1024 x 680px and it would work just fine. The reason you need to keep it within these dimensions is so that you can keep the memory down on the users iPad or iPhone and therefore the images will scroll, pan and zoom without any lag.

 

Original images (left) and exported images and their dimensions (right).Original images (left) and exported images and their dimensions (right).
Image: Simon O. Photo Credit: Flagstaff Studios
Source: Museum Victoria

Once you've set the right dimensions on your image, you need to export them at a suitable quality. Obviously, you want your images to look nice and sharp and free from artefacts, but if you've got a lot of images, you'll need to find a compression rate that will also keep the file size reasonably small. In this case, photos are best exported as JPEG files. You may also save your files in 24 or 32-bit PNG format, however this will produce larger file sizes.

To apply these settings, use an application such as Adobe Photoshop, or a free alternative like GIMP or Paint.net. For large groups of photos, you can save time by setting a batch process using actions in Photoshop, Lightroom or Aperture.

Be sure not to overwrite your original photos as you may need to export at larger dimensions for future versions of the iPad (or other tablets), which will likely have a higher pixel density.

Good luck and feel free to ask questions or make suggestions by posting a comment below.

Exporting an image of the European Honey Bee (Apis mellifera) with Photoshop’s Save for Web dialog. On the left is the original image and on the right is a 50% JPEG. Notice the slight artefacts around the bee’s antennae.  This will barely be noticeable once on the mobile device.Exporting an image of the European Honey Bee (Apis mellifera) with Photoshop’s Save for Web dialog. On the left is the original image and on the right is a 50% JPEG. Notice the slight artefacts around the bee’s antennae. This will barely be noticeable once on the mobile device.
Image: Simon O. Photo Credit: Flagstaff Studios
Source: Museum Victoria

 

Comments (3)

About this blog

We've released the source code for MV's Field Guide Project under a MIT style license. This blog will help you identify all the material you need to collect so that you can publish a field guide of your own.

MV's Open Sourced Code on Github

View all Museum Victoria's apps

Blog authors

Simon S is the programmer behind the field guide app.

Simon O is the designer behind the field guide app.