Articles

This month we’re going big and bold. Oversized type, strong colors, in-your-face layouts, and little touches of playfulness exude confidence and make a statement. There are some quieter moments too, with thoughtful illustration and more gentle use of color. Animation still features strongly in the details, with circles proving popular in rollover effects. Enjoy.

Fledge

Fledge is a film production company based in Belgium. Their site uses split screen with looped text scrolling in opposite directions on each side. A minimal color palette adds extra punch.

2ºC Earth

2ºC Earth is a beautiful and also scary website that explores the effects of rising global temperatures by focusing on 5 specific locations. Some stunning photography and subtle use of sound take you to these locations as they are now, then show what they could become. The experience is both immersive and unsettling.

pill&pillow

Unlike many digital studios who use the design of their own site to demonstrate their skills, pill&pillow have taken a very basic approach. It is very self-assured, and it works. Random colored strikethroughs on visited links add a nice touch of playfulness.

Ferrum Pipe

Metal fencing is not the most interesting of subjects to most of us, but this site for Ferrum Pipe is surprisingly appealing. On scroll animation and some off-grid image layout brings life to what would normally be, well, a bit dull.

Lucciano’s

With its focus on mouth-watering photography and videography, the site for gelato makers Luccianos, will have you checking your freezer for any leftover salted caramel or stracciatella. The zoom on rollover is a nice effect, and the use of circles with ice cream color backgrounds for rollover text reinforces the gelato theme.

Björn Wieland

UI designer and artist Björn Wieland has created a portfolio site with a simple, relaxed feel and pleasing transitions. It feels simple, but behind the scenes there is quite a lot going on.

Coloursmith

Coloursmith is a tool from Taubmans paint company which allows you to create a custom paint color by uploading a photo. You name your color and can add a story, then you order a test pot. colors are presented well, in different light and with suggestions for complementary colors.

Finn 

Finn make diet supplements for dogs. Their site is fun, modern and clean. Bright colors and an illustration that manages to be cute but not too cutesy make a bold impression.

Highcourt

Highcourt is a new private membership leisure club set to open in New York in spring 2021. Dark blue text on cream gives a softer edge than black on white. The background color changes on scroll are pleasing, and simple line illustrations with occasional gentle animation add to the overall sense of calm.

Elevence

Elevence is the company of product designer Kazuo Kobayashi. The site uses only black, white, and grays allowing the color photos of his work to really stand out. Circular thumbnails are used to good effect, appearing on rollover.

Playtype

Playtype is a Danish type foundry whose site seems to fit their name. It has a playful, almost chaotic feel, with bright blocks of color and occasional animation. Some pretty nice typefaces too.

Neri Oxman 

Neri Oxman is many things: architect, scientist, engineer, inventor, and designer. This site feels like a really beautiful coffee table art book that you want to pick up and look through every so often. There are some nice details too, like the lens ‘reveal’ effect on rollover in a few places.

Modern Recovery

Modern Recovery is a project by sobriety program Tempest. The interactive illustration encourages exploration, to discover different stages of recovery from alcohol abuse and insights from others who have followed the program. The aim is to change our social attitudes towards alcohol and not drinking.

Bliss

Have you clicked on the link to visit Bliss Search? Yes, the link is correct, no you haven’t been redirected to a Google search results page. This Australian digital marketing company have copied the appearance of different well-known sites for their pages — Google, Instagram, LinkedIn, Tinder all make an appearance. The humor in this approach shows confidence, and makes it memorable.

Miilkiina

Miilkiina describe themselves as a digital media space and creative agency. Punchy typography, with great use of blackletter, well chosen images, and a strong header video give this home page an in-your-face edge.

Ukrainian Railroad Ladies

Ukrainian Railroad Ladies is a book by photographer Sasha Maslov. Its subjects are the, mostly, women who work as traffic controllers and safety officers at railroad crossings in Ukraine. It’s a simple site — outsized type, black and white, basic image grid, only very brief text — but it is effective in its simplicity.

Una Europa

Una Europa is an alliance of 8 European universities with the aim of offering joint research and study programs. There is some playful scrolling behavior with geometric shapes moving and changing color that enlivens what could otherwise be quite a dry site.

