3 Essential Design Trends, April 2020
568 Views
Add

3 Essential Design Trends, April 2020


This month’s website designs are showing elements of what is happening in the world around us. While this is often true, some of the things we are seeing right now are an immediate reaction to current events.

Trending this month are designs for website notifications and pop-ups, retro typography, and blue and green color schemes. Here’s what’s trending in design this month.

 

Website Notifications

The COVID-19 world health pandemic has created a need for many designers to add notices to websites. From temporary closures to delayed shipping to changes in business operations, almost every transactional website has a need for a notification.

And while many of us are having to react fast, there’s no reason these notifications need to look bad.

The keys are to ensure simplicity, readability, and user-friendliness.

Each of these three website examples does it in a different way, but all meet the three goals above.

One big change to these pop-ups from others that we’ve looked at recently is the mood of the design. It is somber and informative, not bright and cheery like many of the more sales-oriented pop-ups that have been popular.

Dick’s Sporting Goods uses a simple popup with a store image in the background that’s faded out with bold white text on top. The message is direct and to the point. There’s a secondary popup notice at the bottom of the screen for users who want to know more.

dicks

The pop-up notification has an obvious X to close the window. When the primary, center screen pop-up is displayed the rest of the website has a dark overlay to help bring focus to the notification.

Chase retooled their website header, stripping out images, to include a COVID-19 update notice alongside the customer login box. Information is easy to read and the red icon distinguishes this as important information. The button is large and visible, making it easy to find more information about what the financial institution is doing and how to find help if you need it.

chase

The shift from an image header to this informational one changes the whole mood of the website to one that is appropriate for the times.

Hell’s Kitchen uses a simple pop-up with a full-screen overlay that darkens the rest of the design. This pop-up notification contains a lot of information. But blocks of text and bolding in the right places keep it organized. The date as a headline also helps customers know that the information is up-to-date with fast-moving changes that are happening everywhere.

hells-kitchen

Note that the notification also includes links to other parts of the business that can be patronized, such as buying gift cards or making a reservation in the future. Adding a relevant link or button to a notification is a good way to help users do something with the website when they can’t necessarily do what they originally came for.

When creating this style of notification for your website, pay attention to relevant settings. With sales-based notifications or pop-ups, they may time out, stop displaying due to a cookie, or only appear for certain customers or on certain pages.

With a notification such as the ones we are seeing for COVID-19, it is likely that you’ll want to think about these settings carefully. You will likely want a popup to appear on every visit for every customer. You may need a couple of notification types; one for a physical closure and another to note delayed shipping times, for example.

 

Retro Typography

Old styles almost always come back around.

Designers seem to be experimenting with retro typography styles in a big way lately, making this a website design trend this month.

Retro styles are being used in a variety of ways and there isn’t one dominant typography style. The most common theme seems to be retro typefaces that are a little flowier with a lot of character and personality.

Retro typography styles are nice because they can create a very intentional mood for a project. One of the concepts that has trended in 2020 is the notion of throwing back to the 1920s. That retro style is something you can see hints of in the typography choice for Playful.

Without saying anything more, a typeface can transport someone to a different era or mood. That’s exactly what this design trend does for these projects.

Playful uses Antiga Regular for the main headlines.

playful

Nika Fisher uses Ziggy for the nifty counter in the bottom right corner.

nika

Madies uses Blw for the main headlines. (Note that the logo also uses a different retro style as well.

madies

 

Blue and Green Color Schemes

Blue and green color schemes make you think of nature: Green grass and trees and blue sky. These palettes can be calming, soothing, and very harmonious. (All things that might be a fresh feel in a tumultuous world, right now.)

While the use of blues and greens is not new, it is a combination that we haven’t seen a lot of in website design projects for some time.

These color schemes are evolving in a few different ways and are an easy fit with many brand colors and styles (thanks to a mostly neutral feel).

If you are interested in using this trend, play with different shades of blue and green. Start with a blue or green that is part of your brand color palette (if you have one), and incorporate colors around it.

Another option is to work from a blue or green that you might have used as part of another color trend, such as the super bright colors from GadgetGone. The blues and greens here have a definite Material Design vibe to them.

gg

Vonnda mixes the gradient trend with green and blue to create a striking visual on its homepage. The color combo makes a cool gradient in the oversized geo shape on the right side of the screen (which has a nice balance with all the whitespace) and helps the eye move through the text thanks to “commerce” highlighted using the same green-blue gradient.

vonnda

Goya uses a deep navy background with a striking emerald green to create a simple homepage aesthetic. Green is used as a highlight color in the downpage illustration and is the brand color that serves as a thread between scrolls in the one-page design. This example shows how to start with a brand color (emerald) and build a trendy palette around it.

goya

 

Conclusion

While this month’s design trends might be a little more somber than in recent months, it is a reflection of world events. Even in uncertain times, design work continues and new trends will emerge.



This content was originally published on Source link, we are just re-sharing it.

All Growth Hacking Articles

Introducing 15 Best New Portfolios, March 2020
499 Views
Add

Introducing 15 Best New Portfolios, March 2020


Are you trapped in a fourth floor apartment listening to the guy next door serenade the block from his balcony with a saxophone he made from a length of rubber tubing and an old boot?

While people the world over very sensibly self-isolate, it’s still possible to be productive, why not work on your portfolio? Strap on your noise-cancelling headphones, turn on some white noise, and grab some inspiration from our monthly roundup of the best portfolios launched in the previous four weeks.

This month we see several previous trends still going strong. There’s a whole heap of color, masses of glitch effects, and the re-return of that old favorite, big bold typography. Enjoy!

 

Mees Verberne

Mees Verberne describes himself as a creative front-end developer and designer. He makes full use of the popular glitch trend to give his site some character, but what it really does well is obscure the banding in his gradients, giving him a nice sophisticated lighting effect.

mees-verberne

 

Sing-Sing

Adi Goodrich and Sean Pecknold founded Sing-Sing five years ago. Their award-winning work has a wonderful sense of color, with some genuinely original schemes in their design and film projects. The only criticism I would have is their hamburger menu, which isn’t immediately clear.

sing-sing

 

David Polonia

If you’re a fan of glitch effects, you’ll love David Polonia’s site. Normally I advise everyone to avoid sound on websites, but David’s portfolio benefits from the uplifting energy that it provides. There’s so much to explore here, it’s less a portfolio, and more of a showreel.

david-polonia

 

Mad River

Mad River’s work is the epitome of those hipster-lumberjack designs that have been popular for a few years. So naturally, for a British design agency, its site uses an illustration straight out of a US National Park guidebook. It is very beautiful though, and the site is a pleasure to browse round.

mad-river

 

Jamhot

Tank fly boss walk jam nitty gritty you’re listening to the boy from the big bad city — ahem. Clearly someone else has a fondness for 90s-era dance music. Jamhot exudes confidence, but why not when you have that animation on your site’s landing page. Seriously, I could look at this beauty for hours.

jamhot

 

Halbstark

I love the mountains, so Halbstark’s blend of big bold type, and eye onto a mountain scene grabbed me immediately. The zoom effect when your scroll down is sublime, and it leads to a very simple, carefully ordered portfolio that showcases everything you want to see in a reliable agency.

halbstark

 

Kota

I said there were plenty of glitch effects this month, and my favorite of them is Kota. Run your cursor over the screen and the large type, with the gradient, will distort and glitch in a liquid style. How’s that for packing in every single current design trend into one graphic?

kota

 

Mango Media

Some of the best sites this month combine several design trends, and Mango Media is one of them. Cursor over the blob and you’ll get bold gradients combined with the ever-popular glitch effect. And kudos for that hamburger menu icon that’s both original and perfectly clear.

mago-media

 

Deadwater

With a name like Deadwater, it’s no surprise that this French design agency has employed the liquid effect trend that’s been popular for the last few months. I love the way it’s been combined with a glitch effect to create the sense of being under water.

deadwater

 

Works

There’s a long-standing tradition in this series of selecting portfolios that make good use of the color yellow. Works certainly does that with an acid-toned site, that once you scroll uses a ticker-style band of the same color to indicate a selection. It ties everything together perfectly.

works

 

Electric Red

So, you think you’ve seen big type? Think again, you’ve not seen anything until you’ve seen Electric Red’s giant, 3D-rendered ring of spinning red text. The graphic grabs you as soon as you see it, but it’s also interactive, and it needs to be if you want to see enough to work out what it says.

electric-red

 

Studio Dot

Studio Dot obviously had to use a big dot on its site, behind which you’ll see a ton of glitchy graphics. What I really love are the links at the bottom of the homepage, which open without clicks when you hover over them for a while — usability aside I love that they tried to innovate in this area.

studio-dot

 

Vitali Zahharov

More animated gradients, this time curtesy of Vitali Zahharov. And yet more big bold typography, which is a trend that’s going to last throughout 2020 and beyond. Vitali’s a freelance designer based in Spain, and he’s worked for some really exceptional clients, scroll down to see selected work.

vitali-zahharov

 

Tubik Studio

Tubik Studio’s site devoted to its staff has tons of personality on display, from its juggling balls load bar, to the eccentric sound effects when you cursor over a thumbnail. Its main site is very goal-orientated, so showing off some personality contrasts well and makes it approachable.

tubik-studio

 

Superlab

If you read this series regularly you’ll know that I’m a sucker for animated abstract shapes. I guess I must have loved building blocks as a kid. Superlab’s are great because they tie everything together, without imposing themselves on the design. Nice bold, confident colors too.

superlab



This content was originally published on Source link, we are just re-sharing it.

All Growth Hacking Articles

3 Essential Design Trends, March 2020
558 Views
Add

3 Essential Design Trends, March 2020


Color, heroes, and a new way to create design depth are what we are looking at this month.

Two of these three trends comes with some usability concerns but are a lot of fun to look at and play with. Would you take the risk of trying one of these design techniques? The third trend (up first in this list) is a new take on bold color palettes that shifts from some of the colors that have been overwhelmingly popular for a while.

Here’s what’s trending in design this month.

 

Warm Colors, Especially Reds

Warm colors – especially red tones – are back in!

As a point of reference, warm colors are vivid and bold and can sometimes be overwhelming because they can occupy and fill space will a feeling of fullness. Warm colors include reds, oranges, and yellows. They are all on the same part of the color wheel, which can be divided into warm and cool colors (blues, greens, and purples).

The nice thing about these warm colors is that they are bold without the same levels of brightness that have been popular for a while. They aren’t as overpowering as brights on smaller and darker screens and really set a different tone for the design that’s a little more serious.

Each of the examples below uses a warm (red) color palette in a different way.

Skull & Roses uses a red and purple (warm and cool) palette to create contrast and fun gradients and color.

Amanda Braga uses a full red monotone color palette for the about page of her portfolio site. It’s bold, in-your-face, and demanding of attention. Even the photo has a red color cast on it.

Catalyst uses pops of red with gradients to draw you into the 3D geo shape in the hero image. It creates a sense of motion and excitement for the event.

 

Full-Screen Heroes

An oversized hero image is nothing new. But hero headers that occupy the entire home screen are.

The trend also seems to come with another new element — no obvious navigation or need to scroll (although it’s often there). The result is a trend with super clean designs, with the possibility for design or usability challenges.

This trend works for one reason: Thanks to mobile usage, people are getting more accustomed to (or trained) to scroll. Small screens make it a way of life and this trend is relying on that to work.

But, will users know what to do and get past the homepage?

Can you find the visual cues in these examples?

The Island has a fun full-screen video loop and has a right-hand scroll bar as a visual cue and a tucked in scroll icon on some screen sizes. A hamburger navigation menu can also help you find what you are looking for in this clean design.

Wayout looks cool, but doesn’t have a scroll feature on screen. The phrase “And there’s more” is all you get to encourage looking further into the design. (There’s no navigation menu either.)

Ubisoft uses a full screen video that you get a glimpse of within text elements. There are no obvious scroll cues (and there is a scroll), but the hamburger icon is a visual cue that there’s more to the site than just a homepage.

 

Neumorphism

This trend is one that is a mash up of popular web and app design techniques that’s starting to show up most commonly in app concepts.

Neumorphism (or new skeuomorphism) can be traced to an analysis by Michal Malewicz of Hype4 who did a nice deep dive into what this trend is (and isn’t) and how it works for designers. Neumorphism seems to be most popular when designing card-style interfaces.

The style can be identified by use of inner- and outer shadows to create an illusion of softer shapes that seem to lift off the background canvas.

Here’s how Malewicz describes it:

A Modern / Material (upgraded) card usually is a surface floating on top of our perceived background and casting a shadow onto it. The shadow both gives it depth and also in many cases defines the shape itself — as it’s quite often borderless.

While this trend has a cool, fresh look, it does come with some challenges. Primarily those issues deal with accessibility and contrast.

Either way, it’s a fun take on moving away from completely flat concepts to something with more depth, particularly for app-based interfaces. Time will tell if this trend really lifts off or not, since it is still in its infancy.

Want to play with neimorphism on your own? You can try this fun little CSS generator.

 

Conclusion

Of this month’s trends, the return of warm colors is especially nice. Red tones are inviting and interesting and a good shift from the super brights that have been so popular.

The other trends each present their own usability challenges, but have high visual interest. Could you see yourself using them in projects? (A portfolio, maybe?)

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with.





Source link

All Growth Hacking Articles

20 Freshest Web Designs, January 2020
673 Views
Add

20 Freshest Web Designs, January 2020


Each month we roundup the freshest website designs released in the previous four weeks, all with an eye-out for hot new ideas.

January 2020 is picking up where 2019 left off, with lots of animation and even more bold, bright color schemes. We’re also seeing an unusual number of luxury sites this month, and as always there’s a strong set of startups trying to break into the market. Enjoy!

 

Plink

To take on giants like PayPal, you need a compelling brand and a simple message, that can also wow with its first impression. Plink hits the nail on the head with its 3D animation.

004

 

Madame Turfu

Are you wondering what 2020 will hold for you? Why wait to find out when Madame Turfu can predict the future with this wonderfully fun set of digital tarot cards.

005

 

Nathan Taylor

What’s not to love about Nathan Taylor’s playful site? There’s so much to explore and do, but our favorite part is the different lighting modes.

001

 

Meatable

Selling Meatable is a tough prospect; it’s real meat, grown in a lab instead of taken by animal slaughter. The simple step-by-step site does a great job of explaining.

002

 

Sussex Royal

Whatever your view of Harry and Megan, there’s little doubt that their website oozes class. For a promotional site that isn’t actually selling anything, it’s a strong presence.

003

 

Emotive Feels

This fantastic manifesto from design agency Emotive Brand illustrates an A–Z of potential brand emotions with simple animations that would grace the cover of a Bluenote release.

006

 

UNREAL

Swiss design agency UNREAL’s site is a wonderfully chaotic love affair with web animation. It’s the type of site we can click around for hours, enjoying the sharp transitions.

007

 

Kate Jackling

Sometimes the best design takes a step back and allows its subject to bask in all the attention. Kate Jackling’s site does this, letting her gorgeous photography take center stage.

008

 

Helias

Helias has fully embraced the blob trend with a flood-filled area of color supporting each of its various products. It’s appropriate, engaging, and breaks up the formal grid well.

009

 

Klokki

Sometimes the hardest sites to design, are the ones for products about which there’s very little to say. Klokki is one such product, but its site is bold, confident, and persuasive.

010

 

Jonnie Hallman

Jonnie Hallman’s simple résumé site benefits greatly from the household names he’s worked for. We really like the details, like the way the monogram changes color as you scroll.

011

 

eaast

eaast is a design and development partnership from Paris that’s fully embraced the Memphis style. Their simple site proves you don’t need years’ worth of work to sell yourself.

012

 

Pantheone Audio

Proving that elegant scrolling is still very much a thing in 2020, Pantheone Audio uses the scroll to seamlessly navigate a luxurious site with a complex grid underpinning it.

013

 

Leaf

After decades of the best a man can get, the half of the species that shaves daily seems to be obsessed with reinventing the process. Leaf taps into that simple marketing approach.

014

 

Mociun

Most sites that sell jewelry miss the spirit of the pieces by focusing on the financial value. Mocuin gets it right with an on-trend color palette and stunning product photography.

015

 

Jon Way

Jon Way’s portfolio features work from over a decade of art direction. There’s a clear, consistent aesthetic thanks to a lovely ‘static’ effect that plays across the whole site.

016

 

Kota Yamaji

There’s some amazing work in Kato Yamaji’s portfolio, but what really strikes home is the amount of color he manages to squeeze in.

017

 

Robb Owen

We’ve seen lots of animated vector avatars over the last couple of years, but rarely do we see one with as much personality as Robb Owen’s. The cursor tracking makes it feel real.

018

 

Glasgow International Festival 2020

The Glasgow International Festival takes place between 24th April and 10th May 2020. Its site features some distinctly celtic typography, and tons of bold color.

019

 

Megababe

Megababe is taking on the beauty industry with a range of body products that are insanely popular, and as positive as its super-confident sales site.

020



Source link

All Growth Hacking Articles