Work in progress…
If Models are the building blocks of your application, and Services are the plumbing, then Components are everything else inside the building. They are the doors you walk through, the windows you look out and open, the refrigerator you browse through, the coffee pot, oven, sink… UI components are what you use and interact with on a daily basis. They are built with models, and powered by services.
Components provide the user interface and user experience of UI/UX development. They are the user facing input/output surface of your application.
Components will be used, misused, attacked, criticized, and complimented…
- They must provide intended functionality, but they must also withstand any and all unintended uses.
- They must be sized correctly - especially given the wide range of screen sizes they might be displayed on.
- They must be colored correctly - especially for those who cannot see the full spectrum of colors.
- They must be accessible to those who can’t see what you see, hear what you hear, or do what you do.
- They must be intuitive and/or well-explained so users know how to use them.
- They must be interesting enough to keep users engaged - and definitely not frustrating enough to drive them away
- They must be all things to all people.
Components are where the languages of the web meld together. They are where HTML, CSS, and JavaScript combine to make magic happen. And it is your job to be the magician!
There are too many HTML elements to talk about them all in this article, but they form the foundation for all components.
One thing that should certainly apply to all of the components in your application is consistency. Unless you are intentionally building a randomized user experience, you should make sure that your application has a standardized user experience. That doesn’t me it has to meet the standard of any other application, just that it should meet the standard of the rest of your application.
You don’t want one screen to be black text on a white background, and the next to be white text on a black background, etc…
Consistency comes from having a good structure of reusable styles, and reusable components.