HTML Attributes to Improve Your Users’ Two Factor Authentication Experience

• Attributes, improve
html-attributes-to-improve-your-users’-two-factor-authentication-experience

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.

In this post we will look at the humble element and the HTML attributes that will help speed up our users’ two factor authentication experience.

The default experience

When you implement two factor authentication for a web application, perhaps with the Authy two factor authentication API, you will need a form for your user to input the one time password you are going to send them. You might create something similar to the following HTML:

<form action="http://www.webdesignernews.com/sessions/check-2fa" method="POST">
  <div>
    <label for="token">Please enter the code you were sent:label>
    <input type="text" name="token" id="token" />
  div>
  <button type="submit">Check tokenbutton>
form>

This is a good experience already. The has a name and a unique ID and the is using the correct for attribute to explicitly associate with it, which is important for accessibility. You could also wrap the around the for the same effect. With a bit of CSS, this might look something like this:

A web page shown in iOS Safari with a two factor authentication prompt. The standard alphabetical keyboard is open.

However we can progressively enhance this experience with just a few more attributes.

Getting the right keyboard

On mobiles or devices with on-screen keyboards the first thing to notice is that we are presenting the full alpha-keyboard. One time passwords are made of numerical characters so it would be much better to present the user with a number pad.

You might think that switching the type of from “text” to “number” is the solution here:

    <input type="number" name="token" id="token" />

You would be wrong though. This does trigger a different keyboard on iOS, but it still includes a number of useless keys.

A web page shown in iOS Safari with a two factor authentication prompt. This time the keyboard includes numbers and symbols.

Changing the type of field changes the way the browser interprets that field. It could cause errors too; if the two factor authentication code starts with a zero a number field may drop that leading zero.

inputmode

The inputmode attribute changes the keyboard the browser should display without changing the meaning of the data the field collects. We want our to receive text input, but from the numeric keyboard. So instead, add inputmode="numeric"

    <input type="text" name="token" id="token" inputmode="numeric" />

inputmode has a number of other values, including “tel” for telephone numbers, “email”, “decimal”, “url”, “search” and “none” in case you want to render your own keyboard. This article on CSS Tricks has all the details you need for the different inputmodes.

Browser support for inputmode is good for mobile operating systems these days, but a couple of years ago it was in the wilderness. For older browsers there is another trick to trigger the numeric keyboard and include a bit of extra validation for free.

pattern

The pattern attribute allows you to validate the contents of an using a regular expression. Using the pattern [0-9]* tells the browser that we only accept numbers in the field and also triggers the number pad in browsers without inputmode support.

Our HTML looks like this now:

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
/>

And the keyboard is a much simpler numerical input:

A web page shown in iOS Safari with a two factor authentication prompt. This time a simple keyboard of just numbers appears.

One thing that would make this form even easier to fill would be autocompletion of the one time password.

HTML autocomplete

According to MDN “autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.”

In iOS and Safari on macOS we can take advantage of this to have the browser suggest two factor authentication codes that are sent to the device over SMS. Adding the autocomplete attribute with the value “one-time-code” will trigger this behaviour.

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

With this, our is complete and the experience for the user now looks like this:

A web page shown in iOS Safari with a two factor authentication prompt. There is also a message notification with a two factor authentication code and the keyboard is auto suggesting the code to be filled in.

Other useful autocomplete values

There are many autocomplete values available, covering everything from names and addresses to credit cards and other account details. For sign up and login there are a few autocomplete values that stand out as useful hints: username, email, new-password, current-password.

Browsers and password managers have very good heuristics to find login forms on web pages, but using the username and current-password values make it very obvious. You definitely want to consider using these attributes if you are building a login form with the username and password on different pages.

In a sign up form, make sure to use the “new-password” value as it triggers password suggestions in some browsers.

A sign in form in Firefox. The password field has suggested a strong password.

Autocompleting one time passwords in other browsers

This autocomplete behaviour only currently exists in Safari on iOS and macOS, but the Chrome team is investigating similar ideas to streamline this process. Currently there is an experiment with an imperative SMS Receiver API modelled on Android’s SMS receiver API. This would allow developers to extract the one time password from the SMS and, because it’s in JavaScript, instantly submit the form, saving the user more time.

At the time of writing this API is part of an origin trial which allows you to test it out and feed back to the Chrome team. If this interests you, sign up and give the API a whirl.

Better experiences through HTML

In this post we have seen that with just a sprinkling of HTML attributes we can improve the login experience for our users, particularly on mobile devices.

The element is one of the most interesting HTML elements we have access to. Depending on the attributes it can be a text field, a range slider, a file selector a button and many more.

If you are looking for an even better two factor authentication experience, then take a look at Authy push authentication which cuts out the copying of codes entirely.

Do you have any other tips on improving the login experience for your users? I’d love to hear them in the comments below or hit me up on Twitter at @philnash.

10 Tips to Improve Your Typography Skills

• improve, typography
10-tips-to-improve-your-typography-skills

Are you ready to improve your typography and take your game to the next level? Wonder how? Don’t worry, we got you covered! Today we are sharing 10 Tips to Improve Your Typography Skills —the craft of endowing human language with a durable visual form.

“When typography is on point, words become images.”

Shawn Lukas

If you have heard the term typography before but have no idea what it is all about in this article, we will cover that for you. In this article, we will provide you with all the necessary tools and insight you need to improve and perfect yourself at all small and obscure concepts of typography so you can create the best looking website designs. For the uninitiated when you hear typography, you probably think it has something to do with the very complicated specialization, but that’s actually isn’t the case. Actually, every designer uses typography in one way or another when they design creatives.

The term typography is the art of designing, selecting, and arranging type to make words readable. 

The arrangement of the words involves a good understanding of selecting typefaces, line lengths, point sizes, leading (line spacing), and tracking (letter-spacing) and kerning (adjusting the space between pairs of letters). Type design is a closely related technique, sometimes considered part of typography. Oddly enough, most typographers do not design typefaces, and a lot of them do not even consider themselves typographers. Typography is also sometimes used as a decorative device, unrelated to communication of information.

So in nutshell typography stands for:

  • Style or appearance of text.
  • The art of working with text.

Now when you know what exactly this term stands for let’s see how to use typography more effectively in your design projects. You just need to follow our 10 tips to improve your typography skills:

Table of content

There are plenty of tiny details that, when put together, make for great typography design. Some of them are obscure other overlooked, but they are all critical for creating the “bigger picture.”

Context and audience

Typography - Context and audience

When you start choosing fonts, an essential thing to keep in mind and ask yourself is, “What is the main goal here?” 

There are plenty of font choices that will fit a specific need. Each individual font brings its own unique mood to the layout. Whether you choose a friendly, funny, serious, or business-themed font, this solely relies on your end goals and targeted audience. Every single font used has a specific character that conveys a different message to the reader. 

Classic fonts are often used to convey a strong personality and are commonly used for the more mature audience, while the more modern fonts have cleaner and neutral look, usually the better choice for the younger audience. If you choose a font that looks too fun, it will look silly for a business website, and users will hesitate to trust the company. Same thing if a product is meant for youngsters, too formal fonts may seem dull.

Bold fonts are mainly used for making statements and have the power to immediately capture the attention of the reader, the same way yours was captured with ‘s quote at the beginning of this article.

Utilize white space properly

Typography - Use of white space. Credit: benbate.com
Use of white space. Credit: benbate.com

The “whitespace,” also known as “negative space” is the empty space between elements in a composition. 

