Shift Nudge - Interface Design Course - Imagery

An image speaks a 1,000 words and this module will go into all the little details that make that possible. Photos, icons, illustrations, and more. Put strong visuals at your fingertips.

Imagery Overview

Imagery is a big part of interface design. Second only to text.

  • Images can modify our behavior reference (emotion over logic when making decisions)
  • Images can double conversion rates in some cases reference (logic raises inhibition, emotion lowers inhibition)
  • Stock photos can significantly reduce user trust (fake emotion, reduces trust)

Types of Imagery

  • Static Images
  • Dynamic Images (user generated)
  • Iconography
  • Illustrations
    • actual drawings
    • computer generated imagery (abstract) anime.js etc.
  • Graphic Lockups (1 or more elements together to create one “image”)
  • 3D models
  • bespoke imagery (made for a particular project, customer, etc.)
  • maps!

Contained Imagery in content (boxes)

  • a box is the interface as the delivery method

Immersive imagery

  • games, apps, and animation

Imagery as mood

  • when not used as content, but rather part of the interface
  • sets a tone for what service is that someone can relate to
  • lifestyle and aesthetic ( product imagery)

Imagery as navigation

  • mostly reduced form (app icons)
  • headspace example
  • difficult to describe with words, but easy to describe with photos

Avatars

sketch data for avatars

3 ways to use illustrations in UI design

https://uxplanet.org/3-common-ways-to-use-illustrations-in-ui-design-864d4dfadd5

Homework


No specific homework here other than familiarize yourself with the different image types.

  • Static Photos
  • Floating Photos (isolated from background)
  • Dynamic Images (user generated or client uploaded)
  • Iconography
  • Illustrations

Static Images

It’s hard to write a lot of text when you’re dealing with mostly only imagery, so watch the video! :sweat_smile:

Dann Petty is a master when it comes to using amazing imagery in his designs. Look at the variety of photo usage in his design work: https://dribbble.com/dannpetty

Homework


Come up with some type of image theme from Unsplash similar to the way we did these motorcycles. Try 3 different images and work on composition, cropping, blurring, etc. and see how you can get it all working together.

Blend Modes

https://codepen.io/mds/pen/XWbzMYV

https://www.figma.com/file/1tzbkfAJgRcOdqKXTsIE4h/imagery-blend-modes?node-id=0%3A1

Can easily adjust the style of a photo or avatar. Most blend modes can be added via code, so it’s an easy way to adjust the look of a photograph without having to go in and manually retouch or color correct images.

Here are the blend modes:

  • Pass Through
  • Normal
  • Darken
  • Multiply
  • Color Burn
  • Lighten
  • Screen
  • Color Dodge
  • Overlay
  • Soft Light
  • Hard Light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity

You can ignore all of them, except for these 5 and even these… you probably won’t use them that much. However, they may come in handy someday and I’ve definitely put them to use in a decent amount of my designs, so I’m going to give you a break down.

  1. Pass Through
  2. Normal
  3. Multiply
  4. Screen
  5. Overlay
  6. Luminosity

Pass Through

This mode pertains to a layer group—a folder containing multiple elements. The elements inside of the folder with a (default) pass through blend mode will have the ability to have their own individual blend modes. If the parent folder is changed anything except pass through, the blend mode of the parent folder will affect all contained elements regardless of their individually set blend mode.

Normal

This is normal. Not really anything to cover here.

Multiply

The opposite of Screen. This is handy for knocking out all white areas of a photograph or colored element.

Screen

The opposite of Multiply. This is handy for knocking out all black areas of a photograph or colored element.

Overlay

This is a combination of Mutliply and Screen. It gives roughly 50% strength to darker and lighter colors and applies a more even blend on top of the underlying color.

Luminosity

Luminosity preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer.

Homework


  1. Create a group of 8-12 avatars (try the Sketch Data feature) and add a background fill to each avatar of a solid color or a gradient. Set the ****image fill to luminosity and notice how all of the images seem more related now—like they were a possibly a part of the same photoshoot.

Note: Blend modes can be added via code. So in this case you could communicate to a developer that the user uploaded avatars should be set to luminosity and the background color should be as shown in the design document. Also worth noting that images can add should be cropped into circles via code as opposed to manually cropping and exporting.

2. Create a hero image of a website with a big full-width image.

Create a wide 1440px or similar layout and snag a picture from UnSplash. Add a big rectangle the same size with a color or gradient.

Add a title and a… feel free to use this or make your own

  • Title: Hero
  • Body: Would you dance if I asked you to dance? Or would you run and never look back? Would you cry if you saw me crying?And would you save my soul tonight?
  • CTA: Be my hero →

Position the text and button over the large image and colored background. Adjust the color of the background and the opacity of the luminosity set image until you get something you feel works really well.

Don’t forget to check the colors around your text for contrast accessibility.

This has the potential to be risky depending on whether or not the picture is light or dark. For example if your example uses white text on a dark image, test it to see if it works with a primarily white image.

Photo Manipulation

Removing a big pimple. Changing things a little to fit the layout better. These are all valid reasons to manipulate some photos.

While I’m not talking about extreme super model mode of manipulation that sets unrealistic standards of beaty, I do want to equip with you with a few basic skills to get the majority of the jobs done when they need to be done.

