Website design sure does look happy these days. Maybe because Spring is in the air or maybe there’s just a good vibe going around. Either way, the trends in website design this month are reflective of that upward feeling, with cool icon-style illustrations, big photography and bright color choices.
Here’s what’s trending in design this month:
1) Icon-style illustrations
It’s hard not to love a great illustration. Some of the best illustrations we are seeing right now have more of an icon-style feel to them. The comes with a few key characteristics:
- Flat and simple illustrated elements (note how all of the tiny illustrations are combined in the Confederation Studio site)
- Bright color or simple coloring featuring primary hues
- Geometric shapes with an interactive purpose
- Elements with the look and feel of the icon, minus the container, so visually you see it as a drawing and not a button
- Hand-drawn illustrative effects
- Elements that looks like icons, but take up considerably more space on the canvas than an icon
- Simple line-style drawings (such as the style from Draw a Better 2016)
What’s cool about this trend is that it works to incorporate an element of whimsy into a design project without feeling overwhelmingly whimsical. It creates a nice balance of handmade and professional. It also takes on a somewhat more masculine feel than many of the other trends that focus on whimsy, such as watercolor or hand-drawn script lettering.
Even if you aren’t an illustrator, this is a trend you can take advantage of. There are plenty of vendors—paid and free—that create vector-based icon kits. Look for a kit that includes all of the actual shape files so you can pull apart pieces, change colors and mix-and-match parts to create oversized illustrated iconography for your projects.
2. Larger than life photography
A big, bold photograph or image makes a stunning first impression. That’s why so many designers are selecting larger-then life images to draw users into their website designs. This design element can be surprising, interesting and be a great alternative if you have one or two great images, but not a large library to work with.
But you have to willing to get a little uncomfortable to get there.
To make the most of the larger-than-life photography trend you need to be willing to do one of three things with the design:
- Crop a photo so tightly that it takes up a significant portion of the screen, so that the image is scaled to a proportion that’s larger than reality
- Zoom in to an almost uncomfortable level with images of people and faces to show every detail
- Stage a standard photo but add an element that’s different or interesting in a way that’s a little unexpected
All three of these techniques might be quite uncomfortable at first. Intense crops, super-close faces and oddities can all make you a little uneasy at first. Approach the visual for this type of design a little differently. Start with the biggest or oddest option possible. Then back off in small increments and evaluate how you feel about the image. Chances are you might end up going back to one of the earlier options.
By taking this approach you allow yourself to see the design and imagery in a different way. That’s what makes this trend so striking—the images are different. They draw users in because the shapes, crops and overall styles are so unlike most of the websites a user lands on every day.
3. Bright color choices
Bright, bold color is in. The trend has influences rooted in Material Design. Even though Material is an interaction-based design style, some of the visual components are gaining traction on their own. This applies to color in particular.
Why use a Material-style color palette if the rest of the design is not Material? It’s a simple way to add a trendy element to a project without a full-scale redesign. You can almost add a bright color and leave the rest of the design alone with just a few tweaks to the CSS or imagery.
What is Material color? There’s no perfect definition, but here’s how Google describes it: “Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” – https://www.google.com/design/spec/style/color.html
If you are interested in creating a Material-based color palette and need a starting place, try Material Palette. http://www.materialpalette.com/
The bold color options are beautiful and stand out against many of the more subdued minimal-style projects that have been popular. Bright blues, greens and yellows are especially popular as accents in the color palette. The trend seems to be focused on touches of Material color, not full-scale color palettes.
For a project that really wows, it takes a more than just a bright color. The mood of the project should be equally bright.
- Note how Lefty pairs bright green with images of happy, smiling people to create an overwhelming positive mood.
- BNP Paribas uses a bright green to bring users into a game-style interface that is set against a darker backdrop.
- Big Drop uses a bold yellow (and blue, red and green on the scroll) with light images and a fun typeface to draw users in, making the business site seem less formal.
The trick to adding in hints of Material Design-inspired colors is not to lose your branding. Don’t redo your entire color palette based on a trend; rather find a way to incorporate bright color without overwhelming the design. The example uses are great ways to think about it—use a simple colored shape as a visual element, try a boldly colored headline or use bright color panels to create a more immersive interactive experience for users as they scroll down the page.
It’s great when a few trends can just make you happy. That’s what this group does with color and with type choices and with imagery. Maybe it’s not just the influence of spring and we’ll continue to see these elements in even more designs in the months to come.
What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.