Categories
Online Marketing

#CAT5TV – Web Development Part 2 – Slicing up the Images

Hello, I’m Robbie, Ferguson, nice to have you here so last week. We well you I was Hannah here but secretly you created the yep. The design you’ve got there yeah. My great things happen. Look at that very cool. So that’s you over on on your Mac. It is this is me over on Linux. So, let’s see what we can do here, Krista sent me the PSD file, so here’s comp dot PSD.

This is the same file that you’re working with right, exact, same father: let’s bring it up in gimp, okay, there we go. There’s me and again: there’s you in Photoshop now, just just for the viewers sake. How much does Photoshop cost you roughly a thousand dollars, ask right it’s somewhere in that range, you can get a student discount if you’re going to school yeah that helps you took advantage of that.

Ok. So what with the student discount? How much did it cost uh? Well, the for the sweet, the cs4 or cs5, is about 510 bucks. I gets you image ready, photoshop illustrator dreamweaver, flash bridge. I said image ready my illustrator Emiratis going in design yeah. We don’t use that ok, so that’s so it can. You buy just photoshop. You can yeah, but a lot of times, it’s worth it just to get the package yeah Cesar.

It is especially if you ate, on the deck driver yeah with the proper programs. Ok, I’m going to bring up the web browser here, we’re just going to go somewhere where we can buy photoshop. I don’t know why i’m curious! I just I just want to know Photoshop. Oh here we go Photoshop. I know what cs5, but let’s buy it. Ok, select country, I’m in Canada, select which store should we go with the educational pricing? Let’s do that might as well, just because that’s going to be the best deal going right, so this is for students or faculty save up to eighty percent.

Well, that sounds great. Eighty percent of what shop the student store – okay, let’s see so we’re looking at a adobe photoshop cs5 superfast webcam there by the way – and of course, they’ve got it’s largely because they’re using flash. Why would adobe use flash all right? Okay, crib, sweet, creative, suite, creative suite they’ll, be photoshop, extended student and teacher edition, ok, so the cheapest version I can find here is this cs5 extended student and teacher edition.

Just photoshop says from 199: ok, so us one hundred and ninety nine dollars. So that’s the cheapest. I can possibly get right. Oh well! That’s nice! Yeah! That’s what it is so you’re just going to show off now. No i’m not showing! No! That’s not what this is. No, oh, that website loaded so fast. You invited me just to make fun of krista make for a crustacean. No, it’s not i’m not. When did I say: oh look, it didn’t look at krista she’s, slow input.

I said their website. Okay. Here, look, let’s just say we’re on windows: okay, okay, i’m in English, wait a minute but wait. I didn’t even have to pay and it wants to give me the full version of the software. Let’s go back and see what we have here: okay, go back to GIMP, o RG and let’s say we want to get it for mac OS. Oh and look. It’s also available for unix photoshop doesn’t work on the units how convenient Mac OS 10? Okay! Here we go the GIMP on Mac OS 10.

Let’s see how much this one costs. Oh, I bet it’s free you’re catching. I jumped the gun with that captain on. What’s that yeah, I got it again, but machine o stands for a GNU image. Manipulation program compatible with snow leopard leopard tiger going way back. Let’s say we got snow leopard. Well that looks strikingly similar a dmg file. Okay, you kind of know what I’m saying right. Okay, think I caught on.

Unless you want to draw out a picture for me that much I don’t want to say that Photoshop our drama fix it might help the fan, putting his skills to use here there there’s a picture for Krista. She asked for it. Okay, I don’t want to say the photoshop and gamers are identical: they’re, not the same product at all, they’re, not there they’re similar in their design, they’re similar and what they can do.

There’s a program called gimp shop, which is another version of the gimp. That looks a lot like photoshop and uses a lot of the same hotkeys. So it’s easier for someone such as krista to migrate over to the free product, not that I would but the GIMP is absolutely free. So if you want to get into photo manipulation, if you want to be doing things like we’re doing tonight, when we do graphic manipulation on the show, why not use a free piece of software that’s available for download at gimp.

Org? And this is going to allow me Here: I am on linux. Okay looks kind of like mac OS. This is linux. It’s also free gluten com. Ubuntu linux is a free distribution or a free operating system for your computer that works on pc. So it’s cheaper hardware. Free operating system versus the mac, here’s photoshop fair enough, all right so not the same product, but we want to just kind of emphasize that there’s a big difference because we’re saving two hundred bucks bare minimum.

If we were a student okay, I so get ya. That’s really great deal, but as a professional, I really like the you know the photoshop programming in it sure yeah absolutely and it does have its advantages, and I I do tend to use both professionally, because there are times when I absolutely need Photoshop. I totally can admit that she’s trying to make me feel better now that song – I am, I don’t ever use Photoshop only time I use photoshop is when you send over here, yeah cuz, all your crazy Photoshop layer mask and sweetie.

No, I’m just kidding going to add more next time. Okay, so here we are in the GIMP and what we’re going to do is kind of assess how we want to work with this file. Basically, as last week, Christa went through and and creatively came up with the design and decided for me and explained how she decides how to build the website as the person who’s going to be slicing it, which may be the same person if you ever do the Slicing yourself, the person who’s slicing needs to have a bit of an idea as to how they want to to do this.

Oh look at that. That’s the mac! That’s my next! Okay! So what I mean by that is, we’ve got this gradient background, so this is a red that changes shades of red. If you’re, not too sure what you can do is you can grab your and you can follow along with this krista. If you like, okay, photoshop, just following yeah, absolutely, we should do a split screen. It’s embarrassed you may be so what I’ve done is I’ve grabbed the little Doppler here, its color picker tool in GIMP, and if I click on my foreground, color – actually click on the doppler there and read this HTML notation there.

As I click on this red is b4c be5. What I want to do here, I’m going to change layers to be background there and now do that again. There we go so a 9000 okay. If I click somewhere else see the numbers, that’s eight nine thousand Wow. What’s so funny, let them laughing just thought of a funny joke from earlier. Ok, so now click down here it changes to 81 810,000. That’s an HTML reference for the color, so you see that it’s actually a gradient, there’s different colors here, a 0000 down here is eight thousand eight hundred thousand.

So what that tells us is that the gradient is not all one color of red. So what we need to first decide is how we’re going to work with our background when we’re doing this. So what we want to do in Photoshop is maybe zoom in to about 2,000 percent yeah so and then go down to the very very bottom. One of the things that we need to do when we’re slicing a website is: we need to make sure that things are fluid.

If the site becomes taller, we need the gradient not to have a cut-off point at the bottom of the gradient. You don’t want this thing to look like a square on a white page. You want that gradient to seem to flow. So what you’ll do with that? Zoom level is use your Doppler and get that HTML character code, the color code of the very very bottom. So as close to the lower edge as you can possibly get because that’s going to map this zoom level, it’s going to be like a very, very big pixel, so that I ready 840,000 right yep.

So if I bring it up in the GIMP, let’s see if I get the same thing so I’ve got my Doppler tool. Color picker need to zoom in go down to the very bottom and grab that bottom color, because that’s where our gradient basically ends. I think I actually got a little closer to the edge because i’m getting 82,000, if you might have been up just a little bit but regardless that’s that’s, going to be pretty close, so write down of the very very bottom here.

I’ve selected the color and it’s 8000: that’s this really deep red! So the reason we want to do that is now: we’ve got that color in our clipboard. And now, if you read, if I were to zoom out of this now, okay and if I were to resize this image, the canvas size which is exactly what’s going to happen on the web, if you get a page, that’s super long. Okay! Now, what’s going to happen in the background there once I fill that with this particular color, just to kind of give you an idea is that the gradient is not going to look like it breaks off.

You can’t see a line there where the gradient stopped. If I didn’t do it that way, if I didn’t pick that proper color and there was white behind it, you’d have the bottom of the website would basically look like that. So I’ve got my color, it’s eight thousand or eight hundred thousand and that’s what we’re going to use as our background color when we get into CSS so the actual coding of the site. But we need to know that off the get-go, because we need to actually create the background gradient file.

Okay, so we are looking at part two of developing a website and Krista, and I are actually slicing up the design she did last week and basically getting it set up so that we can turn that into an actual functional real website. At this point, it’s really just a mock, it’s just a pretty picture. Yet it’s something that we would send to a customer and say here’s the look of the website. What do you think that gives us a chance with in Photoshop or the GIMP to make changes to the design change the where the items are positioned or what menu items? There are it’s: it’s really, it’s just a graphic representation of what the websites going to look like at this point, we’re assuming that the client or asif it’s our own website.

We’ve said yeah. This looks great. This is exactly what we want, so we’re going to actually work with that. So looking at my computer here and Krista’s got this up in Photoshop as well, so I’m working in the GIMP Krista’s working in photoshop, I’m working for free she’s working for thousands! Okay, so that in just throw that in there yeah I’ll be seen patrick’s day by the way, two days off, I’m Robbie Ferguson, okay, so with this, we’ve got the background color i’m going to i’m just going to jot this down because we are going to need This next week, when we get into actually coding this website, my color is 88 hundred thousand.

That’s a hexadecimal number that corresponds with the RGB or red green blue color that we’ve chosen there. That’s the red and hexadecimal means it’s ready for HTML for coding for the web for CSS, so we can set that as our background color and it’s going to match exactly to that, photoshop tells you if it’s a web, safe color, which is kind of a cool Feature of photoshop, you want to bring up the color doppler there and just tell me if that, if it shows a thousand and i’ll show you what what it does there so 800,000.

If you look right here at the top there’s a little explanation point, and it shows us that that is not actually a web safe color. If you click on, it is going to change to a similar color which is web safe, and that is what seven an f-14 18 okay. So, let’s see in the gimp how different that is web safe colors are not as big of a problem as it used to be see. That’s not that’s. Nowhere close, I guess, on the stream.

You can’t really tell that I can tell that visually yeah. More of a pink than I read, it really is so I’m going to stick with a thousand. Typically, when we’re creating the mock-up, we might try sticking with ending the gradient on a web, safe color. So when we’re selecting the colors, we could, if we want to make it easier for the guy who’s slicing, that why you might do that in a case like this, where it’s not web safe.

What I might do is, I might actually choose a color that is web, safe, okay and colorize – that that’s my background. Color now use a square marquee / me and feather that, let’s start with 10 pixels go like that, create a new layer, transparent, remember! This is a feathered marquee right so now, if I fill that, what a feather means is that the was my background color the edge of that marquee is not a perfect square.

It’s actually got a little bit of a feathering to it kind of like a blur on the edges without without actually having to blur it. Sorry, I’m talking and trying to find Phil there we go so now. If I put that above and I can, I can set that up in such a way that the I might want more than a 10 feather, I want, let’s say 35. This is just one option: I’m not going to do this in this case, because it’s such a the color is is so far off that we’re just going to stick with it, but I want to show you what you can do to fix that edge.

Oh zoom sometimes does that to me, so I can move that see what I’ve done is I’ve created another gradient at the bottom, which merges the non web-safe color into a web, safe, color, nice and clean. So that’s a possibility in this case we’re not actually going to do that, we’ll pretend that we’ve got a web safe color and that we or that we don’t care or something that it’s all good. The other option.

In a case like this, we’ve got a non web-safe color at the base. Here’s a really quick option and this one’s going to surprise you eight hundred thousand, there’s no right or wrong way to to do this. It’s really your going to choose every time you do it, but what we need to do is we need to have this clean. We need to have a web safe easiest way to do that, create a new layer. First of all, let’s, let’s canvas size, this we’re going to go canvas size, we’re going to set it to something absurd that nobody’s going to ever have we’re going to set at the fifteen thousand pixels high.

So now our image actually looks like that with the website way at the top. If I create a new layer – and I fill that layer with my background color – which is the non web-safe color okay, now what happens is we’ve got something where it’s going to be? The perfect color, it’s not web safe, but it’s okay, because it’s going to be an image on the background. So now you say: okay! Well, that’s 50! What did I say? Fifteen thousand pixels high it’s going to be huge, but what we do now as part of our slicing and always keep your PDF file, don’t overwrite.

It is take that we’re going to go image canvas size, because this is a vertical only gradient. There’s nothing horizontal! That changes, so I’m going to set this to a pixel width of five pixels, which is going to actually crop that and it looks like it disappeared. If I zoom way in or push one to see it there’s my actual gradient. Okay. So it’s like that starts up. There goes all the way down for fifteen thousand pixels.

It’s never going to actually run into anything. So, let’s save that, let’s throw it on my desktop. I’r going to call this a jpeg reason, for it is because it doesn’t need a transparency. It’s just a flat flat file. We want it to be as small as possible, so we’re going to go with a jpeg. So, let’s go going to give it a logical name: i’ve called it body underscore BG jpg, save that in the gimp choose your quality 85 is the default.

It’s fine, and now we’ve got this file, which is that background color that background gradient? Ok, it’s huge, but if we look at the file size because it’s only 5 pixels wide you’ll notice, it’s 7.3 k, it’s actually very, very sit down, yeah anything, basically, images for web. You want them to be in the sub. You know if it’s a big image, you want to try to keep it down around 50 to 80 k a very, very high end depending on, but we have you basically use common sense and realize that the bigger the site is the longer it’s going to take.

The load – and so you don’t want it to be over the top huge, so, okay, so you you can easily do that on the neck. I could hear you could and, and that – and that makes sense is now when our website is there – it’s not going to it’s not going to over, like it’s not going to be a cut off on that gradient. Okay, so that’s our first slice, I’m going to reopen that PSD, because remember we never overwrite that file.

So I’ve got my first slice, I’m going to create a folder on my desktop here, where I’m going. To put it, it’s going to be my website, I’m going to cut that the image the first slice that we made and create a folder all lower case called images. So on my desktop, I’ve created this folder called website and if it a folder in that called images and I’ve cut that to my clipboard that image there’s my first image.

Ok, so now, looking at the rest of the site, Krista we’ve got the logo, ok, which what we’ll want to do is we want to actually have that as a transparent item, because we don’t want to have to worry about aligning it perfectly with the gradient. We don’t want to have a JPEG, because then we’ve got a flat image with the background. Color like we wouldn’t want that right. So what I’m going to do is I’m going to select the layer that has my logo just right there? If I turn it off and on, I can see that the logo disappears hit ctrl a i’m, not sure what your select all is on the neck.

Oh, it’s just a command a command, a yeah. So if you have a neck, so if you select your logo layer and obviously you have the master files for the logo and that’s fine too, but from this we’re working in high enough resolution. This is why we want to build our mock-ups in high res. So we don’t have to go back and redo the entire mock up again with high-res images, always do it in high res. So with a control, a it’s selected that logo and I can go control C or command C – probably to copy it to my clipboard and in the GIMP I going to go edit paste as new image and I’ve got a perfect, transparent version of the logo.

Ok, so because it’s transparent, I want to save that as a paint which is going to maintain that transparency, I’m going to again put that in web site images may going to call this. We want to be search engine friendly, so was it aspire logo? It was a spire place. Wasn’t. Ah, yes, it’s quiet place, ok, logo, dot, ping, we’re giving it a logical name because one it’s easier for us to find when we need to actually add it to our site, but also it allows the search engines to index that as the Aspire place logo.

So once we get submitted the search engines which is going to happen further on in the series, but we need to plan for that – we need to make sure that our site is search engine optimized and ready to be indexed by this by the search engines. Ok, so you’ve got have you got that file i’ll set up as well on your Mac? You’ve got a logo. I have a logo. Ok, so you follow along and I would try it. Oh is good wit winner, I’m you have the logo saved and I had the logo.

