10 New Web Design Skills You Can Learn in July 2017
Brush up your web design skills with these 10 useful courses and tutorials
The world of web design is always changing. If you don’t keep up with the latest design trends and technologies, you’ll quickly find yourself producing sites that look dated or don’t work well with the latest browsers.
But there’s a positive side to it, too. Many of the changes are exciting and can help you produce effects that will wow your clients and site visitors. Here’s a roundup of 10 new web design skills you can pick up from this month’s tutorials and courses on Envato Tuts+.
1. Publish Facebook Instant Articles
OK, it’s true that Facebook’s “Instant Articles” feature has been controversial, and you may not love the idea of having your content living on Facebook’s platform instead of your own. But the advantage is that readers get to access your articles at a lightning-fast speed, and your content fits in seamlessly with the Facebook app, making for a great user experience. And whereas at first it was only for large publishers, now it’s available for all of us. Get a step-by-step guide to publishing Instant Articles in this tutorial.
2. Master Affinity Designer
Just when Adobe seemed to have the vector design market locked down, along came Affinity Designer a couple of years ago, winning a whole host of new admirers among web designers and graphic designers. If you haven’t tried it yet, this course is a perfect way to find out what all the fuss is about. You’ll learn Affinity Designer from the ground up — and the course was recently updated to cover new features like artboards, constraints, symbols, and some powerful new typography tools.
3. Use Style Guides for Accessibility
Keeping your skills current is not just about learning new technologies. It’s also about important concepts like accessibility. Making your sites accessible to as many people as possible is not just the right thing to do; it also makes business sense. You work hard to attract visitors, so why turn some of them away because you’ve failed to make the simple changes that would allow them to view your site? I like this quick tutorial because it shows you how to create a style guide for accessibility, while also introducing you to some important accessibility concepts and techniques along the way.
4. Build an Onboarding Tour Using JavaScript
I don’t much like the word “onboarding”, but I do love those interactive tours that pop up when you visit a new site or app, showing you how everything works with simple boxes that you can click through (or click out of) at your own pace. This short course shows you how to build your own tour from scratch, using HTML, CSS, and vanilla JavaScript.
5. Design Better Logos
Logo design is one of those things that may well be handled by a specialist graphic designer, but it’s always a useful skill for a web designer to possess. You’ll also get a useful rundown of the major tools, panels and features in Adobe Illustrator, which will be useful for other design tasks beyond logos.
6. Manipulate Colors in JavaScript
It’s good to learn new skills, but it’s even better to build something useful. This screencast ticks both of those boxes. Take a look at the demo — a neat little tool that lets you select a starting color and have a tasteful color scheme generated for you. You’ll learn how to create that yourself, using the Chroma.js library.
7. Get Hands-On Practice With the CSS Flexbox Model
Flexbox is a relatively new layout mode in CSS3, and as the name suggests, it can give you some wonderful flexibility in your page layouts. This popular course lets you get your hands dirty by tackling six projects designed to help you learn Flexbox thoroughly. And now it’s been updated with two more bonus projects on modals and sliders, so it’s an even better way of getting up to speed.
8. Work Better With Other People
No matter how well you know the ins and outs of CSS, the reality of working as a web designer is that you’ll have to deal with other human beings at some point, and that’s when things can get so complicated that you end up yearning for the comfort of your code editor. This tutorial looks at some useful ways to get the content of a website prioritized among multiple members of a team with the least fuss.
9. Build Forms With CSS Grid
Yes, I know. Forms are not the most exciting topic in the world, are they? But the attraction of this tutorial is not the forms, but the way you create them — using the CSS Grid Layout Module, another quite recent addition to the web designer’s arsenal. It shows you how to create a form the “traditional” way, using floats, and then how to achieve the same end result using CSS Grid.
10. Get a Refresher on the Basics
With so much new stuff to learn, sometimes it’s valuable to go back to basics and make sure you’ve still got a solid grasp of the essentials. Or maybe you’re just getting started and want to avoid some of the most common mistakes. Either way, these 10 simple design pointers from Tuts+ Web Design Editor Ian Yates will help you make sure you’re on the right track.
This article was originally published on the Envato Blog.
