5 Design & Development Skills to Learn This Summer

Summertime is here – at least in the northern hemisphere. And while our thoughts often turn to vacations and outdoor activities, this time of year is also a perfect opportunity to learn something new.

Web design and development is ever-changing, with new techniques and technologies coming out all the time. This places us in a constant struggle to figure out where to train our focus. Nevertheless, it’s critical that we continue to educate ourselves in order to level up our skills. After all, the future waits for no one.

With that in mind, let’s take a look at 5 design and development skills worth your time this summer. While you may already be familiar with them, there’s likely at least some aspects of each that you’ll want to explore more deeply.

1. CSS Grid

For some of us, there’s always a little trepidation when working with new CSS goodies. We want to use the latest features, but there’s also the fear of leaving out users on older tech. But there also comes a point when we simply need to take advantage of something that’s better than what we’ve been using.

The time has come for CSS Grid to be widely adopted. It’s no longer an edge-case, as the last several versions of all major browsers have supported this powerful new layout feature. And the advantages of using it are just too great to ignore.

CSS Grid makes even the most complex layouts possible without the need for overly-complicated code. The syntax takes some getting used to, but really is quite simple once you get the hang of it (a major improvement over the useful-but-finnicky Flexbox). This one is here to stay and will be an important part of a designer’s repertoire for years to come.

Learning Resources:

• 50 Cheatsheets, References and Guides for CSS
• Getting Started with CSS Grid
• Grid by Example
• Layoutit! CSS Grid Generator

2. JavaScript

Indeed, JavaScript has been with us for quite a while. It’s a language that has many flavors and popular frameworks that we leverage to enhance our sites. But it’s also becoming even more important as some new tools are bringing JS out of the background and into the spotlight.

For one, the new WordPress Gutenberg editor relies heavily on JavaScript for the creation and use of custom content “blocks”. That the world’s most widely used CMS is turning to the language is reason enough to take a deeper dive into it. But it’s also, in one form or another, powering all sorts of web applications these days.

That does make it a bit more difficult to decide where to focus your energy, though. Some applications are tied to specific frameworks such as React or Vue. So, where you spend your time should really be specific to what you want to accomplish. If your desired skill requires knowledge of a framework, that should point you in the right direction. Otherwise, there’s nothing wrong with learning the fundamentals of plain old vanilla JS.

Learning Resources

• Coding for Designers
• Learn JavaScript
• The Modern JavaScript Tutorial
• Top Cheatsheets and Reference Guides for JavaScript

3. Micro-Interactions

Among the finer details of design are micro-interactions – those little visual cues that go along with various user actions. It might be the effect you see when clicking a button, providing visual confirmation of what you just did. It could also be a progress bar that fills up as you move through a multi-step form.

These items are small in stature but can perform wonders for the user experience. They give users confidence in what they’re doing, which in turn makes them more likely to interact with your site again and again.

Learning Resources

• How Micro-Interactions Drive User Engagement
• Micro-interactions: a complete beginner’s guide
• Micro-interactions: why, when and how to use them to improve the user experience
• UX Design Best Practices: Refined Microinteractions

4. Design Systems

If you’re looking for absolute consistency in the look of your website or app, a design system can get you there. Sometimes referred to as a “pattern library” or “styleguide”, it’s a visual language that helps you to document UI elements so that they can be reused. This ensures that fonts, colors, shapes, icons, etc. are consistent across all platforms. This is especially important when working as part of a team on large-scale projects.

For example, when everyone on your team knows what a call-to-action button should look like, it makes the job of implementing such an element much easier. Designers don’t have to approximate or conjure up their own solution because the standard is right there in the documentation.

We often design things in a bit of a haphazard way – coming up with various elements as we need them. That may work well enough for some projects, but just about everyone can benefit from a design system – even if you’re the only one on the “team”. The more well-organized you are, the better your work will be.

Learning Resources

• Awesome Design Systems
• Design Systems Handbook
• Taking The Pattern Library To The Next Level
• The Benefits of Creating a Design System

5. Typography

Many of us self-taught designers never formally learned best practices when it comes to typography. We use what looks good to us – but there’s more we could be doing. Responsive text, for instance, is something we all need to be aware of.

Taking some time to review the fundamentals, along with the latest techniques, is a worthwhile endeavor for all designers – formally trained or not.

Learning Resources

• 10 Examples of Responsive Text Techniques
• A Five-Minute Guide to Better Typography
• Better Typography with Font Variants
• The Atoms of Typography: The Secrets You Can Learn from Type Designers

Fresh Skills for the Summer

As the Fresh Prince once opined, “Summer, summer, summertime / Time to sit back and unwind”. That may be fine for some, but web designers need to keep their hustle on all year round. Sure, take some time and enjoy warm weather and the great outdoors. But don’t miss the opportunity to improve those mad skills.