Introduction

The purpose of the content of this document is to overview the use of the design style and to present the consistency of the visual elements used in this iOS application. It is a presentation of the design choices made and their alternatives to show the creation process and its final product turning into a working system. By introducing our design patterns we would like to introduce the consistency we stress on and the ease of using the iOS application delivered to the NanoAndMore GmbH clients.

User Interface Typography

The primary typeface is Helvetica Neue Regular with a secondary Helvetica Neue Medium to complement the primary used typeface. These have been selected to best represent the overall design aesthetic integrity and consistency with iOS 7 design principles.

Interface Colors

Application Design

Searching, Finding and Requesting Products, in a slick and modern manner. iOS 7 fully compatible design and functionality.

iOS 7 fully compatible alternative design suggestion based on wireframe stage.

 

Application Icon Design

NaM iOS Icon Design Set and a couple alternatives.

  

 

NaM Application Storyboard

This is a design stage of the storyboard of the NanoAndMore iOS application.

NaM App Storyboard revelation

The following frames are showing the Home screen. The functionality behind all the tappable areas (the tab bar buttons at the bottom, the navigation bar at the top) are very straight forward. Also we decided to use very common functionality based in iOS 7 – “drag”, to expand the News Articles section if desired by the user.

“Menu Screen” and “Quick Search Screen” are accessible from “Home Screen” by tapping on their icons. These screens are most easily accessible for the users and should come handy anytime when needed.

“Request for Quotes Screen”, “Region Settings Screen” and “Advanced Search Screen” by tapping the respective category from the “Menu Screen” (or by tapping the respective button from the tab bar). By tapping the active zones you will be provided with more navigation options or information. Please refer yourself to anything common for iOS. By tapping any blue arrow you will expand the respective sections.

These are your region settings. By tapping the “Use Current Location >” button, you will let your device automatically determine your location. Manually selecting your region is also available. On the “Locating Screen” you could make sure your device have determined the correct location to be used. If so tap on “Use This Location”. “Unable to Identify Your Location Screen” shows up in the cases when your device is unable to automatically locate you.

By tapping any “Product Category” from the Home Screen or using search options available to you on “Quick Search Screen” or “Advanced Search Screen”, you will be provided with “List of Products Screen”. By tapping “Filter Options” button you will access to options for narrowing down the product list. Simply choose your criteria and apply your filter.

By tapping on a product listed in your “List of Products” you will access the “Product Screen” where you will find detailed information about the chosen product. “Packages and Prices” is the section where you could request a quote about the product. By tapping on the quantity box you will recall a slider to choose a desired quantity. Next you could tap on the “Quote Req >” button to get to the “Requests for Quotes Screen” to organize your Quote Request. When ready, by tapping on “Send Request >” button, you will be prompted to provide information about you and your organization on “Your Information Screen”.

“Lists Screen” is accessible to you by tapping on the “Lists” button in the tab bar. This is the place to find your “Favorites” and “Featured” products. Switching between these lists happens when you tap on the respective button. “Favorites” is a list containing products you have previously added to this list by tapping the “Star” button on any Product Screen. “Featured” is a list containing products specifically chosen for you. By swiping left on any product you will get options, to modify your list as desired.

By tapping on any News Headline from “Home Screen” you will navigate to “Full Article Screen”. Drag down to scroll down and read this article.

Conclusion

NaM iOS App Overview is an introductory guide document that provides an overview of the design elements that will have an impact on the development process. You should use this document to:

– Orient yourself to the NaM iOS application platform
– Learn about the design aesthetics and get familiar with all the visual integrity, which implementation will happen in the development stage
– Learn about key functionality of the application
– Learn about key functionality of the application
– Get tips and guidelines on how to use NaM iOS App

This document does not provide information about the user-level content of the application.