Top Practices in UI/UX Design

With the rapid rate of change in UX design over the past few years, it seems like web developers and designers are constantly racing against the clock (and their peers) to keep up with and outdo the latest trends.

…And for good reason! It comes as no surprise that Internet users are developing much higher expectations when it comes to their experience on websites they visit. From search and navigation capacity to compelling imagery and video, the world of UI/UX has come a long way since the days when a website consisted of a static image and a few lines of text.

As developers and designers continue to raise the bar and develop new ways to improve user experience, we can only expect to see more and more efficient, engaging, and visually compelling websites pop up all over the web. Which is why, as a designer or developer, it is Critical (with a capital C for emphasis) that you stay on top of the latest trends in UI/UX design.

Check out the top 15 UI/UX design trends that will be making a huge impact as 2016 starts winding down.

Using IDEs For Small Packages & On-Page Elements

For anyone who doesn’t eat, sleep, and breathe web development, IDE stands for integrated development environment. An IDE is an extremely handy software that acts as a text editor, compiler, and debugger as an all-in-one package. The purpose of an IDE is to make developers’ lives a whole lot easier by helping you organize resources, prevent mistakes, and provide shortcuts in the development process.

In addition to helping developers maximize their productivity, IDEs also provide users with the analytics for a site. This can tell you everything from whether a certain code is wrong to whether you are structuring your data correctly.

One trend that is becoming increasingly popular among developers is using IDEs as an organization tool. IDEs maximize efficiency by organizing all of your deliverables into packages. For example, if you are creating a header, you can put everything into a “header package”. Work smarter, not harder right?

Open Source SCSS Variables & Sheets

Remember when CSS used to be fun? The fact that it was so simple was a driving force behind its widespread popularity. However, nowadays websites are growing and becoming increasingly complex, causing the size and complexity of stylesheets to increase as well. This all results in CSS becoming repetitive and tedious… real fast.

This is why we are seeing more and more developers turning to open source SCSS (or Sass). Sass helps expedite the process by using variables. To put it simply, variables are a way to store information, such as font stacks or colors, that you want to reuse throughout your stylesheet.

Sass also helps expand the capabilities of CSS by allowing you to create mixins, nest your CSS selectors in a way that follows the same visual hierarchy of your HTML, and improve overall control of the entire project.

Masonry Layouts For Blogs, Products, Boards, And Well, Anything!

Many developers and designers are pretty accustomed to seeing web pages laid out with CSS floats. However, this layout doesn’t take into account the size of the elements being displayed on a page. Instead, it simply adds page elements one after another regardless of size and shape. Unfortunately, when you go this route, it can be difficult to design a layout without ugly, unnecessary gaps.

The newly popular Masonry layout solves this problem by reducing the number and size of spaces and trying to fit the maximum number of boxes into rows and columns. Masonry layouts are extremely popular for image galleries, blog pages, and portfolios.

Pinterest has been doing it for years… it’s time to jump on the bandwagon!

Annotation Tools & Wireframe Collaborators (UXPin, Invision App)

Wireframes are an essential tool when building websites and apps for clients. Think about it: other than the completed website itself, wireframes are the most important deliverable we send to clients. They give us the unique ability to share ideas that are difficult to communicate and sell our vision that might otherwise be rejected.

However, as we all know too well, it is extremely rare that you send over a wireframe and receive very limited to no feedback from the client…. Oftentimes coming from several different people through several different channels. Building a website takes long enough without the constant back and forth!

This is why many developers are investing in annotation tools and wireframe collaborators like UXPin and Invision App. These tools help keep the conversation quick, to the point, and two-sided in order to expedite those early design stages.

Foundation 6

For as long as I (a seasoned web developer in my early twenties) can remember, developers have been using Bootstrap to develop “responsive, mobile-first projects from the web.” Bootstrap first became popular because of its amazing features, integration with preprocessors such as Sass and Less, and its ability to easily scale your website with a single code base.

…Well be prepared to meet it’s match! Foundation 6 is a front end framework, similar to Bootstrap, but way more powerful and way more intuitive. Basically, it is Bootstrap on steroids boasting the following benefits:

