Brand and Web Design: Create a Visual Language From Scratch

1. Introduction: Hello, how's it going? My name is Tariq Usama, visual designer and my director from Barcelona. I mostly work across digital and interactive projects and also brand design. I thought that's what we could be doing today. If you are a student, you might be wondering who's the class geared towards? I wouldn't say it's for the total beginners. I'm going to be covering a lot of content and I won't be able to cover it all in depth. It's more geared towards young design professionals and art directors who are willing to get some new tricks and inspiration. When it comes to the software, I will mainly using Photoshop, Illustrator and after effects because we will be as well animating the logo. I recommend you have your your Adobe CC ready. Yeah, what to expect by the end of the class, you should probably be able to create your own geometric logo, will be doing that on top of our grid. At the same time, you should be getting a bunch of new, fresh ideas on how to tackle a web project using modern web technologies like WebGL. Let me talk about the client I'm going to be working with. Their name is Paid Toys. It's natural brand from Barcelona and they design these kind of guys. See, they have a bunch of designs that they create them on a 3D software. The goal is they want to sell them so the customers can actually customize them so they sell them blank just like this one. Then the customer should be able to paint them as they wish. Just like this example. Or even this other guy here. It's a pretty cool project so I hope you feel the same way and are willing to join me in this class. Let's go for it. 2. Logo | Art Direction & Sketching: Let's get these lessons started. I will start with the logo. First of all, here I would recommend you talk to your client about what he has in mind. This is extremely important. You don't want to start designing something that might end up being brilliant, but it has nothing to with what he or she have in mind. So that's an important first step. I already did. The only requirement was the logo somehow looks Japanese. Japan is where the word of the [inaudible] movements started, so that's the connection he wanted. It was quite an open brief for me, which I quite liked. So I put together some ideas on Mood Board that I'm going to talk through right now. Hey, so let me show you the Mood Board that I've shown already to the client. What I'm trying to do here is to somehow create a logo that looks Japanese. That looks almost like Japanese kanji. That's when I'll be using these geometric shapes and this color, I'm talking about the red here, which is coming from the Japanese flag. It'll almost right away takes you to Japan. The idea actually came from the unique logo. What I like here is that it's shaped in a square, almost looking like a label and that's something I think I should be able to replicate on the new design. Few other things I've liked from these images, for example, this one, the sharp edges and how minimal it is it makes it very modern in my opinion. Then we'll see a couple of flattering pieces here. This one to the top-left, I very much like because it's still very readable. The one on the right is not so much and that's something we need to be extremely careful on our logos since it's not lettering piece and it will be our brand, so it needs to be super reliable. Hey, so I was starting to sketch how this logo could look like. I'm using a checker notepad, which comes very handy so I can already use a grid on my sketch. I'm also using a marker instead of pencil, so you actually get to see what I'm designing. This is super rough, I'll just do it again so you understand my idea. Basically what I want to do is to somehow use the pay letters the p, the e, and the i and place them within a square to make it look like a Japanese kanji. I'll get started, really rough. Just with the P, something like this. I'm not going to close the P yet. You'll see why later. I'm going to use this space below the P to place the other two characters. This would be the E and the I to its right side. Now let me finish this P. More or less that's the idea I was talking about generating this square that looks like a kanji from far away. We have our logo already. Probably I'll do it later when digitizing, but we'll have to write what's this brand allowed. Something like, they are toys right below. Yeah, I think that that will work. So let me go back to my computer. [inaudible] guys. 3. Logo | Digitizing and Variations: Let's digitalize this logo, I will do it in Illustrator so let's create a new document. For example, 600 per 600 anything you feel comfortable working with, that should be RGB. I will open it up. Here what we should probably do first, is to go to the preferences and to the guides and grid, and set up your grid, so you can snap to it and create the geometric logo we've been talking about. I put in I a grid line every 100 pixels with subdivisions of eight that should probably work out for you as well. I'll click "On" and then this needs to be shown, so show grid, you can use shortcuts to that, I recommend to learn the shortcuts as much as possible. Then you need to go to view snap to grid. This is very important, so whatever shape you would draw snaps through your grid, just like those. See what I mean. We have the document all set up we can start reproducing the sketched with it a while ago. I will start with B again. Like this and then we can go for the E, so more or less, that'll be what we've did before. Things turn out to be too wide, too many spacing here so I'll just pull up down. That's already looking nice, quite like it. Perhaps it's having too horizontal, something like that, I think it's going to work nicer. Good, so we've already created the PEI, the P-E-I. Now, as I mentioned before during the mood board, it'd be nice to somehow place it inside of a label so I'm going to draw a square around it, something like this that I will cut and paste to the back of it. I'm going to change the colors of the PEI. Something like this, so now it's embedded. I think I probably need more space between the characters and the and the edge of the label. Something like this should work. I'm going to make some room here that at the bottom to place the art toys as we've done before. I'm going to type in Art Toys here. You can choose any type you like, I think I'll go for the [inaudible]. Perhaps the GT America which I have a lot of weight, so I can see what works best. I think the extended bold would be great for that. I'm going to open up the tracking. Something like this maybe, I think that should. Perhaps you can work it with less tracking so it fits on the grids. Say something like this. I think that works. Then thinking about color, we've mentioned before the red, so I will turn this red, I've selected shade of red awhile ago. See if I can pull it back. It's not here anymore. Well, never mind. Just going to use a red like just for the exercise. I'm doing this pretty quick. I'm going to work out on secondary rectangle below for the choice, so I will copy, paste on this one. This one I will make black so then the art choice inside needs to be white. This is starting to look like we're getting somewhere. I do have too much space right below the characters, so I will fix that. Actually think I have too much space on the edges. Anyhow, so perhaps I should, well done. I will expand the type because I think that's already working. Now I will focus on fixing the spacing like this. I think that's our logo. Perhaps it looks a little bit flat to me, so I will try to place it in some flat shadow right behind the P-E-I and see what happens. You pull back the agreed to use the Pen tool something like this, to create the shape. Now I pull it to the bottom or hope I did do that right I think. Let me work on the red first so it's a little bit darker. Something like this will work. Now I select both shapes and past it below, so, I think it could even be slightly darker, something like this starting to look like a nice logo. Let me fine tune it a little bit but I think with this we are good to go to the next part of the lesson. Now that we have this first approach to our logo, there's a few things we need to take into consideration, few variations of it. How is this going to behave for print, for online? How is it going to work only for one ink on positive, negative, force more formats as a lot of stuff to take into consideration when it comes to branding. Also nowadays we're getting to see more and more dynamic identities that are becoming part of a system, even responsive so that it's making it a bit more complex, but definitely a lot of fun. I will be recovering some of it now. I will clean up this logo a little bit so it's actually ready for print. First of all, I'm going to convert it to CMYK. I can do that from file document color mode, CMYK color, good, so that would be an essential first step. Then what I'm going to do, I have this P-E-I characters that are actually compounded by several rectangles. I want this to be just one, so I will unite this using the Pathfinder. Then I don't want this two red colors to stick to each other, so I will copy this one, I will divide this red, so we just have this shape and I will paste it again. Now we do have two isolated reds. I will do the same with this guy here, which I will divide here using the Pathfinder again and then I will just pick up the pay logo and put it on top. I will cut it and paste it in front and then I will do the same with this shape here, I will divide it just like this, see. Now this logo is ready for print. Let me now tackle some of the logo variations I did four payout choice. This is the logo you've seen already, that's the default one, and it's the one I'm encouraging the client to use as much as he can. But of course, if you might want to use this one on top of a very dark background, perhaps you're going to lose this black box here. You might actually want to use something like this, that's the negative logo on one ink. Any would lower needs to work in one ink, I would say in both positive and negative. You might want to give your client flexibility on how to use the logo in several applications. Perhaps he wants to use it as a watermark, that's something that might actually work better. Logo could also work for small formats, like on social avatar is a mock up of how could his Instagram be. In this case, we would lose the art choice below the pay, just because it's going to get way too small to get readable on the Instagram timeline, so that's something to have into consideration too. For last, which I'll be covering in the next lesson, we'll could even animate this logo to give like just more richness to it. That's what I'll be covering on the next lesson. Stay with me. 4. Logo | Animation Tricks: Good, so let's animate this logo. I'm still in Illustrator. What I'm going to do first is prepare the file for animation. I do animating in After Effects. You will see that happening in a bit. First of all, I wanted to have these characters separated individually in different layers, that's what you see here. I have all the p under one color, I have all of the e's under another color. See if I remove some of it. This is going to allow you to have more versatility when you jump into After Effects to animate. Let's do it. I'm moving into After Effects. I will upload the file we've just seen here. You can upload it as a composition, that should be better in this case, so let me go into it. Here you can see all of the layers. What you want to do now is to convert all of these Illustrator layers into shape layers. This will give you more versatility to animate. You're going to be able to use some plug-ins that I will be talking about it later. If you actually do this tab, you should be able to place in some strokes, gradients, so that's actually a must here. How I'm going to convert these into shape layers? I select them all, I do right-click, and then you go to Create, Create Shapes From Vector Layer. See, you've got all of those layers duplicated. Now what I'm going to do is get rid of the old illustrator layers just like this. I erase them, so I have the same, but as shape layers. Next, this is probably a little bit too small. This 100 percent is the resolution I was working on Illustrator, so I think I'll feel more comfortable if I do it double size. In order to do that, so all of the layers grow at the same time, I'm going to use a new object. I will go to Layer, New, New Object. You see, it just came to the top of it. Then I'm going to select all of the layers, and I'm going to use this spiral here and drive it so I can parent it to the new object just like that. Now I should be able to transform all of these layers at 200 percent altogether. Exactly, just like that. Now I'm just going to open up the frame, I think I'm going to use the 1920 and 1080, so video friendly format, background color white just like this. This is the way this is set up to start the animation. I've animated this logo already. I will just very quickly go through how I did that and what was the idea behind it. Basically, I just wanted to have it growing from 0-100. Then I wanted to have this character appearing and this lower tile with the Art Toys bouncing until the end. I will play it for a second for you. It will look something like this. See? Of course, this didn't happen right away. I've tried several iterations, so I think you should do the same. I wanted it to be really quick, to happen within three seconds max, so I'm pretty happy with the result. I don't have enough time to go through it all, but I can give you a few tips that might actually come handy. One of them, it's just very simple. It's about using colors to which character belongs each layer. That's just very handy and it's very visual, so it makes animating way easier. That's something I did here with all those colors. Then I'm going to talk about a great plug-in. It's called the Mt. Mograph Motion_2, your animation wingman. Basically, what it allows you to do, I'll put it in from the menu, is to work on the is-ing, the is-in, is-out, so you don't have to use the After Effects default, but can actually work on something more elaborate. I haven't been using it for that long, but I'm already in love with it. For example, here on the text on this black tile, I have been using it as an is-in and is-out, but as well I think I have used this excite or jump. I don't remember at the moment, but just give it a try. It allows you to get more richness and detail into the animation. Perhaps I can just grab this composition and I will precompose it, because now it's just looked coming in, but I would like it as well to come out. Of course, you don't need to animate it all over again. A good thing would be to precompose it, so we're going to call this IN and then going duplicate it Control-C, Control-V. I'm going to rename that, I'm going to call that OUT. I'm going to make this composition instead of three seconds, six. I will just slide it to the end. Now what you will have to do is to right-click on the OUT composition, go to Time and just Time-Reverse Layer. I think that should work. Let's see how that works. Spot on. We now have it coming in and coming out with very little effort. At last I wanted to talk about body moving. This is an After Effects extension that basically will let you export your animation into a web format like an SVG animation. You can find it under this URL. I use it a lot and I really recommend it if you animate stuff that will end up on the web. Back to our project, I was thinking we could use this logo animation as a three-second preloader. We want this to be not heavy, so it's good for performance and that body moving, it's going to allow us to do that. How are we going to use it? The first step would be to make this canvas smaller, probably because it's way too big. Let's see how that works. That should already be better. I will open the body moving which you can find on Window, Extensions, Body Moving. Here it is, see if it loads. Our composition, it's already the one selected, which is the preloader. Here you can choose your settings. In this case, it's enough to have a demo. All I want is an HTML to show you how this will look online. If you are working with tags, you might want to click on Glyphs as well or any other setting. But in this case, that should be enough. I'll click on "Safe." Make sure you have the player, I already got it, and that's the destination folder. These files will actually end up on my desktop. I will click on "Render." This is super-quick. Already done. Let me go to my desktop see if we find them. Here they are. That's the demo.html and the data.json. I will now open this demo for you. This logo we've been working on, it's already code, so we could use it right away. It has a preloader, of course it is smaller. This is how body moving works. Hope you give it a try. 5. Web | Interactive Art Direction : Good. Let's get started with the second part of this lesson, which will be focusing on web design mostly. Here what we want to do is to create a brand new visual language from scratch. PEI Toys, it's new brand, so they don't have anything when it comes to typography, color, layout so we will have total freedom to create that and we're going to be doing this using the web, mainly designing for desktop. I don't have the time, I'm afraid to design for mobile at this time. But of course, there are some thoughts that you already should have into consideration on your design flow for the whole responsive. This visual communication should work for the web, but at the same time, it might work for a new catalog or for some social media posts or for some stationary. So let's get started with this web and perhaps on our second phase, we can even be able to design more stuff. I would also like to talk about the creative opportunities that this project brings us. The toys have been designed on Cinema 4D, which is a 3D software. So we do have the mass as three pieces. Each toy is composed of three pieces that we can export as an OBJ or any other format that we can implement into a web browser. We're going to do that using WebGL, which is a JavaScript library that allows you to create and to implement 3D graphics in your browser. So let's get started with some direction exercises. This is how I would usually start my process. The way I would start a project like this is with a blank document that I would start filling in with all ideas, UX visual design, typography, interactive ideas, some references. I would start to structure it and this will eventually end up as a presentation that I could show to my client. So here's this document that I already filled in and older a little bit. We can very quickly go through some of it. First off, I tried to structure the website and how that would look on the menu. So we will have six pages, including the homepage. Second one will be the toys. The third would be the feature artists toys, which we'll call collections and then we'll have the fun gallery where the user will be able to submit the toys they have customized. Then we have the about page and the contact page. Perhaps we can have a look at some of the creative ideas that I have for this web. On the landing, for example, which should be a dynamic landing so the client can keep on updating the picture if there's like a new collection coming in, for example. We can have an h1 that could be interactive and we could use variable font for that. I'll just show an example of what I mean. So that's an interactive variable font. You see if I go from left to right, it changes the shape. In my case, I think it would change the weight, so it would go from from light to black, most likely. I think this should be fun. At some point on the homepage, I think it's going to be pretty cool since those have been designed on 3D to export the PNG sequence so that we would confirm with a scroll. Just I have a reference for that I think it's going to be much easier to understand. It will just add some richness to this site. See, I'm scrolling down, that's probably a PNG sequence and especially this part, I like that you keep on scrolling but the pages is there stuck and you just see it changing. Of course that should be 60 frames per second and we need to see whether developers, if it's viable or not performance-wise. Perhaps I should jump to the product page, which will be the place where to display the main toys, the blank toys, the toys that have not yet been customized by any artists. So here what we will do is use WebGL since these toys have been having created in 3D and each toy will have these three pieces that I was talking about. We will be able as a user to spin these toys around in 360 and to change from toy to toy using some nice transitions. I have a few ideas here that could actually work as well. Let me open. This would be for the toy transition, which I quite like that it's pretty seamless just like these references, we don't need the toy to disappear from the up side of the page or from any of the two sides. It just can happen like seamlessly in the frame, just like this. I think that's going to be pretty cool. Then we could add some effects. It's this super-cooled page. Just some effects, camera effect on top of the toys, just some interactive effects to add some richness to it. Even on the transition from toy to toy, we could use some glitches. I was looking at this photomosh.com which is super cool. It is well a WebGL based platform. So here I can choose some picture just as an example and I can data mosh it in several ways. See this one for instance, I quite like. Perhaps that could be a start for our transition, you can actually tweak it the way it's better. That's of course something that we will nail down with the developers at the end of the process. But it's good before actually starting the development phase that they already know what I would like to do. Then perhaps I can talk a little bit about typography since I think this page will have some. I created, well, it's not a [inaudible] yet, it's more of a folder of stuff that I like. I was thinking of an h1 using some pretty weak condensed typography features like these or even more like these. The other one is probably bit too extreme. I also like this distress effect, this texture inside of the typography. So I think that will really work great for the titles. This is what I meant with the variable fonts with the growing weight. Then for the rest of the topography, well not for the body copy, but I'll have some small subtitles. I've been looking at some references where these small subtitles are actually spread out, like here on the left side. They're really spread out one from each other or even here like having these small type and just some HUD spread all over the page. I like this. I think it gives them tech edge that we need for this project. Even something like these, small typography in these small details that just make it a little bit more edgy. Same here. I've been collecting these documents too. Even this one, I quite like it as well some of the typography to be upside down. I also like the pink as one of my primary colors. We'll see that later. Back here, there is something else worth checking? Yeah, perhaps on the collections page, I think that will actually be a horizontal scroll just featuring all of the collaboration toys. Perhaps by using the mouse, we would zoom into, this is actually not zooming in, but you see what I mean. We could zoom into the toy so you get to see more of the details. Actually your mouse would turn into a magnifying glass. I think that would be pretty cool. I also have some animation reference here. See how these products are coming in. I like that they're not coming all at once, but they do that consecutively. That's pretty nice. Okay guys, let's move on to something else. Guys, I just wanted to make a point here about UX. I won't be covering this phase in this lesson, but it is extremely important that before actually starting with visual design, you sign off a UX document, also called the information architecture document. You have to sign it off with a client before starting with the rest so the structure is very clear. That's going to save you time later on, and it's the best way to stay productive. 6. Web | Setting Up Your Document: Good, so I will get started with design. I will do that on Photoshop if you guys feel more comfortable using Sketch or Adobe XD, Figma, any of those go ahead. Software shouldn't be in any case a handicap. I will create a new document which I will call Home page. Let's make it a web document, so it's already an art board. I usually use these web medium resolution, which is 1440 times 900. The background, just make it a little bit gray, just like that. That's our art board. If you don't have much RAM memory on your laptop, perhaps you can work without art boards and just make it an art board if you need to at the very end, that should be possible to. First step, I would say to create some guidelines. I would usually start with [inaudible] aka 12 columns grid. That's a classic and it should work pretty well for web design, and any resolution. I will start with that and see how that looks. This new guide layout properties on Photoshop are great because you just need to introduce the numbers here and it gets created automatically. Perhaps, I'll use this 24 columns, and that would be the baseline, which in this case is made out of 10 pixels. For mobile, that could change to a bit less, maybe I think eight pixels would be great, but for desktop, I'm good to go with that. Now that we have the document set up, I'm going to work very quickly on the shell, these common elements to all pages. That's going to be our menu, which I will place to the left side in this case, and then we'll have a call to action to the shop and I shall button. Let's focus on the menu first, let's call this shell, inside the shell, let's called this menu. We already have this white background and I'm going to pull in the logo from Illustrator. Let's make it 60 pixels width so it fits on that layout. I'm going to paste it as a smart object. Yeah, good. Then I would hamburger menu here on the middle. I did prepare that asset already, so we don't get stuck in basics. Let's name these files so later on we don't have to go through it. I'm going to menu, good. At the bottom of this left navigation, I'm going to use the languages. In this case, they are going to be free languages. I will use the type tool that will make them black, something like this actually. It's already on the typeface I wanted so that's great. I'll be using the fabric mono, and then I will need this in English, Spanish, and Catalan, yeah, just like that. Place it here, and let's say English could be our default language, so that could be selected. We already have this left navigation which I think it looks, perhaps a little bit too cramped. I will actually make it slightly bigger. If now it's 60 pixels width, yeah, I'll make it maybe 72 in that width. Then just place them out of our guide here. I can fix this so it's aligned to the middle. This one, it's very bigger. Let's make it 72 pixels width like this. Yeah, this is looking better. I think we have our left navigation here already. As you've seen, I just broke some rules. I just placed in a grid that I that I just broke. This happens sometimes, don't be afraid to be to break the rules. The guides are just there to help you. Okay. 7. Web | Design Breakdown: All right guys. So as you can see, magical rarely happened, in this document. I have most of the pages already design. So let me do a little breakthrough and we can somehow analyze each page. I will get started with a homepage, some of the ideas behind this page I've already described before on that document of inspiration. So basically, what you see here is the left navigation you are already familiar with, and this is going to be the landing. So we're going to have a dynamic landing, where the client is going to be able to change this picture anytime for another one. So that could even turn into a slider, and then we'll have some, common elements like this. Do it yourself, toys, which will be variable and interactives as we've seen before. I have other as well a quality stamp, that I can show you here in a little bit more detail. Just to add a little bit more of craft to this homepage, and some other elements here that will be common to the whole website, Jagadish the shop now button, which will be an external link to a Shopify page, where you will be able to buy all the toys, and then we'll have the share on hovering, the social icons will pop up. So these basically the landing. Let me go to another page, yes, that's the menu, when you click on the hamburger menu, this menu will display, and here you can navigate the site. So we have these five categories that we've described before, and the idea here is that I'm on harboring any of these categories. The image on the right side could actually change as well as the colors. Perhaps here, it's a good place to start talking about typography, I'm using this condensed semi volt sans-serif for the titles, which I really liked. Then I will be using these monospace one for the little copy, not for the body copy, but for the subtitles. When it comes to color, I've introduce this pink. I did actually a pallet of three colors, which we can see on the next page, which is this one. So I would like to associate each of the characters to our color. So for example, this Hubert guy, could come on the green color, this guy called Western, could come on the pink one and the spiky one, it will belong to the orange one. This is the page with this fried before, where the characters will be in 3D, so the user will be able to spin them around in 360, and by using your mouse, you will be able to transition from character to character. By the way, I just realized that probably need some UI indicators, so you realize how many characters you are scrolling through. Good, so let's move through another page. Yeah, this is the collaborations page, so the feature artist will be this page. So this will be a horizontal scroll, just imagine a huge strip of toys that will navigate from right to left on scrolling. In this space there will be several collections that you will be able to reach quicker by using this indicator above. Yeah, so the above page, it will actually have a more editorial magazinish look. So I will first introduce what is paid toys have out. On scrolling, I think this character will actually be a PNG sequence, so we can make it spin around. I think that should be fun. As you can see, I've introduced another typography here for the body copy. Usually, I don't use more than two typography, but that's something you can do if you feel comfortable with. So don't be afraid to use more than three typography, in this case, I've used a san-serif nicely optimized for web, and I'm justifying the text just because I like the layout, as you can see, is [inaudible] at the moment. So let's see what happens with the actual texts. So once we've introduced pay toys, we can just describe, that it's actually composed of three pieces. The ones you see here in this image could be an animated GIF, unfolding the three pieces, and this, just copy describing the section. It would be part of the same section, just something fun, I thought we could be doing something, kind of Max Schott with these two guys that look pretty bad ass. So I think that's fun. Mix them up because you can actually mix up your toys which should be pretty cool and to finish up, we will focus a bit more on the process on how the toys are produced. So I would like to explain these in five steps on this layout. Just very little information people doesn't really read much, and perhaps we can enhance that, and an hovering any of these pictures that could be an animated video loop. Perhaps a couple or two seconds. Then we will talk about the packaging. This picture doesn't belong to pay toys is just a reference. So the client knows how we could actually display that. So there're direction of photography, and finally, we will briefly talk about Robert, who's the artisan, the guy behind the toys. So I think we can have three free-form here depending on why would you like to reach pay toys, future general message could be this one. But perhaps once you become a feature artists, you will click here and another form would pop up, where you can actually type in your portfolio. Same with if you wanted to submit your final, perhaps there's even a button, so you can actually upload it and submit it. Then your file will go directly to the client. Good, so that's it for this lesson, see you in the next one. 8. Production Tips + Conclusion: Guys, now that we have our designs for desktop we should probably start thinking about the rest of the responsive flow. I would usually get started with mobile and after that tablet. It is good that you sit down with your developers as early as you can in the process so you can start talking through what ideas you have in mind. I call this a development kick off. I think it's extremely important so you communicate your ideas as well when it comes to animations, scroll animations, it could be based transitions. After all web projects is a collaborative project. You need to try to help your developers as much as you can. Be super tidy with your file, the way you name them, the way you name your assets, the way you group them, the way you deliver folders with SVGs, with images optimized for good performance and so on. There is also a few tips that I would like to give you about production. Some plugins that I actually use myself or Photoshop or for sketch like Zeppelin or Avocode. This is great because the developer can inspect your files and be more accurate with the way they implement the front-end design. You can even make some style guides actually by using Zeppelin which I think it's much of a time saver. You can put in this color style guide, the topography style guide. That's something the developer definitely would like to know from you. This is it from me. That was my class, I hope you guys enjoyed it. I'm very much looking forward to see what you have designed, hope you are willing to share it. I will make myself available and and try to reply to your comments and help you as much as I can.