Articles

8 Easy Ways to Improve Your Website Typography in Under 30 Minutes

,

Typography is one of the most important elements of any site, having a measurably large impact on brand and experience.

So fundamental is it that making wholesale changes to your typography — opting for a new font, changing the measure, increasing leading — is complex and fraught with potential time-sinks.

But there are some simple changes that you can make to your typography that won’t break your grid and can be achieved in 30 minutes or less. Here are eight of the easiest.

1. Increase Color Contrast

When laying out text, it’s common for designers to see text as a block within a visual design. A designer’s relationship to text is very different from a user’s; a designer positions text as a shape, a user reads it line by line. Consequently, designers tend to underestimate the amount of contrast text requires.

Light grey text is aesthetically beautiful but functionally useless. Text is meant to be read and needs to meet WCAG AA standards on desktop and WCAG AAA standards on mobile — or in any situation with many ambient light sources. The larger the text is, the more leeway you have.

Text should be thoroughly tested for contrast, but as a starting point, 18px text on a white background should never be lighter than #595959.

2. Tighten Heading Spacing

The vast majority of typefaces are designed for use as body text — large blocks of running text, multiple lines long. When the font was made, it was spaced for this use.

Unlike running text, headings tend to be short and are surrounded by more whitespace — especially above and below. Extra whitespace visually floods the negative space in the word shapes and forces letters apart.

To compensate, tighten the letter-spacing and word-spacing of headings by 1–5%.

3. Loosen Non-Word Spacing

When we read, our brain doesn’t spell out words letter by letter; it recognizes word shapes and even word groups’ shapes.

Most micro-typography is concerned with not disrupting those word shapes. However, there are times when you do want to prevent words from forming and allow individual characters.

Loosen the letter-spacing on any text intended to be read as a series of characters, such as serial numbers, tracking codes, and tabular data.

4. Use System Fonts for Inputs

Privacy is a big issue for users. Anything you can do as a designer to reassure users their data is safe will increase your site’s positive UX.

Style your HTML inputs to use system fonts — the default fonts set by the OS your user is accessing the site with. This creates a clear delineation between the brand data in the brand fonts and the user’s data in the user’s fonts.

Using system fonts in this way encourages the user to feel ownership of their data, builds trust, and increases conversions.

5. Mark Paragraphs Once

Paragraphs of text need a visual indication that they have begun. There are three ways in which this is normally conveyed: following a heading, with a vertical space before the paragraph, or indenting the first line.

Each paragraph should use one of these indicators and one only. Due to the nature of web content and the benefits headings have for quickly scan-reading content, for most sites, the best choice is a combination of following a heading and vertical spacing.

6. Use Genuine Styles

For various reasons ranging from the availability of fonts to aggressive optimization, it’s common for sites to fake alternative styles using CSS. Italics can be faked as obliques with a skew, bold weights can be faked by using the browser’s defaults, and small caps can be faked by setting text to uppercase and reducing the font-size.

These tricks do more harm than good, creating distorted word shapes that interrupt the natural flow of text.

If you cannot deploy genuine italic, bold, and small caps, then don’t fake them. Find alternative ways of creating emphasis, such as changing colors.

7. Use the Correct Quotes

Apostrophes, single, and double-quotes are specific characters. Most fonts provide a glyph for them that is distinct from the quick single or double-quote key on your keyboard.

These quote marks are most commonly referred to as “smart” quotes because word-processing apps usually have the option to be “smart” about which glyphs they use.

Using the correct quotes is one of the simplest ways to deliver a refined piece of text.

8. Hyphenate Text Properly

Hyphenation is the breaking of a word over two lines. It allows a less extreme ragged-right text, and it is vital on mobile devices where the available page width is relatively small compared with desktop.

The web has surprisingly poor support for correct hyphenation, but it is gradually improving, and it can be applied as a progressive enhancement.

CSS allows you to set hyphenation to none (no hyphens), auto (the browser inserts automatically), and manual (in which you specify where hyphens should appear using the soft hyphen character).

Typographically, a hyphen may be inserted in any word that is five characters or longer; there must be at least two characters preceding the hyphen and at least three following the hyphen.

