Flat design and innovative UI trends are all part of a growing movement toward recreating realistic spaces and scapes across a website or mobile application, but there’s an interesting trend running alongside it, and it’s a move away from boxes as containers, and there are arguably two main ways that designers can approach a world without corners.
- The organic look. One of the ways that this squareless design trend has been implemented is in the creation of “workspaces” on websites, which can include round, sticker-like images and elements that are placed in a way that seem like an organic, living plane. If one of the keys to flat design is to mimic the real world look of a desk and paper, complete with shadows and layers, then the organic approach to removing squares is to create what is effectively a “messy” desk. That doesn’t give you carte blanche to slap elements anywhere and everywhere, but it does remove the notion that your entire UI has to be symmetrical, perfectly angled, and precise.
- The illusory look. Another advantage that flat design brings to us is the creation of a pseudo-3D aesthetic. Either used on its own, or combined with the organic approach, the illusory look can take it a step further, and turn a monitor into a viewport to a real space somewhere in the world. Restaurants, vacation companies, and other services that exist outside of the web can really benefit from this ability to transport a visitor to another space, complete with shadows, vivid coloring, and more. With this approach, it’s usually best to use real, and not generated, image assets, to make the illusion more effective.
Combining Nontraditional Shapes with Other Ideas
If the placement of these shapes was effective enough, we could leave it at that, but there are other interesting ways to increase the visual impact and wow factor that these images have, including:
- Parallax design, which implements a background image that can stay static or move at a different speed from the scroll of the page. Just as an example, a rounded image representing a ball could be used with a parallax background implying the source from which it is being thrown, and through the use of controlled scroll speed to parallax speed, can give the illusion of an object in flight. With more advanced control, you could even make the background shrink away and scroll to make it seem that the object is getting closer.
- Material design and Kpop aesthetic, both of which use shapes that “pop up” and have texture, multifaceted shadowing, and layers. To implement these properly you’ll need to put a lot of work into editing your images to give them a more realistic look, but the end result could be something amazing, vivid, and very engaging for visitors.
The ideas don’t stop there– with animated UI features and more, you’ve got a lot of different ways to take full advantage of shapes that just don’t fit into a convenient box anymore.
Typography is how users will see the content on your site, beyond its fancy graphics, scrolling backgrounds, and animations. Stephen King commented that writing was a form of telepathy, wherein the writer is communicating their thoughts to the reader. How those thoughts are formed, and even how they’re displayed, can effect just how clear that message will be. One of the main pillars of support for great logos and mottos is just how those letters look on the screen, against a field, or embedded into an object. We can never underestimate the impact that correct font choices can have– although that’s not a license to simply use the font named “Impact,” before you run to replace all of your work with it.
No, Impact isn’t the new trend in 2015, but it is a good launching point to discuss bold fonts. Bolder fonts have several qualities to consider, such as:
- Color options. A bold font isn’t just a thicker set of characters, but more actual space where you can place certain colors to contrast or compliment other colors on the page. When we think of bold fonts, we typically only consider the black bold fonts, but bold whites, reds, greens, blues, and every other color of the spectrum all have their place as well. With thicker characters comes more room to place these colors, and if you choose your bold font correctly, those shapes will have some incredible aesthetic value.
- Cut-outs. You can use your bolder letters to create some very striking cut outs with a background image. Silhouette images are a nice way to illustrate the point of the name or statement, along with an image that is sharp, but restricted to the space of those characters, and with bold characters, you do get more space to display those images. You will often see this style of bold lettering used in credits and celebrity pages, and it does have a very nice “Hollywood” effect. Perfect for poster art, and easy to apply to non-profit organization pages that want to say and show their mission at the same time.
- Readability where it counts. Although this saying is a bit worn out, “at the end of the day,” what really matters is your page’s readability, and bold fonts are readable. They’re legible on desktop monitors, and they’re legible on mobile screens. Sometimes, they’re one of the most legible elements of the page. That gives you the opportunity to make your call to action bold, as long as you aren’t pushing out other important elements with obnoxiously large and blocky letters.
Bold fonts are on the rise. A look at both online and print advertising should be more than enough evidence that there are movements toward using bolder, thicker typographic options over slim, trim font cousins. The boldness of these fonts can allow designers to slam down a message, brand, or name, and have it define the entire presentation, and that makes a bold font a very powerful tool.
Patterns are a basic idea with a complex range of implementations in modern web design. A pattern is a repeating symbol or shape over a set field. We know patterns as polka dots, checks, and essentially repeating design you can imagine. Patterns can create a sense of order or artistic flourish in an otherwise blank space, and they can do a lot to highlight the content that they are backing.
In fashion, patterns can be subtle, or they can be bold, but they usually do not take away or hide from the cut of a piece of cloth, its folds, or the wearer themselves. That’s something to take into account with how they’re used on websites as well.
Creating the Pattern
- By hand, through artistic software, including Photoshop, GIMP, and others. You get control over the colors and dimensions of these patterns, but you may also need to create several versions of a pattern that still need to flow together well when you’re designing responsive website images or backgrounds as well. The key is to create something that flows seamlessly, however it’s aligned on the page.
- By code, there are actually many ways to generate patterns based on mathematical formulas and data that can be entered into different types of software. Some programs make this incredible easy, including fractal pattern generators that will create repeating patterns based on random strings of information, while others can actually take information and display it in a sort of info-graphic style display. Want to make an artistic show of how much profitability has gone up over the years? It’s actually possible to do so through a background pattern, and with the right coding experience and design tools, that information can even update based on user interaction.
One of the important things to note here is that patterns actually can go hand in hand with responsive, animated user interfaces, which themselves are a discipline that you would need experience. The integration of these two ideas can create for some really unique website presentations that users will both understand and be impressed by.
Not Always Repeating
Finally, a pattern doesn’t always need to repeat itself to be considered a pattern. Some patterns can repeat certain scales or containers, including grid-style patterns that contain links and images of a website that lead to other content, while others may be patterns based on expanding or shrinking versions of an image.
With the rise of flat design, and the newer Material Design aesthetic that Google is promoting, there are even more opportunities to take advantage of the idea of “paper” on the workspace, to create some outstanding shapes and interactions that can catch users off guard with just how realistic they look on the screen. Patterns can be used to create visual depth, to add layering and character to a website, or even to mimic a “homemade,” crafty look that is perfect for small online retailers and landing pages for bigger companies alike.
A quick look at any of the predicted design trends of 2015 reveals a few common entries, one of which is “storytelling.” The idea itself is rather simple; telling a story means guiding your audience through a set flow of interactive elements that can express some form of information, usually a narrative, in a way that is unique from the typical flow of text on a screen. It’s called story “telling,” but the real strength of the design trend is in how much of the story you can “show” as well.
Starting Out on an Adventure
As with any good story, your storytelling design needs to have a set point that leads the viewer into a bigger field of ideas and concepts. The storytelling flow usually begins with a very brief introduction screen, not unlike a landing page. Calls to action can be placed to indicate how you move forward, but one of the important things to remember is that there should also be very strong visual cues.
The combination of great design and visual art has been proven to improve a viewer’s memory retention of the subject, so this format’s ideal for:
- Brand new products or concepts. Some products are easier to explain than others, but what they all tend to have in common is that there’s a field of competing ideas that are also vying for the attention of the consumer public. From a new line of trail mix, to a brand new way to fabricate computer parts, storytelling can help you to break down what your product is, and why it matters, usually within the very first page or two.
- Non-profit organizations and movements. Another example of a concept that can be difficult to explain at times, but leading a viewer along on a story allows you to inject information, real world photography, and much more, along with links on how visitors can help or participate in a cause. Like a video, a storytelling presentation can actually give you a stronger impact by putting real faces and places to facts and figures.
- Small businesses. You have a lot of room to experiment as a smaller business or independent worker, and storytelling is a good place to start. As with new products, a new business has a lot to prove to an audience, and may have its own endearing story to tell in how it was formed, what its vision might be, and why its products stand out.
With responsive design, you also get storytelling opportunities that look and interact well on mobile screens with swipe gestures, essentially mimicking a mobile application look. It’s best to keep the loading times low, as usual, but storytelling is also very much a visual style of presentation, and even interaction, so don’t be afraid to experiment with dynamic backgrounds, nontraditional spaces and containers, and even animated elements. The finished product could say much more about an idea than any press release or newsletter.
Websites are made to look great, load quickly, and deliver content in a way that users can digest and appreciate, whatever their topic may be. That having been said, there are always new ways to form your website, from top to bottom. There’s info graphics, layers that can roll over on user interactions, applications, widgets, and a huge arsenal of tools that you can use to communicate simple information. There’s only one problem; is it getting in the way?
A quick look at your own smartphone or tablet will reveal a lot about your own habits and preferences. Where your icons are located, how much clutter is on your very front page, and even your bookmarks will all show you more about what you want from a user experience, and it could reveal what your users are looking for as well.
- Is it easy to navigate? Your own mobile device will reveal the first strength of a user interface, which is, can you actually understand what you’re looking at from an initial glance? Not all symbols and options are explicit, but there are flows that indicate that there is more content if you swipe left or right, or that there are certain applications sitting on the face of the front page, and others that are behind links and icons.
- Is it easy to use? A mobile device is expected to be mobile friendly by default, and by looking at your own device, you can understand why. Swipes, text that is adequately sized, images that are scaled properly to your resolution, and even choice of margin and border dimensions all work together to create a more cohesive mobile experience. If your site doesn’t have these things taken into consideration, then you could be cutting down on the experience of a very sizable and growing demographic of users that primarily, or even solely, browse the internet through their device.
- Is it too much? There’s lots of ways to add more content to a mobile presentation, but there are just as many ways to add too much clutter. Clutter can be distracting at best, and at worst, introduces the potential for programming conflicts that can lead to reduced functionality, more processing burdens, and other issues that can turn mobile users away. Know when enough is enough when it comes to features, especially for mobile.
The take away from this exercise is to see what’s been under your nose the entire time; you can’t design a mobile site for functionality and looks without looking at what you actually use, how you would make a change, and just how practical a solution may be once you actually deploy it for your mobile users. If you take the time to test any ideas that you have for a mobile responsive site on an actual mobile device, you will have a much stronger understanding of what to add, or what to take away, based on your experience.
Hero images and videos on websites are the first thing users are seeing on some of the most popular sites online, but those aren’t necessarily new in 1015. There have always been new trends in web design that have gone relatively underutilized for a year or two before they really find their footing, and with dynamic backgrounds, the same is true: There have been a glut of sites that opt for scrolling, large, images that have been in the background. These backgrounds aren’t on the wrong path, but they may not be taking advantage of all that these dynamic backgrounds can do for your design.
- Animation is becoming bigger with user interfaces and background images alike, especially with the popularity of HTML5. If you’ve seen Paypal.com’s front page, you’ve already seen some very interesting implementation of video in the background. It’s short, it loops, and it looks crisp, a bit like an interactive commercial. The video that’s looped tends to be of people doing business in smaller locations– perfect for the target audience of Paypal, and a good indicator of what you can do with your own animated background.
- Interactivity is another trend in UI design, and it can apply to your background. The level of interaction depends on how much you’re willing to work on the project. You can have the background change to indicate the change of time of day, for example, which is actually an often overlooked aspect of responsive site design, or you can have the background change to actually display info graphics and other data-based graphics that are relevant to the link that a user has clicked on. These dynamic backgrounds can remain at the back, as the name implies, but they can also create the idea of a flowing, productive space.
- 3D elements are also on the rise. With aesthetics like flat design, you already have some pseudo-3D elements that are trending in web design, so a dynamic 3D background is just the natural progression of that idea. You can use your dynamic background to frame an idea or content in a way that will really blow your visitors’ minds, but be careful not to overdo it.
Dynamic backgrounds are no doubt a step toward what we can expect in the years of 2016, 2017, and beyond, but they are still in the earliest steps of web trends and designs. What we can learn from these dynamic presentations is that users are always looking for content that takes them out of their comfort zone, and engages them on a level that is still connected to the content itself.
Blogs that are related to mechanical design, companies that sell architectural services, and more, can all benefit from using dynamic backgrounds intelligently, allowing for the illustration of certain concepts that otherwise lay flatly on the page in text. As long as you don’t overload your users or make you’re loading times too long, it’s hard to ignore the benefits.
Websites that focus on smaller businesses and startup companies can be very effective, both because of their ease in social sharing and their unique niche focuses which you can determine by knowing more about the business itself. Whether it’s your business, or one that you’re working for as a designer, there are a few goals that you should hit before you consider your work ready to deploy.
- Content is a good way to set your website apart from the competition. You may be surprised at just how many websites choose to launch with the bare minimum of content to offer to anyone who clicks their link. On the one hand, there’s a school of thought that it’s just best to hit the ground running with whatever’s available so that you don’t get bogged down in waiting and second guessing yourself, but on the other hand, a lack of content is usually not a good sign for the future when you’ve got consumers and other businesses considering you as a prospective partner in some form of transaction. Consider your website to be like a house; if it doesn’t have a lot of furniture and generally doesn’t look “lived in,” it’s a fair guess that you aren’t staying there in the long term.
- Compatible, but consistent. Search engines are increasingly hesitant to recommend mobile versions of websites, as opposed to those that offer a responsive design that can cater to desktop and mobile users. That’s why it’s good to start from the ground up with a responsive website. Responsive sites aren’t a cure-all for doing the actual footwork of seeing which parameters work best at which resolutions, and it definitely has its own potential mistakes that you need to avoid, but it’s a compatible, and consistent, presentation that shows that you’re ready to take on a series of challenges ahead.
- A message that matters, especially calls to action. It can be tempting to just create a “teaser” website and try to generate hype or attention, but you need to have something that users can interact with. A guiding post or block of text is a good way to get that process rolling, which is why your call to action can make or break the success of your startup website. Calls to action for smaller business websites need to be up front, visible, and easy to read. They don’t need to dominate the visual landscape by any means, but they do need to draw attention and make sure that users get the message that there’s more to the site than just text and images. It’s a portal to growing a business, after all.
Having a great content management system, or CMS, can go a long way toward managing content, working with advanced programming, and changing messages and calls to action when necessary, so start with the best tools for the job. If all goes well, you’ll get a living business card that will put any small company on the right track.
Interactive UI elements are becoming a big trend in 2015, especially with animated elements. These UI designs do their best to simulate a “mobile application” feel, on the web, which can include animated menu options, sliding and growing elements, and more. In the past, designers had to rely on clunky options like Flash to achieve this look, but the rise of HTML5 has led to more streamlined, speedier options for both designers and users alike.
In this article, we’ll look at some of the great benefits of going with an interactive, animated user interface, along with considerations to remember so that you don’t leave anyone out in the cold after you deploy your site.
- Engagement. Have you ever given a cat a toy, and a paper bag? The same experiment can work with babies, but here’s the general idea: It’s a basic item, but it has features, dimensions, weights, and sounds that are fascinating. That’s part of the idea with interaction with your user interface: You can put as many shiny buttons on the user interface as you want, but if it doesn’t look natural, and it doesn’t look inviting, it won’t be as well received as the plain paper bag. In this case, we’re referring to designs that mimic the look of natural materials and shapes. These are what really get the attention of your average visitor. With the use of ideals like Google’s “Material Design,” and other flat design aesthetics mixed in, you can create some extremely realistic “paper” surface designs, for example, that are as intuitive as they are intriguing.
- Performance. With the right amount of interactivity, you can actually pack a great deal of features into a smaller amount of loading and processing, as long as you’re smart. Loading down your UI with unnecessary sounds and animations will hinder your efforts on this front, but with the same flat “front page” design, you can load in areas where users can click or swipe for more information, contact details, and more. The best part about these single, one stop shops is that they’re easy to share, and you can see lower “bounce back” rates as users explore all of the information that your interactive UI can offer.
Everyone makes mistakes, but sometimes those mistakes can cost you time and money, more than you could have ever possibly saved by cutting corners. Here’s a list of five mistakes that you need to avoid at all costs when designing or managing a site. They won’t guarantee that your next site will be a smashing success, but they are very likely to keep it from being a complete wreck and a waste of resources.
- Broken links. If there was ever a point where it was acceptable to have broken links, especially links going to places on your own site, that time is long gone. Users don’t like it. Search engines penalize you for it. Even other websites will link to you less often when your own links aren’t up to date, because that spill over damage hurts their reputation online as well. If you’re wondering what a reputation’s worth, consider how much money is spent every year on SEO and other forms of online marketing, and then understand that this one, very easily solvable problem is what those companies are hired to review and fix.
- Unclear or forced navigation. Some companies can “get away” with this, but those websites tend to be in the adult entertainment genre. If your site doesn’t have clear navigation to where links are directing, or if you try to do the very unpopular “pop under” method to hide an advertisement or landing page under a currently active browser window, then you are making a big mistake. Likewise, messing around with a browser’s ability to go back is going to hurt your engagement numbers.
- Stock images everywhere. It’s easy and understandable even, to use a few stock images in some parts of your site. If your entire website is loaded with stock photography of people who look professional, offices which are obviously way nicer than your company’s budget would ever allow, and receptionists who don’t work for you in any capacity, you are falling in line with the type of website that users tend to avoid when they want to do business. Avoid this one like the plague.
- Using outdated design tools. Flash is one of the biggest ones, but if you’ve got frames, or animated gifs, or anything that was popular a decade ago, it dates your site, and it definitely hurts the image that you’re going for. There’s also a popular form of site marketing called the “long form letter” which was used commonly with “free eBook” sites and merchandise of that nature– avoid looking like spam, at all costs.
Typography is about picking the right fonts, but what happens when you see the perfect font, and have no name for it? Usually, a lot of head scratching, scrambling through piles of look-alike fonts, and a lot of frustration. Fortunately for typography’s sake, there are a few free tools online that can help you to identify those choice fonts for your own site or design.
A professionally made online utility, What the Font allows you to upload an image that has the font that you’re looking for, and then run it through their own online archive of fonts. The system will then give you many different options of what that font could be. This can be a serious time saver if you’re interested in finding either the font, or just fonts that have a similar style, including bold and gothic variations. As an added bonus, there’s also a forum where you can post your image, provided that the system can’t find it automatically, and then a font expert can get back to you on the possible name.
Ever play one of those guessing board games as a kid? “Does the person in your picture wear glasses? Do they have a beard?” Identifont’s a lot like that. This utility lets you guess at your own font by asking you questions about its characteristics, from the strokes and lines, to how certain letters are formed, along with helpful visual cues so that you can answer the questions with more accuracy. Identifont’s got a huge database of fonts to ask questions for, and it can narrow down your search if you know the font, but don’t have the image to upload yourself.
Another utility that gives you answers based on questions about the font, although this one works by identifying different exact characters, piece by piece. Typenavigator can sometimes provide answers in much less time than it takes to fill out the Identifont questionnaire, which some users might find to be overly long. As another advantage, you can even just blindly guess to see which fonts you like for a logo, piece by piece, to pick out the perfect font by the letters you’ll actually be using. TypeNavigator was created by Fontshop, and is based on a lot of the qualities that professional typographists are looking for in their online finder program, so you can trust it to be a productive experience.
Each of the above mentioned tools is free to use, so be sure to include them in your toolkit whenever you’ve got a mystery font on your hands.
What If I Want Suggestions?
Sometimes, you just know the type of font that might be right, but not necessarily the exact style of that font, which is why there are also useful tools for that job, like Google’s own Google Fonts site, which provides you with a list of fonts, preview images, and options to easily insert it into your own style sheet.