Articles

8 Design Secrets of B2B Vs B2C Websites

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

/par

Eye Vs AI: Harnessing Technology to Successfully Track User Attention

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

/par

Why Do Websites Look the Same (And Should We Care)?

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

/par

Diversity Initiatives in Web Design

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

/par

Show Them Your Assets – Tips for Handing Off Designs to Developers

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

/par

3 Essential Design Trends, July 2020

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

/par

A Simple HTTP Server in Java

,

Do you want to implement an HTTP server, but do you not want to take any risk of writing a full-fledged HTTP server? Developing an HTTP server with full capability is not a trivial task. But Java has got a solution to this kind of problem. Java supports an in-built HTTP server. By just writing 100 lines of code, we can develop a somewhat-decent HTTP server that can handle HTT$$anonymous$$ET and POST requests. We can also leverage it to handle other HTTP commands as well.

HTTPServer class

Java SDK provides an in-built server called HttpServer. This class belongs to com.sun.net   package. 

Source de l’article sur DZONE

/par