Digital Design

Digital Design Theory

What is digital design?

Social media, web design, design for mobile, digital billboards, display ads, video thumbnails, ebook covers, PowerPoint or slide decks, icon and app icon design, email campaigns

Digital Display Ads

• Display ads have to change based on the size you are creating it for. The smaller the ad, the more you have to pare down. You must communicate that to your client so they have realistic expectations.
• Most important aspect to include is the "call to action", ie. - "Book Now"

Social Media Design

1. Understand your target audience: age, gender, geographic location, etc.
2. Be authentic. Try to connect with your audience more than just run of the mill ads. Add in pictures of people interacting with product and add a cute/catchy headline in eye catching fonts
3. Use contrast well, especially in the call to action
• "Buy now", "Swipe up for Deal" - highlight one word in headline with color
4. Use photos that connect with viewer
• Use a higher impact image by altering colors to match brand
• Use full color instead of B&W because they are more effective
5. Crop your photos well to tell your story
• Add pops of color with new layers
• Use blending modes

Digital Web Design

Essentials to Keep in Mind

• Consistent branding
• Authenticity
• Well-written copy
• Effective product photos

Web Design

1. Use contrast
• If there is a shopping cart or other button you want people to see, use a pop of color to get their attention
2. Use size to your advantage
• Use a larger product photo when you can
• Use fewer options per screen, and increase their size to make conversions better
3. Keep it clean and simple
• Simplify your design
• Use type heirarchy (h1, h2, etc) to emphasize the most important parts
4. Font choices are everything
• Readable at the final size (ie - different screen sizes)
• Keep it as simplae and orderly as possible
• Do not use too many different font choices on one page. Use three or less different font choices per webage or digital graphic
• Use contrasting font styles
• Keep line length to 60 characters
• Avoid too many decorative fonts. Use them only in short headlines and use them in larger sizes so you can read them
5. Hamburger vs. Shelf Menus
• Hamburger menu is the one used in the top corner with three little lines stacked up
• Shelf menu is used only on smaller screen sizes (like phones), and it just includes icons (no words) and sits at the bottom of your screen
6. Design mobile first
• Design at smaller sizes first, and then work your way up to larger sizes
7. Responsive Design
• Responsive design is used at a programming level to change the look of a website for different screen sizes
• When using this sometimes elements collapse into menus, and sometimes elements are not shown (photo disappears, but leave text)

Design for Accessibility

1. Color blindness
• Reds and greens can look similar
• Sometimes all colors look similar
• Don't rely solely on color for call to action button. Add a thicker border, bolder font, arrow or graphic to help draw your eye.
• You can check the readability of your design by converting it to black and white to see if what you want the viewer to see still pops
2. Help visually impaired
• It is important to use high contrast colors, heavier font weights, and be aware that text on photos may be hard to read
3. Use "Alt" text
• Make sure that photos have "alt" text
• This is a description of the photo or image in text that allows screen readers to read it out loud
4. One handed navigation
• Make sure that you can navigate through your site with one hand (tab, enter, etc.)
5. Help hearing impaired
• Make sure all captions are turned on for any audio or video

Creating Effective Digital Layouts

1. Print & Digital Billboards
• User must be able to read your message in 5 seconds or less
• Use large images
• Avoid phone numbers
• Use URL
2. Ebook Covers
• Keep cover simple and high contrast
3. Email Campaigns
• Consider whether your user is reading it on a computer or a phone
• Simplify message to only one goal
• Use single image at top and very little copy in the body
• Large click through button or large call to action
• Emails that conver the best have only one focus
• If you want to include multiple topics, use a newsletter instead
4. Consistent branding
• Use similiar colors throughout all ads for business
• Use similar shapes/icons throughout so the brand becomes more recognizable
• Use a unique shape or graphic throughout all ads to make brand even more recognizable
5. Use Grids for Design
• Grids can help with the placement of a photo (face) within an ad
• They help make sure your gutters are equal
• They make sure your alignment is correct
• Mobile grids: standard 4 column grid
• Computer grids: standard 12 column grid
• App icon design: Apple created a grid based on the principles of the golden ratio
• Modular grids: ebook covers, ad campaigns, grids designed for specific uses
• This can all be achieved with Adobe XD

Designing YouTube Thumbnails

Royalty Free images

• Pexels.com
• Pixabay.com
• Unsplash.com

YouTube Thumbnail Template

• 1280 x 720 px
• 300 ppi for max quality
• Can add a margin/border to help you keep vital text and images a safe distance from border - turn this layer off before exporting
• Export file as high-quality jpeg
• File → Export → Export As → JPEG → Quality 7 (high)/100% (make sure it is sRGB mode)

Steps to Create Thumbnail

