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 workflow.
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 it 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.
Something very important in this step is to not get “married” to the first idea that you have. Even if it ends up being your selection, make sure that you explore other creative options. This step forces you to exercise your creative muscle and solve problems in different ways. Even if not used for your current project, it will make you a stronger designer as a whole.
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 mock-ups 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.
It helps to understand standard dimensions. If you are a new web designer, you may not know these things by heart. So, it is ok to look at other similar websites. For example, what is the normal pixel size of a navigation text? You’ll probably end up with a 12px to 16px (which really translates to a 1em styling in CSS.) That is the standard, and a good place to start.
Separation of Components
Once you finish your Photoshop file you basically separate each part into what they are supposed to be. For example images usually are separated depending if they are static or dynamic. This separation happens in Photoshop and it can happen 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.
Some components will need a timeline since they are dynamic. For example, if you plan for a component to animate such as it is the case with Sliders, then plan what they’ll look and how it will evolve.
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 to the human eye, but incredibly effective to reduce file size. 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). And of course the new kid on the block: SVG.
SVG is awesome because it is a vector. It remains sharp no matter what. Also SVG allows for animation – so that’s pretty cool.
Dynamic images are usually saved as SVG or video 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 HTML5, CSS3 or even video. What about Flash? You want to stay away from using Flash. The reason? It just doesn’t work consistently in mobile devices.
All text is supposed to be converted to “content” once the code is in place. Browsers have come a long way utilizing beautiful typography. So consider using attractive fonts to present your content. Also, when repeating sections of content among many pages, consider using an image of the text, instead of the text itself. This will help in reducing the repetition of the phrase for search engines. This in turn will make your unique relevant content much more important.
Markup and style is written hopefully by hand and then you put everything back together the way that is should work on the web.
CMS
After you have created your page template in HTML it is time to port it to work with a Content Management System. Why? Because down the road, creating, reading, updating and deleting pages will be a lot easier. Our choice is always WordPress, but you can select whichever suits you best.
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_
https://merkados.com