Bureau Cool

There’s a bit of an old school feel about the site of digital design studio Bureau Cool, with its recent traffic animation. The changing backgrounds on scroll are a nice touch.

Gridspace

Gridspace is a multimedia entertainment studio based in Montreal, and their website is a visual feast. Lots of movement, lots of video, some good use of sideways scrolling.

Nolii

Nolii make cases and accessories for iPhone that work together. The sorbet color palette complements the product colors and the block layout provides a visual reflection of the interlocking of the different products.

Source


Source de l’article sur Webdesignerdepot

When it comes to increasing sales for your ecommerce store, there are 3 levers you can pull: You can increase your average order value; You can increase the amount of traffic to your site; You can increase your conversion rate.

While all of the above are important, the cheapest, most effective way to grow your sales is by improving your conversion rate.

For most online stores, low conversion rates are typically the result of a poor design or a bad user experience. Your visitors may not resonate with the look and feel of your website or they may have problems finding the information they need in order to make a purchase.

In this post, I will walk you through the exact steps I took to increase my desktop conversion rate by 46% and my mobile conversion rate by 39% with my last site redesign. I will also show you how you can apply these same design principles to optimize the conversion rate for your own online store.

Even if your ecommerce business is already performing well, this post will help you achieve even better results.

What Is Considered A Good Ecommerce Conversion Rate? 

Monitoring your conversion rate is crucial to building a profitable ecommerce business. And most analytics tools can help you measure this data out of the box.

Your conversion rate is calculated by simply dividing the number of desired actions by the number of website visitors in a given period. For example, if your website is getting 50 conversions for every 5,000 visitors, your conversion rate is 1%.

Depending on the specific type of online business you run, your conversions may include online sales, email signups, add to carts, or any other KPI you wish to measure. But in the case of an ecommerce store, your primary focus should be your purchase conversion rate.

On average, ecommerce stores have a purchase conversion rate of 1% – 2%. What’s more, experts say a good conversion rate is anywhere from 2% to 5%. This should be your baseline as you measure your online store’s success.

The Conversion Results of My Last Site Redesign

Before we dive into the nitty gritty details of how I improved my conversion rate, here are my overall results and exactly how I conducted my experiment.

First off, I run Bumblebee Linens, an ecommerce store that sells handkerchiefs online.

Because my site gets a ton of traffic from content pages that do not directly convert to sales, I measured my conversion rate based on my most predictable traffic sources.

As a result, all of my conversion data was taken from targeted PPC ad traffic sources like Google Shopping and Google Adwords. After all, my Google ads traffic is very steady and always converts at a consistent percentage.

Before I redesigned my site, the conversion rate for my ecommerce store hovered at around 3% which is above average. But the look and feel of the site was dated and desperately needed a refresh. Overall, the entire redesign took approximately 7 weeks and cost me roughly $1840.

Here are the conversion results from my updated design compared to the original:

  • Desktop conversion rates increased by 46%
  • Mobile conversion rates increased by 26% 
  • Tablet conversion rates increased by 32% 

The remainder of this post will highlight the specific elements of the redesign that contributed to these increases. (Note: I made all of my redesign changes live simultaneously so it’s difficult to determine which specific optimization contributed the most gains.)

8 Ecommerce Design Tips To Optimize Your Conversion Rate

If your ecommerce store is not performing as well as it should, there are many aspects of the user experience that could be negatively impacting sales. Even a seemingly innocuous design choice like your font size or the color of your buttons can have a significant impact on your overall conversion rate.

If you want to systematically improve the conversion rate for your ecommerce store, you should follow these 8 design steps.

1. Use A Consistent and Complementary Color Scheme 

Use color.adobe.com to choose complementary colors when redesigning your website.

A well chosen color scheme can instantly attract a customer’s attention, evoke emotion, and drive users to take action. After all, how a customer feels about your website can be the deciding factor between completing checkout or bouncing from your shop.

A well designed ecommerce store should utilize at least 3 complementary colors that are consistently applied across every page of your website.

If you don’t have a good eye for color, you can use a free tool like color.adobe.com which will help you mix and match different colors that go well together.

