Learning Website Design: Session 5 – Real Workflow

December 11th, 2009 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

[private]In the first sessions we have taken a look at how understand the markup and styles. However, it is extremely important to understand that most professional design doesn’t happen directly in code. Most website design happens in the traditional graphic design work-flow.

First Steps

First you do your hand written mock-ups. There is really nothing that offers the flexibility of pencil and paper. You can manipulate the paper in a way that you will never be able to manipulate a screen. Even the fact that you don’t have to be careful with it. It is cheap and it can get ruined and is ok. That puts you at ease. This step is really the heart of web design. This is where really your creative side comes out. You have the possibility of thinking and then moving your ideas to the paper: birth.

Moving the Sketches to Photoshop

Then you move those mock-ups to Photoshop. Scanning is an art of itself, but in this case is really not that important. You are basically just moving your mock-ups to Photoshop. The mockups usually have two components: the ones that are scaleless and the scale-based. You probably want to start with a layout file that has a grid. Grid systems such as the 960.gs is a great base regardless of if you end up using it for the coding of your site.

Separation of Components

Once you finish your Photoshop, Illustrator, InDesign, and or Flash Files, you basically separate each part into what they are supposed to be. For example images usually are separated by either static or dynamic. This separation happens in Photoshop with the help of slices. The slicing tool allows you to name the slices and also to check their dimensions. Remember to make sure that your slices are precise to the pixel level. It is very easy to slice without looking at the dimensions and down the road regret it.

Static images are saved and compressed depending on their qualities. JPG compression is excellent for gradients and photography work. JPGs for the web measure their compression by a percentage 0-100%. By compressing at least to 60% the compression is almost undetectable. GIF is great for solid colors, shapes and vectors. GIFs limit their size by limiting the number of colors that they include. So make sure that you limit your gif files to the minimum amount of colors. PNG is the best option for alpha transparency. In other words, if you need semi-transparency you need PNG. GIF offers transparency channel but the PNG is smoother (but larger).

Dynamic images are usually saved as swf files, however depending on the complexity of the movement, sometimes the movement is generated using Javascript. If you are creating a simple slider probably you can do that with a javascript library like Jquery. Otherwise you will need Flash. To embed flash into the page the best way is to use a javascript embed script.

All text is supposed to be converted to “content” once the code is in place. Because of the limitations of browsers in terms of Typography, sometimes titles and other complex forms of text are converted to images or use a Flash interchange technique such as sFIR.
Markup and style is written hopefully by hand and then you put everything back together the way that is should work on the web.

Ending Remarks

That is the traditional professional website design work-flow. As you progress as a web designer you probably are going to start doing things a bit differently and to customize some of the work-flow. However it is important to follow a pattern, that way you start getting faster with time. Also some parts are repetitive and perhaps you can save time over time.

Until next time guys,

Alex_ @ merkados

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.