The majority of today’s users – and most certainly hiring managers – have a set of expectations for the look and feel of an app. These expectations come from daily use of software designed and built by professionals, who follow a set of standards that we can mimic. To make sure the quality of your dev work doesn’t get overlooked at first glance, it’s crucial for us to avoid design choices that deviate too much from common industry standards. Before submitting your project, quickly go through this design checklist with your mentor to avoid common mistakes and to implement simple best practices in UI/UX design.
- Leaving the fonts and styles completely untouched from default (text, forms, links).
- Placing UI elements or content up against other elements or the edge of the window.
- Overusing neon or overly bright, glaring colors for blocks of text or large backgrounds.
- Using font sizes or color combinations that make text hard to read (e.g. pale font on a light background - always consider contrast readability).
- Overusing fonts from the handwriting or display categories from Google Fonts.
- Overusing jQuery animation or CSS transition effects that can become sluggish (note that not all users are on high-end devices that can execute these effects smoothly).
- Overusing images, specifically ones that haven’t been optimized for the web (compress jpeg and png images online).
- Using a CSS framework (e.g. Bootstrap, Materialize) if previously used on another capstone (CSS frameworks limited to use on only one capstone).
- Using a complementary color combination for content and UI elements (explore good color combinations).
- Using less than three fonts and a pairing that doesn’t clash (check out recommended pairings by ReliablePSD and Femmebot or go to directly to Google Fonts, click on “see specimen” under a specific font and scroll down to “Popular Pairings” to preview Google’s recommendations).
- Using moderate spacing – margin, padding, and line-height – to avoid elements from being positioned right up against another (read about the importance of white space).
- Using Fontawesome icons (sparingly and with text labels in most cases) for menu items or section titles.
- Being consistent with styling by writing CSS rules for either elements or classes.