Savers, ok, perfect and remember that, because it’s copied from our mock-up, the dimensions of this logo are exactly as they would be on our mock-up 162 by 58. Perfect. So now you see these menu items. These are all fake, don’t get deceived by these. These are not the set menu items. I get this all the time. Do you get this or clients as well? I think we need to change about us to about. Oh all, the time and you’re saying no, this is just the mock-up, that’s not a real menu.

That’s just we put that there so that you can see what it’s going to look like when we put a real menu that we put this lorem ipsum text on the page, so that you can see what the text is going to look like. But it’s not the real text. You don’t need to tell us, you know, I’m going to said it best business. Now we can read that that’s all part of the mock-up, so one of the things we need to do is just get rid of it all.

So that’s text that we’re going to get rid of that’s text we’re going to get rid of ok, so we can get rid of all the mock-up stuff that we simply don’t need by turning off the layers. Ok, so now – and I’ve already got my logo so now I end up with something like that got my background, so I’m done with that. Ok, so really the only elements that we still have left here. I am on the gimp and kristas following along in Photoshop.

Doing the exact same thing so now we need to have our different layers here, so this here is predominantly a color, so we’ll get to that. But it’s going to be a color essentially with a little arrow pointing down at the bottom. So I’m going to turn off my feather, because I have that turned on on my select tool from earlier and I’m going to grab the guide that Krista has set up here with my marquee.

It’s you see that the GIMP snaps to those guides and I’m actually going to the mock-up, doesn’t have things don’t have to be exact to the mock-up, because I noticed that the guide is just a little bit off from like maybe at one pixel. So that’s that’s! Fine, so now i’m going to select the wood grain layer and I’m going to copy that and then edit paste as new image or in Photoshop file new image and it’s going to automatically set your proportion.

So now I’ve got this wood grain, which is exactly proportionate to what it is that is going to go at the top of the website and kristas following along in Photoshop as well. So she’s actually had to paste that into a new image in Photoshop, whereas I could just edit paste his name. So I’m going to save that. That’s my wood grain for the top one of the things about wood grain that you should know is that it’s got a lot of intricacy to it, so it can end up being a pretty large file again, there’s no transparency necessary here.

So we are going to work with a JPEG, so we’re going to try with this. I want to see how large the file is going to be. If I set it where I would like it to be, which is about eighty-five percent quality. So i’m going to call this wood grain VG jpg again, i’m saving it in my web design or web site. / images flatten the image save it as 85 and, let’s go for me, see how that is, how BIG’s the file on your system at eighty-five percent.

Oh you’re going wait. I have to she’s taking it down to quality 30 at the new 78k and only 60 60 percent mine turned out at eighty-five percent to be only 60 4.5 k. So what you want to try Crist is instead of save, as on Photoshop. Go file save for web safe or whether my vices just an outlet right there, yeah and now it’s automatically selecting jiff so change that to jpg and now you’ll see that the file size down at the lower left 76.

1 so now grab the quality slider and you Can slide that down right here, top right and you can actually see how that’s going to impact your file size as well as the quality, the output. So that’s pretty good. Essentially, what you’d want to do is go down as far as you can, without completely losing the quality of the file without losing the detail, because you don’t want it to look bad, but at the same time this is a background image and there’s going to be Stuff, on top of it, that is going to be really what you’re looking at so for me, 64k is too big.

So I’m going to save a game, I’m going to overwrite and bring my quality down to 70. Double click on it see how I like the quality, it’s fantastic, and at this point it’s only 40k. That’s a that’s a bit more reasonable, especially considering us of wood grain. How are you doing over there and forth with Photoshop we’re good 41 k for me and the quality is seventy percent quality? The wood grain is pretty crystal clear and how how large is the file size? I believe it was 3333.

I could keep going I’m at. Seventy percent – Oh 3737. Okay, so we’re pretty close, I’m 41, but I’ve got seventy percent quality. How long do you have to go? I think I was like forty percent. It was pretty low right. Alright, so now I’ve got that file ready to go and that’s going to be our background for the top area, so we can close that out go back to our mock-up and I don’t need that wood grain anymore.

One of the things I got to do is I got to get these cool Polaroid’s that Krista’s created, so we’re going to get rid of all this stuff because that’s all just in colors, these are just colors, the white stuff, we’re going to use a div, we’re Not going to use an image and I’m going to go control a and this time it’s a little bit different. I’ve got the crystal just get rid of that blue area as well, because that we’re going to use a div that as well as that.

So here I am in the GIMP there’s Krista in Photoshop control, a or command a to copy, all select all – and this time I’m not going to go copy because that’s only going to copy the selected layer, which is only the picture wan na, get everything. It’s going to copy visible or copy merged in Photoshop. I suppose so now that I’ve got that in my clipboard Krista’s got that in her clipboard. Let’s paste it as a new image.

Again, I’m going to go edit paste as new Krista’s going to create a new image and then paste it onto that canvas well and we didn’t get a merged clipboard. So go back to your your master file there and make sure when you copy go edit copy merged there. You go so now create a new file, a game. It won’t be that one because that one’s got the wrong dimensions. Is it still just kidding either yeah? That’s how it’s done.

Okay, go back to your so now I think what’s happening! Okay, because you’re you’ve got a marquee around just that image. If you do a control, a no, you just want the whole board. Yes, she just had the wrong mark either. So it was copying the merge, but ok, so now paste that into a new image there we go okay. So now again, this has got to be a pain right. Yours is coming up as it’s got a white background, so you need to get rid of that white background there you go and then export that as a pin, which is going to be a larger file.

Cuz, it’s got that transparency Here I am in the GIMP and you’ll notice that I also got a bunch of space over here. So in the GIMP I can just go right. Click image, auto crop image and it automatically sucks in the sides. That’s one thing that Photoshop is lacking: that the GIMP is totally awesome at i’m, going to save that image. I’r going to call this the Polaroids pull air, no breaching of copyrights intended or registered trademarks, okay, Polaroid’s, dot, pain.

Reason we go with paying again is because this has got a transparency, so we need to be able to put this on top of the rest of our website so that, what’s behind, it can actually shine through okay, so you’re at that point in Photoshop as well. I’r going to save it with a compression level of nine in the GIMP ping being a lossless format. It’s going to be very high quality, even at high compression there’s, my ping, and it’s it’s quite large.

That’s showing me as 160 7.7 k. How are you looking 299 299, so mine’s about half the size of yours but they’re, both too big for internet, so next week we’re going to come back to that we’re going to compress down that that Polaroids dot ping file on both well, if you’re, if you’re Here we can look at it on the map if you’re not, then we’ll definitely look at it on linux as well. You can kind of get an impression for how we’re able to do a lot of the same things between photoshop, the commercial software and the gimp on that which is free on a free operating system, which is a boon to the plugin.

The fact that free actually has really good these days – it’s not like 10 years ago, we’re free men, you’re, sacrificing quality and and getting you know a knockoff product, and now these days got it thanks to community on it’s a fantastic thing. So we’re going to be looking at actually taking those slices because we’ve actually sliced up that whole website now, there’s arm there’s our actual mock up as a sliced website.

That’s it. We’ve got our logo right, which is a transparent ping. On a white background it’s being displayed, so we can’t really see it because it’s white text we’ve got our background image, which is that thing there that’s going to be the gradient. We’ve got the Polaroids which we’re going to shrink down next week and we’ve got that guy right there, our wood grain, so those are really the only images that we need to get started with the website to make it look like you’re, ma club and then we’re Going to be using CSS as well as HTML and PHP, in order to actually turn that into a real functional working website, along with some cool little Java scripts and anything else, we need to do to make that work.

This is category 5 technology, TV and you’ll find us online triple w category 5 TV. You


 

Categories
Online Marketing

Ultimate Web Design: Strategy Method Overview

So here’s our overview of the strategy phase, which is the first phase of ultimate web design, and here I’m going to start explaining to you how you actually do this for yourself. So the goal of the strategy phase is actually very simple. The goal is to get to the point where we know that we’ve really got something to take to market.

We know we’ve got something to take to market. So how do we know when we’ve got something to take to market? Well, what we’ve done in ultimate web design is created. This thing called the circuit and the circuit is made up of five elements when the circuit is good. We know that we’re good to go to market. That’s that’s how they the whole idea works. You may find that one or more of the elements that comprise the circuit are not great and not ideal or not aligned with the others, and it’s important to remember that any of these five elements may be revised, so the strategy phase starts with this is got Two parts: it starts with the circuit interview where we ask a bunch of questions so that we completely fully understand the reality.

The truth, the situation as it actually is right now, and we do that by looking at all of those five key circuit elements, and we also want to understand the context of the business, but in particular, where does the business want to go? What does it want to achieve? There’s no point saying to somebody: well, you could make a lot of money doing this thing if they don’t want to do that thing, if it’s not part of their passion, so we have to take all all the the true facts into account and then the second Part is the circuit review and what we do in the circuit review is we examine and ask some some more questions? Looking at the the data, the facts, the information that we gathered in the first part of the interview – and we ask the question: do we have a circuit that is complete and strong and integrated? Because if we don’t, then we’ll need to do what we just talked about make changes to one or more of the five elements until we do have a complete and strong and integrated circuit.

Now it’s worth mentioning at this point that they, the strategy method, is very much organic. I started doing this a few months ago. I’ve started building up these questions and I’m still doing it. The circuit questions are not 100 %, perfect and comprehensive, and they never will be, and ultimate web design takes a scientific approach. So what we’re doing is we’re constantly aiming to improve the process and in fact I just used this method.

I did these the circuit to circuit interviews this week on Tuesday, and I added at least two questions to the questionnaire when I did that so the circuit is made up of. As you said, five elements and these elements are logical and and true. This is not some kind of academic idea about how businesses can work. They are the true elements that make up a potential business. It starts with the brand that is the center of everything and that the brand is who you are.

Who is selling this? Who is making this promise? The brand then has multiple products, and/or services and there’s an important distinction here between products and services, and that the the next element, which is propositions, products and services, is what you actually do, what you actually deliver. So if I order a book from Amazon the thing that arrives through the post, the package with a book in it, that is the product all, let’s say that I have a client or several clients and I’m delivering say, marketing, consulting write, marketing, consulting is a service And an hour of marketing consulting is an hour of marketing consulting, but there’s a distinction here, because the proposition, what a client actually buys may be a combination of products or services packaged in a certain way priced a certain way and also promising to solve a particular Kind of problem, so I could deliver what I do as a workshop for 20 small local businesses, and I could do it for free right.

That’s a proposition that workshop is what I do packaged a certain way and pitched a certain way, or I could sit with a client for three days for very high fee and say I’m going to analyze your business and tell you exactly what to do for the Next, 12 months in your marketing, the interesting thing is I’m using the same skills, it’s still at marketing consulting by the hour, but they’re packaged slightly differently.

The fourth element is problems, because propositions are promises to solve a problem. Problems are what motivate people and opportunities also come into this. You know missing an opportunity is also a problem, so we buy, we enter into deals trades transactions when we are motivated to solve a problem, there’s something that we need, there’s something that we want. There’s something. That’s wrong that we want to put right, there’s something that we can capitalize on and that’s what motivates us.

So we need to understand the problem without a problem: there isn’t the sale and then the fifth of final element is the market. What is the group of people that shares that problem? What do we know about them? Because if we don’t know who we’re going to sell to, how can we sell to them? So those are your five elements: brand product and service, propositions problems and markets. Now it’s possible and in fact quite common for businesses to have multiple propositions and it may be helpful for you to to picture it in this way.

So you’ve got the brand at the center right now. The brand should always be the same. So when we actually get around to to doing the circuit interview and when we’re looking at the brand, then we asking questions about what does it represent? What does it stand for? What does it stand against? Why does it exist? What is its overall promise to the world, so my vote for my business. My brand is about let’s make things better.

Let’s do web designer marketing the right way right and within that. As part of that, I am expressing that brand through this course, which is a proposition. But I can also Express the same thing through my blog and through other products and books and speaking engagements right. But the important thing is that the core of the brand is always there. It’s always the same. Outside the brand we’ve got the second element, which is products and services and, of course, a brand, as we’ve seen can have multiple products and services.

Web design from scratch is my blog tutorial site. That’s one of my products right ultimate web design is one of my products and I can also provide services as well, so one brand can have multiple products and services the next element. The third element is the proposition as we’ve seen. This is how a product or a service can be packaged for the market. Okay and, of course, a product or service may have multiple propositions.

So, as we’ve seen, you can provide one service as a web doctor report or as a positioning day or whatever you like, and when you take a product or service and say this solves that problem, then it becomes something else and that’s that’s really. What a proposition is it’s that meeting point between this is how this thing this product or this service will solve your problem. So the problem is the next phase, and so normally, when we’re talking about your propositions out out to the market, a proposition should really address.

One major problem and then on the outside as well: we’ve got the market and the market, of course, is the group of people who who share that problem. So we don’t want to get too theoretical about this, because that’s not what all this is about. But it may just be helpful to to hold in your mind that the brand is at the center of all this and that you can have multiple circuits that are reaching out like arms like spokes, reaching out to the market in different ways.

But each one of them needs to have integrity. Each one needs to have products and service that matches the brand. The proposition that says this is how this product or service solves that problem. The problem needs to be good. It needs to be something that’s going to motivate people and there has to be a market, and you have to know who that market is and if you haven’t, got all of those elements, contrasts and aligned.

Then you’ve got work to do because if you go to market, this is the important thing. If you go to market with an incomplete circuit, you’re going to be pushing uphill you’re going to have challenges, and it you may find yourself tempted to to get into things manipulations like sales and discounts or maybe exaggerating the truth, because you, if you’re fighting an uphill Battle, you need to know what all these things are before you start.

So let’s look at step one. So we start. As I said, with this circuit interview, we ask a lot of important questions and I mean a lot. It’s it’s quite radical, quite a a break away from the norm to to deal with clients. In this way, I’ve got over a hundred questions right now in the questionnaire and that list this is going to keep growing, and we ask those questions because we have to get a complete picture of all of those five elements.

In fact, when I sit with a client, I quite often find that, for example, but this week I’ve done this twice already this week. I’ve got another one today and with one of the clients right, she she’s running a social enterprise to do with them, birth, pregnancy and birthing advice, and she actually had. I think we counted eight different propositions. She was delivering the knowledge and to help that she can deliver in eight different ways, so she was really split.

Eight different ways with classes for this and advice for that and hands-on help with the other and they’re. Also, looking at a an online product for delivering information right, so there’s this five elements, but in fact you cannot you can that can mean in a way multiple circuits within that. So to help us do that, we’ve got this extensive questionnaire. That’s made up of core questions and they’re organized by the five elements, but you do not have to work through those questions.

All the elements in order and in actual fact, what we’re finding is, that it’s good to start with a brand good to start with then follow on with what you do, but then address it from from the other end who’s the market. What’s the problem that they’ve got and then finally join those two in the middle by looking at the propositions? That’s what we’re finding tends to work really well. So the second step, then, once we’ve got gathered all that information asked loads of questions spent hours talking about it is a circuit review.

