My new ebook  Design Systems for Developers  is here! Start reading


Embracing the (UI) Elements

Learn the Basics of Web Development: Lesson 2

Last Updated: 2021-04-01

What are Application Environments?

We’ve discussed how being a developer entails writing instructions to create and run an application. These applications can run on various platforms such as mobile, desktop, and web.

Applications for each platform run on a different “environment.”

An environment is basically where an application “runs.”

Mircosoft OneNote for desktop runs via macOS (for Mac users).
Mircosoft OneNote for mobile runs via iOS (for iPhone users).
Mircosoft OneNote for the web runs via Chrome (for Chrome users).

If you were to open the Microsoft OneNote applications across various platforms, you would notice that the app has a similar look, feel, and functionality. However, you will likely be able to spot some differences.

There are a couple of obvious reasons for this.

  1. Each platform varies in the size of its applications. For example, a phone is a much different size than a desktop/laptop. Applications have to adapt as the size of a device changes (since there is not as much room to play with on a smaller screen).

  2. Each platform has different means by which a user interacts with its applications. For example, hone users tap and swipe versus clicking and scrolling.

  3. Each platform might represent a different demographic of users, and intelligent designers craft an experience that is optimal for a given demographic.

However, there is a bigger reason for the differences.

Each environment requires unique instructions in order to create an application.

For each environment, there are differences in the instructions for how the application is “launched.”

For a desktop application, an application icon will appear on the bar with all your other applications. A desktop window opens with a certain size.

For a mobile application, the application takes up the entire device. A splash screen appears before the application is loaded and ready to be interacted with.

For a web application, the application is running on a separate tab of the web browser. The size of the application is whatever is the size of the web browser.

We do not need to be coding experts to understand that there is clearly different stuff going on, so it shouldn’t be a surprise that each environment requires unique instructions in order to run an application.

Make It Stick

Open an application, like Microsoft OneNote, that is available on multiple platforms. Compare and contrast the differences you observe.

Elements and Application Environments

Every application is composed of basic elements. Elements are the “building blocks” that you observe and interact within an application.

There are some common elements that are in standard applications regardless of platform. For example, there are texts (headings, paragraphs, etc.), buttons, images, checkboxes, and the like.

However, some platforms have unique types of elements. For example, mobile applications running on an iPhone (iOS) have a “status bar” element:

embracing the (ui) elements

The point is that each platform has different ways you create “elements” to “build” your application. Especially since each platform can have different types of elements, it makes sense that creating elements to build an application will vary between platforms.

In the next chapter, we’ll learn how to create elements for building a web application, since that is the platform we’re interested in.

Make It Stick

Once again, open an application, like Microsoft OneNote, that is available on multiple platforms. See if you can write down some elements that appear to make up the application on each platform. What are the similarities? What are the differences?

Design Systems for Developers

Read my latest ebook on how to use design tokens to code production-ready design system assets.

Design Systems for Developers - Use Design Tokens To Launch Design Systems Into Production | Product Hunt

Michael Mangialardi is a software developer specializing in UI development with React and fluent in UI/UX design. As a survivor of impostor syndrome, he loves to make learning technical skills digestible and practical. Formerly, he published articles, ebooks, and coding challenges under his brand "Coding Artist." Today, he looks forward to using his mature experience to give back to the web development community. He lives in beautiful, historic Virginia with his wife.