This is my first war camp for a long time and it’s really exciting to be here. I flogged you all for making it to the bitter end being here for the last session and I hope to make it my hands developers: users, sweet nice mix. Okay, my objective today is really to give you some of the best practices for creating just a nice visual design.
Very basic we’ve done a lot of coats up. Our my head is hurting all of the code of all the technologies that we’ve been talking about this weekend later, i’m also enough emphasis with I don’t usually work out the powerpoint and usually much more free-flowing. So this is the way I would normally go through a session like this alphagraphics set in place ahead of time, so so design, really. It is what we have in our minds and we bring it out into a way that we can express officially with the world right, pretty simple everything around.
This is designed that Ramos says wow gorgeous design. If you really take a look around you, this building is a ticket out. Every single thing in here has a very conscious. So what this is about is designing on the web, we’re going to tell a story, always whatever we put out there. It’s not always a story, one in town right, so my goal here is to show you how it not to have. Your site looks like this for this one, I’m quite as bad, but itself pretty crazy, not sure what they were thinking.
This one actually has a slider, so it’s not that updated and yes, this is huh this one I just had to show you live, because this is a very interesting content. Maybe this was a class think it is not going but visually it’s really confusing. I’m not the way we want to design your site comes back, I don’t know, I think they updated this blasted fall 2008. So, okay, ok, so we measure our help. You make sure your design, so don’t socks with it.
When I hide first things with any project design development, what happy any project need to ask more questions right? We need to find out who’s the client first of all who’s their customer. What’s the purpose of the website is an information like a brochure. Is it an e-commerce site supposed to sell things is supposed to get directions? What’s it supposed to do, there’s so many possibilities, it started and then what we needed to do, what kind of functionality this is websites have all of those things go into the design.
What’s the customers paint is this a site for APD client who can’t deal with a lot of visuals? That needs to be very simple, clear, or is this a store where we need to have lots of products with clear information and different categories? Something like that? What do we need to do? What’s the customers paying, were they looking for their existing Brandon at paid for into our design? So the customer might have seen this a lot.
They might have a logo, that’s don’t and years old and could use some refreshing stay with it. So how can we use their existing branding and still like something that’s attractive? I’m a visual person, I love Pinterest, is great for inspiration and colors make a huge difference in the leg and the move and it creates so we’ve got the color wheel here and raise your hand if you’re familiar with the power bill.
Awesome if you’re not just take a look at this with red cool colors, I reg we’ve got more colors and then over here we thought the way the color wheel is broken up. We’ve got primary colors, which are red, blue, yellow and secondaries, which of those complementary colors on the opposite side of the wheel, and then you’ve got colors that are complementary, they’re next to each other. Now, there’s a lot of psychology that goes into choosing colors for your website lose tend to be kind of corporate business.
Brad’s are obviously more fire sites green button. So there’s some information there there’s a ton of information on the web on psychology taste the rainbow not before about not for this, so we want to go a couple. We want to keep it simple best practice for your colors in any design that particular website one or two main colors that complement each other and an accent color, which is also called a conversion color.
So, for example, we’ve got two shades of warm color, which is fine, use, multiple shades and second color here, and our accent color. That usually needs that we’re going to use that color for what we want. People can do something some examples of our two and then the accent oh, so this is just a quick example for this particular site. We might have the background, be yellow or toned down version of that yellow and then some blue and then the accent color might be the five buttons for the links.
So that’s what that conversion color is course. What do we want to use that for when we want free to resume for choosing color schemes? I don’t use a photo. I just I really like to take a photo from nature. For example, you can be nature all colors go together. They just do just you. So you take a photo, you might pick up some colors out of that which is kind of cool. This is a tool that’s available online through adobe kuler and actually use this.
So here’s a green there’s, a and I’ll have the slides up on slide deck. Another tool is called lovers: this site is kind of cool because it’s all user-generated collar comments and patterns. So if we’re on the people to browse palettes, you can actually see some color schemes that people submitted and granted they’re using more than the top is the basic two colors but inspiration. And if you like.
Some of these, you can also make your own thoughts a question color. Yes, I’m actually cooler is a great tip that looks really cool. I found a really helpful trick. I was called instant eye dropper and I found that it’s like a little feet. You’ve heard of us, I see that look on your face. You can literally pick out a color from a picture because I had I had a client who was like um. I just pen, and I really love the color of my head.
How do I get that? Color, if I can send you a picture of it and you can literally get the HTML code for any pixel in a photo, I found it really really helpful. You can work when we go back to the 1 i’ll, give you an example of that. One thing with the pictures I used similar tool and open same tool or not, but a lot of post color scheme thought I was going on my website. So, if you’re ever looking for some inspiration, okay, typography exactly this – is just a definition on Wikipedia the art and techniques of arranging type in order to right.
Well, you get into it. It’s not quite so simple, because we have so many choices. We have our syrup a sign. Sir. We’ve got Wi-Fi like ultimate our display. Fonts we’ve got crazy. Now we have joined in fines and have all capitals of handwritten fonts and when you’re choosing fonts or guidelines again, I’m definitely in the camp of keeping it simple, clear and easy to read. Some fonts are easier to read than others.
This is doubt about it, especially in your body. Copy text like helvetica, is cheesy to read George’s easy to read, there’s a lot of them, but one thing, that’s really important to point out is that we’re not you’re not limited to what we call website, fonts anymore, which or like this will be our computer system. Fonts and then d we had 10 or so we are unlimited. We are only limited by the licensing for the pond, but clear and easy to read just like home, we’re going to one font, maybe two for our website project and your than that and get this when you use to any faunsdale wipe your attention.
It’s too complicated. Our brain can’t easily comprehend, and so people are just going to check out opposites, attract back pump with a skinny pond cir for the sponsor. If it’s things like that, try to make them line-height show you a second life yesterday so used to paragraphs which one you think is more evil. So lines are spaced a little bit further. Apart than that, it’s a little harder on the eyes to focus on and the longer your line, the larger spaces should be okay.
You can take that too far. The opposite! Yes, there you are there. The main wilson signed about left justification for justification. It really depends on the photo page. I I like left justified. You know, I don’t do that. That is really hard to resend. You have crazy, spacing font spacing on online and again it really depends on a project. As a general rule, I go left justified. Don’t do a lot of center it just don’t it’s not! My style will do.
Fpt SIA has no style right justification, not so much unless you’re. Once you do this for a while. You have a sense of what what looks right. So you really it’s all about practiced, my each one of these to the extreme code, but it’s hair bow tie our fee. Sorry, each one is typically are our page title headline right and hierarchy do some construction, so it tells the reader. These are the things that are most important and it changed SEO again.
There is still some SEO benefit to hire h2 typically design perspective. Each one is the biggest page to a little bit smaller, it’s three, a smaller still and oftentimes have that on or different colors and it’s the same font different color. The fonz in New York logo doesn’t count on to your body text and then folding. If you could have a h4 h5 one, two, three, maybe four so a couple of tools you can use I’m web fonts really easy.
Google is awesome. Your google fonts they’re, all free. You can download them to your computer. You can use your little snippet of code to embed them on your website. So if you say I want to display or handwriting press, it is with it. Okay. So if we want, we wanted to use this one we’re making a fun halloween page and they wanted to use that. Then we go down here to our collection. We can review it or we can just go right ahead and use it, and then it tells us the code that we need, and it gives us a couple of different ways to do that.
Import it from the global FBI use the JavaScript we want to, and then it gives us a CSS gracias, really easy and they’re constantly adding some of them are better than others, and some of them are absolutely gorgeous touching the 10 people, but for the most part, Is a lot to choose from there and then another tool that just as many choices in a different way, a spawn squirrel? These are all free for commercial use, great great, great, great fun download them.
You can’t have a font on your computer and you want to use it. They have a web font generator and as long as your license allows it Adobe’s once you can’t as long as your license allows its body and you find on file, and you upload it. If it will create a kit yeah it does work on Internet explorer. Internet Explorer is always going to have some things that it doesn’t like. I use this all the time on client websites, and it gives you all of them in your kit.
It gives you all the formats at your vanity yeah, really great resource yeah. I used lots for a lot 10, so you can you know if you want to just look around it, finds on there’s tons and filter. Like I said, and then this one I just found yesterday, actually a chemical there’s, some sect of it will automatically pair fonts for you, and this one gives you some choices, they’re kind of already down the work just play around, and I will ask you last everybody: These tutors, mostly we are 45 a penalty.
Not a lemonade stand. Please don’t use the gossip a crap if you’re making a comic book, it’s definitely going to use more at odds poster not really what we use for this is maybe a personal preference say. Oh sorry, doin he’s not a quick question about her lower case. I uppercase seems to be really popular, really i’m catching these days. Personally, I think it feels like yelling and shouting and angry and aggressive penfield depends on the font depends on the project.
On my website. I used primarily a lowercase Q sentence case on my own side. I think that in a headline – or you know something like that, that you want to call attention to all caps is fine, but absolutely you can be overused and it is. It can definitely perceive great grits and layout with responsive design. This is really kind of gone out the window, but I want to show you the basics on grids. We want things to be lined up well, so that their visual, we have what three seconds, maybe five.
When someone gets to our website and they’re going to stick around for a while, so yes, it was important. Yes, everything else that we went about this weekend is important still have to work so a grid in the city. This case, these are three columns, either through the whole broken, but everything is really lined up right. This is just a poster. This isn’t your website, but this is a website and it’s very it’s built on a grid.
We’ve got the four sections here. These two rows really the rest of the upper part of the site, so they work in a grid, even though everything doesn’t have to line up exactly to the edges. But it’s you don’t have things all willy-nilly on the page now this light, you might think. Oh well, there’s ranged arrived right and then lower down page, so it really is felt. This is charity water. It’s a really great example in the well-built well designed website again lower down the page still have, and they have broken it down even further.
This section takes up three columns and this 15 husbands, I’m Reds, i’m looking to quickly and I wanted to make this lightweight face and haddock. It’s not crowded, ething right, no need some breathing room. Minimalistic design designer knows he’s achieved perfection. There’s nothing left to add, can’t take anything else up without degrading the design smaller line height. This is the photo and there’s not a lot of space there.
That’s. This is a nice example of a site that I found that was googling and they’ve got independence lay out there. They’ve got the good work in auto white space living room, elegant, simple, there’s very little on this page right, they’ve got two colors black and blue. Louis, is there converse and white is their background when you click on it and as you scroll down page again, a couple of lots of white space, very simple, very clear: this is a very well designed website and just because it doesn’t have a lot on it.
Didn’t take a lot of time yeah, as for so many things, music. Do you go through the non-designers web book by Robert Williams at any point yeah when I was taking green leave, that was like the first primaforce non-designers welcome it’s a quick read into the lowdown. Not as deep as you Robin Williams, not the number yeah. Thank you. Ok. Moving on to images the best colors best typography still needs to focus, not just what it looks like it.
The visitor feels ok, tips and best practices when you’re choosing photos really important respect. The photographer you’re using something that you found on a photo site, make sure you, but don’t just grab photos off of it. Don’t Google something grab a photo and use it even even with incredible tonight, if you’re using something for commercial use, you have to have the proper licensing rights use images that are relevant.
I’m not going to put iron man on our a PhD side. Army then use images reflective, so you have a site, might have stones, might have lavender they’re, not again like that. Iran quality counts. If you have a great camera and you can take some well-lit looking photos, there’s great cameras out there a lot but make sure that you know if you have you’re making a hotel site, those gas terms have a proper lighting staging that they look professionally done.
It’s going to reflect on what your customers name, I popular affair, loquacious, and they give me. I can’t use any of them, but I have to have it really hard conversation with what makes a huge what resolution you probably all know 72 DPI and use optimization tools, whether use Photoshop or use an online tool, or something like that. Just so that you’re, not using 300 DPI images on the web that will slow down your site, important speed is jpg and PNG formats are best.
I you can use when I have many a transparent background otherwise into Jacob, because the files are smaller. Sightlines is something I don’t really have a visual for you, but you know you have an image of a businesswoman right and she’s looking and cover by button here since she’s looking over here, she’s faced like this over his cross because he’s so many photos now and She’s looking that way, but he flips that photo and she was looking down survival or up towards your newsletter signup box, going to follow where she’s looking, naturally so pay attention to how the photos you choose.
Are they working with your content, great place to find images for Redick on fight? You might yes come fight, pulls its database really cool, let’s just search for okay. So all of these images, above this line our stock photos in your body. Everything below that line is from flickr, so you can click on photo and if you hover over it, it tells you the dimensions that it’s available in UK example, one that one’s on the x that out usually works.
But usually you can ask them out and they just disappear, but this photo. It tells you what sizes you can and then it allows you to download it. It also gives you this code to copy and paste, so you give a photographer really really important and before you choose a photo over here, you can choose your career Commons license, so you can select that only one because of I am licensed to use commercially.
You don’t have to worry about everything else out there, everything below this line. You are able to use. If you embed that code. Yes, there is a wordpress plugin, yeah yeah. I times not use the poor guys. But yes, sir, what’s it called Kampai yeah, really good, because, yes, Creative Commons has its own search tool? Well, search, google! All of different places, figure out our website choose to go pee I use istockphoto on any stock photography.
It’s I find it the most reasonably priced with the best selection without getting super super expensive. They think their pricing has definitely increased to a year, but it’s still fairly reasonable resource, and this is really our design has to relate to our customers audience it. Doesn’t it’s not, I ha you’re talking about my hair yeah and you know we really had to give developers credit. I mean there is no way that can I do both, but I don’t do the development and there’s a reason for that.
A long time when I first started my business, I did fall and I found that my my designs were limited because, as I was designing something I was thinking okay well, I wanted his homework right, so I wasn’t able to really be an expert in everything. So I said this is where I want to focus most of my energy and I’m going to hire somebody to do the heavy lifting of the desktop for me and that’s how I work and and again this talk was initially thought I thought.
Well, I work with so many customers who come to me that had an awesome, developer and love my developer, but he tells me he doesn’t right, so they come to me to help guide him so that they can make they can make it work very good points. Make sure that your be sizing that you’re keeping the aspect ratio? Yes, jpg me there’s a lot of tools. That’s not that’s what I haven’t heard of, but thank you okay, so I’m just giving you all these headlines right.
What we want to do art is about bringing nipples so take the guidelines. Practice get comfortable but know that you don’t have to do everything by the book, because that’s where r is we want to be able to express ourselves. We want to be able to provide our clients with something that’s valuable is going to work for their customers. What we want to be creative at the same time, so kitchen hole yourself, questions anything I didn’t cover.
Yes, do you have any suggested tools for the grid lines how to make sure that website bonds up, I did say I was going to show you yeah you can do you use what you use for virtual editor? I don’t. I might use photoshop photoshop um. You can there’s a setting the top. Like the view settings you can show the grid okay, then you can adjust the grid to how many pixels you want not to be okay. Yes, I’m sorry wish you were too um.
I just sorta stop the most. I think I picky is one on the web and I believe that still free splash splash splash up, but how does powerful as Photoshop and it’s tributes there? Well, you know. Sometimes I really don’t want to fire up photoshop right now, because it’s heavy splashtop jump right. Well, in your are Mac preview is a gradual, you can resize images writing preview and it can change the resolution.
You can change the conventions you can, I add, can’t change like Frank, but for quickly side he’s ready. I think you can do the same. We were talking about the color dropper. I use this little thing in Firefox, where I can click on it and it’ll cross hair shoes, all kinds of colors going to click on color that I want it will automatically pop you that to my clipboard or I can flip this little drop-down and I can Copy all this any different values, and I need our TV or and if it isn’t quite right, I can click on, and I can just drag this around.
That’s a Firefox cars are yes, one of the great things in WordPress is that the themes do so much. The layout for us aviva populated with content, but one of the challenges faced with a good header. You give us any wisdom just to point us in the right direction for headers yeah, I mean using these practices that we just talked about. I mean again event depending on project a nice logo. Logo type type is nice if your customer doesn’t have one.
I don’t use a lot of like photos and such and a header, but it depends on again what the project is make sure it’s balanced are going to match. Yeah, not sure. If that answers your question. Okay and definitely um again depending on the site, you might want something: that’s really bold and stands out with. You know big bond and without being over-the-top and then maybe it’s for a very basic site.
Sometimes the header is the main graphic on my entire page, and then you just have some fonts that you do a proper placement and that’s enough for the design. Yeah you an SEO is a great tool, if you don’t use that already, and it will actually give you it will give you a a visual of where people are looking so it’ll actually give you like different colors on their page website up, and it will tell You what people are looking at by where their mouth is and what they’re clicking on, and you can use that in your design, research or if you have a page, it’s already there as a way to maybe make some edits.
That is your classroom door. Yes, I’m just wondering if there’s anything you can say about um how much your your main should be broken up into different sections or pages or whether you should have one long page or if there’s anything that you use this rule of thumb yeah. It used to be that above the poll this we have everything about pulling a lot, not pages, although that’s not really the case anymore, especially with mobile, I mean people.
Are they expect this role? That said ridiculously long, because you could certainly break up, I tend to say you know four or five, three toes food blog posts about the limits girl break it off to the next one without yeah. I allow the scroll like and I don’t design against that, but you know use your judgment. You don’t want the user, but I think if they can get to the information. Yes page, I started seven years ago.
This company is confident, I think, that’s a great question and they do need information at your talk about again. It’s at all, we used to do. We don’t think they know where they are right. That’s it. I don’t put a ton of information. I would recommend putting a ton of information on home page. They do recommend. Is that you’re very clear what you want the customer to do next? So your call to action needs to be really clear on your home page.
So maybe it’s sign up for the newsletter. So you make that button, really big, that’s what they’re going to do. Maybe they it’s a link to hire you. Maybe it’s a link to go, buy something pick one thing: maybe two that is really important and design around that most people aren’t going to come into your and on your homepage, they’re coming from somewhere else. Okay, so the other pages are really want or you want to expand your content, and your homepage is like an introduction, the combination of a introduction and a soft sell here.
You are what here’s what I want you to do. Next, that’s that’s the way. Yeah again, it’s going to depend on the site. It really is remarks you want to. Thank you all for coming, be sure to thank sponsors. You can look find them online if you guys are local, be sure to check out the Boston, wordpress meetup here once a month, yep Boston’s org and we should have articles up and as well give it a month or two the presentations only for saturday and sunday, With the exception, I want to choose, because someone there’s one there’s only one: oh there’s one! Okay, if you didn’t pick up your shirt, this is the registration desk.
Thanks guys,
Jimmy's Internet Marketing Business Blog 