I am a developer with questionable credentials in aesthetics with one saving grace – I recognize when I see a good one in design. In developing web sites, I have explored a few options for web design and benefited from some of them. A few of my readers have asked me questions about these options and I decided to write a note as a response. I am also structuring the note as a lesson plan so that any newbie can benefit from it. (If I had time, I could have created a course at Udemy).

Objectives

I am assuming that these are the objectives that you have.

You want to create good looking websites.

You do not have access to designers from beginning. You may be able to rope in UX designers later in the game, but to start with you still want a good looking site.

You prefer tried and well understood interfaces instead of creating a unique look and feel.

You don’t mind learning a bit of new technologies to go with code-Fu.

Prerequisites

You should be able to develop websites – you should know basics of HTTP, HTML and so on.

You should know a programming language to program the web (I assume you are a J2EE developer or PHP/python/ruby developer).

Motivation

Let us say that you are a developer out of college. You went through your courses and graduated with a good bit of CS knowledge. You are working for a large company. You are developing a web application that is heavy on the backend with lot of potential to save the company some money through process optimization. This application is for internal employees.

After the first prototype, you are asked to show the prototype to the big boss. You sweat it out and create an end-to-end scenario and show it him. Unfortunately, the first thing that catches his attention is the color scheme or the misplaced logos. Then, the complex flows and intricate forms. From your point of view, you keep thinking “why is he focused on these? Doesn’t he know that we will get a UI designer and fix it before the release?”

At the same time, a college intern working for the summer creates a wordpress site. Naturally, it didn’t have the end-to-end scenario that you have in mind, but it has lot of other niceties that the big boss cares about: colors, nice flow, ability to create a social group, interactions and so on. The big boss asks you why you can’t put together a professional demo as good as the one by the intern? Can’t a team beat a single intern?

You look around and you realize that the web has amazing number of websites that are well-designed (at any rate, better than yours). Seemingly, they are done on shoe-string budgets, without using costly skills. Your manager looks at this market and sees that typically this process uses the following kind of people:

UX designers: These people design the pages in traditional media like PSD (Photoshop files).

From there onwards, the developers can use the HTML templates and code to their specs. Turns out that both these two skills are commodity skills (You can get a a 10 page – consider each page to be a template – site done under $2000).

But then, the manager recognizes these issues:

He needs these skills through out the project. Outsourcing doesn’t work as well.

There is a considerable amount of interaction. Unless somebody in the core team doesn’t understand these skills, they end up paying for the mismatched execution.

So, realizing that he needs some of these skills in-house, the manager asked you to look into it. Your next task is to understand enough to create a good looking site and involve the designers when you need them, and get the most out of them. You also decided to use couple of junior developers in this process as well.

Skills you need to learn

JavaScript (JS): This skill lets you program the web to be interactive.

Of course, knowing these will not help you to make good looking websites. You want to understand the reusable patterns, standard usages, and the conventions. Thankfully, several frameworks help you to learn those:

Sass + Compass + ZURB Foundation: The first two technologies help you to tame CSS – not that they are important, but if you want to use some advanced frameworks you might need them. ZURB helps you to create a good looking web page templates from some simple specs from you. Very popular with Rails crowd.

Less + JQuery + Twitter Bootstrap: Less is an alternative to Sass which lets you generate CSS from simple macros. Twitter Bootstrap is amazing template for developing websites.

At the end of all this, you will easily put together pages like:

and

without having to worry about a lot of details.

Learning the pre-requisites

Currently, the best source to learn (by practice) is code academy. If you don’t skip your lessons and practice all the projects, you will not only learn, but also retain the knowledge about JS, CSS, and HTML. Once you go past, here are some specific resources for each of the topics:

HTML5

[youtube http://www.youtube.com/watch?v=qyM37XKkmKQ] Paul Irish’s amazing HTML5 Boiler plate. Not that you want to start your web pages from there, but you will understand the anatomy of a HTML5 page.

Exercises

Solve 8-queens problem in JS. Print the results to HTML screen. For additional marks, learn how to display it properly on a chess board.

Solve the same problem, using underscore.js as the utility library.

Learning the frameworks

JQuery:

The power of JS is that it can be used to manipulate DOM (a structured representation of HTML) in the browser. JQuery makes this manipulation simple and succinct. Here are the resources to learn JQuery:

If you went through the earlier lessons, you do not need to know much about bootstrap. In fact, you don’t even need to learn JQuery to start with bootstrap. So, if you want to start with bootstrap, you can do it along with JS learning.

Amar: It is not too late to learn all this stuff. Udemy offers lot of courses in these subjects. The outline I showed is good enough for technical people like you. As per the interwoven etc., they are packaged applications and as such address only a specific need. What we need for most cases though is the ability to integrate some services (like content management in Interwoven) with general purpose platform.