A Frank Lloyd Wright Approach To Digital Design

Go to Source

Frank Lloyd Wright was a century ahead of his time. He was a pioneer, an avant-garde architect who broke free of the traditions of his era. His views on materials, form, function, space and environment define his iconic works. These ideals and principles are still used in architecture today, and his buildings have stood the test of time, remaining relevant even in today’s digital age.

I find a lot of inspiration in Wright’s timeless work. As designers, we’re frequently asked to create digital experiences (especially in software) that will have a lifespan of 5 to 10 years. This is an eternity in “digital” time, and it has made me ponder the future. What kind of devices will people be using in the next few decades? What interaction patterns will we be using in 25 years? 50 years?

Throughout his 70-year career, Wright developed a number of principles and ideals that can inspire us to design digital experiences that better stand the test of time. I will cover six main aspects of Wright’s approach that we can apply to digital design. His effort to create a “new” architecture, along with his views on materials, layout, form, function and the relationship between the whole, its parts and the environment can inspire us to rethink the way we approach our digital design work and even push the medium into new and exciting territories.

Frank Lloyd Wright sketching plans for Marin County Civic Center1
Frank Lloyd Wright sketching plans for Marin County Civic Center (Image: sswj2) (View large version3)

The Need For A New Architecture

We should never add levels of complexity to our design work for the sake of being new and exciting. In fact, Wright discouraged this practice in his architecture. In his preface to Studies and Executed Buildings, he said:

“I do not believe in adding enrichment merely for the sake of enrichment. Unless it adds clearness to the enunciation of the theme, it is undesirable, for it is very little understood.”

The Victorian Era and Its Frivolous Design

Wright started his career at the height of the Victorian era. Mainstream American architecture embraced the classical academic traditions of Europe. Victorian homes were not only dwellings, but also status symbols — showrooms of personal wealth. These homes were littered with ornamentation and consisted of many small rooms that weren’t designed with function in mind.

Victorian architecture in San Francisco4
Victorian architecture in San Francisco (Image: Tom Karlo5) (View large version6)

In the words of Wright, “The average desire seems to be to build something which will rear on its hind legs and paw the air in order that you may seem more important than your neighbor.” Additionally, Wright’s opinion was that little imagination was being put into this architecture — an architect could pick a pattern out of the stylebook and “place a bay window on it for the lady.”

The Dawn of a New Architecture

Throughout the 1880s and 1890s, Wright identified the need for a new architecture. By the turn of the century, he had found his voice. He discarded the superficial Victorian traditions of the time and led a new, American architectural movement: The Prairie School. According to this school of thought, every building would serve a purpose, and each detail would be carefully planned so that it supported that purpose. These details would define the structure’s aesthetic style.

Frederick C. Robie House7
Frederick C. Robie House (Image: Teemu0088) (View large version9)

One example of function driving form can be seen in Wright’s Frederick C. Robie House. A defining characteristic of this private home is its exaggerated eves and cantilevered rooflines. While this is a defining part of the building’s aesthetic, its primary purpose is to provide shade to the main areas of the home during hot Midwest summers. It also provides an added sense of shelter during the frequent severe storms and other harsh conditions.

Details With a Purpose

When Wright designed the Imperial Hotel in Tokyo, a city that at the time was prone to fires, he included reflecting pools that could be used as a water source for fighting fires. While these pools were aesthetically beautiful, they served a much more important purpose.

Reflecting pools in front of the Imperial Hotel's reconstruction10
Reflecting pools in front of the Imperial Hotel’s reconstruction (Image: joevare11) (View large version12)

As designers, we’re in the business of providing beautiful, engaging, usable experiences that meet the needs of our users and serve a much greater purpose. We shouldn’t add unnecessary complexity to our designs, nor should we use visual styles for the sake of being fashionable. After all, we aren’t in the business of impressing our design colleagues. Instead, every decision we make should serve a purpose that supports the original UX requirements and business objectives.

Materials

Understanding the Nature of Materials

