How I approach designing a website - my thought process

Key Takeaways

hi there my name is Kevin and in this week's video I'm going to explore how to design a website with Photoshop so stick around okay so I'm really excited about the video this week guys this is something that I've been wanting to do for a while uh if you have been following along you'll probably notice that most of my videos have been about development and the coding side of things and not so much on the design side of things very much so this is a big deal for me because I am a designer and I teach mostly design the program I teach is computer Compu Graphics Photoshop illustrator in design a whole bunch of stuff uh there is some coding and stuff in there but the main reason I started this channel was I love coding I enjoy coding I only really teach the entry level stuff and I wanted to be able give myself an excuse to push the boundaries more and I thought what better way than to make videos so it really forces me to keep pushing and keep learning and it's a lot of fun but I'm still a designer at heart I worked in the print industry for 5 years before I did any web stuff whatsoever design for me is something that's is really important and I started this Channel with the slogan type thing I came up with was let's learn how to build the web and how to make it look good while we're at it and I haven't been talking enough about how to make it look good while we're at it I think it's really important that the web looks good uh it should be functional function is number one but if it doesn't look good people aren't going to get to enjoy that function because they're go well that's ugly in the leaf we don't want that to happen so I want to introduce you to how I design websites the my thought process going into it the whole thing was going to be really long I sped the whole thing up uh to 300% the actual speed and I narrated on top of it I when I did my original narration what I found was I wasn't really uh explaining my thought process I was just explaining what I was doing what I want to get across with this video is the thought process I'm putting behind things why am I doing that why am I putting space up there why am I putting a button there why am I leaving in why am I overlapping things the way I am whatever it is I am using Photoshop in this uh I am on a PC as you probably know if you've watched my other videos so sketch isn't available and I Know sketch is the big trendy thing um there is also Adobe XD and sadly the PC version is still behind the Mac version I've played around with it a bit I'm not super comfortable with it I want to learn it more but I keep getting frustrated and then I see things you can do but I can't do it maybe they've updated it since I last tried it I'm not sure but for now I'm still using Photoshop so yeah before I even get into Photoshop though and part I'm not really going to get into too much detail with it's one thing my students in class don't like very much and that's the the design process a little bit um so you know this type of stuff drawing out your thumbnails or your wireframes or whatever you want to call them people don't like doing that but it's important so this here let just hold it up a little closer is some ideas that I had um along the way just some things I was doing I've did a bit of that uh and then I sort of had some ideas and actually got out my book I have a little book that if you look can you get it the exposure is really high in my camera has those little dots so it just makes it easier to follow a grid I don't like using a ruler stuff like that so uh this one is the site that we're going to be doing um so it's going to be for a band like a a music site type of thing so I just sketched out sort of the rough layout that I want to be following here so there's the main just typical header hero section here uh we're going to have this about section where it's going to have a nice picture and then here is going to be some text and then these three are the band members so I think that's going to be cool that they're sort of overlapping a little bit uh we'll have a music section here with the albums another button where you can I guess get to buy the music this is upcoming shows right there and then just a simple footer down at the bottom and I did do a mobile version here just to give myself an idea of how I want it to sort of transition from from one to the other cuz I'm not actually going to design this in Photoshop my photoshop's designs always the most complicated one and if I had a client that really wanted to see all this sure then we could do this but um I'm just designing this and then I know how it's going to break once I start doing it the other thing is I am going to be building this site after we design it in bootstrap so yeah that should be a lot of fun I've had a lot of people requesting sites for bootstrap uh but enough of that you don't want to hear me talk about this anymore you want to see me designing CU that's what you came here for let's just jump into it and look at how I do all of this in Photoshop okay so here we are in Photoshop and as you can see uh I am using a template for this I got the template from hacker themes I'm going to include the link in the description below it has all the different sizes uh extra small small no sorry small medium large and extra large there is an extra small now with food but anyway the I'm only going to be using this big one I'm turning off all the other layers cuz I don't want to be designing on those I only want to be designing on this one here I like having these types of templates just where I have an overlay I can see the columns really easily here just to show you I have already picked out my pictures that I'm going to be using and I've already picked out a bit of a color theme mostly focusing on the dark CU I want this to be a dark website I'm doing like a rock band It's You Know music and all of that so I was thinking red it's sort of an aggressive is color plus just those dark colors it makes me think more of the the style that you know it's the first things that sort of came to my mind um so here I'm just putting in my nav bar I was having some trouble with the color oh and just really fast um I'm changing here the proof setup just make sure if you have this set up the same way I'm setting it up um you want to have the proof colors on if you choose a color and it's the colors look faded just make sure that your proof is on and that your proof setup is to monitor RGB um the fonts I'm using are two different fonts that I've picked from typ kit so I picked this one just cuz it looked sort of grungy and Bandy and rock band style so I like that one it's called Banshee and the other one I'm using is Mr EES it's just a really nice clean font um with the one kind of weird font that I'm going with I wanted something really clean something really easy to read that would be for most of my text kind of a NE font that just looks nice and with the other one getting the the style across more so right now all I'm doing is playing around with the font sizes a little bit just to try and make it look good I wasn't super happy with how it was looking at the moment but I do come back and revisit this uh shortly just because it it there's something going on I was trying the all caps making it bold or less bold um it wasn't quite working but um I said you know good enough for now I made my group called it navigation put it underneath you know organizing my layers nice and properly I like changing the color of my layers just to keep organized uh and now I'm putting in my main background color that I went I started with this really dark one but I end up changing it a little bit cuz I didn't like the purplish purp purplish of it um once I started working with my imagery I really wanted to go with this red and blackish type of thing I find a lot of the time when I do pick my colors it's especially at the beginning I have the ideas of the colors I want but they do end up changing over time don't be scared you know you come up with some colors you like your colors you can go through and change them after there's nothing wrong with that right now um as you can see up above I didn't like what my Navar was looking like I changed it uh I liked it a lot more once I switched those colors to the the new colors I found now I'm trying to do is just set up my hero image um I believe I'm going to make it black and white there we go because I didn't want the colors coming through um and I just wanted a nice simple image that I could use something that doesn't stand out too much I'm going to fade it away a little bit and the idea here is just it gives you the feel it has the band atmosphere it has the band feeling to it it's going to be a nice visual but the text on top of it is what's going to stand out more so I was just trying to fade this away a little bit make it more of a background image something that isn't as noticeable so um and then I'm going to plug my text on top I'm going to use uh or I'm going to organize my layers and then I'm going to bring the text on top when I'm dealing with my text a lot of time I'm just going to copy a layer over like I did there and then reorganize um I really wanted to use this font as the one that stands out as I mentioned before so it's going to be whenever I use this except in the logo e area it's going to be big it's going to be in your face a little bit just like the music you know it's rock music it's more aggressive it's in your face all of that so I wanted that to be coming across through the font and through the the style of what that's doing and I was just looking for a music um lore myum generator I got the I put Rock ipsum and it came up with the rock uh so then anyway we end up finding one I got a Metallica so it's just some random Metallica lyrics into Lura myum just to give myself some text to play with um this text especially in the hero area should be easy to read should you know the person sees the image or the main hero area here they see the the text should grab their attention and then not a lot of text just a little bit of text they're going to read it right away they know if they're sticking around or not and then a button like you usually see that's just going to be getting them to go a little bit further down on the site the main thing here is what's you know what's the person going to do we've got them if we have their attention they're going to skim through that text and hopefully they're going to click listen to our music that's I'm assuming what they're here for um so I'm just trying to organize my layers once again every now and then we take a little bit of a pause as I I reorganize my layers it's important that you try and organize your layers as much as possible if you are whatever software you're using really um especially with websites if you're designing a website it's really easy for the layers to quickly get out of control um with this now I'm coming into that area where I wanted the two columns like 50% each one of them is going to be a big picture the other one's going to be the text and as I'm doing most of the time I want to get big IM I want things that really do grab the attention I'm going to put the title on top of this after twoo so this big image should be grabbing your attention it should be attracting you to that and then it's going to say the about so your eye sort of is brought to that area and then if you are interested in it you're going to your eyes will sort of glance over to the text after I'm really trying to lead my the the person's I wasn't happy with my first picture so I switched out for this one um but yeah I'm trying to lead the person 's eye so the eye is going to come down if they're scrolling down from the top as soon as they get here the their eye is immediately going to go to the image no matter what I try they're not going to read the text right away um but and then if that gets their attention they will then look over at the text um so you do want to be thinking about these things as you're designing things what how are you getting them to look at the next sections of your website is there something that is grabbing their attention is there something that they should be looking at at um what's going to lead them from this section into the next section to keep them scrolling you know you want them to stay on the website um so and now I'm just sort of taking the time to to organize it properly looking at the grid that I had um yeah so just how how are you leading them so that's the idea with this next part that I'm going to do in a second to um I'm going to bring in my three artists so we're going to see that in a second here once I once again organize my layers here so um yeah don't have much to say at the moment here we go so um as I'm just going to build one of them I think and then I end up just copying it over so the idea here is I want these to overlap just a little bit with the the the about section because it is a continuation of the about section really so I have my about section and then it's going to be the Three band members and you know there could be more but in this case I'm doing three band members so because they're overlapping a little bit it is pulling the person from that about section down into the next section or that's what I would hope that would happen anyway um so they're re they see the about section even if they don't end up reading it even if they just got to that picture then they see this overlapping thing there's going to be three pictures there that might pull them down into the next section I also want to put a bit of emphasis is here on my my text once again um so um trying the colors the red I was going to use the red and I was trying that other font but it really didn't work so I switched that back out um and then I just started playing around with it a little bit looking at the font weights font sizes things like that I was going to go with the red but I found that the red didn't stand out enough and the white the lead singer part even though it's smaller stood out to me more because it's higher contrast the White and the the white and black is higher contrast than the red and black um and be careful when you're using red and black it's actually a harder one to use than I thought I changed it maybe I left it red now that I'm looking at it I will change that to White if I don't end up changing that after I find I don't like it too much right now looking at it um so these three pictures will help lead me in I'm just trying to find a good picture to be using for my drummer um and so now is just the fun part of just trying to organize my layers properly again um and name my layers properly and all of that and again I can't emphasize that enough you want to be doing that as much as possible I think now if I remember yeah I'm going to play with the OPAC the color of those I want to make those darker there we go I I knew that the white was standing out way too much um so I just lowered I made them a little bit of a light gray instead just so they're not popping off in the same way that they were popping off before um my artboard wasn't big enough so I'm just dragging that down to make give myself some more room to work with and now we're going to get into this next thing now what I want to do here and again I'm thinking about how I can lead the person into the next thing so I'm going to have this music section here which is going to be the albums um actually before I talk about that I think I play with the font sizes now a little bit or maybe I do that after let's see I'm just trying to once again organize everything properly um yeah yeah now yeah so I'm looking at the font size that's way too big the arm music is just massive I found it much too big oh I didn't do it yet I'll get there in a second I guess um these albums I don't actually do the albums now uh I I come back and I don't do them in the design I didn't want to just start randomly designing album covers while you guys were watching this it was sort of a waste of time this is more focused on the design of it not on album covers uh so I'm going to find some images and throw them in there design something really quick before we actually start coding this out um so this was just a little placeholder that's where the albums will be and uh yeah I just wanted to see that that will be six albums that are there [Music] um so let's see what I do next just did this too and I don't remember everything I did I don't even remember what I'm looking at I guess I'm just organizing layers again the way I work is terrible for layer organization oh I'm bringing the button down okay um I'm really bad at well I'm not bad I keep my layers organized but I just find the way I work leads me to be like reordering my layers constantly before I group it and then it's set and I'm happy with it and I don't touch it again but just I things get mixed up a lot and then I have to go through and fix everything up it's a bit of a pain in the butt um but it's just the way I work and this artboard was never big enough I keep having to make it bigger all the time so um let's see okay yeah I was oh now what I wanted to do this image is going to act as a parallax image I want to bring a parallax image as a background image here and again it's just something to try and connect one section into the next section A little bit so that about section we have those three pictures that you'll see then there's this background image that's going to be a little bit of out of focus it's going to be parallx so it's going to scroll it a different rate but it's connecting the person into the next section of the site um I'm all for like these big banded sections it's really trendy right now where you just have like a big like one color background then you have the next bar and it's another color there's nothing wrong with that they work really well but I really want to put a lot of emphasis on this site on just like things melding from one section into another trying to make it a bit more organic instead of like here's one section here's another section here's another section I wanted them to to flow a little bit more in uh one to the next so this Parallax type background image my idea there is again it just keeps the person moving down the site it keeps them looking at the site um hopefully you know it keep the whole idea here is that they just they keep going they keep going um so now we're coming up upcoming shows or maybe it's now I decided the font sizes were too big that's possible yes it is so now I'm just starting to play with the font sizes I want to keep that one big font size all the way at the top the same I like that one but these other ones here I wanted to make them a bit smaller I just found it was way over the top so I didn't make them a lot smaller um I am making them all the same I want them all to be the same size because of how I'm going to be doing it you know they're they're all in equal heading whatever they say I make it an H2 or something like that I want them all to be the same they were just way too big uh and obviously with media queries and stuff they're going to have to get smaller at other screens sizes too but that's you know I'm not worrying about that I'm just worrying about the big screen size for now um here's the upcoming shows I'm doing so I'm going to do like um the I want to play with the since I'm doing this with bootstrap and I'm pretty sure I'm going to be doing with bootstrap 4 I want to play with the card system they have they have like this image overlay type thing so that was sort of why I'm designing this the way I am where um it's going to be an image with all the information for the show on top of it um yeah so I think this would be kind of fun to do uh it's a nice way again lot I like having images in it it images catch the eye more than text generally does even though you want the people reading the text so it is really important I seen a site I don't remember what site it was on I was on a site today for a big company oh I wish I could remember what it was but it doesn't matter um they had a a background image with text on it and I couldn't read half of the text I had to highlight it to read it if you are going to be putting images in most images don't work well as background images you got a darken or lighten image or something um here I'm just grabbing some font awesome stuff to put in um I know font awesome isn't incorporated into bootstrap 4 it was in part of three they took it out for four but you can still use it of course uh so I want to use that just for these little icons here um I think they'll look good and it's just to set the date and all that but again the imagery is what gets attention but don't let the imagery rule your site the imagery can't rule a site it has to be the text that's most important because the text is what actually has the information the imagery and the visuals and the colors are what get people to stick on the site and to keep going but if you can't read what's actually on there you're not going to actually stay on the site it needs to be clear it needs to be concise it needs to be really obvious uh what's actually going on so and if you can't read the text then people are gone so the text is King all the time and it's one thing that I I find people forget a lot they make these really wicked designs and the text is sort of ignored so the detail that you put into the text and just here are my music festivals in bold and then the slightly smaller font size and a normal you it's not bold anymore for the the Montreal location thing just because I want you know the music festival is you know what's the music what's the concert and then where is the concert it's just you're creating a bit of a visual hierarchy uh which is really important and it just breaks it up people can see it's two different pieces of information right away um and the font size between those is actually a little different I think I did 24 and 21 or something like that so it is important to make these things to break up the text you need to if it's two different pieces of information either spread them out a little bit change the font size a little bit change the font weight a little bit things like that to make it clear that it's two different pieces of information and that's really important because people forget to do that all the time and it it makes it harder to read the site the attention to detail really needs to be put into the text I can't stress that enough um and now we're getting into the footer that's pretty much the design done we got to the shows people have scrolled all the way down maybe I should have put the upcoming shows higher oh if they're interested in the band they like their music then they'll be looking at the shows that makes sense right um so here I'm just putting in a super simple footer I hate designing Footers uh especially for mockup or not mockup but Generico sites like this where I don't actually have content and other pages and all of that and stuff to put in the footer I'm just putting a copyright thing here and I'm going to put in um the Social Links so originally going to do icons for these but I thought it would be nice it's just a nice clean way to finish off the site just by having them as text links um and I'm just putting this gray out little forward slash between them as a separator um because it stood out way too much before that so you know lowered it making it a lot less contrast anyway that's it there we go um that is everything I hope you like it uh yeah and we're going to start coding this up very soon next week we're going to be looking at how we can code this um oh wait yeah one last touch here I did um I wanted to I wasn't happy with my colors uh so I came and Revisited this hero section um so I was looking for a gradient UI gradients up put the link to that down below I love UI gradients so I just wanted to come in here and throw a gradient in to bring a I have all these really nice colors through the rest of the site what I wanted up here which looked good at the beginning but now that all those images have these cool colors in it it wasn't looking so hot so I wanted something that would just bring in um a bit more of an interesting look and visual here so I'm just going crazy with the blending modes this one I thought looked cool the colors go really well in contrast with the red um and they are found in other parts of the site too so you know it's it's what do you call it complimentary colors pretty much the red and um the colors I'm using there so I thought it looked good wasn't super happy with it so I was playing with this red a little bit to try and get it to blend in a little better I think I just end up fading things out a little bit instead um is I believe what I end up doing let's see in a second oh and I'd lost that button I don't know what I did with that button I think at one point I thought I was copying it but I just dragged it down somewhere else instead so I had to make my button again and yeah with that button there it sort of balances everything out a little bit better than what I had before and I was really happy with it I think it looks really nice I hope you think it looks good too let me know what you think of the design and all of that and yeah I'd really like to know what you think of this so please let me know down in the comments below what you think of the overall design and there's the design thank you so much for watching I hope you guys liked it if you did like it please hit the like button below if you haven't subscribed consider hitting that subscribe button cuz then you can see how I end up coding this up next week and new videos every single Wednesday plus other stuff that will get thrown in along the way too I seem to be doing that more and more these days uh again thank you for watching and until next time take it easy