There are two sub-elements that make the “whitespace”:

Micro & Macro Whitespace

The space between significant elements in a composition is “Macro Whitespace.” It helps in giving the words “room to breathe.” “Micro Whitespace” is the space between smaller elements: between list items, between a caption and an image, or between words and letters — the itty-bitty stuff.

Using your white space evenly makes the content much more easy-looking and “scannable,” significantly improving your work. The thing about “whitespace” is as using silence in a musical composition. Without proportionate use of silence, the music turns into noise. Similarly, without “whitespace,” your design is unstructured and difficult to consume.

Appropriate Font Size

Typography - Appropriate Font Size
Credit: Simon Foundation

Choosing the proper font size is just as important as choosing the right type of font. You don’t want to be too big, but you don’t want it to be too small eighter.

How to choose a size when there are so many to choose from? Again, everything depends on the end goal. If you want your design to be expressing loud and clear bold statements or emphasize a specific word or sentence, you would most of the time want a bigger size but try using it sparingly.

If you are going for a more tender and subtle message, better go with a small or normal-sized font.

Use EMs or REMs

Typography - Em and REM
Em and REM

EMs and REMs are both essential units in typography, but how to know which one should you choose over the other?

EM units are based on the relative font size of the “parent” element. REM units, on the other hand, are based on the relative font size of the HTML element and act as a sort of a multiplier.

Most of the time, REM is going to be the go-to unit for you, but sometimes EM can be just as good and even better if you want the font to change based on the parent element. 

Relative sizing is a big selling point to EMs because it helps control the sizing of elements as they relate to others. EMs function as essential building blocks to website elements thanks to the fact that EM values compound.

Set Up a Hierarchy 

Typography - Font Hierarchy
Font Hierarchy

Beginners in typography often underestimate the necessity of using a hierarchy, and that makes their designs look poorly and unprofessional.

But setting up a hierarchy isn’t only used to impress your clients with your fantastic work structure, it makes everything a little bit more easy for you. Typographic hierarchy guides not only the audience but also to better focus on the more important points and makes it easier to differentiate them from the more simple and supporting parts.

Probably the most essential things in the hierarchy are position and alignment. You don’t have a well-structured hierarchy without mastering these two. The right positioning of the headings and the subheadings should be your top priority because they are the most impactful on the structuring your hierarchy. 

After you have figured the positioning and alignment of your headings and subheading, try to make your type stand out. The way to do this is to center it or set it outside of the regular margins of a page. This can make that type stand out within the hierarchy of a page.

Learn to Kern

Typography - Font kerning
Font kerning

In its purest form, kerning is the art of adjusting the space between two individual letters. The goal here is to equalize the appearance of the white space between letters, so they appear better in front of the eyes of the readers. This can be tricky for the beginner because there is no mathematic form or algorithm to use, so you really have to develop an eye for it.

The only automatic tool in kerning you can use is tracking. Tracking is adjusting the spacing uniformly over a given selection of a text and is just a thing to help you do the same thing you have already done but faster.

Learning this skill is not the most difficult thing in the world, but mastering it will automatically make you ahead of your competition because you would be able to make your own unique type.

Pairing Fonts 

Typography - Font Pairing
Font Pairing – Credit: Font Pair

Pairing fonts that compliment each other is an essential part of great results in typography designing. This is another thing that requires you to think outside of the box, but there is still a soft set of rules that you may want to follow.

Don’t be afraid to use unknown typefaces to you. Finding fonts that have style variants is a smart way to create nuance without unnecessarily overcomplicating your designs.

For example, a soft black Arima Madurai font combined with a light-colored background will make for a great pairing.

Experiment with a couple of your favorite fonts and also take inspiration from ads you saw before that made an impression on you and try to analyze what makes them work and use it.

Contrast is King

Typography - Typography - Contrast is King

The opposites attract each other; this is also the case in typography. If you want to add a creative tinge to your text and want it to stand out, then contrast is one of the best and easiest tools in your design arsenal you can use. 

Contrast is the second name for attention-grabbing. It effectively communicates the ideas you want to emphasize the most. Just as you need to know which font pairs well with others, you need to be aware and knowledgeable in using contrast to your advantage. 

Another example of great use of contrast like the one above is bold and rounded white typeface combined with a contrasting in style darker red one on a black background.

This way, the contrast in both style and color captures the reader’s attention exactly where you want it to be. To choose the perfect color contrast, you can always go for the traditional monochrome, or if you have been using it for too long and want something different, go for a full-color design. To ensure the color contrast doesn’t affect negatively on the readability, match the color of your font with the background as it creates a cohesive look.

Ensure Better Readability 

Of course, readability is important; after all, what is the point of making a complicated design. If all your audience sees is hard to read sentences? This may resolve in turning your audience off, leaving them with the feeling you take something away from them rather than giving them a good time looking at your work.

How to ensure better readability? Well… you just keep it simple honestly. Use simple words and phrases, also try to find short words. When readers “scan” through the words, they often tend to stay rather than leave, if there are short and simple words. That’s because this will take them less time to read, and we all know that nobody wants to waste their time.

Line Limit

Another way to ensure better readability is to have a line limit for your text. There are two “standards” of optimal line length for your body text. The first and the more popular one is 50-60 characters per line (including spaces). This is good for making short descriptions.  The second one suggests that up to 75 characters is also acceptable and even preferable in a lot of instances where you need to give a little bit more info. 

But why do you need to follow either of them, and what’s the downsides of violating these ranges?

An easy answer to this question is—your lines may appear either too wide or too narrow. If a line of a text is too long, the reader’s eyes will have a hard time. When the line length is difficult to gauge it becomes a problem and can affect negatively on the reader’s ability to focus onto the correct line in a large portion of a text. And if a line is too short, this also tends to stress the readers, making them start reading on the next line before finishing the current one, constantly making the eye travel back, breaking the reader’s rhythm, and potentially skipping important words.

Final Thoughts

Congratulations for making it this far through the article, now you are a few steps ahead on your journey in mastering typography. 

We hope these 10 tips to improve your typography skills have been useful to you. Share your opinion about the topic in the comment section and stay tuned for more.  

How to Improve Your Design Skills

• Design, improve
how-to-improve-your-design-skills

Plant

At Plant, improving our design skill is of high priority. There’s one thing I have come to realize about skills in general — there’s always room for improvement. No matter how skillful you think you are, there is always something new to learn. If you are looking for a way to improve your design skills, then you are on the right page. I intend to discuss the ways you can improve your design skills as a product designer.

No doubt, product design is a daunting profession. You always have to be on your toes to remain relevant in the profession. Old techniques are improved, and some become obsolete. New ones are introduced daily. For a field that’s always changing like this, improving your skill is a must. Follow the tips below to discover how to improve your skills as a product designer.

Instead of advising you to take criticism, I am saying you should pay attention to them. Well, I am sure you are wondering why I said so. That’s because feedbacks are powerful and can make or mare you. I have been in the shoes before, and I know how it feels. Not all criticisms are made to help you grow. Aside from helpful criticism popularly known as constructive criticism, there’s one devoid of good intend known as destructive criticism that is nothing but attack.

When you get critic feedback, you need to analyze it and see if it is a constructive criticism you should take, or whether you should wave it off if it is destructive criticism. Learn to know when to appreciate your skill to avoid feeling bad over feedbacks provided to make you feel bad. However, when you get an honest review of your work, appreciate them and learn how to avoid those flops in the future.

