Articles

Some of the changes we are seeing with where we work are starting to pop up in the type of new tools made for designers and developers. More tools with remote collaboration as a key feature are increasing in popularity. (You’ll find a few of those here.)

Here’s what new for designers this month.

Webdesign Toolbox

Webdesign Toolbox is a collection of tools, apps, and resources all in one location for designers and developers. The best part of this resource is that it is human-curated, so every tool is quality checked and makes the list because it has been tested and researched. Search the collection by design, dev, stock, typography, UX, or workflow tools (and more) and use them to help create more efficiently. The collection is constantly growing, too.

CodeStream

CodeStream might be the new-world workflow tool for web designers and developers. It is made for remote teams to review code right inside your IDE without breaking from development flow. You can post and review changes and comments are all independent of the code itself, even though they link to it.

Litur

Litur is a color management app for iOS. Use it to find and collect color swatches, create custom palettes, and even check color combinations against accessibility standards. The app can even generate color codes for you from swatches you find from a photo or image upload or create. The app works on mobile and desktop Mac devices and is a paid app.

Editor X

Editor X, which is still in beta, is a website building tool that combines advanced design and prototyping capabilities with secure web hosting and integrated business solutions. Go from an idea straight to production in a highly intuitive design workspace. The best feature might be exact design precision tools.

Grid Cheatsheet

Grid Cheatsheet is a visual and code-based set of “cheats” based on the W3C CSS Grid Specifications. What’s nice is it makes these guidelines easier to understand and use if reading through them makes you a little uneasy.

Tutorialist

Tutorialist brings together some of the best development tutorials on the web. All of the tutorials are free videos available on YouTube, and this project collects them all in one place.

Pure CSS Halftone Portrait from JPG

Pure CSS Halftone Portrait from JPG is a beautiful pen from Ana Tudor that shows how to change the visual representation of an image. The examples are brilliant and in true halftone fashion. The code snippet works with color, or black and white images as well.

VoiceText for Slack

VoiceText for Slack is another work from home productivity tool. Integrate it with Slack and send messages with text that’s transcribed right in your channels. It’s a free integration and supports 18 languages.

Feature Peek

Feature Peek is a developer tool that helps you get frontend staging environments on demand and gather team feedback earlier in the development process. It’s made for use with GitHub and works with a variety of other tools as well.

Formbutton

Formbutton is a simple and customizable pop-up form. (And we all know websites have plenty of them right now.) It connects to other services you already use, such as Google Sheets and MailChimp, and is simple to set up.

Blocksy Theme

Blocksy is a WordPress theme that’s made for non-coders. It’s a zippy and highly visual theme made for Gutenberg. It works with other builders and allows the user to customize pretty much everything visually. (There’s even a dark mode.) The theme is packed with tools and options and is a free download.

Oh My Startup Illustrations

Oh My Startup Illustrations is a set of vector illustrations in several categories featuring a popular style on many projects. Use the characters and scenes to create a semi-custom story for your startup project.

1mb

1mb is a code editor and host where you can create a static website with a custom domain and SSL included. The editor works in-browser and everything is saved in the cloud.

Linear

Linear is an issue tracking Mac app for teams. It’s designed to help streamline software projects, sprints, and tasks, and can integrate with standard tools such as Github, Figma, and Slack.

Hosting Checker

Hosting Checker solves a common issue – a client wants you to work on their website, but has no idea who hosts it. Hosting Checker shows the user hosting provider and IP address the website uses, along with where its server computers are located and the host’s contact details. It also claims to be 82% faster than other similar tools.

Spike

Spike alerts you to website incidents before customers. Create alerts and get a phone call, text message, email, or Slack notification right away. The tool provides unlimited alerts and integrations to you can stay on top of issues before they become real problems.

Magnus UI

Magnus UI is a framework that helps you building consistent user interfaces in React. It comes with plenty of components ready to use and you can customize the theme.

SpreadSimple

SpreadSimple uses data in Google Sheets to create styled websites with features such as filtering, search, sorting, cart, order collection via forms, and much more. Update the sheet and instantly see changes on the website.

WebP vs. JPEG

Google is starting to suggest using it’s WebP image format to decrease load times, because of the lighter file size. But is WebP better than the traditional JPEG? Developer Johannes Siipola tested the file types at different sizes to answer the question. The answer is a bit complicated, but sometimes it might be better; read the full analysis for more.

Oh Dear

Oh Dear is a website monitoring tool that can help you keep a check on websites. Monitor uptime, SSL certificates, broken links, and more with notifications that come right to you if there’s an issue.

Airconnect

Airconnect is a Zoom video conferencing alternative that you can use for your brand with a custom header, colors, and portal for clients. The tool includes video calling as well as the ability for customers to access their data and automate your onboarding process.

Free Faces

Free Faces is a curated collection of free typefaces that you can browse and use in projects. Search by type style with visual results that include a download link.

All the Roll

All the Roll is a fun novelty font for just the right type of project. It includes 167 characters with swash characters that can be added before or after certain letters.

Backrush

Backrush is a handwriting-style typeface with easy strokes and a pen-like feel. It includes thicker letterforms with nice swashes and a full character set.

Thuner

Thuner is a slab display font with interesting quirks. It’s made for larger than life designs. It includes a full uppercase character set and numerals.

Source


Source de l’article sur Webdesignerdepot

Web design clients come from a wide variety of backgrounds. One day, you’ll be designing a portfolio website for a voiceover artist, the next you’ll be creating a comprehensive ecommerce site for a leading retailer. In an ideal world, you’ll get to a point where you eventually specialize in a niche. However, you’ll need to master both avenues first.

