A Roadmap to Modern Design

At some point having running water in your house was amazing. Airplanes and telephones changed the world too. If you take a moment to look around and really think about the technology that surrounds us, it could be overwhelming. Yet we hardly notice it. Less noticeable is our rate of technology adoption – we all […]

ERIK SPIEKERMANN Edenspiekermann Founder, Typographer, Graphic Designer. Picture credit to http://events.gigaom.com/roadmap-2013/

At some point having running water in your house was amazing. Airplanes and telephones changed the world too. If you take a moment to look around and really think about the technology that surrounds us, it could be overwhelming. Yet we hardly notice it. Less noticeable is our rate of technology adoption – we all know computing power doubles while price drops by half every 18 months. But lately we have taken notice of the way things are designed. It’s as if we finally reached a technology saturation point and people turned to innovative design to stand out. At this year’s GigaOm’s Roadmap conference (stream day two here), the leaders of design gathered at the Yerba Buena Center for the Arts to discuss the intersection of design and experience. It was a conference filled with thought provoking, visually stunning demonstrations from the people who designed the Tesla, iPod, Beats by Dre, Instagram, Airbnb and so many more of the products we consider to be exemplars in experience design. Modern design is being reinvented before our eyes.

Skeuomorphism to Flat

Not so long ago we looked to Apple to set the design standard, but Microsoft may have had the jump on flat design. When Apple first released the iPhone, they based the designs of their native apps on their real world counterparts, complete with the physical constraints they carried. Modeling analog devices in a digital world is a concept known as Skeuomorphism. iBooks appeared to sit on a bookshelf and the notepad application actually looked like a yellow pad with lines to keep your penmanship straight. Designers loaded everything with drop shadows and gradients to give the illusion of depth, and of a light shining above and to the side. They did this because it was comfortable. Society had to adapt to perceiving things on a digital screen. Now we’re fully adapted and designers are embracing a digital world without physical constraints. Surprisingly, Apple was the last of the three major mobile operating systems to embrace flat design, almost three years after Microsoft and Android.

Responsive Design

Removing the visual ornamentation of Skeuomorphism in digital design is an admission that we live in a digitally perceived world now. The tricky thing about digital worlds is that they aren’t constrained by physics. Sizes change constantly. To solve the design problem, people turned to responsive design, or design optimized to provide easy reading and navigation with a minimum of scrolling across devices of any size. Before responsive design, designers would organize a web page in the same way they would organize a print flyer. They would balance images and text on a predefined screen size, then deliver mockup directions for how many pixels each image should be from the next. The problem is, how do you design something to look good on a tiny mobile screen and a widescreen desktop monitor? At first, the designers made two designs – one for each screen. Then a third for tablets. The range of screen sizes grew and eventually the singular design approach broke down. Enter responsive design.

In responsive design, you design for the smallest screen size first. This ensures you organize your information in the most efficient way. Objects are placed in grids so that they can stack wide or tall and they reorganize themselves based on the width of the screen. Once you know what to look for, it’s easy to see the difference.

Take a look at the Responsively designed GigaOm Roadmap website.

http://events.gigaom.com/roadmap-2013/

Now resize the screen by dragging left and up from the bottom right corner. The images shrink and the text size adjusts, and at some point the entire layout actually switches to a mobile layout. Even the navigation items change to to be more finger-tap friendly (because the small screen size tricks the site into thinking you are viewing it on a mobile phone.

Now look at our website:

www.plugandplaytechcenter.com

Resize it. Nothing happens. The images stay the same size and eventually the screen cuts off half of the information. If you load it on a mobile phone, you will get the same full screen website, but all of the lettering will be tiny. It’s completely unoptimized for mobile devices. We are halfway through a massive redesign to make our site completely responsive and you should too – In another year or two mobile web browsing will take over traditional desktop browsing and your website will look busted.

Bring on the Smart Tools

As much as the digital design world is separating itself from the physical world, the physical world is becoming more digital. One of the major themes of Roadmap 2013 is how much our appliances and tools still stand to benefit from technology. Tony Fadell, designer of the iPod and then the Nest thermostat, was there to launch the latest reboot on technologically deficient yet life-saving home appliances. Nest Protect is a smoke detector that does more than blare every time you overcook your toast and beep randomly to notify you that its battery is dying. Nest Protect warns you with a voice whether there is fire danger or CO2 poisoning. It indicates the severity of the problem and, if in fact you are just burning your toast, you can silence the alarm with the wave of your hand.

http://www.youtube.com/watch?v=QXp-LYBXwfo

During Jack Dorsey’s session he pointed out that the simple, finger-signing iPhone credit card reader he created seems so obvious – now. Well so is a smoke detector that you can control and monitor easily. Our problem is we don’t always think about how we would invent an old product if the new technology were available then. Henry Ford famously said “if I had asked customers what they wanted, they would have said faster horses”. We don’t think to ask if our coffee maker could coordinate with an app to turn on as soon as our iPhone alarm goes off, or adjust the blend if it’s too strong. We don’t consider whether our fridge could detect which groceries we are low on and notify us to order more milk. What about something as simple as a pen – I bet we could make an analog pen that stores its key strokes and uploads them to the cloud so that every real note you make is saved. We’re entering the age of the smart tools. Technology is no longer the barrier, it’s rethinking product design in new and modern ways.


If you liked what you read, please share it with friends.