1. Place photo into Photoshop
• Isolate person/subject in photo and get rid of background
• Click off of photo
• Select → Subject
• Add laying mask layer (this allows you to right click on layer and release mask later to go back to original photo
• Copy/paste into YouTube thumbnail template file
• Right-click on photo layer and turn into Smart Layer. This allows you to resize the photo without pixelation because it prevents the photo from rasterizing
• If you need to resize the photo selection Edit → Transform → Scale
2. Add background color
• Add new layer
• Get paint bucket tool
• Choose fill color
• Click on background
• Drag layer below image so the color is behind the image
3. Add background photo behind main image
• Open image in photoshop
• Click off of photo
• Copy/paste into YouTube thumbnail template file
• Right-click on photo layer and turn into Smart Layer
• If you need to resize the photo selection Edit → Transform → Scale
• Move layer down behind image
4. Add text
• Add new layer
• Make each line of text (or word) it's own layer of text so you can manipulate it best
• Tip: UPPERCASE TEXT = STRONG MESSAGE
• Tip: lowercase text = softer message
• Tip: Use color contrast in your headline to help break up your message into digestible pieces
• Tip: It is popular to layer one letter of the text behind the photo
5. Vector Mask an Image
• Make sure image is a smart layer
• Select layer
• Add vector mask (at very bottom of window - looks like a black square with white circle in middle)
• With mask selected, choose paint brush
• Brush tool: Black = Remove sections of photo, White = Bring back sections of photo you already removed
• When choosing color, make sure front color is selected, not back color
• Tip: It is popular now to have a solid background color and then add a blending mode on top
6. Add Blending Mode to Image
• Make sure image that you want to change colors is on top of other layer
• Select top image layer
• Scroll through different blending modes to preview their changes
7. Visability Test
• Before you are done, do a visability test
• Zoom out to 50% and check: Can I read it? & Can I see all of the main design elements?

Creating and Digitizing Hand Drawn Assets using Procreate

Procreate

• An advantage to using Procreate instead of paper is that you can save and export your hand drawn file as a PNG with a transparent background
• This eliminates the step where you have to delete the background of your hand drawn on paper image (and it looks crisper this way)

General Steps

• New canvas - 4000 x 4000 px sRGB
• Every item you create needs to be on its own layer
• Change background to transparent: Find layer for background, and uncheck the box so it turns transparent.
• Export/Share as a .psd (Photoshop) file

Create your own hand-lettered alphabet

• Create a grid on your new canvas
• Settings → Canvas → Drawing Guide → Edit Drawing Guide
• You can edit the size of the grid
• Each letter of the alphabet should be on its own layer
• Create each letter so it uses up the same amount of boxes in the grid to keep the alphabet consistent

Watercolor paint swatches

• Same as creating assets or custom font
• Create paint swatches with different brushes, colors, opacities, etc.
• Keep each swatch on its own layer
• Can use custom colors from screenshot of color palette or from color.adobe.com

Using Hand Drawn Assets in Photoshop

• Open the .psd file that you created in Procreate in Photoshop
• Open a new file that is 1080 x 1080 px in Photoshop
• Copy and paste any hand drawn asset you want to use into your new file
• Right-click and make each asset a smart layer
• Move assets around, arrange however you'd like
• Possibly add a photo from a free resource website like unsplash or pexels
• If using hand drawn letters to create words, you can select all of the letters and merge them into one layer so that all of the changes you make to the word will apply to all of the letters
• If you want to change the color of a hand drawn asset, you will double click on the layer it is on and then add a color overlay effect
• To make assets pop out from against the background it is useful to add a drop shadow
• If creating an entire social media campaign, after you add different overlays and such to one ad, make a copy of the add and open again. This time add a new photo, but use a lot of the same overlays to make them look similiar

Digitizing Hand Drawn Sketches

There is a 2 Step Process

1. Photoshop: Use Photoshop to edit the photo of your hand drawn sketch. This is important for adjusting the image if it needs to be lightened
2. Illustrator: Use Illustrator to trace the image and to color it

1. Photoshop

• Take photo of sketch by a window or a good light source
• Open photo in Photoshop
• Image → Adjustments → Brightness/Contrast
• If image is too dark and you can see wrinkles in the paper, increase the brightness and the contrast to clean it up
• Save as a jpeg

2. Illustrator

• Create a new document (make sure it is RGB)
• Place or drag into document
• Center image on document, reduce opacity to about 50%, lock the layer
• Create new layer on top (make sure it is selected)
• Outline image using pen/curvature tool
• Tip: Outline overall shape of one item at a time first (ie-shirt, pants, things that will be one color), and add the details to that shape later
• After all outlines are complete, change stroke thickness to customize illustration
• As long as each shape is closed, it is easy to add a fill
• Add fill to everything first, then you can go back and add highlights and shadows
• Highlight color: use original color and then choose a slightly lighter color
• Shadow color: use originial color and then choose a slightly darker color, or use a shade of blue
• Puppet Warp Tool: After the entire illustration is done, you can use the puppet warp tool to move the illustration around a little like it is animated. It could help you create different angles or versions of your image if you'd like.