Learning how to become a web designer consist of 3 important pillars. If you don’t take the time to develop all 3 pillars you will struggle to reach your full potential.
The pillars of web design:
- Learn the fundamentals of design
- Understand your medium
- Get to know your tools
In this post I will point out the most important aspects to focus on in each pillar if you want to learn how to become a great web designer.
While you will have a head start by focusing on the right things the real magic happens when you practice and try to apply what you learn in real projects. Understanding a principle and being able to apply it effectively isn’t the same thing.
Knowing when to break the rules (and you should) is even harder.
Learn the fundamentals of design
Learning the fundamentals of design allows you to recognize good design and understand why it is good. Often in the beginning you know that you either like or dislike a design but are unsure why. If you learn the basics you will be able to describe why you like it. Over time you will learn to apply these same rules in your own designs.
There are 2 courses available on teamtreehouse.com that cover the basics of graphic design. Treehouse offers a 2 week free trial so it’s a good place to start.
If you don’t want to spend any money work your way through these videos:
For a more in depth post including extra courses and reading material check out my previous post on learning design for non designers:
Understand your medium
In web design just as in print or industrial design you need to understand the medium you are working in. It is extremely important that you know the strength, weaknesses, limitations and oppertunities that your medium provides.
Often web designers come from a print background and don’t understand the complexities associated with the web. The limitations of web fonts, the fact that you can’t guarantee screen size or aspect ratio, the opportunity for using motion to enhance your design. These are all unique to the web and you better become comfortable with them.
HTML – The content layer
HTML is a markup language that is used to describe the content you produce on the web. HTML is combined with CSS by your browser to display information. HTML should be used to describe the content of your document and it’s structure. Not what it looks like. This way of thinking about HTML is called semantic HTML.
Courses and tutorials:
Cascading style sheets are used to dress up your content. It’s a language that is used to describe to the browser how you want your HTML rendered.
Often designers don’t realise why it takes developers so long to implement the designs they come up with.
Because CSS seems fairly simple it’s easy to pick up the basics by just fiddling around. However there are things that are just not all that easy when working with CSS. At the same time there are capabilities built into CSS that you don’t have available when working with a static photoshop file. Every designer should at least try implement some of their own designs in CSS and HTML. This gives you an appreciation for what is easy and what is hard. Being aware of these limitations and capabilities can and should influence your designs.
Have a look at some of the links below to get an idea of what I am talking about:
- The box model
- How CSS relates to the DOM
- Specificity, inheritance and cascading
- Absolute vs relative positioning
- Absolute positioning inside relative positioning
- Understanding CSS layout techniques
If you are an absolute beginner at CSS it’s worth checking out the teamtreehouse courses on CSS, I recommend the following order:
Media queries and responsive design.
The number of devices that people use to browse the web has exploded. We as web developers have had adapt by learning to design for multiple form factors. Responsive Web design is an approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
Teamtreehouse has a great project that takes a non responsive site and modifies it to be responsive.
Some other links you might want to check out:
- A collection of responsive sites you can use as inspiration.
- Guidelines for responsive web design from smashing magazine.
- Mashable on responsive design.
Front end libraries
You should learn how these libraries work and attempt play around with designing custom themes for at least one of them. Bootstrap is very popular so if you are working commercially it will almost certainly come up at some point.
Some frameworks to check out:
- Semantic (I really like where semantic is going, keep an eye on this one)
To get a feel for developing sites in both Bootstrap and Foundation try this course on framework basics. For a more in depth look at bootstrap have a look at the “Building websites with Bootstrap 3” course.
Animation and interaction design
Since you have the opportunity to use animation and motion in the web you need to understand when and how to use animation. Google has recently released a set of reccomendations for all their product called Material design.
While there are other styles that would also work this is a good place to start since it attempts to synthesise the classic principles of good design with the innovation and possibility of technology and science.
The principles of material design are:
- Material is the metaphor
- Surfaces are intuitive and natural
- Dimensionality affords interaction
- Content is bold, graphic and intentional
- Colour, surface and iconography emphasise actions
- Users initiate change
- Animations are choreographed on a shared stage
- Motion provides meaning
For a full break down of these principles have a look at this video:
Besides the design principles outlined above Google has also started developing a set of web components that implement the material design principles.
The next video focuses on how these principles affect how you design your application. Watch as 4 google designers talk you through applying these principles to your applications.
Get to know your tools
It goes without saying that you need to be able to apply all of your knowledge. For this you need to learn nd master the tools that are at your disposal. At a minimum you should be able to use both a raster graphics and a vector graphics program. Adobe is the market leader in the industry and there are hundreds of tutorials and courses available online. Lynda.com is your best bet if you want professional grade courses on Adobe products.
Given enough time and dedication it’s within most people’s reach to become a competent web designer. Mastering your craft will take years of dedication but the links and videos above should give you a head start on your journey.