Skip to main content

iOS Concept & Design

First: Get an iPad yourself and use it. Use it privatly at home. Again: Use it! (sic!)

Have a look at the native app designs: Mail, Safari, Contacts, Calendar, ...
Apple iPad built-in-apps
Understand their approach and pay attention to the transition between portrait and landscape

Read and understand the Apple iOS Human Interface Guidelines

Keep in mind that you are designing for a multi-touch device
Touch Gesture Reference Guide

Now what is the starting point?
Design an application from scratch?
Display data from an existing data source?

The definition of use-cases is a good starting point.
If you have existing data it is very useful to know all data available and the connections between the data. Ask for an entity relationship model.

Create a functional design, e.g. on paper
Free printable iPad design template stencils (PDF)
iPad Stencil Kit (Pen & Paper)
iMockup iPad App
iPad Sketch Elements AI
Omnigraffle iPad stencil
  • collaborating on ideas
  • wireframing
  • storyboarding
  • interaction design
  • presenting ideas to clients

Check your functional design with the developer, too!

Some more collections:
GUI Stencils and Wireframing Kits for iPad App Designers
iPhone and iPad Development GUI Kits, Stencils and Icons

Export graphics required as PNG. Agree with the developer on file naming conventions.

Comments

Post a Comment

Most Favorite Posts

Dark Theme (Dark Mode) in Android WebViews, WKWebViews and CSS

So your apps just implemented a shiny new dark theme and it’s looking 👌 There are lots of benefits to having a dark theme in your application, and having it consistent throughout your application allows for a great user experience. But what happens when the the user runs into a WebView in your app? Support: if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... } Set: WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON) Current setting: val forceDarkMode = WebSettingsCompat.getForceDark(webView.settings) Joe Birch Assuming your question is asking how to change the colors of the HTML content you are displaying in a WKWebView based on whether light or dark mode is in effect, there is nothing you do in your app's code. All changes need to be in the CSS being used by your HTML content. CSS dark mode via :root variables, explicit colors and @media query: :root {     color-scheme: light dark;         --h1-color: #333;
Post a Comment
Read more

Alpha Apps vs. App Unbundling

Aktuell wird viel über das Modell der "Alpha Apps" und "App Unbundling" gesprochen. Hier kurz eine Übersicht und meine 5 cents: Alpha Apps Die chinesische App WeChat geht noch weiter: Neben einem Messenger, vergleichbar mit WhatsApp, bietet sie einen Lieferdienst à la Lieferando, die Möglichkeit etwa das eigene Konto zu checken (wie sonst bei der Bank-App) und gleichzeitig die Chance etwa Promis zu folgen, wie es Twitter bietet. Solche Alpha-Apps können dadurch verschiedene Aspekte und Möglichkeiten des Internets verbinden und werden so zum idealen Zugangsportal zum Netz – so wie traditionell der Browser am Computer. Den Tod des Browsers bedeutet das aber noch lange nicht. Der Browser ist tot, es lebe der Browser! Wirtschafts Woche App Unbundling Unbundling steht für das Unterteilen von Apps oder verschiedener Funktionen in mehrere, eigenständige Applikationen. Aber nicht jede Unbundling Aktion wird positiv von Usern aufgenommen. Facebook Messenger
Post a Comment
Read more

Server-driven UI (SDUI): Meet Zalandos AppCraft and AirBnB Lona

A short WTF: Joe Birch:  SERVER DRIVEN UI, PART 1: THE CONCEPT Zalando seems to follow the SDUI principle as well - defining a common design language and construct the screens on the backend while displaying them natively on the clients. They even go one step further; they implemented a mighty toolset to enable non-technical stakeholders to define their own native app screens Compass: Web tooling to create screens and bind data Beetroot: Backend service that combines the screen layout definition with the data Lapis/Golem: iOS/Android UI render engines Crazy cool! Good job, guys (when you do an open-source release?) To even move faster a Flutter based UI render engine implementation was great! See also AirBnB Lona SDUI approach Building a Visual Language Why Dropbox sunsetted its universal C++ mobile project and AirBnB its React Native implementation
2 comments
Read more

Backend-driven native UIs

Backend-drive native UIs John Sundell  Slide Share Using Back-End Design to Create Customizable Front-End Mobile Experiences By controlling the front end of mobile apps from the back end we can build customized experiences at runtime, creating cleaner interfaces and reducing load times. Nithin Rao UX Magazine The Hub Framework Welcome to the Hub Framework - a toolkit for building native, component-driven UIs on iOS ( no Android support released yet ). It is designed to enable teams of any size to quickly build, tweak and ship new UI features, in either new or existing apps. It also makes it easy to build backend-driven UIs. The Hub Framework has two core concepts - Components & Content Operations. Spotify LeeGo: Build UI without UIView LeeGo is a lightweight Swift framework that helps you decouple & modularise your UI component into small pieces of LEGO style's bricks, to make UI development declarative, configurable and highly reusable. Wang Sheng Jia
Post a Comment
Read more

Judo App - Server Driven UI out of the box

Judo App Judo brings server-driven UI to your iOS and Android apps. Build user interfaces visually in a fraction of time and publish them instantly without submitting to the app store. Build Experiences - With No Code The Judo app for macOS, available through the App Store, is built for design professionals with common keyboard shortcuts and familiar concepts like canvas, layers and inspector panel. Workflow is streamlined with the ability to drag and drop media files directly into your experiences and manage your own Judo files in Finder. Manage Creative Execution A Judo experience is interactive and can include text, images, video and buttons. An experience may be part of a screen, a single screen, or more typically multiple linked screens. Judo supports screen transitions, carousels, horizontal scrolling and modals. Clients can add custom fonts and define global colors and these are updates applied universally. Effortlessly Deploy Judo Cloud syncs your experiences with your iOS and
Post a Comment
Read more

NUI - Style iOS apps with a style sheet, similar to CSS

NUI is a drop-in UI kit for iOS that lets you style UI elements using a style sheet, similar to CSS. It lets you style an entire app in minutes. @primaryFontName: HelveticaNeue; @secondaryFontName: HelveticaNeue-Light; @primaryFontColor: #333333; @primaryBackgroundColor: #E6E6E6; Button {     background-color: @primaryBackgroundColor;     border-color: #A2A2A2;     border-width: @primaryBorderWidth;     font-color: @primaryFontColor;     font-color-highlighted: #999999;     font-name: @primaryFontName;     font-size: 18;     corner-radius: 7; } NavigationBar {     background-tint-color: @primaryBackgroundColor;     font-name: @secondaryFontName;     font-size: 20;     font-color: @primaryFontColor;     text-shadow-color: #666666;     text-shadow-offset: 1,1; } GitHub
Post a Comment
Read more