The more time you spend in this industry, the more you’ll learn that every client comes with their own unique requirements and challenges to consider. However, there’s a particularly huge divide between the kind of web design projects you do for B2B clients, and the ones you do for B2C customers.

Both B2B (Business to Business) and B2C (Business to Consumer) websites need to be clear, concise, and aesthetically pleasing. They should always have a strong focus on user experience, and they need to work consistently across devices. However, being aware of the difference between B2B and B2C projects will help you to deliver better results to your customers.

Defining the Differences Between B2B and B2C Sites

Some web design trends remain consistent in any environment.

Whether you’re creating a site for a hairdresser, or a leading SaaS company, you’ll need to deliver responsive design, intuitive navigation, and excellent site security.

Your process is unlikely to differ from B2B to B2C much in terms of project milestones, phases, prototyping and wire-framing. The differences that arise between B2B and B2C projects often come in the approach you take to building certain elements.

Let’s take a closer look at the things you might need to consider:

1. The Target Audience

In any design project, it’s always important to keep the end customer in mind. Knowing your client’s target audience will help you to create both an image and a tone of voice that appeals to the right people.

B2B Websites

With B2B websites, you’ll be speaking to a range of highly-educated individuals who already have a general knowledge of your service. The aim here will be to show the end-user how you can help them achieve better results. For instance, m.io highlights “syncing communication” so you can “effortlessly chat” with your team.

The language and content of the website is all about highlighting the key benefits of the products, and the kind of outcomes that they can deliver. The Nielsen Norman Group reports that there’s often a lot of discussion between decision-makers when they’re checking out a B2B website.  

Designers need to work harder at convincing B2B buyers that they’re making the right decision. This is particularly true when you’re selling something like a software subscription that requires a lot of long—term investment.

B2C Websites

On the other hand, while B2B customers make decisions based on logic, information, and well-explained benefits, B2C customers are more influenced by emotion. They want quick solutions to their problems, and the opportunity to purchase from a brand that “understands” them.

Look at the Firebox website, for instance. It instantly highlights an ongoing sale at the top of the homepage, addressing any concerns a customer might have about price. That combined with a quirky layout full of authentic photos and bright colors means that customers are more inclined to take action.

2. The Purpose

Another factor that can vary from B2C to B2B websites, is the motive behind a customer’s purchase. Knowing what’s pushing a target audience to interact with a brand will help you to create a website that appeals to specific goals.

B2B Websites

B2B websites often aim to solve expensive and time-consuming problems for companies. To sell a decision-maker on the validity of a solution, it’s important to thoroughly explain what the solution is, how it works, and how it addressees a specific pain point.

Look at the Zoom website for instance, they don’t just tell people that they offer video conferencing, they address the practical applications of the platform:

B2C Websites

Consumers are a lot easier to appeal to in terms of emotional impact, because many of them come to a website looking to fulfill an urgent need. Because of this, many web designers can take advantage of things like urgency and demand to encourage conversions. For instance, look at this website from TravelZoo. It takes advantage of a customer’s desire to get away:

A B2B website needs to focus on providing information that helps companies to make more confident decisions. What’s more, with B2B sites, decisions are often made by several stakeholders, while B2C sites ask a single person to make a choice. A B2C website needs to address immediate concerns and connect with customers on an emotional level. B2C buyers still want to do their research on products or services, but the turnaround is much quicker, and often requires less information.

3. The Design Elements (Visual Appearance)

Just as the focus of your website design and the audience that you’re creating the experience for can differ from B2B to B2C websites, the visual elements of the design might change too.

B2B Websites

In most cases, B2B websites are all about presenting a highly professional and respectable image. You’ll notice a lot of safe and clear choices when it comes to typography and imagery. It’s unusual to see a B2B website that takes risks with things like illustrations and animations.

Look at the Green Geeks website for instance. Everything is laid out to encourage clarity and understanding. Information is easy to find, and there are no other issues that might distract a customer.

B2C Websites

On the other hand, B2C websites can be a little more daring. With so many different options to choose from, and most customers buying out of a sense of urgency or sudden demand, designers are under pressure to capture attention quick. This means that it’s much more likely to see large pieces of eye-catching imagery on B2C sites, with very little text.

Movement, like slideshows and animations often play more of a role here. Additionally, there’s a good chance that you’ll be able to experiment more aggressively with color. Take a look at the Yotel website, for instance. There’s very little textual information here, but the appeal of the website is conveyed through sliding images:

4. Website Content

The way that information is conveyed on a B2B website is very different to the messages portrayed on a B2C site. Usually, everything from the language, to the amount of content that you use for these projects will differ drastically.

B2B Websites

When designing for a B2B website, you’ll need to be careful with content, as you’ll be speaking to a very mixed audience. If your site caters to different industries, you’ll need to ensure that you show authority, without using too much jargon. Some companies even create different pages on their site for specific customers. The aspin.co.uk website covers the benefits from a company, sale and integration perspective:

Rather than try to talk to all business owners about their differing communication pains, G-Suite anticipates its audience and creates pages for each.

B2C Websites

Alternatively, B2C websites can make things a little simpler. For instance, on glossybox.co.uk, there’s no need to provide a ton of information for different types of shopper, designers can appeal to one audience, i.e. the “beauty addict”:

In both B2B and B2C websites, the aim of the content should always be to answer any questions that the end user might have.

5. CTA Buttons

Call to Action buttons are often a crucial part of the web design journey. However, it’s sometimes difficult to determine where they should be placed, or how many buttons you need.

