Articles

Poll: Should Designers Stay Out of Politics?

,

The Beazley Design of the Year for 2020 has just been awarded to US architecture firm Rael San Fratello & Colectivo Chopeke for their Teeter-Totter Wall project, a series of luminous pink seesaws built into the US-Mexico border wall in July 2019.

The 74 shortlisted entrants for the prize range from a poster for vegan burgers to a parody of Pantone’s Color of the Year. Most were self-consciously political.

As design has grown in stature, so has its ability to amplify the opinions that employ it. Most of us will never work on an actual political campaign. Still, there is little doubt that the design teams for both the Obama campaign in 2008 and the Ocasio-Cortez campaign in 2018 were significant factors in the resulting electoral success. And it isn’t just visual design, user experience across a platform has implications; last week, Twitter finally suspended the account of the outgoing US president, a decision that left CEO Jack Dorsey lamenting the platform’s “failure…to promote healthy conversation.”

As designers, our understanding of user experience — particularly the psychology of user experience — has grown immensely in the last decade. We’re very good and persuading people to do things, and that ability is a commodity, saleable to the highest bidder. As such, it is capable of undermining basic democratic principles by skewing debate and exerting disproportionate influence.

We frequently talk about Black Hat and White Hat techniques in the tech industry, but the truth is, almost all designers spend their days looking for ways to manipulate an audience.

When that manipulation extends into political events, do designers have an ethical responsibility to maintain an independent balance, just as we expect reputable journalists to?

Designers are — for now, at least — human beings. We have all of the prejudices, biases, and philosophies of any other human being. Do we have an obligation to use our skills to promote our ideals, or an obligation to resist doing so?

 

Source

The post Poll: Should Designers Stay Out of Politics? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

50 Best Websites of 2020

2020 has been one of the most memorable years in our history. Few of us have been alive long enough to experience a more turbulent time. But throughout the year, we saw design respond to challenging events with positivity, color, and a desire to elevate those people and projects working to make the world better.

As we head into 2021, there’s no denying that 2020 has changed our outlook on life and marked a major turning point in web design trends.

Here’s a collection of the websites we loved the most this year. Enjoy!

Looks Like You Need Iceland

On Looks Like You Need Iceland, you are invited to record a scream, which will then be broadcast into the Icelandic wilderness. It’s meant as a form of therapy. The idea is that you will one day visit Iceland in person. That might still be some way off for most of us, but we could certainly use a good therapeutic scream.

Black Lives Matter

Across 2020 there were major protests around the world in support of Black Lives Matter. The movement’s website is a central hub for news, resources, and civil rights information in 38 countries.

2º Earth

2ºC Earth takes the user to 5 locations worldwide and shows what will happen there if global temperatures rise by 2ºc. Sound is used really well here to create an immersive experience, along with some beautiful photography.

Github

Along with some new features announced earlier this month, GitHub has a glossy new homepage. It has a clean feel, with some nice scrolling animation and sparing but effective use of illustration.

I Weigh Community

Political and social initiatives were big in 2020, and non-profit activism initiative I Weigh Community is the brainchild of actress Jameela Jamil. It’s devoted to radical inclusivity, communicated with bold, expressive graphics.

UNREAL

Back in January, we clicked around UNREAL’s site for hours, enjoying the sharp transitions. The Swiss agency produced a wonderfully chaotic love letter to web animation.

Delassus

Delassus grows fruit, from citrus to avocados. The Moroccan company employs a cornucopia of 3D design to make its site bold, fun, and practical.

Lynn Fisher

We loved everything about Lynn Fisher’s site back in May. The homepage illustration was awesome. It was a humorous approach to RWD that we really appreciated. The site has since changed, with tons more to explore.

Minervo

The Minervo site feels distinctly Latin, with the hot pinks and sun-blasted desaturation feeling suitably South American. We love the cropping on the custom typeface.

Babord

Norwegians have an almost mystical connection with the sea, which is evident in the site for Babord, a Norwegian seafood supplier. We loved the brand font too.

Calexo

Calexo makes THC-infused beverages, and back in April, we loved the color and positivity of the site. The animated hamburger menu was a hit too.

Moooi

Moooi’s site layers illustration with a maximal effect that makes you feel like you’re chasing a white rabbit. There are tons of great UI details here, especially the bar that reveals the product videos.

Blind Barber Anniversary

The Blind Barber celebrates 10 years of success with this microsite. A deconstructed grid and an entirely black and white design, but with color photos, create energy and a sense of joy.

Zand Harirchi Architects

Zand Harirchi is an architecture firm based in Tehran, Iran. Its site features subtle references to architecture, like the delightful thumbnails reminiscent of small windows.

WFN

The WFN (Women’s Funding Network) is an international alliance supporting women’s foundations and gender justice funders. The sophisticated color palette and clean type are both confident and feminine.

Nathan Taylor

We loved exploring Nathan Taylor’s playful site all the way back in January. The different lighting modes were a firm favorite.

Käthe Kollwitz Memorial

A tribute to the life and work of Käthe Kollwitz, an Expressionist printmaker. There’s a catalog of her work, presented alongside large type and splashy color transitions.

Emotive Feels

Emotive Feels is a design manifesto from the Emotive Brand agency that illustrates an A–Z of potential brand emotions with simple animations that we likened to a Blue Note release.

A. N Other

A.N Other’s site for perfume highlights quality ingredients, materials, simplicity, craftsmanship, and the environment; in the process, it cleverly invokes a sense of luxury.

Playtype

Danish type foundry Playtype’s site fits its name perfectly. The playful site with bright blocks of color and the occasional animation shows off some pretty nice typefaces.

Feijoo Montenegro

All-text sites are always a thrill, and back in June, we were treated to this simple one-pager by Feijoo. Details like the numerals being replaced by words are delightful.

Wavering Stripes

Although this site’s subject matter is harrowing, it is presented in a very beautiful, thoughtful manner.

The Oyster & Fish House

Sophisticated typography, the wave textures, the nostalgic feel of the photography, and even the cookie notice’s on-brand styling all show attention to detail, which gives this site its appeal.

Who Cares

Find and ‘photograph’ the endangered species to learn about them in this delightfully illustrated game.

Curbed

When Curbed came under the umbrella of New York magazine earlier this year, it got a makeover. Neon highlights and a distorted grid give an edge to the classic magazine layout.

Yolélé

The carousel of fonio (it’s a West African grain) products on Yolélé’s landing page is a good example of horizontal scrolling that works well. There are some great page transitions too.

Pantheone Audio

Pantheone Audio’s site employs elegant scrolling to enable seamless navigation of an extremely luxurious site, underpinned by a complex grid.

Aelfie

Bright color, an irregular grid, illustrations, and a display type that feels almost hand-drawn perfectly captures the aesthetic of this NY-based home furnishing brand.

Highcourt

This site for private membership leisure club Highcourt uses subtle background color changes and simple line illustrations to create a sense of calm. Black and white are softened to dark blue and ivory, and gentle animation adds interest.

Kate Jackling

Kate Jackling’s site takes a step back and allows the content to bask in the glow of attention, placing her photography at center stage.

Treaty

While there is less hustle and bustle outside than we were used to pre-pandemic, we could certainly all use some calm. Treaty’s site for CBD oils reflects that calm with a combination of video, whitespace, and botanical drawings.

Ukrainian Railroad Ladies

Ukrainian Railroad Ladies is a book of photographs of women, and some men, who work on the Ukrainian railways. The site is basic, even brutalist, but it has charm, and the photographer’s fascination with his subject comes through.

Year & Day

Year & Day is an ecommerce site that sells tableware, from glassware to ceramics. The colorful collection is designed to complement different types of food, and the site’s color scheme reflects that perfectly.

Juan Mora

Juan Mora’s ‘under construction’ holding page has probably been crafted with more care than many full-blown sites. This showcase cleverly manages to demonstrate its subject’s skills without showing a single piece of work.

Lucciano’s

Lucciano’s homepage hero video alone will have your mouth watering for some of their gelato. Much of the appeal of food is visual, and the photography here does not disappoint. Circular text boxes in ice cream colors complement the product shots nicely.

Bored Solutions

Back in April, we were already a little weary of lockdown — if only we’d known how long it would last! The amazing color blobbing of bored.solutions was the ideal distraction.

Grand Matter

Grand Matter is an artist agency representing illustrators. There is a wealth of talent on show here and a broad enough range of styles to keep the web interesting for a good while.

Dunderville

This site for Dunderville motion design studio features a paper fold detail, which adds tactility to the virtual. Some superb type and vector animations showcase an impressive portfolio.

Album Colors of the Year

Album Colors has taken the covers from 150 albums released this year and arranged them by dominant color. The hex code for each color is provided if you want to copy it.

Mammut Expedition Baikal

Mammut uses stunning photography and a strong narrative to present its Eiger Extreme outdoor clothing. Longing for the great outdoors will either be alleviated or exacerbated by this one.

808303

808303.studio is a virtual Roland TR-808 drum machine and TB 303 bass synthesizer. You can program, record, and share your very own 80s techno masterpiece.

Bliss

Humor can be hard to get right, especially when you want to be taken seriously at the same time. Here, it works, and the result is a memorable site, oozing with confidence.

Jazz Keys

Type your message into Jazz Keys, and you’ll hear it in sound. You can send the message to anyone and let them hear your words — the web lives for side-projects like this.

Érika Moreira

The fabulous, simple site for Sao Paulo-based Érika Moreira has some awesome big type and creative case studies. It’s an excellent example of a non-visual portfolio.

G.F Smith

Earlier this year, the site for leading paper supplier G.F Smith got a redesign. It is a simpler design than the previous site and keeps the visual focus on the products and the colors.

Abbotsford Convent

Abbotsford Convent is a creative arts venue in Melbourne, Australia, based in a former convent. The UI for its site blends architectural forms to acknowledge the building’s heritage.

Waka Waka

Waka Waka designs and builds wooden furniture. The mid-century typography and the noise textures transport the site to the last century’s radical graphic design. There’s some clever disruption to the typical thumbnail approach.

Cone

Sites advertising apps always seem to want to box the design into a hastily de-branded mock-up. Cone takes a daringly refreshing approach by depicting a more expansive mobile experience.

Ride Out

Amsterdam’s Ride Out bike store teases the content with an intriguingly masked video. Plus, we love the wheel-inspired spinning links.

Puddle Sound

This site is a model of minimalism. Beautiful photographs and very little text, there is nothing to distract from the product on display.

Source


Source de l’article sur Webdesignerdepot

/par

Popular Design News of the Week: December 14, 2020 – December 20, 2020

, ,

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

The Best Design Tool of 2020 is not What You Expect

 

14 Top Design Trends to Watch Out for in 2021

 

UI Trends for 2077

 

Firefox was Always Enough

 

Wavelry – Create & Customise Wavey Svg and Png Backgrounds

 

Design Documentation

 

The Best 25 Black and White Web Design Inspiration

 

2020 Design Tools Survey

 

Web Design in 2021 – What to Expect

 

How to Accelerate your Online Presence Using SEO

 

Email Signature Design Guide, Best Practices, and Examples

 

Lavender – Write More Confident, Effective, and Thoughtful Emails

 

Buy Don’t Build

 

Glorify 2.0: Create High-Quality Product Images at Low Cost

 

5 WooCommerce Design Mistakes to Avoid

 

15 Best Free Christmas Fonts to Design Gift Cards

 

How to Create a Full Width Page in WordPress (Beginner’s Guide)

 

For the Fans: How to Make and Sell your own Merch

 

How to Build a Strong Design Team Structure

 

A Designer’s Guide to Receiving Criticism and Managing Feedback

 

It’s Always Year Zero

 

How to Design Better Pinterest Graphics and Attract Clicks

 

Dropover – Easier Drag & Drop on your Mac

 

7 Fantastic Youtube Videos on Web Typography

 

Colour Contrast Checker – Check the Contrast Between Different Colour Against WCAG

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source


Source de l’article sur Webdesignerdepot

/par

3 Essential Design Trends, December 2020

,

The end of the year tends to be busy for a variety of reasons and it can limit some of the freshness we see in designs during much of the year. Regardless, there are a few trending design elements.

What we are seeing right now is rooted in deep simplicity with a focus on the message.

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

Activism and Engagement

Websites with a focus on societal issues have moved to the forefront. While the look and design techniques used for these websites can vary greatly, there’s a common theme of activism, community engagement, and support.

What’s great about this movement – and what it reflects – is that people can take to the digital space to help amplify their message or find support with people who are going through the same things they are.

While some of these efforts are backed by people and brands you may know, that’s not always the case.

The designs also work best when they reflect the personality of the spokesperson or mood of the issue at hand. Note the vast differences in the three examples.

The I Weigh Community uses bright color with a black and white image of promoter and celebrity Jameela Jamil to bring attention to mental health issues.

Wear the Waste by retailer H&M uses simple typography in a natural environment to set the stage for more eco-friendly clothing options.

Wavering Stripes uses an illustrative approach to bring attention to the stories of immigrants in detention.

Each design is vastly different but all are striking and draw attention to the causes therein. The common thread is that each design is simple enough to draw you in and help you better understand the message and not get lost in tricks or design effects.

 

 

 

In Your Face Products

’Tis the season for product promotion.

Designers are opting for larger-than-life product images that allow shoppers to see every detail before making a purchase. (Seems like a good plan in a socially-distanced pandemic world.)

It can work in a number of ways:

  • With an oversized image and ability to use on-screen controls to take a closer look;
  • With video and animation effects to see the product in action;
  • With super high-resolution and zoomed in photography.

Pair these visuals with strong descriptive language and you’ve got a winning combination.

The variance in the examples is a good showcase of how to do this well, while not over-doing effects.

The Fitbit Charge 4 website uses an opening image of the device that’s way larger in scale than reality (especially if you are on a large desktop screen). Users control using click and scroll to get more views and details of the device. Zoom and animation aren’t overwhelming, providing a solid look at the product.

The Nest Thermostat opens with a video animation of the device moving into the forefront of the screen. (It’s rather quick.) From there, if you want more detail, there’s a video to watch that provides deeper product information in a digestible manner.

The final example isn’t really a product at all, but rather an art installation. What’s interesting is that it uses these same oversized options to show the art in detail. This is a great way to handle seeing something that you may not be able to experience in person. What makes it work so well is that the angles of the photography mimic how you would view it, looking up toward the piece hanging from the ceiling.

 

 

Simple Motion for Impact

Carrying on the theme of big, bold, and oversized designs, this trend focuses on simple animation for maximum impact.

While all-out cinematic animation can be fun to watch, it can be a little overwhelming at times. This more subtle approach is easier to digest and helps put the focus on the content at hand rather than the effect on the display.

There are plenty of ways to use simple animated effects, including scrolling animations, hover actions, and constantly moving elements. (You can see each of these if you click through the examples.)

The Patrick Mahomes store, 2PM, uses a single line of moving text that tells you what the website is about. It differentiates the retail store website from information about the athlete or his other efforts. White text on a black background is classic and easy to read. The most important thing of note may be the speed of the animation; it’s timed in a way that’s scannable but not dizzying. Sometimes the hardest part of nailing an animation is getting the speed right.

The resume-style website for Naomi Niko is striking and simple, but neat hover effects and a simple scroll animation for her resume only – and not the photo or details on the left side of the screen – make the design intriguing. The almost awkward crop and directional pull of her image also creates interest and makes you want to get further into the design.

Guilbo uses layered hover animation to make it look like he’s blowing a glittery-dust off the screen and at the user. The rugged detail of his face with the sparkle of the animation is a fun contrast. The design uses layering with dots in the foreground and background for an additional depth effect. It’s also especially nice that the objects are made to stay off his face for a realistic effect.

 

 

Conclusion

While 2020 has been an interesting year, designers have continued to find new ways to evolve the craft and create visual experiences that are inspiring. These trends are no exception.

It shows that even in unusual circumstances or with odd constraints, that amazing work and creativity can thrive. Stay creative everyone, and keep those new designs – and potential trends – coming!

Source


Source de l’article sur Webdesignerdepot

/par

3 Easy Ways to Use Emotion in Web Design

,

As human beings, we like to think that we’re rational creatures.

We tell ourselves that we make our decisions based on fact and logic. However, that’s rarely the full truth. As much as we try to make choices guided by rationality, the truth is that we’re often highly emotional people, driven by the way that things make us feel.

So, what does that mean for a website designer?

Though designing a functional and logical website is important, it’s crucial not to forget about the emotional impact of each interaction that your customer has with the sites that you build.

Sites that don’t elicit any kind of emotional response aren’t just boring; they’re forgettable.

A forgettable website is poison to any website designer’s portfolio.

That’s why we’re going to introduce you to some easy ways to use emotion in your designs this year.

Getting to the Bottom of Emotion in Web Design

First, you need to understand the part that emotion plays in user decisions.

Don Norman’s book Emotional Design says that there are many things that designers can do to make their designs more emotional. Even something as simple as focusing on the aesthetic impact of your website can make it more likely that you’ll reach your audience on an emotional level.

One important thing to remember about emotional design, is that it’s not just about making your customers feel good. Emotion can be both positive and negative. Sometimes negative emotion is more impactful than positive feelings – it all depends on the kind of site you’re trying to create.

A website selling health products to customers needs to make that audience feel comfortable and confident that they’re buying a trustworthy item. However, it may also need to trigger small feelings of worry or concern in the audience about what might happen if they don’t buy.

Knowing how to walk that balance between positive and negative feelings is how a designer takes a simple website design and turns it into something incredible.

So, where do you get started?

Step 1: Use Visual Elements to Trigger Emotion

Visual elements are one of the easiest points to get started with when you’re designing for emotion. That’s because visuals are fantastic at drawing out feelings.

An animation can create an emotional connection with your audience by helping them to understand how your product works or making them laugh when they land on your page. A genuine photograph of your team working together can inspire trust and feelings of affinity.

One of the most common visual elements used to trigger emotion is color.

Shades like blue and green in the digital design world are more likely to drive feelings of calmness and comfort. On the other hand, red and yellow often encourage feelings of enthusiasm and happiness.

The way that you use color can make a massive difference to how users feel when they arrive on a website. For instance, the Barclay’s website would have been pretty boring if it was just a basic black and white screen. However, a banking site can’t afford to go over the top with animations or illustrations in most cases, as this can detract from its professional image.

Adding small patches of blue in a way that complements the brand’s color palette is a great way to generate feelings of trust. Combined with the image of a genuine real-life person, and calm tones, the bank instantly presents itself as something approachable and honest.

At the same time, the clear hierarchical layout of the bank’s website, with an easy-to-follow navigation bar, easy-to-read font, and clear headings and buttons comfort the customer. Users get exactly what they expect when they come to a financial website, and that makes users feel as though they’re in the right place.

Step 2: Create Engaging and Emotional Interactions

Visual elements are a great way to embed emotion into digital design. However, they’re just the first step. The emotional aspects of your web design choices should also appear throughout the interactions that customers have with the website.

A good interaction on a website or app needs to be simple and straightforward enough that users feel comfortable taking the next step in their journey. However, it also needs to drive the right emotional response from users too.

For instance, when you sign up for a free account trial from Box.com, you don’t just get a form full of information that you need to fill out.

Next to the form, you also get information about what you’re signing up for, complete with small checks next to each of the free features you’re getting. This helps to put the customer’s mind at ease and remind them that they’re in the right place.

The use of a box, including discount information next to the sign-up form also helps to make the interaction more emotional, by reminding customers that they’re getting something for free.

Every time a customer interacts with a website, there’s another opportunity to engage them on an emotional level. On the Firebox website, when a customer adds something to their cart, there’s a small animation on the cart icon that informs them that something is waiting for them.

When they click through to the checkout, they get instant information, including what they can do to “gift wrap” their item, and buttons showing the various payment options available.

Whenever you’re designing a page for a website, whether it’s the checkout page, a product page, or something else entirely, think about the interaction that the visitor is having at that moment. How can you ensure that each customer feels more comfortable, delighted, informed, or engaged?

Step 3: Leverage Microcopy and Detail to Express Emotions

Visuals are an excellent way to express emotions.

However, they’re not the only option.

As a designer, you’ll need to think about how you can combine web design with the use of microcopy to connect with customers on a deeper level.

Rather than drawing attention to tedious, dull, or impersonal instructions, notifications, and error messages on a site, how you can you make sure that everything on the website delivers the same emotional impact?

The simple addition of a tiny illustration is enough to provide a much more emotional experience to customers. Compelling micro copy and illustrations on 404 pages can also strengthen the connections that customers have with the sites they visit.

Just look at how Google added a dinosaur game to the page that customers are sent to when they don’t have an internet connection.

The right micro copy and interactions can instantly transform even a negative experience, like not being able to connect to the internet, into something emotionally engaging and positive.

When it comes to making an emotional connection between your customer and their end users, web designers need to remember that often the smallest details can make the biggest differences. Little extra features, like implementing a way for customers to have fun when their internet connections aren’t working, are the things that make websites more memorable from an emotional perspective.

Don’t Choose Emotion Over Functionality

Although emotional impact can be an essential aspect of a fantastic website design, it’s important not to get carried away. Adding too much to a website in the form of little extra graphics and unique interactions could end up weighing down a site and making it slow to load.

Although it’s valuable to think about how every interaction an end-user has with a website will make them feel, it’s important not to overlook the basics of web design when you’re at it. You’ll still need to ensure that the finishing design is easy to use, engaging, and attractive.

Pay attention to the basics of user experience design, and make sure that the extra emotional elements you’re infusing into your sites aren’t going to damage the experience that end-users get.

If you can get the blend right between emotional impact and functionality, then you could create the kind of website that audiences will never forget.

It pays to implement emotion into your design portfolio.

Source


Source de l’article sur Webdesignerdepot

/par

4 Creative Ways to Design a Festive Website

,

The holidays are fast approaching. But that doesn’t mean it’s too late to get a new website online or to make your existing one look festive for the holiday season.

When it comes to decking the halls of your website with a little festive cheer, how do you do this without spending loads of money and time on it?

You’re in luck. BeTheme has a variety of pre-built websites to help you do just that. Not only that, but you can use these festive websites for a variety of occasions, like:

  • Hanukkah
  • Kwanzaa
  • Christmas
  • Boxing Day
  • New Year’s

You could also just use one of these sites to make your website feel more seasonal as the temperatures get colder and the snow starts to fall. (If that’s what your winter wonderland looks like!)

Let’s have a look at 4 ways you can bring a little seasonal or holiday cheer to your visitors with a festive website from BeTheme:

Tip #1: Use a Page Builder That Makes it Easy to Swap in Festive Content

Unless you’re running a business like the Christmas Tree Shops, it doesn’t make a lot of sense to have holiday imagery up all year long.

The only problem, though, is that it can be a real pain having to go in, find a new theme, and then redesign your site around it… For only a month or two.

That issue is easily resolved with BeTheme, which comes with over 600 pre-built websites and two page builders — Muffin and Elementor.

Because there are so many pre-built sites available, you can easily switch to a non-festive website once the holiday season is over.

In order to swap out this design with a festive website, you’d first have to reset your theme (which Be provides instructions on how to do). Then, install the new site you want to use.

Like BeXmas:

And if you only want, say, a new hero image in the top of your website, you can cherry-pick which parts of the pre-built site you install.

Tip #2: Effortlessly Switch From One Holiday to the Next

Let’s be honest, the winter holiday season can feel a little nuts — not just because your business has to keep up with the change of pace, but because your website has to keep in step with what’s going on.

So, let’s say you have an ecommerce site that changes frequently for upcoming sales, holidays, events, and so on. For this, you could use the BeMall pre-built site (all year long, mind you):

As you can see, it currently has a Black Friday message on the homepage. It’s not uncommon to have to transition from Black Friday or Cyber Monday into the December holidays.

Here’s how you might do that:

The update can be as minor or major as you want. So long as you use graphics and content that stay on-brand, you can easily swap out as much of your imagery as you like.

Tip #3: Use Small Animations to Bring the Holidays to Life

Holidays should be a time to lift spirits. Having a website that’s able to satisfy your customers’ needs during the holiday season will certainly help.

You might also want to think about adding small animations to your design, too.

The animations themselves don’t have to be festive, but you can use them to call attention to holiday-themed content. Take, for instance, BeParty:

You don’t need to have champagne bottles popping or streamers flying across the screen to get your point across.

This animation gives the New Year’s party balloons a gentle and natural feeling of bobbing up and down. An attention to a detail this small is sure to bring a smile to your visitors’ faces.

Tip #4: A Little Hint of Seasonal Flavor Can Go a Long Way

Holiday celebrations aren’t always big blowouts. Unless your entire business is going all-in on the holidays (or it’s a totally holiday-themed business), there’s no reason your site should have to go all out either.

Sometimes a more understated approach is best.

In that case, you’d keep your normal branded elements, imagery, and content in place on the website. But to make it feel a little more festive, you could infuse your site (at the very least, the homepage) with slight seasonal or festive touches.

For instance, let’s say you’ve built a website for a popular ski resort. Your website might look like the BeSnowpark site does normally:

The main draw of the resort is skiing, so it wouldn’t make much sense to change the graphics. However, you could do something like this:

It’s a small enough change, but the gift emoji and bigger lettering in the green button might inspire loyal snowbirds as well as first-time visitors to more quickly book their much-needed holiday getaway.

Get Your Festive Website for Christmas, New Year’s, and More

There are many science-backed reasons why a festive website is a good idea.

Holiday decorations, in general, stir up positive feelings of nostalgia for many people. They can also help alleviate some of the stress that’s built up over the course of the year:

What’s more, holiday decorations can visually signal to others that you’re friendly and accessible, even if they don’t know you.

Sounds exactly like how you want visitors and prospects to feel, right?

As you can see, there are many ways to decorate your website for the holidays. To do it quickly and affordably — and not completely turn your regular website upside-down — a BeTheme pre-built site is the way to go.

 

[– This is a sponsored post on behalf of BeTheme –]

Source


Source de l’article sur Webdesignerdepot

/par

8 Awesome Black Friday 2020 Deals for Designers (Up to 94% Off!)

,

If you’re interested in a sneak peek of this year’s best Black Friday deals, stick around. You’ll find a few web designers’ favorites, including a stellar deal or two.

This year, more than a few of the popular retail outlets are shifting away from the traditional “camp out all night and bust open the doors when the store opens” shopping model. You might just prefer this less chaotic, ecommerce approach.

All of us are trying to adjust to what may eventually become a “new normal”. We may not like some aspects of this new normal, but there are bright spots as well.

More shoppers are likely going to shop online because of the coronavirus. That means you don’t have to fight the crowds while desperately attempting to socially distance. The shelves aren’t as apt to go bare, and shopping is easy, convenient, and safe.

1. Slider Revolution

You will find the Slider Revolution plugin incorporated in a host of WordPress theme tools and products. This premium plugin can in fact boast of more than 7 million users around the globe.

What you may not be aware of is that it is much more than just a WordPress slider. With it in your web design toolbox, you can in fact create just about anything you can imagine.

Expect to find:

  • A stunning selection of elements including sliders and carousels;
  • Attention-getting hero sections designed to make your home pages really stand out;
  • Single-page websites with layouts unlike anything you’ve seen before;
  • Modular structuring that allows you to rearrange and reuse sections however you choose and the ability to mix and match modules with any WordPress content;
  • Add-ons whose cutting edge features push the boundaries of web design possibilities.

There’s more of course. To celebrate Black Friday and Cyber Monday you can NOW get any Slider Revolution subscription plan or one-time payment at a 33% discount.

Just click on the banner and use the BLACKFRIDAY code at checkout.

2. Amelia

When done manually, booking and managing appointments can be tedious and subject to mistakes and errors. Amelia provides an automated booking process that is oh-so easy to work with and is error free; just what you need to help you acquire more happy customers.

Key features of Amelia’s fully responsive design include:

  • A dashboard system that enables you to track approved and pending appointments, booking changes, and revenue;
  • Zoom Integration, Google Calendar, and Outlook Calendar sync;
  • The ability to accept and easily manage recurring appointments that customers can schedule;
  • Front-end customer and employee appointment and event managing and backend appointment adding, editing, and rescheduling;
  • Email notifications for pending and approved appointments and events.

And much more that will save you loads of energy and a ton of time. Give Amelia a try, and if you like what you see (and you will), take advantage of the 30% Black Friday discount.

3. wpDataTables

wpDataTables 3.0, with its fresh, new look, gives you a host of different ways to generate attractive, customizable, and responsive tables and charts, and a host of different ways to present them.

  • Tables can be created from most data sources, the most common being MySQL query, PHP array, Google Spreadsheet, Excel files CSV files, and JSON and XML inputs;
  • A working knowledge of SQL is not required!
  • Addons include Gravity Forms, Formidable Forms, Report Builder, and Powerful Filter;
  • wpDataTables users can generate Tables and Charts quickly from massive amounts of data (saving hours of effort);
  • Tables and charts are customizable and maintainable (editable once placed in use);
  • Tables can be created manually if you wish.

Click on the banner now and take advantage of wpDataTables 30% Black Friday discount on all licenses and addons.

4. TheGem – Creative Multi-Purpose High-Performance WordPress Theme

In TheGem, the ultimate WordPress multipurpose toolbox, you will find:

  • A rich selection of 400+ premium pre-built multi-page and one-page websites, all available for Elementor and WPBakery page builders;
  • The ability to mix and match any of this demos, layouts and page sections to create your own unique look;
  • Extended WooCommerce layouts & tools for making online shops, which convert better;
  • TheGem Blocks: an ultimate tool for building webpages at the speed of light.

And much more. Just click on the banner and check this 5-star product out.

5. Mobirise Website Builder

Creating a Google-friendly can take time, unless you have Mobirise at your fingertips, in which case you have a number of helpful tools to speed things up.

  • No coding, it’s all drag and drop;
  • 3,600+ website templates are at your disposal plus sliders, popups, forms, and more;
  • Many eCommerce features, including a shopping cart;
  • Latest Google Amp and Bootstrap4;
  • You can download Mobirise for free.

And, because it’s Black Friday, everything is yours at a 94% discount!

6. Get Illustrations

Get Illustrations offers royalty free and landing page Illustrations ready to drag and drop into your web design. You’ll have access to:

  • An extensive library of 4000+ illustrations with more added every week;
  • A wealth of design formats, including AI, PNG, SVG, Figma, Adobe XD, and Sketch;
  • Free updates and new illustrations weekly (included in the bundle).

Click on the banner and use the Coupon Code BLACKDEAL for your 30% discount.

7. XStore | Responsive Multi-Purpose WooCommerce WordPress Theme

For anyone planning on creating an eCommerce store, the XStore name says it all. Key features you’ll find in this powerful and flexible WooCommerce theme include:

  • More than 95 good-to-go-shops plus a full AJAX shop to get you started;
  • 300+ pre-defined shop/page sections, a header builder, and a single product page builder;
  • Elementor, WPBakery and $510+ worth of premium plugins.

Click on the banner and sign up to become one of XStore’s 55,000+ happy customers.

8. Kalium – Creative Theme For Multiple Uses

Kalium is an easy-to-use, easily maintainable multipurpose theme for WordPress users that is always updated to use the latest WordPress standards.

  • Kalium provides its users with a host of professionally-designed pre-built demos and elements;
  • Many plugins such as: Slider Revolution, WPBakery, Elementor, Layer Slider, Advanced Custom Fields PRO, Product Filter for WooCommerce, Product Size Guide,WooCommerce and other premium plugins are included.

Kalium is responsive, GDPR compliant, and gives you full eCommerce and top-quality customer support. It has a 5-star rating after 36k sales on ThemeForest – seriously impressive!

***** 

If you hit the retail stores remember to social distance.

Or, if you would rather take a brief break from the demands of Covid-19, take advantage of one or more of the above ecommerce sales. As you can see, there are some excellent ones!

 

[– This is a sponsored post –]

Source


Source de l’article sur Webdesignerdepot

/par

Exciting New Tools for Designers, November 2020

,

In the spirit of fall feasts, this month’s collection of tools and resources is a smorgasbord of sorts. You’ll find everything from web tools to icon libraries to animation tools to great free fonts. Let’s dig in.

Here’s what new for designers this month.

The Good Line-Height

The Good Line-Height is the tool you won’t be able to live without after using it a few times. The tool calculates the ideal line-height for every text size in a typographic scale so that everything always fits the baseline grid. Set the font size, multiplier, and grid row height to get started.

Link-to-QR

Link-to-QR makes creating quick codes a breeze. Paste in your link and the tool creates an immediate QR code that you can download or share. Pick a color and transparency, plus size, and you are done.

Quarkly

Quarkly allows you to create websites and web apps both using a mouse and typing code – you get all the pros of responsive editing, but can also open the code editor at any time and manually edit anything and it all synchronizes. The tool is built for design control and is in beta.

UnSpam.email

Unspam.email is an online spam tester tool for emails. Improve deliverability with the free email tester. The service analyzes the main aspects of an email and returns a spam score and predicts results with a heat map of your email newsletter.

Filmstrip

Filmstrip allows you to create or import keyframe animations, make adjustments, and export them for web playback. It’s a quick and easy tool for modern web animation.

CSS Background Patterns

CSS Background Patterns is packed with groovy designs that you can adjust and turn into just the right background for your web project. Set the colors, opacity, and spacing; then pick a pattern; preview it right on the screen; and then snag the CSS. You can also submit your own patterns.

Neonpad

Neonpad is a simple – but fun – plain text editor in neon colors. Switch hues for a different writing experience. Use it small or expand to full browser size.

Link Hover Animation

Link Hover Animation is a nifty twist on a hover state. The animation draws a circle around the link!

Tint and Shade Generator

Tint and Shade Generator helps you make the most of any hex color. Start with a base color palette and use it to generate complementary colors for gradients, borders, backgrounds, or shadows.

Pure CSS Product Card

Pure CSS Product Card by Adam Kuhn is a lovely example of an e-commerce design that you can learn from. The card is appealing and functional.

Free Favicon Maker

Free Favicon Maker allows you to create a simple SVG or PNG favicon in a few clicks. You can set a style that includes a letter or emoji, font and size, color, and edge type and you are ready to snag the HTML or download the SVG or PNG file.

Ultimate Free iOS Icon Pack

The Ultimate Free iOS Icon Pack is a collection of 100 minimal icons in an Apple style. With black and white version of each icon and original PSD files, you can create sleek icons for your iPhone screen in minutes. And it’s completely free! No email address or registration required.

Phosphor Icon Family

