Rumendimitrov.com

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:

1. Reduce your overwhelm by first separating the coding/dev efforts from the design efforts. Our brain is made to work in chunks.
2. 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

1. Learn DOM structure
2. Learn how to tag certain types of data (semantics)
3. 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

1. Learn how to target DOM elements
2. Learn the properties you can modify on each element
3. Learn how to effectively target elements (use the id or a class? Nested selectors or not?)
4. Learn how the box model works
5. Learn how to position elements through floats and absolute positioning (don’t spend much time here)
6. Learn how to use a Grid Framework
7. Learn FlexBox
8. Dabble into pre/post-processors

JS

1. Learn how to execute JS on pages
2. Learn how target DOM elements
3. Start using a library like jQuery, Zepto and the likes
4. Learn how to create and execute functions
5. Learn how to bind functions to events
6. Learn to do basic stuff with vanilla JS (dom modification, function binding)

WordPress

1. Learn how to set the system up (install WP/setup environment, install plugins, install and customize themes through the admin panel)
2. Knowing just 30% of the above mentioned front-end stuff, hack a theme to add functionality
3. Style a WP boilerplate or base theme
4. Develop a WordPress theme from scratch

Follow these in the order mentioned and you’ll be fine.
Next,

Design

1. Focus Gestalt principles—proximity, unity, contrast, texture, spatial relationships, line
2. Analyze layouts and grids
3. Dabble in typography—history, construction/anatomy of type
4. Use the knowledge about lines and forms from your gestalt principles explorations to play with elements on the page
5. 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.

Have you ever wondered how a certain effect is achieved on a website? You are not alone.

This is a question which every web designer wakes up and goes to sleep with. That’s our inborn curiosity.

Same happened to me yesterday.

A friend of mine, who designs visual brand identities, showed me the site of a prospect he recently contacted:

Their site was unfinished(and in Polish), so I couldn’t understand a thing. So I skipped reading the copy and jumped to analyzing the layout and how the whole page holds up graphically.

(Yes, I do that all the time, because just like you, I want to know what makes web sites look good or bad.)

What got me interested there was the shape of every section image. Untypical of the usual rectangularity of the web, they had trapezoidal images!

And the slant was also responsive—it kept its angle and stayed crispy even in smaller sizes… hm, but how?

Continue reading “CSS Trick: How To Get Trapezoidal Images For Your Website”

This post is updated daily. The “Day” titles mark when I’m making entries in the diary. This whole process could be completed a lot faster if I didn’t take the time to publish my notes here. .

Soon after I published this article Feel stuck after learning HTML&CSS? Here’s how to create websites on your own I decided to share it on reddit—after all that’s the place I got the inspiration for the article from. To my amazement this happened:

Getting to 1000+ upvotes on reddit is not a small feat. What truly astonished me though were the positive comments how useful this information was to people and how badly they needed an example to see it applied in practice. So that’s what I’m going to do here—I’ll build a page using these same techniques and will document the process step by step. Here we go:

Continue reading “How I Design A Website From Scratch (LIVE)”