Home Device Illustration

Our home device illustrations show the devices in a reduced style, so they can be easily recognized by the user. We use the shapes, color and other design elements of the device, to achieve this. Shading makes the Illustrations look realistic. Our main focus is to have a consistency in the illustration style.

asset/welcome

  • The illustrations are displayed in an app context.
  • Preferred is a top-, front- or-side view of the product.
  • If a device is hard to recognize, a three-point perspective can be used.
  • Simplify the complexity of the product.
  • Be aware of the proportions.
  • Use the colors from the product and set a light effect from the top left position.
  • Try to to achieve a realistic appearance.
  • Devices are placed on a transparent background, no shadows are needed.

Create illustration#

This guide describes the illustration setup and it is totally independent of the tool used to create the illustrations.

Step 1: Create a new document#

  • Set width and height of 800x800px.
  • Color mode: RGB

Step 2: Layer the shapes#

  • Create simple shapes in the correct proportions.
  • The number of levels should be manageable.
  • Set gradients that are linear, radial or freehand and pick the colors from a photograph.
  • Use colors to create a good contrast as well as light reflections.
  • Simulate the device material - matte or glossy.
  • Reduce detailed information to a minimum.

asset/step 2 layer

SettingPreview
Safezone 48px inside the 800x800px formatasset/spacing measurement sizing
Positioning of the object depends on the device proportions:
square device = centered
rectangle landscape = bottom center
rectangle portrait = bottom center		asset/spacing measurement positioning

Step 3: Proof illustration#

  • To test the illustration visually, we recommend to reduce the view.
  • The illustration is most often placed on a light background. Ensure the sufficient color contrast.

asset/step 3 proof

Step 4: Export assets#

  • Save your working file and export it as PNG24 (background as alpha).
  • Create a zip bundle and send it to the purchasing department.

asset/step 4 export

Download Adobe Illustrator template

Examples#

The material of a device can be simulated with the gradient settings.

MaterialGradientPreview
Flat surfaceweak, simple gradientasset/gradient flat surface
Light simulationweak, simple gradientasset/gradient light simulation
Roundingstronger, complexer gradientasset/gradient rounding
Gradient fade out placed on dark backgroundMake sure the gradient mesh is colored correctly on the outer points. Don't make them white, as this will cause a grey shine around the edges on darker backgrounds.asset/light bulb rgb front view

These are a non-obligatory examples of different devices in the desired illustration style.

DevicesPerspectivePreview
BatterySide viewasset/battery side view
BatteryThree point perspectiveasset/battery three point perspective
Light bulb OFFFront viewasset/light bulb off front view
Light bulb ONFront viewasset/light bulb on front view
Light bulb RGBFront viewasset/light bulb rgb front view
Power stripTop viewasset/power strip top view
Power stripThree point perspectiveasset/powe strip three point perspective

Communication#

  • The communication and asset transfer goes through the purchasing department.
  • Deliver open working files e.g. Illustrator (.ai) files.
  • Deliver PNG24 export with alpha settings in the resolution of 800x800px.