The field of digital design and user interface development has advanced astonishingly in the last decade. This progress is reflected in the evolution of button styles, which is clearly illustrated in the Dribbble Button Timeline.
The development of web design has been progressing rapidly in recent years, with trends shifting constantly. Navigating a website is a crucial part of the design process, and the call-to-action button is one of the most effective tools available. Buttons are used to facilitate a wide variety of online activities, such as making purchases, connecting to banking applications, and providing sensitive information when completing forms. It is clear that the implementation of well-designed buttons can have a significant impact on the usability and success of any website.
Based on Dribbble, I will trace eight years of online button design history in this essay.
Timeline of Dribbble Buttons
In 2009, Dribbble was established as a platform for designers from every corner of the world to showcase snippets of their current projects. Through the utilisation of Dribbble, a comprehensive overview of button trends and designs in the past eight years can be established. To explore this concept further, thousands of images from Dribbble were studied to create an interactive timeline of button styles.
This year marks the 40th anniversary of the internet, and the first “shots” of button designs appearing on Dribbble. These designs are mainly dominated by the use of greyscale. Almost every button design has been seen to feature gentle gradients, rounded edges, and shadows, which is believed to be inspired by native system buttons.
In 2010, Instagram was launched, and the design of its buttons has remained relatively consistent over the years; however, there have been numerous updates that have included additional colours, features (e.g. inner shadows), and decorative text.
This year marked the arrival of CSS3, with the total number of internet users reaching an unprecedented one billion. Skeuomorphism, which is the imitation of design elements from real-world objects, remains a popular trend amongst designers who are continuously exploring new possibilities and applications. Despite the lack of guidelines when it comes to employing shadows or lighting effects, these components are still present in the project and can be relied upon for the desired result.
This year has marked the decline of skeuomorphism, with some designers reaching a peak in their mastery of the technique, while others have been seeking out a more modern, novel approach. The advent of flat design, which has been timidly emerging, is evidence of this shift in design trends.
With the release of iOS7 in 2013, Apple demonstrated their commitment to the newly popularised concept of ‘flat design’, which entails the deliberate absence of any skeuomorphic elements. This year marked the beginning of a trend which continues to be embraced by designers today, with many designers on Dribbble choosing to forgo the use of three-dimensional elements in favour of a two-dimensional, ‘flat’ aesthetic.
Google recently unveiled its new Material Design, however, not all designers decided to use it in its entirety. This year has been an exciting one, as there has been an emergence of the ‘ghost button’ style or flat buttons being used widely, often found in Dribbble photos. 2014 has been largely characterised by two pixel borders with a range of vibrant colours.
Over the course of just a few months, Google’s Material Design quickly became a beloved guideline for UI designers. This design’s smooth top buttons with a subtle shadow beneath underscore the substantial impact it has had on modern trends. It is remarkable to consider the sheer number of people who incorporate this style into their work.
Designers often strive to innovate by combining Material and Flat Design to create novel looks. Gradients can be used to add a subtle hint of three-dimensional design to the surface of buttons, giving them a warm, glowing appearance and adding colour shadows for extra depth.
I am intrigued to consider how I will reflect on this year eight years from now. Until this point, 2020 has been characterised by a minimalist aesthetic and the prevalence of flat design. However, we are constantly looking for new and innovative forms of expression. Thanks to the advanced state of technology and the resources available to us, the only limits to our creativity are the boundaries of popular trends and fashion.
What Comes Next?
It is uncertain how long the evolution of button styles will persist. Nevertheless, it is certain that the evolution of button styles will continue. Possible causes of this evolution may include increasing technological advancement, greater designer awareness, or a desire for something new and different.
It is undeniable that buttons are preparing for another transformation. Could this transformation potentially be the end of buttons? As technology continues to evolve, with the development of gesture, intuitive interactions, augmented and virtual reality, and sound user interfaces, will the buttons which have been a part of our lives for so long still be a necessity?