For my site redesign, I wanted a modern feel so I chose teal, hot pink, and yellow for my color palette.

I also assigned each color a specific purpose on my site:

  • Teal was applied to give the site a bright, overall color for a young and hip feel;
  • Yellow was used to draw attention to marketing elements like free shipping and special offers;
  • Hot Pink was used for all action buttons on the site.

Overall, every single page of your ecommerce store should have 1 main call to action (using a bright color like hot pink) that guides a customer closer towards checkout.

For example on my front page, the hot pink button “Shop Our Personalized Collection” pops out of the page and catches a user’s attention right away. We want visitors to shop our personalized collection because our personalized products are the highest margin products in our store.

2. Simplify Your Navigation 

Is your menu too complicated? Is your navbar taking up too much screen real estate?

A good rule of thumb for an ecommerce store is to minimize the number of clicks for a customer to add to cart. As a result, you should avoid nesting your product categories in more than 1 level of hierarchy.

If you have too many categories in your shop to display all at once, choose your best selling categories for your main menu and lump your less trafficked categories in a separate tab.

For my store, I decided to use a top-level, hover style drop-down menu as shown in the photo below.

Top-level navigation is one way to organize and display your product categories.

My old design utilized left hand style navigation which took up too much screen real estate. And freeing up the extra space allowed me to blow up my category and product images by 300%. With my new navigation menu, every visitor can add to cart in just three clicks: One click to find a product category; One click to view the product description; One click to add to cart.

Once you’ve designed your menu, pretend that you are a customer and try to shop on your site. Is the content easy to read? Do the important elements pop out? Can you find the information you need right away? Analyzing your site from a customer’s perspective will help you improve your users’ shopping experience.

3. Display Trust Factors On Every Page 

Free shipping, easy returns, and trust are crucial to driving conversions. 

Trust is the most important value you must establish with your customer.

Unless you’re Amazon or a big box store, people have likely never heard of your brand and you have to reassure them that it’s safe to buy from your store.

Due to Amazon’s influence in the ecommerce space, most customers look for 3 things when shopping at an online boutique for the first time:

  • Fast and free shipping;
  • Easy returns;
  • A way to reach customer support.

Displaying your phone number and email address is very important! Adding your store hours also helps to make your site look legit to new visitors. If you don’t have a recognizable brand, customers will want to know that they can reach a real human in case of problems or questions.

In the above image, you’ll notice that I placed my trust factors in the header, so they can be seen above the fold on every single page. We’ve also been featured on the Today show and a bunch of magazines. So I made sure to display this social proof on the bottom of every page.

Don’t hesitate to flaunt your achievements to reinforce trust. 

In addition, customer testimonials provide social proof and credibility to your website. As a result, it’s important to regularly reach out to happy customers for testimonials and endorsements. On our redesigned site, you’ll find the testimonials section right below our press mentions.

Testimonials lend social proof and credibility to your website.

Remember, to generate conversions as an unknown store or brand, you first have to gain your customers’ trust. Make it easy for them to contact you or get a full refund if anything goes wrong with their purchase. By showing a genuine concern for customer satisfaction, you’ll be able to build a solid reputation over time.

4. Emphasize Your Unique Value Proposition

Users spend an average of 5.59 seconds looking at your website’s written content. And in those 5.59 seconds, you must capture their interest or else they’ll bounce from your page. Right off the bat, you must convey to a user exactly what you sell and why they should buy from your store over a competitor.

What’s more, every single page on your site should communicate your unique value proposition. A unique value proposition is a concise statement that describes what makes your business special and outlines what your store does better than anyone else. The best way to show off your unique value proposition is to use an eye-catching image alongside compelling copy.

For example, here’s the first thing a user sees on my home page above the fold:

Right away, a user is shown a large image of one of our best selling personalized handkerchiefs. And right beside that image is a clear and concise value proposition, followed by a call to action to shop in our store.

Displaying your value proposition should not be limited to your home page. We also include our unique value proposition on every category page as well. Overall, you should include your value proposition on every landing page on your website.

5. Optimize The Visual Hierarchy Of Your Product Pages 

Every page on your site should have a single objective. And for your product pages, your goal is to get a customer to add to cart.