You should never hyphenate three consecutive lines of text, but addressing this requires JavaScript. You can minimize this problem by increasing your measure.

 

Featured image via Unsplash

Source

The post 8 Easy Ways to Improve Your Website Typography in Under 30 Minutes first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Should You Become a Web Designer in 2021?

,

If you’re here, then you’re thinking about becoming a web designer and wondering if it’s a smart move.

Honestly, it’s not uncommon to be plagued by doubts and what-ifs when making a big career change, and that’s especially so right now, what with all the uncertainty we’ve faced over the last year.

Here’s some good news: It’s never a bad time to become a web designer, which makes 2021 the perfect time to turn your passion into a career! Here are 8 reasons why:

1. People Are Spending More Time Online Than Ever Before

DoubleVerify surveyed consumers’ digital consumption habits in 2020, and guess what it found? The amount of time people spend online has doubled since the pandemic began. Before 2020, consumers worldwide were spending an average of 3 hours and 17 minutes online every day. Now? The average is 6 hours and 59 minutes.

Needless to say, web designers are in high demand as businesses rush to get in front of these consumers.

2. There’s a Big Freelance Boom Right Now

An Upwork study at the end of 2020 reveals that freelancing grew by 22% (about 2 million workers) since 2019. This now-popular career move is a great option for everyone — from university graduates entering the workforce for the first time to anyone who’s been recently laid off. Heck, if you’re just plain unhappy with the course of your career and want to shake things up, freelancing could be the breath of fresh you need.

3. It’s a Future-Proof Field

In these uncertain times, you’re right to be cautious about jumping into something new. But web design is a career that’ll be around for a long, long time. It’s not just the fact that we’ll always need people to build websites that makes this field future-proof. You could build… Websites. Mobile apps. Web apps. Progressive web apps. You could specialize in… Graphic design. UX design. Web development. You could work for yourself. Build your own agency. Go work for someone else.

There’s a ton of flexibility in how you make a living as a designer. So if your interests change or your industry is impacted, that’s fine. Just pivot!

4. You Can Do It From Anywhere, Anytime

When people are nervous about traveling or living in densely packed cities, that’s not something that should worry you as a web designer. One of the benefits of being a web designer is that you can do it from anywhere you want and on your own schedule.

This is especially nice for anyone who has a family and needs a more effective way of managing it all at once, even when the kids aren’t in school or jobs out in the physical world are diminishing.

5. You’re in the Driver’s Seat

Let’s face it, it can be really stressful working for a company where you have little to no say about what goes on, how it gets done, and how much money you make for all your efforts. This is one of the reasons why freelancing is such an attractive option for many. You get to decide which content management system you build websites with. You get to decide who you work with. You get to set your hours of availability. You make the rules. And you know what? You can change them at any time. It’s all on you.

6. It Can Be a Lot of Fun

There’s some fascinating stuff coming down the line in digital design. For instance, augmented and virtual realities are really starting to pick up speed as ecommerce companies need a better way to allow customers to window-shop and try stuff on digitally.

AI is also bringing a lot of changes to the space. Not only can machine learning and language processing improve the way companies do business online, but they can also improve the way web designers work, too.

7. It Can Also Be Really Rewarding

Because you control your career as a web designer, you get to decide who you build websites for. So, what kinds of causes are you passionate about? Is there an industry you have close ties to and want to give back? This isn’t about working for free. This is about offering your professional design services to people you’re invested in and causes that get you excited.

Not only will it be easier to work for clients like these, but you’ll enjoy it more, too.

8. You Don’t Need to Go to School to Become a Designer

This is a common question for people wanting to leap into web design. While you should have some basic knowledge and skills when you start, you don’t need a degree in design or development to start making money.

One of the beautiful things about becoming a web designer is that you can learn as you go. Here are 5 free courses that’ll help you get to the next level. For instance, you can start as a freelancer, building websites from pre-made templates or themes. As you get more experience and pick up advanced design and coding skills, you can then branch out into specialized fields or areas of expertise.

Ready to Become a Web Designer?