We are reviewing the circuit, so we then look at that big picture and we say: okay, does this? Give us a picture of a circuit that is complete. That is clear. That is strong and also is it aligned. Are these five elements aligned with each other? If you imagine it’s like an electrical circuit so that if any of the components aren’t lined up and joined together, the circuit doesn’t flow, the energy can’t flow around it, and I cannot cannot overstate the importance of alignment, because if what you’re about and your passion and Your belief in your experience and your love that you put into what you do, if that isn’t appropriately expressed in the services and the products that you actually create and deliver, and the the promises that you make to solve particular people’s problems.

If all of that doesn’t actually line up, then either people aren’t going to get it or you’re not going to get it if you’ve ever experienced, maybe being in a job or taking on a project that you just don’t want to do. That is probably because it is just not in alignment with who you are and what you’re about in the world and what you want to mean to the world. So what we’re looking for is a circuit.

That’s got all those elements there and each one of those elements is is present it’s clear: we understand it it’s powerful and that it is properly in alignment with the other elements around it. So why is all of this so important? Well, it’s what we’ve been talking about integrity, integrity means in the context of of our strategy when what you are and what you do and what you promise to do, what you solve and who you solve it for all of that is true, I mean really true Marketing is not about pretending, because we we recognize pretending right.

We’ve got we’ve developed filters. We get so many messages thrown at us every day that we’ve got highly tuned filters to help us to screen out stuff that isn’t credible, so ultimate Web Design says we are not pretending, we’re not going to lie. We’re not going to exaggerate what we’re going to do is we’re going to dig deep we’re going to explore going to discover the stuff that really matters, and then we’re going to be really disciplined so that we get all this stuff right and in alignment so that, When we go to market guess what it’s actually so much easier when you know who you’re talking to you know what they care about the problem that they want to solve in.

You know that you’ve got the thing that will solve it and that that is what you’re about you get the connection you get the circuit connection and what that really means is that what you’re about as a brand – and this applies to your clients and everything right. What you’re about your? Why connects with theirs? And that’s when the energy flows, when there’s a heart-to-heart connection from one end of the circuit to the other? You might imagine it like a bicycle wheel and the spokes on a bicycle wheel are all important, because together they make the wheel incredibly strong.

If you remove any one of those spokes, then the wheels integrity is compromised and the wheel, the whole wheel could then buckle and fail if one of those things is not present or not in alignment plus. Looking ahead, if we’re going to create a great campaign for any business or for any particular product, we don’t only need to know these things all right, but we’re going to have to express all of that.

All of these things that I’ve been talking about this is how this thing uniquely solves your problem. This is why you need this, and you need to put your hand in your pocket and buy this now. We need to express that and expressing all of this stuff fully means that we are reaching out to our perfect target customer that we know intimately and we’re letting them know clearly why they really need what they’re offering and why they can believe in.

You belief and Trust are amazingly important. We need the full story. Story is important, because a sale actually is not a logical thing. We we’re told that you know you can be weighing up of pros and cons and we like to sometimes believe that that’s the way that we buy, but it’s not really true – we’ve known for a long time that the decision to buy is fundamentally made emotionally and The primary medium of making that decision is story story communicates so much so.

We’ve got to get the full story to many. Businesses fail to communicate the full story and not just small businesses. They promote the thing that they want to promote and they assume that the customer is equipped to qualify herself to identify the problem and realize that the business can be trusted. It’s actually very lazy and that just doesn’t happen. So we need to spell it out, but we can only do that when we have the full story ourselves and the circuit is so powerful and so helpful for that, because it gets all of that stuff.

The full story that full big picture gets it out, expressed and communicated and written down. It reveals any weaknesses or gaps or areas where we’ve got incomplete. Understanding and remember. All of this isn’t theoretical in of these five elements are real elements, they’re logical, and this is what makes up a a business or, if you like, a platform to sell, have we got a business, because if we haven’t, if we don’t really know what problem we’re Solving – and we really don’t know who that you know the market is that it has that problem – you shouldn’t be going to market simple, as that, so we’ve got to get it right first and here’s a little image that might help.

You remember why it’s so important to get it right. First, imagine that your business is one of these enormous tankers or ships that this that sails the ocean and that to change direction takes about 50 miles right. So it’s not easy to steer and remember this as well, if anything’s wrong, right fix it, if you’re not pointing the right direction, now change direction now – and this might help you to understand it.

Let’s say you’re at Point a and you want to get to point B right. This is the goal. This is the business’s goal all right. This is the businesses vision right. There are a now and they want to go to B. So clearly, the most efficient way to get from A to B is a straight line. Now, what happens if the business is actually not heading towards B? Right now like that tanker now, the tanker is not going in the right direction.

Now, what do? What should we do? Well, don’t want to end up at a place that is further on down this direction, where you’re going because then you know, if you change direction, then and start heading towards B, you’ve had to travel further, it’s going to take longer it’s going to be more expensive. It’s going to drain your resources, so that’s why it’s so important to get your direction right. First, we start with the end in mind.

We know where we’re going. We have all the facts and, if there’s anything that we’re missing anything that’s wrong, we fix it before we carry on so that really, fundamentally, is the purpose of the circuit interview that we do, and you know you can do this for your own business. I do it for any campaign that I want to do. I will do a circuit review now, and so you do the the interview you get all the questions out.

You ask all those questions. You probe you make sure that you are disciplined and diligent and that you don’t accept a fuzzy answer, because your priority is important. Then you review. Have we got a complete circuit right and I’m going to be walking you through the entire circuit questionnaire, and I’m also going to give you techniques and methods that you can do to review that questionnaire so that when we come to to move on and we we Plan and execute our campaigns.

We can do that with incredible ease and confidence.


 

Categories
Online Marketing

Web Designers Roadmap for 2011

This is me in this article. I want to go over a subject that I just blogged about, and that is the web designers roadmap for 2011. So what this is is basically an outline of skill sets that a complete web professional – you know whether it be web designer web programmer should work towards, given what the demands are today on the web.

So let me just translate that into English. I’ve loaded up the outline right here and yeah. So let’s just look at the list, so we have HTML CSS, PHP basics, javascript, jquery, wordpress, OPP, HP, html5, css3, iphone ipad development. So this is a list of the technologies and i’m sure some of you are familiar with these things in the order in which you need to learn them. I’r not saying that you need to know all these things to be a web designer or to be a web programmer.

All saying is that, in the order of priority, you need to learn these things and the more you know the more chances you’re going to get work and the higher your fees you’ll be able to charge for your time. Of course you see if you know HTML and CSS very basics, of course, of any site – that’s good! You might be able to get some jobs with that if you’re a good designer. But you add a little bit of PHP on top of that and I can tell you that you’re almost guaranteed to get significantly more work and you’ll start entering into an area where you’ll be able to charge more for your time.

Then you spice that up a little JavaScript. You know all these things that we see the sliders and so on. So if I go to I go to killer sites like this slider here that we see this is all done with javascript jquery. So knowing that has certain advantages so back to my outline, so Oh skip HTML CSS PHP basics. Again, I’m looking at this from the point of view that you are a junior web designer or web designer with some years of experience, but you’ve never programmed before, and all I’m suggesting here is not that you become a PHP programmer.

Although there are certain advantages to that, all I’m suggesting was number three here is that you learn at least the basics of the PHP language, so you can get you so you can get around it, so you can work with it. As you probably know, you know, a lot of the common elements of a modern web site are built with PHP these days or some competing language, although PHP by far and away is the most popular.

So what are we talking about things? I’r talking about things like shopping carts, e-commerce systems, blog’s content management systems, blogs like wordpress content management systems like joomla, drupal, etc; many forms and contact systems and social networking systems. These things are all built with PHP and you’re, going to find more and more of your clients or people you work for, and I’m going to need to implement to put these type of things into websites and if you don’t know, PHP, it’s going to be real.

Real pain in the butt so to get I’m not saying you should have the PHP skills to be able to build these things from scratch, but having certain basic PHP skills will allow you to install and work with these things and modify these type of systems. Much much more easily working along with PHP many times is, of course javascript javascript is one of these must learn web programming language. The javascript works in the web browser where, as PHP works on the server, if you don’t understand that just go to killer sites, calm or a killer, article store, calm and learn about the differences.

Essentially, javascript is an essential language. You have to learn today because so many things in today’s modern web site requires the use of javascript. You see JavaScript pal, with the help of packages like jQuery, which I listing point number. Five are used all over the place these days to create all kinds of fancy. Page widgets, like the slider, showed you before in dynamic menus and all kinds of other things that you know countless things really in effect, in fact, jQuery is replacing many times flash where you would use flash before with jquery and similar packages like script oculus, although jQuery Is the most popular flash is being replaced? Just to summarize, and just in case you don’t know, jquery is age, you have a script library, that’s free that pre packages, if you will always type of all these types of widgets and sliders and so on.

So it’s really really something you should learn. WordPress number six wordpress wordpress is the most popular blogging and content management system out there. It may not necessarily be the best. I can’t comment on that in comparison to Drupal and Joomla. I’ve used Drupal a little bit all. I can say is that if you got a big big site to build build up, then drupal might be a better choice for you.

We use WordPress extensively hot killer sites and on the killer sites network because because we just were used to WordPress, it has a lot of built-in functionality and it has a huge community which provides you with a lot of support. The point to take away about WordPress is modern. Web design is that these days, I would suggest everybody pick a blogging edge in like wordpress or or full CMS a drupal or joomla and then base much, if not all, of your web design work on these platforms on these products.

Why? Because they’re free and because they provide a whole bunch of functionality for free the days of building static websites, are becoming less meaning HTML, only without dynamic components without being database driven and so on. Those days are quickly fading, so you might as well learn one of these packages, work, crew, pal or juma and start basing all your web design work on that, because you’ll be able to go in there and be much more competitive relative to people who don’t understand These things don’t work with these things every day, simply because you’re going to be able to provide much more bang for the buck.

If you will point number 700 PP HP now this is for people who are not necessarily web designers. This is for people who want to take it to the next step, want to learn how to actually build PHP based websites, application things that are a little bit more complex than your typical. You know, contact forms and so on. The reason I mention OPP HP is because object. O P is short for object-oriented programming and object-oriented programming programming is the modern style programming.

It’s used in many languages, including PHP, Ruby, Java JavaScript to certain extent, because javascript is more of a prototypical language, but that’s really getting to nerd details in terms of you know most functionality in terms of using javascript everyday, its object, oriented the whole point of this Is that object-oriented programming, once you learn in PHP, or once you learn in Ruby or Java? You know object-oriented programming and many of the systems I mentioned before: wordpress joomla drupal, to a certain extent, if not totally, depending on the package, our object, oriented based, meaning they use object-oriented structures.

So if you understand the principles of object-oriented programming, you understand how to work with it. It’s going to make your life much easier again. This is getting into a level here with Opie. It is not terribly important for web designers of what will be kind of helpful. This is more, for people want to get into the programming anything’s I yeah. So let me just recap: you very quickly in terms of the list from one through nine, I would suggest that one to six from HTML to WordPress.

These are things that I would say all web designer should learn and it looks pretty daunting. I would imagine, but actually it’s not as difficult as you’d think. As you know, HTML CSS, what are more challenging things to learn, is actually CSS even more challenging some respects because of browser quirks and inconsistencies. Php basics is actually pretty easy, especially go to killer PHP com. We make it stupid easy terms of you know.

Seven, eight. Nine we’ll get into that will seven that’s more in the realms being a pure programmer. Let’s get into a number eight here, html5 and css3 see this is the new version of these two languages. Html CSS and I separated them, because what html5 and css3 brings to the play is different from HTML and CSS. The current widely used versions of these technologies and what I mean is that they provide a lot of functionality like HTML, has article embed capabilities and animation capabilities and so on.

Although I haven’t looked at the animation, keep I was told that so you know I’m not confirming that css3 again all kinds of capabilities it just makes it really easy to do things. A reason I separated is because right now, html5 and css3 cannot be used on your typical standard web site of all. This is quickly changing and the reason you can’t use on your standard, your typical web sites, because there’s still quite a few people who are using web browsers that don’t understand html5 and css3.

But this is changing, quick, because Google, Microsoft Firefox apple and are all pushing everybody to adopt to use the latest and greatest browsers, which read all this. This is the future. This is something that have to learn and if you’re developing sites or little applications for ipads, iphones or android phones, html5 and css3, they read all these things and these are going to be very important.

These being you know the people using the pads and the phones smartphones. So it’s going to be it’s you. It’s a huge market, that’s growing, bigger and bigger every day, so you might as well get into it whether or not your programmer or just a web designer learn it it’s going to pay off dividends very quickly, if not right away. Finally, is a ipad and iphone development if you learn html5 and css3, that will take you a long way what you need to do as a web designers just explore what you can do, what iPads and iPhones and just get familiar with it, so that, if you Get approached in terms of developing a site, you make, you know for vez and they will add some extra functionality.

At least you’d be familiar with your options. There we’re going to get into this extensively at killer sites in the near future. So I’m like I get into here. I just want to make a quick comment about flash I’ve been a fan of flash since its inception, we’re actually back in the day. I think he was nineteen. Ninety something it was actually owned by another company was called future splash and it evolved into a very powerful platform for developing all kinds of things.

The problem is, is what flash is now dying and I think, in large part, because of Apple you see, Apple basically does not allow flash to run on iPhones or iPads, and since there are hundreds of millions of iphones and since ipad is going to be, it Still is it, is it’s going to be V dominant, pad being used out there? I believe by the end of 2012 they’re expecting somewhere in 100 million plus iPads being used, they won’t run flash.

So if you want to reach this very large segment of the web audience you cannot, you cannot. You can’t have pages that rely on flash and now to add, on top of that, with purple with packages like jQuery JavaScript, libraries like jQuery and html5 and css3 it really. These technologies, which are free and open, don’t require plugins and the browsers don’t require the people install special extra doodads into their web browsers these tools, jquery html5 sistership.

They replace much about all of the functionality of the capability that flash gave you so it’s. I would not be investing in flash now. That’s all I’m saying: we’ve actually stopped any future production of flash training articles because we see about writing on the wall. I don’t want to lead people down the wrong path. You know you’re much better off learning, jquery, html5, css3 pen, you would be flash as far as I can tell going forward.

Let me close off of a couple of final comments again, as I mentioned before, you don’t need to learn all these technologies to build a website or to be a successful web professional, whether your web designer or web programmer, but there are certain basic. So, for instance, three points number one: if you, if you just want to build the site small site for yourself or your own little bit this knowing one and two, basically, basically HTML and CSS, it’s probably more than enough for you to sort of get things going.

So you can create a simple site at pages and images that kind of stuff. Then you find, if, though, you want to become a web designer, you should know one through six HTML CSS PHP basic JavaScript, jQuery WordPress, and I explained why that was the case before well. If you want to be competitive, you know that’s what you should do. Finally, if your web programmer, you have to learn, of course, all these things one through eight, and if you really want to take advantage of what’s hot now, you want to get to iPhone iPad development, whether that means understanding, html5 and css3, and how that works with Eyeball iPad iPhone or if you want you to go real crazy, if your programmer get into objective-c, where you can really take full advantage of the ipad iphone hardware.

One thing I don’t mention is document, of course, is android. Android is as a global platform as an audience. It’s going to be it’s already bigger than I phone and iPad. Not a problem is, is that Android has several versions and they don’t play perfectly consistently across the versions and across the device at sea, whereas Apple controls, everything they sell. I they sold off the phone hardware and the software and a pad hardware has software.

