It has been observed that being a hard core programmer we forget to look at the obvious visuals of product or website. Visual appearance is the first priority of any product. Here are some tips worth keeping in mind as the ultimate goal is better product.
I observed some developers skipping very obvious issues of design considering it is not something that they have to look into. Remember, the ultimate goal for any development is user or clients. What matters at the end is quality of overall product.
Simply take an example of buying a car. Compare two cars. Both are of same brand, features, functionality and color.
Car1 has a very little scratch of white color on the window side and so the price was little reduced. Car2 is absolutely brand new.
Which car you would prefer to buy?
It is obvious that we will not compromise on quality while buying some expensive things. Apply the same rule when working for your clients or users. This will help in avoiding rework, increasing knowledge of overall product not just functionally but visually too. After all only team work brings perfection.
Moreover, try to compare developed product with its original layout/prototype provided. Develop visual skills. Ask for help if required. Anything learnt will be an add on to your own knowledge.
Once the content is ready, test it with any tool of your choice for the final proof reading. Keep this habit as a part of your unit testing and make the entire content seamless.
Make a regular practice to follow these hacks along with development. This will save you in many ways!
Check Alignments:
Look for odd alignments on the page for example buttons, headings, navigation, footer and so on. These are dominant areas for the first impression of any website. Make sure they are properly aligned and directly visible or accessible to users.
Seek consistency:
Take a quick overview of the site in various browsers and devices with different resolutions to check functionality as well as any layout distortions, dead ends, dead links or inaccessible areas.
Feel free to add more in comments if you have such points.
1. Follow User Centered Approach
I observed some developers skipping very obvious issues of design considering it is not something that they have to look into. Remember, the ultimate goal for any development is user or clients. What matters at the end is quality of overall product.Simply take an example of buying a car. Compare two cars. Both are of same brand, features, functionality and color.
Car1 has a very little scratch of white color on the window side and so the price was little reduced. Car2 is absolutely brand new.
Which car you would prefer to buy?
It is obvious that we will not compromise on quality while buying some expensive things. Apply the same rule when working for your clients or users. This will help in avoiding rework, increasing knowledge of overall product not just functionally but visually too. After all only team work brings perfection.
2. Think Like a Leader
Take ownership for the quality of entire work and not just the chunk of programming code or design elements of the page. The product delivery is based on completion of each small task from all team members. Every individual, when thinks like a sole owner of the product, is ultimately a leader. So think of working in a team of leaders and you will give your more than 100% on it.3. Avoid High Dependency
Instead of keeping things on hold and depending on designer for each small fix, try to learn basic HTML, CSS tricks which can help you resolve small issues. For example applying some spacing to an element or aligning text on the page doesn't always require a designer/front end developer. Any developer can do this by learning through simple tutorials. I suggest to refer W3C School tutorials for beginners. If you are not sure of the change, attempt it and then get it reviewed by the designer.Moreover, try to compare developed product with its original layout/prototype provided. Develop visual skills. Ask for help if required. Anything learnt will be an add on to your own knowledge.
4. No to Typo
Sometimes we all make spelling or grammar mistakes which is absolutely NO-NO rule for any product delivery. Believe me, such sloppy mistakes lead to bad impression. The editors we use do not accept typo in tags; thus we are safe while writing syntax of any code. We are safe while writing emails too as these editors also check spellings for us. But when we compose a sentence, for example developers usually write validation / error / success / information messages for the forms used on the site, there are chances of inaccuracies. However, we may not be able to notice and prevent these minor but very important human errors completely but we do have the alternatives to avoid them.Once the content is ready, test it with any tool of your choice for the final proof reading. Keep this habit as a part of your unit testing and make the entire content seamless.
5. Other Misc Check Points
Make a regular practice to follow these hacks along with development. This will save you in many ways!Check Alignments:
Look for odd alignments on the page for example buttons, headings, navigation, footer and so on. These are dominant areas for the first impression of any website. Make sure they are properly aligned and directly visible or accessible to users.
Seek consistency:
- Check for consistency in colors applied on the site. For instance, check hyperlinks. They should be distinguished from other content usually. Hyperlink states - Hover, active, visited should be all applied consistently throughout the website. Moreover anchors should have tooltips (title attributes) wherever possible.
- Likewise, look for heading, sub heading colors.
- Another factor is font size and its type. It should be as per the layout and consistent in all the web pages.
- Button elements can be checked for identical styles, including various states (hover, focused), over the web.
- Each prominent element on the site should be consistent in terms of layout, style, colors, fonts, and states if any.
Take a quick overview of the site in various browsers and devices with different resolutions to check functionality as well as any layout distortions, dead ends, dead links or inaccessible areas.
Feel free to add more in comments if you have such points.
