Design Start Guide

These guidelines were written to give to clients designing a Pugpig app, which would then be developed by us at Kaldor, hence the specifics about design format etc. If you are doing the development yourself, feel free to ignore these specific requirements. 

Each platform should have the native parts of the app designed with the specific requirements of that platform in mind. For example, it should be taken into consideration that Android devices have a back button and iOS devices don't.

Chrome elements of the apps (these are the parts written in native code, for example the edition selector, the toolbar at the top of the screen, the thumbnails, the table of contents etc) Designs would ideally be provided in Adobe Fireworks format, or Photoshop. Other graphics programs can be used but Fireworks and Photoshop tend to provide most accurate and easy to use designs. These designs should show the full screen of the device in order to allow us to layout the elements as specified.

Using the default Pugpig functionality would require icon designs for;

1. Back to Edition Selector
2. Table of contents
3. Text-resize
4. Search
5. Share

Dimensions of the designs

The designs should be in real pixel size - rather than retina - so for example for an iPad in Landscape, the dimensions are 1024px x 768px. Bare in mind that the status bar (with the clock and battery) is 20px at the top of the screen. For Android, designs should be provided in a variety of device sizes and aspect ratios, to inform us of how to handle the various cases. If you have ‘hero’ devices - particular devices that you are specifically aiming at, use these in your designs.

Individual Assets

Assets such as publication icons or logos for the toolbar, should be PNGs with transparent backgrounds, cut out individually, and named using the following convention;

• regular : locationFunction.png
• retina : locationFunction@2x.png

eg,

• buttonShare.png
• buttonShare@2x.png

• labelLogo.png
• labelLogo@2x.png

More detail about icons and asset requirements for iOS: Asset Requirements

Retina Assets

Retina assets should be provided where appropriate. As with all individual assets, they should be PNGs with a transparent background. They should be exactly double the size of regular assets.

Transitions and Animations

Section Title

By default - there is no section title displayed in the chrome of the app.

Depending on the design requirements you may need to define a transition for the section title. This can sit in the toolbar, below the toolbar, or wherever you like on the screen. You can define a transition for this - for example maintaining the section title when the user is within a section, and only changing it when moving between sections.

As for the transition itself, it could be a fade, swipe, shrink, 3d rotate etc.

Showing/Hiding Table of Contents (TOC) and Thumbnails

By default - the TOC slides in from the right, and the thumbnails slide in from the bottom. These can be altered, the new transitions should still make sense to the user though.

Template designs should include examples of the devices and orientations you are supporting. For Android, designs should be provided in a variety of device sizes and aspect ratios, to inform us of how to handle the various cases. If you have ‘hero’ devices - particular devices that you are specifically aiming at, use these.

Where possible design ‘Mobile first’ and use responsive rather than adaptive web design. You can read more about it here

We prefer if you can send the assets using YouSendIt or Dropbox. Or if the file sizes are not too big then a zip attached to an email is fine.