Design School for Developers is a tutorial series aimed at helping developers (and those new, or simply interested in designing for the web) to understand more about the techniques and decisions employed behind the design they may code.
You may be a developer used to working with other designers and want to get a better understanding of design in general, or you may be a developer that wants to – or has to – work on your own projects and would like to learn how to design better websites.
Either way, and whatever your situation, by the end of this session you will be armed with a huge amount of knowledge which you will be able to put into practice on your next project.
We can loosely define To design as:
deciding upon the look and functioning of (a building, garment or other object), typically by making a detailed drawing of it.
Although this talks about nothing to do with the web, we can pretty easily translate this to relate to what designing for the web means:
deciding upon the look and functioning of (a website, user interface or app), by creating detailed, informative and helpful guides and digital representations of said product.
Designing a useful product has never been easy and the same applies when designing for the web. Since the Internet was formed, it has gone through many evolutions and revolutionary stages – the introduction of CSS-based layouts, for example, brought around many new ways to introduce visual delights onto the web and for them to be seen by many.
Now, along with the challenges we faced before in just designing for the web, there are many other obstacles to face. Not only must we design a website that looks good and, most importantly, serves its purpose, but we may also have to make it responsive, work on a ridiculously vast amount of devices and still perform well regardless of the amount of imagery and content we have on a site.
But even though we face many challenges in designing for the web, there’s a lot that we do that we can be proud of. We are one of the most innovative industries in the world, constantly able to push ourselves and the work we do forward – and that’s something to be proud of.
In short, designing for the web will never be an easy task – there are many challenges and obstacles we will face and when you’re new to designing for the web it can be quite overwhelming. Many important decisions are made when designing a website – the most basic being the color, typography and visual imagery used and how all this and many other design elements tie in together to create a really cohesive, beautiful experience for our users.
As a developer, you’re likely accustomed to being supplied with finished designs that you will then use to develop a fully-functional website build. During this time, you might come across decisions that seem strange or out of place – or just have a little curiosity as to why a designer made a particular decision.
Just one small example is that you might not understand why a designer is unhappy if the elements built don’t fully align in the same manner as on their provided PSD. By the end of this series, I would hope that you would have a much better understanding of the reasonings behind such decisions – and if you’re still unsure of a reason why a decision has been made, you will have the confidence and understanding to talk properly to the designer about your concerns.
At the end of the day, having a better understanding of the design that you are working on can only mean that you will produce better work. With a more design-informed and orientated brain, I’d hope that you would be able to appreciate designing for the web more – and even have a go at it yourself.
At the end of every article in this session you’ll find a list of assignments. These aim to give you something practical to do and put into practice the skills you’ve been learning about.
I always find that I learn better by actually doing something, rather than just reading about it – and completing these assignments is a good risk-free way of practicing what you’ve been learning about, without any restrictions.
So let’s get stuck in with the first lesson!