Function & Form: Beyond the Pixel

Blue Bite
Blue Bite
Published in
5 min readApr 11, 2016

“The result is a kind of high-tech cathedral, not just one of the grandest retail rooms in New York … but one of the few to make minimalism feel invigorating.” [1]

“High-tech cathedral” are the words used by The New Yorker to describe Apple’s latest flagship store. Such a description should give pause. Mulling over Apple’s philosophy, and the intuition with which their products are created, it is no mistake that writers and critics would come to describe the store as a ‘cathedral.’ For in the technological times that are today, smartphones have become our bible, the Apple store where we go to worship.

But to have made this parallel, one must consider the design thinking that went into the building of the store. For what makes Apple so unique is that every project they embark upon is connected to a bigger picture, a broader story. No one part is out of place; each new feature is an obvious next step. It all makes sense.

Where revolutionary ideas were once unleashed in the pages of books espousing notions of science against the word of the church, today these revolutionary ideas are being expressed in the form of software and data. (If you don’t agree, let me introduce you to Facebook, Google, and Uber). In other words: building cloud-based tools has become the industrial revolution of our generation.

When web design was first conceptualized, it was based on print design. Books provide a one-way interaction: while you absorb what is written on its pages, the book itself remains stagnant. At conception, the web was created in this likeness; it was a place where individuals went to glean and absorb information. But we mustn’t overlook the obvious: as the web has evolved so have its capabilities. Today, the web goes beyond a one-way interaction. By treating web as a new medium to design cloud-based tools, it has been reborn as a place for reciprocal interactions. Consequently, tools for the web require a higher paradigm for design inspiration. It demands a carefully considered pragmatic approach where hierarchy, data layout and control elements are fundamental. It requires the kind of thinking that conceptualizes building websites as not simply a site, but a tool.

The most important aspect of any tool is the way we interact with it. On the web this is through a user interface. Traditionally, interfaces for the web have lagged behind their native counterparts for a variety of reasons. We can point fingers at web technologies, but in my mind, the real problem is that designers approach web design very differently from the way they might design a physical product or native interface. They shouldn’t. But I can understand why they would.

To start: there is no native UI for the web. If you were designing an app for iOS or Android you would have the advantage of working within the visual constructs of that operating system. For web, no such standards exist. Moreover, designing something to be compatible for both web and mobile (for audiences will surely use both mediums), requires a lot of complex, big picture thinking. But despite the lack of standards, and the need for extremely insightful thinking, the extra work is worth it.

These tools encompass a variety of fields from data storage to data interfaces to user interfaces. When combined, we end up with powerful tools that can bring complex, data rich, computed information to anyone with an Internet connection. The possibilities of these tools are nearly endless, and with them come broad flexibility and unparalleled power. But the power is only as strong as the design that is afforded to these tools. Harking back to the above anecdote: would the idea that Apple products are godly be as powerful if the store design were devoid of the cathedral-like undertones? Simply put: no.

Never has designing for the physical and digital worlds been more intertwined. With this consideration, it is helpful to reflect on the foundational principles of good design defined by Dieter Rams[2] and how they apply to the web:

Good design is innovative; with the speed of innovation on the web, designing and executing forward thinking ideas is easy. The advent of atomic design principles combined with frameworks such as Vue.js allows web designers an entirely new design paradigm, breaking down barriers to a more modern design thinking for the web.

While implementing innovative principles on the web is relatively easy, conversely, the idea that good design is long lasting can be much more difficult to achieve. For the speed with which positive innovation occurs, is also responsible for the quick turn over of web tools. But following design best practices and keeping future expansion in mind can lead to a long lasting consistent interface that can grow over time.

The best way to improve the longevity of any product is for the design — and each detail — to be thoroughly executed. For the web, defining an ideal grid with consistent margins, padding and baseline is essential to an organized and logical layout. Building off this grid with atomic UI elements will allow a consistent design language across the project while also providing an outline for future features.

This leads me to my final thought from Rams’ principles: good design is honest. There is a dangerous notion in interface design that the UI does not need to reflect the underlying system structure. I think that if you believe in the quality of your backend systems, much insight can be gleaned on how to structure large data sets on the front end. This honesty unites the database, API and UI into a single elegant entity where team members from all disciplines work together, not on separate products, but on a unified solution.

Together, teams should aspire to something larger than building a website.

Together, they should aspire to building a tool capable of withstanding the future.

Paul Knight
Chief Technology Officer
Blue Bite

[1] http://www.newyorker.com/magazine/2010/05/17/apple-polishing

[2] https://readymag.com/shuffle/dieter-rams/ten-commandments/

--

--

Blue Bite
Blue Bite

We strive to improve lives by connecting people and information through the physical world. To learn more, visit www.bluebite.com