Five tech principles that will help you become a better UX designer

For designers, it was always relevant to know about the technical part they design for as well. For digital designers, knowing about software is often a hard topic to deal with. It does not come in handy. I wrote down a bunch of principles of computer science, that I find quite helpful to know. They are all about tech and still all about UX.

Johannes Holl
Aug 2, 2017 · 5 min read
Photo by Headway on Unsplash

#1 | The difference of compiled and interpreted code

Have you ever attended a software project where the scope shifted from a native app to a web-app in the middle of the design phase? That was fun, no?
Technology is clearly affecting user experience. So when changing from a native app to a web app the design has to adapt. In this case a native app stands for a compiled and the web-app for an interpreted program, and there is a huge difference.


#2 | Forward and backwards compatibility

At the beginning of a design project, information is gathered that will guide the process and drive the decisions. Technical constraints are a big part of that. Questions will be asked. Is there anything we need to adapt from the older versions of this software? Should it be supported by older operating systems, browsers or devices? How does a system react to errors produced by the machine itself?
You will have a much better understanding of the answers given once you understand the strategy of compatibility the software is using.

Illustration for backwards and forwards compatibility. »Stuff« could be a device, a program or even a file.

#3 | The Document-Object-Model (DOM)

A software architecture separates the logical and functional bit from the presentational one (see Model-view-controller). UI and brand designers spend a lot of time on the presentation layer so they would want to know how it is produced, organized and maintained to be able to design appropriately for it.

Abstract example for a DOM tree structure

#4 | Positioned and floating layout elements

Different from print layouts, layout for websites and apps get constructed. There is a logic in every digital layout, holding together its visual elements and I don’t mean the grid. When designing for the web, it is very helpful to explore those. The interplay of parameters like display (block, inline, …), float (left or right) and position (fixed, absolute, relative) with other ones such as width, height, max-width, margin or box-sizing offers a variety of construction possibilities.
If one understands how to work with them and make use of their properties, one can truly design flexible, responsive layouts and come up with innovative solutions that look appealing on any screen. Designers can also prototype grids and layout principles that are usually welcomed by developers as a way to brief them on a design.


#5 | Synchronous and asynchronous loading

The infinite scroll of facebook’s newsfeed or the drag&drop behavior of Google drive, both are examples of asynchronous loading. It enables functions which boost the UX of web applications.

Illustration of synchronous and asynchronous page loading over time.

Boana Stories

Design Studio for User Experience

Johannes Holl

Written by

Lead Product Designer UX/UI & Partner @Boana

Boana Stories

Design Studio for User Experience

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade