Articles

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

26 octobre 2020/par Service comm.

Making Minimalism Functional in Web Design

Actualités, Actualités

Today, great design isn’t just about conveying the right amount of information in a certain number of pages.

There’s more to creating the perfect website than experimenting with visuals and sound. Designers need to think carefully about how each element of their site impacts the overall user experience.

After all, with billions of websites available to explore, it takes something truly immersive to convince your client’s audience that they should stay on their pages. The more convenient and attractive your websites are, the more likely it is that visitors will want to stick around.

Minimalism, one of the more popular styles of web design from the last few years, can sometimes assist designers in making attractive and effective websites more functional.

The less clutter and confusion there is on a page, the easier it is to navigate.

So, how do you embrace the benefits of functional minimalism?

Understanding Functional Minimalism

Many webs designers are convinced that minimalism is all about aesthetics.

They see a website like Hugeinc.com and assume that the minimalist appearance is all about making the website as attractive as possible.

However, the underlying ideas of minimalism in web design go much deeper than this. The history of minimalist design begins with Japanese culture. Japan has long focused on balancing simplicity and beauty with its architecture, interior design, and even graphic design. In the Western world, minimalism got its day in the sun in the web design environment, after customers endured years of cluttered and complicated web pages with difficult navigation, overwhelming information and clashing graphics.

Designers began to experiment with the idea that less really could be more — particularly when it came to the digital landscape.

The Functional Rules of Minimalist Web Design

For a while, minimalism was the most popular style for a website. During 2018, in particular, minimalist web design soared to the top of the designer demand list, as companies fell in love with a combination of white space, simple navigation and bold text.

While now, there are other design trends stepping into the industry, designers can still benefit from exploring some of the essential rules of functional minimalism. After all, visual complexity has been proven to damage a person’s perception of a website.

Additionally, a study conducted by the EyeQuant group found that a clean and simple design can lead to a lower bounce rate. Minimalism gives viewers less to contend with on a page, which can allow for a simpler and more straightforward experience. Additionally, a clean website can also drive additional benefits, including faster loading times, better responsivity between screen sizes and more.

Because you’re only using a few images and well-spaced text, you can even experiment with different strategies, like graphics and dynamic fonts. Look at the Manuel Rueda website, for instance, it’s a great example of how a minimalist design can be brimming with activity.

So, how can any designer use the principles of functional minimalism?

1. Focus on the Essentials

First, just like when designing a landing page, designers need to ensure that they’re concentrating only on the elements in the page that really need to be there.

This means removing anything on the website that doesn’t support the end-goals of the specific page that the viewer is using. Any pictures, background noise, buttons, or even navigation features that aren’t going to support the initial experience that the visitor needs, must go.

Think about what’s going to distract your visitors from the things that are important and concentrate on giving everything a purpose. For instance, the Plus63.org website instantly introduces the visitors to the purpose of the website, then allows users to scroll down to get more information. The data is spread clearly through the home page, pulling the viewer into a story.

2. Embrace the Positives of Negative Space

Negative space is one of the fundamental components of good minimalist web design.

Every part of a good website doesn’t need to be filled with noise to make a difference. White, or negative space can help to give your viewer the room they need to fully understand the experience that they’re getting.

From a functional perspective, it’s the difference between placing someone in an overflowing storage container and asking them to find what they need or placing them in a room where items are carefully spaced out, labelled, and waiting for discovery.

The Hatchinc.co website uses negative space to ensure that information is easy to consume. You can find the different pages of the site easily, the social media buttons, and the newsletter subscription tool. Plus, you get a chance to see some of the work behind the site.

3. Make it Obvious

One of the biggest problems that consumers have encountered in recent years, is the concept of “choice overload”.

Whether you’re in a store, or on a website, you’re never sure what to do first. Do you check out the blog posts on the site to learn more about the authority of the company? Do you visit the “About” page, to see where the brand come from? Do you head to their product pages?

As a designer, functional minimalism can help you to make it obvious what your audience should do next. As soon as you arrive on the AYR.com website, you’re not overwhelmed with choice. You can either head to your bag, “shop now”, or check the menu.

Since the “Shop Now” CTA is the biggest and most compelling, the chances are that most visitors will click that first, increasing the company’s chance of conversions.

4. Simplify the Navigation (But Don’t Hide It)

The AYR.com example above brings us to another concept of functional minimalism.

While minimalism and simplicity aren’t always the same thing, they should go hand-in-hand. When you’re designing for functional minimalism, you should be concentrating on helping visitors to accomplish tasks as quickly and easily as possible, without distraction.

That means that rather than overwhelming your audience with a huge selection of pages that they can visit at the top or side of the screen, it may be worth looking into simpler navigation options. A single menu icon that expands into a full list of items remains a popular design choice – particularly in the era of mobile web design.

For instance, look at the simple menu on newvision-opticien.com.

With this basic approach, designers can ensure that visitors are more likely to click through to the pages that their clients want their customers to visit. They can still find what they need in the menu, but it’s not taking up space on the page, or distracting them.

5. Set Great Expectations with the Top of the Screen

Functional minimalism can also help today’s designers to more quickly capture the attention of their visitors from the moment they click into a website.

The content that’s visible at the top of the page for your visitors is what will encourage them to take the next step in their online experience. Make sure that you’re providing something that keeps your audience interested and gives them the information they need.

That way, you’ll lower the risk of high bounce rates for your clients, while also taking advantage of minimalism’s ability to deliver quick access to information for your audience.

At the top of the page, the Kerem.co website instantly introduces the visitor into what the website is all about, and what they should do next.

You can even deliver more information in one chunk at the top of the page, without cluttering the environment, by using good UI animation.

Consider implementing a slideshow of pictures that flip from one image to the next, or a font section that dynamically changes as your audience has chance to read each sentence.

6. Use Functional Minimalism in the Right Spaces

Remember, functional minimalism isn’t just for home pages.

Depending on what you want to accomplish for your client, you could also embed the components of minimalism into landing pages, portfolios, and squeeze pages too.

After all, when there’s less clutter and confusion on a page to distract a potential audience, there’s a greater chance that your visitors will scroll to the bottom of the page and complete a conversion. For instance, look at how simple and attractive the Muzzleapp.com landing page is.

The page provides useful information and tells customers exactly what they need to do next. There’s no confusion, no complexity, and nothing to hold visitors back.

Just be careful. While functional minimalism can be very useful, it won’t be right for every website. A lack of elements can be harmful to websites that rely heavily on content. That’s because low information density will force your user to scroll excessively for the content that they need. Using functional minimalism correctly requires a careful evaluation of where this technique will be the most suitable.

Minimalism Can be Functional

A minimalist design isn’t just an aesthetic choice. The right aspects of minimalism can simplify interfaces on the web by eliminating unnecessary elements and reducing content that doesn’t support an end goal.

The key is to ensure that you’re focusing on a combination of aesthetics and usability when creating the right design. An easy-to-navigate and beautiful website can be a powerful tool for any business.

Source

Source de l’article sur Webdesignerdepot

21 octobre 2020/par Service comm.

3 Essential Design Trends, October 2020

Actualités, Actualités

Design can make a statement. It evokes feeling and can encourage thought and conversation. That’s the common theme among the three trends in website design this month.

Each trend is rooted on the time and place where we live and includes elements that provoke thought. Kudos to these designers and design teams for jumpstarting conversations. Here’s what’s trending in design this month.

1. “Taking a Stance” Design

From social to environmental issues, design projects are echoing the sentiments of their audiences and organization in a way that take a stance on an issue.

Once taboo, this is becoming increasingly used as a technique for brands who are no longer worried about turning off a certain segment. The goal is to rally the core audience and people who feel the same way about an issue or cause.

There’s also a secondary thing happening here. Some designs aren’t really position based, but use imagery and language that resonates with a movement to associate with that feeling.

Never Heart uses “Join the Revolution” and a dark image with a heart to tug at your feelings. It can help create an association to a cause that you believe in without stating that cause directly. The design feels strong and inviting while making you feel like part of something.

Skye High uses “powerful” twice in the headline to convey a particular messages to women. The agency is looking to work with “powerful” women. It’s a timely statement and message that could resonate with a lot of business-women at various levels of their careers.

Discovered Wildfoods is a brand that is rooted in sustainability. The corporate model and responsibility of the brand shows through in the website. This type of design helps connect people with mutual feelings to the brand and products.

It’s refreshing to see more websites and brands embracing social causes and issues. It can be tricky for a number of reasons. But for some brands, it pays off.

2. Abstract Art Elements

If you are worried about a lack of images, or not sure how to portray images in an appropriate way due to the worldwide pandemic – groups or not, masked or not – abstract art elements can be the solution.

Widely used for startups and apps, more abstract design elements are everywhere. It’s an easy way to create strong visual interest without photography.

The most common use of abstract art elements is often in the form of geometric shapes with animation. This is something that almost anyone can understand and simple shapes and movement can be quite stunning when done well.

The good news is this aesthetic can work for almost any type of website. Try it for a redesign when you don’t have photography that feels appropriate in the current environment or if you want to create focus for content that drives website visitors to the words or scroll. This works with more abstract concepts when they are simple and help you move quickly from the visual to text.

Here’s how each of the examples handles abstract art elements:

Indicius uses bouncing circles that move toward text and down the screen to drive users to the headline and scroll action.

With Code uses a fun fuzzy circle with different animations to draw you in.

Appimized uses bright color and a monotone scheme with geometric shapes to sell its services.

3. Images That Make You Think

This might be the most visually interesting, and thought-provoking, website design trend we’ve seen in a while. These designs all feature images with a little something different or unusual that make you think.

There are a lot of different ways to do this – marry photographs and illustrations, create imaginary imagery, animations or effects, visual tricks that play on depth perception or create pseudo-3D effects.

The commonality is that the visual is so striking and unusual that website visitors stop and engage with the design. What do the “oddball” visuals mean? What message do they convey? How did they do that?

All of the questions could be associated with this different style of visual representation.

Bling uses a combination of a photo with illustrated animated elements to draw the eye. The yin and yang between reality and fantasy is quickly evident and makes you want to know more. (It doesn’t hurt that the animation uses dollars and lightning.)

Kibun is interesting because the photo choices create an optical illusion of depth. It matches the content of the design well because the website features artistic textile panels with an artistic design. The illusion is in the angles and coloring of photographs and their placements on the screen. The only downside of this design is that it loses the artistic panache on mobile because the images stack.

Oddball images can sell. We Are Mad stands out because it uses a contrived image, but doesn’t go oversized with it. The more subtle placement is ideal and arguably more attention-grabbing.

Conclusion

Website design can be a powerful thing, as these trends and examples show. Don’t discredit the power of choices in color, imagery, animation, and text when creating a digital experience. Design can mean a lot of different things depending on the audience as these examples show.

At the same time, these design trends are powerful and meaningful. They provide context into our world, our time, and our feelings. Don’t be afraid to experiment and make a statement with your design work. Just remember to keep in mind all potential impacts (positive and negative) before taking the project live.

Source

Source de l’article sur Webdesignerdepot

5 octobre 2020/par Service comm.

3 Essential Design Trends, August 2020

Actualités, Actualités

Do the lazy days have you longing for a new design technique to try? You are in luck.

This month’s collection of essential design trends is packed with functional ideas to spruce up design projects. And all of them are fairly easy to accomplish and will give your project a modern – or intentionally old-school – look.

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

Angles

There are so many ways to add and use funky angles in design projects.

An angle with a color-block can be a great way to help add a place for a text element on top of an image or video to help ensure readability. Use a color for the angled element that contrasts with the background and text overlay for a striking visual or use a color that matches the background for a more subtle feel.

Another bonus for using angles in the design is that they can help create a distinct eye-tacking pattern from one part of the screen to another to help create visual focus. On a smaller, more vertical screen (such as a mobile device), large angles can even serve a pseudo-split screen purpose and create a way for text and other elements to stack in more vertical orientations.

Angles can come in all different degrees and sizes. There aren’t a lot of rules with how to use them. The common factor is that they make the design easier to understand.

Alternatively, angles can be an independent design element that really has nothing to do with function or adding a text layer. That’s exactly what Aviaja Dance does with their design. The main use of angles comes from the fun “A” in the logo. It’s the main visual on the homepage above the scroll and is rotated in other locations throughout the design.

The next two examples use color-blocked angles.

Dantia uses a small blue angle in the top corner to anchor the logo against video that uses a lot of different colors. This way the logo is always visible. Small triangles are used as bullets throughout the design to further emphasize this shape.

Adige Design uses a large angle in a color that almost fades into the background to almost split the screen in half – part text, part visuals. This is a popular and effective use of an angle to enhance readability and add visual finesse.

Overprint Effects

While overprinting is a print design technique, the visual it creates is popping up in plenty of digital projects. It’s a cool look that creates additional colorways and almost always has a funky vibe.

When a design uses overprint, one color “prints” over another forming a mixed shade from the two hues. It has a certain elegance because as a print technique, it is often reserved for special projects.

That same feel comes through in digital design as well.

Sweet Punk uses a fun overprint with a bright orange circle and black and white image to create a lot of contrast in an interesting color effect. What makes it stand out even more is that the overprint slide is just part of a bigger set of moving images. It stands out because of the color choices and technique.

Kriya Konsulting uses a small overprint feature in a graphic to create a focal point away from text. The effect is subtle and with color and lines inside shapes, it gives you a lot to look at. The overprint graphic is just one of many circles on the screen that come together for a full effect. The interest of the overprint area serves as a starting point for the eye, which moves to other circular elements and text on the screen.

Dystopian Creatives uses an overprint effect in a quick animation as the site loads and then in several locations on the scroll. It’s so subtle that you might miss it if you aren’t looking thanks to a pretty bold overall aesthetic.

Turn of the Last Century Typography

Tall, skinny, modern-style typefaces are in. Bonus points for using this trend in a way that evokes feelings of the roaring 20s (1920s that is).

These font styles seem to mimic media posters from the era. While most of these typefaces fall into the category of modern serif, there are some sans options that create a similar feel.

The primary commonality is the use of extremely tall x-heights, and strokes with distinctly variable thick and thin options. Most of these typefaces are rather condensed as well.

Note how each of these examples takes a different approach.

Better Half uses a modern serif with a dramatic x-height. Note the use of upper and lower-case letters for the headline. It brings attention to the high-drama of the typeface.

Chiara Luzzana takes the opposite approach with an all uppercase character set and mixes outline and filled lettering. The text is somewhat reminiscent of the title credits from “Stranger Things” with dual throwback vibes to the 1920s and 1980s. (Proof that everything that was popular once comes back around again.)

Synchronized Digital Studio goes another way entirely. While the text and design has a similar feel, they do it here with a modern sans serif. Note that the x-height is still quite tall and there are vast differences between thick and thin strokes.

Each of these compact, yet bold typefaces are used to create a dominant visual. That’s the beauty of this style – the typeface is the art thanks to so much visual interest. There’s also the added bonus that these condensed styles allow for higher character counts without getting visually overwhelming. (So, if you need to use a long word at a large size in the main headline, this could be a viable option.)

Conclusion

Design trends that are fun (and functional) are some of the best. Using angles can make it easier to incorporate text elements that are easy to read, overprint effects add flair and a bit of an old-school feel, and turn of the last century typography feels modern and fresh with a hint of 1920s flair.

Any of these design elements can be applied to websites without a complete overhaul and make a great refresh for the dog days of summer and beyond.

Source

Source de l’article sur Webdesignerdepot

3 août 2020/par Service comm.

20 Unmissable Websites, July 2020

Actualités, Actualités

After six months of uncertainty 2020 is finally beginning to find a style of its own. There are nods to Brutalism, a delightful blending of 80s pastels with 90s primaries, and the font style of choice is anything but geometric sans-serif.

In this month’s collection of the freshest sites from the past four weeks you’ll find tons of new portfolios, from big agencies to freelancers, and some amazing primal scream therapy. Enjoy!

Looks Like You Need Iceland

