App asset templates for Native applications

[nickwynja]

Required assets per app:

• Application icon
• Splash screen
  • Existing framework: https://git.infor.com/projects/XOS/repos/commonui/browse

Steps to completion

• [x] Meet on 11/28 about IDS branding; likely followed by a separate meeting specific to native app assets
• [x] Design team to come up with guidelines and templates for icons and splash screen
• [ ] Meet with Manila team to discuss process for creating new assets
• [ ] Post guidelines and asset templates to IDS site and/or design-system repo

[nickwynja]

We need some more work here. Attached is the work in progress sketch file: infor-app-icons-splash-template.sketch.zip

We should consider doing something like this, where the sketch file is built to export to all the necessary file sizes for development: https://medium.com/sketch-app-sources/painless-icon-generation-for-ios-apps-with-sketch-and-xcode-part-1-a169794aac8b

Also consider where this file lives in the design system file structure: https://github.com/infor-design/design-system/pull/341#issuecomment-473931078

[BalkiX]

Hi Nick, we don't need all the file sizes, both iOS and Android supports also vector graphics. So if you provide vector images then it shall be fine.

[kayiuho]

I looked into the "slicing" feature in Sketch and it was able to export all the different app icon sizes based on the "Presets". Wondering if that's helpful/on the right track? I also tried to figure out the Xcode part but didn't get very far because we didn't have an existing "project" or "playground" to work with. But maybe all we needed is the Sketch file with "slices" set up for easy/automated exporting for diff sizes?

[nickwynja]

@kayiuho Awesome! Can you zip up that directory and send it to Jeff and have him double check everything looks right? I chatted with him a bit yesterday about this so he should be helpful in confirming it's what we need.

[kayiuho]

@nickwynja Talked to Jeff and all the exported sizes matched what the app store would need. Also confirmed that we don't need to round the corners as they would get cropped automatically.

There are written guidelines (in draft) that I just need to revise. Anything else needs to be done for this?

[nickwynja]

I think the only thing left is to figure out where in the sketch/ folder structure this should go.

[nickwynja]

@kayiuho Can you open a PR with the updated template based on the feedback from Jeffrey and call the file sketch/templates/mobile/ids-app-icon-ios.sketch. Thanks!

[kayiuho]

@nickwynja Sure thing. In the Sketch file, there's the app icon artboard plus the splash screen and sign-in screen templates, could those also live in there too? or do we only want the app icon by itself?

[nickwynja]

@kayiuho Good question. We might want to keep some aspect of the splash screen. Can you check with Jeffrey how splash screens work by default with iOS?

@BalkiX I know you have the splash screen "component". That's currently working with an animation, correct? If we updated to just use a static asset of the icon that you place inside the component on a colored background that's generated by the component, how would you want that logo asset?

[BalkiX]

Hi Nick, we can use also static image in splash screen. Ideally if you provide vector graphics so we can use it also in other places of the app.

[kayiuho]

@nickwynja Jeff said there's no limitation for the layout but it can't be animated for the Splash screen. One would provide the app icon and the Infor logo separately as two assets, and they'd get built in Xcode (for the different aspect ratios/resolutions).

That being said, I think the written design guidelines (that we'll publish on the IDS site) and the Sketch design template should be sufficient to illustrate the ideal design outcome?

[BalkiX]

For my curiosity, why it cannot be animated it splash screen? Are there any technical limitations from your side or not enough human resources to accomplish it or from design perspective we don’t want to have it animated?

[kayiuho]

@BalkiX Jeff (our iOS dev) said that splash screen is an iOS-controlled view and we can't add operations to it so it'll have to be a static layout. Some apps fake an animated splash screen by having the entry view of the app look exactly like the splash screen and add animations to that.

[nickwynja]

@BalkiX The animations that we currently have in your current splash screen component take a lot of time to do and we've needed to have a different team do the work, which isn't sustainable for us.

[BalkiX]

So what about like that. We will now go with static images to finally consolidate app icons across all Infor mobile apps and later on when we have more time we can add those animations back? @kayiuho: we currently add those animations in iOS the way that we have copy of splash screen UI which is shown right after, where we are able to run animation. And it is even useful as this animation is used to cover app initialization which takes around half second, so the app feels professional. Btw. do you still have sources from which current animations were created? If your team is busy then you can pass it to us an we can take care about updating those animations to new design.

[nickwynja]

@BalkiX We don't have the source for the animations since we had another team do them a long time ago. I think there still could potentially be some sort of animation where the icon pulses in and out while the application loads but we'd recommend that it's either an animation where the SVG icon is given motion or a standard loading spinner is used instead.

[BalkiX]

So can we e.g. agree that we will start with static SVG icons in new common design for all apps one by one based on your resources an later on we can eventually add some motion to those SVG images?