There are many, many reasons to leap into web design in 2021. But are you ready? Before you get started, make sure you have a trusted set of resources to help you with the business side of becoming a web designer. Webdesigner Depot is a good place to start. You’ll learn things like:

And much, much more. When you’re ready, check out this 3-part business branding series where you’ll learn how to kick off your new web design business the right way.

 

Featured image via Unsplash.

Source

The post Should You Become a Web Designer in 2021? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

20 Best New Websites, January 2021

,

Here we are into a brand new year, and although we’re far from out of the woods yet, there is a feeling of renewed hope on many fronts.

In this first collection of the year, we have a mix of retrospectives, brand new ventures, and business as usual. There is an eclectic mix of styles on offer, from glossy and slick to minimalist and brutalist, but all confident and looking to a better world in the year ahead.

Clar

Brand strategists Clar have a simple but strong site. Aside from a few personnel profile shots and the odd bit of line animation, it is all text. The typography is good, and the use of color holds interest.

Ebb Dunedin

This boutique hotel, opening in March 2021 (COVID permitting), has bucked the usual luxury hotel trend and bravely gone for a more minimal design style to complement its interiors.

Aplós

Perfect for Dry January, Aplós is a new, non-alcoholic spirit that can be drunk on its own, with a mixer or in a cocktail. The site design and branding aesthetic is sophisticated calm.

Malala Fund COVID Initiative

Subtle color and simple line decorations keep this site for the Malala Fund’s COVID Initiative clean but warm and appealing.

Taubmans Chromatic Joy

This micro-site promoting Taubmans’ new paint color collection is bursting with color and makes a big nod to the Memphis style of the 1980s.

Myriad

Myriad video production agency’s site uses small amounts of bright colors really well. And they quote Eleanor Shellstrop.

The Ocean Cleanup

Cleaning all the plastic crap out of the oceanic garbage patches is a grim job, but it’s getting done, and The Ocean Cleanup site explains how and why in a not grim way.

Photo Vogue Festival

This site displaying the work and talks from Vogue Italia’s 2020 Photo Festival mixes a hand-drawn style with clean type and a strong grid.

Zero

Zero is a digital branding agency. Their site is glossy with lots of high-quality images, smooth transitions, and a clear structure. The background options are a fun touch.

Fluff

This site for cosmetics brand Fluff takes an old school approach to designing for different viewports — sticking a fullscreen background behind your mobile view for desktop sounds like a terrible idea, but here it works.

Patricia Urquiola

The new site for Patricia Urquiola design studio is bright, bold, and assured, inspiring confidence.

Breathing Room

Breathing Room describes itself as a volunteer creative coalition that designs spaces for black people to live without limits through art, design, and activism. The design radiates confidence and optimism.

A Year in Review

A microsite from Milkshake Studio, highlighting their work over the past year. Some good scrolling animation.

Umamiland

Umamiland is an animated interactive introduction to Japanese food, with links to Google search results for individual items or where to get them.

Acqua Carloforte

Carloforte is the town on the island of San Pietro, near Sardinia, and the scents of the island inspire the perfumes of Acqua Carloforte. Cue beautiful photography.

Eugene Ling

Eugen Ling’s portfolio site is simple and straightforward with little or no marketing-speak and a lovely, understated slider transition.

CWC Tokyo

Cross World Connections is an Illustration and Creative Agency based in Japan and represents illustrators from all over the world.

Lions Good News

Following the cancellation of the Cannes Lions Festival of Creativity in 2020, this site was set up to highlight good news in creativity during the pandemic. A carousel of paper flyers forms the main navigation and creates a lo-fi, DIY feel.

G!theimagineers

G!theimagineers is a production studio for events and entertainment. White lines on black, horizontal concertina navigation, and lots of circles.

Sgrappa

Sgrappa is handmade grappa with attitude, and this site has an uncompromising, in your face vibe.

Source

The post 20 Best New Websites, January 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Upskilling et reskilling de vos effectifs : pourquoi est-ce important ?

, , ,