If you are one of the juniors in a team, your team members find it easier to criticize your work. However, as a senior member of a team or even the team lead, this becomes difficult as no one will want to be seen as challenging your work. What should you do in this case? Simple, take your work online to websites like Dribbble, and get others criticize it. Make do of the helpful feedback and disregard the others.

We all have our individual strengths and weaknesses. If you want to improve your design skills, you need to acknowledge this and become open to discussion with other designers. You might be asking why, right? In the past, I used to have this idea of being a know it all kind of person. I stick to a technique and wouldn’t want to learn from other team members because I see it as a sign of weakness.

I later discovered I was wrong and was actually not improving. While the other team members have discovered a new technique and are all using it, I remain with the one I know. However, the magic came when I became open to discussing and accepting others’ opinions. The experience though not a rosy one all the time, but will open you up to a lot of techniques you are not aware of. You’ll get to learn from the last person you expected, and that’s the joy of discussing with others.

In a world where we are now glued to our screens, reading a complete book can be a great challenge. The attention of many designers have reduced to the extent that they are only open to reading blog articles and when they become long, they will skip over and their reason — no time. Well, it is better you spend time to learn what will improve the quality of your design than remain stuck with the same old knowledge you have when others have advanced.

One thing you cannot deny is, a great amount of knowledge is hidden in books. What you read on blogs is just a fragment and, sometimes, a summary of what is in books. Why not get the knowledge from the direct source? If paperbacks are your problem, you can get most copies of popular books in ebook format — some are free, while some are paid.

Unless you push yourself out, you will remain in your comfort zone. And let’s face it, the comfort zone will, in most cases, make a mediocre out of you. If you want to improve your design skills, you have to do those things you are scared of doing. Take the bull by the horn, take up that project offer, learn that new thing, and dare to make mistakes. As you move out of your comfort zone, you will discover you are learning new things and improving your skills.

From the feedback you get and the knowledge you gain from reading books and learning from other designers, you can come up with new ideas of your own. When these new ideas come up, what do you do with them? Experiment them, of course! Try out your ideas. If you are not a key person in a project, you might not get the opportunity to introduce your new idea to the project you are part of. In this case, you can start side projects and put your new ideas into practice.

Trying out your new idea in a side project has a lot of advantages. Since nobody is funding it, you can afford to try out new things and make mistakes — rinse and repeat until you get the desired result without anyone being on your neck. It is also easier trying out a new idea in a new project since you will be starting the new project on a new slate.

5 ways content can improve your websites? accessibility ? and overall UX

• content, improve
5-ways-content-can-improve-your-websites?-accessibility-?-and-overall-ux

But the reality is that there are tons of relatively simple things you can do to make your websites more accessible. And they’ll not only make your websites more accessible to the disabled, but also significantly improve your user experiences for everyone.

But first, let’s be clear about our terms:

What’s accessibility?

Here’s accessibility expert Jennison Asuncion’s definition of accessibility:

Accessibility refers to designing and developing user interfaces that everyone, including people with disabilities, can independently consume and interact with.

Note that the stress here doesn’t fall specifically on “people with disabilities,” but everyone. That makes accessibility a natural concern for all of us involved in user experience design, regardless of discipline.

Now, on to the tips!

1. Use unique, meaningful button and link names

A page from Google's Nexus site—the link copy reads

Pretty easy to tell where that link will take me.

I can’t tell you many times I’ve had a mockup or prototype hit my inbox (or Slack) with 16 “learn more,” “read this,” or “see more” links scattered across it — and groaned.

Why? Because it’s horrible for users of screen readers, which typically allow people to skip from link to link on a page, ignoring the content in-between. It’s a highly efficient mode of navigation that helps screen-reader users quickly get where they want to go.

But how easy do you think it is for a blind or low-vision user to figure out which of those “learn more” links leads to the “more” they want to learn about?

And it’s actually not that different for sighted users. Think of all the times you’ve fired up a website knowing exactly what you’re looking for, but not quite sure where to find it. Do you read through all the content? Or do you simply hunt around for the right link?

You might scan through the headings and subheads first — after all, they’re bold and eye-catching — but you still have to live with the cognitive load of connecting those headings to the links below. But links tend to be pretty visually loud too, so wouldn’t it be even easier if every link told you exactly where it would take you without demanding I read all the other copy?

Writing accessible links and button copy

Do

  • Embed links in clear, specific language that tells people where the link will take them and why they might want to go there
  • Indicate if a link will open high-bandwidth media like a PDF or video within the linked text

Don’t

  • Use generic link or button text like “learn more,” “read this,” or “see more”
  • Embed links in even more generic terms like “this,” “this page,” or “here”
  • Link to “naked” URLs (i.e., www.thewebahead.net) unless there’s context that clarifies why that link is there

For more, check out the WebAIM article on links.

2. Add clear, useful alt tags to images

Alt tags also play a key role for screen-reader users on the web. Without these invisible bits of copy, there’s literally no way for low-vision and blind users to understand the content of images, data visualizations, and infographics. With alt tags, we can ensure that no one has to miss the information conveyed in our pie charts, hero photos, and infographics.

Back in the bad old days of black-hat SEO madness, alt tags were abused as just another method of stuffing a page with keywords. Which was horrible for users of screen readers. Just imagine reading through a blog article and hearing:

“CSS layouts let us CSS HTML tables table-based layouts tables web web design code markup floats inline inline-block block W3C web consortium…”

All in a screen reader’s eerily robotic tones.

Because of that abuse, search engines quickly moved to punish such “keyword-stuffers,” freeing alt tags up to do what they were always intended to do: provide useful information.

As with links, the key here is to make your alt tags clear, descriptive, and natural-sounding.

Closeup of blueberries

Simple enough to alt tag appropriately.

With many photos, this is a simple matter of succinctly describing the content of the image: “Closeup of blueberries.”

If your image contains text — and seriously, don’t do that — include the text verbatim in the alt tag.

Let yourself be stupid. Ignore everybody. Trust your gut. Be a jack of all trades. Stay busy.

For this image, your alt tag should include the text verbatim. (Which I created after seeing Tobias Van Schneider’s talk, “Side Projects Are Stupid.”)

If your image contains useful data, such as a bar graph illustrating mobile usage patterns, make sure the alt tag contains the same data: “95% percent of smartphone users view the same website on multiple devices.”

And I can’t pass up this opportunity to briefly rail against infographics: these massive images full of copy are horrible for accessibility, not to mention SEO.

Making graphical content accessible

Do

  1. Write image alt tags that succinctly describe the content of the image
  2. Use keywords/keyphrases that are relevant to your content, but only if they’re actually helpful in describing the image, and stick to one keyword/phrase
  3. Include the key insight of any data visualizations (such as bar graphs, pie charts, etc.)
  4. Build infographics with real HTML text, or a text-based alternate (i.e., a long-form post explaining the data)

Don’t

  1. Keyword-stuff your alt tags
  2. Publish infographics without a text-based alternate

3. Write clear and actionable error messages

A Google Docs error message, which reads:

What are these “megapixels” you speak of!?

There’s a lot to keep in mind when you’re building accessible forms. (As you’ll see in this article on building accessible forms.) But a key element for any content strategist—and your users—is error messaging.

As WebAIM notes, error messages:

Should clearly describe the errors that are present and, optimally, include cues or instructions for resolving them. For example, ‘Course number is not formatted correctly’ is not as helpful as ‘Course number must be a 3 digit number’.

When writing error messages, don’t just describe the problem, but focus on how to fix it. In most cases, you don’t even need to belabor the point that there was an error: just focus on the fix, and do it clearly and succinctly.