B2B Websites

Because the decision to buy something won’t always happen immediately with a B2B website, these kinds of sites often use a variety of CTAs. For instance, you might have a “Request a Quote” button at the top of a page, as well as a Sign in button.

On the Klaviyo site, for instance, you can request a demo, sign up or log in:

You can place CTAs lower on the page with B2B websites too, as it’s more likely that your customers will be scrolling through the site to collect more information before they decide to buy.

B2C Websites

On the other hand, with B2C websites, you usually don’t need to give your visitors as many options. A single option to “Add to Cart”, or perhaps an extra choice to “Add to Favorites” is all your user will need. Customers need to instantly see what they need to do next as soon as they arrive on a page:

On the Evil Hair website, you immediately see how to add a product to your cart.

Remember, the sales process is a lot quicker with B2C customers. This means that you need your CTA buttons to be front and center as soon as someone clicks on a page.

6. Contact Forms

In a similar vein, the way that you design your contact forms will also depend on the end-user that the website wants to appeal to. There’s a very different process for getting in touch on a B2B website, compared to a B2C site.

B2B Websites

B2B websites often require longer contact forms, as clients need to collect additional information about a prospect’s position in a company, and what that company does. B2B companies need to share things like what they’re looking for in a service, and how many users they have, so a sales team knows what kind of demonstration to give.

As with any strategy for contact form design, you should always only include the fields that your client needs and no more. If you demand too much from any client, you could send them running in the opposite direction. Check out this straightforward option from Ironpaper, for instance:

The form addresses as many relevant questions as possible without overwhelming the customer. Because the site handles things like design, it makes sense that they would ask for a link to the company’s existing website.

B2C Websites

On a B2C website, there are very different approaches to contact forms. You may have a dedicated contact form on your website where people can get in touch if they have any questions. A FAQ page where customers can serve themselves is another great way to help your client stand out from the competition. Check out this option from River Island, for instance:

On the other hand, you might implement pop-up contact forms into a website if your client wants to collect emails for email marketing. In that case, it’s important to make sure that you’re only asking for the information you need, and nothing more.

The easier it is to sign up for a newsletter, the more likely it is that customers will do it. Being able to enter their name and email address and nothing else will make the signup seem less tasking.

7. Search Bars and Navigation

Whether you’re designing for B2B or B2C companies, navigation will always be a critical concern. End users need to find it easy to track down the information that they need about a company, whether they’re looking for a particular product or a blog.

B2B Websites

On a B2B website, the search bar often takes up a lot less prominence than it does on a B2C site. That’s because all of the information that a client needs, and the buttons they need to take their next steps, are already visible front-and-center.

As a designer, it will be your job to push as many people to convert as possible, by making the purchasing journey the most appealing path for visitors. For instance, on the Copper website, the “Try Free” buttons are much easier to see than “Continue with Google” or “Login”:

With B2B sites, the focus is on a very specific goal. Although navigation still needs to be available, it doesn’t need to be as obvious as it is on a B2C site.

B2C Websites

On the other hand, most B2C websites offer a wide range of products, and they’re perfectly happy for their customers to purchase anything, as long as they eventually convert. Because of this, they make navigation a much more significant part of the customer journey.

The search bar is often presented at the very top of the screen where customers can see it immediately. Additionally, there may be multiple pages within certain product categories, so that customers can browse through the items they’re most interested in. For instance, look at the homepage on the IWoot website:

The navigation elements in B2C websites need to be a lot more obvious, because consumers are more likely to use them when they’re searching through their options.

8. Social Proof and Testimonials

Finally, social proof is one of the things that will work well for improving conversions on any kind of website. When your customers aren’t sure whether or not they should buy from you, a review or testimonial could be just the thing to push them over the edge.

B2B Websites

On a B2B website, the decision-making process takes a lot longer. Because of this, it’s worth including as much social proof as possible in every part of the website. Client testimonials, reviews and ratings, and even high-profile company logos make all the difference. Many B2B websites include a page dedicated to case studies highlighting the success of other brands.

Your client might even go as far as to ask for a page that highlights their awards and recognition or showcases comparison tables that pit their products against the competition.

For instance, Authority Hacker has a “what the pros say about us” section as social proof:

B2C Websites

With a consumer website, you can include consumer ratings and reviews wherever you like. However, it’s most likely that you’ll want to have a place where customers can see the reviews of other clients on the product pages themselves. On the EMP website the company gives users the option to click on the star review section to jump to a different space on the page where testimonials are listed. This ensures that customers don’t have to scroll through a lot of excess information if they just want to add an item straight to their cart.

Designing for B2B vs B2C

In the world of web design, no two customers are ever the same. While you’ll need to adapt your processes to suit each customer you interact with, you can set your expectations in advance by learning the differences between B2B and B2C strategies.

 

Featured images by Chris Ross Harris and Mike Kononov.

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

Attention is the new gold; brands are in a constant competition for our attention.

A big portion of our time we spend online, where we are bombarded with insane amounts of information and advertisements. It’s hard not to become overwhelmed in this world of consumerism. We have had to become good at quickly evaluating which information is important, especially on the internet.

Good marketing specialists know that they have mere seconds to turn a potential customer into a lead. People are not going to spend a lot of time examining your advertisement or landing page, either it clicks or not. Moreover, most users do not read the articles, they scan them. First impression plays a huge role in the success of your business, so do not leave that to a chance.

You really don’t want your customer to ignore that special sale, subscription option, or another call to action on your webpage. That is why you need to know where that gold-worthy attention goes when a user opens your landing page. Here’s where technology can come in handy.

