New Year, New Web Design Tools

The new year always seems to motivate us to get a fresh start in both our personal and professional lives. You might notice your coworkers cleaning up their workspace and discussing their New Year’s resolutions. Your boss might come around and encourage you to organize your digital files, as well.

But what about getting a fresh start with your web tools? Technology is advancing quickly, and there is probably a new web design tool available that can help you save time, work smarter, and achieve more in the new year. Web design tools should inspire creativity and innovation; not bog down workers with complications or bore them with out-of-date features.

If you resolve to step up your UI design in the new year, check out these new (and newish) web design tools that can help you redefine productivity. Sure these tools don’t actually make designers better, but they certainly help a designer display their talent and inner brilliance.

Adobe XD 

Adobe XD is a tool for vector designs and wireframing. Adobe is a well-known name in the design community, for good reason since Adobe Photoshop and Illustrator are key tools for many in the trade. Since it is an Adobe product, designers will immediately find that Adobe XD has little to no learning curve, as the UI will already feel like an old friend. Working within the Adobe product catalog also allows for integration with the Adobe Cloud products for quick and easy collaboration of library assets. The light interface allows for quick concepting and prototyping of mock ups using drawing tools, interactions and previews. There is also the option to share designs for collaborative feedback. Designers also like to use this tool when they have to present functionality to clients, because it is easy to instantly push content live. Adobe XD is accessible to most designers since it is available on both Macs and PCs.

One of the most innovative features that gives Adobe XD an edge is its introduction of voice capabilities. As more and more households convert to using smart speakers and screens as a part of their daily lives, designers need to be able to develop experiences for this immersive technology. This update allows users to, in Adobe’s own words, “design, prototype, and share digital experiences that extend beyond the screen.”

InVision Studio

This collaborative product design platform is a great tool for teams of all sizes, and helps everyone manage the process of prototyping, reviewing, managing and testing web and mobile apps. They have made it easy to transition from other web design tools, like Sketch, and the interface is intuitive enough that anyone with experience can jump in without lengthy tutorials. InVision allows for quick use of animation and saves time during the revision process as well, by offering the animation interface in a single window.

Sketch 

Sketch is giving Adobe a run for its money, with many designers preferring it for their UI design. Sketch was built with an intuitive interface, specifically for the design of websites and apps. Sketch uses small documents which are easy to sort and revise, and offers a minimal, grid-based interface that is easy to use for both novice and experienced designers. Sketch also offers a huge library of plug-ins for designers to use, as well as a preview feature that encompasses any mobile device. The one big limitation for Sketch, however, is that it is only available to use on Macs.

Micro Animations Have a Major Influence on User Experience

In today’s emoji-centric world, the way that we communicate, on- and off-line, has changed dramatically. Pair that communication shift with technology advances, and the outcome is a brand new way to reach and influence your interface users.

Enter micro animations; this feature might have a small name, but it packs a big punch.

Digital interface animation, as a concept, is not new. In fact, if you are old enough to have been around during the birth of the Internet, you might remember the gloriously awful animations that were included even on the earliest websites. We’ve come a long way, baby, and digital interface animation has been reborn.

Micro animations are momentary, artfully-crafted visual cues that are meant to guide users through their digital experience by providing feedback, clarity, and confirmation during interactions. It allows designers to use their creativity to convey messaging without crowding an interface with words, which helps manage the user’s focus and provides them with instant gratification for their action.

Micro animations work best when they are functional within the interface so that they can create delightful moments for users. Here’s what micro animations should accomplish:

  • Enhance navigation
  • Offer tips that enhance the user experience
  • Provide users with status updates and feedback on their progress
  • Drive user attention while providing them with augmented control
  • Confirm actions by showing results
  • Establish an emotional connection between the brand and the user

A few basic examples of micro animation use include:

  • Status Bars. These can be used on forms, in galleries, and during uploads and downloads. It not only reassures the user that their action has registered, but it calls attention to the progress they are making, which can be rewarding.
  • Calls-to-Action. Micro animations have the ability to attract and hold attention. This makes them ideal for use with and around your calls-to-action. Whether you are persuading them to take a starting action or a continuing action, highlight it with a subtle-but-effective animation.
  • Kudos. When used with some restraint, micro animations can also be a great way to offer rewards to your users. Maybe they completed a form, or checked off a task, or they were the first or fastest person to do something; whatever small achievement they had, offer them kudos with a fun, brand-centric micro animation. This can be as simple as a thumbs up or even clapping hands.
  • Swiping. Touch-screen devices have ushered in the ‘swipe’ culture and made ‘tapping’ yesterday’s news. Swiping can be used to move between pages or images, and to access additional information about a product or service.

