Transcripts
1. Course Introduction and Project Overview: Hi, My name's s common and I'm a creative director at Digital Telepathy on Experience Design Company of San Diego, California I'm responsible for overseeing design strategies and solutions that we create for clients and users are process that DT includes research and strategy, user experience, design interaction and visual design. Prototyping and testing. Collaboration is really important for both our teams and our clients. It's essential for creating the best solutions to design problem. And a fundamental step in facilitating good design conversations is by talking through multiple design iterations and concepts. In this class, I'll help you get to your best ideas faster by instilling good habits that you can always lean on. These habits will come from two areas master of your tools, photo shop in this instance and work flow techniques and utilizing a broad set of creative prompts that allow you to idee eight in multiple directions. Once you've gotten a good grasp of these two areas, you'll be ready to take on the class Project a concept ideation board, which is both a framework and the tool that will allow you to create a multitude of design concepts quickly. This class is great for people who are looking to take their design ideation to a new level . It's also great for people who are just looking to refine their workflow and increase their speed and efficiency in their work. What that said, you should have some familiarity with Adobe Photoshopped going into this class. Since this class is all about creating great habits, I hope you'll find yourself for visiting parts of this class. And looking at the resource is, I provided Teoh further refine and involve your workflow doing. So you'll become more nimble, ineffective and your work for an ideation ultimately allowing you to successfully arrive at your best ideas faster.
2. Simple Habits to Improve Your Workflow: Many young designers will start by just opening up photo shop, and they'll struggle through the first hours trying to come through with a single concept. And at the end of it, they might not even enjoy the concept that they've come up with experience designers, however, more often times and not will just hit the ground running. They've got a set of habits that they know they have a great workflow, said it that they go to and they can take that idea that they first had and really just make it happen in the design. I'm gonna walk you through three of my default setups, along with why they're so important for every project that I start with. First on the list is posted notes or notebooks or anything that is analog. When you first have an idea, you might want to go straight into, you know, a wire framing tool designed tool and start figuring out what that is. But I like analog tools because it allows you to really get that idea from your head straight onto something immediately right? There's nothing faster than going Teoh the pen and paper and jotting down that concept in your head. It's also great. Posted notes are fantastic. Something that I love using because their modular right, You can do multiple layouts at any time. You can put a concept on a post it note. If you don't like it, you can just throw it away if you want a group stiffened if you want a group different kind of ideas in tow. One. You can do that. Um, you know the sticky part of the posting. It allows you to upend specific ideas onto other ideas and involve them. So I really love that. I think that they're great. They're simple. They're fantastic. The second habit that I always go back. Teoh is an inspiration holder, and that is a simple folder that just lives on my desktop or near my working files. Now there are a lot of really great inspiration APS out there, right? There are a lot of great applications that create great mood boards for you to use. Um, and I I love those ups. I love using them as well, but when it comes to really just getting in the zone and having these great references that drive my design, I have a tendency to just go back to a folder, and this folder is usually broken out in the categories. The categories I use include color, iconography and graphics, photography, tone and typography, and in any of these boulders is just a collection of J pegs. It's just a collection of shots that I get around the world, whether it's in the magazine taken from my camera or it's maybe something I found on the Web, and I take a screenshot of it or I save it to my desktop, the barrier of entry for using a folder together. Inspiration is so low that it makes it very easy to be able take any of these and transfer them to a file. So if I'm looking at a specific color that I really want to use, and in layout that I could just take this boulder and go straight to my Photoshopped violin , place it in into my references boulder. And at any time I can have that be something that I utilize in my design process. One other great use of the Inspiration folder is that one year doing a new project and a lot of the aesthetics or a lot of the direction are similar to the one you're using in the past. You can just copy this folder and take it into the new project. So the last and most important habit that I go to every single time is a default PST template. This is a template that sits on my desktop. It never changes, and it lets me skip basically one through 10 of the steps that I need to take to start a project in Photoshopped. It reinforces good habits and also reinforces good practices. My default PSD template comes with five specific things. The first thing that it comes with is default guides and grids that I know and recognize and use for any project. It includes a set of guides with adaptive breakdowns. The second thing in this PSD is a reference folder or a mood board folder. I've called her reference in my template, but you can call it a mood board if that's more familiar for you. And as mentioned in one of the earlier habits, it's a great place to put any of those images that you want to use and toggle on and off at any time. The third thing that's in this PSD template is a pouts folder, and within the palace, Boulder is a Siris of shape players that have different colors and names for them. I easily have a secondary light and a second very dark, along with the primary color. And depending on the part that I'm using, I'll have two or three sets of this. The fourth thing in the default PSD template is a scrap pile, and we'll be talking about this morning next section. But this scrap pile lives at the bottom of my background color layer. Which leads me to my last one, which is a fill color fill. Ah, Phil layer with a solid color, and I usually titled this BG for background. The fill layer replaces the original background layer that is a raster object that comes to fall to any new canvas that you open up. I basically went ahead and deleted that and replace it with this where I can change the color on the spot using the shape layer properties. One more bonus for those of you are Mac users. If you go into the actual file itself and go to get info, you can lock a file in order. Lock the file. You just click on this button right here. And what it does is that when you try to save the file, it'll default. Save you a new file over the existing template. You can't save over the file when it's locked, and so it just automatically prompt you to create a new folder or a new PSC every single time.
3. Photoshop Habits to Improve Your Workflow: now will be going over specific photo shop centric work flow techniques that'll one speed up the way that you access and assess things within your photo shop pile or two. Shave off time when executing a design within your photo shop. If you have a dual monitor set up or extra space on your main desktop window, you can double screen view for a bird's eye view of what you're looking at. You could make this happen. We're going toe window. Arrange a new blank so it'll be the name of the PSD that you're working on. Think of its value akin to ah forest through the trees. Sort of mental trick. It allows your design I to quickly assess the quality, consistency and flow of your design as a whole, and it lets you catch for inconsistencies faster. This you really allows you to consider the patterns in the unity across your layout more easily. I mentioned this next one in the default PSD in the previous section, but basically the references or mood board folder on the top layer of the layer panel is a place for you to throw your favorite mood board concepts that you can then toggle on and off, which is much more convenience and toddling to an external app. I like putting these objects on the pace board so I can see them at any time while looking at my main layout. I also have a tendency to group these by categories so I could visit certain categories of inspiration, like color or photography at any time. The colors are palette. Folder is also layered. I use in my workflow a lot. I like creating large swatches that I can easily shortcut. I drop at any time this is versus the default photo shops, watches or C C library that you can also use. I like this because it feels similar to dabbing your paint brush on a painter's palette. It also allows for easy mixing of colors. Be a layer transparencies at any time. This more edible swatch allows you to create color hierarchy within your primary palates. As you've seen year, my primary pellets are bigger than my secondary palette since very easy, easy for me to visually see. It also keeps you focused on a side of colors. It's flexible enough to allow you to make new additions on the fly, but makes you think about how important or impactful each color you at is to your overall design. Once I get to a certain amount of boxes on this, I can very easily see if fire shades of grey is necessary or if I need to simplify it down to three for a more straightforward palette. Probably one of my most favorite Photoshopped workflow tricks is this thing that I call a scrap pile folder, and it always goes at the very bottom of my Photoshopped file. You can kind of think of this scrap pile folder as a makeshift trash can that you might have on a Mac OS Most of my safe time come from making quick decisions because Aiken table those ideas that I might want explore by putting them into the scrap pile folder. It gives me a peace of mind that I can quickly pick an appropriate direction to continue with at that moment, knowing that I can restore any idea that I want that I put into this scrap pile. Most people with Max are from really with using an image capture trick that's shift command and four, and that allows you to capture something and have it saved to your desktop. If you hold control along with the shift command, for you can take that same image capture. But instead of having a go to your desktop, it actually saves to your clipboard. And why I love. That is because if I'm looking at something online or if I'm looking at something that I want to take a quick picture of, I can basically do that. Have a go to my clipboard and paste it directly into my Photoshopped file. It doesn't seem like much, but doing that very quickly when just browsing through certain things can really speed up your process instead of having to go to your desktop back and forth and trying to find that one image that you saved earlier. And when you're already pasting something into that file and you're going very quick. One other thing you can do, in addition to that, is utilized the multiply blend mode to really kind of figure out just how something's gonna look. I did this most often when I'm trying to figure out if a logo for a logo pond maybe might look good in this area and it's on a white background, but maybe what I'm putting it on is light gray or something different, using a blend mode well, that you get a quick assessment of just exactly that look that you want and allow you to make that design decision much more quickly. On a related note, two tricks that will help you foe mock something quickly is that you can better assess the specific design decision quick nondestructive color at its like radiant maps on your top. Most layer lets you try out unique color palettes on the fly and make quick judgment calls on whether it's the right direction to go and label along the way. It really, really helps in the long run at the very least group and named those. This could be especially handy if you're utilizing the search tool often within Photoshopped, or if you want a pinpoint a specific layer by right clicking it and feel free to use. Naming conventions kind of like a shorthand. When I'm making buttons, I tend to abbreviate them to Bt in stock images or graphics are shorthand labeled stock, so that way I can keep track of all the assets that I might be using and might need even later need to purchase any time I have a logo. I always write logo within the layer name, and the same goes for icons I always have Name Icon. It's that way. It can quickly search it when I need to, and I'm a really big fan of during reusable elements in graphics into your CC library. Just do it. It's especially handy and the last year consistency when you're working on a team with multiple designers on it and as you go along started separate PST that holds your best global elements. It'll eventually act as a great style guide that you can reference with elements and involved with, over time and, at the very least, a large to keep consistent within your work.
4. 3 Tricks For When You're Stuck: creative work flow and momentum works in two ways. One. Creating work. One. There's forward momentum when you're creating and exploring ideas and to there are pauses. When you decide to stop and carefully evaluate your progress or worse, stop because you don't know how to proceed. In this next section, we're gonna talk about how toe overcome those moments when you're stopping because you don't know how to proceed. Cycling is something that you might often see photographers use when they're deciding to go between ah, couple of their best shots. So they'll be cycling through, you know, in a choice, or be choice and ultimately deciding the one that they want to go forward with and at it. Like I said, if you have a hard time picking between the two after cycling, just go ahead and commit to one and throw the rest in the cycling Sorry and throw the rest in the scrap pile. You can always go back to it later and do the same and try to think through it again. So another thing that I love doing is saving PSD and numbering a new one after I've gotten to a certain point in my concept. Now when we do the ideation board, you'll be doing this six times in this PSD. However, for the most part, you're usually probably making a single concept in a single PSD. So one doing that I often like to just hit the save button, number it off, and then from there, go on to a new part. It's great. And by the end of a workflow, all have anywhere from 10 to 14 different PSC's, um, of which I can then go back to number two or three, something that I knew that I had a favorite of and bring that back, Teoh, whatever my most recent designers.
5. Black Box Mode: What I call black box mode is what most people commonly call full screen view. In photo shop, you get the full screen view by hitting F multiple times and reaching this screen. Uh, I have it on black, but if you right click in this empty space, you can choose whatever color you'd like for the black box to be black box mode is great because it allows you to really work in the tool without actually having to rely on the chrome. It's also a great way to isolate all the distractions around the screen and let you really focus on what you're trying to work on.
6. The Most Important Photoshop Shortcuts for UI Design: This next section will cover the most important shortcuts and techniques for creating you. I work with in photo shop, memorizing massive these techniques so they become great habits that allowed you to move effortlessly through Photoshopped. The following will help you navigate and move through photo shop, along with manipulating specific objects and layers. These are some common and frequently used type related tricks here, some convenient ones around color and Phil. These are some absolute go twos for layers and groups. - Here's some around the pen tool and vector based tools and these air some general global tricks that are absolute lusts to going faster and photo shop. - As a bonus, I've added some of my favorite handy custom shortcuts.
7. Creative Prompts Overview: ID eating is nothing new. The differences between idea eating and using a framework like the Concept Ideation Board is that the second will allow you to consistently create better ideas. This is because the framework forces you to iterated by giving you a minimum number of ideas to explore, along with a set of design strategies that will force you to think and execute beyond what you're normally used to trying with you with units two and three, you started forming good habits in both your overall workflow and within the tool. Your using this unit is all about introducing a broad variety of creative prompt settle in essence, give you different launching points. The idea from in this class I provided 40 total creative prompts. I should help you out there broken down into three main categories of prompts just all principles. Things that will allow you to have more objectivity with your design. I and prompt settle ask you this. Explore new flavors in this next section All highlight and demo a few from each category. Over time, you should have a set of these prompts near mine that you can then draw from an idea it on for me at about a dozen or so favorites that I tend to lean on. And I always make sure that I referenced the ones I normally wouldn't, because I want always be challenging myself on the usual design styles and conventions that I haven't. I approach project. I've included a full list of all 40 prompts in the class. Resource is section, so you can go back at any time to reference and adopt these into your ideation process. Feel free to come up with any of your own as well, and I encourage you to share them in the community section when you dio.
8. Creative Prompts in Action (Class Project): creative problems can be used both individually or in combinations. I'm gonna go over quickly how I combine and interpreted the various creative prompt fretted in this class nor to create my own concept ideation board. So my original concept is a header for marketing site, and it has a couple things in it. It's got a C p A button to sign up a menu button. It has a main title for the header along with a subtitle, and it has a little bit of body copy on the right here. It has a navigation element, and it has a nice tinted background treatment for something that could be a video or otherwise. In this case, it's just a image. So this is my original concept that I'm gonna be playing off of now. In my first generation, I decided to pick three at random, and the three I picked were depth of field, um, utilising just salt. And the 2nd 1 was trying to introduce a new palette via ingredient map. And the last thing that I want to combine was adding some sort of design flourish so specific to this layout right here. What, you're gonna first notice is the radiant map because it's a rainbow color scheme that's actually default to the great Maximum Photoshopped nine and a just slapping this one on and you can kind of see reversal on a how that comes into play. Now if I were to turn this hidden for a moment, what you're really not see is the depth of field coming in the play. So taking the original image, I'm gonna actually go ahead and turn off the filter that I had for a moment, which is a blur. You can see that based off of the original composition, that it's the same thing. I actually went ahead, and if you look at the image, I increased a little bit. But once I made that image a little bigger, I placed a glass tumbler on the top of its that we created more depth with the background and this foreground element, which is the creative concept ing title. And the interesting part of that is that when I did put the Grady a map over it, it created this sort of murky, cloud smoky effect that I thought was pretty cool. And the last thing that I really did to add a flourish was Just add this simple line to kind Divide the title in the subtitle of this header with the body Copy And I did a little bit of tweaking in the typography just for fun just to kind of make this look a little different. But the main three creative promise that I utilized where these three now, the next one Um, I got a little bit more specifically which ones I wanted to use, so I definitely want to lean on one that was around containing elements So, um so contain of necessary is the first thing that you see right here the next one that I wanted to play with was making your most important elements bold. So the most important elements in this layout to me where the title elements along with the c t. A. So I wanted Teoh play with moving that c t a positioning. I wanted to play with making that title of it more prominent. Um and the last thing that I thought would be fun is just putting the mixed the elements up . Right? So on the prior to layouts, they had the main title along with the subtitle underneath. But in this case, I wanted to use it as a divider and see if you know, I could have something interesting visually here and make this whole front element very, very compelling. And so, in this layout, I also decided Teoh you conceal here also decided to take away some of those tents. And I played in the typography of it here, too. So I contain the title. I contain the subtitle. I added a little bit of mixing right there and then I wanted to make that c t a bold as well. So I brought it over to the front near along this kind of contained sort of graphical elements in the next one that I did, I picked for actually. So the 1st 1 I chose was creates, um, a symmetry. So the third, the third concept of second consummate the first concept, they all share a very vertically centred kind of element. And so I thought that I would make set up a bit and go for some of symmetry, And I also wanted to play with a little bit, um, of a weird one, which is half the size which to me can be anything and everything from having the size of a typographic element. Teoh having something random like like the background, for example. Right? So I went ahead and played with that. I also experimented with opacity a bit more. And so one thing you'll notice what the c t a button is that I introduced kind of a, um, a second layer, if you will. And so the stroke that's around the button is a bit of a pay kind of thing. And on the bottom, the dot navigation also has the same kind of treatment. So and actually, if you if you take a look at the prior dot has a little hollow going here But here, um, when I was playing with the opacity, I wanted to just take that away because it was getting lost in the details. So, you know, these are some of the design decisions that I'm making, as I'm experimenting with these different creative props. So here you see me having these elements, you see me having the width of the text. You see me having the actual font size right here. Um, you see a little bit of a symmetry here, even with the graphical pathways of the text. Right here. Um and it just is this fun little asymmetrical sort of layout. Now, this was really unique. So I wanted to pick one of the ones that I think is probably most challenging from a prompt standpoint and that is picking your favorite three parts of the composition and deleting the rest. So that, combined with something I thought would really work well with this one, is create more white space. So I thought that the worst part of this composition was the background. I just kind of picked one randomly and they want with it. But what I really did like was where the typography was going. And and I also liked some of the utility elements, like the sign up button on the menu. I thought they were clean and they got out of the way. But everything else seemed a bit cluttering. So the navigational element on the side with the little diamond dots, the extra body copy seemed a little too excessive. And so I went ahead and just believe a lot of those leaving me just basically the background element. The typography of the main title and the subtitle and then those utility elements. So with those three things, nine of the playing with how, um How to integrate a background in a more subtle way, how to really create this white space effect without having this otherwise dominating background image being my header. And so this is the one that I can put here. And then finally, the last one that I just kind of completely went on a radical end of designing was this one , which is emphasized the worst parts of your composition. So unlike the prior version that I had done, um, since I didn't mention that the background Ellen, it was a little weird. I went ahead and tried. Teoh, emphasize it in a way that was unusual. And so, um, and this one, I really played with inverse ing the design I want with adding new colors that would really create some contrast in the deepest parts of what is now not really looking like a forest anymore. Um, I even went ahead and decided to play with the way that the typography and the flow would would be structured in this design. Um, I decided to make the C t a bold again, since that, since this whole background elements was becoming a little weird and the C t wasn't that great anyway. And then the other thing that I thought was horrendous that I would give a go and make it even more emphasized is that dot navigation, which was fine. But I didn't really feel that it was very effective. And so I brought that out center, made it even bigger, tried to make it a more dominant, engaging, interactive part of this header, and then I left the body copy below.
9. Closing Thoughts and Class Project Tips: At this point, you started creating and refining some great habits. Your initial set up workflow should allow you to hit the ground running your ability utilized. Photoshopped will be more effortless with continued practice, and you should have a variety of creative problems that will get you idee ating in different ways possible. Since this class is all about forming great habits, I encourage you to revisit some of the units that you've already gone over to continue in grading these great practices. Also be sure to utilize the resource is that I provided in the class project section and ask any questions that you might have in the community section within this class when working on the class project. Remember, it's about embracing the framework behind the concept ideation board. So whether you're doing this on a no pad or on a white board or on a post it note, please take some pictures and share those in the class also share any working progress is that you have any mood boards that you make any inspiration bowlers that you have throwaway concepts. Please share them. And don't be surprised if you find yourself making multiple versions of this concept ideation board. That's the whole point of all of this that you're able to really fluidly idea and create concepts rapidly. By continuing to refine and practice of things that you've learned in this class, you'll find yourself naturally being ableto idea on the better concepts more quickly and more consistently.
Jessica Moon, Creative Director at Telepathy