All your users, sighted and otherwise, will appreciate the clear guidance on what to do next.

Writing accessible error messages

Do

  1. Indicate that there was a problem (implicitly or explicitly, though implicitly is generally more efficient—see below for more on that)
  2. Explain how to fix it

Don’t

  1. State that there was an error without explaining how to fix it
  2. Refer to an entry as “valid” or “invalid” — this may seem perfectly acceptable in the abstract, since you’re simply stating that an entry doesn’t fit the requirements you’ve defined for a field. But in the concrete, you’re calling someone’s name or gender invalid. And that’s just … well, do I have to explain?

Error message for a last name field that reads

‍However you write error messages, for the love of humanity, don’t do it this way.

Implicit vs. explicit error messaging

As I mentioned above, all error messages should do two things:

  1. State that there was an error
  2. Explain how to fix it

But you can easily achieve both goals in one message by implying that there was an error. For example, we could state an error message in the following ways:

  1. Explicitly, without direction: Course number formatting is incorrect.
  2. Explicitly, with direction:Course number formatting is incorrect. Please enter a 3-digit number.
  3. Implicitly: Please enter a 3-digit course number.

Option 1 explicitly states that there’s an error, but doesn’t make clear how to fix it. Option 2 is also explicit, but adds a way to fix the problem, so it’s an improvement. Best of all is 3, which implies that there was a problem by explaining how to fix it.

4. Write clear, descriptive headings

Just as a screen reader allows people to skip from link to link, they can also skip between headings, ignoring the copy between.

Now, imagine that experience with the majority of websites out there. Do you think you could clearly infer the topic of every section of a given web page without referencing the body copy or links?

The Square website, with body copy removed.

Square’s homepage, stripped down to headlines.

Personally, my answer’s “sometimes?” To quickly run through the Square page above:

  • “Start selling today” — super clear. I get that this is where I’d get started if I wanted to.
  • “Start, run, and grow with Square” — clear … ish. Clarifying the object — your business — would’ve helped a lot here. Without context, it’s not obvious what you’re starting, running, or growing.
  • “Accept every way your customers want to pay” — Clear … at least until I get to “Stand.” What the hell’s that?

Write clearer headlines and subheadings

As an exercise, I’d suggest turning off all your non-headline copy layers (if you’re using a desktop app like Sketch or Photoshop) or briefly turn your

tags to your page background color (if you’re using Webflow).

Now read through all your H tags, asking yourself with each: am I being clear enough with this headline alone?

If your answer’s no, it might be time for a rewrite.

Sometimes, you have to embrace length

Note that aiming for clarity in headlines often means using more words. I realize that might run counter to your impulse to create “clean” websites, but it’s worth asking yourself:

Is it more important that this site look clean, or that it give people all the info they need?

5. Optimize your form content

Two form designs, one with labels above the fields, the other with labels within the fields

From Andrew Coyle’s excellent article, “Design Better Forms.”

Forms may not be sexy, but they are the heart of product design, and the right content can make them vastly more usable — and accessible — for everyone. Here’s a few ways to do that:

Do

  • Indicate which fields are optional in the form label (so screen readers will transmit that information in-line). I know we’re more used to marking required fields, but you should really only be using required fields, so there will typically be fewer optional fields to mark, and hence less clutter.
  • Make button copy specific to the action taken (don’t use “submit” — unless that’s actually what a person is doing, which is often the case with literary magazines and blogs that take external contributions).
  • Display basic helpful content. E.g., if a password has to be 9 characters long, use an uppercase letter, and a special character, tell people that! And don’t hide it in a tooltip.
  • Group related information. You’ve seen the standards: email and password, physical address, credit card info, etc. If it all comes together to form a greater concept, group it.

Don’t

  • Use in-field / placeholder labels, unless they translate into a persistent label on click (rather than disappearing), a common technique on Google sites.

A more accessible web is a better web for all

Making your website more accessible to the disabled has a fringe benefit: It can actually improve everyone’s experience of your websites.

After all, a screen reader skipping from heading to heading, or link to link, behaves a lot like we all do the on the web: not consuming everything, but scanning for the specific info we need.

If you’d like to learn more about accessibility, look for an accessibility meetup group in your area, check out The Accessibility Project, and follow Jennison on Twitter.

Improve your CSS with these 5 principles

• improve, principles
improve-your-css-with-these-5-principles


twitter logo
github logo
・5 min read

Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS?

As the project scope increases and as the number of people working on the project increases, the problems become more and more apparent and can cause serious issues down the line. Fixing issues may become harder, duplicated code, complex override chains and use of !important, leftover / unused code (removed elements or features), code that is hard to read, etc.

Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We’re going to look at the five simple and very effective principles that will take your CSS to the next level.



Naming principle

“There are only two hard things in Computer Science: cache invalidation and naming things.” — Phil Karlton

Properly naming and structuring your CSS selectors is the first step to making your CSS more readable, structured and cleaner. Establishing rules and constraints in your naming convention makes your code standardized, robust and easier to understand.

This is why concepts like BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object Oriented CSS) are popular among many frontend developers.



Low specificity principle

Overriding CSS properties is very useful, but things can go out of hand pretty quickly on more complex projects. Overriding chains can get really long and complex, you might be forced to use !important to solve the specificity issue and you could get really easily lost when debugging or adding new features.

/* Low-specificity selector */
.card {}

/* High-specificity selectors */
.card .title {}

.blog-list .card img {}

.blog-list .card.featured .title {}

#js-blog-list .blog-list .card img {}



Browser and specificity

One of the benefits of following the low specificity principle is performance. Browsers parse the CSS from right to left.

Let’s take a look at the following example:

Browsers parse the selector like this:

  1. Find all img elements on the page
  2. Keep selected elements that are the descendants of .card class
  3. Keep selected elements that are the descendant of .blog-list class

You can see how high-specificity selectors impact performance, especially when we need to globally select generic elements like div, img, li, etc.



Using the same level of specificity

By using low specificity CSS class selectors in combination with BEM or one of the other naming principles mentioned in the previous section, we can create a performant, flexible and understandable code.

Why use CSS classes? We want to keep the same level of specificity, stay flexible and be able to target multiple elements. Element selectors and id selectors do not offer the flexibility that we need.

Let’s rewrite our previous example using BEM and keeping specificity low.

/* Low-specificity selector */
.card {}

/* Fixed high-specificity selectors */
.card__title {}

.blogList__image {}

.blogList__title--featured {}

.blogList__img--special {}

You can see how these selectors are simple, understandable and can be easily overridden and extended if needed. And by keeping them low-level (a single class), we are guaranteed optimal performance and flexibility.



DRY Principle

DRY (Don’t repeat yourself) principle can be also applied to CSS. Duplicated code in CSS can cause code bloat, unnecessary overrides, reduce maintainability, etc. This issue can be fixed by structuring the code appropriately and having high-quality documentation.

Storybook is a great free tool that enables you to create an overview of available frontend components and write high-quality documentation.

/* Without DRY Princple */
.warningStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eba834;
}

.errorStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eb3d34;
}

.form-errorStatus {
  padding: 0.5rem 0 0 0;
  font-weight: bold;
  color: #eb3d34;
}

Let’s refactor the code so it follows the DRY principle.

/* With DRY Principle */
.status {
  padding: 0.5rem;
  font-weight: bold;
}

.status--warning {
  color: #eba834;
}

.status--error {
  color: #eb3d34;
}

.form__status {
  padding: 0.5rem 0 0 0;
}