Everything is consistent, whereas apparently with the Android, which is a great operating system, it’s not consistent, so Android 3.12 might be different on 3.13, etc. I’r just ponies these numbers out of my you know out of the air, but you get the idea, so you got ta really consider that aspect of it as well. I joyed development is going to be extremely important, going forward, of course, and again, html5 and css3 is a great cheap way to sort of get into that cheap, meaning easy to do so.

You want to consider as well in terms of developing applications for Android and android-based tablets and phones. I believe the base language is Java, so that’s a whole kettle of fish and so yeah anyway they’re you’re going to have to sort of make a choice personally right now you have to look at what I would suggest in terms of choosing android become an android Expert or ipad iphone expert you have to in terms of rented code and so on.

I would look at what type of sites or programs you’re going to want to build, because you find that certain groups of people may be more attracted to Android versus people. More attracted to iPad so yeah we’re concentrating on ipad iphone simply because education and apple go hand in hand and since we’re in the education market, that’s what we are going to work on. I hope you found this podcast useful and we shall talk very soon.

Bye, bye,


 

Categories
Online Marketing

Create a Website Online – 5 Reasons to Try Wix Today

This company has become pretty well known over the past few years, and I know that you’ve probably seen a few of their commercials. I’ve actually been using their services ever since they first opened the doors in 2006, but today this company is one of the biggest players in the website building business.

They host 110 million websites globally and they make it really easy for the non-techies of the world to get online quick. So here’s what you should expect from Wix. You know I like flicks, because they offer an easy to use. Drag-And-Drop website builder right out of the box, they literally have like hundreds of free templates for you to use. You never have to worry about learning website code and you never have to worry about finding a separate website host either Wix comes with its own web hosting and you can actually buy your domain right through them.

We have this really cool, Wix app market. That makes it easy to add on extra features to your website like. If you need to accept payments online bookings receive resumes, they make it really easy for you to do business. They also support email, automation, degeneration and scheduling your social media all through their intuitive platform. They definitely have my stamp of approval. Wix is actually great for anything from a personal portfolio, an e-commerce shop or even just a small business website.

It’s super SEO friendly and they even have a little widget that helps you get your site indexed into the Google search right away, so Wix is giving you the power and the support you need to get online to day. If your business needs a new website or maybe you’re just looking to make this switch I’ll drop, the link below where you can sign up and get started if you do need help getting started, just have questions about Wix just go to our website wwlp.

Com and then Hit contact us if you like this article, please tag someone who needs to hear this and give it a like and a share until next time, guys take care.


 

Categories
Online Marketing

CISS216 – Web Development – Spring 2016 – Week 5, Lecture 1 – Feb 16, 2016

First of all, we’re going into you know: we’ve gotten into started going into CSS and with CSS. You really have a lot of power to do a lot with the appearance of the page, and we want to make sure that what we do doesn’t detract from the content of the page, but compliments that it complements it and enhances it.

So it’s a good time to have the discussion about design the other good reason to talk about design. Now is that probably thursday this week and I will see how it goes – um, maybe possibly today or Thursday, we’ll talk about the project and what you need to do to get the project done, because it’s not too soon to start thinking about it, and I always Say it – and you know remember this: I we have it on tape or in a tape boy.

How old am I we have it recorded and in we can go back and play this around May when I say that Mei will come sooner than you think all right, and so it’s never too early to start thinking about your project. So it’s important for us to talk about the project and what you need to do for the project. But before we do that, it’s a good idea for us to sort of come up with guidelines for what constitutes well designed web pages.

And that’s one of your assignments to come up with some pages and some reasons why? And I also think it’s important to discuss it in class and we could do this by looking at good examples and or bad examples, because we find something that is good. Well, we can learn from it. We find something as bad. We can learn from it. We can learn what not to do all right and almost you know the flip side of the same coin.

So last time we were looking at some good and bad websites. Does anyone have any more websites that they would like to bring up as examples of either good or bad? We went for a few of them, alright, fair enough. We went over a few last time. What I like you to do is I, like you to think of websites that you visit often alright, just think of websites you visit often and let’s not think in terms of good and bad design, but let’s talk or think about websites that you visit.

Often, why do you visit those sites? What’s an example of a site that you visit? Often, yes, unemployment, site, okay, and why do you visit that often okay have to file every Sunday. So in that case, there is a site that you can use to perform a service that you need to use all right and – and you need to do it weekly and it provides the service that you need need to use other sites that you visit espn.

Com and Why do you go there, news all right, any other ones? No one ever visits any website except those two people, okay, go ahead, canvas all right! Well. Why? Because again, you need to do your assignments to get your homework in and so on anything else. It doesn’t have to be, it doesn’t have to be something that you think is going to sound impressive. I mean it can be something you know, Wikipedia Facebook, YouTube, Instagram, maybe and so on.

All right. The first thing that I want to get across is the sites that you visit most often and the size of use that you go and you stay on um you probably go to because they provide either good content content that you need or want or services that You need or what all right – and this, in my mind, is sort of the first rule of web design and again I rather rather call them guidelines and rules, because really every problem is a different problem and therefore it’s hard to come up with some observations that Are true for every single website, but this might be one of them and it’s usually said this way and I’ll give you two versions of it and you can pick the version that you like content.

Is king alternately. You don’t like that, one, you can say: content is queen all right either. One. The point is, is that we visit websites not to admire how pretty they are all right. We don’t go to websites because they’re well-designed we go to websites because they either have content or services like Google search, for example, on Facebook. That kind of thing they provide you a service or they provide you content, something at you either want or need.

That’s why? You visit websites all right so when we talk about design, that ought to be the first thing that we consider is the content all right. Some people try to separate content from design. I don’t think it’s possible to do that. The content and having good content is an important part of design. Remember when I speak about design, I’m not just talking about planning out the way it’s going to look and what fonts are going to use arm and what colors are going to use and what images you’re going to use and how it’s going to be laid out.

That’s a part of design, but when I talk about design, I talk about the whole act of planning out what your website is going to be all right. That involves things such as determining who your audience is all right, determining what is important to those members of your audience and then figuring out how to arrange the content in a way that will make it easy for them to find what it is. They’re. Looking for all right, so if we start out with one killer content, our design and our technical skills support that it would be like, let’s see if I can do it with markers.

No, I didn’t want that. There’s design, there’s technical skills, and here is content here – is content yay. Alright, one of those two things fails: the design fails, boom becomes useless, your technical skills fail boom, it becomes useless, so our technical skills and our design, our visual design, our layout, is meant to support the content and enhance the content all right, so technical skills were Dressing in class – and we have been since day one right – technical skills – are learning the different languages learning HTML.

What does a web page consists of? You know what are the tags that we use on webpages? What are tags? How do you nest tags? What are attributes? How do I make a link? How do I make a heading? How do I make a paragraph then CSS, all right, which is how our page is going to look? How are we going to designate what part of our page is the heading section and so on? Finally, a third thing is JavaScript, which we will touch on at the very end of this class design is about how the page is going to be laid out.

What the appearance of the page is, and so on these things support the content. In other words, they should not get in the way of the content, but they should support the content all right. So, let’s come up with you. Let’s come up with some general characteristics of a well designed website, starting with the assumption that the that the website has good content that people are interested in. How can we make a design than to complement that content or enhance that content? What are some things that we can do? Okay, exactly number one.

We can put emphasis on important stuff, first of all, important to who important, probably to the audience right now. It might be also you might want to emphasize stuff that’s important to the organization as well. Right if I was doing a website for a nonprofit organization, one of their primary goals is going to be to get a lot of donations right. So I want to emphasize donations because that’s important to the organization but emphasizing emphasis on important stuff, both for the audience and the organization.

And when I talk about organization I am talking about arm whoever’s, making the site or whoever is having a site made for them. So it could be, a business could be an individual’s portfolio right. It could be a fan club of some, a fan page for some artist or musician or whatever could be a nonprofit organization could be a school. So that’s what I mean when I say organization. How can we put emphasis on the important things? Okay, number one? We can use CSS formatting or things such as the size, what’s another way that we could emphasize something on the page.

I will call this the page organization and layout and things such as headers and so on plus other ways that we can emphasize stuff, color plus other ways that we can emphasize stuff positioning and this one’s subtle. The next one that i’m going to add. We can emphasize stuff by being careful about what we put on the page along with it all right. For example, if I were to have a web page, they had 20 pictures on it, which one of those 20 pictures would be emphasized.

Well, maybe the biggest one or the one that was on the top or whatever. But the point is, is that there would be other things that would potentially distract you from the thing you want to emphasize. So one way that you can emphasize something is by limiting what you put on the site in limiting, what’s on the site, to something that is important, all right, so choosing your content carefully. All these things that we’ve listed here are different ways.

You can emphasize something. That’s important all right: let’s go to a website, let’s go to Apple’s website, so I think it’s thing most people would consider that a fairly well designed website and, let’s take a look at it. Well, what do we notice about this page iphone success? How could we possibly miss the point of this page? We can’t there’s one thing on the page only and it’s big and it’s in your face and it’s positioned and the fonts the images all look good, all right.

So if they had three things on this page, the iphone 6, the ipad, the macbook – then there’s three things competing for your attention. In this case, there is one thing competing for your attention, which is another way of saying there really no competition for your attention. Now. They do have navigation for other stuff, but as we go through and look at, the other stuff will notice a very similar experience.

Let’s click on Mac all right. They have under mac the different models that they have. So let’s say I’m interested in a macbook pro. There’s the features of it and notice with the big images and the way that the typography is the way that the letters are and the colors really emphasizes the points that they want to make. So it’s hard to lose track. It’s hard for the loser to get buried and lose track of the important stuff on a page like this, because there’s so little of it and it’s laid out so sparsely that’s another way that you actually can put emphasis is by putting blank space on the page.

All right, sometimes that’s called white space. It’s called white space, regardless that the color is actually white or if the color would be gray or whatever it’s still called white space. So there’s a paragraph and again a lot of space around the paragraph, a couple of lines that are very big: how many colors do they use on this page? Well, it was black and white. There is other than the images.

We won’t count that there’s blue. What are the blue represent links? You know that immediately, don’t have to think about it. There’s a couple of shades of gray they’re doing that allows the separation. If these were both the same color, they would sort of smash together in your mind, but by using slightly different colors, and then they use pictures now. The interesting thing is: there’s a lot of stuff on this page.

There’s a lot of links. There’s the links along the top of the page there’s a whole mess of links on the bottom of the page, but the design is such that they put the most important stuff boom for this page right out in front of you. Let’s go to a competing computer company. All right, let’s go to, will be a good competitor. I’m thinking eventually a hardware company HP, probably HP com, but i’m going to make sure – and let’s notice already in my mind, that when you go to their home page of their store, have this they have a display.

They have a desktop. They have a touch laptop laptop printer media display and so on. If I go to desktops business elite and so on, there’s just more stuff on this than there is on the ample now. Let me ask the question: does that mean that the apple site is better designed than HP, not necessarily all right? What is the difference? What do you think the difference boils down to between HP site and apple site president’s day sale all right besides that Apple? Never as sales, so that one’s a no-brainer all right, what is what’s the difference between the offerings of HP and Apple as far as the hardware that they sell HP sells a lot more options exactly you want to buy a macbook pro.

How many choices do you have a couple? There’s the 13-inch there’s a 15 inch and then for each of those there’s choices about the processor speed and all that. But there’s not like a lot of options, whereas H he does have a lot of options for all their different offerings, whether you’re talking about laptops or desktops, plus these sell printers and displays, and all that other stuff as well. Alright, so one website could look one way.

Another website could also be well designed and looked differently, because that company has different content. That company has a different story to tell Apple, is very much about directing you down a certain path. All right, there’s only a handful of options, the kind of hardware you can buy. You know how many iPhones are there versus how many Android phones are there? There’s a lot of Android phones where there’s probably two or three iphone models that you could buy right now, all right, four or five, maybe at most all right so ample as a company has one message: we are simple: we will directly direct you down the path That that that you want to go to get you to purchase the thing that you want, whereas HP has a different strategy as a company that we are a company that offers a whole bunch of different hardware, all right, and we give you options as far as What to get so they’re not going to be designed in the same way all right if HP tried to take the approach that Apple did now, let’s go and look at HP, desktops, there’s say 20 of them at least, and there’s a load more button and a Load more button and so on.

If HP tried the approach that Apple did where they showed 11 model per page, they would have dozens of pages just in a desktop section itself, all right, so they organized their content in a different way in a way that makes sense for the product that they’re Selling as opposed to the product of the Apple is selling, so both ways could be equally good for the kind of content that they’re trying to portray, even though, ultimately, the pages look very different, all right so HP has to take a different approach of emphasizing what They want you to see all right.

They want you to see the variety of choices and help you navigate through the myriad of choices, whereas Apple has a limited number of choices and they will. I really want to hit you hard with each choice that you have because there’s not that many choices. Okay, so just with this one topic emphasis on important stuff, we can see that that can be done all sorts of different ways. It can be done by choosing what content we have.

It can be done by the way that we position the items it can be done by the way we organize the page. It can be done by what other content we put on the page. It can be done through color, it can be done through size can be done through image and so on. So when you are talking about emphasizing the important stuff, there’s no formula for doing that, however, these are some of the things you can use your job as a web designer is to figure out, what’s going to work for your particular problem.

That’s why web design is not a one-size-fits-all approach. All right. Every organization has its own distinct strengths and weaknesses, and they want to emphasize their strings all right. That’s one of the things that the organization wants to emphasize is their strings all right and therefore the manner in which you emphasize the content on the page depends on a specific problem that you are trying to get all right.

What’s another good guideline for good web design organization, can you elaborate on that or can maybe someone else elaborate on that? Ok, I would say when we talk about organization, we can talk about two things. All right. One thing is the way the overall site is organized. The other is about how an individual page is organized all right both of these fall under the category of organization. Let’s talk about the page, how a page is organized first, all right: what are some good guidelines for organizing the information on a page? Okay, all right, the two sections of a page are obvious, and what do I mean by the sections of a page? Well we’re going to draw a page.

A typical page might look like this. You have a header on the top of the page. Maybe it has a company logo in the name of the company and the purpose of the company. Maybe you have the navigation here then maybe you have the content of the page here then. Maybe at the bottom of the page you have a footer that has other important stuff. So the first thing I would say as far as the organization of the page is it should be obvious all right now.

How do you make it obvious? Well, one way you make it obvious is to make it consistent between your pages. So, in other words, if your navigation is on the left side of the page for the most part, most your pages should have the navigation on the left side of the page. Wouldn’t really be very good if, on half the pages of navigation was over here and half the pages, it was over there or half the pages it was along the top and the other half is along the bottom, or something like that.

So you come up with a structure, the page that you implement consistently among all your pages. The other thing that you do is you emphasize the sections? How do you emphasize sections well same thing with the size, with the color, with white space, with positioning all those sorts of things that we use to emphasize? What’s the important content we can use to emphasize the different sections of the page, so we look even on Apple, which is a very bare-bones site notice that the top line, which is my main site navigation, is a black background with white or grey font.

On top of it, whereas this line, which is a sub navigation, is a white background with gray or black links on it. If we look at HP to stat sale, information is in a different color than the rest of stuff on the page, so that section pops out at us the links are along the top there’s some more links up here that are a different color, so they’re set Off to the side, and so on, so we emphasize the sections of our page.

