Web App Startup UI Kit image and Icons for Sketch

Web App Startup UI Kit image and Icons for Sketch

#Web App Startup image and Icons for html5

This is a boilerplate kit combining an html sample code (tested) and a .sketch file containing all necessary sizes for the branding of your website on a smartphone:

  • favicon
  • apple-touch-icon
  • apple-startup-image (these are displayed on mobile/tablets while your website is being loaded, if your website has been saved to the phone's startup screen)

##The .sketch file

The sketch file is structured in "pages":

  • instructions (a url that points to this git)
  • "apple-touch-icon": favicon and icons
  • "launch image": startup images

Each page contains artboards at the correct size. Each tells in which direction you should organize your content (because landscape images are actually portrait image turned sideway, which can be confusing).

##The html file Copy/paste its code inside the <head> tags of your html file. Change the url paths. If you use this for a wordpress tag, the right routing function has already been set, so you just have to change the path relative to your theme folder.