Single responsibility principle

By using the single responsibility principle in our CSS, we can ensure that our CSS classes are easily extended and overriden. Let’s take a look at the following example.

.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

We can see that if we want to extend .button class with .button--secondary, we are doing lots of overrides to achieve what we need, when we only want to apply a different background color and keep the default styles.

The problem is that our .button class is having several roles:

  • Sets layout (padding)
  • Sets typography (font-size,font-weight)
  • Sets presentation (color,background-color, border-radius)

this makes our CSS classes very hard to extend and combine with other CSS classes. By keeping this in mind, let’s use BEM and OOCSS to improve our CSS.

/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}

We have broken down our button styles into several classes that can be used to extend the base button class. We can optionally apply the modifiers and add new ones as the design changes or new elements are being added.



Open/Close principle

software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

We’ve already used the open/close principle in the previous examples. All new features and options need to be added by extension. Let’s take a look at this example.


.card {
  padding: 1rem;
}

.blog-list .card {
  padding: 0.5em 1rem;
}

The .blog-list .card selector has few potential issues:

  • Some styles can be applied only if the .card element is a child of .blog-list element.
  • Styles are forcibly applied to the .card element if placed inside the .blog-list element, which can produce unexpected results and unecessary overrides.

Let’s rewrite the previous example:

.card {
  padding: 1rem;
}

.blogList__card {
  padding: 0.5em 1rem;
}

We’ve fixed the issue by having a single class selector. With this selector, we can avoid unexpected effects and there are no conditional nested styles.



Conclusion

We’ve seen how by applying these few simple principles we have significantly improved the way we write CSS:

  • Standardized naming and structure, and improved readability by using BEM, OCSS, etc.
  • Improved performance and structure by using low-specificity selectors.
  • Reduced code bloat and improved code quality with DRY principle
  • Flexibility and maintainability by using open/close principle
  • etc.

Thank you for taking the time to read this post. If you’ve found this useful, please give it a ❤️ or ?, share and comment.

One last thing:

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It’s free, open source, devoted to the open web, and will never have popups or a pay wall.

Get Started Now


adrianbdesigns profile

Adrian Bece

React, Frontend, Magento 2 certified developer. Magento PWA Studio contributor. Rock and metal music fan. Reads Dune, sci-fi novels and Calvin & Hobbes. Creates amazing interfaces @ prototyp.digital

Classic DEV Post from Dec 12 ’18

Improve remote collaboration: 5 techniques for UX designers

• improve, remote
improve-remote-collaboration:-5-techniques-for-ux-designers

Our friends at Miro — a visual collaboration platform — are experts when it comes to managing distributed teams. Today the Miro team shares five high-impact processes to improve collaboration and communication when it comes to distributed or remote UX designers.

Leading tech companies are the first to test out innovative methods of work, so it’s no surprise that they’re also beginning to be more distributed. This approach allows them to attract the best talent worldwide while reducing costs.

However, being distributed can create new challenges, especially for UX design and research teams who often rely on rituals and methods that are hard to replicate online — i.e. customer journey mapping and clustering research findings on a whiteboard to syncing with product and development teams.

To help UX designers overcome communication barriers that arise from working within a distributed team, we’re digging deep into how other leading tech companies are solving these problems and making it work.

1. Empathize with your teammates to build trust

A big part of achieving alignment on a remote team is thinking about how different cultures work, and encouraging teammates to ask questions and be proactive communicators. Supporting your team and understanding their communication style will help keep everyone on the same page.

A good way to find out what works best for each individual is to ask the team to create personal manifestos. Each person outlines their preferred communication tools, ways to give and receive feedback, and even pet peeves. This simple exercise can encourage everyone to be more open and vulnerable, and gives teammates some context for understanding each other.

Erin Casali, Design Principal at Automattic:

“Certain country cultures create different expectations, and certain languages, when translated to English, might subtly change the tone. In some cultures, discussions tend to be very dry and factual; short sentences, sharp language, no acknowledgment of context beyond the specific answer. For someone who comes from a different culture, this can be read as very distant, detached, even rude or impolite; but it’s just a cultural difference.”

2. Create rituals & establish a source of truth

Distributed teams don’t have the opportunity to share quick updates by a watercooler or during lunch. And if they work in different timezones, it’s generally harder to sync and react quickly if there are any blockers. Distributed teams are more prone to working in silos and struggling with miscommunication because some real-life conversations can naturally happen in different hubs. However, it’s hard to communicate the outcomes of these conversations to people in different locations. Establish regular rituals for the whole team to share updates, insights, and concerns and document anything that happens at the meeting or even outside of it when it affects the whole team.

Prianka Rayamajhi, Lead Product Designer at Pinterest:

“We have our regular rituals like grooming sessions and retros. Also, having a source of truth or a living history of its accomplishments is vital for a team. Having some sort of outline of your team’s process is really going to give your team purpose. I think it’s important to start mapping out those sorts of processes.”

3. Protect your time from empty, actionless meetings

It’s okay to leave a meeting if you don’t know why you’re there within the first five minutes. Another best practice is agreeing that all the meeting hosts must have an agenda when they are sending invites — that way, everyone has a chance to prepare for the meeting and spend time efficiently. Some meetings are hard or impossible to eliminate, so another good tactic is to block time on your calendar for focused work — alone or together with your team.

Ben Holland-Arlen, Senior UX Designer at BOLD:

“I’m sure many people have this calendar problem where their life is in 30-minute chunks all day long, with a 30-minute lunch. If me and my team are all working on the same problem, wherever we are – we’ll turn on the camera, have a quick discussion for 20-30 minutes, then keep the camera on for a few hours while we’re working. It’s been amazing because it feels a lot more like when you’re working side by side. It’s so powerful and so simple.”

4. Mimic the in-person collaborative experience

A lot of people working within distributed teams experience a fear of missing out. They wish they had a mentor or a friendly chat with a teammate who is remote or located in another hub. It’s harder for distributed teams to bond, cheer each other on, or learn from each other, so setting some time for mentorship calls, ‘Friday wins’ meetings, our even virtual happy hours can be a good idea.

Summer Kim, Head of Research at WhatsApp:

“It is important to have local leadership for your team in the remote office. And also encourage and help people to find great mentors (it could be more than one or two) in the local office as well as the headquarters. I’ve had many mentors, coaches, and advisors throughout my career, and I think it is particularly important for those who are working from remote offices.”

Exchanging tools, techniques, and insights is critical for improving any team’s productivity, but it’s especially important to be proactive about it in distributed teams. In general, it’s hard for information to travel across several hubs and timezones.

When you’re having one of your team rituals, make sure key insights are recorded in a central hub that every team member can refer to synchronously or asynchronously. Encourage comments and questions. Capturing the conversations that happen in remote meetings is key to keeping everyone aligned and moving forward as one team.

Jessica Drizin, Senior UX Researcher at Upwork:

“A lot of our job is empowering the design and product teams to conduct their research. We started implementing a weekly research review, which is open to researchers and non-researchers, so designers and product managers that want to take more ownership of their research can join in. We listen to what problems they’re working on, any methodology that they propose, and we offer advice around the best methodology, or even if research is warranted at that stage.”

Conclusion

At the end of the day, you can’t avoid the challenges that arise from working within a distributed team. However, you can lean on the tactics that other successful companies use regularly to make collaboration work effectively for them. Of course, don’t shy away from tweaking these processes as needed, and make an effort to customize them so they work for your specific team. Good luck and happy collaborating!