Wright gave careful consideration to the materials he used. He chose materials based on their natural strengths and properties. For example, glass allows light to pass through it. Concrete is fluid and can be poured. Both brick and stone are solid. He was dissatisfied in the way other architects treated materials. They had a disregard for the nature of each material and treated all materials as if they were the same. Wright felt it best to allow materials to exist in their natural form, instead of superficially dressing them. For instance, wood has a natural color and grain. It is also strong yet flexible. Painting or carving a piece of wood doesn’t respect its natural, simple qualities and would be considered by Wright an instance of unnecessary design.

Combining Materials

Wright’s deep understanding of materials gave him the freedom to better meet the needs of his clients. He combined materials in innovative ways when he designed the Johnson Wax Administration Building in Racine, Wisconsin. One of the project’s objectives was to increase traffic flow and freedom of movement throughout the building. Wright created a sealed environment with a vast open layout, soaked in natural light and supported by an indoor “pine forest” of columns.

Dendriform columns in the Johnson Wax Administration Building13
Dendriform columns in the Johnson Wax Administration Building (Image: c_nilsen14) (View large version15)

Wright’s dendriform columns consisted of narrow bases and wide tops, and they appeared to defy gravity. Skeptical engineers felt this design would fail. Wright’s deep knowledge of materials and their properties enabled him to design these columns so that they were structurally sound yet didn’t compromise traffic flow or the openness of the layout. The office floor’s revolutionary design led to a 25% boost in employee productivity in the facility.

Technologies: A Designer’s Palette of Materials

In our digital world, different devices offer varying combinations of technologies and capabilities. We can apply these technologies to our design work in the same way that Wright used materials to create great buildings. Let’s think of a device’s technologies as our bill of architectural materials. For instance, a device might have a screen, an accelerometer, a haptic engine, a camera, NFC and GPS. Like wood has a natural grain and is both strong and flexible, a haptic engine can offer vibrating feedback at varying intervals. An accelerometer detects sudden movement.

In a lot of cases, the screen is a “catch all” and is misused in the same way that Wright’s contemporaries misused architectural materials. ’s contemporaries misused architectural materials. If we think beyond the screen, we can use the natural capabilities of these technologies or “materials” to create more engaging, immersive experiences that surpass the initial business objectives and requirements.

As Wright did with the Johnson Wax building, we can take this further by combining materials in clever, innovative ways. A good example is Cycloramic. This app takes hands-free 360-degree panoramic photos. To do this, the app depends on the iPhone 5’s flat ends to stand up. Vibrations created by the haptic engine rotate the device, while the camera captures the surrounding environment. The result is a perfect panoramic photo.

Even more innovative is Cycloramic’s solution for the round-edged iPhone 6, which cannot stand on its end. The app’s creators use an additional material, the charging plug, as a holder for the phone.

Cycloramic app on iPhone 616
Cycloramic app on iPhone 6 (Image: iMore17) (View large version18)

Good apps leverage the technologies made available by the device that they’re designed for. The new Apple Watch could lead to a whole new gold rush in the app market. Like homeowners of the Victorian era, companies will create watch apps just to keep up with the Joneses. These apps might not even serve a defined purpose. The successful and well-designed apps will leverage the watch’s core technologies, such as the taptic engine, NFC reader, heart-rate monitor and input crown. How will you leverage the technologies available on the devices you’re designing for?

Layout And Form

Free and Open Layouts for the People

Unlike their Victorian predecessors, Wright’s prairie homes consisted of open layouts arranged around a central point. Instead of creating traditional rooms, Wright believed in creating flexible, mixed-use spaces. These open spaces, or vistas, were carefully designed to manage the movement of people inside and outside of the home. As a result, areas of the home were more readily accessible to the inhabitants. These spaces were designed so that light and air could permeate the whole structure with a sense of unity. Areas were separated with “screens,” instead of rigid walls. These screens were made up of anything, from furniture (like in the Robie House) to continuous windows.

Wright's layout drawing19
Wright’s layout drawing (Image: Sam Felder20) (View large version21)

