Recently a friend contacted me over email asking for advice:
I’m still, as always, unsure what I need to be learning and focusing on. I constantly feel overwhelmed. Do I need to learn Javascript? Do I need to learn more about design? Do I need to learn more about WordPress to develop themes more?
If we take a step back, the question boils down to “How to become a web designer?”
I know how it feels to be faced with millions of options and be unsure which one to take on your way to becoming a web designer. I was there, too. If I had to advice my younger self what to focus on, I would tell him this:
- Reduce your overwhelm by first separating the coding/dev efforts from the design efforts. Our brain is made to work in chunks.
- Split your day (or free time) in 2 parts: deal with development in the first part and design in the second part. Or vice versa. Just keep them separated for now.
There, following the above tips you’ll get two branches to move on your way to mastering web design.
Now, here is the level of progression I would use for each of these branches:
Development
HTML
- Learn DOM structure
- Learn how to tag certain types of data (semantics)
- Learn more about the bare minimum of attributes needed for tags to function (most of these are in the head, the ones in the body are usually modified with CSS)
CSS
- Learn how to target DOM elements
- Learn the properties you can modify on each element
- Learn how to effectively target elements (use the id or a class? Nested selectors or not?)
- Learn how the box model works
- Learn how to position elements through floats and absolute positioning (don’t spend much time here)
- Learn how to use a Grid Framework
- Learn FlexBox
- Dabble into pre/post-processors
JS
- Learn how to execute JS on pages
- Learn how target DOM elements
- Start using a library like jQuery, Zepto and the likes
- Learn how to create and execute functions
- Learn how to bind functions to events
- Learn to do basic stuff with vanilla JS (dom modification, function binding)
WordPress
- Learn how to set the system up (install WP/setup environment, install plugins, install and customize themes through the admin panel)
- Knowing just 30% of the above mentioned front-end stuff, hack a theme to add functionality
- Style a WP boilerplate or base theme
- Develop a WordPress theme from scratch
Follow these in the order mentioned and you’ll be fine.
Next,
Design
- Focus Gestalt principles—proximity, unity, contrast, texture, spatial relationships, line
- Analyze layouts and grids
- Dabble in typography—history, construction/anatomy of type
- Use the knowledge about lines and forms from your gestalt principles explorations to play with elements on the page
- Color—read about color theory, color pairing and color picking
Then, after exploring the development and design branches separately you can start bringing them together—instead of using paper, photoshop or any other medium to play with the principles start trying to implement your sketches in the browser.
Does that plan reduce your overwhelm? Tell me on twitter.