When designing a product page, you must apply a logical visual hierarchy to your design. A visual hierarchy is the order in which a user processes information on a page and in the case of a product page, there must be a clear path to your add to cart button with as few distractions as possible.

Here’s a screenshot of my old product page:

As you can see, my old product page is overwhelming. All of the design elements try to grab your attention at the same time and there are many different calls to action that blend together. To improve my product descriptions, I freshened up the color scheme and enlarged my product image by 266%. I also changed the placement of the buttons in a more logical flow.

Here’s what the redesigned product page looks like today:

By adjusting the size, color, contrast, and alignment of the page elements, I now force the customer to process my product information in a set path that leads directly to my primary call to action. For example, the hot pink color draws attention to the “Add to Cart” button over the “Reviews” button. Also, by applying a blue text color and teal background, I reassure customers that shopping with us is safe and risk free.

Overall, rearranging the design elements this way nearly doubled my add to cart percentage.

6. Simplify Your Checkout Process 

With our old site design, we would regularly receive feedback from confused customers who weren’t sure if they needed an account to purchase our products.

Here’s what our old checkout page looked like:

As you can see, there are too many choices. After all, a customer doesn’t need 3 ways to checkout and the choices are a little overwhelming.

Here’s what the checkout page looks like now:

Instead of offering 3 separate options for checkout, I consolidated them all into one and added a separate Paypal option (more on this later). First off, less than 6% of customers create an account so there was no reason to offer account creation as a separate option. Furthermore, displaying a login form was causing more headaches than it was worth because the majority of customers don’t even have an account. As a result, I decided to hide the form altogether by default.

Overall, when you are designing your checkout process, keep these optimization principles in mind.

Principle #1: Remove all unnecessary elements from the page. Don’t make the customer think and hide all elements that are not frequently used.

Principle #2: Display trust logos to assure customers of a secure checkout. In the image above, you’ll find trust logos on the right-hand side of the checkout page.

7. Optimize The Checkout Process For Mobile Users

4 out of 10 mobile users abandon their carts if they have a hard time entering their personal information. People don’t like entering their contact and credit card information using a tiny keyboard. What’s more, small buttons and too many form fields drive away mobile users. 79% of smartphone users shop online with their mobile devices, which is why you should optimize for mobile.

These days, a responsive design is par for the course but you can still screw things up if you are not careful. Here’s what my checkout process looks like on a desktop:

And here’s how the checkout page looks on a mobile device:

On mobile, the user’s cart contents are collapsed so it doesn’t occupy the entire screen. Overall, here were the mobile optimizations I made to checkout:

Optimization #1: Keep Your Checkout Form Short And Sweet

A mobile user should be able to tap buttons on your checkout page without accidentally hitting another option. Also, the buttons should be large enough to tap on a mobile device.

Given the smaller screen size of a mobile phone, keep your checkout form short and sweet with no extraneous options. Also, make sure you turn off autocorrect for your form fields. Otherwise, your phone’s autocorrect feature may frustrate users when they try to enter their address. In fact, we once had a customer get so frustrated trying to type in their city on their iPhone that they called us up and complained in frustration.

To fix this, you simply need to add the following tag to all of your text input fields.

<input type="text" name="name" autocorrect="off">

And to reduce frustration, you should also turn off auto-capitalization and auto-complete by adding auto-capitalization=”off” and auto-complete=”off” to all of your forms as well:

<input type="text" name="name" autocorrect="off" auto-capitalization="off" auto-complete="off">

In addition, for phone number entry, you should always display a numeric keypad as opposed to a regular keyboard:

Optimization #2: Automatically Import Your Customer Data If Possible

The less information mobile users have to enter in, the better. Payment options like Paypal Express and Amazon Payments can simplify the checkout process. These third-party payment processors automatically fill out a customer’s billing and shipping information which reduces typing and increases conversion rates.

To offer a more convenient checkout, I implemented PayPal One Touch, which alone increased my mobile conversion rates by 31%.

Here’s a quick tip when implementing Paypal: Make sure you display the Paypal button early in the checkout process before a user has entered in their information. Otherwise, it defeats the purpose of importing their information! In the first step of my checkout process, I explain each payment option in depth.

