Stock photo

Sometimes, redesigning your whole site or app isn’t on the table. However, there are always small adjustments you can make here and there to refresh the look of your UI—tweaks that you can do at your own pace with the help of a freelance designer.

Design is always evolving, and some trends might resonate more with your business or brand than others. The good news? Many of these are easy to implement with the help of a CSS developer. Read on for a few CSS, HTML5 and JavaScript trends and technologies to try in 2018.

1. CSS Grid.

If you haven’t already, check out our article The CSS Grid Advantage to learn why you should be using this new, native CSS specification. CSS Grid is all about using combinations of columns and rows to quickly and efficiently create web-based layouts—and it gives designers unparalleled control within CSS alone they previously needed frameworks like Bootstrap or Foundation to achieve.

flexible grid layout infographic

2. Or, try going against the grid.

There’s a design trend popping up around the web called the “broken grid” that creates a more freeform, flowing layout while maintaining an excellent organizational foundation. (Scroll through this Pinterest board for a look at some beautiful broken grid examples.)

Behind the scenes, it’s still a grid. But on the surface, it abandons a grid’s visual constraints—the gutters that keep elements aligned in columns and rows—and lets elements bleed across borders in unexpected ways. Try flexing your creative muscles and experiment with “breaking the grid.” For designers, here’s a tutorial to help you get started with the trend using CSS Grid.

Image via.

3. A modern use of tried-and-true drop shadows and gradients.

Drop shadows are one of the oldest tools in the web design toolbox, but they’ve experienced a rebirth thanks to new trends like parallax scrolling and a slow shift away from the flat design trend of years past. Drop shadows can provide serious depth and clarity to immersive user experiences, and also help curb confusion within broken grid layouts.

The same can be said for gradients, which are also making a comeback with today’s bold, colorful layouts. They’re especially effective as stylish overlays on photos, which can add interest to even the most simple images, seen below.

Homepage concept via.

4. Use of serif over sans serif fonts.

Sans serif fonts have long been a fallback due to readability issues online, poor screen resolutions, and limited font rendering technology. But there’s a gradual move toward serif fonts—those versions of fonts with curls, end caps and footers on their letters—thanks to better support for more custom fonts online. Try experimenting with serif fonts in elements like headers and subheads, typically reserved for sans serif fonts, for a more sophisticated, “literary” look.

Image via.

5. Fixed and floating navigation bars.

Navigation bars can be tricky territory when it comes to UX and UI design. Their design often depends on your specific site architecture and how users consume your content—especially on mobile. But there is one easy upgrade that can give your UI a more modern feel: fixed (or fixed floating) navigation bars.

You’ve likely come across animated or fixed navigation bars—a horizontal navigation bar that remains visible at the top of the page even as you scroll through content below. A floating fixed navigation bar is an added flourish, leaving a slice of content visible behind it that almost gives the user a sense that the navigation is traveling through the site with them. It’s like having a helpful guide for the user—or a friendly reminder if your navigation houses a CTA.

The fixed navigation bar below lets the user browse a site freely without feeling like they’ve gone too far or gotten lost, encouraging more time spent on page.

Image via.

6. CSS and the HTML5 <video> element for custom video players.

Incorporating video into your site? Use CSS3 and HTML5 to embed video without relying on third-party sites like YouTube or Vimeo. This gives you added flexibility in terms of both aesthetics and functionality, allowing you to enable looping and fully control how the embedded video looks outside the constraints of the player’s container. Designers often use a gif to display a repeated video or animation, but this can sometimes sacrifice quality.

With the <video> element, you have support for excellent video quality, but bear in mind your views, bandwidth and server capacity—things that are handled for you when you use a third-party streaming site. You should have the resources available to host video on your own—check out these questions to see if it’s the right solution for you.

7. Animations and particle backgrounds.

Animation is having a major moment. When it comes to engaging UI design, beautiful transitions, and ways to express complex concepts, animation (gifs and otherwise) work great in everything from email signatures to homepages to logos, pictured below.

One way to add subtle animation to your site that won’t slow load time too much is particle backgrounds, atmospheric animations that can be created with CSS, HTML, and JavaScript. You can have particle backgrounds move as you scroll or respond to mouse movements, and it’s said they can even reduce bounce rates when used on welcome pages.

Check out our rundown of some popular animations to try in this article.

Image via.

8. Rethinking post templates and layouts for more engaging long-form content.

This one’s a little more strategic, but a valuable investment if you regularly use a CMS to publish long-form content or articles. Experiment with CSS tweaks to make your published content stand out in new ways. Play with photo alignment, padding, and fonts to break up the text. You can engage a freelance designer to work up a few versions then edit your CSS. For example, style lead paragraphs to stand out from the rest of the text, or pair different types of fonts for heads and subheads. Or, try using full-size images as backgrounds for content rather than embedding them in the traditional newsprint style.

For inspiration, check out this beautifully laid out article from The New York Times, which integrates maps, animations, bold subheads, photos, and video clips to break up the long text, creating a multi-faceted experience as the user scrolls.