Phosphor is a flexible icon family for all the things you need icons for including diagrams and presentations. There are plenty of arrows, chats, circles, clocks, office elements, lists, business logos, and more. Everything is in a line style, filled, or with duotone color. Everything is free but donations are accepted.

3,000 Hands

3,000 Hands is a kit of hands that includes plenty of gestures and style in six skin tones and with 10 angles of every gesture. They have a 3D-ish shape and are in an easy to use PNG format. This kit has everything you need from a set of hand icons.

Radix Icons

Radix Icons is a set of 15px by 15px icons for tiny spaces. They are in a line style and are available in a variety of formats including Figma, Sketch, iconJar, SVG, npm installation, or GitHub.

Deepnote

Deepnote is a new kind of data science notebook. It is Jupyter-compatible with real-time collaboration and running in the cloud and designed for data science teams.

ZzFXM Tiny JavaScript Music Generator

ZzFXM is a tiny JavaScript function that generates stereo music tracks from patterns of note and instrument data. Instrument samples are created using a modified version of the super-tiny ZzFX sound generator by Frank Force. It is designed for size-limited productions.

Image Tiles Scroll Animation

Image Tiles Scroll Animation is a different type of scrolling pattern using Locomotive Scroll. The grid creates a smooth animation in a fun and modern style.

Bubbles

Bubbles is a Chrome extension that allows you to collaborate by clicking anywhere on your screen and then dropping a comment to start a conversation with anyone. This is a nice option for work from home teams.

Tyrus

Tyrus is a toolkit from the design team at Airbnb to help illustrators make the most out of their design businesses. It is broken into sections to help you with design briefs, originality, deadlines, and feedback.

PatchGirl

PatchGirl is an automated QA tool for developers. You can combine SQL and HTTP queries to build any possible state of your database.

Apparel

Apparel is a beautiful premium typeface family with plenty of versatility in a modern serif style. It is a contemporary, classy, and fresh serif typeface with a laid-back. Its medium-large x-height makes it ideal for headlines and brand identity design.

Christmas Story

Christmas Story is a nice solution if you are already starting to think ahead to holiday projects or cards. The long swashes and tails are elaborate and fun.

Nafta

Nafta is a fun handwriting style font that has a marker-style stroke. It’s a modern take on the popular Sharpie font. It includes all uppercase letters.

Safira

Safira is a wide and modern sans with ligatures and a stylish feel. The rounded ball terminals are especially elegant.

Shine Brighter Sans

Shine Brighter Sans is a super-thin sans-serif with a light attitude. The limited character set combined with its light weight is best for display use.

Source


Source de l’article sur Webdesignerdepot

/par

3 Essential Design Trends, November 2020

,

As we turn the corner into the final part of the year, many of the new websites and redesigns that we see during much of the rest of the year tend to slow down. Many businesses are focusing on fourth quarter and holiday sales.

With that being said, there are plenty of holiday flourishes already showing up on many websites. But there are still a few trends that don’t have a holiday theme.

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

1. Beautiful Connectivity

Web elements that merge and flow into one another can be difficult to design but the payoff is totally worthwhile. This website design trend exemplifies connected elements in a way that’s beautiful and mesmerizing.

You can accomplish it with static elements or interactivity; the common theme is that design parts enter the space of one another and merge in ways that are seamless and visually interesting.

The thing that makes it exceptionally tricky is responsiveness. To ensure that pieces work well at all sizes when they overlap or encroach on the space of one another takes a lot of planning and testing.

Here are a few examples of projects that do it well – and each one does it in a different way.

Kirk Whayman’s website uses a floating ice cube over simple lettering. The interactivity is spot on here with hover actions that allow you to move the block with the letters refracting in an expected manner. (It would be easy to play with it all day.) But the coolest interaction happens when you “break it” (click on the cube). The elements continue to merge and interact in a new and different way.

Kikk Festival uses animations and giant scrollable illustrations and plenty of elements that overlap within the space. What’s neat is that everything on this canvas seems to touch everything else. The staircase design encourages scrolling and lettering and smaller animated elements all connect to the steps in the sky motif.

Multi Options Nursing takes a totally different approach. It uses a static split screen with a photo on the right side that merges into a round graphic element. It takes two not-s-interesting images and makes something out of them. The design carries this theme below the scroll as well and this style of image presentation carries a nice visual weight without feeling heavy.

2. Almost Brutalism

Brutalism just seems to keep coming back around. For those that love this trend, it keeps evolving as well.

The latest styles of brutalism are a little less mono but still pretty sharp with harsh lines, questionable type readability, and a lot going on in a compressed space. These projects also seem to be embracing color and alternative font choices more readily.

Fledge uses a split screen – still a dominant trend two years running – with a blue that’s almost too bright with an almost white offset color. The text is big and smooshed into the space tightly. Depending on the breakpoint, you might not even get the whole phrase on the left side. The design challenge is what are you supposed to do here? There are some hover animation cues, but they aren’t very direct.

Loeven Morcel’s design has hints of brutalism and elements of elegance. What makes this design skew toward the brutal side is use of space and typography. Like the previous example, it falls into the territory of “what should I do here” with some concerns about readability. Most of these issues are resolved on the scroll if you move beyond the homepage.

Szymon Michalczyl’s site is another that is close to brutal in style but has an element of sleekness that doesn’t quite carry it over the edge. The simple framework has that brutalist feel but the use of simple, clean fonts with plenty of space pulls it back into a more mainstream design scheme.

3. Beige Everything

Is a shade of beige the color of the year for 2020? Or is it just how we all feel?

Beige backgrounds are everywhere, making this one of those design trends that you can’t miss. The good news is that designers are playing with different shades of beige as well as warm and cool variations. Beige on its own can take on some of the color from accent hues and imagery, so that’s important to keep in mind when using this in the background.

The other variable is how saturated to make beige coloring. Most designs are using some of the more muted options while mostly playing with the levels of green and red. But darker beiges are also an option.