These simple changes made a huge difference in my conversion rate. And the number of PayPal users on my site nearly doubled from 13% to 23%!

8. Add A Sense Of Urgency

Most customers like to window shop and the best way to get a visitor to take action is to create a sense of urgency.

Whenever I run a sale, a big yellow countdown timer is displayed on every page of the website.

Note: It’s important to note that we only utilize this timer when there is actually a sale going on. Otherwise, you risk desensitizing your customers or losing trust.

In addition, I also display a countdown timer on the checkout page to create a sense of urgency to complete the payment process:

These extra design elements force a customer to take action sooner rather than later.

Final thoughts

Optimizing your conversion rate is an ongoing process. And testing your results is the only way to track your improvement.

Never go with your gut and always listen to the data. After all, sometimes an ugly site can out-convert a beautiful one.

Regardless, the design tips I demonstrated above will give you a solid foundation to start with. From there, you can further improve your website and optimize your conversion rate through repeated testing and tweaks. Good luck!

Source


Source de l’article sur Webdesignerdepot

We are gathered here today….

Today I write in memory of Adobe Flash (née Macromedia), something that a bunch of people are actually too young to remember. I write this with love, longing, and a palpable sense of relief that it’s all over. I have come to praise Flash, to curse it, and finally to bury it.

We’ve been hearing about the death of Flash for a long time. We know it’s coming. December 2020 has been announced as the official timeframe for removal, but let’s be real about this: it’s dead. It’s super-dead. It’s people-are-selling-Flash-game-archives-on-Steam dead.

That last bit actually makes me happy, because Flash games were a huge part of my childhood, and the archives must be preserved. Before I’d ever heard of video cards, frames per second, and “git gud”, I was whiling away many an hour on disney.com, cartoonnetwork.com, MiniClip, Kongregate, and other sites, looking for games.

I think we’ve established in my previous work that even as a missionary kid, I did not have a social life.

The Internet itself gave me a way to reach out and see beyond my house, my city, and my world, and it was wonderful. Flash was a part of that era when the Internet felt new, fresh, and loaded with potential. Flash never sent anyone abuse, or death threats. Flash was for silly animations, and games that my parent’s computer could just barely handle, after half an hour of downloading.

I even built my first animated navigation menus in Flash, because I didn’t know any better. At all. But those menus looked exactly like the ones I’d designed in Photoshop, so that’s what mattered to me, young as I was.

That was a part of Flash’s charm, really.

What Flash Got Right

Flash Brought Online Multimedia into the Mainstream

Funny story, JavaScript was only about a year old when Flash was released. While HTML5 and JS are the de-facto technologies for getting things done now, Flash was, for many, the better option at launch. JS had inconsistent support across browsers, and didn’t come with a handy application that would let you draw and animate whatever you wanted.

It was (in part) Flash that opened up a world of online business possibilities, that made people realize the Internet had potential rivalling that of television. It brought a wave of financial and social investment that wouldn’t be seen again until the advent of mainstream social networks like MySpace.

The Internet was already big business, but Flash design became an industry unto itself.

Flash Was Responsive

Yeah, Flash websites could be reliably responsive (and still fancy!) before purely HTML-based sites pulled it off. Of course, it was called by other names back then, names like “Liquid Design”, or “Flex Design”. But you could reliably build a website in Flash, and you knew it would look good on everything from 800×600 monitors, to the devastatingly huge 1024×768 screens.

You know, before those darned kids with their “wide screens” took over. Even then, Flash still looked good, even if a bunch of people suddenly had to stop making their sites with a square-ish aspect ratio.

Flash Was Browser-Agnostic

On top of being pseudo-responsive, the plugin-based Flash player was almost guaranteed to work the same in every major browser. Back in a time when Netscape and Internet Explorer didn’t have anything that remotely resembled feature parity, the ability to guarantee a consistent website experience was to be treasured. When FireFox and Chrome came out, with IE lagging further behind, that didn’t change.

While the CSS Working Group and others fought long and hard for the web to become something usable, Flash skated by on its sheer convenience. If your site was built in Flash, you didn’t have to care which browsers supported the <marquee> tag, or whatever other ill-conceived gimmick was new and trendy.

