Although work on the backend of any software application could begin as soon as the wireframes are in place, development switches to a higher gear only after the UI designs are handed over. Therefore, it is best to ensure that the design team has delivered everything the dev team may need to complete its job. If not, dev work may have to be paused and the design team re-engaged to deliver the missing components. The process of re-engaging the design team, switching contexts and waiting for the updated components only adds to everyone’s frustration and induces delays to the project. Here is a checklist of frequently missed items that project owners could use to ensure they don’t have to pause your android and iOS mobile application development and go back to the designers for these.
- Loading icons/gifs : These are often used while switching from one screen to another or while waiting for a response from the backend call, within the same screen.
- App Launcher icons: Ensure that you have these in all the required variants for both iOS and Android
- Text Field States: text fields could have multiple states – active, focus, disabled, error, etc.
- Tooltips/Hints/Joyrides: These are often ignored and are flagged only at the time of launch!
- Client Side Error Handling: Ex: Invalid Email format
- Server Side Error Handling: Ex: Duplicate username/email found
- Icons States and Sizes: All icons need to be provided in active, hover, focus, pressed and disabled states. Also, Android and iOS require icons in different size variations. Make sure you have them all so that your app looks sharp on all screen sizes.
- Place-holder images: These are often forgotten. Ex: A gender neutral profile picture place-holder to depict a user with no profile image.
- “It’s Empty” screens: Very often, some of the screens in your app may not have any data to display. Ensure you have the designs to depict this state.
- Font Files: When uncommon fonts are used, it is best to request for the font files from the design team. Also, some fonts are not supported on Android and iOS.
- Outgoing Email Templates: These are often left out too. Ex: Welcome Email, Change Password Email, etc.
- Shadow for icons that are placed on top of images: Although the icons placed on images may look perfect in the mocks, they may not be visible at all when the image on the live app is the same color as the icon (Ex: white icon on a white/light image). So, always ensure such icons have a shadow.
- Treated Background Images: Background images generally have layers on top of them in the mocks. Ensure you ask for the treated background images to be used in your screen, from the designer.
- Drop-down states: Expanded, Expanded with an option Selected, Expanded with disabled options
- Comments section with expanded and nested comments: Often designs only have one level of comments. Ask for the expanded, nested view of the same
- Responsive Layouts: Special emphasis on
- How the UI will look on wide screens
- How the top nav looks for a logged in user on mobile resolution
- How Calendars and Chat screens look on mobile resolution
- Take all source files (in PSD formats for future use) from the designers.
- Notification and its states: Hover/Unseen, etc.
- Lazy Load and Refresh GIF at the bottom and top respectively: This is often missed too.
- Flag User/Content,Block User: Secondary actions on content needs to be accommdated