We do that by having them consistent and use their appearance, to make clear what the sections are and be consistent about that consistency is a big thing in web development. All right, we want our pages to look consistent. We don’t want to have all of our pages, have a certain color scheme and then two or three pages look wildly different. That would be confusing to the user if they came to those pages.

Likewise, if we have the links in a certain position on a page, we should probably have those links in the same position on every page all right. Likewise, if we call something computers on one page, we shouldn’t call it hardware on another page. We should be consistent about the way we term term things notice of what we’re doing is when I talk about changing the appearance of things to make it organized and make the organization clear.

I talk about using fonts and colors, and things like that. Just like I talked about when I talked about emphasis all right. In other words, we don’t make things different colors just to look good. Obviously, we want to pick a color scheme that looks good and we want to pick funds that look good in it and that are readable. However, we also want to pick colors and fonts in a way that helps the user visually organize the way the page is laid out so you’re teaching the user that gee that blue bar that’s on the left side of the page, with silver text on it.

That’s my navigation and that visual cue will carry over from page to page to page all right and that helps them navigate around the system, all right so making the links obvious through the use of colors and formatting and so on. Now, as far as organizing the site, this can especially be a challenge when you have a lot of data on a site when you have a lot of information, a lot of pages on the site, all right, let’s talk about a sporting goods store all right.

What are some of the ways that we can organize the different pages in a sporting goods stores website? Obviously we, you know, sporting goods store, probably sells hundreds or thousands of products. We don’t want to simply have a link. You know a navigation, it has 200 links on it, each of the individual products. How can we organize those products in a way that would make sense to our users separate in two broad categories, and what would be an example, because, there’s probably more than one way we could do this? What would be one way that we would? We could separate our products in two broad categories, outdoor versus indoor, then maybe outdoor, we could separate how all right by activity, hunting fishing in running and so on, an indoor might be basketball, volleyball, etc.

We can also have outdoor warm weather activities, cold weather activities. That’s just one way, though, that we could divide up that topic. What’s another way that we could divide up the products for our sporting goods store all right, clothing, shoes equipment, so under clothing I could have tops and bottoms under bottoms. I could have you know like long pants shorts under tops. I could have sweatshirts t-shirts under shoes.

I could have running basketball and so on under equipment. I could have golf clubs, tennis, rackets and so on. What’s another way that we could divide up the products in our sporting goods store, I sport, baseball, softball, golf basketball, soccer and so on. If that had too many categories, we could break it up in the summer and winter sports or we could break it up into indoor versus outdoor sports if that would help, and so on down the line.

Other ways that we could do it, I’m not saying either these ways or any of these ways are the perfect way. All right. We could do something like buy brand. All right. All the nike stuff goes here. All the Reebok stuff goes here. All the Wilson stuff goes here and so on down the line we could separate by man, woman boy girl, all right price. We could have tennis stuff and again the interesting thing is we could mix and match right.

We could have, for example, if we separate it by type of product shoes running baseball whatever we could then separate running, buy expensive shoes, cheap shoes and so on down the line. There’s a lot of ways that we could divide this up and one nice thing about the web is you can sometimes divide things up a couple different ways, all right arm, for instance like if you used to go, though anyone that that’s old enough to remember when There were blockbuster stores right.

You know you would go into them. They would have to find one place to put a movie right. So, like the movie um Shaun of the Dead, they would have to decide. Is that a comedy or is that a horror movie right? Because they had to put it some on the shelf, all right, whereas if I had an online store like if I had Netflix or Amazon, or something like that, I could put shaun of the dead in comedy and in horror, because I didn’t have to physically put Something on a shelf same thing for an online sporting goods store all right.

I could categorize things a couple different ways if I thought that that would help people find it. Here’s the bottom line for this exercise because we’re not opening a sporting goods store. So we don’t have to have an answer to this question, but we’ve probably talked about this for 10 minutes and we came up with 12 or now three probably a half dozen different ways of categorizing the stuff, especially when you use the divisions and subdivisions and all That so any problem, any topic that you’re going to tackle on a website, there’s a bunch of different ways that you could categorize the information all right.

Your job is to pick one and which one are you going to pick? You should look at it from the perspective of your customers, all right, because they’re the ones they’re trying to find the information it doesn’t. Do you any good to categorize stuff in the way that makes sense for the store employees all right, because the store employees aren’t the one? That’s are going to be shopping on your online store all right.

Oh tennis, rackets, that is an outdoor summer. Sport equipment all right, it should be in a way, that’s obvious to the user coming in where something is going to be categorized so that they can easily find it. So, in order to do that, you have to sort of put yourself the perspective of the user. Let me tell you about one little enhancement that we’ve done and they’re working on revising Elsie’s website, but one enhancement that they did a few years back is that there are actually computer classes in a variety of different divisions.

All right at the time there was a separate business and engineering division, so there are computer classes in engineering, those computer classes in business, there’s also computer classes in arts and humanities, and there are also um computer classes in the math and science division. Well, that sort of makes it difficult for someone coming in from the outside world, because they don’t know what kind of divisions they don’t know.

How are how our college is organized as far as what courses belong in what division? You have a kid coming in from high school, maybe all they know is I like to work with computers. I want to take some computer classes. Show me all the computer classes you have well. If it was organized by academic division, then a student might look at engineering and say: well, that’s all the computer classes. I have.

I have to pick from one of those all right, so what they did is they created a separate IT page and the IT pages for people that say hey. I want to be in information technology, i’m going to go to that page and then that page will show me where to get through information on the rest of the site, all right and here’s the example of it. Computer information technology curriculum at LC and it talks about it.

It talks about all the things that you might want to do: computer science, computer security, hardware, maintenance, digital media, networking programming and software development, web development and so on. The student makes it to this page. It doesn’t matter to them that some of these things are in one division like this might be in arts and humanities. This is in math and sciences. These two are in the business and engineering division.

It doesn’t matter because this is not written from the perspective of an employee of the college that knows where what division all these things are in, but this is written from the perspective of a student that would come in or a prospective student that would come in And just want to know about all the computer programs here so when you, when you need to decide what or how you’re going to organize the content on your page, you ought to look at it from the perspective of your site, visitors.

Not from your perspective, all the most frustrating things about a website – and you hear this – a lot is, and it’s frustrating for everyone, it’s frustrating for the developers of the site and is frustrating for the viewers of the site, but a lot of times. The content is somewhere on the website, but if it can’t easily be found, then is of no use whatsoever. You know that’s typically, one of the biggest complaints that people have about websites is.

I can’t find what I’m looking for now. Maybe they can’t find what they’re? Looking for because it wasn’t there all right, whoever designed the site didn’t what content was most important to the users or maybe it’s there, but the site is just so poorly organized that is impossible to find it either way it doesn’t matter if you’re not finding the Content that you want to from the site you’re going to go somewhere else, you know, compare shopping online was shopping in the real world.

If I go to home depot and i’m looking for a ladder, let’s say I’ve driven a home depot wherever there’s a home depot. I don’t even know, but if I decided gee, I can’t find it here. I’m going to go! Look at lowes instead! Well, I’m going to have to get in my car bundle up because it’s cold outside drive, maybe across town, find a place to park and go into loaves, so I’m kind of motivated to find it.

I took the effort to go into home depot. Hey I’m going to walk around i’m going to look, I’m going to go up and down the aisles because I don’t want to drive across town to go to lowes all right, that’s how it is shopping in the actual physical world if you’re shopping online. If I can’t find something on home depot, how long does it take for me to get on to lowes website? It doesn’t take any time just do a quick google search and I’m there.

So if something is not well organized on a website, there’s no motivation for the person to try to figure out how to find it all right. The typical customer that’s coming in, there’s no more to motivation for them to struggle through a poorly designed planned site to try to find the information they want to, because there’s so many other alternatives. All right, I guess see if the exception of that would be a sight like unemployment, where you have to go and do that or like even dare I say, canvas right, you can’t say well gee, I don’t like canvas.

So I’m going to go, submit my homework on some other site. Well, you could do that, but you’re not going to get credit for it and for this class right, but for most typical consumer sites. If the site is not well organized, then people are simply going to go elsewhere to do whatever it is that they need to do all right. So organization of the site is key, and the organization comes in two varieties: the overall site, that the content is divided in a logical way to make it easy for the people on the outside world to find it and at each individual page.

It’s obvious what the different sections of the page are and what the different sections mean and represent okay, thursday, we’ll talk about a few more of these guidelines and then we’ll get into what you need to do for your project and that will probably take all day Thursday, and probably into Tuesday of next week, all right we’ll see you up in lamb,


 

Categories
Online Marketing

CISS216 – Web Development – Spring 2016 – Week 5, Lecture 2 – February 18, 2016

If you want to do this most of the time, because you can always find exceptions so to just about any of these guidelines that they’re going to be exceptions right, if you’re doing a standard website for standard business or organization, these are good rules of thumb. To follow so kind of summarize, some of the ones that we talked about so far, we talked about a website being, first of all, content having good content and by good, accurate, updated and what the visitors of the site need and again a lot of times when People talk about web design, they focus on sort of the surface of it.

The superficial aspects of it, the color, the fonts and all that and that’s an important part of web design. But just important in my mind, is making sure you have the right content. Then doesn’t happen by accident all right. It doesn’t happen by accident that you have the right content for a website. Everything you do about a website ought to be thought through and planned all right and um sites.

You know you may look at this and say well it’s obvious and all that, but I guess I don’t know. I guess obvious to who the whole point of web design is that you’re going to have a whole bunch of decisions to make, starting with what content you’re going to have on the site. How you’re going to organize the site on what the site is going to? Look like what the pages are going to look like and all these ought to be deliberate decisions all right and they ought to be deliberate decisions guided by the goals of your organization and just, as importantly, the girls of the people that are visiting the site.

All right, so content is a design principle. Choosing the correct content. The site that is well organized is something that we talked about and more organized. We talked about a couple different ways that it could be well organized one is we can talk about the overall site being well organized another? Is the information is categorized in such a way that is clear to the user, where to find everything it doesn’t do any good to have a website that has tons of great information if no one can ever find anything on it all right.

It’s amazing, when I have talked to people that have developed web sites that aren’t particularly good on the most common compare their users is that they can’t find the information that they’re looking for and sometimes what managers or web ball masters or whatever you want to call Them get defensive and say well that content is there, but if people can find it, it doesn’t do any good if it’s there.

So, therefore, the host site ought to be organized and it ought to be organized in a way that makes sense to the users or the site visitors. It doesn’t do any good. If I, as the web developer, understand the way the site is organized and it makes perfect sense to me, it needs to make sense to people outside of the organization. It may need to make sense to the users, so the sight of all ought to be organized and individual pages ought to be organized, and this is why we use things like color and borders and putting space between things and different fonts and so on.

We don’t just do it to make the pages look nice. Obviously we do want the pages to look good. No one wants the development of the website, but we do it in a purposeful way to sort of help guide the user through the way that our pages are organized. So it becomes obvious that that green column on the left side of the pages of navigation, all right and the contact informations in a blue strip on the bottom of the page or whatever.

Alright. So our pages are organized and we use these things visually. To help emphasize the stuff that needs emphasis alright, so that would be a second guideline or web development. A third guideline is consistency, and that also can mean several different things. Consistency in terms of how pages are laid out now that doesn’t mean that every page needs to be laid out in an identical fashion, all right, but there should be some sort of consistency to it.

You don’t want to make it look like. You are visiting two different sites as you navigate around your website, so stuff should appear in a consistent place, and usually that means having a banner on the top of the page having a navigation somewhere either along top along the left or along the right. Maybe having a footer with additional information and then having an error area for content information.

Now we can go to different sites and see that not every page is organized identically, but there is some sort of consistency. All right. Consistency also relates to the terminology that we use within our website and I’ll give you an example of how that could be very confusing years ago. I work for a software company that dealt with people in the food business all right now in the vocabulary of that business principle, manufacture and maybe even one other word principal manufacturer now, maybe even been another word all meant the same thing.

Alright, so we’re developing a website, we will want to keep the use of the term consistent. If they’re calling those people principles, we would want to call them principles on every page. We wouldn’t want to call them manufacturers on one page and principles on the other, because that would be confusing to people all right, so you want to be consistent with the way that you phrase things so, for example, on the site for colleges, maybe for college.

Maybe we would have a page for prospective students and we call it prospective students. We wouldn’t want to call that something else on another page call it future students or something like that, because people love to see that and think that that means something different so be consistent in the terminology that you use call things the same way all right. That’s a guideline. Another guideline is sort of a consistency between the appearance should singer to match the content.

Does anyone know what I mean by that that your parents should match the content? Yes, okay, if your page is about space, you don’t want to put unicorns and ponies about on it. That’s probably a good idea. Does anyone else have another example? The example I always give is, I think, of two examples on you know how many of you have been on the barbie website within the past month or okay. Well, that’s fine! You’re not allowed to answer this question.

Only the people that have not been on the barbie site. What color do you think is the Barbie website pink, let’s see if you’re right, you don’t have to justify or explain. That’s: okay, no, no judgments. Okay, I’m pulling up the site for Barbie and looky here sure enough. The main colors is pink all right. Okay! Does someone named a heavy metal band? How do you spell that august burns red? This is a slightly surprising others, guys what color their site is going to be and what would you have guessed black and that’s what what I would have guessed to it’s, not black, but it does have a certain look for it.

Let’s go my old school. Let’s try Ozzie yeah well, Black Sabbath would be cheating but Ozzie. I think it’s fair game all right and again Wow lookie. Here, it’s mostly black all right. So the point is: is that could you imagine both ends might be very well designed sites? You know we didn’t spend a lot of time looking at them, but I’m going to say yeah both of my well design sites, but they look totally different.

Well, why is that? Well, they have different audiences in mind and they have different sorts of content and the appears that they picked match the content that they had now. These are very obvious choices, but you could have less obvious choices as well. What sort of look would you want from a bank? You may look very professional, you wouldn’t want unicorn gifts on the side or you wouldn’t want pastel colors or something like that on again.

The other word that a lot of people – and I think it’s this a dumb word, but but people use it all the time is branding right. You want to get across your brand’s. Look, you know Apple. I think we looked at them the other day. We could almost guess what their site is going to. Look like the whole idea of Apple computers is meant to be they’re, very sophisticated and designed and sleek and simple to use, and all that and the website matches that corporate image alright um.

On the other hand, the kids website, if it was done up in a very serious manner, like a new site. Well, you know everyone have any appeal to the audience, so I think the good way to summarize that would be to say that the appearance of the site should match the content in tone. Now, here’s where we might point out that there could be exceptions to this. There might be an exception to this, where you don’t want the appearance of the site to match the tone.

There’s one website that I’m thinking there’s a classic example of this. I’m thinking of the website the onion, the look of the onion is a satirical newspaper, so it’s meant to be fun. It’s meant to be humorous, I’m not going to pull it up because who knows what’s going to be on their page today? I don’t. I don’t want to have to explain to my Dean why I brought something up on the screen, but the onion is meant to be humorous.

It’s meant to be a fun site, yet it looks like a new site. It’s done in a very professional looking new site. Look well, that’s like part of the joke. It’s like pretending that this is a real real life newspaper and hear some humorous stories that came up with so that’s the case where they did. They broke this guideline that they did it deliberately, because that sort of adds to the appeal of it so again getting back to these.

These are pretty solid guidelines and, most of the time you should follow them. But if you think hard enough, you can find exceptions to all of these um one other good. Well designed a guideline is be sure. Your purpose is clearly stated and again you go to the website. You should know immediately what the websites for you shouldn’t have to guess that G, what is this organization again that can be done or that could not be followed and it can be effectively done.

