Design Theory

Welcome to Design School for Developers


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.

What is Design?

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.

About Assignments

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!

Related Posts
  • Code
    Mobile Development
    In the Spotlight: David SmithPreview image david smith@2x
    David Smith is an independent software developer focusing primarily on Apple's iOS platform. In today's interview, I talk with David Smith about running a business in the App Store, the importance of income diversification, and the challenges of being an indie developer.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Web Design
    Case Studies
    Exploring the Human-Centric WebHuman retina
    Some time ago I published an article describing a workflow which supports and emphasizes human-centric thinking in web design. In this article, we'll examining websites that apply this methodology and see how human-centric design has contributed to their success.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…
  • Web Design
    Design Theory
    Building Visual Hierarchy into Your DesignsDsfd hierarchy visual retina
    It’s important to remember that hierarchy has not only to do with content and the words that you have on a page. The imagery you include in your designs, from photos through to icons, buttons and any other visual elements other than text, has a big impact on the hierarchy and perception of your website.Read More…
  • Web Design
    Design Theory
    Building Consistency and Relationships into Your DesignsDsfd relationships retina
    One key part of composition is understanding how to build consistency into your designs and how to display the relationships between each of the elements on the page.Read More…