Ready to level up your remote collaboration and better connect your product teams? Join us and the fine folks from Slack, Atlassian, LinkedIn, Dribbble, and more at Distributed 2019, a free virtual summit for product teams, hosted by Miro.


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

How to improve your typography skills

• improve, typography

Learning about type doesn’t need to be daunting.

Dave Smyth

Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice-looking fonts and hoping for the best.

Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.

Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?

There’s no quick fix, but here are 20 top resources for web typography today.

The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.

Practical Typograph

A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.

The Elements of Typographic Style Applied to the Web

A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.

Typewolf

One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.

Rafal Tomal

Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.

Better Web Type

A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.

OpenType Features in CSS

OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.

These tools can help you decide and improve on typographical choices.

Modular Scale

If you want your font sizes to feel coherent, rather than random, a scale can help.

Tanaguru Contrast Finder

To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.

Font Playground

This tool lets you experiment with variable fonts and their different feature sets.

Font Style Matcher

If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.

There’s more to life than Adobe Fonts, Google Fonts and Monotype.

Use & Modify

A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.

Open Foundry

This is another collection of high-quality open-source fonts.

Font Stand

I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.

Typewolf

I know, this was mentioned above…but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration — a fantastic resource.

Typespiration

Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.

Font Combinations Library

A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.

FontPair

Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif serif, sans-serif serif, etc).

Typ.io

What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.

Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.

These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.

Axis Praxis

Variable Fonts

There are lots of resources to get you started here, wherever you are on your typographical journey. Type on the web has many nuances and CSS developments mean there are always new things to learn.

If there are other resources you’ve found to be particularly useful, I’d love to hear about them in the responses.

Improve customer experience with scenario analysis

• Customer, improve
improve-customer-experience-with-scenario-analysis

Imagine this situation. Your company has asked you to investigate and recommend a new marketing technology. For the sake of conversation, let’s say a podcast hosting platform that will integrate with your website. You complete some initial research, talk with some colleagues, reach out to your LinkedIn network and identify a list of potential providers and some basic cost information. You make your recommendations and your leadership team gives you the green light to complete the due diligence and make a final recommendation. 

After the initial review, you narrow the list down to a select group you want to learn more about. You go to each provider’s website but there’s no real way to interact with your shortlist of providers. You send a few email messages to general mailboxes but the response is slow or not at all. There are no phone numbers on the sites or any chat options for the providers on your short list. Eventually, after more searching, you finally find some phone numbers. You call up the providers, but you cannot reach a person. In one case, there is voicemail and you leave a message. In the other, the message tells you the representative is away and will not be responding to voice mail for at least a week. You call back and are informed there’s no one else to talk with. 

In the age of the customer and the engagement economy, successful companies are customer-centric and proactive in how they address the customer experience. Today customer experience is a competitive differentiator for every company. A Gartner Customer Experience (CX) study declares: “Customer experience is the new marketing battlefront. More than two-thirds of marketers responding in the study indicated that their companies compete mostly on the basis of CX. And in two years’ time, 81% say they expect to be competing mostly or completely on the basis of CX.”  A study by VisionCritical claims that by 2020, the customer experience will overtake price and product quality as the key brand differentiator. 

Think about the above situation: The prospective buyer is frustrated. The prospective provider has potentially lost a long-term customer. Most people once they select a platform and complete the integration are unlikely to switch. As a potential provider, had you employed scenario analysis you might have been able to anticipate these types of experiences and put processes in place to avoid them. 

Are you ready for customer experience to be your differentiator? If so, then one valuable step is to tap the power of scenario analysis. 

Scenarios describe a set of possible events. They are powerful tools for understanding potential business situations, such as customer experience, and then developing appropriate strategies for each of them. The value of scenario creation is that it allows you to consider a range of possible outcomes and drivers of change. This is extremely helpful for improving customer experience. If you can anticipate a potential customer experience problem, you can modify your business process before the problem occurs and costs you a customer.

Scenario analysis focuses on analyzing possible future events. The use of scenarios by companies is not new. Companies have been employing the concept of scenario analysis since the 1970s, and it is an essential capability for any company invested in and aspiring to achieve agility. 

The fundamental ingredient for scenario analysis – whether to anticipate, plan and improve customer experience or some other aspect of the organization – is developing the scenarios. Creating scenarios is both art and science. The science side of the process requires data and timing information. Scenarios to support real-time marketing and customer experience can be created based on the answers to the following types of questions. 

  • What data can change regarding customers, the market, and the competition? By how much?
  • What data are predictive of a key prospect or customer behavior?
  • What data are essential for effectively engaging with customers and prospects?
  • What data are required to support a consistent cross-channel customer experience?

Imagination is all you really need to use scenario analysis. The goal is to create as many different combinations of potential events as you can conceive. Then, by analyzing each potential scenario, you can assess its likeliness to occur and decide what, if any, proactive action is necessary. Join my upcoming session at MarTech East in Boston to learn more about the principles of and process for creating and analyzing your scenarios, with a focus on using this approach to make the customer experience one of your competitive differentiators. 

More about the MarTech Conference

Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.


About The Author

VisionEdge Marketing, founded in 1999, and is recognized as one of the pioneers and authorities in the Marketing Performance Management (MPM) discipline. The company specializes in helping companies apply data, metrics and proven best-in-class practices to accelerate growth, create customer value and improve performance.
Laura and VisionEdge Marketing are all about making marketing an engine of growth for organizations. Martechexec selected Laura as one of the top 50 women in marketing technology. Laura is honored to be among the Top 20 Women in Business according to the Sales Lead Management Association. Engagio identified Laura among the top marketing operations leaders to know. Laura has served on the University of Texas McCombs School of Business Masters of Marketing Science Advisory Board.




Want to improve your marketing operations? Make everyone on the team a coach

• improve, Marketing
want-to-improve-your-marketing-operations?-make-everyone-on-the-team-a-coach

Marketing operations are the driving force behind a company’s marketing technology implementations and processes. Successfully managing complex marketing operations efforts takes a capable, agile and tech-savvy team, which is difficult to build and maintain in today’s constantly evolving martech space.

“There are so many different systems and processes happening concurrently that it’s easy for critical things to go undone or breaks in the systems to go unnoticed,” said Kimi Corrigan, head of marketing operations for Duo Security at Cisco, “There is no room for ambiguity around responsibilities or communications in this function.”

Corrigan said she wants her team to always feel ownership over their work while, at the same time, knowing they have her full-support when needed. To keep her marketing ops team operating at full tilt, Corrigan centers her management style on coaching versus managing.

Next month, Corrigan will do a deep dive into how she leads Duo’s marketing ops team during her “How to Organize and Coach Outstanding Marketing Operations Teams” talk at our MarTech Conference in Boston. In advance of her session, Corrigan offered insights into her managing style, how she onboards new employees and why radical candor is a must.

Make everyone a coach

“Marketing operations teams are tasked with a unique and vast set of responsibilities. People on my team have such a wide range of skills that they need to apply in many different ways,” said Corrigan, “Continually coaching alongside of them as they navigate this wide breadth of projects and interactions tends to yield great results rather than just managing in a traditional sense.”

Corrigan makes sure everyone on her team shares coaching responsibilities.

“I work to coach each person on my team as it relates to their responsibilities and skill-set, and encourage each of them to own coaching those on our team whenever they have an opportunity.”

In addition to coaching other members of the marketing ops team, her staff is also encouraged to coach others they may be working with on cross-functional projects.

