Phone UI Design
Download as PPTX, PDF3 likes1,189 views
This document discusses the importance of user interface design for mobile apps. It outlines the key stages of UI design: concept, structure, interaction, visual, and prototype. For each stage, it provides guidance on important considerations like defining the app's purpose, organizing information architecture, designing interactions and flows, visual design, and prototyping. The document also covers responsive design techniques, first impressions, common UI patterns, and specific design factors like animation, controls, localization, and user interactions. Overall, it emphasizes that a great app starts with a great user interface that is tailored to the user's goals and device characteristics.
Phone UI Design
- 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.