For example, there was a 44 either halo, a halo, 2 microsoft created a site called. I love bees and it looked like it was a sight for a beekeeper when you first went to it looked like it was just a hobbyist website, but then, when you got into the site it became clear that something else is going on. They they made. It look like something had infiltrated the system and blah blah blah blah blah, and it was like some backstory information for the game halo now, in that case, they intentionally didn’t make the site match the content of the appearances like match the content and they didn’t.

They hid their purpose why the thought was is to make it viral where people would be talking about it. Look I found this site in G. Isn’t this weird and it got people talking about that site and it was a very effective ad campaign form. Let me see if I can put it on, I am going to i’m going to use a site called the Wayback Machine. The wayback machine allows you to go and see what websites look like years ago.

There’s wan na see if I love, peas, bees as long as live it. It isn’t the original one. So I’m going to go and pull up the wayback machine. I think we use this in what I want to show leo burnett last time, because, unfortunately, they made their website a little better. So I couldn’t use it as a good example. So let’s go in and pour it out from december of 2004 and notice. How, in the background, it looks like a nice little site about bees, but you get this sort of fake error message and you can read the mission log and there’s bill audio clips and so on and so forth.

So this is a way. This is an advertising campaign and array for for them to go interest in it forget people to say gee. I wonder what this site is about all right and it went viral and people passed it on and it was part of a good marketing campaign. So all of us any of these guidelines that we have you could think of cases where you can serve baked the guidelines. Do keep in mind, though, that you better be clever if you’re going to try something like that right, because otherwise people are just going to look at and say this is dumb all right and and ignore it all right.

So um sort of the default is to go by the book and do these things but um, especially for websites that are safe for the entertainment business or for creative field. Then it’s okay, probably to think a little bit outside the box, because people expect that from creative sort of organizations. Well, as you know, if you’re a CPA, firm or something people aren’t going to expect your website to look like a game or look like it’s a children site or something like that all right.

So we could probably talk about more of these, but um in some respects. Well, one thing I hear from students. Sometimes when I teach the section of the course is there, like all these things are common sense. You know who would make a site for Barbie that looked like a site for a heavy metal band. You know who would make a site where pages were inconsistent and didn’t look like each other. Well, my point of all this is: is whatever we do in creating our site ought to be done as a set of conscious decisions, we’ll just throw things together.

We think about them in advance and plan that we’re going to do and in that way that’s going to give us the best results. So it’s like writing. A term paper is just like planning a cross-country Drive. You could shoot by the hip and say I want to go to California, so i’m going to get my car and drive rest all right. You’d probably end up at keller in california, eventually, but you wouldn’t necessarily take the best or most efficient route, all right, so playing and deliberately thinking about each of these steps is armed what we want to do in terms of developing a site so for your project.

There’s a procedure that I want you to follow and it starts off thinking very general and then it narrows down to more and more and more specifics all right. The basis of this is number one starting off by thinking about the content of the site. What are we going to put on the site? Remember, we said last time that content is king or content is queen. It rules. People don’t come to the site to your site to admire the beautiful design.

People come to it to get some information or to do something that they need to do so thinking about in deciding what your customers need to do, or what information they need is sort of the first job all right and to actually probably the first two jobs. All right, we think in general terms, and we think in more specific terms, then we start thinking about some of these other things. How are we going to organize the information? What is the appearance going to look like and so on? So, let’s pull up in canvas the description of what I want you to do and we’ll go through as much as this as we can today and we’ll finish this up on Tuesday.

These kinds of things, in my mind, are reading the heart of web design. Not what colors you’re going to use or what fonts are going to use that comes later. It’s just like designing an automobile yeah, making the interior look nice or making the outside look nice! That’s important that as an appeal to people all right, not the designing! The car to be safe, designing the card to be a fuel-efficient, designing the car.

So it’s easy to repair. Those are all things that are probably more important than that. It looks nice all right. So here’s an overview of the project somewhere over here. All right you get to pick whatever topic you like, I suggest you pick something. That’s fun all right pick something that you’re interested in you’re, going to probably work harder. If you develop something that, if you develop a site for something that you’re interested in then, if you just randomly picked a topic all right, I the student, it did a website about his motorcycles.

Well, he loved his motorcycles he’s not about to put pictures of his motorcycle on a bad website all right, so he worked hard to make sure that website looked good to do his motorcycles, proud all right and I would suggest you do the same approach now pick A topic that’s enjoy that you enjoy pick a topic, that’s neither too narrow or two brow broad okay, and this is where I can help all right. Neither to know or to broad is a good idea.

Um to know would be under arms are too broad would be something like I’m going to do a website about sports. Well, you can’t possibly cover everything about sports in six to eight pages. All right I mean how many sports are there. You know you can barely scratch the surface. On the other hand, you know if you picked a topic of the history of the Cleveland, Indians, mascot slider, there might be a little too narrow.

I don’t think you could get six to eight pages out of that. So the idea is, is you want to pick a topic? That’s like right there in the middle, where you can get six to eight pages, with the content and you’re doing a good job covering it, and it’s neither to broaden or too narrow, and this is where I can help almost any topic that you pick um can Be either expanded or contracted to be the right size? So if you have an idea about this um, you know we can talk about it.

Um a lot of people pick article games, something related to article games. The article games itself would be a big topic right. So you can know that down by saying I’m going to do about mobile article games. Maybe article games from your phone or puzzle, article games, rpgs or whatever it’ll pick a particular game or game series. I’m going to do about the final fantasy series or something like that.

Another way you could either expand or contract that on to to meet the requirements of six to eight eight pages. Each page should contain a reasonable amount of content. There’s some judgment in there right. What is a reasonable amount? I guess useful guide, what you see, typically on their own pages on the web. You know a page with one sentence on. It is probably not enough content, a page that has 15 paragraphs on it, there’s probably too much content on it.

So think, in terms of what you normally see on a website for appropriate amount of content, we want the site to be technically sound, well designed and to effectively communicate the intended message. All right. The site is done. This project consists of two parts: a design document which is sort of your plan and then the final deliverable, which is the finished website, all right, I’m going to talk about the plan.

First, the plan consists of five sections and just as a memory aid you can get, you can use words that all start with s for each of these sections. The approach that I’m taking here was in a book that used to be a required textbook for this class and you can still find copies in our library or probably even through safari books online, and that is the elements of the user experience. Yes, no, no! No! Technically sound, technically solid, alright think a sound like not not like audio sound but sound, meaning like in other words like will be you know, the the foundation of that house is sound.

It means it is solid, alright, so, in other words, you use the proper HTML and CSS your links work. Your images work you’ve coded in a way that technically is correct and solid. All right strategy section relates to the goals of the site. Scope relates to the requirements of the site. Structure relates to sort of the sitemap. Skeleton relates to the page layout or sometimes called a wireframe and finally, surface relates to a prototype.

Think of a prototype is sort of being a rough draft of your website again. Any task that you do is better is going to be better. Typically, if you think about it before you do it all right. Does it matter if you’re writing a term paper or planning a trip or planning repairs in your house or anything like that? Any project that you’re going to do, if you’re flying by the seat of your pants and you’re just winging it as you go along you’re not going to get as good results is.

If you step back and think systematically of the approach that you’re going to take. All right, the first section is strategy, and that’s where you you do a couple things in the strategy sections. First of all, you come up with a high-level description of the site. Maybe I’m going to do a website about the article game, tetris all right now that by itself is not probably sufficient, the more specific you can define your purpose, the more or the better that you can actually go and achieve it.

So maybe I’m going to develop a a website about the game tetris and it’s meant for students that are learning how to develop article games or is meant for gamers or is meant for the general public, or maybe this meant for all three groups is meant for Everyone, maybe is meant for kids, you know: hey kids, you know you like playing your fancy new fangled article games. Here’s one of the early article games that started the ball rolling all right.

Maybe it’s meant for old-timers, who haven’t played a article game in years, but finally remember playing tetris all right, the better that you can define your purpose and define your audience the better job you can do creating your website another example. Let’s say I was going to do a website about classical music. All right, I could go so many different directions. With that right, I could define a website.

I could create a website about classical music for the general public people. That really don’t necessarily know a lot about classical music. Maybe they played in the band in school, but they don’t really know a lot about it and have thought about it. Since a music appreciation class I had – or maybe I can develop it – for people who are fans of classical music who want to know about new releases and concerts in the area and so on and so forth.

Maybe I want to develop it for adults. Maybe I want to develop it for high school kids. Maybe I want to develop it for children, the more clear that I can describe what I want the better off i’m going to be, because then I can really target the needs of those particular groups. You know the first rule of any sort of communication is to know your audience all right. So it’s not enough to say this is a topic.

You focus on the topic that you’re going to have and you think about who the audience is going to be all right, so you can imagine a site about classical music. If my audience was musicians, let’s say it’s going to have a lot different stuff than if my site was for listeners right. My site was for musicians. I might have information or articles about where to get your musical instrument repaired if it’s broken, all right or advice on buying a used musical instrument or what are some local community groups that you can join if you want to play in an ensemble or something like That, if I was developing it for high school kids, maybe I include a page about what concert.

Etiquette is ok, because you know people at classical music concerts can get really fussy all right. You don’t walk in in the middle of a piece. You wait until the pieces over and then walk in after that. So if you’re late you stand outside for a few minutes till it’s done, you actually don’t applaud in the gaps. You wait until the entire piece is done so for peace has three parts: there might be a slight pause between the first and second part.

You don’t applaud there. I think it’s silly, but that’s the way. It is right. You should probably one applaud right. I mean come on. You know, but again that’s sort of the expectations that people have so maybe for younger people. That don’t know that you might have a page about that. Oh page, about what are the main instruments of the orchestra. Now, musicians going to know that right, they’ve been playing in an orchestra, since they were ten years old, probably but a high school kid or someone hasn’t been exposed to classical music might not have any idea what that is.

Maybe examples of different eras of classical music. Again, a musician might know that you know very well, but a lay person wouldn’t necessarily know that. So when you develop your strategy, you don’t just pick your topic, but you think a little bit about the audience that you’re going to be reaching now. This is where, when you identify your audience, really, you may have multiple audiences is going to visit your site depending on again how big or specialized the site is all right.

For example, we have a school, you know with learning community college who are some of the different audiences that could be visiting Elsie’s, page or different groups of people that would be visiting Elsie’s site right, graduating seniors from high school, so graduating high school students were thinking About where to go to next year, that’s one group of people and for me, the parents of graduating seniors, all right.

That’s another group people in the workforce that maybe they’re working at a job that they don’t really like, and they want to upgrade their skills. All right would another group be traits people that already in a trade or people that are looking to get in a trade yep, people are looking to get into a trade all right again, maybe they’re working in a job that they’re not really crazy about, and they Might look to see you know: are there classes on welding or welding programs, or you know, nursing or culinary or things like that, other groups of people, instructors, faculty and staff all right? We would go on that site to look for certain things when our meetings are when grades are due.

Don’t read anything into this because I love my job, but when is spring break his class kids is, you know, do we have a snow day today? You know all these things are things like faculty and staff might visit, and we can probably think of others to just off the top of my head community members right. You may not be interested in getting a degree in graduating from LC, but maybe you want to participate in some of the cultural events at LC.

Has you know, there’s all sorts of different performances at the stocker Center there’s also our non-credit classes, where you can come and take a class in this that or the other that isn’t necessarily like four degree. But you can pick up your skills. I know they have for people that have no computer skills. They have like non-credit classes just to like to teach people how to use the mouse and how to move around and stuff like that or they might have a class in photography.

You know that’s non-credit, it’s not a first semester, but maybe it meets four or five sessions and teaches you the basics of a topic, just a personal growth or whatever lifelong learning, um people that I want to use a fitness center. All right. Fitness centers a great facility and as a student I think you get to use it for free. You just have to go and sit through one of their our. What would you call it orientation sessions and then you can use that for free.

I mean great facility in there. The plane is. Is that, especially when you’re talking about bigger projects, there isn’t one group of people called the user? There are multiple groups of users alright, and you want to do your best to hit the most important needs of all those different user groups. Now there might be some overlapping right. Parents of a high school senior probably have some of the same goals as graduating.

Seniors people in the community that are looking to maybe change careers might have some of the same girls as people that are brand-new out of high school that are looking at starting their academic career, but there are going to be differences as well right, someone who is You know in their mid-30s might be interested G. Will the college courses that I took 15 years ago transfer, whereas a high school student probably doesn’t have that question alright? So the first of all communication is to know your audience on websites.

You don’t just have one audience and a mistake that a lot of web developers use is they talk about the user as though there’s one kind of user that’s visiting their site or in reality, there’s several different kinds. So what you do so you develop a high level description, you identify the audience groups and you create what are called personas now. This might sound hokey, but what you actually do is you make up a fictional person that represents a group of people.

James is an 18 year old, high school senior at Olivia hi, who is interested in what you know, who loves computers and wants to do wants to work with computers? Lisa is a 28 year old person who is working in retail, who does not want to work in retail anymore? Who wants to who is interested in healthcare careers? You actually make up fictional people and little back stories about them now. Why do you do that? Will you do that for a couple reasons you do that, first of all, to show that hey my website isn’t just appealing one group of people, but I have identified two different groups of people and then, when you’re going through and making decisions about what content.

That’s on the site and how to organize it. You try to look through those people’s eyes. What’s going to help James find information about computer careers, what’s going to help Lisa find information about health care, careers and so on and so forth. Alright, that’s what I mean by creating these user groups and identifying these user groups and creating personas, then. Finally, you come up with goals for these grooves.

Alright, you actually, I think I just said you have three goals for each for the user of prioritize list of three user goals and our that your project will address and three of your goals, in other words, three goals of the organization that you’re doing this. For all right, but really you could define goals for each of the personas. You know a high school kid. One of their goals might be to find out.

Does LC offer the program that I’m interested in all right go for a parent of a high school senior? Might be, how much is it going to cost what financial aid is available for students going to LC? What are the rules about financial aid? What do I need to do to make sure my student gets financial aid and so on? So that is the strategy section right up top. We don’t think about how the site is going to look or what colors were going to use or what fonts we’re going to use or anything like that.

We start at the goals of the user identifying who the users are identifying, what the goals are for the user and identifying the different users that are going to be visiting the site and again there could be goals for each user group different goals, goals for a Community member might be what are the non-credit classes available for someone with my interests, what culture events are going on at LC this weekend and so on.

Alright, this becomes very challenging when you’re dealing with large websites all right, because there’s so many different groups of people and they all have different goals, but for the kind of websites that you’re doing is going to be a little easier. For example, let’s talk about my classical music site. Let’s say I’ve narrowed it down and say that I want to do a classical music site for high school students.

All right. Welcome by three different user groups be among high school students visiting my classical music site. Those who play an instrument, those who want to play an instrument third, might be high school music teacher all right. So if you are offering the course in music, you know you could use this site as a resource, so it may be geared towards high school students, but another kind of visitor to it might be a high school teacher that is going to try to incorporate your Site into their plans, article games, you know if I did a article game on tetris who could the groups of users be people that have never played tetris people who have played tetris? Who the third group be that’s a good question, but i’m sure we could think of something people that play the original tetris but haven’t played it since then, alright, so no matter what your topic is, we want to be in this section.