Eye-Tracking in Web Design

It is very important to know where your website visitor’s attention goes first. How to get that info? Eye-tracking is the answer.

Eye-tracking technology can be used to optimize your website conversions. By tracking eye movements, technology will recognize which content is most intriguing for the users. It will reveal whether people pay most attention where you want them to, which elements are distracting or not visible enough, and where sales are lost. This information is invaluable if you want to succeed in the current market.

This information is invaluable if you want to succeed in the current market

How does it work? An eye tracker, such as webcam or goggles, measures movement of an eye. Collected data is analyzed and presented as a heatmap, highlighting which elements of your design attract most attention. Having in mind that browsing time rarely exceeds a few seconds, this information is very valuable when you try to understand your audience.

You wouldn’t want to spend much time on your website design just to discover it does not generate desired conversion rate. By employing this technology you can make changes based on reliable data rather than intuition and guarantee your business future success.

By now you may think that you definitely need to carry out this eye-tracking study, but there is a catch. A high-quality behavioral observation or eye-tracking is a time-consuming, budget eating complicated process.

If you want to draw conclusions from heatmaps, you would need to include at least 39 participants in a study. One individual test may last from 20 minutes to an hour. Time quickly adds up when you include preparation and analysis of the results. The average eye tracker price is around $17,500 and it may vary between several thousand dollars and $50 000. Of course you can hire a company to carry out this research for you but it may cost you several hundred dollars a month. Luckily, technological innovations allow us to acquire the same insights about users’ attention flow much cheaper and faster than conducting or buying an actual eye-tracking study.

Technological innovations replace real eye-tracking study

AI-Powered Automatization of Eye-Tracking

In this task of understanding how internet users are interacting with your website, Artificial Intelligence (AI) seems to be an answer. AI-based technologies already have become prevalent in various services we use on a daily basis. For example, Netflix’s highly predictive algorithm offers viewers personalized movie recommendations. Medical researchers utilize eye tracking to diagnose conditions like Alzheimer’s disease or Autism. As these algorithms become better every year, AI also becomes an irreplaceable tool in business.

Over the years researchers have collected so much data that human behavior becomes really predictable

How can AI help you to understand your customer’s attention? The main feature of AI is that it can mimic human intelligence and constantly improve itself by learning from data. Predictive eye-tracking is based on deep learning and trained with previous eye tracking study data. Over the years researchers have collected so much data that human behavior becomes really predictable. Technology predicts which specific areas of your website attract most interest. In this way, AI enables you to speed up the UX research process and get insights about your design in a matter of seconds.

Too good to be true? There are already several available tools on the market, such as Attention Insight or EyeQuant. These predictive design tools are based on deep learning and trained with previous eye-tracking studies data. Up to date, they have achieved an 84-90% accuracy.

AI-powered attention heatmap

AI solutions for designers and marketers have already become major competitors to traditional eye-tracking studies. Due to active competition, predictive eye-tracking tools are constantly innovating and recently started generating heatmaps for videos. Another useful feature that provides decision-makers with quantitative data is a percentage of attention. Users can define an object that they want to test and get an exact percentage of attention that the object receives.

Conclusion

Since all digital products are competing for user’s limited attention, it has become one of the most valuable resources. Due to fierce competition, it is not enough to rely on your intuition and gut instinct while making important decisions anymore. Designers have a choice in this economy of attention, though.

Yes, there are eye-tracking studies that require a significant amount of time and financial resources.

However, you can make user-centric, data-driven decisions in a quick, scalable, and private way while your product is still under development. AI-powered predictive eye-tracking tools might be an answer. Attention is a new currency, and you must measure it.

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

If we don’t question this kind of design homogenization, do we put ourselves at risk of perpetuating the same mistakes in the years to come? Or is it even a mistake to begin with?

Today, I’m going to look at four things that are likely causing this, and what you can do to break the mold.

1. Education

We used to have a design school in every city in the world, each with its own design style or, at the very least, the encouragement of its designers to be creative and come up with something new.

These days, though, traditional design education isn’t as popular as it once was. According to Design Census 2019, only about a third of working designers have a formal education and degree:

The rest have been trained through a variety of means:

  • Online learning (17%)
  • Self taught (12%)
  • Workshops (10%)
  • Mentorship (6%)
  • Certificate programs (4%)

Cost and convenience are definitely two factors influencing this shift towards online learning methods. And with a wealth of resources online to teach them how to design and code, why not go that route? Plus, designers have to keep learning new things in order to remain competitive, so it’s not as though a degree is the be-all and end-all of their design training.

Plus, there isn’t as much demand for it from employers. Unless you plan on working for one of the top global marketing agencies, many hiring companies just want to see proof in the form of a portfolio and maybe have you do a test job.

Now, I’m not saying that online courses and other informal design education don’t foster creativity. However, in order to make them cost-efficient and quick to get through, they have to focus on teaching essential best practices, which means less room for experimentation. Perhaps more importantly, their curriculums are guided by fewer voices. So, this could likely be one of the culprits.

2. Design Blogs and Vlogs

You have to wonder if all the design blogs out there (yes, like Webdesigner Depot) impair designers’ ability to break free from the homogeneity of websites.

I think the answer to that is both “yes,” and “no”.

Why, Yes?

What is the purpose of a web design blog? Mainly it’s to educate new and existing designers on best practices, new trends, and web standards.

By their very nature, they really should be teaching web designers the same kinds of things. Let me show you an example.

This is a Google search for “web design trends 2020”:

Most design blogs will publish trends predictions around January 1. And herein lies the problem. The writers/designers can only deviate so far from what we know to be true when writing on the same topic… so these sites end up with similar recommendations.

For instance, the top search results recommended similar things for 2020:

  • Dark mode
  • Hand-drawn illustrations
  • Immersive 3D
  • Glowing colors
  • Minimalist navigation
  • Geometric shapes
  • Inclusivity
  • Accessibility

When web designers receive the same guidance no matter where they turn, it’s only logical that they’d end up creating websites that adhere to those same practices.

Why, No?

Because I write for web design publications, I can tell you that there’s a big difference in the kinds of content some of them publish.

For instance, I find that WebDesigner Depot isn’t interested in rehashing what everyone else is writing about this month. We’re given topics that challenge us to think outside the box and present readers with meaningful insights and recommendations.

So, I think that finding design blogs that push the boundaries and don’t just want to recap what everyone else is saying is really important. That’s how web designers are going to master the basic skills they need to succeed while getting inspired to try new things.

3. Designs Tools and Frameworks

This is another one that’s not as cut and dried. I think it depends on the tools used and the intent to use them.

Where Issues Start to Arise

There are certain site builder solutions that you’re going to be hard-pressed to create something innovative with. The same goes with using templates from sources like Dribbble. It’s just the nature of the beast.

If your goal is to create a cheap website very quickly for a client, then you’re probably going to use a cheap builder to do so. With ready-made templates and a lot of the work already done for you, you can create something that looks good with little effort.

When you’re limited by time and cost, of course you’re going to rely on shortcuts like cheap site builders or boring (but professional) design templates.

How to be More Careful

You can run into these kinds of issues with more flexible content management systems like WordPress or frameworks like Bootstrap, too.

Whenever you rely heavily on ready-made templates, pre-defined styles, or pre-built components, you run the risk of someone else’s work informing your own.

The solution is simple: Use demos, templates, UI kits, and so on as a base. Let them lay down the foundation that you work from.

But if you want your website to look different from the sea of lookalikes, you’re going to have to spend much more time developing a unique visual style that’s equally as effective in its mission. Which also means moving beyond clients that have small budgets or low expectations.

4. User Data

Data gathering is an important part of the job you do as a web designer.

You research the target user (or the existing user, when applicable). You look at industry trends as well as the competition to formulate an idea of what you need to build and how you’re going to do it. And you also use resources like Nielsen Norman Group and Think with Google that put out definitive research on what users want.

Even with the most niche of audiences, consumers’ wants and needs are all basically the same. So, obviously, you have to design experiences that align with them. If you deviate too much from what they expect from your site or brand, you run the risk of creating too much friction.

Is This a Bad Thing?

It’s not in terms of usability. If we build simple, predictable and user-friendly interfaces based on data that successfully drive visitors to convert, that’s great. So long as the content remains strong and the UI attractive, there’s nothing wrong with that approach.

But…

This is the same issue presented by templates and site builders. If you do exactly what’s needed and not much more, your site is going to look and act just like everyone else’s. Which comes at the cost of your brand reputation.

Just look at Google’s Material Design. This design system may have made it easier for web and app designers to create new solutions that were user-friendly and responsive, but there was just too much spelled out. And this led to a slew of Material Design lookalikes everywhere you turned.

This is the whole reason why companies take the time to craft a unique selling proposition. Without a USP, brands become interchangeable in the eyes of consumers.

So, again, my suggestion here is to use data to formulate a strategy for building your website. But don’t forget to spend time adding a unique style, and voice of the brand to the site.

Wrap-Up

It seems like, despite all that we’ve learned to do, websites are becoming less and less diverse in terms of design. And I think a lot of that is due to the fact that it’s much easier to design websites today than it was ten, or even five years ago.

Modern-day education, resources, tools, and consumer data take a lot of the questions and the work out of building websites. Which is good… but only to a point.

Unless you’re building websites for clients who have absolutely no budget, you can’t afford to skimp on the creativity and personalization that will set their website apart. Yes, you need to adhere to tried-and-true practices and standards, but beyond that, you should be experimenting.

 

Featured image uses photo by Kari Shea.

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

Née de la crise sanitaire, la jeune startup Bretonne Aumenu fait confiance à la solution SAP Business One pour se développer rapidement et proposer aux restaurateurs une alternative cloud au traditionnel menu papier. L’objectif : accompagner les restaurateurs pour les aider à respecter et appliquer des conditions sanitaires strictes et sans danger pour leurs clients.

Une solution en kit 100% cloud prête à l’emploi pour le restaurateur

Aumenu fournit un support physique et digital permettant de remplacer les cartes par un menu consultable sur smartphone via la lecture de QR codes pour éviter les risques de contamination. Ces codes sont présents sur des étiquettes autocollantes, adhésives, lavables et résistantes qui sont positionnées sur les tables des restaurants.

Le restaurateur choisit son kit en fonction du nombre d’espaces qu’il souhaite équiper puis active son compte lui donnant accès à sa plate-forme où il peut déposer ses fichiers pdf, word, powerpoint, excel pour mettre en ligne ses menus et accéder aux informations de ses clients. Avec 25% des utilisateurs qui laissent leurs e-mails en scannant le QR code, Aumenu, avec SAP Business One, permet aux restaurateurs d’acquérir et de constituer très rapidement une importante base de données. Cette dernière a un impact immédiat sur le business mais aussi sur la relation client.

Être opérationnelle dès l’ouverture des bars et des restaurants