Wright felt that eliminating boxy rooms enabled him to make all of the space more human, with less space wasted on the structure and more left for living. In an interview with Mike Wallace, he stated that he received letters from his clients indicating that this approach had a life-changing effect on them.

As designers, we can find inspiration in Wright’s layout principles. In addition to (but not excluding) the fundamental layout principles we use, such as hierarchy, contrast and balance and consideration for reading direction (i.e. left to right), we can draw inspiration from Wright’s views on form and layout to push our design work in new directions. The screen is the most popular technology (or, in Wright’s terms, material) at our disposal, and it’s usually not used to its full potential.

Cramming in More Information: What Not to Do

As more information becomes available, users demand access to it through websites and software. Because of this, we tend to cram information into our designs, and we end up adding more modules, panels and even screens. Adding more screens places an artificial burden on information architecture and/or the app’s search capability. This design model is evidenced in the unnecessary levels of navigation in many applications. Some navigation panels even take up more real estate than the actual content (as illustrated below). This is the digital equivalent of a boxy, confined Victorian home layout.

Sketch showing cluttered UI elements22
Sketch showing cluttered UI elements (View large version23)

We could make screens taller, but that would just give tacit permission to stakeholders to continue adding content, which was the cause of the original problem. We are not fully leveraging the screen’s natural capabilities. To do this, we need to confirm that any addition meets an identified UX requirement or business objective; then, we would evaluate how it fits in our design on a holistic level.

Applying Wright’s Ideals to Digital Layouts

Our design canvas isn’t confined to the physical real estate of a screen, nor should the form be limited to one flat plane that sits directly beneath a device’s display. The screen can be considered a viewport into a world that’s an extension of our own physical 3-D world. This virtual space is as vast as the prairie landscape that inspired Wright’s early works.

Like rooms in a Wright house, we should arrange content into forms that let it naturally flow and become more immediately accessible. We have multiple axes to work with in this vast virtual space. This opens up new places to put information. The arrangement of the content and the overarching form shouldn’t be arbitrary. The resulting form should be determined by content, simple in its nature and, as stated earlier, not a matter of design for the sake of being cool.

SpaceX created a tool to design rocket components. As you can imagine, rocket engines are packed full of sophisticated components, all of which need to be designed, tuned and tweaked.

Like the earlier example of the sketched layout, this screen could have been cluttered with menus, options and settings. Instead, relevant information appears in context, relative to the engine component in focus. The form, or screen layout, is derived from the very model that the engineer is constructing within the tool. Like the open vistas in the prairie house, the interface, or lack thereof, combined with the tool’s open layout allows the engineer to freely move around the drawing board and edit the engine on the fly. This is a great example of how complex information can be arranged in a simple, intuitive form.

Additionally, the Leap Motion Controller was chosen as the method for input. This technology makes the experience even more natural, enabling the engineer to sculpt the engine with their own hands. Not only can the software’s form be mapped back to Wright’s principles, but it’s a fine example of the usage of materials — and, by the way, nothing about this design is excessive.

Form And Function Are One

Wright’s Architectural Forms

Wright’s mentor, Louis Sullivan, is famous for this quote from his article, “The Tall Office Building Artistically Considered”: “Form ever follows function.24” In other words, a building’s form should be determined by its purpose. This idea had been around for a while and actually derives from the ideals of Marcus Vitruvius Pollo, an early Roman architect and engineer who wrote De architectura25.

Wright went on to revise this classic idea to “Form and function should be one joined in spiritual union.” This granted him more latitude in his architectural decisions.

The shape of a prairie house was driven by its purpose: to provide an intimate yet open setting sheltered from the harsh conditions of the Midwestern prairies. To achieve a sense of intimacy and coziness, the structure was brought down to “human” proportions. Ceilings and rooflines were lowered. Primary rooms were situated on a slab, raised off the damp cold prairie ground. As mentioned, rooflines were cantilevered and exaggerated to provide shade, while uniform rows of windows were suspended to maximize natural lighting in the main living quarters. Bedrooms and utility rooms were considered to be less important and, so, were situated on an upper level. Kitchen and utility areas were adjacent to the main areas as needed. The main areas were typically long open vistas. The homes typically took on the shape of an L or a cross.

