An introduction to the world of apps.

Oumnia El Khazzani

Oumnia El Khazzani

over 5 years ago

An introduction to the world of apps.

Can you remember the last time you lived without apps? It feels like forever, but the first apps were launched “only” ten years ago. They have become such a seamless part of our daily lives that we merely survive without them.

Most app users don’t know what lies behind the pleasant designs and user-friendly experience.

If you have always wanted to get a peek into the world of mobile applications, here is an introduction to the core concepts.

Mobile Application:

A software designed to run on a mobile device (mainly smartphones). The first apps were brought to the world by Apple which transferred functionalities one could only find on a computer to the mobility and convenience of the smartphone. Apps are by definition limited and usually small pieces of software serving a defined value to the user (localization for Google Maps, online dating for Tinder, Photo editing for VSCO and so on).

Front-end:

All the elements of code related to the interface the user will interact with: heads, HTML code, CSS, web fonts.

Backend:

The supporting structure of the app allowing it to function. Databases, network, storage, these are all elements of the back-end. Back-end programming uses specific languages, some of them are Python, PHP or Ruby.

Back-End Database:

A database that is accessed indirectly by the user of the app, through the front-end. The front-end interacts with the back-end (see API), sending requests to the back-end which will interact with the supporting database.

Data Storage and Synchronization apps:

Simple storage applications: Amazon S3, Google Drive, Microsoft Azure Web Services. Multiple device synchronization services: Apple iCloud, Simperium, Parse Data, Dropbox Sync.

Full Stack:

Full Stack development refers to a developer taking charge of both the back-end and front-end of an app. As the boundaries between these two facets become thinner and thinner, the interactions and transfers have made app development more holistic, which is what is meant by “full stack”.

Metadata:

Information about the data of the platform, e.g. author, date of creation, versions, … There are different types of metadata: Descriptive: describes the data of the platform Structural: describes the structure of the data Administrative: describes access authorizations, date of creation and information to help manage the data. Metadata allows other systems to discover the app, organizing e-resources, identification and archiving. Metadata is key when it comes to publishing an app to the App Store as the platform will need to have access to that data.

MVP:

Minimum Viable Product. The start of the app lifecycle. This is a first minimalistic version of the app that allows teams (developers, designers, brand owner) to carry-on a first assessment of the app’s functionalities and look & feel. MVPs allow teams to align on the app before deep-diving into development. Based on the feedback from the client, we then take the app to a more sophisticated level of development.

Designs:

Apps are highly visual platforms. The design phase is a vital part of the process of creating an application. Design can go from very basic sketches, sometimes done on paper (see wireframes) to interactive prototypes allow the user to interact with the mock-up app. Some tools we use for design: Invision for interactive wireframing, Sketch for designs, Zeplin for sharing designs with teams, Abstract for design version control.

Low fidelity designs:

Basic digital layouts of the app. They are a static view of the app with high-level data - mainly, the layout.

High Fidelity designs:

A sophisticated representation of the app with more advanced designs (colors, sizing, images). These designs are often interactive.

Wireframing:

A static and low-fidelity representation of the final product with the overall layout and core controls. It is the basic architecture of the app. Wireframing allows teams to get a first feel of the app’s core functionalities before going further into the design stage. Wireframing is done through dedicated tools such as Sketch and Invision. It is usually quick to create.

Interactive Prototype:

A more visually sophisticated (high fidelity) presentation of the app including pictures, logos, colors, and fonts. Interactive prototypes also allow users to interact with the product id est perform tasks on the app as they would do on the final product. Prototypes are crucial to validate UI and the platform’s flow. It is the first stage of testing the platform.

User Experience (UX):

The experience lived when a user interacts with a device -phone, tablet, laptop. UX is defined by the usability of the platform as well as the emotional impact it creates on the user. UX is vital to the success of an app and so, it is at the forefront of any app development project.

UX Design:

The process of creating an experience for the user in interaction with a platform. That experience includes an emotional response from the user to the platform’s attributes. In a broader way, it is the process of creating solutions to enhance users lives.

User Interface (UI):

The (User) Interface the end user is going to interact with. The UI is the front end of the app with all the elements that will be displayed on the screen and available for the user to interact with.

Assets:

Building blocks of an app’s interface. Assets can be pictures, videos, audios, texts. They are the pieces of content that populate the app.

Workflow:

The user journey into the app. From the first action when the user opens the app to the last one, the workflow describes the paths the user can take when interacting with the app.

Model:

Parts of the code which are not UI related. This code is created to perform specific tasks regarding data management in the app (store information, upload images).

Architecture:

A scheme of all the elements that constitute an app, describing their interactions and relationships. The architecture guides developers when building the app, taking into account final product specs. The architecture divides a platform into several layers, commonly: backend, API, and frontend/UI. More precisely, the typical architecture of an app looks like this: Database System: databases for the app Persistence layer: management of storing and restoring data Data access layer: in charge of accessing the data and manipulating it Service layer: manages the logic of the platform and data manipulation UI layer: in charge of displaying content and interacting with the service layer (receiving/sending data from/to it)

An example of architecture (source: https://docs.microsoft.com/en-us/dotnet/standard/modern-web-apps-azure-architecture/common-web-application-architectures)

SDK:

Software Development Kit is a set of web tools allowing developers to build an app or website. An SDK includes libraries of code, programming tools, and documentation.

API:

Application Programming Interface, it is the interface plugged into a platform’s serve that allows communication with users’ devices. When a device connects to Instagram, for example, the device is interacting with the API of Instagram in order to receive information. Or, your app includes a Google Maps feature. Every time this feature is used, it will use the API to communicate with the GMaps server to exchange data and function properly.

Library:

Part of the software development kit, libraries provide to developers with ready-made codes for different purposes. Developers can use these bits of code to create the architecture of the app. Libraries are a great tool to avoid coding an app from scratch. A general good practice is to use the smallest amount of ready-made codes to lessen the risk of dependency on codes created by a third-party user (the library editor). This comes in handy when an upgrade of the code is needed. A developer using their own codes will always have control over the code and know the update history, whereas when using a third-party code, they are dependant on the coder’s updates.

Development:

The process of creating the technical architecture of the app. Development starts after wireframing with a technical feasibility assessment. Based on the wireframe created by the design team, developers provide feedback on the technical feasibility of what the wireframe presents.

Native code:

When creating a native app, programmers use a specific code to cater to the technical specs of the platform the app is destined for. They use native code. The native code for iOS is Objective C and Java for Android apps. When creating an iOS app, developers should be able to reach the full potential of native SDK and use it in an efficient way. Developers should always use native code when creating an app for a specific platform as it ensures the app will function properly on the platform.

Creating an app is an all round job: it requires skills in coding, an eye for design, but also empathy and a user-centric mindset to guarantee the final product serves the purpose for which it was created.

**This introduction was brought to you by the Mobile team at Swish. We create awesome mobile apps for inspiring projects. Join the team here. **

Have an awesome idea you want to materialize? Let us help! We have created apps for big companies such as the Nasdaq, Agendcast, Gatorade as well as early-stage projects such as the social start-up Invested. Let’s talk!

Share this post

twitter iconfacebook iconmedium icon

© 2018 Swish Labs, Inc. All Rights Reserved.