“The more we all learn, the more we all win. When this coaching mindset is known to be in practice, these interactions don’t come off as telling others what to do, but as let me help you, and also, please help me.”

Comprehensive onboarding for new employees

As part of her coaching methodology, everyone on Corrigan’s team is involved with the onboarding process for new employees.

“Our team uses a 12-week onboarding process with specific systems, tasks and goals laid out week-to-week. When we have a new team member, we clone our onboarding template and spend time customizing it based on the specific role and experience.”

New staff members are introduced to different systems and meet with cross-functional teams and are also required to take initiative and schedule time with employees — both within marketing ops and external teams.

“From the beginning, I believe it’s important for those new to the team to take ownership of their day-to-day and contributions to the organization,” said Corrigan.

Leading with radical candor

For Corrigan, a key to successfully managing a team is being able to give and receive honest feedback.

“Radical candor can be hard to deliver sometimes, but the more you practice it, the safer it becomes,” said Corrigan, “The first few times you share this feedback, you may see fear or defensiveness. But once you coach them through why they are getting the feedback — what you and their teammates are going to do to help them work through it, and what the expectations are — you will see them begin to welcome open and honest conversations in both directions.”

She said she practices this code of honesty with her team and encourages them to practice it as well — both with her and other staff.

“Set the expectation that their team and work is a safe place to try, fail, succeed, try again, share and celebrate.”

More about the MarTech Conference


About The Author

17 Tips to Improve Your Design Skills

• Design, improve
17-tips-to-improve-your-design-skills

As a designer you have to constantly work on your design skills. This is the only way to stay relevant. Improving your design skills will also help you attract new clients, or employers, and create new work opportunities. These 5 tips will help you with it. Learn them, use them, improve your design skills and become a better designer.

17 Tips to Improve Your Design Skills and Become a Better Designer Part 1.

Learn about something different

There are two general ways to improve your design skills. One is by getting better at what you already know. You are already quite good in design. Now, getting better doesn’t require that much effort and time as you had to put in in the beginning. Thanks to this, this way is the easier, safer and more comfortable option to improve your design skills.

Unfortunately, there is always some ceiling, or limit, to how much you can get. Sooner or later, you will hit this ceiling. When this happens, any progress you can make by improving what you know will be very small. At worst, paradoxically, you will not make any progress at all. Your design skills will be so polished addition training will have no effect.

Cross the borders of your expertise

Fortunately, there is a way to overcome this plateau. The solution is by trying something different. You have to start experimenting with areas where you are not that good, or where you have no experience at all. Whatever your area of expertise is, take that risk and try something where you are a beginner.

For example, if you are very good at web design, start learning about print design. Or, take a look at user experience design. Another, more distant, option can be game design. These experiments may seem like a waste of your time. Yet, in the majority of cases, they really work.

When you step into different, less or more distant, area not only will you learn new knowledge. You will also be able to look at what you know from different perspective, from different angle. Thanks to this, you will be able to come up with more, and more innovative, ideas.

Another reason this works is that, at least in design, there are universal principles you can apply across different fields. This is why experimenting in related areas of your expertise is not a waste of time. Principles you learn in one area you can transfer into another.

What’s optional here is necessary there

For example, let’s say you give it a shot and start learning about print design, aside to web design being your main trade. Print design has a lot in common with web design. You have to learn about, and understand, the theory of grid, layouts, composition, colors, typography, etc.

The thing is that there are some nuances you will learn in print design and not in web design, or you will not focus on them as much as you would otherwise. There are many web designers who know only a little about typography. Leading, kerning, x-height, cap and similar terms say nothing to them. In web deign, this is not a big problem.

In print, understanding all these terms is not optional. It is a necessity. If you don’t know these terms, you are screwed. The same applies to graphic design. Anyone can call himself, and work as, web designer just because he knows how to create decent layout with Bootstrap.

In graphic design, you need to really understand the theory of grid, layout and composition. What may be optional in web design is often necessary in graphic design, or print. Now you know why many web designers have a hard time getting started in other design disciplines. They skipped the, back then, optional stuff.

Crossing the borders of your expertise is not a waste of time. Nor is it detrimental to your design skills, rather the opposite. These experiments are just another way to gain new knowledge you can apply in the area of your expertise later. It doesn’t matter if it is graphic, print, web or game design.

All these, and other areas, are still parts of the same discipline, design. This means that what you learn in one of these areas you can often apply in other areas as well. What’s more, these learning experiments can actually help you become a better designer. They will help you see things from different perspectives and angles.

You will be able to consider elements others would not even think about. You will also be able to step in others’ shoes more easily. This is also why it is beneficial for designers to take at least few lessons in programming, and the other way around. It helps to see the same thing from different angles, as a designer and as a programmer.

So, don’t restrict yourself only to your main area of expertise. Experiment, learn about other areas and let it shape the way you think and design. The best places to start with are already mentioned print, graphic, user experience, game and web design. Another great sources of knowledge are psychology and sociology.

After that? If you nailed all these areas? Whatever you want. Be it cooking, music composition, history, economy, mathematics, biology, programming. There is something useful you can learn in every area. Forget any prejudices, keep your mind open and be like a sponge.

Experiment

Stepping outside the area of your expertise may still seem to be too risky. What if you want to improve your design skills, but you want to play it safe and stick to what you know? Or, at least minimize the risk? Well, there are two important things you have to understand. First, design is about taking risks.

Design is about creating ideas and shaping things in your own way. Design is about solving problems in a way that is specific to you. If you don’t like this idea, get used to it. The sooner the better. The second thing is that you can develop you own style only through, often relentless, experimentation and willingness to be different.

Think about all great designers, artists, etc. you know, or find some “top X” list. All these people developed their own style. This is why, when you see one of their works, you can recognize the author. The only way to achieve this is through experimentation. You have to be willing to play with different ideas to see what you like and what you don’t like.

So, open Sketch, Photoshop, Illustrator, VS Code, Sublime Text or grab a pen and paper. Use whatever tool you like to use to design. Next, experiment. Go crazy. Shadows, flat design, brutalism … Take different concepts and mix them. Or, take one concept and subtract something, or add something new. Forget any restrictions and boundaries.

Forget perfection, for now

When you experiment, don’t put too much pressure on yourself. Don’t try to make everything look and feel perfect. Remember that everything you create is only for you. No one else has to see any of it, unless you want it. This is a safe space. A place where you can unleash your creativity and playfulness.

Also, don’t feel bad or unproductive. Remember that all these experiments have a clear goal. You are not doing it just to “kill time”. You do this to improve your design skills. Remember that trying new things and relying on your knowledge of design allows you to develop with your own unique style.

This, in turn, will help you set yourself apart. Also, it will help you discover novel and innovative solutions to known problems. You can use these solutions in your work. This will help you deliver more value to your clients, employer and teammates. This can help you establish yourself as the “go-to” person for innovative designs.

Fail fast, fail often

There’s a saying, in the world of web startups: “Fail fast, fail often”. In other words, it is only by trying out a lot of experiments you can find out works best. The same applies to design. You have to constantly try new and different ideas and test in practice in order to find those that work and those that don’t.

Unfortunately, this approach is not as widespread among designers as it is on the startup scene. When something becomes trend, 99% of designers immediately start filling their portfolios with designs built on that trend. Only few will look beyond the trend, mix it, skew it, or change it in some way. The majority plays it safe.

What you should do instead, not only to improve your design skills, but also to improve your visibility and uniqueness, is going the other direction. When new trend enters the scene, don’t just follow. Instead, experiment with it. Add, subtract, reduce, skew, mix, transform, mock. Take that trend, unleash your creativity, and take it further.

