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 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)
- 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.)
Contained Imagery in content (boxes)
- a box is the interface as the delivery method
- 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
sketch data for avatars
3 ways to use illustrations in UI design
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)
It’s hard to write a lot of text when you’re dealing with mostly only imagery, so watch the video!
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
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.
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
- Color Burn
- Color Dodge
- Soft Light
- Hard Light
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.
- 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.
This is normal. Not really anything to cover here.
The opposite of Screen. This is handy for knocking out all white areas of a photograph or colored element.
The opposite of Multiply. This is handy for knocking out all black areas of a photograph or colored element.
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 preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer.
- 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.
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.
Here’s another nice tool for automating background removal → https://remove.bg
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
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
- 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.
More icons from Noah Jacobus, designer at Metalab
You can design (mostly) any icon you’ve ever seen using…
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
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
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)
- Marc Edwards on Twitter → Icon Speed Runs
- Nucleo Icon Guidelines https://blog.nucleoapp.com/nucleo-icon-guidelines-introduction-70092f8b4697
- Meg Robichaud https://www.youtube.com/watch?v=7Hz6TxJUOAM
- Ryan Putnam https://www.youtube.com/watch?v=0AeOvSze_Cc
- Streamline Icons https://streamlineicons.com
- Feather Icons: https://feathericons.com
- 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)
- 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)
- 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
Another example of a simple illustration. I used this on the Flowkit Figma Plugin intro screen.
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!
- iOS App Icon specs
- MacOS App Icon specs
- Material Product Icon specs
- Free App Icon Design class from Michael Flarup
- Premium macOS App Icon template from Michael Flarup
Designing the Siri icon (sort of) inside of Figma
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.