GUI naming convention that really works in practice.
Many web design tutorials and courses are made by people who don't know or care about the entire product life cycle. This makes it difficult to understand and maintain software systems efficiently in the long run, which leads to high maintenance cost and often frustration. It makes it difficult to document bugs, reuse material, automate test, translate the software to other languages, adopt it to other markets, analyze logs and efficiently update the GUI.
Already the handover from designer to developers often cause frustration, time waste and misunderstandings because no decent naming convention is used.
By following these advice you can save a lot of time (and money)!
- By using names that work both in the design and the source code, they can be the same. Designers and developers needn't waste time trying to figure out what names are used by their peers.
- Handover from designer to developer becomes very easy! The developer is no longer required to look at a printout of the material and guess what the designer means. Some code can even ge generated automatically.
- Since logs also can contain names that are the same both in design and code, pinpointing errors and reporting them is effiecent, clear and can be automated.
- Translation of the app can be done quicker, and in some cases tutorials and manuals can be machine generated.
This material is primarily meant to be read mainly by UI/UX developers ("web designers"). and the developers who implement the design in code. For DevOps aware teams it is recommended that the entire team reads the material, at least once, and decide what parts they want to implement.
Follow the hints given here as close as possible, at least initially. Most of the advice comes with motivation, to make it possible to decide where one can depart from the advice, and understand the consequences thereof.
The advice shown here are based on real software projects involving UI/UX design, source code, test automation, maintenance, release upgrades, i18n, l10n, revision control, user profiles, logging... You name it!
The free version of Figma has been used as reference, but most of the material is applicable to other GUI development tools.
The full naming convention is currently here.