We want to be very specific and narrow down the specific audience and narrow down our to not just one audience, but several different groups that compose our entire audience and when we want to identify what the girls are. The goal should be simple sentences, for example, or goal for people high school students that run a play. An instrument might be what instrument is right for me right. What instrument is right for me, you know, maybe they would involve having audio clips so it’d, be they could listen to them and say: oh, that one sounds pretty good or all that one doesn’t sound so good.

Alright, what you don’t want to do in your goals? Section is talk about general web design. You don’t want to say a goal of my sight is to have a clear navigation. Of course you want to clear navigation right. That’s not really a goal of why someone is visiting your site to go and see how good your navigation is. This is content-based, in other words, what content people are expecting to get out of your sight.

That’s what the goals represent. All right. We spent the longest time talking about this one. The next four parts of this actually go fairly quickly. The second one takes a little bit of time. The third fourth and fifth, one will breeze by so we should wrap this up on Tuesday of next week. Any questions at this point, if you have not already read through the documentation about the project and will finish up that part on Tuesday


 

Categories
Online Marketing

Web Publishing Tutorial: Creating a Custom Grid File

So we can implement a grid system. We’re going to assume we’re using the 960 grid system which comes in 12 and 14 column variations, and it defines 940 pixels of content 940 pixels wide with 10 pixels of gutter on either side of the design now for demonstration purposes will focus in on a 12 Column grid system, but to use a 16 column, we just need to use slightly different values when we set up our guidelines, remember with any grid system online, we’re focused in particular on columns on the vertical lines.

We always want to apply more control and more precision to how our widths are set up than our heights and that’s a main reason for that to get started here. We’re going to go ahead and create our first guideline and we’re going to use those guidelines down the road to guide us as we create boxes and shapes that represent our wire frames. Now, in order to do this, we need to use the rulers in Photoshop and, if you’re looking around – and you don’t see rulers in your version, it may be that you don’t have them active and so to turn them on.

You need to simply tap the command. Our key combination or control our if you’re on a pc, i’m going to do that now and you’ll, see that actually I lose my rulers because they’re already on but command R or ctrl R is a toggle combination. So I just tap it again, and that brings my rulers back now. The other issue that may come up is, we have here a 1200 pixel wide document, its 2,400 pixels tall, and you may have a similar document but you’re looking at your ruler, values and they’re.

Just not matching up now in this case they are. Maybe your values are a lot smaller, though what could be happening is even though you’ve created a document in pixels, your rulers are still up to measure things in inches and any time we’re doing web design. Everything’s a lot easier if we switch everything over to pixels. So in order to do that, all you need to do is tap the command, K or control k.

Key combination: that’s going to open up the global preferences window for photoshop and we’re actually going to scroll down here to the units and rulers subsection and we’re going to check out the units values. Now, I’m all set, my rulers are set to pixels. You can see here, though there are a number of different possibilities and type as well is set to pixels and i’m going to leave both those values.

Just as is so i’ll cancel out of here. Okay with my values, confirmed with my rulers, set up, I’m ready to go ahead and create my first guideline, so I’m going to move my tool set over here on the left a little bit over to get it out of the way, and now I can click And drag from my rulers over on to my document and i’m just going to hold down my mouse or my left trackpad button as I do this and then move this right over onto the document as soon as I release there.

I have my guideline now. If I’m not happy with the placement, I can always move a guideline after I’ve created it. In order to do that, I want to make sure i’m using the move tool which, in my tool palette here, is the very first one. So I can either click on it or I can use the keyboard shortcut v to select the move tool and now I can easily move things around, including my guidelines. So if I hover over this you’ll notice, the cursor changes indicating I can move it left or right and then I can click and drag it in either of those directions.

Now you’ll notice, as I move this guideline, that a little window pops up showing me my exact pixel value for that particular location, that’s a really handy indicator and unfortunately it’s limited to cs6. So if you have an earlier version of Photoshop, you won’t be seeing that value. What you’ll notice, in either case, though, is as I move this even if I’m very careful I’m jumping ahead by four five pixels every time I move my cursor and that’s not very good for the kind of precision work we’re trying to do now, so an easy Way to get more control more precision over what’s happening is to zoom in on the document, and I’m going to tap the Z key to move over to my magnifying glass and because I’m in Photoshop cs6 I’m going to actually click and then drag over here.

Whoop click and drag the other way, and that’s going to allow me to zoom in on the area. If you have an earlier version of Photoshop, you can actually just go to the zoom tool, either click and drag a square over the area that you want to focus on or just keep pressing the mouse button or the left track pad button over the area. You want to zoom in on so now that I’m zoomed in I’m going to just scroll over a little ways here and I’m going to hit V to move back to my move tool.

And now, as I move my guideline left and right you’ll see. Not only can I move it to the nearest pixel, but I’m actually ending up with some decimal values here as well. That’s a little bit frustrating too, because I want to stick to pixels well an easy way to not only stick to integer values, whole integer values, but also to get a little more control over my movement is to hold down the shift key as I do this.

What that’ll do is snap the guideline to the different hash marks on my ruler here so, for example, between 300 and 350, I have four different hash marks, so that means, if I hold down shift, I can go from 300 to 310 to 3. 20. 30. 40. All the way over 250, so down to the nearest 10 pixels, I can move this left and right, which is exactly the kind of control I want for what I’m doing. So. If I wanted to create another guideline, all I do is come back to my ruler.

Click and drag it over and I have my second guideline now the trick is: where do I actually put these guys? Well, I want them in very particular places based both on the 960 grid system. I am based on the fact that I have a document here. That’s 1200 pixels wide well to help us out. I’ve created a document and you can actually download this from the course site in lore. Let’s go ahead and open that up for a second here, so we can see where it is so.

I’m inside of war and web publishing, I’m going to go over to resources to grab this document and it’s the guide placement for 12 and 16 column, 960 grids, so I’ll click on that and I’ll click to download. It’s like I’ve already grabbed it a couple times and I’ll pop it up here. So what this document gives us is the pixel values that we want to use for each one of our guidelines and each line in the document represents a different column, and so we need to guidelines for each column.

In this case, the left guideline is going to be at 130, the right guideline at 192, 10 to 70 and so on all the way down. If I wanted to use a 16 column grid, I would just use the values listed under there. I went ahead and printed this document out, so I have it at the ready and just remember it’s not only assuming a 960 grid, but it’s also assuming a 1200 pixel wide document, and so that’s going to mean that all of our guidelines are going to be Lined up just right so that our web page is centered on this 1200 pixel document.

Let’s come back into Photoshop in fine tune, the ones we’ve already created here. We know we want our first one to go to 1 30, so I’ll hold down shift and move this on down down to 130, and I know I want my second one at nine or 190, rather so I’ll move that to 190. My third one is going to be 2 to 10, so i’ll click and drag hold down shift that snaps to my hash marks on the ruler move that to 210, and my next one is going to be at 270, so i’ll jump over to 270.

Ok, I could keep going just like this and create all my guidelines. Show you one more way to do this, though, that’s available in all the recent versions of Photoshop, and it may be a little faster, especially for those of you using older versions who don’t have the benefit of the little display that pops up and shows me. My exact pixel value as I drag so it turns out. We can create these guidelines using the menu and we do that by going to view up in the menu area here at the top, and we come down to new guide and it’s going to give us two options.

Basically, we can choose the orientation. Remember we’re sticking with vertical, so that’s good and then we simply provide the position value. So I’ve created my first four guides. I know my fifth one has got to be at let’s see here to 90, so i’ll type in 290 and hit ok and there’s my guide so back up to view down to new guide and I’ve created 290. So 350 comes next punch that in and there’s my next guide.

Well, there’s always a way to do things faster and it turns out. Even this can be sped up a little bit by using a keyboard shortcut, and this is actually a good trick to know any time you want to speed up something that doesn’t already have a keyboard shortcut available. This is a really great flexible way in Photoshop to customize the interface so you’ll notice. If I come to view new guide, does not have a keyboard shortcut set up for it, and I know that because to the right here, there’s no key combination as you’ll notice.

On some of these others like, if I wanted to see extras, I can do command H and, as we saw earlier, rulers our command are well. I have no keyboard shortcut for new guide, but that doesn’t mean I can’t set one up and in order to do that, all I need to do is come over to the Edit menu and then come down to keyboard shortcuts from here I can choose my different Menus and I’m going to go back over to view because that’s where the command, I’m looking for libs and I’m going to scroll down and there’s so many different things that can be mapped to keyboard shortcuts.

But I’m going to come all the way down to new guide there. It is and to provide my shortcut. All I need to do is literally click in here and then type the shortcut literally type, the shortcut that I want to use for this particular command. Now the trick with this is because there are so many shortcuts already set up. It can be tricky to find one. That’s not in use now, I’m pretty sure if I do command shift one that that is a available shortcut.

So let me try that command shift. One: okay and if you’re on a PC you can do ctrl shift one to do that as well. I’ll do command shift one. I got no warning telling me that it was taken, but you’ll notice. If I get rid of that and do say command R, which we know is taken now I get a warning saying it’s actually going to replace that old command. So I don’t want to do that so I’ll undo that and again we’ll do command shift.

One control shift: one is a possibility, if you’re on a PC, although frankly you could make this anything. You want just make sure you remember how you’ve set up your shortcut, so you can easily get back to them. Okay, command shift one and will enter in there to save that, and then click. Ok, now that we’re back in our document, we can command shift one, and lo and behold our new guy dialog box opens up.

We can set the position we just did 350. So now we’ll do 370 and we hit enter and there’s our guide command shift. One to create another guide will do 430 and we’ll just go through a couple of these, so you can see how fast this process really can get. And again I printed out the document with the ruler values or the guide values I should say so. I have that right beside me here to speed this up and i’ll do one more okay, so once everything is done, we can zoom back out and we’ll have ourselves the makings of a really good wireframe document with our 12 different columns or if you wanted to You could use a 16 column grid, no problem right about this time.

It’s probably a good idea to save the document, save all that hard work that we’ve put in here and in a follow-up lesson, we’ll talk more about actually creating wireframes and we’ll see you then


 

Categories
Online Marketing

How to Select the Right Keywords I Free Google Adwords Training

So there are tools available to find appropriate keywords. There’s a lot of different tools online that you can use. Google has what’s called their keyword planner. It’s right in Google’s under tools and settings here you come over here to planning and you can use the keyword planner and you can find keyword and AD group ideas.

You can get suggested budgets and you can find you know, search volume and forecast as well. So a lot of times we’ll be searching for a specific keyword or we’ll think. Oh, look. This keywords going to generates a lot of results. It gets a lot of activity, but then later we find out like the search volume, there’s some very low. So you can get all this information using the Google Keyword, planner right under tools and settings here.

So, let’s review the four targeted keyword, matching options to control which queries trigger hats. There’s four keyword match types that are important for you to really understand. If you don’t understand the different types of keyword match types, then you will burn that budget. I’m telling you you will lose money, I’ve seen people, you know waste tens of thousands of dollars just because you know they didn’t understand the difference between broad match and exact match.

So, let’s review the differences between each one.


 

Categories
Online Marketing

Lucijan Blagonić: Moving the design process to the browser

I work together with my brother Emanuel, As you can see from this picture. We look the same so you know we are brothers, We run a small family agency called Blagonic Brothers and our goal was always to optimize our process and provide extra value to our clients.

That’s why, over the years, we were focused on delivering our designs as HTML and CSS templates, as opposed to static images, and this proved to be one of our great advantages in the future. That’s also the reason I’m doing this. Talk for me, it started almost a decade ago with this great book by Jeffrey Zeldman, Designing with Web Standards, and this was during those prehistoric times of the Internet, while there were no rules or guidelines on how to create great Websites, this was our starting point for most of The designers or turning point Mr.

Zeldman preached why web standards Are important and for me personally, this made me a better designer I wanted to excel at building web Standards compliant websites, so I’ve grown quite fast and writing HTML and CSS because it was important for me. To deliver those designs that are both accessible, that works great in the Browser and not just look good and when you’re taking a problem, we want To solve it around the web or on your mobile, we have to find the right tool.

The right Approach to solving that problem, building websites is hard and it Hasn’t gotten easier over the years, most designers spent a lot of time. Designing Websites in Photoshop or Sketch or other graphical programs, but the results of Those website of those the programs are not websites they’re only Representations of websites a static images – and this is not a problem by Itself, but a static image reproduce can often set unrealistic expectations for Overall experience when presenting static designs to clients, I always try to set expectations in Advance so that we can focus on the functionality and not only eye candy.

That’s why I spend more time in code than in Sketch. Nowadays, for example, you can easily test Interactions on a static mock-up: yes, there are tools like InVision or Proto.Io or something like that, but you can’t really test how it would work. In the browser, so you always have Some overhead work that you have to do to test something that won’t necessarily Work in the same way, and there is still no easy way to design for Different resolutions in graphical programs responsive web design.

It’s Still the most natural thing to do in the browser directly and although working With content has gotten easier over the years there are plugins for Photoshop and Sketch, which lets you generate and input dynamic, content and Then test with those, it’s still sometimes much easier. If you want to Test, for example, a really long title to just fire up the inspector change, the Heading and see how that breaks the whole flow of the page and one of the Main problems of delivering static design mockups to developers that we can’t Specify everything we can specify only the visual layer and that visual layer can Often be misleading, our website should be a work of art that can be Put on the shelf and admired it should be a functional thing.

That actually solves a goal we pre–defined earlier for users and if we were to Test, for example, this HTML prototype. If we were to create this website as an Html prototype to test it in browser. We would get two completely different results: Completely different feedback by designing a perfect use case on a Desktop and transforming that on the mobile, if, if you were to choose like low Contrast, tax or or large background images they don’t fit well and the Mobile, we would get unreadable text and maybe the most important call to action.

On our site in this specific case would become completely invisible, and this is Not something we want to do so everything is great when we are at home, I working from our Wi-Fi, but When we are on a mobile connection like edge, then things start To get bad and if you had like this kind of website, That load slowly, the overall user experience with you could pretty degrade or due to poor choices of fonts font, weights or font sizes.

The text in the Browser would not be legible. All the fonts and the static markups Look great in the browser: it’s a completely different thing to do to a Different font, rendering technology and browsers and some basic things like Skipping content sections using the keyboard to navigate to to the site, like I personally do on modals and Carousels and something like that can be frustrating if it doesn’t work, so this is also something that we Couldn’t test in an image and small touch? Targets are usually Evident only on smartphones and tablets, you can’t really design those in Photoshop you can’t really test those in advance and you’d believe that we’ve Mastered the hover and focus states by now, but still designers, don’t design for These things they often forget about it because they are designing only for the visual layer, which is not often deep enough, and one of my favorites is that When I get on this page that uses up a badly implemented parallax effect, The whole browser, on my whole hand, computer chokes, and this is a really bad experience, and these are these are, of course only some of the Things that I see when I visit the website, someone else might see a completely Different thing: we should instead modify our approach to making design decisions.

We should set some fixed ground rules before we start to design and if we Define our expectations before we start to design, then we can tackle these Challenges during the whole process and not at the end and it’s important to Mention that with the average website weighting almost two megabytes, if you want to really keep Performance in mind as one of your main goals, then you have to think in advance after you added everything.

