Phone UI Design Preliminary Notes.

1. UI
It’s Phone User Interface,
Josephine
Rajib Hossain Pavel
360
MA, USA

2. ❏ A great app starts with a great user
interface. It’s the face of the app.
❏ Designing for heterogenous Display Profiles
is challenging.
❏ Device Orientation, Display Size, Input
Method,Viewing Distance are to be
considered well.
The Face, the Front

3. Stages of UI Design
❏ Concept
❏ Structure
❏ Interaction
❏ Visual
❏ Prototype

4. Concept-Define the Purpose
❏ We need to make a GREAT AT statement. This
will give us a single scenario that we want to
focus on.
❏ We need to focus on the scenarios we want
users to experience in our app.It’s important to
know what our users will be able to do as
opposed to what our app will be able to do.
❏ We need to apply DESIGN FUNNEL.

5. Structure-Architect Information
❏ From App Owner perspective, it’s the
Information Organization that provides
unique Identity.
❏ From User perspective, it’s the Information
Discovery that provides unique Experience.
❏ We need to make sure the Navigational
Model follows right Information Architecture.

6. Interaction-Execute the Purpose
❏ Interaction is all about motion. The right
motion capabilities will determine fluidity and
ease of use from one page to the next.
❏ Our app flow should be tightly tied to our
GREAT AT statement.
❏ Wireframes help us make critical decisions
about our app's user flow.

7. Visual-the Look and Feel
❏ Great visuals define not only how our app
looks, but how it feels and comes alive
through animation and motion.
❏ We should remember Content is the King.
Let the content dictate the structure of app.

8. Prototype-less than complete app
❏ Prototype is a stage where the artifact
representing your idea develops into
something more than a sketch, but less
complicated than a complete app.
❏ We can use IONIC, FRAMEWORK 7 for a
quick app before going fully native.
❏ Iteration is critical for any successful app.

9. Responsive Design
There are six techniques as follows-
❏ Reposition
❏ Resize
❏ Reflow
❏ Reveal
❏ Replace
❏ Re-architect

10. First Impression
❏ Start Screen placement should represent our
App Brand and GOOD AT feature.
❏ The Splash Screen should load as fast as
possible, and remain on the screen only as
long as we need to initialize our app state.
❏ First Launch is important for discovering.
❏ Home Screen must showcase what app is
tailored to do.

11. App UI Pattern
❏ Navigation
❏ Hierarchy
❏ Peer
❏ Command
❏ Container
❏ Canvas
❏ Content
❏ Consumption
❏ Creation
❏ Interactive

12. Specific App UI Consideration
❏ Animation
❏ Contracts
❏ Controls and Patterns
❏ File, Data and Connectivity
❏ Globalization and Localization
❏ Help and Instructions
❏ Launch, Suspend and Resume
❏ Layout and Scaling
❏ Text and Input and Notifications
❏ User Interactions

13. Thank you very much.