Using images in user interface

Choosing photos that are appropriate for a project

• Check brand guidelines for the use of illustration and photography

• More than one image

• -> cohesive set

• -> from a single source (Unsplash)

• -> filter work by photographer

• -> commission own project

• Foreground/background

Placing text on an image

• Contrast

• Apply semi-transparent overlay on top of an image

• Keep the original image, add graphical elements (like a square) in a particular way

• Darker one area of the image

• Blue technique - contrast the text

Placing controls on an image

• Directly on an image/outside

• If on an image:

• Use relatively large filled shape 

Cropping images

• Crop or frame images in a consistent way

Apply consistent image treatment

• Duotone effect: contrast levels within an image and map them to a gradient of colors -> unify images to the brand color

 

Icons in Interface

Icon - graphical metaphor 

Pair icons with text labels

Formats/Libraries:

Icon Font/SVGs

Typeface 

Tips for designing icons from scratch

• Pick a style (detailed/minimal/outline/filled

• Define a grid (grid size/padding/placement and density)

• Outline text elements before exporting the SVG icons

• Simplify the naming scheme and folder structure 

 

Responsive logos in User Interfaces

For mobile / web etc.

• Remove the text

• Simplify the details

• Bring elements of the main logo into a smaller, more icon-like logo

 

The logo design process

-1. Scoping  (get info from the client)

  -  function/members/audience/adjectives/messages/goals/fears/motivation/examples of existing logos/brands/competitors

-2. Writing the brief

-3. Research and sketching

-4. Presenting a selection of ideas to the client

-5. The final logo set

Simple but meaningful