• Increased customization
• Improved accessibility
• Faster turnaround time

Designer/Developer Hybrids

The days where somebody could classify themselves as either a designer or a developer are gone. Nowadays, companies aren’t looking to hire one developer and one designer. Nope, they’re getting smart and looking to hire the complete package – a designer/developer hybrid if you will.

So, for anyone looking for a job in design, you best bet you have to know a thing or two (or three) about the development side of things too, and vice versa.

The “Hamburger Menu”

The tastiest navigation menu there ever was! But seriously, the “hamburger” menu is sweeping the Internet these days. We’re used to seeing those familiar three stacked lines on mobile websites, but these days, we are seeing them pop up more and more on desktop sites.

Big name brands like Starbucks and Facebook have implemented it, and I expect to see many more lower-profile sites implement this simple, yet powerful symbol in place of a down arrow or other navicons.

One Page Websites

The saying “less is more” has never rang more true. The prevalence of one page websites has been increasing dramatically in recent months and I don’t expect the trend to slow down or stop anytime soon.

In case you were wondering what a “one page website” is, it is exactly what it sounds like! A one page website focuses on providing just the right amount of information someone needs to make a decision and take some sort of action… in one page.

Picture the most clutter-free website you can imagine: only telling you what you need to know in order to take action. It is void of additional pages such as “about us”, “contact”, or “services” and aims to bring users’ attention to only the most valuable content.

So, next time you find yourself lost on a site, just think how much nicer it would be if you had all the information you need on one simple page (even if it means scrolling down a little bit longer).

Page Loading Animations

One thing I think that everyone can agree on is the fact that website pages are loading a whole lot faster these days than they used to. But are they really? Maybe not…

Sure, we may not be spending as much time staring at that pesky swirling rainbow circle these days, but are we really spending less time waiting for a page to load or are we simply just not thinking about it as much? The answer, my friends, is both! We all are well aware that with CDNs and new software, websites are loading faster than ever.

However, there is some waiting time, and modern web developers and designers have found a loophole with page loading animations. These engaging, oftentimes funny animations help distract the user while they are waiting to arrive at their desired online destination.

So, be prepared for a little bit more animation and a lot more entertainment next time you’re waiting for a web page to load.

Related: Five quick changes you can make to speed up your website

Scrolling Animations

While this practice is out of most people’s wheelhouse, it is definitely something to keep an eye out for in the months to come. Scrolling animations, or parallax scrolling, involves the background moving at a slower rate to the foreground, generating a 3D-like effect as you scroll down the page.

Because this effect is particularly tricky to accomplish, we don’t see many sites employing this yet, but based on the few sites I’ve seen with it, I am positive that this is going to be yuuge in the upcoming months. Check out some awesome parallax scrolling examples here!

Material Design

Google continues to impress us yet again with “Material Design” – a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science. Or, to put it in layman’s terms: a concept that allows designers to easily create shadows and make on-page elements and objects look much more realistic.

Material design may not seem like much on paper, but believe me when I say that website designs are about to look a lot more realistic and artistic than ever before… all thanks to the Big G!

Related: Five modern web development tools that will improve your website

Simplified Navigation Menus

Once again, we see that less is more! There once was a time when it was trendy to fit as many categories and subcategories into website navigational menus, but I am not the first to say that this time has come to an end.

Don’t get me wrong, some brands do need more complex nav bars just because their industry or field is complex. However, if you are selling dog food, you don’t need a nav menu that draws inspiration from the Cheesecake Factory menu (aka loooooong).

Your website’s navigation is one of the most critical aspects of user experience. As a result, it is important to stay on top of the latest trends for optimal engagement and conversion rates. And right now, the trends are pointing towards more simplified navigation menus.

More Imagery, Less Text

Who sees this starting a few issues between the web dev and SEO departments? Me! In the coming months, expect to see less stories being told with text, and more stories being told with imagery…. Which many SEOs will not be too keen on.

So, chances are, you won’t get to jump onto the “more imagery, less text” bandwagon without a struggle. However, with some tried-and-true negotiation tactics, you both will be able to reach a compromise and design a website that is visually appealing and drives traffic.

What more could you ask for!?