Avec le plan de déconfinement progressif, la startup Aumenu avait pour enjeu principal d’être opérationnelle très rapidement et de pouvoir livrer partout en France. Elle souhaitait pour cela se munir d’une solution cloud complète qui lui permette de gérer toute son activité : CRM, prise de commande, facturation, production des menus digitaux, livraison etc. La solution devait également être capable de supporter la croissance de la startup, et notamment s’ouvrir à l’international.

Accompagné par W3COM, Aumenu a choisi SAP Business One, une solution cloud complète conçue spécifiquement pour les besoins des TPE/PME. Celle-ci centralise en effet dans un seul système toutes les activités de l’entreprise, leur permettant de gagner du temps et de booster leur croissance. Elle compte de nombreux avantages qui ont su répondre aux attentes de la startup : une personnalisation grâce à des solutions métiers adaptées à l’activité du client, une flexibilité et un accompagnement évolutif pour s’adapter à la croissance de la structure, une très grande simplicité d’utilisation pour une prise en main rapide et un accès à toutes ses informations en temps réel pour une grande réactivité et flexibilité.

SAP Business One pour s’étendre rapidement à l’international

La solution offre déjà plusieurs bénéfices à la startup. L‘évolutivité de la plateforme permet une production et un déploiement des étiquettes partout en France mais aussi dans le monde. Ainsi, Aumenu peut s’internationaliser très rapidement et facilement. Les données sont également collectées d’une façon très structurée et peuvent engendrer des effets de levier importants. Enfin, les services additionnels à valeur ajoutée pourront facilement être complétés à ces données et process existants.

Aujourd’hui, la startup doit s’adapter à la période de déconfinement et proposer aux restaurateurs une solution toujours plus satisfaisante et adéquate à la situation. Le challenge est de généraliser et de normaliser la solution d’Aumenu dans les 16 millions de restaurants à travers le monde.

« SAP Business One est au cœur du service fourni par notre startup. La solution nous a permis de nous développer en seulement 15 jours : un vrai record ! Il était évident qu’un tel projet devait s’appuyer sur un ERP solide, de bonne réputation avec l’agilité de son ouverture vers le web, la technologie HANA et l’accès en Hosted by SAP », explique Caroline Guerizec, cofondatrice de Aumenu.

The post La startup Aumenu choisit SAP Business One pour permettre aux restaurants de rouvrir leurs portes dans les meilleures conditions sanitaires appeared first on SAP France News.

Source de l’article sur sap.com

Web developers have been the bedrock of any company’s business strategy for some time, and the industry is continuing to thrive and grow at a rapid pace. This is why it’s surprising that it is so lacklustre when it comes to diversity.

A recent study revealed 80% of those in the design industry are male, and more specifically 79% within the field of web design. According to WISE, just 23% of the people working in STEM roles (Science, Technology, Engineering and Maths) are female and women currently account for just 15.8% of the UK’s current generation of engineering and technology graduates.

Why the Lack of Diversity in Web Design?

The main reason for this, as cited by the Organisation for Economic Co-operation and Development (OECD) found that women still lack the confidence to pursue these careers, despite their school results being as good as (or better) than their male counterparts. Research has found that the professional and technical services sector has the fourth-highest gender pay gap of all UK industries. If more women were to join these higher-paid sectors it could help reduce the gender pay gap as a whole, as well as help female economic empowerment.

This division is seen in ethnic minority groups too. The numbers for BAME (Black, Asian, Minority Ethnic) employees in the British tech industry are unknown but is estimated by the British Computer Society to be at 1-2%, a ridiculously low number in this day and age. This is why groups and organisations are cropping up designed to promote an industry that reflects all of society rather than one part of it. Here are some of the organisations to pay attention to who are bridging the diversity gaps in web design.

Girls Who Code

Girls Who Code are working to create opportunities for women within tech, aiming to deepen their computer science skills and confidence. They run a range of programs designed to equip women with the necessary computing skills to pursue opportunities in the field and to give chances that are often shunned due to society. Founder Saujani states that women are socialized to seek perfection, and this is something that needs to be overcome. One way to break that mentality at an early age, she says, is coding:

[Girls] walk into these classrooms and they feel like they will never be good at it, and when they learn how to create something, whether it’s a website or app, it changes their mindset and they stop giving up

Adobe Design Circle

Adobe Design Circle is another initiative aiming to introduce all members of society to design. They want to create more visibility for design as a viable career path for anyone that might be considering it, and to help with youth entering the field. This is opening the opportunities of working in tech and web to aspiring designers at a young age who aren’t necessarily yet conditioned by the pressures of society and showing them it can be a realistic career path.

They have their own scholarships and mentoring initiative to support these goals too. The faces behind the team of Adobe Design Circle range through multiple ethnicities and have a fairly even male-female divide. This equal representation alone is inspiring. One of Adobe’s core missions is to offer youth the opportunity to learn and express themselves through creativity and technology, regardless of their economic or cultural backgrounds. With this they specifically encourage applicants of all backgrounds to apply and offer many other opportunities from mentoring to internships.

Ladies that UX

Ladies that UX are a collaborative community of women in UX aiming to “support each other, push the UX boundaries and promote female skill and talent.” It is a European-based initiative where each city involved runs slightly different events and groups decide together what they would like to get from their meetups. They assist each other with UX challenges, discuss topics, and brainstorm ideas. Ladies that UX was created in 2013 by Georgie Bottomley and Lizzie Dyson with the aim of bringing together women in the industry, offering support and creating connections around the world.

Xuntos