Wright's Meyer May house and its L-shaped layout26
Wright’s Meyer May house and its L-shaped layout (Image: bstrand27) (View large version28)

Content, Form and UI Becoming One

In addition to the form-related principles mentioned above, we can further simplify our design work by tightly combining the content, its form and the UI to become one. Today, content and the UI typically coexist, and sometimes there is tension between the two. Usability doesn’t need to be sacrificed either. The UI should always be obvious. A consistent form will enable users to create a clear cognitive map of the content. Information should always be accessible through a consistent interaction model, making for a more natural experience.

Nest Learning Thermostat29
Nest’s Learning Thermostat30 (View large version31)

Form and function are elegantly combined in the Nest Learning Thermostat. Rather than cluttering the screen with UI controls and buttons, the designers made the device’s physical form, the cylinder, as the UI itself. It can be rotated to control the temperature and other functions. The thermostat’s sensor array learns the user’s preferences and automatically sets the temperature based on the time of day, occupancy and settings history. The uses of other technologies, or materials, ease the burden on what would have otherwise been a cluttered UI. Contextual information is the focal point of the form, and it is seamlessly integrated in the product’s design and interaction. While the thermostat’s form recalls the analog rotary dial used in the past, it’s a great example of content, form and UI becoming one.

Depending on how our content takes shape, creating physical layers of information might be appropriate. These layers could be accessed through transitions, like animation, zooming and panning, further orienting the user within the greater form. It will give the user a better understanding of where they’ve come from and where they are going. If we’re designing a gestural interface, it could also suggest the interaction required to get back to the starting point.

Google Maps' Street View32
Google Maps33’ Street View (View large version34)

Google Maps’ Street View is another fine combination of form and function. The app allows users to explore cities and maps from a street-level view. Its form takes on the shape of the city you’re exploring. You can click on the roadways and buildings to navigate the map. As a result, the app has little to no navigation chrome — the content is the UI. Animation and zooming further orient us in the larger form.

Clear's layered approach to form
Clear35’s layered approach to form

Finally, Clear seamlessly integrates form and function, too. The app’s layered form enables users to easily navigate the content. Color and animation are used to represent the transition from one layer of information to another. Also, it’s another great example of how transition techniques and the integration of content, its form and the UI can be used to create a more natural experience. How will you integrate form and function in your next design project?

The Whole And Its Parts

Frank Lloyd Wright felt that all parts (including rooms, areas, indoor and outdoor spaces, and the surrounding environment) are related to the whole and that the whole is related to the parts. There should be a marriage between the structure and its site, materials, time and context. Wright suggested that visitors should admire the entire building (the whole) before entering its parts (indoor areas). As a result, defined entryways were usually hidden or disguised. In the words of Wright, “To approach the building was to be embraced by it long before one reached the entrance.” By the time they entered, visitors had a better understanding of the building. This held true for his homes and larger works. For example, employees of Johnson Wax had to drive around the building and then through the carport to access the main entrance.

Carport of Johnson Wax Administration Building36
Carport of Johnson Wax Administration Building (Image: oomni37) (View large version38)

Enabling Users to Experience the Whole to Understand Its Parts

Today, we use affinity diagrams and site maps to visually organize information. These tools also enable us to group and view the relationships between the pieces of information. We can take cues from these tools and artifacts when we’re putting form to our information. Just like Wright, we might do well to give users a look at the larger form first (the whole) before drilling into the content (the parts). This initial holistic view could provide additional context and enable users to better understand the connections within the information.

Visual Thesaurus39
Visual Thesaurus40 (View large version41)