Combler les lacunes en matière de compétences est une responsabilité permanente des ressources humaines. Et à mesure que les conditions sociétales, business et macroéconomiques changent, les RH doivent réimaginer la force de travail de demain. Car le sol se dérobe constamment sous leurs pieds. Aujourd’hui, avec la crise du COVID-19, la vitesse à laquelle les RH doivent déployer les initiatives d’upskilling et de reskilling va en s’accélérant.

Upskilling et reskilling, de quoi parle-t-on ?

  • Définition de l’Upskilling (en français, « perfectionnement professionnel ») : former les salariés dans le but d’améliorer leurs performances dans leurs fonctions actuelles.
  • Définition du Reskilling (en français « requalification ») : former les salariés en vue d’une nouvelle fonction, en particulier lorsque les objectifs de l’entreprise ont changé.

La formation, une priorité renforcée par le contexte COVID-19

Malheureusement, il n’existe aucun plan reproductible pour une formation réussie. Chaque entreprise a des besoins spécifiques qui évoluent avec le temps. Dès mars 2020, les e-commerçants se sont empressés de recruter et de former (upskilling), afin de répondre à la hausse de la demande. Les services publics étaient, quant à eux, déjà engagés dans le reskilling. Avec l’introduction de technologies intelligentes permettant d’automatiser certaines tâches répétitives, ils ont pu donner une responsabilité accrue ou plus stratégique à leurs employés. Mais bien que l’intensité et la nature des efforts de formation aient varié d’un secteur à l’autre, le constat est général : le COVID-19 a forcé la main à toutes les entreprises. Reskilling et upskilling ne sont plus des mots à la mode : les efforts doivent être entrepris, et rapidement.

De nombreuses études montrent que les entreprises mènent une vraie guerre des talents, recrutant agressivement des candidats aux compétences identiques ou similaires. Pour certains postes il pourrait pourtant être plus économique, rapide et efficace de former les collaborateurs. Afin qu’ils puissent occuper des fonctions supérieures ou entièrement nouvelles. Mais il ne s’agit pas de choisir entre recruter et former. Ce qu’il faut, c’est un recrutement efficace associé à une stratégie de formation. Car investir dans les collaborateurs apporte plusieurs avantages : une réduction du turn-over ainsi qu’une amélioration de la productivité et de l’innovation.

HXM: The Importance of Continuous UpSkilling and Reskilling

Click the button below to load the content from YouTube.

Always allow YouTube

HXM: The Importance of Continuous UpSkilling and Reskilling

Aujourd’hui l’urgence est plus forte que jamais. S’engager dans l’upskilling et le reskilling peut être la clé de la survie à la crise du COVID-19. Aussi bien pour les jeunes entreprises qui doivent réussir rapidement que pour les organisations installées qui recherchent de la stabilité et une croissance à long terme. La difficulté étant que, maintenant et dans un avenir prévisible, les RH devront trouver le juste équilibre entre embauches, formations et licenciements. Et ce à chaque heure de la journée.

Comprendre les besoins organisationnels et être capable d’y répondre rapidement sera la clé, non seulement de la carrière des professionnels RH mais aussi du succès des organisations qui les entourent.

Du télétravail à l’upskilling et reskilling

Arrêtez-vous un instant et pensez à quel point tout a changé en seulement quelques mois. À la fin de l’année 2019, si un DRH était entré dans le bureau du PDG et lui avait recommandé de commencer à planifier un futur avec des salariés majoritairement en télétravail, on l’aurait sans doute sèchement renvoyé à son bureau. Aujourd’hui le télétravail est devenu normal, si ce n’est la norme.

Mais le principal enseignement est que les organisations se sont révélées plus agiles et réactives que prévu. Et si chacun a été capable d’adopter le télétravail tout en restant efficace, pourquoi les entreprises n’arriveraient-elles pas à former les employés à de nouvelles compétences, rapidement, afin d’atteindre les objectifs fluctuants de l’organisation ? L’upskilling et le reskilling dans un environnement de travail à distance est un défi mais également une nécessité. Et gardons aussi à l’esprit que l’apprentissage « sur le tas », par la pratique, fera partie du chemin. En effet, trouver l’équilibre demande aujourd’hui une adaptation continue, voire même à la volée.

