{"id":4357,"date":"2019-06-16T15:00:00","date_gmt":"2019-06-16T13:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/how-to-design-a-mobile-app-using-user-interface-design-principles\/"},"modified":"2021-08-06T12:09:38","modified_gmt":"2021-08-06T10:09:38","slug":"how-to-design-a-mobile-app-using-user-interface-design-principles","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/how-to-design-a-mobile-app-using-user-interface-design-principles\/","title":{"rendered":"How to Design a Mobile App User Interface Like a Pro"},"content":{"rendered":"

If you want to design a great, functional mobile app interface, you\u2019re in the right place.<\/strong> In this guide, I\u2019ll walk you through the key principles of mobile app design<\/a>. I\u2019ll then discuss how we\u2014and you\u2014can conceive of and build requirements for our designs, and how these designs can be implemented. Finally, I take you through the all-important testing of your designs and a few next steps.<\/p>\n

Tempted to jump right in and get started with the designs?<\/strong> I felt much the same way when I first started out as a UI designer over ten years ago, but I strongly recommend you brush up on the theory before you dive into the practise.<\/p>\n

Why? Because design principles are hugely important. Design principles<\/a>\u2014commonly called heuristics<\/a>\u2014are loose guidelines that designers can stick to in order to improve the quality of a user interface design and, ultimately, accelerate your delivery time. If you\u2019re seriously thinking about becoming a UI designer<\/a>, you need to pay attention!<\/p>\n

To reiterate, in this guide, we\u2019ll cover the following topics:<\/strong><\/p>\n

    \n
  1. UI Design Principles<\/a><\/li>\n
  2. The Mobile App Design Process: What Are We Building?<\/a><\/li>\n
  3. The Mobile App Design Process: How Do We Build it?<\/a><\/li>\n
  4. How To Test Your Designs<\/a><\/li>\n
  5. Next Steps<\/a><\/li>\n<\/ol>\n

    If you\u2019re more of a visual person, don\u2019t forget to check out the video I made demonstrating exactly how to build a mobile app using design principles, you\u2019ll find it half way through this post.<\/em><\/p>\n

    1. UI Design Principles<\/h2>\n

    When used together, design principles make the UI designer\u2019s job<\/a> much easier. They remove a lot of the guesswork and make interfaces more predictable and, therefore, easier to use.<\/p>\n

    Chris Mears from The UX Review<\/a> gave us this piece of advice on designing for mobile:<\/p>\n

    \u201cOne of the main use cases for mobile is killing time. But that doesn\u2019t mean you should waste that of your users. Make sure you understand the main tasks they want to accomplish on your app through research and make those the focus of the interface.\u201d<\/p><\/blockquote>\n

    Before we go any further, let\u2019s define six of the most common user interface design principles; the structure principle, the simplicity principle, the visibility principle, the feedback principle, the tolerance principle, and finally, the reuse principle.<\/p>\n

    The Structure Principle<\/h4>\n

    Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.<\/p>\n

    The Simplicity Principle<\/h4>\n

    The design should make simple, common tasks easy, communicating clearly and simply in the user\u2019s own language, and providing good shortcuts that are meaningfully related to longer procedures.<\/p>\n

    The Visibility Principle<\/h4>\n

    The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don\u2019t overwhelm users with alternatives or confuse them with unnecessary information.<\/p>\n

    The Feedback Principle<\/h4>\n

    The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.<\/p>\n

    The Tolerance Principle<\/h4>\n

    The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.<\/p>\n

    The Reuse Principle<\/h4>\n

    The design should reuse internal and external components and behaviors, maintaining consistency<\/a> with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.<\/p>\n

    Hannah Alvarez of UserTesting<\/a> gave this advice for UI beginners in the ebook, Getting Out of the Office: Testing Mobile App Prototypes With User<\/a>:<\/p>\n

    \u201cEver heard the saying, \u2018Measure twice, cut once?\u2019 Well, that idea applies to building apps, too. When you\u2019re designing an app, you can verify you\u2019re on the right track and avoid doing costly rework by user testing your prototypes. You can iron out the kinks in the design before you\u2019ve written any code, saving your team the time and hassle of making changes in development. Plus, you\u2019ll already know how users will receive your product before it hits the app store.\u201d<\/p>\n

    In what follows, I\u2019m going to show you how you can put these principles to use to create a functional and clean mobile user interface. If you\u2019d like to dive even deeper into these design principles, our UI Design Course here at CareerFoundry<\/a> will teach you everything you need to know about how to use UI design principles to create beautiful and functional mobile app designs.<\/p>\n

    Let\u2019s get started!<\/p>\n

    Check out my video below, where you\u2019ll learn how to design your first mobile app!<\/em><\/p>\n