Visual Thesaurus arranges synonyms in clusters around the word in focus. It provides a view of the full form up front. Like in an affinity diagram, related synonyms are arranged in visual clusters around the search term. Color-coding shows the differences between nouns, verbs and adjectives. The synonyms (parts) are part of a visual web (the whole) that helps us to understand how synonyms relate to each other and the term in focus. As a result, we have a deeper understanding of the information and can take action (in this case, choosing the best synonym to use). Just like a Wright building, this website enables you to first experience the full web of synonyms before drilling into the content. Incidentally, Visual Thesaurus also incorporates Wright’s ideas on form and function; the web of synonyms merges the content and the UI.

If you’re following Wright’s principles of form and function, then giving users a moment to take in the larger form before drilling into specific content might not hurt. Depending on what your design is supposed to accomplish, you could consider showing the relationships between pieces of information within the form, helping users to better understand the content.

Environment

Harmony Between the Building and Its Environment

Frank Lloyd Wright was famous for his quote, “No house should ever be on a hill or on anything. It should be of the hill. Belonging to it. Hill and house should live together, each the happier for the other.” Wright carefully designed buildings that were a continuation of their surrounding environment. He applied this philosophy to all of his works. Fallingwater is a textbook example. Its cantilevers mirror the rock formation that creates the waterfall immediately below the structure.

Fallingwater42
Fallingwater (Image: James Vaughan43) (View large version44)

Wright liked to mix indoor and outdoor spaces. The light screens, or glass walls, wrapping the living spaces of Fallingwater bring the outside environment into the house. The protruding overhangs and shaded cantilevers pull the interior spaces into the outside environment. The low profile of his buildings ground them in the earth. The long, low horizontals are meant to suggest a horizon.

The Device Is the Designer’s Construction Site

Carefully consider the devices you’re designing for. In addition to maximizing the technologies they offer, you could also consider their physical makeup, look and feel. Think of the device as the plot of land in which your app resides. If you follow this principle, then they should work together in perfect harmony. The device and app should live together, each the happier for the other.

On a functional level, this can deeply affect interaction models. For instance, a device’s shape and how it’s held will affect how users interact with it. For a phone, you might want to place the navigation controls within thumb’s reach. Consideration of the device could also affect any aesthetic decisions you make. A few years ago, when skeuomorphic design was a popular trend, there was an obvious clash between the sleek, futuristic design of the iPhone and the retro, leather-stitched screen interface.

Once again, Nest is a great example of design that works in perfect harmony with the physical device. It doesn’t hurt that the company designed both the screen’s interface and the hardware. Think about the devices you’re targeting in your next design project. It could influence your design.

Conclusion

Frank Lloyd Wright was a true pioneer. He was an avant-garde architect whose ideals led to architectural masterpieces that are relevant nearly a century later. As designers, we can find inspiration in his architectural philosophies. As with his buildings, every detail in our designs should serve a purpose. We must consider the nature of the materials and technologies we use and figure out how to maximize their native capabilities to achieve our goals.

If we adopt his views on form and function, then we can simplify our interaction models by combining content, form and UI. We should also consider each part of the design and its contribution to the whole. Finally, we might consider creating harmony in the relationship between our digital design and the physical device. In addition to the fundamental design principles we use every day, these ideals could push our work in new and exciting directions.

References