Pensez-y de cette manière : il a fallu des décennies avant que les téléphones portables ne puissent être glissés dans nos poches. Puis le smartphone est arrivé. Aujourd’hui, une application ou un jeu mobile peuvent devenir viraux à l’échelle mondiale, en quelques minutes.

La fonction RH connaît la même évolution rapide. Il y a quelques décennies le passage des documents papier aux fichiers informatiques s’opérait lentement. Aujourd’hui les RH ont délégué les tâches répétitives à des intelligences artificielles ou à des portails en ligne et élaborent des stratégies d’e-learning et de modélisation des effectifs. Si leur fonction est d’aligner les objectifs de formation sur les besoins de l’entreprise, alors les RH ont, comme tout le monde, besoin d’upskilling. Une stratégie de formation pertinente et agile, prête à être déployée à tout moment, est la carte que les professionnels RH ont en main avec leur siège à la table des décisions.

L’avenir du travail est là

Pour les RH, le défi n’est pas simplement d’identifier les lacunes en matière de compétences et de décider s’il faut embaucher ou former. Il s’agit de quantifier l’impact, revoir le plan d’action, puis de quantifier encore, etc. Dans un monde où chaque décision repose sur un calcul de ROI, même subjectif, il est essentiel pour les RH de relier les initiatives de formation aux objectifs immédiats et long terme de l’entreprise. Prenons deux exemples :

  • Delaware Consulting (1700 employés), en implémentant des solutions logicielles de formation robustes, a pu réaliser des économies grâce à un suivi plus précis de ses dépenses. Delaware a ainsi réduit de 5 % les coûts liés aux annulations de formations et de 12 % le temps consacré à l’administratif RH.
  • Newcrest Mining, en Australie, a utilisé des solutions logicielles similaires pour économiser 1,6 million de dollars US en frais de formation au cours des six premiers mois et a également dégagé 3,2 millions de dollars d’économies par gains de productivité la première année.

Le défi, cependant, est le temps : quand et comment les employés peuvent-ils être formés ? C’est particulièrement délicat lorsque l’on sait qu’un employé dispose en moyenne de 14 minutes de temps libre par semaine pour se former. Trouver un moyen d’ajouter une formation à la journée de travail est plus compliqué que de décider s’il faut ou non former. De plus, toute initiative d’upskilling ou de reskilling doit plus largement s’inscrire dans une planification stratégique des effectifs.

Cela signifie que certains salariés seront sélectionnés pour développer de nouvelles compétences quand d’autres seront laissés de côté. Les employés sont intelligents et savent ce qui se passe autour d’eux. C’est pourquoi les initiatives de formation doivent être accompagnés d’un plan de communication solide. Afin que les rumeurs, notamment sur les réductions d’effectifs, ne s’ébruitent pas. Toute stratégie de reskilling ou d’upskilling doit également être associée à un plan de communication interne solide. Un domaine où les RH assument une responsabilité croissante. Dans le cadre d’un vaste effort à l’échelle de l’entreprise, il est essentiel de veiller à ce que chacun, qu’il participe ou non à l’effort de requalification, comprenne les objectifs de l’organisation et la manière dont son travail sera affecté.

Les pièges et obstacles de l’upskilling et du reskilling

Il est également important de garder en tête différents scénarios. Comme la possibilité pour les salariés requalifiés d’exporter leurs nouvelles compétences ailleurs, voire chez un concurrent. Le turn-over est toujours une préoccupation, même en temps normal. Mais si l’attrition peut affecter le ROI associé à un effort de reskilling ou d’upskilling, l’alternative consistant à ne pas former, et donc à ne pas répondre à l’évolution du contexte, serait bien pire.

C’est pourquoi il est essentiel de relier directement les efforts de formation aux résultats de l’entreprise. Par exemple : si l’objectif est de stimuler les ventes en formant de nouveaux commerciaux, il faut mesurer la hausse des ventes. Cherchez des partenaires dans l’entreprise qui peuvent s’appuyer sur des outils ou localisez des parties prenantes pour vous aider à mesurer l’impact de votre travail. Les craintes d’attrition ou de perte de temps équivalent, en fin de compte, à une paralysie par l’analyse. S’engager dans le reskilling et l’upskilling est une question de capacité de l’entreprise à faire face à la concurrence. C’est pourquoi les RH ne doivent pas être considérées comme une entité administrative mais comme une entité pouvant s’attaquer de front aux déficiences de l’entreprise.

