Web design news roundup 2019: The stories that defined the year

[Rss Bot 1]

While it seems incredible that another 12 months has flown by, it’s a perfect chance to take stock and reflect on the year in web. To say 2019 was exciting for web design may seem like an understatement, with things moving forwards so constantly and quickly. But this is no nostalgic retreading of old news or a whimsical recap, but an opportunity to highlight some maybe less obvious stories that point to where we’re going next. 

In no particular order, here are eight of the biggest web design updates, movements and announcements worth repeating. Or for more trending tools, explore our essential web design tools roundup.

01. CSS Grid Layout came of age

CSS Grid Layout is proving a ubiquitous system for defining adaptable interface designs

If you did much peeking under the bonnet of web layouts in 2019, you would know that Grid is the word. CSS Grid Layout, to be precise, really came into its own this year, with more designers adopting it as a standard since popular browser support materialised back in 2017. Considered the most powerful layout system CSS has to offer, its two-dimensional definition of columns and rows provides a palpable edge over Flexbox. 

Starting from a container or 'parent' element, set using the display: grid attribute, the comprising columns and rows are then sized before 'child' elements are added. What’s more, the order that these elements are defined is irrelevant, thus facilitating rearrangement into a myriad of combinations with media queries. Given the importance of layout flexibility across devices, it’s unsurprising this elegance and reusability of responsive templates is finding favour.

Join us in April with our lineup of JS superstars at GenerateJS – the conference helping you build better JavaScript. Click the image to find out more and book your ticket

02. GSAP 3 arrived

The new MotionPathPlugin within GSAP 3 simplifies the movement of elements along an SVG <path> line

For those who don’t already know, the Greensock Animation API (GSAP) is rapidly becoming a standard for scripted web animations (for a basic introduction, explore our guide to getting started with GSAP). If your favourite dynamic websites of 2019 did some fancy SVG-based motion work with speed and grace, its highly likely GSAP was behind it. The library boasts faster execution than jQuery and CSS3 transitions with 60fps performance, so little wonder it’s becoming an ever-present.

November also saw the release of GSAP 3 and the addition of over 50 new features while claiming to be half the size of the old TweenMax. Other highlights to watch for include a simplified API, backwards syntax compatibility and parent/child inheritance for shortening repetitive calls. In addition, a new MotionPathPlugin allows any element to be animated along editable SVG motion paths.

03. Typography got BIG

Large, viewport-stretching typography was a fiercely popular aesthetic choice for designers.

Fonts were huge online this year, with oversized text and an integral use of typography as an aesthetic device becoming increasingly evident. Lauded websites such as Symbols of the Thaw and Rogue Studio (shown above) are recent examples, with others revelling in a greater variety of styles. 

“For me there has been quite a big shift in how fonts are used this year, as font licensing has become more universally available, and affordable,” says Steve Scott, Creative Director & Founder, Another Colour. “Oversized fonts, calligraphic and humanist fonts have become popular, making an interesting shift from geometric fonts.” 

In October too, it was announced that HGCC had successfully acquired MonoType after a $825m buyout, which might have further market impact. The company’s own trend report has identified variable fonts as one to watch in 2020.

04. Dart took flight

Flutter and the underlying language Dart are fast becoming popular platforms for GitHub developers

Google’s client-optimised programming language Dart was first unveiled eight years ago. Created for cross-platform app building and able to be compiled as JavaScript, the language seemingly enjoyed a notable adoption boom in 2019. As part of its annual State of the Octoverse report, GitHub crowned Dart as the year’s fastest growing language within its repository, showing a 532 per cent increase. 

The platform also released its version 2.6 in November with the news that dart2native would join Dart’s existing set of compilers. This allows developers to compile Dart code to self-contained executable programs, irrespective of whether the target system has the Dart SDK installed. With Flutter, Google’s popular UI toolkit, also based on Dart, there has never been a better moment to discover what all the fuss is about.

05. Adobe Dreamweaver 2020 arrived

Adobe Dreamweaver still holds a fond place in the hearts of web designers and developers

While now it may seem like a new markup editor releases every hour, this wasn’t always the case. Not so long ago you only had one viable choice, with Adobe’s Dreamweaver being an essential tool for web designers and developers alike. In November we welcomed the latest 2020 release, and these day the app comes packaged into Adobe’s online Creative Cloud experience. 

The new features are far from revolutionary, but significantly live editing has been made more seamless. Users here are able to edit semantic tags such as <aside> and <section> and so on, while 'auto-sync' technology keeps live and code view changes synchronised. Code hinting gets enhancements with better filtering logic for PHP and more hints made available for not just PHP but JavaScript also. Dreamweaver 2020 can be purchased as a single app.

06. We got experimental with navigation

Innovative navigation became very much the defining feature of sites like Anton Chalov’s portfolio

There was always a purist way of thinking that said good web navigation should largely go unnoticed. The whole process of reaching your desired destination only becomes an issue when it's bad or it loses you. However 2019 saw a new school of thought take hold and a concerted effort to make navigation the focal point in itself. Suddenly there were large menus and big compass-like splash screens, with Your Majesty’s effort for FILA Explore being a case in point. 

Others pushed more experimental dials, such as Austrian agency Ursa Major Supercluster’s WebGL project bauble. Russian designer Anton Chalov also pushed the boat out by turning chalovak.tv into an old TV set controlled and explored remotely via smartphone, putting imaginative navigation firmly at the heart of an engaging experience. 

07. CSS updates changed direction

Designers are enthusiastic for CSS level 4 selectors to migrate from working draft status to full browser support soon

In 2019, it became much clearer that the prospect of HTML 6 and CSS 4 is likely to be a mythological concept. Much more probable is that enhancements will continue to be layered on to each specification, like the draft updates made to CSS Selectors level 4 back in August for example. 

These useful constructs particularly found traction this year, with a decided buzz around the new :is() pseudo-class for simplified style targeting. Acting much like an If…Then statement in code, this is proving popular for conditionally applying styling to certain elements in conjunction with sister :where() and :not() selectors. The advantages of CSS coding economy become most evident at child element level and while currently still at working draft status, it can be tested with fallbacks across the main browsers.

08. Duda secured $25m investment

Third-party website building platform Duda secured a substantial cash boost in September

Website builder platforms continued to go from strength to strength in 2019, a year after Zion Market Research valued the market at $6.5bn worldwide. Its report back in May forecasts that valuation to reach $13.6bn by 2027, with huge players like Squarespace, Automattic (WordPress) and Wix.com attracting heady investment (take a look at our guide to the best website builders in 2020). 

An emerging force in this space is Duda, with the centralised multi-service platform announcing a $25m funding injection in September. Duda targets agencies, digital publishers and hosting providers with tools for building websites at scale, alongside team collaboration and client management services. Founded in 2009, the Palo Alto-based startup claims 14 million site builds thus far and will be hoping this latest capital boost can cement it as an emerging player to watch over the next 12 months.  

Read more: 

• The best JavaScript frameworks to try
• Master the golden rules of incredible UI design
• 6 steps to writing better CSS

View the full article