Simon Daufresne uses a beige that is the color that comes to mind when you think beige. It’s simple, a hint reddish, and is used with black only to maintain true color.

Discovered Wildfoods uses a more neutral feeling beige with a more green undertone (or is that color feel coming from other design elements). The neutral and natural color fits the brand and association this website is trying to create.

Aebele Interiors also uses a more traditional beige but with a bold mustard accent that makes the color feel exceptionally warm. What’s nice about this color combination is that in small sizes the mustard colored-type almost falls into the beige background, but at larger sizes seems to almost jump off the screen. It’s an interesting color juxtaposition.

Conclusion

Personally, this month’s trends are a mixed bag. I love the lines and interactivity of the beautifully connected examples. It shows that elements can cross and work together well.

On the flip side, brutalism and beige just aren’t my style. But apparently, they appeal to a lot of people based on the number of projects using these styles. What do you think? I’d love to know how you feel about these trends. Let me know on Twitter.

Source


Source de l’article sur Webdesignerdepot

/par

20 Freshest Web Designs, October 2020

,

We have become so used to using web sites just to buy stuff that it is easy to forget that the web has more to offer. So this month we’ve included some because-it’s-interesting sites, some micro-sites and some just-for-the-sake-of-it projects.

Many of these are about selling or promoting products and services too, but in a more oblique way that is frequently more engaging than a straightforward sales site.

Micro sites can be a great way of including content that doesn’t fit in neatly with the rest of the main site, or is temporary, or to show a lighter, more fun side of a brand. And a well thought out micro site can act as a gateway to pull in even more visitors to its ‘parent’ site.

Your World Your Way

Your World Your Way is an interactive portal for the University of Auckland. An optional questionnaire customizes the experience, and clearly a lot of effort has gone into this in terms of the questions and possible answers, and the presentation. It is engaging and enjoyable to use, and the information provides links to the main University of Auckland website.

Blind Barber

This micro site is to celebrate 10 years of barber shop chain Blind Barber, which started as one shop with a bar in the back room, in New York’s East Village. An entirely black and white design provides a clean backdrop for color photos and videos, and some great scrolling animations give a pleasing flow to the content.

Brews & Grooves

Brews & Grooves pairs records with different beer. Although a ‘fun’ project, it is still a well designed piece of work with some vintage style typography and some pleasing rollover animation effects. It is an effective advert for those involved in creating it, as listed in on its ‘credits’ page.

Gucci Bloom

As part of a new campaign to promote it’s ‘Bloom’ perfumes, Gucci have created a Gucci Bloom game. The player has to pick up flowers and perfume bottles, but miss a flower and the vines get in your way.

808303Studio

808303Studio is a digital musical instrument that emulates a Roland TR-808 drum machine and TB-303 bass synthesizer, created in conjunction with the Design Museum (London). It’s fully programmable and there is even short video tutorial with A Guy Called Gerald on how to use it.

Aelfie

Aelfie is a home furnishings brand with a focus on bold patterns and bright color. Their site reflects this with its use of block color, irregular grid, drawings, and type that feels a little off-kilter. It creates a hand-made feel that embodies the brand aesthetic rather well.

Media Election 2020

As we approach one of the most significant, not to mention acrimonious, elections in US history, Media Election 2020 uses AI to analyze the volume of media attention each candidate receives, in real time.

Curbed

Magazine website Curbed has now become a part of New York magazine, and had a redesign in the process. It follows a discernible grid, but distorts it just enough to create an edge. The highlighter color frames, and underlines on rollover, add movement and ‘cool’.

WFN

The WFN (Women’s Funding Network) is an alliance of funds and foundations working to promote gender equity and social change internationally. The site is clean, with strong typography and a sophisticated color palette.

The Fabric of America

Internet, telephone and TV service provider Xfinity is behind the Fabric of America project. It is a collection of voice recordings, the idea being that each voice, and each person’s story, is a thread that makes up the flag that we see on the screen.

Minimal Ceramics

Minimal Ceramics is a concept site, showcasing the work of London based potter, Tom Crew. The design of the site reflects the simplicity of the showcased work, using great photography and simple typography.

Normal Now

Normal Now is part of an awareness campaign to highlight to consumers the positives of electric cars. Taking a fun approach to engage consumers in a serious subject, it uses a fake retro tech style.

Superfood Gin 

Superfood Gin is a gin made using superfood botanicals, that claims to be fruity and fresh rather than crisp and peppery. The soft color palette, along with the soft lines and curves in the background illustrations, reflect this well.

Maison Louis Marie

Maison Louis Marie is a natural fragrance company. While this site does nothing really groundbreaking, it does it well. Botanical drawings on a white background, along with clean typography, help create a refined, luxury feel.

Think Economia

Think Economia is a platform taking a fresh look at economics and the future of economic growth. It doesn’t sound like the most exciting subject, but it is presented here in a playful and intriguing way.

Chernobyl

From Uprock, a Russian design studio that also offers courses in web design, Chernobyl is a thought provoking exposition of the Chernobyl disaster. The design aesthetic is muted, allowing the images their deserved impact, and the brief sections of text to be absorbed.

Declamatuus

Declamatuus is a lingerie company selling gift sets. What stands out here is what you don’t see — live models in underwear. Instead the outline of the body is created with animated particles.

Odisea

Odisea Expedition is a documentary series following two friends, a surfer and a snowboarder, as they explore remote parts of the world. The photographs and video are everything here, and all other elements are kept minimal to avoid detracting from them.

Riffyn

Riffyn Nexus is a ‘Process Data System’ for storing and analyzing scientific data for laboratories. It is a very corporate site and yet it is put together in such a way that doesn’t feel dull.

Maison du Net

This site for digital design agency Maison du Net takes a risk mixing corporate with cutesy, but it works. Offset frames and underlines create interest without overdoing it, and the very bright green is used sparingly enough to liven things up without being overwhelming.

Source


Source de l’article sur Webdesignerdepot

/par