In this fast-moving industry and in San Francisco and San Jose no less, it is crucial to keep abreast of the latest and greatest web design and development trends. The newest features, functionalities, layouts and styles convert more users and routinely keep our clients coming back for more. One year can be a lifetime in the web design world and what was popular last year very likely could be obsolete or faux pas this year.
Video and Interactive Backgrounds
It is almost impossible to ignore something that moves in a sea of static content. It is human nature to be more engaged with a video or interactive background than an image. In fact, according to Food Blogger Pro, a video background can increase conversion by 138%! Here are some simple tips on how to successfully implement your background video:
- Create a custom video that is relevant to your content and aligns with your brand. Don’t pick any old stock video and use it for the sake of using a video. It should never compete with your content.
- Since videos tend to be large files, use a short video that loops and preferably without sound because no one wants to hear your website in a quiet office and you don’t want to freak out visitors who have their volume cranked up.
- You should hide the video controls because video backgrounds are supposed to play in the background.
- You can overlay your video background with a screen of black, white or your branding color to reduce intensity and increase the legibility of your content on top.
Check out this extremely effective and mesmerizing background video for the National Parks.
Asymmetrical Layouts
Asymmetrical layouts are when there is a large element like an image that balance out smaller or dissimilar ones like text thereby creating different focal points. Asymmetrical web design can make your site look more interesting and dynamic than symmetrical one. This works best when you pair relevant elements together to make the webpage appear more natural. Balancing negative and positive white space and using bold contrasting colors can also be used to create a more harmonious layout. Asymmetrical layouts if executed properly can add visual weights to different parts of your website design there by guiding visitors through your page for more effective storytelling. Myro accomplishes this by pairing a bold image with with an even bolder headline and rotating the two types of content throughout the page. This fun website places an aspirational spin on something we use daily and commonly forget about.
Vivid Colors and Gradients
Just like the vivid image for this blog post, bright colors and gradients will continue to dominate website designs this year. Everything from gradient filters over photos and videos to text and background gradients that are bold, loud and full of color are totally in. You can see this in Apple’s iPhone XS page.
Dramatic & Playful Typography
Typography is the style, arrangement and formatting of type on a page. With a gazillion Google fonts that you can format your content with, there are many ways to spice up your website design with typography like bold, outline and 3D just to name a few. Check out this website with spinning animated typography for a capsule collection and traveling popup store for a footwear label Arche68 named in honor of the year they were founded. Their shoes are rather ugly but their website is absolutely mesmerizing, a stellar example of how great web design and marketing can elevate your product.
Full-Width Open Compositions
Not too long ago, web designers used to frame their websites in boxes so visitors knew where things started and ended. Nowadays, there is a trend towards open, airy websites that load full-screen and infinitely flowing with overlapping elements. Check out this airline website that shows a full-width video through brush strokes. The subtle animation of the video edges makes it even more unique and memorable.
Shape Dividers
It’s time to ditch those boring, straight lines and opt for flowing transitions and shape dividers. Check out this jazz website that does a brilliant job of integrating shape dividers to divide up the homepage while simultaneously aligning with their corporate identity and images.
Minimalism & Copious White Space
Minimalism is about stripping the website design down to only the absolutely necessary and essential elements so that there is nothing more left to take away. Minimalism and white space have been trendy and will stay trendy for the foreseeable future. Minimalist websites are easy to make responsive, load faster because there are less elements, removes distractions to hone users in on your product or service and lastly, it makes navigation intuitive. Here are some tips for effective minimalist website design:
- using white space to balance the website design
- pairing bright colors with more subtle complementary hues
- use fancier fonts to compensate for sparse imagery and animation
- break up your content into blocks to enable scannability
- simplify your navigation to improve the mobile experience
Chatbots
With the rise and advancement of artificial intelligence and voice assistants like Alexa and Siri, chatbots are getting more intelligent, smart and efficient. Chatbots are conversational interfaces that make your brand more human and approachable by chatting with your website visitors. Unlike most websites that are aimed at everyone, chatbots can be customized to express different personalities based on who they are speaking with. Well developed chatbots can replace employees who field basic questions. However, they can be gimmicky or annoying when they are not well designed. Indeed, chatbots can replace bad web designers. Good web designers will use them as another tool to enhance user experiences.
Mobile Speed & Mobile-First Design
For years, Google was only focusing on desktop searches. However as of of July 2018, mobile speed is officially a major ranking signal so mobile speed is significantly more important now. Some web designers are even practicing mobile-first design which means that they design for the smallest screen size first, otherwise known as progressive enhancement. If your website renders well on a mobile device, then it automatically translates better on all other devices. Because mobile-first design poses the most limitations, your design will be more content focused and thus provide a better user experience.
CSS Animations
It is quite common these days to subtly animate every element that loads or is hovered over to bring things to life and maximize engagement. Fortunately, website builders like Divi make this rather simple by allowing simple animations like fade, slide and zoom to be configurable within their drag-and-drop editor.
As we were conducting research for this post we came across this website, Species in Pieces, 30 endangered species animated with CSS polygons. It was a passion project created by Bryan James Design where each shape is being manipulated with a new set of coordinates while being maintained as triangles with CSS transitions controlling the movements. In this era of a billion premade WordPress themes, it is refreshing and inspiring to how custom integrated animations can create an extraordinary website and boost curiosity. With the constantly evolving web development world, we should expect to see a rise in CSS animations in the future.
In Conclusion
If it is has been over five years since your website was designed, we hope that these new trends have inspired you to redesign in the new year. To sum it up, trends come and go. Some last for years, while others are gone in a flash. Ultimately, you should only adopt web design trends that align with your brand and messaging to make your website more powerful and effective. It will be interesting to see what web designers will do next year to captivate target audiences. As a San Francisco creative agency, we try to keep abreast of the latest web development trends and technologies.