Fixing a boring web design (Adobe Illustrator tutorial)

Key Takeaways

if your web design is lacking distinctive features looking a bit flat how do you fix it upgrade your imagery this is where you can inject some life and personality in just minutes I'm going to show you how quickly you can create original imager in Adobe Illustrator which will'll use to spice up our layout in figma along the way I'll also give you some principles to bear in mind that will help you with absolutely any project you work on I've designed this hero section in figma and there's nothing wrong with it there's suitable contrast hierarchy consistency grouping negative space good type setting concise and clear copy clear call to action not a lot to complain about it's just a bit nondescript so how would you improve it now a generic thing might be just to throw an image in the background but that could lead to some issues with legibility and things like that but I want you to think more conceptually now when it comes to bringing imagery in and different techniques we can use we can think about [Music] depth and texture so how could we introduce some depth and texture into this layout here to bring a bit of Interest so let's go over to Adobe Illustrator and set up an artboard that is the same size as our figma frame so in this case 1440 by 1024 pixels and then I'm just just going to draw a rectangle by clicking on the rectangle tool and double clicking that is that size 1440 1024 okay and I'm going to align that to our frame here so we've got our gray rectangle we're going to go to effect 3D materials materials and then here you can see it's Lo loaded in all these different base materials that we can apply here like this sort of rip stop Fabric or a gold leaf or all these kind of different things we want to find something that's kind of looks like a rock we've got marble that's okay the idea of sort of texture is interesting there Stone what about this Comet kind of looks like a asteroid or the surface of the Moon or something let's go with that and then we can change some of these parameters here and the resolution how many repeats let's maybe double this so it's kind of zooms out a little bit to 200 and then the color here so you can change this say you want it to be red but maybe let's use the color that we've already got in our background in figma so we'll go back over there and just select this Frame and the fill here I'll just copy and paste Okay so we've got this kind of darker background here and you can play with the ligh in and other things like this but this is pretty good for me now this is a lower res preview we just need to render this out which is this button I'll just click on the drop down next to it turn on Ray tracing and we'll do high quality and then click render and depending on how fast your computer is it will render out this image now I would probably export this and save all my assets separately in a real life web design project but let's just copy and paste it for time so just command C or control C on a PC and then command V into here and now I've got my image in here so I'm just going to use the rectangle the actual image I don't need the frame I'm going to click on that in my layers panel inigma and just drag it into my Geo frame delete that a frame it created click on this rectangle align it perfectly and then press left bracket to send it to the back so now we've added some texture but we have lost some contrast so let's click on this rectangle and just drop that down low you can do press five and that changes the opacity to here you can see the layer pass through to 50% maybe even lower 20 is maybe too low maybe around 30 somewhere like that 25 that's good that just adds in that little bit of texture there um which is really uh just bringing that little bit of uh visual interest to begin with what about creating more interest and and and more depth this is still too generic so what we can do is maybe bring in interest to this composition and create some more images so I want to create some little rocks that are kind of like planets so in illustrator all I'm going to do is just draw a circle so press L for the ellipse tool double click and yeah maybe let's do one that's 100 pixels that's works for me so we've got a gray Circle here and then this material palette is already open so I can just choose something from here like maybe this spotted concrete now you can load in more materials here um from substance Community or or on their their website and everything but just starting with the ones that are here so I click on this one so you see we've got if I zoom in a little bit this concrete but even without rendering you know this is going to kind of look a bit flat so we need this to feel 3D so if you go across to object and then click inflate and then the box here for inflate both sides we have got here a sphere now and there's some lighting on it and there's a sense of depth to it and we can actually drag this thing around play with it because it's a sphere it won't really look any different if we sort of change these these presets it just because of where the shadow is really and we'll keep it on the front so with the lighting we can choose where we want this to come from if it's diffuse if we want it to come from the top left or the top right or from the right sorry but you can also drag this around here maybe let's do it top left and we'll keep that the same and then we can just start to play with the intensity of the lighting the rotation that's moving this back I think let's change that back to top left the height how far away it is and that depends the sort of Shadow it casts and the softness of the light so maybe turn that up and we just select under the lighting menu The Shadow toggle this behind object we can increase these shadow bounds here we see it's going to cut off like that so what I want to do is change this um height of the lighting so I I bring this Shadow right in there and I'm just getting this little bit of more a closeup sort of Shadow so now I can contrl C command C and then command V and I've got my little you can see this the shadow there how it comes in a bit more naturally that can go over this image so let's create some more of these things I'll do one more and then we'll speed it up so let's maybe we want to do a bigger one so this time let's have it as lock the aspect ratio 200 pixels and see what M will inflate the object actually first this time so just click inflate I'm going to inflate both sides um then materials and just sort of see uh what are options here could maybe get away with some of these as looking sort of rock like like the marble it's quite nice go to lighting change it the same top left add a shadow increase the shadow of bounds decrease the height or sorry increase the height angle so it's a smaller Shadow let's render that out Ray tracing High render that's a pretty intense Shadow but so let's just have a look at that maybe the ambient light the intensity or the softness sorry of this lie I'll turn that up okay cool copy that go back to figma paste that in okay so we can start to pull these as a composition so this is kind of a now is going to be more um of a radial alignment around this uh Central Lockup of the type here so we maybe do something like this and what what you start to do is start to put some things in front some things behind we don't want that all the way in the back um because we that's gone within my button there we want it in front of this background texture but we want it maybe behind the type and then what we can do is by doing that have some elements in front and some behind so let me just speed that up for you [Music] this again in my opinion is good and sometimes a graphical and you know relying on typography style is really good and really works for the project but if you want something a bit more memorable and a bit more personality this is the after image and it just has more visual interest to it there's texture there's depth because there's things in front and there's things below the real material is more appropriate to what we're talking about with this client because we're talking about geology we're talking about the Earth we're talking about a real physical material so to bring a bit of that materiality into the design is appropriate here we could go further and maybe add some drop Shadows on some of the type and things like that but hopefully this inspires you not only to just use that technique and illustrator but think about where texture and depth can be something that elevate your web designs let us know if this helped you and until next time happy designing