Être compétitif dans le contexte business moderne exige à la fois de réimaginer la fonction RH et de créer une culture de l’apprentissage. L’un ne va pas sans l’autre. Les efforts de formation exigent également des RH qu’ils aient une stratégie claire sur les personnes qui recevront de nouvelles compétences et sur ce qu’elles sont censées apporter à l’avenir. Enfin, il faut tenir compte de la manière dont la technologie peut évoluer et avoir un impact sur l’efficacité de tout effort de formation. Un système de gestion de la formation (LMS) moderne peut vous aider à atteindre vos objectifs d’upskilling et de reskilling.

Alors que la pandémie de COVID-19 est un facteur de complication, il faut considérer la formation comme un facteur clé de stabilité et de croissance à long terme. Qui aide à pivoter face aux défis. Le COVID-19 a accéléré les tendances déjà en place et a mis en évidence ce que les entreprises savaient déjà : les organisations dont vous entendrez parler comme des « success stories » dans quelques années seront celles qui se seront activement engagées dans l’upskilling et reskilling de leurs salariés en vue des défis à venir. En raison de la pandémie, les entreprises doivent simplement évoluer à un rythme plus rapide. Et pour ce faire, elles doivent, de même que leurs employés, être plus « smart ».

Publié en anglais sur insights.sap.com

The post Upskilling et reskilling de vos effectifs : pourquoi est-ce important ? appeared first on SAP France News.

Source de l’article sur sap.com

/par

Exciting New Tools for Designers, January 2021

,

The new year is often packed with resolutions. Make the most of those goals and resolve to design better, faster, and more efficiently with some of these new tools and resources.

Here’s what new for designers this month.

Radix UI

Radix UI is an open-source UI component library for building high-quality, accessible design systems and web apps. It includes examples and guidelines for all kinds of user interface elements that provide guidance and really make you think about accessible website design. (And everything is usable!)

Froala Charts

Froala Charts is made to help you create data visualizations for web or mobile apps. Build any chart you can imagine – bar, line, area, heat map, sankey, radar, time series, and more. Plus, you can customize anything and everything, so it all matches your brand. This premium tool is enterprise-level and comes with a one-time license fee.

CSSfox

CSSfox is a collection of designs that you can use for inspiration. The curated community project includes posts, reviews, and award nominees and winners.

Pattern Generator

Pattern Generator is a tool to create seamless and royalty-free patterns that you can use in projects. Almost every element of the pattern design is customizable, and you can “shuffle” to get new style inspiration. Design a pattern you like and export it for use as a JPG, PNG, SVG, or CSS.

Type Scale Clamp Generator

Type Style Clamp Generator helps you create a visualize a typographic scale for web projects. Pick a font and determine a few other settings and see the scale right on the screen. You can even put in your own words to see how they would look. Then, flip to see how sizes appear on different devices. Find a scale you like and snag the code with a click.

Flowdash

Flowdash is a premium app that helps you build custom tools, data sets and streamline your business operations with one tool. Manage data and processes without code. The tool combines a spreadsheet’s familiarity with a visual workflow builder, plus built-in integrations to automate repetitive tasks so your team can focus on what matters.

Scale

Scale is a website that provides new and open-source illustrations that you can use for projects. Maybe the illustration generator’s neatest part is that you can change the color with just a click to match your brand. Then download the image as an SVG or PNG.

Pe•ple

Pe•ple is a tool that adds a “customizable community” to any website to help grow your fanbase and provide a boost to SEO. It allows you to integrate chat, commenting, emojis, and passwordless login, among other things.

K!sbag: Free Minimal Portfolio Template

K!sbag is a free minimal website template that’s made for portfolio sites. (Did you resolve to update yours in 2021?) It includes 6 pages in a ready-made HTML format and PSD.

Merico Build

Merico Build is like a fitness tracker for code. It uses contribution analytics to empower developers with insight dashboards and badges focused on self-improvement and career growth. Sign up with tools you already use – Github or Gitlab.

