 My name is Scott Fisk, and I teach Graphic Design and Web Design at Samford University in Birmingham, Alabama, and we're going to talk about the power of design. So before we get into this presentation, I want to get to know you all a little bit by show of hands, who in here is a blogger? Great. Who in here is a developer? Yeah, sure, any kind of developer. And last but not least, who in here is a designer? Wow, a lot of designers, okay. Well that's good to know. I want this to be sort of a conversation. If you will, please don't hesitate to speak up if you know something about the particular issue that we're discussing, since there are a lot of designers in the room, I would be particularly interested in hearing what you all have to say. So please don't hesitate in sharing your thoughts, your opinions. I started in web design in 2004 while I was in college. I was going through a traditional print program, and I just found myself in a role learning on the job how to be a web designer. And it's amazing. For those of you who've been in the field for a long time, isn't it really just amazing how things have changed over the past few years? So what are some things that have really changed in regards to design over the last two, three, four, five years? No more speaking frames. Absolutely. The frames are gone. What are some other things that have changed? Responsive. Responsive is huge. What are some other keywords, buzzwords that we hear all the time? Yeah, what else? Yeah, pure words, lots more visual. It blows me away when I look at webpages that are just so heavy and graphical. How can we be at this place? The internet at least in America is just getting faster, which allows us to be much more creative. That makes our job a whole lot more fun. I did want to mention real briefly the AIGA. That's the American Institute of Graphic Arts. Every major city has one. Atlanta has one. I'm on the board in Birmingham. If you're interested in learning more about design, please just go to aijay.org and there's lots of wonderful information on there. Plus, there's going to be one in your area somewhere that has events monthly. You can get into this sort of thing if you don't know a whole lot about it. Let's get the ball rolling. Power of design. This is what we're going to talk about in our 35 minutes. What is design? Why good design matters? Human-centered design, design basics, and how to get inspired. What is design? I encourage audience participation. What is design? In your own words? Subjective. Layouts. Keep going. Come on. Getting the feel. Aesthetically pleasing. What else? Visual effect. Visual effect. Interpretate. There is one keyword I'm looking for. Keep going. Effectiveness. We're getting close. Storytelling. Storytelling. Okay. Those are all good. Last one. Absolutely. We're getting real, real close. So, Saul Bass, wonderful poster designer. Also, motion title sequence designer. Said that design is thinking made visual, and I like this definition too, this next one. It's just visual problem solving, right? That's what we all do. Everybody in the creative field, whatever your position is. All those people that raise their hands a little bit ago about development, blogging. Everybody in here is a creative problem-solver, and that's really what's important today. That's what your client wants. They don't care if you're the one who does it or if you hire somebody. As long as their issues are resolved, you are a creative individual and you're helping them. That's really the key thing that they're looking for, and that's what we're going to talk about. Okay. So, why design matters? Because this is specifically engineered really towards web. First impressions count. Any guesses as to how many seconds according to Nielsen's survey the average person spends on a web page? I just looked this up this morning because I wanted to double check. You guys are all real close, 10 to 20 seconds, anywhere in that ballpark, and of course there are some folks that are going to stay longer and some less, so that's kind of a ballpark. Brand manifestation, credibility, user trust, sticky factor, that's just how long someone hangs around. The return rate, of course more sales, and most importantly, good design is memorable. And that memorable leads directly to, of course, good branding. And what is good branding in your opinion? Branding is everything today. You can't talk about design without talking about branding. There are a lot of wonderful corporations, wonderful brands out there. What makes those brands just sort of stick out in your mind? Why are they always there? They're recognizable. They're recognizable. Let's keep going with that. What else? They're everywhere. Yep, they're everywhere. So, there's the repetition. That's a key word. What else? They're simple. We can relate to them. They're simple. Absolutely. What are some of those really big brands? What's the number one? Let's try to guess the number one. You guys are close. Atlanta. Apple. Apple. You guys got it. That was quicker. So, I've done this presentation four times. Now, that's the first time anybody's ever got it that quick. So, congratulations to you all. So, this is from last year. This is off the website innerbrand. They track this stuff. Apple, Google, Coke. So, you guys are real close when you said Coke. IBM, Microsoft, those are all the most popular brands right now. And this is really the most important thing that sort of spurs on brand recognition. They invoke some sort of emotional response. So, think of Nike with their TV commercial and there's the guy running and the sweats pouring down his face and he's hot. And what does that do? That embeds itself into your mind and the next time you go to Pishoo's you're thinking, hey, I could be that skinny little guy that's running across the road instead of the person that I am. So, emotional response. It could be something that's positive. It's happy. It could be something that's sad. It could be something that's just engaging. But it really touches you with your soul. That's what good branding does. It tugs at your heart in a way that nothing else can. It's almost like going to a good church service or something. It just gets you very emotional. That's power, guys. That's extreme power. That's the power each and every one of you has when you do good design. You have the power to change perception. That's remarkable. I mean, it really is when you think about it. So, good design. It's usable. It's accessible. It's usually fairly simple. It's innovative. It's engaging. We have branding. It's functional. It's useful. It's aesthetic. And it's honest. And it's long lasting. So, something that I think about good branding quite often is usually it's kind of like a good friend. You can trust it. You know that they're always going to be there when you need them. And it's believable. And it's somebody that you know is always going to support you if you need that support. So, a good brand is like a good friend in a lot of ways. So all good design is, and this is kind of a loop back to what we were talking about a few minutes ago, human-centered and human-centered in broad terms is a type of user interface design process in which the needs and wants and limitations of the end user are taken into account. So, let me ask you all this. What is the difference between user interface design or just interface design and human-centered design? User interface design and human-centered design, or UX, user experience design. So the second one is about the customer. I heard somebody say, what else? It's more about emotion with human-centered. Yeah. It's more about emotion. One is mechanics. Yeah. One is mechanics. So, the first one is kind of just doing it. And the second one involves, there's something I'm looking for here. Human follows function, and usually there's some sort of user testing. There's some sort of, let's put it out there, see if it works, and we're willing to adapt it. That's really the big difference between this year. So have you ever, and this is fun, I really enjoy this little conversation, have you ever gotten lost due to poor signage, failed to figure out directions, failed to figure out how to use a TV or more to remember the olden days, the bad VCR, burned yourself when you thought it was going to be hot water or cold water and it came out hot, that's bad design. That's not your fault. Somebody created that product improperly. And here's my little example for that. You know, just if you see this, would you think it's a pull or a push? Intuitively. You think it's a pull, right? Well, guess what? In real life, it's both. Isn't that horrible? Somebody could be pulling on one side and another person's pulling on the other and who knows who's going to win out. So that's just bad design. That's not intuitive. Good website design is intuitive at the gut level. We all know how to do certain things. Many of you have probably seen those videos on YouTube of little kids using iPads. It's amazing, isn't it? Like little two, three-year-olds that have the intuition to actually understand how to make things work because the iPad is just so intuitive. It's so easy to use. That's what we want to do when we make websites. We don't want to have to retrain people to do the stuff that we want them to access. We want them to just be able to use it without having to work at it. So this is a fun little game that I saw at an airport. I can't remember where, honestly. Last year, I think it might have been Pittsburgh. And it was so intuitive, notice the little icon where the little kid's hitting it, that anyone, no matter what the age, could walk up and they could play this little game. And it was an ad for Siemens. And it was just a fun little branding sort of thing. It was a fun little exercise that made people aware of what Siemens could do. And it was intuitive. Good design should not be hard to figure out. It should be automatic and engaging. So what does good design do? Good design solves problems. We discussed that. And this is my little sort of breakdown for going through the design process. When I make websites, or really when I do any sort of design, I break it down into three basic parts. Analysis, where we create the personas. You have to put yourself in the audience's shoes. You can write up a little story about that test demographic. John Smith is 33 years old. He works in Atlanta as a shoe salesman. And he would love to such and such. And you just come up with three of those. And a lot of times that can help you sort of put yourself in their mindset, which helps you design the site. Always think about the user needs. Always think about the context. When it comes to actually designing, I always sketch things out. Thumbnails are just a whole lot faster for me than trying to do something on screen first. So I always do lots of thumbnails first. Then I'll do a wireframe process. And then I prototype and Photoshop. By show of hands, how many of you use other programs other than Photoshop to do your prototyping? Some folks use Illustrator. I'm just curious. Illustrator? Anything else? Envision. That's interesting. So there are lots of different ways to go about this. In reality, there's no wrong way. The most important part of this process is really the first part. We're going to talk a little bit more about that in a minute. After we finish up our prototype and we sort of bring that website to life in HTML, typically I'll do Photoshop. I get the client to OK it because if I don't, it's always a nightmare. So it's funny. You can send clients the images. And if you send it to them as a link, it'll open up in a web browser. And a lot of times they think you've done the entire website, even though you haven't. And then you go through after they've OK'd that and you design it. You code it out in HTML. And then I create a custom theme using WordPress. So it's very important to get the clients OK before I move into coding mode. OK, so design basics, grids. And this is just some helpful tips. And again, guys, if you have any other suggestions along the way, please feel free to throw them out there. Grids are really helpful. Everything is headed towards a sort of simple, straightforward, lots of negative space grid. This is very busy. So if you have lots of content that has to be displayed, you can use a tighter grid with more cells. 960 grids are really popular today. I am curious in hearing about how you all deal with this sort of thing when you're dealing with responsive because it just changes so quickly. But what's the beauty of a 960 pixel wide grid? Why do most designers work, at least traditionally, with a 960 pixel wide grid? What's? It divides down. Exactly. It's divisible by anything. Absolutely. So you can split it up into columns very easily, just like we see here. And it allows you to organize everything in a very easy way. Negative space is really important. This is the big release of the Apple Watch. It'll be interesting to see if that actually works out or not. So you can't really talk about good usability, good design, without at least mentioning Apple. And they're real good at using lots of negative space. Brainstorming is key. When you guys are doing brainstorming, try to keep an open mind, realize that there are no wrong answers when you're brainstorming. The obvious answers normally come first. So when I teach my classes, I always try to start off where everybody's brainstorming is a team. They write down ideas. They do word association. We go around the room. Everybody throws out lots of words. There's nothing wrong. This is how most advertising agencies work too today. When you work in teams, a lot of times somebody else might trigger an idea for you. And you can work back and forth, and it really helps. Write down all of your ideas. I live, eat, breathe, sleep with my sketchbook. Sometimes you'll just wake up in the middle of the night. Oh yeah, and you'll write that idea. What happens if you don't write your idea down? It's gone forever. Isn't that horrible? And like a week later, you still can't remember that idea. It just drives you crazy. Absolutely, absolutely. So share ideas with others. Even if it's somebody that doesn't know anything about your project, be willing to just talk about it. And it's just so strange how our creative mind works. Things will pop in at the most inopportune times, won't they? You'll be eating dinner, and you'll be like, oh, I get it. I finally resolved that problem. I made sense of it. I figured it out. Do not be in a hurry. That's a key. If you have a deadline the next day, it's going to be really hard for you to be creative. And try to be inspired. So let's talk just real briefly about inspiration. Pinterest, back in the olden days, we used to get these big boards, and we'd go and we'd cut out all this creative stuff and pin it up on a board. Pinterest does that for us. You can find just about anything on there, or you can add to Pinterest if you want to. It could be logo design. Whatever the subject is, you can use it as a mood board, is what we call it. Dribble is a lot of fun. What are some other good resources that you all use for inspiration? I'm curious. Inspiration of any sort. Absolutely, album covers. And that's really why I asked that question. It doesn't have to be website related stuff. It could be music. So good catch. You could just be sitting there kind of zoned out. You've been working your tail off all day. You have no creative energy left at all. Just turn the music on. Relax. If you are not, so have any of you been to a real fancy advertising agency? What do they usually have? What do they like? What sorts of things do they like to do at these? Or Google. Yeah, what's that movie about Google, those guys? Yeah, internship. That's real guys. They're really creative places. So what, ping-pong tables? Pool, what else? They let you bring in your tips. Yeah, it's why. They're not doing that because they're trying to be nice. They're doing that because they want the best from you. They really. They're a campus that's randomized. They want as many people as possible interacting. Yeah. They're designing a new campus. They want people walking to each other's places. He's saying maximum interaction. And that is a trend today within a lot of design firms and ad agencies. It's sort of opening up the workspaces and allowing people to communicate more freely between each other on projects. That's a big thing today. So be creative. Everybody has something that they like to do that sort of relaxes them, whether it be a walk in a park, whether it be swimming, exercise. That's what you've got to do, guys. You have to block that time off because that's the only way that you're really going to be as good at what you do as you can be. And remember, creativity isn't just design. It's whatever it is that you're doing that's problem solving. You have to stay calm. When I teach my classes, my students will know the deadline's coming up. And I can see the creativity just going out of them day by day. It's just gone. So anytime you have a deadline that's imminent, really you just need to give yourself ample time to be creative. And anytime I do a project, I do reverse planning, backwards planning. You guys know what that means? You kind of start backwards. You're like, this is where I have to be back here at the end. And then you back it up. And I always try to give myself 50% of the project time dedicated towards creativity. And then I give the other 50% of the project time towards just the functional stuff, the business stuff, the back end stuff. Fonts, typography. This is a big change over the last five or six years in our field. Sarah versus Sans Sarah. What works better on screen? Sans Sarah. It's easier to read on screen. What are some of your favorite fonts? Just throw them out there. Yeah, myriad. What's that? Verdana? Trajan. Comic Sans? Yeah. Copperplate. There's some real fun videos that make fun of Comic Sans and Copperplate and all those other bad fonts. So with typography, what's the key? What is the key thing that users want with good typography on the internet? Readability. Exactly. So when it comes to body text, please just try to choose the path of least resistance and go with something that makes sense. When you're trying to be more creative with typography, what other text elements can you apply that to? Yeah, the headings, you can be a little bit more free. Subtitles, right? That's a good place to be creative. Line height can help a lot. Which one's easy to read? Left or right? Absolutely. Little bit more room. Cloud typography is a big thing today. What are some different cloud services that are offered? This is hopefully for your Jones. Typekit's the big one. What else? Yeah, Google Fonts. What are your favorites? Google Fonts. Google Fonts is free. If you have the creative cloud software, they just started including Typekit, at least some Typekit fonts, for free, which is really helpful. And it will seamlessly work between all of your software. It's like magic. I really like it. So if you haven't had a chance to try that out, make sure you give it a shot. You can download the fonts. You can use them in print project. It goes back to branding, right? You want that multi-channel cross graphic slice of everything to sort of fit together in some sense. So your web fonts can be the same as your iPad app fonts is the same as your print fonts. Don't be afraid to spend a little money. Most of the good services, the Google ones are free. If I was a real snobby typographer, which I'm not, I've used Google the Google Fonts before. But some people don't like them quite as well as the Typekit fonts. Yeah, absolutely. You should do that. You should think about it. It's really a bummer to me that you can't install a whole lot of fonts on like my iPad. It just doesn't work that way. So that is something that you need to do. Always do lots of cross browser testing. This is a website that's called Awards. And notice it has WWW in it. It has lots of really good website designs that are really inspirational, one of my favorite sites. And don't feel like you have to write all this down. This presentation is listed on my Twitter account, which is just Scott Fisk, choosing a color. And this gets back to color theory. A lot of graphic designers have to take a whole color theory class in college. What is color theory? Color theory means that if I paint this room red, you guys are all going to be really hungry. Because red, it's proven. This isn't an opinion. It's proven red makes you guys hungry. What does yellow do? I have a little seven month old baby at the house. We have a room that's yellow. And he's always kind of sad in that room. He's not as happy. Because studies have been done on this. And it shows that little babies don't understand the difference between yellow painted walls and being outside in the sun. So they instantly start to cry. So there's lots of subtle emotional things that are sort of built into our subconscious that deal with color. This is called color scheme designer. It's really fun. It has built in color samples. So if you know for sure you want to work with blue, you can click on triad, which is a color sample. And it's going to pick the other two colors that fit that blue. So if I ever get stuck with color, a lot of times I'll go to colorschemedesigner.com and I'll just play with the colors. It also spits out the hex, which is really handy. And hex is simply the number so you can plug it into the website in case you didn't know. OK, next, color. You guys tell me, most good brands, how many colors do they have? Yeah, usually one or two. So if I say brown, what brand? There you go, see? You guys have been programmed. You don't even realize it. You're all robots to some degree. That's what good branding does. It embeds itself in your mind and you don't even realize it. So benefits of custom themes. By show of hands, how many of you all do custom theme design versus template stuff? A few of you? And those of you who do that, why do you do custom things? It's so much easier just to go and pick. I'm playing devil's advocate. It's so much easier just going download a theme. Why build a custom thing? Yeah, sometimes a customer might want something that's really different or really unique. What else? Yeah? Sometimes out of the box is heavy. So yeah? Snob. Snob. It makes you mess up. Well, I like the custom theme stuff only because it does keep my, I'm trying not to be technical here. But when I do use themes, which is quite rare, a lot of times it'll install a lot of extra stuff I don't need like plugins that have to be updated all the time. So when I do my custom theme design stuff, which is how I usually approach my design projects, they're much lighter files. They're easier to keep up to date and they're a little less hackable. And most importantly, they're branded specifically for that client, which is really nice. So here are a few examples of work that I've done in the past. I made the custom illustrations that you see. This is all custom theme design. Made the logo at the top. This is a, there's a video up here. It's a Vimeo video embed that starts playing. When you click on the picture, there's a little play button that shows up there when you first load the site. This is one of my most recent pieces. This has a slider in the middle and there are different photographs for this art gallery slash frame shop. It also has WooCommerce on it, which is really helpful as you see in the upper right-hand corner. This is a law website. And the photographs really make a big difference, don't they? Photographs are a lot of what we sort of gravitate towards with good web design. What makes photography so important? Why are we inherently so photographically natured? Why is that? Yeah, we do. When you dream, do you dream in words? You might have words kind of going on, but really what do you remember when you wake up? It's the colors, it's the imagery, right? Absolutely. And every, you know, I call it the younger generation in particular, I sort of call them the Twitter generation. It's not just Twitter that's short and quick. Everything about everybody's lives today is just so abbreviated. Don't you feel, I feel overwhelmed a lot of the time. There's just so much media out there between Facebook, what you see on the news, Twitter, you know, we're constantly being bombarded. And what you have to do any time that you're being creative is kind of box yourself off, disconnect, and relax and really kind of enjoy life a little bit. But getting back to photography, just realize that's an important part of the equation and hopefully some of you had a chance to go to the photo talk that took place today. What are some good resources for learning about photography if you're interested? Yeah, Instagram, Pinterest. Yeah, there was a talk, yeah. What is your philosophy on choosing a picture when the service provides various things they do? That's a good question. I was actually an army reserve photographer in Iraq for a year, so I spent the year embedding with units in Iraq. It was an awful experience in some ways, but in a photographic sense, it was quite interesting just to see all of the different things that were happening over there a few years ago. And photography is really impactful today. A lot of, there's kind of a recent trend with a lot of folks to use stock. And the one drawback with stock of course is it's not gonna be specifically engineered for that need. So what I usually tell folks is, look at stock to get ideas and then just go shoot it yourself and then you can make sure that it's exactly what you need for that use. But if you're in a hurry and you don't have, it all comes down to budget, right guys? Every time, whatever it is. So you just have to make those decisions based on your budget. But if somebody does design work and manufacturing work and repair work and you have to show one picture, which one do you choose or? Right, well what do y'all think? I'll take a couple first. You could create a collage with a grid, remember we talked about grids? Or you could do something like a slider. Some of those websites had sliders on them. My clients usually like to put multiple things on the homepage, so I end up implementing a slider probably half the time. So how do we track all this? How do you really know if you're doing things right? Analytics, what else? What are some other methods for sort of tracking success or failure? Conversion rates? Conversion rates? Survey. You could survey, absolutely. You could sit down and interview, there's qualitative and quantitative ways of doing this so you can conduct interviews. These are some of my favorite books on this particular subject. The Don't Make Me Thank One is really down to earth and easy. Nielsen has a lot of good stuff on the internet. You really don't even have to buy the book. You can get a lot of his stuff off of his website. Any other good books that are worth mentioning that deal with just good user experience design, good usability? Yeah, what's that one called? I own that book, I have it on my shelf. I can't remember what it's called. It's not, it's like the psychology of, somebody's gonna look it up, of design, I think. And it's very much like, that's where I pulled the example out of that book for the hot water faucet thing. Exactly. Yep, absolutely. This is my favorite color book. This is kind of creepy. All of you have probably used the Pantone chart to pick out Pantone colors like for your house. They own copyrights on all those colors. Isn't that creepy? They really do. They have certain mixtures that make that color really accurate. But this is fun because it has a whole chapter dedicated to like red. And it gives you the message, the meaning and it tells you how that's really meant to be used psychologically, so that's a fun book. And really, that's it. Time for questions. Thanks. Oh, what's the name of the book? It's called The Design of Everyday Things. It's called The Design of Everyday Things. And that's just a good overarching book about the power of design in our lives. Every aspect of our lives. Yep. I'd love to know how you all, this is how I deal with that sort of thing. When I get my clients sign off to design on a website, I will put a lot of time into the homepage and then I'll make one sub-page template. And I will sort of lay that out in a general sense as to how all the other sub-pages are going to work functionally. But then sometimes I'll go ahead and finish after the rest of the site. And I'm like, it's just they're all too similar. And I have to go back and I have to change things up. And clients are becoming increasingly picky and aware. And this is a good thing, aware of design. We've come so far as a society. And I think a lot of people are aware of what good design is. So a little bit of variety is good, just not to the point where it feels like it's a different. Does adding that kind of stuff then when it goes to mobile starts fluttering out? It's not worth doing. Did everybody hear the question? What if you put in a poll quote and a couple extra pictures that are laid out in a unique way? Well, the great thing about responsive is you could drop out anything you want. You put in the tag that drops that column out. So I would drop out the poll quote. I really would. And I'd drop out some of the less important images but leave the focal point graphic. Question in the back? Yeah, I'm one of those who creates So I work with designers and one of the things that we get into battle is my argument is that content should arrive at design. Absolutely. Content is king. We've all heard that, right? So again, I didn't argue. So it's about, wouldn't you all agree today it's kind of a balance? So what does Yoast say about content? Some of you all went to the Yoast. I didn't make it to the Yoast. I just know this because I use Yoast on every site that I make. What's the minimum word count on a page? It hasn't listed in there. There's a minimum word count. So when it comes to content, it's just not gonna show up unless you do it right on Google. It's not gonna be found through SEO. And that's what people are going to the darn site for. So yes, content is king. But remember, content could also be a visual illustration of how to make something. It could be directions that show you how to make something happen. Put together an Ikea piece of furniture. So sometimes content might be visual in nature or in illustration. Sometimes content could be video. So as time goes on, we're becoming much more and more sophisticated in, I think our site visitors are becoming more sophisticated in what they expect out of the variety of content. Wouldn't y'all agree with that? Other questions? The minimum, I can't remember. That's why I asked you. Three to 500. And then Yoast goes to a green light and says thumbs up. So it doesn't fail you. Which I love Yoast. It's a great, great program. Any other questions? Okay, well thank you so much.