Looks Like You Need Iceland is an incredible site that asks you to record a scream, that they’ll broadcast for you into the wide open spaces of Iceland as therapy. And then perhaps you’ll visit Iceland for real. It’s brilliant marketing for the Iceland tourist board.

Riverlane

The abstract 3D animation on Riverlane’s site is a stunning introduction to a topic that’s hard to visualize. The rest of the site is equally well done, with great typography, slick brand assets, and a professional engaging tone.

Monokai

Wimer Hazenberg’s site features a simple pixelated text column. But scroll down the page and keep an eye on the awesome text dissolve effect, it transforms this simple design.

I Weigh Community

The I Weigh Community is a non-profit community activism initiative helmed by Jameela Jamil. It’s devoted to radical inclusivity, and it promotes its message on its site with striking graphics and bold, expressive typography.

WAKA WAKA

Waka Waka is a design studio specializing in wooden furniture. The noise effect and the mid-century typography evoke the radical design of 60 years ago. The random rotations on the thumbnail hovers are delightfully disruptive.

Dataveyes

Dataveyes is an information design studio that works with large datasets to give meaning to complex information. Its site features beautiful, full-screen animations that illustrate the type of information it specializes in.

Year & Day

Year & Day is an ecommerce site that sells ceramics, glassware, and other choice pieces of tableware. It’s a colorful collection that perfectly complements your food and the stunning site takes its cues from the collection.

Dunderville

Dunderville is a motion design studio with an impressive portfolio of animation and live action films. Its site features a tactile paper fold detail, and as you would expect, some superb text, and vector animations.

André Venâncio

It’s been months since we last saw a creative developer’s site with a liquid effect. André Venâncio revisits the idea with a cool oil bubble effect, hover over the thumbnails to see it.

Thomas Prior

It’s not all 60s revivalism, pastels, and cute animations. There will always be room for minimalism, and nothing suits this style as well as portfolios for photographers; Thomas Prior’s site is a prime example.

Serra

Serra’s site features a really beautiful high-contrast typeface that sits apart from the usual sans-serif. The product page is all colored product photography. It exudes luxury and distinction in a saturated marketplace.

VYBES

VYBES is a CBD drink made in LA. Its site evokes the Californian spirit with baby pink brand colors and sun-bleached photography. It’s a cool, and ever so slightly Brutalist look for what is essentially a health drink.

Karina Sirqueira

We love the simplicity of Karina Sirqueira’s portfolio. The desaturated rainbow leads to a simple slideshow of projects, and it’s refreshing to see a minimal site that uses bold serif-based typography. The content feels fresh and honest too.

Smalls

Smalls produces healthy food for cats. The site, is packed with adorable pictures of kitties, which if you’re a cat person, is guaranteed to draw you in. There’s a definite Brutalist style to the site, and lots of color too.

Wildist

There’s a clear aesthetic beginning to emerge in 2020, with pastels creating a soft background for desaturated primaries, and Wildist gets it exactly right with this youthful, site that features just enough animation to bring it to life.

Kristen Kwong

We’ve seen a lot of OS-style sites recently, but Kristen Kwong’s is one of the slickest. It manages to take a simple metaphor for interaction and transform it with a vintage color scheme.

Stojo

Continuing the Miami-meets-Brutalism trend this month is the site for Stojo, a collapsable cup and bottle. The pastel shades block out a disrupted grid, but for our money it works better on mobile. The vintage typeface is a nice touch.

Hoang Nguyen

Hoang Nguyen’s site features a surreal 3D scene with mountains, a spinning planet, floating islands, a waterfall, and a floating dragon-boy. Click around the site and the scene transforms.

SMTH / Sam Smith

Sam Smith’s portfolio has a cool magazine style to it, with a nice blocky background on the text and a personality packed animated avatar taking centre stage.

Then I Met You

Then I met You is a site promoting a range of skincare products. In this case, the usual pastel colors are replaced with an 80s-style gradient. Watch the products as you scroll, the lighting changes creating an awesome, subtle 3D effect.

Source

Source de l’article sur Webdesignerdepot

29 juillet 2020/par Service comm.