Ways to make websites come to life
Hovers! Borders! Pseudo Elements! Oh my!
There is a seemingly never ending list of web design tips and tricks, but when it comes to breathing life into your sites, there are a few must-have elements to get to that next level. In this article we have outlined 3 of the best (and easiest) ways to step up your design game and bring your site to life. As you read along, be sure to check out the sites mentioned and do your own exploring.
Pseudo elements:
Pseudo elements are amazing. As a web designer, it’s something we use on pretty much every single site. Pseudo elements are used to help style a selected part of an element. Some of the more common ones you may see are :before, :after, :marker, etc. To learn more about what a pseudo element is and how to use them, check out the MDN docs. Let’s show you a few examples on a BentoBox site.
Oak & Iron:
A great example of adding some pseudo elements to help enhance a site is by adding some decorative borders, as seen here on Oak & Iron. The customer provided some amazing border assets and wanted to see them used throughout the site. The designer went and added a few of them over some of the photography on the homepage, as well as helped make the borders on the menu page just a little more dynamic. Plus, to make it extra special, we added some of their illustrations as pseudo elements behind the menu content on the menu page. By doing all this, we were able to nearly replicate the print menus they use at their restaurant and keep the consistency to their web presence.
Pica Rica:
Another great example is seen here on Pica Rica BBQ. The designer was able to add some additional design elements (such as the scrolling icons, the rotating badge, and the stamped illustrations) to the homepage content. By adding these illustrations through the use of pseudo elements, we were really able to make this site unique to this customer and allow their branding and identity to shine.
Breckenridge Brewery:
The last example I’ll highlight is from Breckenridge Brewery. The customer really wanted to highlight the adventure feel of their brand and wanted to showcase their mountain illustrations across the homepage. The designer found the perfect opportunity to feature them as dividers to help separate the content and add a little dimension with having them overlap other elements.
Written By: Chris Nervegna
Hovers:
Hover effects are a key component on the web to indicate interactivity, but they can also be an important part of making a design come to life. At the most basic level of hover effects, we may see a color or cursor change, but taking it a step further we can utilize CSS to introduce transitions and animations.
Button hovers
Button hovers play a vital role in indicating to the user that an element is interactive as well as identifying importance. A great example of both stylistic and interactive hovers is Nats Mountain House. The standard buttons throughout the site feature a color change in the form of a sunburst animation. The teal or light blue rectangular buttons transition into a burnt orange background with thick black borders text. The secret? Using a growing background image, in this case; a flower. On the same site, we see animated butterfly hover effects on nav links as well as spinning social icons with a color change.
Content hovers
Hover effects don’t always need to be functional, they can often be used to add movement and interest to a site without the intent of interactivity. We can see this used on the splits overlays on Hot Chikn Kitchn and Steenbocks on Orchard. As the user mouses over, the content moves seamlessly giving the user a more engaging experience over simple static content. This can also give the site dimension and depth by isolating layers like on Hot Chikn Kitchn.
Written By: Lindsey Robinson
Borders
One of the best ways to make an element of any design pop is to add a border, but not all borders are created equal. A border can be as simple as just an outline around a piece of text to indicate it’s clickable, or very complex, like an intricate image or moving pattern to really highlight an element. Borders can be used to show what ‘category’ an element falls into, if you can interact with something, or simply just to add some pizazz. When it comes to borders, the sky’s the limit, and less is not always more.
Static borders
There is a strong focus in today’s web design landscape on animation and interactivity, but when it comes to using borders well sometimes a static, graphic border is the most effective option. Take Bar Pasquale for example, while the border application may not be the first thing you notice, it adds so much dimension and needed separation to the site. The way the border blends into the background on the menu page gives a lovely 3-dimensional feel without overcomplicating it or taking away from the content.
Border effects
If a simple static border is not quite enough for your site, but you don’t want to introduce additional movement or complicated animations there are still many aesthetically pleasing border options to give your site life. Looking at a site like Wave Asian Bistro where additional movement in tandem with the hero video could be overwhelming, but some highlight and separation of the nav bar is still needed, we can turn to a border effect. In this case there is a subtle neon glow effect applied to the navigation bar and menu boxes, again it’s not overwhelming but it adds an additional dimension of life to the site beyond just a static border.
Border hover & animation
One of the most common uses of border animation is on buttons or CTAs. CTA hover animations range from simple color changes to crazy complicated graphics and movement, but focusing on just the borders of CTAs one site comes to mind. Sea Dog Brewing uses only border effects and animation in the CTA hovers and applies these effects masterfully. By adding big movement and dimension to the layered border effects, the CTAs become the focal point of the site and really drive engagement, by drawing your attention right away.
Written By: Kai Malowany
Pseudo elements, hovers, and borders, are only three ways to elevate your design. To see even more ways BentoBox designers bring sites to life, and to see these methods in action, visit out design award sites:
