Pastels in web design tend to fade into the background or draw neutral colors into the palette. They’re not used as often because they can feel too youthful or washed out.
But when bright pastels mix with stronger colors you’ll get a much richer experience in the design.
My goal with this post is to showcase how pastels can be used for all kinds of different websites. All colors can work well, but it’s the designer’s job to find colors that work well for the project at hand.
Vibrant Backgrounds
Pastels can be used for noticeable background sections that grab attention without feeling harsh on the eyes. But since pastels are typically washed out they can feel bright and give a sense of vibrancy to the layout.
This works particularly well in headers where most designers keep the navigation and call-to-action buttons.
Take for example the homepage of Rentberry. It’s a rental listing site and it uses bright pastel hues in the top header section.
In this header you’ll find a search form and a listing button. Both of these items are meant to draw attention and encourage the user to take some action.
By adding illustrated buildings into the pastel background it helps to clarify what this site is all about. The pastels are merely a color choice so they don’t directly affect the content.
However they do add a certain emotion into the layout that feels neutral yet vibrant.
Another cool example is the homepage of this car sharing info-site. It merges the interactivity of a website with the design style of an infographic.
The entire background uses bright pastel colors in the sky and many of the BG elements like hills, cars, and buildings.
Neutral tones rarely overtake the foreground which makes reading easier and simpler. But the brighter pastels lighten up the mood and give this site a unique look.
Bright Pastel Highlights
If you’re going for a subtler effect you might try adding pastels into highlights on the page. These page elements are meant to be noticed so they rely on pastels to draw attention.
When adding pastels you can either go high contrast with sparse colors or lower contrast with lots of pastels. One great example of a pastel-heavy site is Best Baby Shower.
This layout is pretty much bathed in a sea of pastel from head to toe. This makes sense because the site targets parents of newborns and young children, both of which are associated with typical color schemes for boys(light blue) and girls(light pink).
These two colors overtake the site and pretty much become the default color scheme. Yes they’re used for highlights but they’re also used for links, icons, buttons, and pretty much everything else.
Now contrast that with a much more neutral website like Rueda Film.
This design relies almost solely on grays of varying shades. But it does have one lighter pastel orange that spans a good portion of highlighted text, buttons, and links.
Because this orange color is used sparingly it really pops off the page. This works much better as a traditional highlight because it contrasts so well against the other neutral colors in the layout.
You can get this same effect with pastel iconsets that grab attention but don’t feel too harsh compared to other page elements.
If you like the pastel highlight effect then find a way to work those colors your design. It works best on softer websites but can be used alongside neutral colors for a stronger effect.
Colors For Contrast
Contrast is used in every part of a layout. This doesn’t only apply to pastels and contrast is always visible no matter what your site looks like.
But with brighter colors and pastels you can get away with stronger contrasts because they naturally fall into the background.
Postable has plenty of contrast between page sections even though many use pastels in the background. This contrast is easy to work with because most pastels have very light hues that take the place of a white background.
If you’re concerned about connecting pastels through contrast just find shades that are super close to white. This way you can use almost any color for text and be guaranteed a readable contrast ratio.
The Cake Dream responsive template is the perfect example of responsive contrast between page sections. Bakeries, candy stores, and other similar businesses can get away with bright pastels because these colors offer a lighthearted feeling in the design.
But you might not think so many different colors could work mixed into the same layout. This site uses purple, green, blue, and light red across many different sections on the same page. And they all look incredible because of the natural contrast.
Each page section uses the same white text and it’s readable across the entire site.
Pastels work wonders for creating natural contrast on lighter pages, but only when used in conjunction with clear foreground text. Use these examples as guides to help you find the best shades for high contrast on your own web projects.
Merging Neutral Tones
Since pastels can work both as background colors and foreground colors you have plenty of room to experiment. This lets you merge neutral tones into any design and even create entire websites based off these washed out colors.
Wonderfully Wild has a brilliant design for their inner pages representing each lodge. They have pastels that feel bright yet also blend perfectly into the background.
You’ll notice how each area of the page has a slightly different color. This is a normal design style with pastels because none of them are too bright or vying for attention, meaning you can blend them all together without effort.
As you browse through that page you’ll notice it feels surprisingly neutral in all areas. Some colors may stand out a bit over others, but generally speaking they all have a soft appearance.
You’ll find something similar in this pastel Tumblr theme which also relies on neutral colors.
When you have a lot of pastels in the same layout it becomes tougher to add super bright colors into the mix. They tend to dominate and feel too strong compared to all the neutral shades.
But if you can strike a balance between neutral colors, pastels, and brighter highlights then you’ll have one incredible color scheme to work with.
Moving Forward
If you ever need a brighter color scheme that can blend naturally into a layout then look into pastels. They feel surprisingly neutral and eye-catching at the same time, making them perfect for highlights or backgrounds(or both!)
Be willing to experiment and try different many colors to see which ones fit best into your projects.
Featured image: ESchweitzer
More trends in web design:
- Diagonal & Slanted Lines Inspiration for Web Design
- Watercolor illustrations: succulents, stars, feathers, flowers, and more
- Top trends in typography for 2017
The post Fresh color palettes: Bright pastels in web design appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2nZDIiz
envato.com coupon
Tidak ada komentar:
Posting Komentar