Designing iOS apps that rock!

  • View
    335

  • Download
    0

Embed Size (px)

Transcript

  • Joey Rigor Kontak Mobile Apps March 4, 2016

    Designing

    apps that rock!

    iOS

  • This post is about

    the lessons we learned about designing iOS business apps.

    The same concepts can also be used for building mobile apps in other

    platforms.

  • your company is ready to embrace theOK,

    mobile world.

    A common challenge mostcompanies face is how to transform a desktop

    system into a mobile app.

    Now, where do we start?

  • Start with the user experience.

    Wikipedia defines user experience (UX)

    as referring to a person's behaviours, attitudes, and emotions about using a particular product, system, or service.

  • Forget about how your desktop app looks like

    and how it runs.

    Heck, that desktop app is already running for 10-20 years and you

    already know the business requirements by heart.

    Start from

    scratch.

  • What you dont know (and should know)

    is how to integrate these business requirements

    into the design of a mobile app.

  • Do not make the mistake

    of just trying to fit the desktop interface to the smaller screen of your target device and then call it

    a mobile app.

    It doesnt work that way. Really.

  • Think about the design.

    The picky details and obsession to perfection is

    what drives Apple designers and engineers to

    create Great Apps.

    Steve Jobs is known for pushing the design of Apple products to

    extremes.

  • So how can we adopt this

    discipline?

  • Apples Human Interface

    Guideline is a good

    reference.

    The guideline is about how an app

    should look like and how it should run.

    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

  • To attain this, developers shoulduse the same basic UI concepts and

    elements in building it.

    Apple just wants all the apps in their store to have the same exceptional user experience.

  • Building an app that

    rocks

    should capturethe following core concepts:

  • Simplify the interface. Only use elements that complements each

    other.Avoid adding visual objectsthat overwhelmsthecontent.

    The content should be the focus. Everything else is secondary. Your design should primarilyconsider how the content

    will be shown.

    Deference.

  • Don't overwhelm your screen

    with too much unneeded visual

    elements.

    Before adding anything to your screen, always ask

    the questions - Is this necessary? Will

    it helpfocus the content?

  • Negative space alsobring focus

    and clarity to the content.

    Negative spacing

    (or blank spaces) gives breathing

    room.

  • Clarity.

    Picking the right colours and appropriate font can suggest which elements are tappable, highlighted,

    neutral or subdued.

    Colour and font are twoaspects that makes or breaks your design.

  • This is the majorarea iniOS app design that Apple explained thoroughlyin their

    documentation.

    It isalso the most time consuming aspect of design - trying the bestcombination of

    font and colour toyour interface.

  • The function of icons

    and buttons should always be

    obvious.

    Do not use an icon or button that users are not familiar with.

  • The objective of every screen should be clear.

    The user interaction that goes with it should be easily perceived and self explanatory.

    Users should know what to do next.

  • Depth.

    In real life, when you go to one roomto another, you get a sense of motionand distance. That way

    you don't get lost. That same concept should be applied to the user interface."

    https://designcode.io/iosdesign

    Depthisa very abstract concept, but at the same time very powerful.

    https://designcode.io/iosdesign

  • Animations andtransitions of screensare built-in in Xcode (the development platform

    foriOS) and you canexecute it easily.

    But use it subtly and don't overdo it.

    Excessive animationswill become distracting (even

    irritating) over time.

  • Use it wisely to create an exciting and unique user

    experience.

    Your app should be

    'fun' to use.

  • To summarise, the core design concepts to make your

    mobile app rock are:

    There you have it.

  • Clarity

    Colour and font. Icons, buttons and

    screen.

    DeferenceFocus the content

    Simplify the interface.

    Negative space.

    Depth

    Animations and transitions.

  • Yup, I know these concepts are pretty

    deep.

    The next post will show how we use it to build our iOS B2B app.

    Learn on, grasshopper. The night is still young.

  • AboutMe

    My blogs will try to convince everybody to learn how to code. How to become creators of technology.

    This became a passion as I see people using technology in their daily lives but have no idea how it works. Sadly, almost

    all of us are mere consumers.

    As a software developer, I have always been interested in learning technology and how I can share what Ive learned

    specially to others with professions outside my field.

  • This is part of a series of posts about how I can convince you to be a coder.

    Stay tuned, grasshopper.

    To know more about our company and other blogs, just click the link below:

    www.kontakios.com

    What now?

    http://www.kontakios.com