Automatic Social Share Images

Automatic Social Share Images solves a common website problem: Missing or broken images when posts or pages are shared on social media. This tutorial walks you through the code needed to create the right meta tags so that popular social media channels pick up the image you want for posts. The best part is this code helps you create a dynamic preview image, so you don’t have to make something special every single time.

Animated SVG Links

Animated SVG Links can add a little something special to your design. This pen is from Adam Kuhn and includes three different link styles.

Blush

Blush helps you create illustrations. With collections made by artists across the globe, there’s something for everyone and every project. All art is customizable, so you can play with variations to create something unique.

Palms

Palms is a set of 43 sets of hands to help illustrate projects. Each illustration is in a vector format and ready to use.

Tabbied

Tabbied allows you to create and customize patterns or artwork in a minimal style for various projects or backgrounds. Tinker with your artwork and patterns and then download a free, high-resolution version.

How to Create Animated Cards

How to Create Animated Cards is a great little tutorial by Johnny Simpson that uses WebGL and Three.js to create a style like those on Apple Music. The result is a stylish modern card style that you can follow along with the CodePen demo.

Bandero

Bandero is a fun slab with a rough texture and interesting letterforms. The character set is a little limited and is best-suited for display use.

Magilla

Magilla is a stunning modern serif with great lines and strokes. The premium typeface family has six styles, including an outline option.

Roadhouse

Roadhouse is one of those slab fonts that almost screams branding design. The type designer must have had this in mind, too, with stripe, bevel, inline, half fill, outline, drop extrude, and script options included. (This family is quite robust, or you can snag just one style.)

Street Art

Street Art is for those times when a graffiti style is all that will do. What’s nice about this option – free for personal use – is that the characters are highly readable.

Source

The post Exciting New Tools for Designers, January 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Popular Design News of the Week: January 11, 2021 – January 17, 2021

, ,

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

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

Front-End Performance Checklist 2021

 

Google Design’s Best of 2020

 

Skynet – Build a Free Internet

 

An Early Look at Full Site Editing in WordPress

 

30 Basic Fonts

 

5 Great Ways to Develop your Eye for Design

 

No More Facebook – Privacy-friendly Alternatives to Facebook Products

 

Bold CMS – The CMS that Understands your Content

 

Design in 2021 – What will Design Activism Look Like?

 

LT Browser – Next-gen Browser to Build, Test & Debug Mobile Websites

 

40 Best Canva Alternatives for Effortless Graphic Design

 

How to Design with Contrast

 

Design in 2021 – What will Interactive Design Look Like?

 

20 Essential WordPress Settings to Change

 

No Meetings, no Deadlines, no Full-Time Employees

 

Free Porto Illustrations – Free 20 Stylish Hand Drawn Illustrations

 

Digital Images 101: All You Need to Know as a Designer

 

8 Typography Design Trends for 2021 – [Infographic]

 

Learnings from Designing for Multi-language User Interfaces

 

A UX Analysis of Cyberpunk 2077′s HUD

 

Five Websites Inspired by Vintage Games

 

Effective User Onboarding: Top Proven Tips and Examples

 

Overcoming Common Designer Biases

 

What Makes a Great Business Idea?

 

How to Use Design Thinking to Improve your Daily Workflow

 

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

Source

The post Popular Design News of the Week: January 11, 2021 – January 17, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

6 Tools for Rapid Cross-Device Website Testing

,

When creating a website, it’s vital to remember that not only does it need to work and look great on the device you are creating it on, but on all the other devices, it might be used on too.

Mobile and tablet optimization is important not only for the user journey but from an SEO point of view too, and badly created mobile sites just don’t cut it anymore.

With more and more devices entering the market, you need to check any website you create is compatible across the board. One bad experience and users are likely to leave and not come back again, which can be catastrophic for a business, particularly if it is just starting out.

It’s vital to check how a site looks and behaves when browsed differently from how you would use it. A common mistake is to assume users only browse websites on mobile devices in portrait mode; they don’t; landscape browsing is common, especially if the user is used to watching video.