However you decide to use micro animations, remember that less is more. Too many animations will just clutter the interface and your branding and messaging will get lost. Instead, work through a system where you define which triggers you want to include micro animations. Once defined, establish a set of rules for each trigger, and be sure to discuss which user-facing feedback needs to be communicated as well.

Digital Style 2018 Award Recognition

As a creative digital agency, we take pride in the work we do for our clients. Each one of our projects are carefully crafted to represent our client’s brand identity, and properly using the website design for the best user experience. Sometimes, we win awards for them. Here’s a look at the recent award recognition we’ve received so far this year for our web design efforts:

The Hermes Creative Awards is an annual international competition for creative professionals, where projects are evaluated for over 200 categories in print media, pr/communications, and electronic/social/interactive media. The competition seeks submissions involved in concept, writing, and design of traditional material, and emerging technologies.

Our clients, Westcoat, Ausgar, and Reiter Burns looked to our creative digital agency to give their websites a fresh new look. For Westcoat, we redesigned their company’s website and added a material estimator feature for boosting user experience. Ausgar needed a rebranding which included a new logo and full website redesign, and for Reiter Burns we developed their branding and created a full website design. The following recognitions were awarded to Digital Style:

Hermes Creative Awards – Platinum | Westcoat | Web Design   

Hermes Creative Awards – Platinum | Ausgar | Web Design

 

Hermes Creative Awards – Gold | Reiter Burns | Web Design

 

The Communicator Awards presented by the Academy of Interactive & Visual Arts is the leading international awards program recognizing big ideas in marketing and communications. Founded over two decades ago, The Communicator Awards receives over 6,000 entries from companies and agencies of all sizes, making it one of the largest awards of its kind in the world.

This year, we received recognition in the category of web design for our clients North U, and Ausgar. For North U, we did a full website redesign and integrated e-commerce capabilities. As for Ausgar, the team rebranded their look and completed a full website redesign.

 

Communicator Awards – Award of Distinction | North U | Web Design

 

Communicator Awards – Award of Excellence | Ausgar | Web Design

 

To learn more about how Digital Style can assist with your rebrand or website redesign, contact us here.

Case Study: Cutting Through the Noise with Video Brochures from SmartDrive

Background

SmartDrive Systems gives fleets and drivers unprecedented driving performance insight and analysis, helping save fuel, expenses and lives. Its video analysis, predictive analytics and personalized performance program help fleets improve driving skills, lower operating costs and deliver significant ROI. Their mission is to help drivers come home safely to their families.

Brainstorming

SmartDrive came to us for help with their account-based marketing campaign. Their goal was to introduce select safety managers to their video-based safety program in a way that allowed
them to leverage their new video testimonials.

Campaign Approach

After brainstorming with the client, we settled on a simple idea that we felt would be highly impactful. In a time where digital marketing rules, traditional marketing has now become the unexpected way to surprise and delight. With that in mind, we developed a direct mail campaign using customized video brochures. Now, most people hear “direct mail” and immediately start to yawn; but that way of thinking doesn’t take into account how much technological advances can make direct mail a completely immersive experience.

SmartDrive’s target accounts received the beautiful brochure and a personalized card, signed by their account executive, which included program statistics and asked for an on-site meeting.

The letter encouraged the recipient to watch the enclosed customer testimonial videos, which were given by recognizable industry-leading safety professionals. Once the enclosed brochure was opened, a short testimonial compilation video would play on the 7” display, capturing the attention of the viewer.

“Digital Style has been instrumental in helping SmartDrive continuously deliver high-quality content and campaign creative. They are truly an extension of our in-house marketing team, supporting us on everything from new collateral to display advertising to video production and marketing automation implementation. This team is fast, extremely dependable and they deliver top-notch work the first time around — all qualities that everyone should want in their digital marketing agency.” — Erica Frank, Sr. Director of Marketing, SmartDrive

Conclusion

People are exposed to over 3,000 brand impressions a day. They pay attention to 52 and remember just 4. Video brochures allow marketers to put a multi-sensory physical item directly in their prospects’ hands, offering rich engagement and helping brands cut through the noise of today’s digital-only marketing campaigns.


About SmartDrive

SmartDrive Systems is an industry innovator, delivering driving performance solutions and transportation intelligence that transform fleet safety and operational efficiency. Our video analysis, predictive analytics and personalized performance program improves driving skills, lowers costs and provides immediate ROI.

Download the Case Study here: Cutting Through the Noise with Video Brochures