Xuntos is aiming to create the largest community of ambitious and talented individuals from under-represented groups in the technology industry. It works to nurture university students and recent graduates that are often overlooked in the tech industry by the means of educational workshops, university hubs, events and an active community. The very name “Xuntos” is a Galician word which means “together” and this is their most important factor. They want people to realise they are not alone and just because the representation isn’t there, doesn’t mean their capabilities aren’t.

Colorintech

Colorintech is a non-profit organisation that was founded in 2016. It aims to close the gap and shorten the learning curve, with a strong community designed to help each other. The company was founded by Silicon Valley tech executive Dion McKenzie and ex-Googler Ashleigh Ainsley after they became frustrated at the few black individuals in the field. Since its inception 30,000 students, professionals, volunteers and tech companies have been impacted by their work, and over 450 minorities graduated from their programs in 2019 alone.

UKBlackTech

UKBlackTech are on a mission to create the most diverse tech sector in the world. Their aim is to encourage more ethnic minorities to enter the UK’s technology workforce and make an impact. To help with this, they design and implement different initiatives to help them get employed and retain employment, put on bespoke events that target aspects such as specific job roles or tech topics and promote different opportunities for members to apply to.

Witty Careers

Witty Careers was created with the aim to support women from black and ethnic minority backgrounds in the UK and equip them with the skills to build a career in the tech industry. They run different practical skills workshops and events which in the past have included visits to a Microsoft store, Uber, and Pivotal. They open doors for communications, networking and future career prospects for those in the minority. They also have a handy range of resources designed to help you get into the career you want. From CV writing advice to industry insights, they are all free of charge.

Featured image via Unsplash.

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

You’ve been working away at your latest design project, and the client has given the go-ahead on your lovingly created digital concepts. Now it’s time to bring those designs to life, and you have a developer queued up to do just that.

So your part’s done, right? Not quite. You’re going to want to make sure your developer has the best head start they can in order to create the site as you imagined.

Below are a few tips to make that handover process a little easier.

Communicate to Make It Great

Get Talking

Scheduling a face-to-face meeting with your developer to talk over your project’s specifics and ambitions will help align your expectations and make the intent behind your concepts more clear. It’s quite likely they’ll even ask questions and request assets you haven’t even thought of yet!

It’s not just a one-and-done thing either, your developer’s going to have questions or requirements that arise as the project progresses. Deciding on a communication channel to allow easy discussion will help you both immensely.

Annotating Your Concepts

Developers might seem like magicians with the way they bring your websites to life, but they’re not clairvoyant! Annotating your concepts where advanced functionality is required reduces ambiguity and makes it more likely that your cool, quirky idea is going to make it to production. If it’s a feature that’s particularly unusual, you might want to find an example of a website or code sandbox that does something similar.

An example of Figma’s comment tool in use to make developer notes.

Figma and Sketch both have comment functionality in order to make annotations a little easier, also allowing multiple parties to comment. If dealing with PDFs, there is also an annotation tool available through Adobe Acrobat.

Specify the Basics

The basis of modern front end development revolves around DRY thinking. Some might argue thinking about code can be pretty dry, but we’re not talking about that – in this case, DRY stands for Don’t Repeat Yourself.  Most developers will tackle a project by starting with defining variables: what colors, font sizes, grid columns… anything that can be reused! Good, consistent design follows this same principle – although it’s a habit that can be hard to get going at first.

Tip: It’s always easier to define variables if this mentality is approached towards the start of the project!  

Colors

Make a style guide that specifies the colors you’ve used in your designs. Think about their logical applications to help signpost how they might work as a variable – for example, what colors did you use for paragraph text, hyperlinks and backgrounds? Did you consider colors to convey status messaging, such as successes, warnings and errors?

Typefaces

Which fonts have you used for your project? Is there a consistent set of font sizes you used throughout? If you haven’t already, maybe consider a ratio-based type scale – I like to use ModularScale to help with this.

Basic HTML Elements

Think about general styling for these basic html tags:

  • Paragraphs <p>
  • Headings <h1–h6>
  • Bullet lists <ul> and numbered lists <ol>
  • Emphasized text <b>, <strong> and <em>

Buttons

How about buttons and links? What should they do when they’re hovered over, focused (using the tab key on a keyboard) or disabled?

Forms Fields and Inputs

What should form fields look like? Is there any validation checking that should occur when a form is submitted?  How about checkboxes and radio buttons?

It’s unlikely that you’re going to be able to cover absolutely every single eventuality – allow your developer to use some common sense to fill in the gaps, and be available to them if they have any questions. In the words of John Maxwell and your aunt’s home office wall sticker, teamwork makes the dream work.

Get Your Favic-on

Favicons are widely recognized as the small icon that appears to the left of the site title on your browser’s tab bar. Nowadays, the application of your site’s favicon is much further reaching, showing up in Google search results and app tiles. There’s also extra theming options available, such as the ability to customize the color of Google Chrome Android’s browser bar color for your site.

Using a generator site such as realfavicongenerator takes the pain out of much of this decision-making, allowing you to upload specific graphics as desired, creating silhouettes of your icon for Windows Metro tiles and macOS Safari pins, and packaging everything into easy-to-use files and code.

 Compress Your Images