Here are some of our top tools for testing websites on devices without the need for an entire device library:

1. Multi-Screen Test

WhatIsMyScreenResolution offers a great little tool to test how your site will look on different devices easily, and it costs absolutely nothing. You put the URL and choose between desktop, mobile, tablet, and television and then the orientation. Each device can also be broken down into different sizes and resolutions (or you can enter your own), making it easier than ever to test what a site will look like on different devices.

2. Responsinator

Responsinator is another great tool to test how a site looks on other devices without dipping into your wallet. Put your URL in the top bar, and it will instantly show you what it looks like on generic devices. This is a great, easy to use tool, and you can click through any links on your site to check the usability of multiple pages. This site is free, but if you want to “create your own” template, you need to sign up.

3. Google Dev Tools

Google Dev Tools is one of the most commonly used free tools. Add it to Chrome, and you can see how your site looks in a multitude of different screen sizes and resolutions. You can simulate touch inputs, device orientation, and geolocation to test how they work. It’s great to easily spot problems using their remote debugging tool to view, change, debug and profile a page’s code directly from your laptop or computer while viewing it on your mobile device.

4. Browser Stack

Browser Stack allows you to test your site on over 2,000 real devices and browsers, enabling you to see in real-time how your site looks. It is no hassle to set up, and it can be seamlessly integrated into your setup. As it tests on real browsers on real machines, you know the results are more reliable and accurate. It also enables you to debug in real-time using their pre-installed developer tools for ease of editing. The tests are all run securely on tamper-proof physical devices and are wiped clean of all data after each session, so you don’t need to worry about security being compromised.

5. TestComplete Mobile

TestComplete Mobile allows you to create and run UI tests across real mobile devices, virtual machines, and emulators. You can test both mobile device layouts and apps with script-free record and replay actions. This can help you to edit and fix any potential issues that may arise during the tests. Due to them being conducted on real devices, you know it is less likely to have errors in the system than a simulated device. This is free for 30 days then can get pricier, so make sure you take advantage of the trial and try the service before committing to it.

6. Sizzy

Sizzy is a great tool for checking sites, and it has a host of features to assist you. You can rotate the screen between portrait and landscape, filter by OS and device type, switch themes, and take screenshots. These little things mean it’s a super easy to use and convenient tool. It claims to simulate each device’s viewport and user agent, meaning the results are the same as what you would actually see on that phone/ tablet, etc. It can’t simulate different browser rendering engines however, so there’s a chance there might be some minor differences compared to the actual thing. Sizzy offers a free trial or has different price packages starting at $5 per month.

 

Featured image via Unsplash

Source

The post 6 Tools for Rapid Cross-Device Website Testing first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Popular Design News of the Week: December 28, 2020 – January 3, 2021

, ,

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

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

10 Free Calendar 2021 Vectors

 

Free HTML/CSS Landing Page Templates Without JavaScript

 

Botsman – Free Platform to Develop, Test and Monitor Telegram Bots

 

Typography Principles

 

Top 10 Web Development Trends to Look Out for in 2021

 

Parametric Color Mixer

 

Add to Calendar Generator – Generate ‘Add to Calendar’ Buttons for your Website

 

What Designers Need to Know About Copyright Infringement

 

Lose the Very – “Very Good English” is not Very Good English. Lose the Very.

 

Linkish – All-in-one Bookmark Manager

 

Life of a Designer Through Funny Memes

 

APIs all the Way Down

 

Got Milk Font

 

14 Bootstrap Profiles

 

Big Review of Major UI Design Trends for Web and Mobile in 2020

 

How to Use Figma’s Inspect Panel

 

Reducing Motion in Animations

 

Dopely Colors – Free Color Palette Generator

 

How to Upload an HTML File to WordPress

 

Using Math in Photoshop

 

How to Set up your WFH Space for Creative Success in 2021

 

StackWhats – Add the WhatsApp Live Chat to your Website

 

How to Export a WordPress Site (Beginner’s Guide)

 

Podpage – Build a Podcast Website in Less than 5 Minutes

 

How to Paginate Data with PHP

 

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

Source


Source de l’article sur Webdesignerdepot

/par