https://www.figma.com/file/PE4ebaBVIF6DEQxJTJZJzH/Photoshop?node-id=0%3A1

Here’s another nice tool for automating background removal → https://remove.bg

Homework


Do each of these things to the following photos…

  • (photo) Removing an object with clone, healing, or patch tool
  • (photo) Basic color correction/adjustment
  • (photo) Cutting things out of the background with the lasso
  • (photo) Cutting out hair

You may also consider downloading Affinity Photo for a free trial to do similar things as Photoshop https://affinity.serif.com/en-us/photo/ (scroll to the bottom and choose “free trial”)

Resourceful Asset Collection

https://www.figma.com/file/2IQoWAXxAO3vJNgMqLc0Ac/Resourceful?node-id=0%3A1

Examples of being resourceful

  • Snag an SVG image from the web
  • Find a vector version of a logo
  • Dig a vector version of a logo out of a .PDF online
  • Screenshot to clipboard (paste and divide by 2)
  • iOS screenshot > Mac OS via Airdrop or iMessage (adjust to 375 width)
  • Sending emails to key people Mike/SmartLine example from video

Homework


  • Find a website using SVG as a logo. Hint hint. Copy and paste the SVG code into Figma, Sketch, or Adobe XD and watch the magic happen.
  • Screenshot a few of your favorite app screens, send them to yourself, and try to redraw some of the elements.

Creating Icons

Resources

Intro to Icons

More icons from Noah Jacobus, designer at Metalab


https://www.youtube.com/watch?v=S9P7ob7Nx5I

You can design (mostly) any icon you’ve ever seen using…

  • Rectangles
  • Circles
  • Lines

A great place to start

  • 24x24 artboards converted to components
  • Start with black on white
  • 1, 1.5, and 2px strokes
  • Science and art
  • Endcaps and rounded corners
  • Using reference (noun, nucleo, streamline)
  • The simpler the better
  • Takes longer than you think
  • One color, two color
  • Usually not more than two styles

Homework


Go through the introtoicons.com videos and recreate the set of icons.

Once you’re done… add 4 more of your own icons. Some ideas

  • Home
  • List
  • Photo
  • Video
  • Filter

Extend

Try to modify the 4 icons your create into 3 different styles

  • 2px stroke versions
  • Try to create super bold, fill versions
  • Use a mix of styles (2-color, or 2-varying line strokes)

More resources:

Using Icons

Icon sizes

  • 24x24px is most common size for tab bars, line items, etc.
  • Occasionally 16x16 for smaller things with tighter controls, etc.
  • Occasionally 32x32 for larger things (iOS system preferences)
  • Occasionally 48x48 for even larger things (MyMonero navigation sizes)

Takeaways

  • Optical alignment!
  • Use the same size and style for specific uses
  • Don’t get too carried away with icon only labels (can be hard for a user to understand).
  • Don’t feel like you have use a bunch of icons—sometimes no icons can be nice.

Extending an icon’s style

  • really light vs. really dark
  • background color
  • colorful but similar (shift nudge)
  • facebook icons

Top Icon set resources

  • Nucleo – Mac app
  • Feather – (Open Source) Figma Plugin
  • Streamline – Web app (extremely large library of icons)

Homework


Check out the Feather icon set or use the Figma plugin and design either…

  • a random sidebar navigation
  • Recreate the iOS settings screen with Feather icons
  • Design your own additional icons that feel the same as the Feather icons

Simple Illustrations

https://codepen.io/mds/pen/WOPyBW

Another example of a simple illustration. I used this on the Flowkit Figma Plugin intro screen.

https://codepen.io/mds/pen/pozXQNv

View the Figma file for this design

More resources

Figma - Record Player | Vector Illustration of a record player and some toggles.

Figma - PlayStation 5 Controller | DualSense, the New Wireless Game Controller for PlayStation 5.

Figma - 3D Table with Smart Animate | Simple ‘3D’ vector table created and animated in Figma.

Figma - Fluent Design Practice by Figma

Figma - illlustrations by realvjy | Large set of open source library kit for your design project. Now, you can use all illustrations …

Figma - Figma Realism - Canon 70-200mm f/2.8 | Wanted to experiment with pushing the capabilities of Figma into the photorealistic realm. Enjoy!

Figma - Made in Figma - The Car | 3 hours of work on this Car. Everything was re-made inside of Figma 2 hours condensed in 2min30 h…

Homework


Create a “simple” illustration of either…

  • Macbook Pro, the same way we did in the lesson video
  • Any other forward facing piece of hardware
  • Experiment with colors, lighting, etc.
  • Have fun!

App Icons

Links

https://twitter.com/mds/status/1281314382669119488?s=20

Designing the Siri icon (sort of) inside of Figma

Homework


Pick any of the projects that you’ve designed so far in this course, especially if you’ve designed a mobile app, and design an app icon for it.

Use the app icon guidelines for reference.

The contents of this course have been stolen and illegally uploaded (partially). This course is fully owned by Studio MDS, LLC. A DMCA prosecution and takedown is underway. This is a clear violation of Section 5 of the terms of service shiftnudge dot com/terms.