Mobile UI and UX Design

Examine device agnostic design trends, contrast design patterns and anti-pattern, and evaluate responsive and adaptive approaches, including a wrapper and the hamburger menu, for stronger cross-device user experiences.

Emphasize performance-centric design by prioritizing speed and matching development choices to optimize mobile user experience. Light apps—single-visit, socially shared mini sites—are a China-origin trend, as seen in Coca-Cola's anniversary app.

Discover how live updating delivers real-time content through interactive device-to-server communication and how cloud-based collaboration tools like Adobe Creative Cloud enable syncing and teamwork across devices.

Explore geolocation to deliver content near users, as apps like Yelp request location access to surface relevant results and experiences across mobile UI and UX design.

Explore leveraged services and API employment in mobile apps, highlighting Facebook login for sign up and log in with credentials. Embrace this approach as a common practice across apps.

Examine how personalization and user data drive content-first mobile experiences, using gesture-based interactions, modular design, hidden menus, and social sharing to keep focus on content.

Explore how recent trends shape modern, easy to use mobile UI and UX, featuring flat design, ghost buttons, gestures, and design patterns, with hands-on exercises and a quick quiz.

Apply some of the trends we've explored to your project in the second exercise, and enjoy these practice exercises.

Conduct discovery and planning to establish project requirements through stakeholder interviews, then create a concise requirements document outlining purpose, objectives, brand identity, and core functional and technical features and processes.

Identify technical requirements with a developer, decide native vs web, authentication, API usage, and supported devices, while outlining a device list, risks, user needs, and differentiators.

Define use cases as goal-driven interactions, craft user stories of who, what, and why, and research by prototyping, testing with target user groups, and creating personas when needed.

Create a comprehensive user story document for early user research by interviewing users and observing contexts. Use goals, actions, and flow to inform wireframes and usability testing.

Interview clients and stakeholders to define objectives, brand identity, functional and technical requirements, and risks, then conduct user research and competitive analysis to plan the navigation model and differentiators.

Learn how to research competitors to identify differentiators, translate insights into practical design strategies, plan usability testing from wireframes to high-fidelity prototypes, and define kpis to guide what to test.

Translate requirements into a visual, low-fidelity wireframe that defines layout, real estate, interactive elements, and navigation concepts within iOS guidelines.

Explore mobile navigation patterns, including persistent primary, transience primary, and secondary patterns, with examples like springboard, list menu, dashboard navigation, tab menu, and drawer.

Design wireframes for every view using your selected navigation pattern and device guidelines, defining interactivity, flows, and layouts that meet user needs and project goals.

Explore step-by-step wireframing from requirements and central view with global elements to a clickable prototype. Compare free and paid tools—from pencil and paper to Balsamic and cloud-based options—for collaborative prototyping.

Evaluate and revise your mobile UI by testing a clickable prototype, gathering stakeholder feedback, and using a walkthrough and wireframe to refine navigation and prepare for visual design.

Build a basic wireframe prototype by choosing tools, devices, and three use cases, define a navigation pattern, and export a clickable prototype using balsamic and uxpin.

Turn wireframes into polished high fidelity designs by shaping a visual language with color, style, and icons. Apply semantics and consistency to intuitive UI across iOS, Android, and Windows guidelines.

Explore how visual hierarchy shapes high fidelity UI design by applying conventions, F-pattern and Z-pattern scanning, and emphasis through size, weight, color, and alignment to guide the user's eye.

Explore color theory fundamentals and palettes for UI design, apply complementary, analogous, triad, and monochromatic rules, using hue, saturation, value, tint, shade, and tone to create contrast and visual hierarchy.

Develop brand identity in UI design by aligning color, fonts, and style with the brand essence while prioritizing usability. Use typography and font pairing to convey mood and ensure legibility.

Explore typography in design by understanding concordant and contrasting fonts, using weights, colors, and sizes to create hierarchy; use Photoshop, Illustrator, and Adobe Creative Cloud for high fidelity visuals.

Explain design decisions and value clearly to stakeholders through a polished presentation document with clear captions and visual hierarchy, then complete an exercise to craft and present a design pitch.

Design and align mobile app interfaces with the overall user experience, compare native and web-based approaches, and prepare documentation, assets, and code for developers using native wrappers like PhoneGap.

Explore how clear documentation and wireframe anatomy guide development through architecture views, requirements alignment, and high-fidelity design references, with options for revisions and style guidelines.

Deliver editable master files, including layered Photoshop and Illustrator assets, PNG and DNG graphics, and reference them in the style guidelines while coordinating device-specific asset versions.

Explore how hybrid and web based apps use cssa and javascript for the UI, and how designers coordinate with developers through design audits and documentation to protect design integrity.

Master the mobile user interface design process from discovery to fidelity; define requirements and devices, study users, and apply wireframes, visual hierarchy, void space, and brand identity with best practices.