Nobody wants to load a 20MB image when they’re on a slow connection or a data plan – it pays dividends to plan ahead and downsize your images so that they’re production-ready for the web. If you’re worried image compression is going to harm your image quality, fear not – you can go a long way with image compression before quality is seriously compromised.

  1. Start by reducing the image resolution – for batch jobs, I use Adobe Photoshop’s image processor script to downsize images to fit 1920 x 1200 pixels
  2. Alternatively, if you’re working on a static project – where specific images will be used only in specific places – you could use your design software (nearly all mainstream UI software allows you to do this now) to export your images at 2x size to support devices with high pixel densities.
  3. I also convert my image color profiles to SRGB to ensure consistency across most modern display types (this one’s optional)
  4. I then take my newly downsized images and run them through imageOptim at 80% quality. Generally I would aim to get my images under 300kb – if there are any that are still significantly over this target once compressed, I’d run these through again at 70% quality (I wouldn’t recommend going lower than this, though).

Don’t forget you can also do this for PNGs! Enabling PNGCrush in imageOptim will let you significantly reduce the size of PNGs… just be ready for it to take a while.

Make Your Vectors SVG-Easy to Use

If your design contains graphics or illustrations you created using vector software, it can be used on the web as an SVG file. Usually, these files will be a lot smaller than JPGs or PNGs. You can export graphics in most (if not all) vector software in this format.

Optionally, you could use imageOptim or SVGOMG to compress the SVG code without sacrificing quality. Your developer might already use a script that does this automatically when processing the site for production, so it may be worth asking ahead.

Get Your Licenses in Check

If you’re using premium fonts, make sure you’ve purchased a webfont license so you can hand over the correct files to the developer. I’d recommend doing this sooner rather than later – although not often, occasionally web versions of fonts can have slightly different bounding boxes to their desktop counterparts, making it a real pain for developers to work with further down the line.

If you’ve been using samples of stock photos (or if you’ve been going crazy lifting whatever you can find on Google Images), make sure everything is kosher before you go live. Make sure you purchase licensed photos, and if certain photos you want to use require attribution, make the developer aware of this.

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

Rosny-sous-Bois, ville dynamique de Seine Saint-Denis, anticipe les nombreuses transformations engendrées par le Grand Paris notamment sur son nombre d’habitants. Déjà desservie par le RER E, la commune de 45 000 habitants entrée dans la métropole du Grand Paris en 2016, verra s’ouvrir trois nouvelles stations de la ligne 11 en 2023, et une station de la future ligne 15 en 2025. Ainsi, la mairie anticipe sa croissance démographique pour devenir un ville phare de l’est parisien. Pour anticiper ces changements, le numérique est un atout du futur Rosny-sous-Bois. La ville a donc choisi la solution SAP Conversational AI pour accueillir au mieux ses futurs citoyens.

La mise en place d’un chatbot, première pierre vers une vocalisation des services de la ville

Depuis janvier 2019, un chatbot développé par la solution SAP Conversational AI fait office d’interface privilégiée avec les habitants de Rosny-sous-Bois. L’objectif est d’assurer un premier niveau de service public différenciant par rapport aux villes voisines en proposant un service simple d’utilisation capable de répondre aux questions des citoyens de la commune en 24/7.

« Nous avons choisi la solution SAP car elle était la seule à pouvoir couvrir l’ensemble de nos services. Son caractère langage agnostique nous permet également de prendre le tournant de la vocalisation des services. En effet, Nous souhaitions également pouvoir répondre en plusieurs langues pour répondre à des populations non-francophones et offrir des services publics de qualité pour tous les habitants », explique Menahd Ouchenir, Conseiller Municipal délégué à la ville numérique.

Une solution rapidement adoptée par les habitants de la ville

En l’espace d’un an, le chatbot de SAP est rentré dans le quotidien des habitants de la ville de Rosny-sous-Bois. Ils n’hésitent pas à lui poser des questions impactant leur quotidien : les jours de collecte des poubelles, les transports fonctionnant en période de grève, les services disponibles pendant le confinement ou encore les dates des élections municipales.

« Les habitants de la ville ont rapidement fait du chatbot un outil de leur vie quotidienne : nous comptabilisons maintenant 2 500 utilisateurs uniques par mois, 4,5 messages par utilisateur, un taux de compréhension de 74%, et un taux de précision de 0,878. Pendant la période de confinement, cela nous a permis de maintenir un lien supplémentaire avec les habitants de la ville et de répondre à leurs interrogations. En complément, le chatbot est un atout de communication et pousser les utilisateurs à aller vers les contenus du site. Cela nous permet donc d’aller plus loin dans notre rôle de service public », ajoute Menahd Ouchenir.

Améliorer constamment la solution pour accueillir les futures populations de la façon la plus efficace possible

Avec 300 intentions et 2 700 tournures de questions comprises par le chatbot, la solution proposée par SAP est largement opérationnelle. Toutefois, les équipes communication et événementiel de la mairie analysent constamment les questions posées par les habitants afin d’enregistrer de nouvelles tournures de phrases et de nouveaux sujets pour que l’IA les comprenne de manière optimale par la suite. L’objectif final est maintenant d’arriver à soulager les différents pôles de la mairie en déléguant l’ensemble des questions quotidiennes au chatbot, et ainsi faciliter l’emménagement des nouveaux rosnéens.

L’avantage de cette solution est sa capacité à adresser des périmètres et métiers hétérogènes, et ainsi de répondre à des questions sur un grand nombre de domaines.

« Le résultat de cette intégration à notre site web est très satisfaisant. Nous souhaitons à long terme enrichir notre socle de données technologiques grâce à SAP pour pouvoir nous diriger vers une vocalisation toujours plus sophistiquée », conclue Menahd Ouchenir.

The post La mairie de Rosny-sous-Bois utilise le chatbot de SAP pour converser avec ses habitants et anticiper sa croissance démographique appeared first on SAP France News.

Source de l’article sur sap.com