Lessons

Lesson Info

Examples of Weekly Projects

So let's just take a little tour of what we're seeing on the Web right now. I've seen there are many more trends out there than I could possibly encapsulate into these 20 slides. But these are some trends that I'm seeing a lot big, bold typography and a lot of these banners and ribbons that that hold icons like you see in the top left corner. Here I'm seeing a lot of rich texture like you see in the background here. I'm seeing a lot of our dark wood panel CSI, both dark and light wood paneling. I'm seeing a lot of light effects, like on that blur at the top header here there's another banner or ribbon holding the logo, seeing a lot of decorative typography in our navigation here, using a lot of texture, like the paper here in the center. Seeing a lot of here's a sort of a different variation that this is a clean, angular version. But there's that same ribbon motif. Let's zoom in on a little bit. I'm seeing this ever on the Web, so we're gonna do some exercises that well, sort of approx...

imate that. We're seeing this bull okay, Photography and for backgrounds. A lot as well mostly sing really large background images. I'm seeing things break out of the typical idea of what a Web page has to look like. While usability guidelines say, We've got to go with the F shaped reading pattern, you've gotta have to have a head around the top, navigation on the left and body text in the middle. While those usability trends are true, I'm seeing a lot of people sort of breaking the rules and say, Well, this doesn't look like a conventional Web page, but it's still very clear, very readable once again, even though what pages might have a container, which is only 960 pixels wide. I'm seeing a lot of photography, which goes beyond the boundaries of that like this, which goes this ski shot, which is extending beyond the boundaries of the diff containers. Also seeing really big background imagery, this is ah, website for a potato chip company with a really huge sort of shot of potato fields in the background, also seeing a lot of this sort of stencil effect like you see on the logo. Ah, lot of wood textures and a lot of big trade that I'm seeing is mimicking the sort of things that we used to say that we would see in a print layout. The big criticism of CSS based design over the last few years is that it's too boxy because of the CSS, the inherent limitations of the CSS box model. What I've seen now is a lot of tilt, a lot of angle. Ah, lot of drop shadow. Ah, lot more organic elements. I'm seeing a lot of design, which is breaking outside of the box. Here's another great example of huge background imagery. We're gonna do an exercise based on this one. I thought That's a really interesting layout. I'd like to try something like that, and I'm seeing a lot of great Web design for churches and all the CSS Keller's clearly there. Apparently, there are a lot of churches which are putting a good budget into Web design that they realize that they need to be contemporary. They need to reach out to a modern audience, and I've seen a lot of fresh, interesting design for church websites. This sort of tag that you see in the top right corner is very common we've got some. A lot of decorative trim elements. Three links on the right hand column, this right navigation with big typographical elements. I'm seeing a lot of that as well. Here's another great church website, which has a lot of rich texture, a lot of thorn paper effects. I think that's Ah, this one's a little lighter, More straightforward. Clean navigation, also much wider were really using the physical space of the full browser to get their idea across another great church website. That sort of breaks out of that typical CSS create. It's got great sort of paint and texture effects and that sort of bevel and emboss that letter press effect that you see in the name ST Gregory of Nyssa Episcopal Church. We'll talk about how to do that in photo shop and bring that into your HTML documents. Another great church website that has some great texture off of the top. Great navigation on the right. Bold typography, good use of photography, photography, nice warm colors. Very approachable. Now this one is a little different. Using a watercolor, perhaps we could in our photo color water shop class, we could integrate this somehow. This is for a creative firm but bold bull textures used in the background ref edges breaking up that CSS boxing This a lot of that. That I'm the texture about pinking shears to evoke the sense of fabric, more ribbons for holding logos and a greater attention paid to typography. Big type decorative ornaments. This is almost book like in its field, so we're seeing a lot of visual richness, terms of design trends and then big, bold type as well like this for a beautiful Web. Once again, there's that letter presser in Boston technique and more textures and some trends, like on this ribbon here we see that it has html five inside, so we'll be looking at the new and emerging ways to make your pages. And also another trends and I'm seeing Are these wraparound elements the sort of banner or ribbons which provide the illusion of three D space? The navigation bar here? I guess it's the title bar is supposed to give the illusion that's wrapping around. That's a big trend in navigation. Right now, we'll talk about how to do that. There is again in the PSD to WP it's really not that tricky At first I couldn't figure out how to do that. I looked at a couple of tutorials like, Oh, it's really just a next to triangle, but it gives the illusion of three D pictorial space and transparency as well. Now the trend we're seeing. So why are we doing this? Why are we talking about PSD two html? Where didnt get the name PSD two html. Unfortunately, if unless you if you haven't noticed, you probably haven't and scouring the design blocks as much as I have. But there are numerous PSD two HTML services out there. If you see some of these ads, PSD to WP create pixel perfect code. Remember, Designs starts at $ or goes down to $49. Everywhere I look on the Web right now, these things are sometimes called chop shops or slicing shops. What they will do is for a very small fees are very reasonable fee and sometimes as little as a 24 hour turnaround they will take. You can email them your Photoshopped document or even a J Peg Ping illustrator file, and they will slice that up into standards compliant HTML and CSS in 24 hours, or sometimes in this in as fast as 24 hours. Some take longer, some taste less. There are literally hundreds of outfits out there doing this right now, while $200 seems to be the average summers lowest. $45 I thought was, How could these guys possibly do this so quickly? Now, I've gotten pretty good at slicing at my own designs recently, and I had a project where I had 10 hours allocated for design time, and then the client was going to go there. Development Team was going to code it themselves, and I just had a little spare time. At the end of the day, I just time to myself said how long it's gonna take me to take this PSD comp and a functioning X, Html and CSS. And it took me two hours and was a fairly simple project. But get that. How can these guys possibly do this so cheaply? Well, I thought, well, they might be in a different country where their rates are a lot lower, or they might be a lot faster than me. Either way, The thing that I'm facing and the thing that you're facing to is how can you possibly compete with that? You can't compete on price. So what do you need to do? You need to get really good at it. You need to be able to go from Photoshopped into HTML and CSS really quickly. So the goal of my exercises in the next five weeks is to take our Photoshopped concepts, and then, through a certain amount of repetition and variation, it'll be kind of like boot camp. We're gonna do it over and over again, like assembling and disassembling and reassembling your rifle in the army until you can do it with your eyes closed and because if you can get really good at it, then you can be competitive. So let's take a look at what we're gonna be building over the course of five weeks. So Week one. This is actually based on a real project that I just completed for a client. It's ah, small for a very simple Web page for a small consulting firm here in Seattle. It's a very simple layout, and also on each week there's gonna be a bonus. Not only are we going to go and look at the photo shop document to see how we got the certain light or text effects. And then we're gonna turn it into HTML and CSS in Dreamweaver. In addition, every week is gonna have some degree of interactivity. So this one, since it's easy, a really simple beginning. And after we finish with our HTML in our CSS, we're goingto put a little javascript in the background that just loads a random background image every time the page loads so weak to we're going to do an actual redesign. If you were here for my flash class last quarter, you know that I showed some video of my daughter skiing. My daughter took skiing lessons. That Cascade Ski and Snowboard School. I thought, You know, those guys really need a website update. They teach great ski lessons. I thought, You know, as I said, I was preparing files for this class of that. How would I do that? Different. How would I bring that into the 21st century? So do it for an afterthought that looks a little more contemporary. We've got a little ribbon and then we've also as a bonus, we've got a flash slideshow, which I'll show you in a little in a minute, so that lets build that from start to finish, you get this'll a out gets a little more complex, a little more difficult than what we saw in Week one. In Week three, I thought, Let's try something really different. Remember that loft that I showed you? You know, in my slideshow, I thought, Well, let's make something for Let's make something really big with a big background image Let's make a fictional condo development here in Santa called bad tiled Loss and let's go for that big layout. And he's a big background image and what you see assess image sprites. And I thought, Let's just make it really big. In addition to adding some odd embedding some external video, the whole layout is actually this big, with the idea being that you have sort of a variable with layout that people with small monitors are only going to see what's on the 1st 2/3 of the screen. And people with really bigger monitors are going to see much more real estate. So this will be what we call a liquid layout for Week four thought, Let's do a winery site. And this has some of those trends, including ah wouldn't background and wraparound knaves as well a CSS image rights. And then right here in the middle, we're gonna put a J query image slider. In case you haven't quite figured out what I'm talking about when I say Jake, worry. If you've seen slide shows on the Web recently, they're probably done with Jake Weary. So right there with guys drinking wine, that's gonna be our image. Rotator. You don't need to know a lot of J Query. We're just going to copy and paste some code, but everybody's asking for it these days. Week five, we're going to make a website for an interactive firm, but we're going to start talking about the latest and greatest techniques available to you an HTML five and CSS three. And that means that you see what says vantage, interactive and branding, strategy and Web design. Those aren't pictures of fonts. Those will be actual fonts, so we're right at the cost of being able to embed fonts into our Web pages. Modern browsers can do it right now. It's not exactly it's not widely accepted yet, but were on the verge of being widely accepted. And we're also going to make a rounded corners for navigation elements. So case that's not really clear. The rounded corners. These are not pictures. They're not graphics of rounded rectangles, those air using the CSS three properties called Border Radius so that they will display as a rounded corner rectangle and the fonts will be actually selectable. That's using the at font Face command available on CSS three. So that's it for my keynote presentation. I'm gonna jump to some of those Photoshopped documents to show you what they look like and sort of explained the structure of the class a little bit. So we jump into photo shop. Let's start with Red Clay. Turn that off. So each week everyone who purchases the class will get a chance to look at these Photoshopped files. And hopefully, if I've done my work right that all my layers will be labeled, I'll have to update this one that says shape one into something a little more descriptive header logo will be divided into layer groups if necessary, and one of the first things you need to be doing if you want to start working with CSS and HTML is understanding the destructor, so they'll be a layer on top of these that says, Div structure. Excuse me at the top of the layer stack and you seem a div structure has a header and a knave and a middle and a text and a footer. This is a very simple layout, so hopefully that will be helpful to people as we follow along. And we re create that in Dreamweaver and the convention that I'm following. Here's if it's a main Div. It's in all uppercase. And if it's nested, if it's a day which is nested inside another div, it's in lower case. So sometimes I go through these quickly because, like this one, for example, I'm assuming that I won't spend a lot of time building the entire thing in photo shocks. I'm gonna assume the most people are familiar with photo shop when we have special effects. When we use a filter. When we use a blend mode. When you use some sort of technique which is unique to that particular layout, I'll go over it. I'll certainly field questions. More girls to spend about 10 minutes on photo shop will deconstruct how we built it. We won't build the whole thing from scratch because the most important thing is going into Dreamweaver and building the HTML and CSS. Then we'll go over to cascade here once again. This also has a DIV structure. You can see that it's composed of five dibs, not too complex, the diff called Napoli and UN ordered list for navigation. It also has a big background image. She has a sort of textured, snowboard outfit pattern. Talk about how to build that. See where these two snapshots are. Teoh look like pictures that will actually be a quick trip into flash. We will build a slide show that looks like this and that will also come straight from a separate Photoshopped document, and we'll put that directly into our HTML Documents would blend seamlessly with our background back to photo shop, looking at our lofts. There's our grid structure, our def structure and to make this as real as possible to approximate real world riel world conditions will finish with Our layout will get it perfect in HTML and CSS and then our client is going to say, But you know what we need to add add in the bottom. We need to add a little band around that says Spring moving Special, because at least when I'm finding in the real world as soon as the project is almost done, there's always one more thing and moving along, too. Here's our winery, so deconstructing these little further we're gonna really focus on how to get that wrap around corner effects that we get that illusion of going around three D space. And we're also going to talk about working back and forth between illustrator because photo shop is a great tool. But you can't do everything, and I find when I'm making a logo on some sort of identity work, I have a lot more typographic control. If I build it first, an illustrator, so we'll build us and the vector tool, and then we'll drop it into Photoshop as a smart object, which means that it's still connected. It's creditable and it's up datable. We'll go back to Illustrator will make some changes, and we'll see those manifesting are Photoshopped documents. We'll also talk about CSS image sprites, so we'll talk about using images for navigation and our own ordered lists. And if I turn. That's not what the navigation actually looks like. Let me just turn one of those off. There we go. So we'll talk about taking the regular the regular state of the navigation item, and it's overstate and making those in tow one image and then making them toggle back and forth with CSS. Fancy shot PSD is clean and modern, trying to reflect some of the trends of minimalist Web design. Zooming in on this there's that pinking shears texture that we're seeing a lot. Here's the CSS rounded corners here they are as well. And the great thing here. Vantage Interactive. That's a font called Chunk Five, which you can download for free on the Internet and the one below it is called delicious small caps. It's also free, so I'll include those for distribution where people can download themselves, like, downloaded for yourself. We're going to reuse the at font face command to embed that into our HTML and CSS, so that's actual type rendered in. The browser will talk about the way how that's changing and the emergence of ah, Web safe are going beyond website phones. So that's it for my preview