Flash Popularized Streaming Video

Remember when YouTube had a Flash-based video player? Long before YouTube, pretty much every site with video was using Flash to play videos online. It started with some sites I probably shouldn’t mention around the kids, and then everyone was doing it.

Some of my fondest memories are of watching cartoon clips as a teenager. I’d never gotten to watch Gargoyles or Batman: The Animated Series as a young kid, those experience came via the Internet, and yes… Flash. Flash video players brought me Avatar: The Last Airbender, which never ever had a live action adaptation.

Anyway, my point: Flash made online video streaming happen. If you’ve ever loved a Netflix or Prime original show (bring back The Tick!), you can thank Macromedia.

What Flash Got Wrong

Obviously, not everything was rosy and golden. If it was, we’d have never moved on to bigger, better things. Flash had problems that ultimately killed it, giving me the chance, nay, the responsibility of eulogizing one of the Internet’s most important formative technologies.

Firstly, it was buggy and insecure: This is not necessarily a deal-breaker in the tech world, and Microsoft is doing just fine, thank you. Still, as Flash matured and the code-base expanded, the bugs became more pronounced. The fact that it was prone to myriad security issues made it a hard sell to any company that wanted to make money.

Which is, you know, all of them.

Secondly, it was SEO-unfriendly: Here was a more serious problem, sales-wise. While we’re mostly past the era when everyone and their dog was running a shady SEO company, search engines are still the lifeblood of most online businesses. Having a site that Google can’t index is just a no-go. By the time Google had managed to index SWF files, it was already too late.

Thirdly, its performance steadily got worse: With an expanding set of features and code, the Flash plugin just took more and more resources to run. Pair it with Chrome during that browser’s worst RAM-devouring days, and you have a problem.

Then, while desktops were getting more and more powerful just (I assume) to keep up with Flash, Apple went and introduced the iPhone. Flash. Sucked. On. Mobile. Even the vendors that went out of their way to include a Flash implementation on their smartphones almost never did it well.

It was so much of a hassle that when Apple officially dropped Flash support, the entire world said, “Okay, yeah, that’s fair.”

Side note: Flash always sucked on Linux. I’m just saying.

Ashes to Ashes…

Flash was, for its time, a good thing for the Internet as a whole. We’ve outgrown it now, but it would be reckless of us to ignore the good things it brought to the world. Like the creativity of a million amateur animators, and especially that one cartoon called “End of Ze World”.

Goodbye Flash, you sucked. And you were great. Rest in peace. Rest in pieces. Good riddance. I’ll miss you.

 

 

Featured image via Fabio Ballasina and Daniel Korpai.

Source


Source de l’article sur Webdesignerdepot

The biggest trend we’re talking about this month started at WWDC as Apple provided a glimpse of what’s coming next for their operating systems. This time around there’s a distinct design element. Did you catch it?

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

1. Text Highlights and Underlines

There’s always been an unwritten rule in website design that text uses more plain styles. Bold is acceptable, italics are OK from time to time, but underlining is seldom used.

This design trend bucks that concept with text elements that use highlighter or underline elements to emphasize key words. And it works rather nicely.

What it takes to make this work is plenty of contrast and a design style that fits with underline or highlighted elements.

This design trend works thanks to clear intention. The words are obviously important to the overall meaning of the design or what visitors should take away from the content.

Pepper It uses a nifty underline that the letters seem to rest inside of to highlight a key phrase. The shape and color also mimic that of the larger button below, helping the eyes move from one element to the next. It’s an effective use of an underline (or maybe you could call it a highlight) effect in conjunction with brand colors.

Zappos Kids uses a fun highlight in a colorful scheme to highlight a key text element. It almost looks like a button and helps website visitors understand that the entire hero image area is clickable. The highlight serves to make the text more readable and the interactive element more functional.

Zeus Jones uses a variety of text treatments on the homepage, but arguable the underline is most noticeable, likely because it is the most unfamiliar in the context of website design.

2. Distinct Geometry

Geometric shapes in website design have popped up as trending elements in a variety of forms. This iteration is pretty simple: Use of distinct geometry as part of the overall aesthetic.

