Web Designer Checklist

Like programming, design has two sides. The first and most important is how the project looks and works, the second is how it is built, and how fast one can understand what is inside it. In programming it is the code style, hierarchy, comments, etc. The same is in design. To make a good PSD (Photoshop Document) you need to follow certain rules throughout the whole designing process. This article will give you some useful tips to facilitate your working process and make you a reputable designer.

Create documents based on Web standards

Keep informed on recent web standards, screen resolutions and technologies. For example, if your screen resolution is 1280px, remember to leave at least 20px indents on the right and left. While designing a website, create documents with 72 dpi resolution. Nowadays it is recommended to create 1920px width documents, even if the website has maximum resolution 1280px.

Use modular grid

Modular grid must be one of the primary tasks in design. First of all decide which modular grid you are going to use for the project and keep to it on all the inner pages. Modular grid will help users orientate quickly and intuitively in your interface.

There are different types of modular grids, simple and complex. The main rule is to keep to the initially chosen modular grid throughout the project. We will cover modular grids in more detail in another article.

Use integer font size

Use only integer font size for all texts, blocks and other elements. If you use 14px instead of 14,25px, it will hardly harm your design, but will keep it neat and clear. Note, that if you use a well thought-out modular grid, all the further blocks will be integer numbers. Thus, following the rules described above in “Use modular grid”, you facilitate further tasks. The same rule applies to the icons, logotypes and images. Use integer numbers while setting their size.

Use only vector objects

The age of the websites with fixed width and shades/gradients built with PNG file pieces has long passed. Nowadays CSS3 and HTML5 are widely used, which are compatible with all the popular browsers. Thus, you should follow this main rule – except photos, all other design elements must be vector. You have a square block? Make it with Shapes. Icons? You might, for example, find vector icons and import them from Adobe Illustrator and then make Smart Object. But it would be best to create font icons and give them to the maker-up. This can be done with plenty of online tools.

Standardize everything

Use the same font size for all the titles, subtitles, etc. Keep your design logical.

Use no more than 4 shades of the same color – your design will not be dull, and at the same time it will look neat. For more information on choosing colors and shades read 30 tips for web-designers. Titles should be logical and clear. It’s hard to understand what the title "№ 169" implies, whereas it is easy to guess what is under the title “logotype”.

Comments

For you it maybe goes without saying that there should be certain animation when cursor points the buttons, but not for the maker-up. Comment all such nuances to save your time. Adobe Photoshop has an excellent tool for comments.

Remember about Retina displays

Displays with high density of pixels per inch are common nowadays. For sliders, backgrounds, etc. use images at least twice as big as the required size. To keep the quality good, scale them to the size you want in Smart Object.

States for interactive objects

Remember to make different states for all interactive objects. For example, if it is a button, it must have at least the following states: usual, active, clicked. The same applies to links, navigation points, shapes, etc.

Highest values for fields

You have drawn a block with statistics? Keep in mind that statistics may change with time; today it may be 10, but tomorrow 10,000,000. Use highest logical values to keep the design unchanged for any field values.
Another example: you have drawn a menu with a short word in each category? Remember that categories can have very long words or even word combinations. While drawing the design use both minimal and maximal values.

Website design is not polygraphy

Experience prompts to state this obvious truth here. While designing a website use RGB (sRGB) color space. For measuring units use pixels or points. Don’t use meters and kilometers, or CMYK color space. Draw websites with suitable tools like Adobe Photoshop, Sketch. Don’t use Corel Draw for it.

Don’t use color overlaying

From the very beginning learn the basics of web technology and construction. Don’t try to reach certain effects by thousands of color overlays. Such layout would be hard or almost impossible to make up, and in the end it would be different from the initial. Also try to use transparent elements only when you are 100% sure that it will not hinder your design becoming a final product.

Thank you for your time!