How To Improve Your Web Design Skills In 2017, and a few CSS Tutorials That’ll Help

While creativity is important, it’s not the only thing required to make a successful web designer, neither is it going to be the only thing that’ll set you apart from the myriad of web designers out there.

If you want your web design career to be a success story and not just a hobby, you need to know and possess the following:

  1. Effective communication skills: As a web designer, you must be able to read between the lines and know exactly what your clients want from you (this does take a lot of practice, it does not come easy…). Pretty much most of SEO’ers, Web Designers and myself, of course, agree on this. Regardless the means of when presenting your work or marketing your skills, your communication needs to be bold, clear and pertinent to the job at hand.
  2. Plan before designing: I work better when I’m inspired. But as a professional web designer, you can’t always afford to wait on inspiration to grip you before diving into a task. Thus, you need a bit of planning, research and preparation ahead of tasks to help you to cope when inspiration is slow to come. Researching about a client’s company and what they stand for really helps. While planning might suck all the fun out of the creative process, it usually helps in saving time, money and other resources.
  3. Get feedback and use it to improve: Accepting and implementing feedback effectively helps to avoid past mistakes and improve on previous jobs. Some feedback might hurt your feelings, but if you manage to put that aside and focus on the truth, you’ll be much better off. You need to seek feedback right from the domain hosting stage to the completion of the design.
  4. Constantly upgrade your tools: While certain upgrades and updates are redundant, there are some that can and will set you apart from your competition because you’re working with better tools. Monitor trending themes, ground-breaking software and spot what’s relevant.
  5. Experience everything: I refuse to put myself in a box and focus on only my niche. You should do the same. Why? Because at the end of the day, no experience is wasted. What you’ve learnt by experimenting outside your niche can, in the future, be applied to your area of expertise. The wider experiences you acquire, the faster you’ll rise in the field of web designing.

You should also be organised – keep your tools, schedule and everything else in order. Also, have a sense of business – it’s okay to do what you do for the love of it, but if you don’t insert some business acumen into your work, you might end up having trouble paying your bills. A step forward in accomplishing this is to keep your portfolio regularly updated. Trust me, a well-updated portfolio helps to justify charging more money from clients.

Skills you should master to set you apart as a web designer.

Because there are a lot of web designers out there, you need to market yourself and your work as something unique. These skills will set you apart:

  1. SEO skills: Optimising your pages for search engines has become a must, and needs to be part of your skill-set, because what’s the point of a beautifully constructed page that gets no traffic?
  2. Writing skills: Knowing the right and effective combination of words to use can be key to the success of a page, even if it’s an ugly one. A well-worded page is also more navigable and usually more SEO friendly.
  3. Graphic design: To boost your web designing skills, you also need to work on your graphic designing capabilities. Even if this is just learning the core basics like spacing, proportion and balance, grouping, flow, and contrast and colour. I took it a step further by improving on my 3D effects and custom imagery.
  4. Familiarise yourself with HTML and CSS: HTML and CSS are the definitive essentials you need to master to even start thinking about going seriously into this business.

 

CSS tutorials that’ll help sharpen your web design skills

Tutorials for CSS fundamentals and architecture:

  1. Let’s Look at 50+ Interesting CSS Properties & Values by Greg Hovanesyan
  2. CSS Architecture for Design Systems by Brad Frost
  3. CSS Positioning Explained By Building An Ice Cream Sundae by Kevin Kononenko.
  4. Guide to Writing Maintainable CSS by Adam Silver
  5. CSS Architectures for UI developers by Matteo Pescarin

For performance improvement:

  1. Performant Parallaxing by Paul Lewis
  2. Improving Perceived Performance with Multiple Background Images by Harry Roberts and Chris Coyier
  3. 10 principles for smooth web animations by Anand Sharma

For design styles:

  1. Ultimate Guide to Non-Rectangular Headers: Pure CSS Diagonal Separators by Ahmad Nassri
  2. Improve the Look of Links with the CSS Text Decoration Module by Dudley Storey
  3. Magic Randomisation with nth-child and Cicada Principle by Charlotte Jackson

For developing CSS images:

  1. Beginner’s Guide to Pure CSS Images by Michael Mangialardi
  2. Create Stunning Image Effects with CSS Backdrop-filter by Asha Laxmi
  3. Image Effects with CSS by Bennett Feely

For CSS Layouts:

  1. Complete Guide to Grid by Chris House
  2. Step by Step Guide to the Auto-Placement Algorithm in CSS Grid by Nitish Kumar
  3. How to Use CSS Shapes in Your Web Design

For a responsive design:

  1. The State of Responsive 3D Shapes by Ana Tudor.
  2. How to Build a Responsive Grid System by Zell Liew
  3. Responsive Images in CSS by Chris Coyier

For email newsletters:

  1. Build interactive emails with CSS by Mark Robbins
  2. Dirty CSS Hacks for Responsive Emails by Vitaly Friedman
  3. The Ultimate Guide to Web Fonts in Email by Jaina Mistry

For CSS Animations:

  1. CSS Animation for Beginners by Rachel Cope
  2. Create a set of micro-animations by Donovan Hutchinson
  3. Making Magic with WebSockets and CSS3 by Hélio Dolores

For tools:

  1. PostCSS: Sass’s New Play Date by Nicolás J Engler.
  2. From Sass to PostCSS by Tyler Gaw.
  3. Remove Unnecessary CSS With PurifyCSS and Grunt.

References

https://webdesign.tutsplus.com/articles/12-tips-for-becoming-a-successful-web-designer–webdesign-1189

http://www.webdesignerdepot.com/2015/03/7-skills-every-web-designer-must-master/

http://www.tagteamdesign.com/7-tips-to-improve-your-website-design-creativity/

http://webdesignfromscratch.com/blog/top-10-skills-for-web-design/

https://www.heartinternet.uk/blog/50-superb-css-tutorials-sharpen-web-design-skills-2017/

 

Tom De Spiegelaere

About Tom De Spiegelaere

I love everything visual, from photography to graphic design and special effects. I’m the founder of MangoMatter and specialise in creating sites that not only convert, but also easily outrank the competition in Google, giving my clients a website that markets itself!