Geometry might pair with illustrations, photos, text, or in the background or foreground. What’s great about shapes is that they are versatile and work with a lot of other design patterns.

What can be the most challenging about shapes and design is that distinct geometry requires some space and thought. Just tossing a few triangles or rectangles in a design without reason can look rather strange.

So how can you add geometric shapes to a design so that they look intentional? These examples do it well (and in three different ways).

Rui Ma uses square and rectangular containers in a modular grid with portfolio projects inside each. This is one of the most common and applicable uses of geometry – as a container element. What makes it stand out is the circle, smiley wheel (also a geometric shape) that never leaves the center of the screen. The black background for the grid is also a nice contrast element for content blocks.

Thompson Stenning uses shapes in the background and with illustrations to create a stunning homepage visual. It’s big and bold and has just enough going on that you want to look at it and figure out the scene. Maybe what’s most intriguing about the visual concept is that it uses lots of geometric shapes – rectangles, squares, triangles, ad circles – whereas most projects pick one shape to focus on.

Romain Penchenat uses three-dimensional style angles to draw you into the portfolio website. They use a simple animation that “floats” on the homepage and follows the scroll with other geometric elements.

3. Shadow and Gradient Icons

Did you notice all the gradients and subtle shadows in icons in the images previewing iOS 14 or were you just looking at other changes (such as widgets) on the iPhone screen?

We’ve been seeing more designers incorporating more shadows and depth into icons for a while, but this move by a major player in design will push it to the forefront fast. Each of the icons moves from a flat style to one with a background gradient color as well as more shadows within icon elements for depth.

Don’t worry, the design still looks very much like Apple, but is a little more reminiscent of the skeuomorphism style icons from earlier versions of iOS.

It’s nice that the color and shadow elements are contained within each icon. This creates more visual interest and depth for each element without getting cluttered or junky. The gradients are also super simple, using a darker version of the main color in a monotone element.

It’s an iconography style that others are already using. DG Studio has a collection of icons on its homepage with subtle gradients and shadowing in the designs. Again, what’s nice about this trend is that it adds depth to visuals without tricks that get in the way of visual comprehension.

Guillaume Gouessan uses gradients in image icons in much the same way as the previous examples but with a little more color variation. Here, you can see what the gradient looks like when using a color change that’s not super drastic, but more dramatic than a monotone option. You can find some use of the more monotone gradient on his site below the scroll in the large desk image. (It’s definitely worth a few clicks to check it out.)

Love it or hate it, gradients and shadows seem to be here to stay for a while.

Conclusion

How often do you find yourself looking to major brands and companies for design inspiration? While a lot of web design trends start as experiments with smaller sites, the big players can really shape what gets popular (or not).

The example of Apple moving to icons with more shadows and gradients is a prime example. We’ve been seeing more of these elements creeping in for a while, but this style is about to get very big again.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Source de l’article sur

Un rapport d’analystes affirme qu’Apple se prépare à dévoiler de nouveaux iPhone, iPad Pro, un Mac Mini et bien plus encore d’ici la fin de l’année. En attendant, Apple a renouvelé l’architecture matérielle des MacBook Pro 13 et 15 pouces.
Source de l’article sur ZDNet

Les possesseurs de différents produits Apple (iPhone, Apple Watch et AirPod) pourraient recharger simultanément leurs terminaux en septembre grâce au pad AirPower du constructeur.
Source de l’article sur ZDNet

La semaine dernière, Apple a mis en place le mode USB restreint qui ferme l’accès aux données via le port Lightning d’un iPhone si le téléphone n’a pas été déverrouillé depuis une heure.
Source de l’article sur ZDNet

Apple est désormais proche de devenir la première firme américaine à afficher une capitalisation boursière de 1.000 milliards de dollars. Amazon, Alphabet (Google) et Microsoft sont aussi en course. Et alors ?
Source de l’article sur ZDNet

A la WWDC 2018, pour chaque fonctionnalité qui essayait de vous aider à utiliser moins votre téléphone, il y en avait au moins une qui vous incitait à l’utiliser davantage.
Source de l’article sur ZDNet