The recently announced 360appmaker app provides different screens of information within the app framework. This post shows samples of each screen, the content options and layouts available. The screens are; Basic, Home, Menu, Profile, Tours, Contact and Offline
Note: enlarge any image by double clicking on it
360appmaker website
Basic
Note: when you create your first mobile app using 360appmaker the initial startup screen, seen on load, is the one below. In order to have a fully branded app it has to be published to the Apple iTunes Store or to the Google Play Store. If this is the intention then the first screen called Basic contains the Splash Images for mobile and tablet loading screen. If you aren’t publishing to the stores then any images you upload to the Basic screen will not be used.
iPad Startup Screen
Home
After loading is complete the first screen shown is the Home screen.
iPad Home Screen
Backend Functionality:
Button Background Color
Font Color
Background Image (mobile and Tab/iPad)
Headline
Tour Button Text
Description
Screen Interaction:
Hamburger button opens Menu Screen
Tour Button opens Tour Screen
Menu
Tapping the ‘Hamburger’ button in the top right corner opens the Menu screen.
iPad Menu Screen - Grid Modal
Backend Functionality:
Layout (4 different options - Toggle Left, Toggle Top, Grid Modal, Bottom Navigation)
Screen Titles Text (Home/Profile etc)
Display Name (in this example, Tony Redhead)
Background Fill Color
Font Color
Background Image (mobile and Tab/iPad)
Display Image
Screen Interaction:
Named buttons take you to the relevant screens
Close takes you to the Home screen
Login takes you to the Offline screen
Layout Versions:
Toggle Left
Toggle Top
Bottom Navigation
Profile
Tapping the Profile button takes you to the Profile screen
iPad Profile Screen - Style 2
Backend Functionality:
Layout (4 different options - Style 1-4)
Profile Description
Social Media Links (Facebook/Twitter/LinkedIn)
Background Fill Color
Font Color
Cover Image (mobile and Tab/iPad)
Profile Image
Screen Interaction:
Social Media buttons take you to the relevant sites
Layout Versions:
Style 1
Style 3
Style 4
Tours
From the Home screen or the Menu screen tapping the Tours button takes you to the Tours screen
iPad Tours Screen - Style 4
Backend Functionality:
Layout (4 different options - Style 1-4)
Background Fill Color
Font Color
Tour Tags
Tour Types (RoundMe, Kuula, Matterport, 360Cities, Veer, Google Street View, Amazon S3)
Backend Functionality Tour Settings:
Heading Text
Platform Type
Embed Code
Add Tags
Add Description (Optional)
Preview Image
Screen Interaction:
Tapping on a Tour preview opens the tour
Tapping on the Vertical Slider button in the top left opens the Platform and Tag filter window
Platform and Tag Filter window
Layout Versions:
Style 1
Style 2
Style 3
Contact
From the Home screen or the Menu screen tapping the Contact button takes you to the Contact screen
iPad Contact Screen - Style 1
Backend Functionality:
Layout (4 different options - Style 1-4)
Name/Company Name text
Message Text
Address Text
Contact Number
Email Address
Background Color
Font Color
Cover Background Image (mobile and Tab/iPad) - only used on Style 4
Screen Interaction:
Tapping on Phone number initiates a call (not valid on style 4)
Tapping on Email address initiates an email (not valid on style 4)
Layout Versions:
Style 2
Style 3
Style 4 - Image
Offline
From the Home screen or the Menu screen tapping the Offline button takes you to the Offline Login screen
iPad Offline Login Screen
Functionality:
Upload zipped tour file via iTunes on Mac or direct load on Android
Screen Interaction:
Sync All Tours button
iPad Offline Tours Screen
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