It’s too late. And if you want to create a page, it is simple to use. If you want to think about accessibility. Then that should be one of your main goals. Yes, it’s nice to create beautiful Animations and interactions but make it functional first and polish after that, You will always score points with users if you are creating a functional Interface and designers cannot often get carried away by building animations the That they tend to forgot that the whole the whole website is unusable and with thousands of Available web fonts to choose from it’s hard, not To get distracted when setting type so please keep your readers in mind.

Try to choose the font that that fits the context that fit that fits that the copy That the client has sent you that you can use and although we came a long way with Accessibility, we have good tools, libraries and Resources and accessibility is also very well very well received in our WordPress community as well. This live captions, for example, prove it. This is Still something that we have a long road ahead, designers and developers often say but Yeah but people with disabilities, like those users with disabilities, are only a Small percentage of our whole user base, but this is simply wrong so next time you design that custom Checkbox, you coded in java script with two lines of code: think about how you’re affecting that Something that by default works and if you are making the whole thing unusable for someone else who doesn’t Necessarily use the computer the same way you do and to name only a few.

There are, of course, many more goals you can set. These are only some of the goals I set When I start to design good design can be hard, but we can pull it off by making Decisions and meeting our users where they are in the browser designing in the browser Doesn’t presume that designers need to know how to write HTML and CSS, but it Presumes that they should be aware of how certain things work in the browser They should be able to talk to their team members, front-end developers, back-end developers to work together.

Browser here is really a synonym for making decisions, an actual feedback and usage, and that assumptions I found that style guides. For example, Help transpose the design process from a single point of view to include multiple Perspectives, we talked about earlier, not only the visual perspective and that helped deliver a better experience. Style guides are in a way of changing the way we deliver design.

Nowadays and 10 years ago, we were used to Delivering like different iterations different pages like static PSD’s or Images that what that was okay at a time, but now it’s much easier to just Deliver HTML templates because all the interactions, all the responsive, Breakpoints, all the different resolutions can be can be tested in an Html and style guides builds upon these ideas for helping us define a set of Standards and guidelines, we are effectively building a design system.

That way, and one of the great things about style guides, is that they Are encouraging modular thinking it’s in our best interest to keep things Simple and to reuse things as much as possible and modular thinking is Responsible for the delivery of the building blocks or LEGO bricks, they are a part of that design system and where we once delivered only HTML templates. We can now deliver our HTML chunks.

Which can then be used to create different pages, different variations and They say that one characteristic of good design is consistency. Well, having all components laid out on a single page can help us in making sure that we don’t over do with fonts or Colors and by observing how certain interfaces work and look on their own and As a part of a whole system, we can get a broader perspective on consistency.

And colors and fonts are only an example of that visual consistency. We need to Get right components presented in style guides are by nature self-documented for Example, let’s take up navigation tabs component if you were to See a page where that component is in the hole, noise of other components or different things, then you’d have a hard time to see how that component would work alone. You would not be sure if you can just paste it in the sidebar or use it somewhere else, but when you’re looking at that component, Stands out in the style guide and you’re quite sure how that works? You can see what the modifiers are and You can see how you can actually use it somewhere else.

You know that this is a building, brick You can use to build something and living style guides also referred to. Sometimes as front and style guides combine the power of automation and Templating to to display those styles components in code examples; basically, every pattern we see on the Website is a reproduction, an instance or duplicate or the actual components used. In the project and, for example, if you change the style of that specific Component, even slightly the changes will be visible throughout the site and in our style, get as well.

You have to remember that if the style Guide isn’t updated accordingly, it will become obsolete over time and then we have no use for style guides. But besides automating, it’s important to be able to Pass dynamic data to each module to each component and see how different content Shapes our design, we can’t work with lorem ipsum only I try to define a set Of variables for each component and then pass custom, custom content values that Way I can use that single HTML chunk of code on different places and get Different results and testing long titles or different images is not a Problem and by combining those two automation, Dynamic data we can get reusable code patterns and then generating different Variations is simple because we are always using only one HTML, so what we actually deliver.

Two Designers and developers and clients well a set of rules and guidelines. It’s Much harder to deviate in the future, if you have everything laid out to the Detail what colors are used where what fonts and things like that, but we’re Also, during those components, those building blocks we’re delivering a design system. Components that follow the rules and guidelines we set before – and this is Important, if you want to have the project that can involve after that and This goes without saying, but we we are also delivering examples of different pages.

And different flows, for example, our user onboarding process or web shop check out Or something like that, and since we have automation and dynamic Content already in place in our workflow, then it’s a breeze to Generate like dozens of pages with different forms, if it’s necessary, but we Are also delivering our best practices, our expectations and our goals about Accessibility and usability, and things like that and if we strive to include Our best practices in our process – and this will also reflect in our delivery.

And although style guides can be daunting to start with, there are plenty of tools and resources. That can help you get started, but it’s best start simple and complicate gradually. I found that styleguides.Io is a really great place to start. It holds a different collection of tools. Articles, it even has a podcast and you can see What kind of style guide generator tools would help you in your process, but you Can start simple start by creating an interface inventory? This is basically, in my case, a spreadsheet where I’m trying to document all the Different components and pages I have on a project and I try to list their Basic properties, like names descriptions I try to define naming patterns for Navigation components and what’s more important, I try to take a look of each Component from multiple perspectives, so if, for example, if i’m working on a carousel component, I try to specify what Other third-party libraries i’m going to use to make it accessible and I try to Write everything down and after that you can define the colors font choices.

Different form examples default elements and, if you’re using this is Preprocessor, which most of us are using nowadays, then your LESS or SASS or Stylus Variables is a pretty good place to start. You have already defined all the Important things that shouldn’t be changed and should be only used on the side and now it’s time to display them to others and design. Discussions are Usually, usually much more productive when we can focus on a specific Component as well, where, before the client would comment on The whole page like “, I don’t like this” “, But I can’t explain why”.

He can now also Comment on a specific component and he can see that typography and colors are Only building blocks of that design of that design system and discussing an Improving overall design then starts with the smallest component. First and since you’ve taken a modular Approach, you already have the building blocks and you have to include These patterns in your style guide, but if you really want to keep your style Guides relevant then they should be based on your codebase.

You have to find a way that suits you best to automate the process of Generating and updating those style guides, in my case, i’m using a Knyle Style Sheets. In short, KSS is a CSS documenting methodology which enables documenting Important things like description where it falls in the style guide, maybe we define an HTML example. I can Also include those HTML chunks directly into as a reference in CSS code and this Allows me to generate quickly and without much problem examples for different state of buttons.

Or different things and the best part of designing in the Browser is the thing you can use all sorts of tools from testing from your Browser inspector that is already built in or to third-party scripts and services For example, if you want to test accessibility, you can use this awesome great little. Js library, by Khan Academy developers, you include it on the site and it Highlights all the potential problems, accessibility problems you might have in An HTML, for example, maybe the color contrast Isn’t good enough and you can correct that – and this is not something we could Do in Photoshop, so this is one of the great advantages When you are working with live code or if you are not happy with your page Page Speed score: you think the site could be could be loaded faster.

Then try to do a Few changes try to see if that background article, the Client insisted to be put on the website really helps and benefits the user and You can then use and leverage those results to your clients and stakeholders. To actually make the right decisions, it’s much easier to talk with numbers; And starting with style guides can be hard and implementing this approach into our Own process and existing development process can be challenging, but designer’s Job is not always easy, but going that extra mile pays off and all the good Design can be hard.

It makes perfect sense by designing in the browser I’m able to communicate better with my Clients by designing in the browser I dramatically reduce the delivery time. While also being able to add extra value to the project which the client was Really happy afterwards and by designing in a browser, clients can become a part of that design. Process from the start, thank you.


 

Categories
Online Marketing

Web Fonts – The State of the Web

”, My guest is Dave. Crossland He’s the program manager For Google Fonts And today we’re Going to be talking about the state of web fonts –, what are they, how to use them? Effectively and what’s new, Let’s get started, [ MUSIC PLAYING ], So Dave. Thank you. For being here, My first question is: About why web fonts, What do they bring to a website? Beyond the standard fonts like Helvetica DAVE, CROSSLAND Well, Web fonts really express a certain kind of Feeling for organizations They express a brand And you can have a web Page without a article, but you can’t have a Web page without text You have to have fonts And so a brand at its core Would be like a logo, a color and a typeface or a font, And so web fonts bring The kind of rich design that we have in print Media to the web, RICK VISCOMI And according To the HTTP Archive nearly one third of Websites use a font from the Google Fonts API, So why are developers turning To the Google Fonts API DAVE CROSSLAND, I would say That Google Fonts is fast, easy and free And so on.

Our Analytics page we’ve clocked up over 22 trillion. Font views in total since the service Launched in 2010 – And I think that being on Google’s content, distribution networks, we benefit From cross-site caching, So when you visit the First website that uses a font like Roboto, it’s downloaded and you may see Some latency there, But then on all Subsequent websites, which use the font From Google Fonts, then it’s in a cache And loads instantly across the different websites, We also try and Make it really easy So the font’s API Abstracts, a lot of the complexities of web Font technology from you, So we serve different formats.

To different browsers, For example, with better Compression formats, like WOFF2, only the newer Browsers support those, And so we serve WOFF2 files. To those newer browsers And we serve other Formats to older browsers And then finally We make things free and we have a directory of Hundreds of choices which everybody can choose from Now, of course, if you Want a particular typeface, then it may not be Available in Google Fonts and you would go and license That font for your usage, But not everybody, has the Sophistication in design or the resources To license fonts And I think it’s important That everyone in the world is able to do typography, RICK VISCOMI, So I don’t Know if developers truly appreciate how complicated Web fonts are under the hood.

I got a taste of this when I Was at YouTube a few years ago, I helped change the Default font to Roboto, and it was not as easy as just Changing the font-family CSS style, There’s a lot you need to do to Make sure that it goes smoothly for the users and they Have a good experience, For example, like YouTube users, Are from all around the world, They have different languages. Different alphabets, What are some of the Things that developers need to be concerned about For an international audience, DAVE CROSSLAND International Users face a challenge because the file sizes Of fonts, for them can be larger than just For European languages Traditionally Google Fonts has done a kind of slicing of Fonts into language or writing system sets, So we might have, for example, Latin Latin Extended Cyrillic Cyrillic Extended Greek Greek, Extended and Vietnamese: That’s your current support for Roboto that’s used on YouTube.

We also support Other languages — Hebrew, Arabic, Thai, Many different Indian writing systems And the biggest Challenge has been for Chinese Japanese And Korean fonts, A typical font for Indian languages can maybe be two or three times Larger than a European font, But for East Asia it can Be a hundred times bigger And so we’ve been able to Use a number of technologies, for example WOFF2 Compression which is now a W3C standard this year, And also the @ font-face Css has a new aspect called unicode-range.

Unicode-Range allows us to Slice, the fonts into pieces, dynamically And the browser will Only download the pieces that it needs, So that means that We were able to slice a Chinese, Japanese or Korean Font into over a hundred slices And therefore the Latency of each slice is similar to your European font, This means that the experience Latency is much better And because the Slices are cached across different Domains then the font gets faster and faster To load over time, RICK VISCOMI Custom fonts have Also been used for icon fonts to show images And more recently, they’ve Been used for emoji as well, So we’re moving beyond just Text and on to these other ways that we’re using to communicate, But it’s not without its Own challenges, right, DAVE, CROSSLAND, That’s right! Font technologies are always Improving and evolving And the use of emoji as a kind Of special case of icon fonts is particularly interesting.

I think that there’s a Debate in the web development community about how To best approach this Using images for icons, whether That’s PNG or SVG vector images is –. There are some advantages there. One of the advantages To using icon fonts is that aligning icons with Text in labels is often is a common use case And getting the alignment Onto the baseline of text can be tricky when You’re dealing with two elements: — a text Element and a image element And so icon fonts can Play a good role there.

They also have good legacy. Support because obviously text systems work everywhere. Unfortunately, for Emoji and color fonts that’s a little bit. More complicated because there are Different color formats for different platforms, And so one font file needs To have a lot of data to support all of the Platforms at once And they can look different On different platforms, So yeah emoji as web fonts Is still I think, kind of — is a cutting-edge thing, But it can add.

Consistency – and I hope we see more developments – Of that in the future RICK VISCOMI And going Back to the Roboto at YouTube example: one Of the things I remembered that was kind of tricky Was when we would have font-weight bold in our styles, That would default to Weight 700 by the browser, But our designers decided that It looked best as weight 500, So we actually had to go back. And change all of our styles from font-weight, bold To font-weight 500 And it became kind Of a new way that we had to ingrain into Our style development, But there’s something new.

That’s Coming out called variable fonts, How would they help Address the situation, DAVE, CROSSLAND, Yeah Variable fonts can help a lot. It’s a very exciting. New technology, It’s part of the Opentype standard, which is the font format that that’s Widely supported in pretty much all platforms today And variations allows you To do runtime interpolation between different sort of styles, Or faces within a font family, So traditionally you would Have like a thin weight, a regular weight, a bold Weight and extra bold weight And in CSS you’ve only Had up to nine weights — 100 through 900 With variations, then you are Able to specify weight, 154 and dial in a very specific And dynamic weight You can animate these weight.

Changes using CSS animations And in CSS4 there’s more Direct support for this RICK VISCOMI So does that Mean that every font is now going to be able to be Completely customizable, Or are only a few fonts going To be eligible for this DAVE CROSSLAND Well, it is something that font developers Need to add to fonts, And so in that Way it breaks down the traditional wall between the Font maker and the font user And so variable Fonts create a kind of dialogue between the two, So as a font user, you Can customize the font, but only in ways which the Font maker has provided for, And so that means that you don’t Need to become a type designer yourself, but it means that you Have that flexibility that you didn’t have before And the variations are Not only for font weight, There’s, also font width, There’s slanting And there’s also optical size, And those are all part of The OpenType standard today Optical sizing, means that When you change your font size from 10 point to 70 Point then, the letter forms will actually react and Respond to that change, And so, as your font Size gets larger.

The letter forms will Become more elegant And as it gets smaller They can become more legible, more readable And there’s also all other kinds. Of variations, you can imagine, which aren’t part Of the standard and are specific to each font, Things like rounding and many creative options. Google Fonts is commissioned. To sort of experimental trial fonts from type designer David Berlow at Type Network.

The first is Decovar, which Has a lot of variations which are decorative so rounding Different kinds of serifs different kinds of Stroke patterns And this can be used as a Kind of graphical device, Because variations Can be animated, I think there’s a lot. Of potential there, The other typeface is Amstelvar And Amstelvar is A text typeface and it has a set Of parametric axes which go far beyond Just weight and width and into things like The ascender length descender length and A lot of variations which can be used together, To create more readable text, RICK VISCOMI, I’m Especially interested about variable fonts, We’re going to have to Have you back on the show once they’re a little Bit more established, Then we can talk about The state of them, But where could Developers go if they want to learn more about Any of these technologies DAVE CROSSLAND Microsoft Edge has on their developer site a Really good variable, fonts demo site That’s a great place to learn.

More about variable fonts, There’s also the Design.Google.Com/Fonts articles website, where the Google Fonts team publishes articles about type and Typography in collaboration with the Google Design team And then there’s Also material.Io, where you can get the Material Design, icons, font and learn more about Material Design guidelines, RICK VISCOMI, Well, there you go, The links are in The description so go check them out.

Share your web fonts stories. In the comments below Don’t forget to Like and subscribe so you can tune in For another episode of “, The State of the Web” Every other Wednesday, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]