Try different media, techniques and styles

Aside to experimenting with trends, there is another great, and relatively safe, way to improve your design skills. Experiment with different media, techniques and styles. If you always use the same typefaces try different. The same applies to colors, styles and layouts. Stop doing it the old. Mix things up and try something new.

Since this is your personal laboratory, don’t be afraid to break some conventions, or all of them. Remember, this is about experimenting, it is about trying and seeing what works. So, feel free to break rules and see what happens. Try a crazy new typeface. Play with 3D. Use illustration instead photography. Use twice as much of whitespace.

Throw all conventions, guidelines and rules out the window

Take all conventions, guidelines and rules and throw them out the window and see what happens. Most of the time, your experiment will probably fail. That is okay. There is no such a thing as a complete failure. Everything is learning opportunity. When experiment fails, you know what doesn’t work. Otherwise, you know what works. In both cases, you gain.

When you think about it, you can’t really loose. If experiment fails, you learn. If experiment succeeds, you learn. You are always winner. What’s more, the very process of experimenting will help you free up your mind. It will make it easier for you to see which parts of your design skills need improving, and why.

Lastly, experimenting is good not just for improving your design skills. It can also help you become more independent. It will help you learn how to take risk, take initiative and act on your own. You will no longer be afraid of taking on challenging project. You will know that you can handle them. You will know that can find a solution through trial and error.

If you are looking for some way to boost your confidence, this might be it. The best part? It is not the “fake it til you make it” type of confidence. This is based on your previous, rock-solid, experience. So, give it a try. And, remember, there is no such a thing as complete failure. Whether experiment fails or succeeds, you learn, you win.

Work on side projects

Whether you work for someone, as a freelancer or you have design agency you are probably doing the same thing over and over again. This is also why your design skills will soon stop improving. By now, you know the value of learning something new and experimenting. The question is, how can you make this easier?

The answer is simple. Set aside some time and start working on side projects. You can just decide to experiment and tinker or try to learn something else. Another, easier, way to approach this is by setting a specific goal for yourself. Or, create a specific project for yourself that will serve as a sandbox for your experiments.

You want to experiment with typefaces or grid layouts? Great. Create some web design side projects. Or, you can build some app or design a magazine cover. Whatever it is, the important thing is that it will help you explore the areas you want to experiment with. The best is if it is something personal to you, a passion project.

Why is this approach better? When you experiment with, or learn about, a single idea it can seem boring and repetitive. Think about the majority of things you have to learn about as school. Did you really enjoy any of them? Probably not. Don’t make the same mistake your teachers did. Don’t turn the work you love into a thing you hate.

Instead, use side project to make it a game. Gamify your learning process, literally. Decide what you want to learn, practice or experiment with. For example, learning about user experience design. Then, set a clear goal for yourself. For example, design an app that will feel intuitive, user-friendly and simply lovable.

However, don’t think about it is a fun. Instead, think about it as a real project for a real client. You can even create a brief to make it more realistic. Who knows, you may one day actually get a chance to work on such a project. Then, you will think back to that side project you once did for yourself and you will thank yourself for it.

One more thing, give yourself a deadline. It is easy to start something and work on it forever. Don’t follow this path. Instead, give yourself a serious deadline. In the end, every real project has a deadline. So, apply the same logic to your side projects. Every you start must have a clear deadline. Otherwise, don’t start it.

This will not only help you improve your design skills, by learning new things. It will also help you learn the other side of your design job, being punctual. By the way, did you know that Unsplash and Slack started as side projects? Who knows, maybe one of your side projects will also get traction and become something bigger. So, give it a try.

Master your tools

Tools of the trade are one of the last things you should focus on when you want to improve your design skills. Why? Tools themselves will never make you a better designer. You will not take your design skills to the next level just because you start using Photoshop, Sketch, Figma, etc. Although, something like this would be really good.

There are two main things that determine the quality of your work. The first one is your design skills. The second is how well you know the tool you work with. This is why premature focus on tools is a waste of time. If your design skills are not honed enough, no tool will help you create great designs.

That being said, design skills are useless if you need half an hour just to setup your editor. This is also why many designers can make any progress. They are constantly chasing that new shiny tool, instead of sticking to one and mastering it. There is nothing wrong with trying different tools to find the one you will like working with.

However, that doesn’t mean you change you tools as often as you change your socks, or even more often. Doing so may help you with FOMO, but that’s about all it will do for you. So, stop chasing every shiny tool that comes around. Instead, find one (or two) that fits your needs and stick to it. Then, take the time and master it.

Learn all its shortcuts and how to use it effectively. The time you spent on learning is time you save during the work. Remember, the quality of your work is primarily determined by the level of your design skills. However, the level at how well you know your tools determines how fast can you work.

You can be the best designer in the World, but if you work with tool you don’t know it will limit you. It will probably not make your designs worse. However, it will slow you down, significantly. This might be just as bad as producing bad work. Don’t allow this. Find the tool that suits your needs, stick to it and master it.

Practice daily

You can get better only in things you do often, preferably every day. So, if you really want to improve your design skills, you should work on them every day. This may seem like a big investment in terms of both, time and effort. However, the dividends you will get in the future are definitely worth it.

What’s more, the more of your time and effort you invest the higher the dividends will be. So, set aside at least a little bit of time every day to work on your design skills. Before you do that, two things. First, work only on things you don’t know well or at all. Don’t waste your time on things you’ve already mastered.

Second, make it a deliberate practice. Don’t multitask. Don’t half-ass your practice. Turn off all notifications, close and remove everything you don’t need for your practice session. Focus solely on the task at hand and ignore everything else. Remember, practice doesn’t make perfect. Only perfect practice makes perfect.

Use Pomodoro technique

One easy way to start with this is by using Pomodoro technique. First, choose a subject you want to improve or learn. Second, get a timer and set it to 25 minutes. Third, start. Work on that subject, and your design skills, until the timer rings. No distractions or multitasking. Focus solely on your practice.

When the timer rings, stop your work and take a break, usually about five minutes long. During this break don’t immediately jump on social media or immerse yourself in an ocean of distractions, or other things. Just give your brain a moment to rest and replenish energy. When the break is over, you can either get back to practice or do something else.

If you decide to get back to practice, follow the same steps, i.e. 25 minutes of work followed by five minutes of rest. When you repeat these steps four times, or do four pomodoros, take a longer break before you start another, fifth, session. This break is usually around 15-30 minutes.

You can repeat this process as long as you want or as long as you can fully focus on your practice. Remember, it is only deliberate perfect practice what counts. If you can no longer fully focus, stop. Don’t waste your time and don’t burn yourself out. Call it a day and try it again tomorrow.

Epilogue: How to improve your design skills

This is it for today. Now it is time for you turn. Take what you’ve learned today and apply it. That is the only way you can start improving your design skills. Reading about, and learning, tips is the beginning. You also have to take the next step and apply what you’ve learned so far. Otherwise, you will never make any progress.

The question is, what will you start with? Will you cross the borders of your expertise and learn about something, more or less, different? Maye you want to take a little bit safer road and start experimenting with ideas, techniques and styles. Or, you can gamify it and start working on some side project.

Maybe your design skills are quite good and you need to learn more about the tool(s) you are using at work. Whatever it is, promise to yourself that you will dedicate at least a few minutes every day to focused and deliberate practice. In the end, you get better only at what you do often.

If you liked this article, then please consider subscribing.