(cc, ml, al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-frank-lloyd-wright-opt.jpg
  2. 2 https://www.flickr.com/photos/sswj40/14255136256/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-frank-lloyd-wright-opt.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-victorian-homes-opt.jpg
  5. 5 https://www.flickr.com/photos/karlo/10239567826/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-victorian-homes-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-robie-house-opt.jpg
  8. 8 https://www.flickr.com/photos/teemu08/7373081606/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-robie-house-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-imperial-hotel-opt.jpg
  11. 11 https://www.flickr.com/photos/joevare/5177649819/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-imperial-hotel-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-johnson-wax-columns-opt.jpg
  14. 14 https://www.flickr.com/photos/c_nilsen/2690593037/
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-johnson-wax-columns-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-cycloramic-app-opt.jpg
  17. 17 http://www.imore.com/cycloramic-app-automatically-spins-iphone-6-capture-360-degree-panoramas
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-cycloramic-app-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-blueprint-layout-opt.jpg
  20. 20 https://www.flickr.com/photos/samfelder/38090583/
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-blueprint-layout-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-sketch-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-sketch-opt.jpg
  24. 24 http://en.wikipedia.org/wiki/Form_follows_function
  25. 25 http://en.wikipedia.org/wiki/De_architectura
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-meyer-may-opt.jpg
  27. 27 https://www.flickr.com/photos/brant/7332557276/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-meyer-may-opt.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-nest-thermostat-opt.jpg
  30. 30 https://www.flickr.com/photos/nest/6286566200/
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-nest-thermostat-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-guggenheim-opt.jpg
  33. 33 http://maps.google.com
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-guggenheim-opt.jpg
  35. 35 http://realmacsoftware.com/clear
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-johnson-wax-carport-opt.jpg
  37. 37 https://www.flickr.com/photos/sdugas/5006314215/
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-johnson-wax-carport-opt.jpg
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-visual-thesaurus-opt.jpg
  40. 40 http://www.visualthesaurus.com/
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-visual-thesaurus-opt.jpg
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-fallingwater-opt.jpg
  43. 43 https://www.flickr.com/photos/x-ray_delta_one/14186078051/
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-fallingwater-opt.jpg
  45. 45 http://divergentmba.wordpress.com/2012/04/23/designing-life-frank-lloyd-wright-architect/
  46. 46 http://www.amazon.com/Drawings-Plans-Frank-Lloyd-Wright/dp/0486244571
  47. 47 http://www.westcotthouse.org/about/frank-lloyd-wright
  48. 48 http://www.amazon.com/Nature-Materials-Buildings-1887-1941-Paperback/dp/0306800195/
  49. 49 http://www.pbs.org/flw/legacy/essay1.html
  50. 50 http://www.amazon.com/Understanding-Frank-Lloyd-Wrights-Architecture/dp/048628364X

The post A Frank Lloyd Wright Approach To Digital Design appeared first on Smashing Magazine.

19 exceptionally well designed mobile app experiences

Go to Source

Mobile apps are becoming increasingly refined: Where once an app performed numerous functions, now there are apps that focus on a single task. As users become more adept with their devices, and more comfortable replying on apps, this trend is only set to continue.

Designing mobile apps — whether as web apps, or native apps — relies on great UX and careful UI planning. Below, I’ve pulled together 19 apps that get everything right; most are simple, minimal, and flat; all are successful.

If you’re designing mobile experiences, then here are 19 apps that will inspire you to embrace small screens and single-task applications.

 

1. Rubie

19 exceptionally well designed mobile app experiences

Rubie is a simple and colorful game. It was created by Corey Haggard. What makes this app beautiful is its stunning darker hues. The background is this darker off gray navy while the Rubie jewels have spectacular vivid colors. It’s nice that the game has a simple layout and graphics as well.

 

2. Sky

19 exceptionally well designed mobile app experiences

Sky is another color-filled app. The background is always a slight gradient that changes its hue based on the temperature. Once again the overall interface is pretty minimal. However, the fun and great looking background make the whole app significantly more appealing.

 

3. Timeful

19 exceptionally well designed mobile app experiences

Timeful is a smart calendar that schedules things for you, with the aim of getting things done. The overall interface is super clean. Often, actually way too often, calendar interfaces become quickly cluttered. But with the light tones and well organized and spaced out elements this app is easy to look at. For a calendar app, this is uber important.

 

4. Clear

19 exceptionally well designed mobile app experiences

A super minimalistic to-do list, Clear, helps you stay organized by decluttering your to-do’s. The app has actually come a long way by allowing various lists but way back when all it was made up of was yellow to red list of tasks. The simplicity and minimalism of this app help make it a great tool in getting your priorities and tasks straight.

 

5. Squarespace blog

19 exceptionally well designed mobile app experiences

Squarespace has such a sophisticated and clean design style. Their mobile app is an extension of that aesthetic. This use of slick typography, white space and light gray with charcoal hues is exceptionally executed. Their app looks light, and looks like a delight to use.

 

6. Peek

19 exceptionally well designed mobile app experiences

Peek is a calendar app with a non traditional twist. First of all, the app is super colourful. They use vivid red, yellow, blue and green hues in addition to some darker tones and it looks wonderful. Their app is pretty cool because it uses different gestures and paradigms compared to a typical calendar app but it works in their favor to be different.

 

7. Hotel Tonight

19 exceptionally well designed mobile app experiences

If you need a last minute hotel reservation in a major city Hotel Tonight’s got your back. Oh, and you can do it all in style. Their dark website combined with light fonts create a very elegant feel.

 

8. Steller

19 exceptionally well designed mobile app experiences

For those of you who love photography and stories this app is for you. Steller is a photostory app that is filled with beautiful and amazing stories told by a wide verity of people. The app’s UI is pretty great because it keeps things simple and it doesn’t interfere with the overall experience. After all, the idea is to pay attention to the stories, not the app itself.

 

9. Authentic Weather

19 exceptionally well designed mobile app experiences

If you are looking for a weather app that is a smart ass and has a minimal design, Authentic Weather is it. This app is just fantastic with its remarks which almost always involve cursing. But, it’s also minimal in its approach. At first glance all you get is the current forecast; if you want more you can tap anywhere on the screen.

 

10. Lovely

19 exceptionally well designed mobile app experiences

Lovely has a lot of information to show you on any given screen. Rending apartments is complicated because there is so much information to process about any given apartment. However, Lovely is well organized and showcases lots of information in a good manner. It’s easy to scan apartment lists to see what each has to offer as the UI is visually light.

 

11. Tumblr

19 exceptionally well designed mobile app experiences

Tumblr’s menu is simply amazing; the icons are beautifully crafted, they aren’t fun but they are full of personality that most social media sites lack today. The icons make posting something on Tumblr just a little bit more fun.

 

12. Thinglist

19 exceptionally well designed mobile app experiences

For a to do list like app, this is pretty cute. It has personality spilling from every angle such as its round font and great colors. However, the key component are the great icons.

 

13. Fancy

19 exceptionally well designed mobile app experiences

Fancy is an app where you can browse through various cool products or keep a list of products you see online you’d like to purchase eventually. It’s a great place to find gifts or great finds. They have a lot, I really mean a lot, of content to show off but they do so well. The app has a clean design and a well organized display that allows the products to be viewed with ease.

 

14. Uniqlo Wake Up

19 exceptionally well designed mobile app experiences

Uniqlo’s alarm clock is pretty interesting. It has a lovely friendly design. The app definitely wants to embrace simplicity and cleanliness; just look at it and you’ll see that there aint much to it. The interfaces are clean with little on them. The focus is kept on the current weather and time. What makes this app interesting is that when the alarm goes off the app sings to you the current time and weather conditions. Yup, it’s something else.

 

15. Litely

19 exceptionally well designed mobile app experiences

Cole Rise created Litely to improve smartphone photo editing. One of his key goals was to strive for simplicity. This app is elegant and sophisticated in its design, especially of the UI; there is not a lot going on either as the focus is placed upon the photo you are trying to edit. It’s such a beautiful app.

 

16. Rise

19 exceptionally well designed mobile app experiences

Rise is a different kind of alarm clock. It has a different user experience where you set the alarm time by moving the timer up or down the screen. The time the alarm is set determines the background of the app. The UI and the design of this app is minimal for sure but the beautiful hues of the gradient background are so strong and bold; they make the app stand out so much.

 

17. Google Translate

19 exceptionally well designed mobile app experiences

Such an overlooked app but so well executed. Google has been sprucing up their design game over the last year especially with Material Design announced earlier this year. You can see that a simple app like Google Translate can take light hues like whites and light grays and make them look elegant, sophisticated, and most importantly, pleasant. This is one hell of a uncomplicated design that looks darn good too!

 

18. WillCall

19 exceptionally well designed mobile app experiences

If music entertainment is your thing, WillCall can help you find the best events around town. What the app’s design did right is created a dark color scheme, which reinforces the dark nature of music events like shows and concerts. It’s nice to see that the app reflects the real world; it’s also nice to see a well designed and good looking darker app, as they are not that common.

 

19. Code Academy

19 exceptionally well designed mobile app experiences

<

p class=”p1″>Code Academy’s app looks pretty darn good. Learning programming on a phone can be challenging because it’s a small screen. However, Code Academy’s app has the right idea: The different section within each page or screen is well defined through background colors. They took away everything unnecessary and kept the styling pretty elementary in order to keep the focus of the experience on learning.

WinX Video Converter & iPad Ripper Pack for PC or Mac – $12!
19 exceptionally well designed mobile app experiences

Source

3 tricks for adding texture to your text with CSS and SVG

Go to Source

You’re probably familiar with using text to mask an image in Photoshop; it’s the best known way to add some texture, or even an image background, to your text. You can then use that text as an image on your website; however, wouldn’t it be great if you could apply the same effect using just HTML and CSS? The good news is, you can!

CSS has introduced properties like background-clip and mask-image which you can use to create similar effects to those you’re creating in Photoshop. On top of that, you could also use SVG to clip an image with text.

Today, we’ll look at the options, and even throw in some simple animation. If you’d like to follow along with the code, you can download the files here.

 

Browser support

Predictably, some of the properties we’ll be using aren’t universally supported, meaning they will fail in browsers like IE and Firefox. The good news is that these properties will fail silently, meaning that these techniques are a progressive enhancement, and fine to use in sites.

 

Clipping text using background-clip

The first option we’ll look at is the background-clip property.  This property will define whether the background will be extended into the border or not. It allows the text of a defined element to clip an image.

The HTML

Our markup is simply an h1 with the class bgClip:

Clip Text

Now, let’s add the magic with CSS…

The CSS

We’ll add texture to our text with an image of the night sky. We’ll also make sure that the text is rendered smoothly using font-smoothing. Note that for this to work the text color must be transparent, so we’ll also use text-fill-color:transparent.

.bgClip {
    background:url('../images/clouds.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

Now we just want to add a little animation to make the background more enticing:

    -webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
    @keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-ms-keyframes BackgroundAnimated {<
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}

Here’s the result:

 

Clipping text using SVG

The next technique we’ll look at is SVG clipping. Similar to the CSS method above, SVG also allows you to clip text with images using the clipPath property. Usually the clipPath property contains shape attributes such as a circle or square, but you can also use text.

The SVG

You’ll see that I use the HTML image element to clip the image.

3 tricks for adding texture to your text with CSS and SVG
        
            
                
                     SVG Text 
                
            
        

Although I’m using a .jpg here, you can use other image formats, or even video.

The CSS

Now, all we have to do is use the clip-path property to apply the SVG as the image’s clip path:

.svgClipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    margin:0 auto;
}

Here’s the result:

 

Masking text using mask-image

The last technique we’re going to look at is texturizing text with mask-image. The basic functionality of this property is that it will clip the area of text that is visible based on opacity.

The HTML

All we need is an h1 element wrapped in a div:

Mask Text

The CSS

To mask the image with the text we’ll use the -webkit-mask-image to specify the image and we’ll also add a nice text-shadow for good measure. Finally, I want to ass some smooth hover effects to reveal the whole text on mouse-over (just because we can):

#maskText h1 {
    font-size: 200px;
    font-family: 'Lilita One', sans-serif;
    color: #ffe400;
    text-shadow: 7px 7px 0px #34495e;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url('../images/texture.png');
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;
}
    #maskText h1:hover{
    -webkit-mask-image: url('../images/texture-hover.png');
    cursor: pointer;
    color: #ffe400;
}

Here’s the result:

 

Conclusion

Great! You just learned how to clip text on different ways. These properties will save you time and keep you out of Photoshop. More importantly, they’re dynamic, unlike a jpg.

CSS and SVG have come a long way, and techniques like these will become standard over the next few years as browsers catch up.

WinX Video Converter & iPad Ripper Pack for PC or Mac – $12!
3 tricks for adding texture to your text with CSS and SVG

Source