Improving Personal Website (Deep Dive)

Key Takeaways

on today's video I want to give you a sneak peek into one of our office hours calls where I work deeply with a student on his personal brand in working on both how to strategically and also technically design a website for himself that would represent the brand he wants to create for himself all of our students when they join flux Academy they get access to our mentoring to give them feedback on their work in office hours calls together with me and in these calls we go deep trying to help you tackle your problems and make you a better designer and this is a sneak peek into how these calls look like I think you will learn a lot from how I work with Andre on his website enjoy it in the past a few weeks I've worked on developing a website for my personal brand as a designer and I wanted to show what I did in my prototype for now okay so I've done multiple versions and I ended up working on something like this uh so this is the hero section I I've noticed in many designers that they have this proposition in saying hey my name is I'm doing this four and they choose like a niche or something I don't know I haven't done this here I just let some kind of mystery you know just showcasing uh this photo and having this web designer but at least they know my uh uh yeah profession what do you think what do you sell so what is this website which is important you go into this section with my expertise across and I have made these three things brand identity web design and development I wanted to make the thing is I think I'm a little bit limited by what what I can accomplish by the development side when you can actually Implement animations and things like that uh but I I was thinking about a hover effect or something when you click over you have some interactions and you can click it click it click it and then uh you can go directly on the um how can I on the section in which yep you want to uh yeah it's going to scroll into the relevant section where you're going to be able to see some works so in the brand identity I was thinking about having horizontal scroll and going like this when you're in that area the top row goes to the left the bottom line goes to the right yes exactly yeah and you have these very quick strategy then creative Direction and the other one right then we have the web design section so I you don't have a writing or a headline here it's introducing this mock-up and I was thinking I don't know how to do it but I I will learn it I was thinking on having these devices changing um the work that I've done something like that and like yeah we can do that you can do that right and have the static um a text there and showcase my work after that I'm not really sure what I can do in the development side I just put this right there I'm still thinking about it that that's one thing and then a little bit about myself I I talk about vision mission uh and My slogan like the big idea and I was thinking what you can scroll between them and have like a you know like a moving effect when you like not reading everything at once but you you can see the vision where it kind of focuses yeah focuses on and then changes the mission and one uh that's one thing and then go to testimonials um I don't know if I can bring everything together in like a one one section with testimonials and the contact form or maybe just leave it like this because I was thinking I don't know how how it works but I didn't want to have like a website in which you just scroll and you have you like I can stop here I want to have something like section after section like you you cannot choose where to stop it's just move from six okay to another and I was thinking okay to combine these two into one section uh in which you have the testing and then the contact form and I was thinking about the nice animation when you you contact me you get this confirmation of vision shared and then we go with this animation in which this one replaces here like you know you have a deal and this photo can come like this so once you once you once you submit the form the image change yeah yeah and the the button change and this is the footer and I I think that's it for now okay okay so I've got a lot to say about this yeah I know you've let me okay okay so let's he can you zoom out so we can kind of look maybe at the top let's start from the top so actually I think you've shared it with me or maybe just the hero sections on email a little bit ago and I'm going to tell you or ask you pretty much again what I've said in the email before I'm going diving into the design of the landing page itself I do want to talk to you about branding a little bit and the choices that you've made here to me this looks like a lot of the choices were they remind me of the Fashion World for multiple reasons the font that you have chosen looks like the Vlog font you know the Vlog font yeah the Vlog magazine um so I don't remember if it's like uh Dido or the name of the font but it's kind of like very very uh common font in the fashion world it's been used a lot um also kind of like the the color palette which is kind of like again leather and kind of like something like this and the image in which you are kind of like well-dressed and with you know the watch and the chair and everything it looks like a shoot from a fashion shoot so on a it's not a bit necessarily a bad thing right but and especially if you want to work with people in the lifestyle or fashion Industries it can work but going back into what you have written below about your vision for Innovation and stuff like that you have chosen things that are I would say more classical than Innovative this doesn't look new and fresh it looks kind of like old school again premium old school it's not necessarily a bad thing right A lot of people want to be kind of like old school and especially in the premium kind of like areas of things I'm just trying to communicate back to you how I am reading this yeah yeah the brand identity and the color choices and and stuff like that and there there is definitely kind of like a retro vibe to it because it's washed with this kind of like a grayish bluish or greenish teal that kind of like reminds us of the Instagram photo filters and it's kind of like retro Vibe so again there's there's there's a little bit of what I feel like conflict between the messaging or your desire to say you know I am like I stand for Innovation and new things and necessarily but you're showing something that is more classical again it's not bad it's just something a little bit different okay um well technically and and the last thing that I said I think on the on the email which I will say again is that this image shows that you are I would say successful or something like this because you're kind of like well-dressed you take yourself seriously it does not show you in the context of you know web design or work in that case for example in the previous website that we've seen we've seen her like working on a laptop and so if we're thinking about we're trying to imagine a web designer how does he build websites well he works on a computer right so that's yeah so it's a cliche it's just kind of it's not necessarily that you need to show what you're doing right but if you are selling shoes you will show shoes and if you are selling web design or yourself as somebody who's doing web design most likely you will put yourself or you will tell the story of here's me in a professional context and it can be working on a computer it can be in a workshop with a client and you are showing kind of like the you know you shaking heads with a client later on um but that's also kind of like generic like I'm a businessman versus hey I'm a designer and you know I work in Tech I build websites I build digital stuff um so it's helpful I think to put it in a context again not mandatory I don't know if you have access to that photographer again or if you can do another photo shoots everything myself okay fantastic so again if if possible I will say one thing about the crop and how this is laid out right now you have your name which is in dark brown on top of you know the magazine so it's like it's difficult to read because it's dark on dark now you have actually a lot of you know clean bright space at the top right of the corner you know if I was doing this I would just crop it a little bit differently I would move you a little bit down and to the right and just make sure that the text is on the bright side on this the sky or the the window here so it's more readable right and the layout will also be clear it's not one on top of the other it's kind of like one next to another you understand what I'm saying yeah absolutely I was thinking about placing my name like uh I have a crop version of myself and placing my name uh after the magazine and creating like a behind yes yeah creating like a depth or something and the placement is that's also great I I love that effect by the way but then you only want to do it on a tiny area of the letter because you still want them if you would right now put it behind I couldn't read I because I wouldn't see the O and F and so I wouldn't just know what your name just Andre but I still I'm still going to oh God I would I would I would do it on kind of like the bottom of the F so I would take this whole thing up or move you down and then just crop this like little bottom area here in the corner and that would perhaps add some depth um um yeah yeah exactly exactly exactly and maybe more to the right but uh that's that's fine that's yeah exactly that's what I meant now if you by the way if you if the image is you know cropped at the top because you don't have enough image there now I don't know if you have Photoshop but now with Photoshop you can do it the way I feel and it's yeah you can fill it up yeah I did it with generative fill anyway a lot of yeah yeah the thing is oh when I can show you how high it's it's well thought uh this one so if you see my my foot it's exactly on the grid and the back yeah it's exactly on the on this um uh on the hamburger menu and I placed I didn't know how to place everything I want to have this color palette here so you can see the the consistency on the color um and I I place the food Bene between the name and the call to action so to fit the image on the grid as well it's you also have to think about responsiveness well because usually the grid and the container are fixed sized but the background scales to fit the image so if the image scales on a really wide screen the size of the image is going to change and you still want the text and button to be at the same places so you need to you you may not have like full control of where the image is all the time if it's going to be responsive you need to kind of like think about that okay I got it yeah okay let's let's go down a little bit and see the other and okay so that was kind of like about The Branding and about the hero section I think what you've done in terms of interaction stuff like that is pretty cool it's going to be your first webflow website okay so there's there's some challenging things there but nothing impossible and I think you know we we can work with you to to accomplish all of them the horizontal scroll is fairly easy the probably the more creative it's not going to be difficult but the more creative is the your section with web design where you want the computer to be fixed and as you're scrolling The Works are going to change so the way that you're basically going to do that is you're going to have to create basically kind of like fixed layers inside of a very long section and most of the layers have kind of like opacity zero and you're creating an interaction scroll interact that as you're scrolling when you're at some position like layer number one becomes invisible and layer number two becomes visible and then layer number three it's not very difficult but you need to yeah you need to just have the the layers kind of like ready right so that's that oh I actually I wanted to say that I have this I have this video in which I know if so it's uh it's made with the generative feel and everything is changing in the background okay and it's it's changing here like uh hello ciao uh so I think once this you want this video to be in the background I want to be like a loading page but and that's actually a cool idea I like it and I saw this affecting um in the web uh web design master class in which you have the image and then you you zoom in and I actually feel like it feels like a magazine cover and then you scroll into it you zoom into it yeah and I think it's going to be actually nice because from the black and white you you can I don't know if you can do it but like have this saturation going in and see like like um yeah you can definitely do that I think that's an effect so you you pop up you don't even have to have it as a video by the way you can have just separate images and you can flick through them oh probably in terms of making more optimized it's probably I don't know which one would be lighter to to load oh yeah but definitely if you want to keep the last image and then you zoom into it so it needs to be an image right yeah you also so that's one idea again I want I forgot to say about it so that's very cool all right I'm not sure what you meant about in terms of web development like right now the logos don't look good right now maybe they're too big maybe they're very black while everything else is kind of like brownish and so they're kind of like taking up too much yeah maybe you need to reduce the opacity a little bit uh maybe you need to bring kind of like screenshots of the interface or something like that or or maybe maybe just bring app ice you know kind of like app icons maybe it would look better than just like three logos yeah I here is what I I'm I'm lacking ideas but I think in this case by the way I think you can see what I mean where your brand on the left in terms of typography how radically different is than the logos on the right which are kind of like Tech web design right now again I'm not saying that you know everybody should go with kind of like Sans serif bold fonts or something like this but this is it's important to understand the context in which you're operating with yeah I understand it's like I don't know I like to break the rules a little bit yes all right that's all right I think I think it can have some upsides like it can be something different and unique but it also can be something destructive I can say like people can look at it and criticize and say it's nothing it's not necessarily bad it's not necessarily bad yeah I'm just yeah it's just different and sometimes different yeah it's worth standing out it's yeah I agree so so I I really don't know what how what else should I change maybe I mean I don't want to change the photos and everything because it it whenever you come up with this color palette like Why this color palette so oh it's a you did The Branding course right yes I did and yes did you do like a mood board yes did you do a personal branding um mood board yeah okay yeah I did this one I actually wanted to combine blue with uh with something like gold and I wanted to use my uh eye color because it like represents me I have blue eyes and something like that I want to have a connection between the website and my and me I I think having this goldish with blue can be complementary colors and they they can work very well uh also the blue is the color of uh trust and things like that that's how I start okay so I I want to say okay I wanna I wanna say something this is important first of all without what we're seeing here is completely not what we're seeing in your website I know this is kind of like strong golden blue or or golden teal and black and white which we'll talk about in a second in your website it's kind of like retro Vibe it's brown and kind of like exactly it's completely different feeling it is completely different it's a it's something different it's like I understand how things should work but I couldn't done this because I cannot I cannot change the way I look and my clothing and the environment in which I what is that what is that can you show me the original photo just to sure okay so this but this looks color corrected already like this is this is the original one yeah okay so let's let's look at the at the original one for a second is this the original one I have so many shadows in my yeah maybe you this has a lot more detail in it yeah oh show me the ones with the computer they are actually very bad because I my my camera has um 4.5 ishi yeah yeah and it was like those are only the ones that you can actually see them but the rest of them they are like very blurish even this one see it's kind of like yeah the rest of them were shot during daytime yeah exactly so I wanted to make something like this maybe for collaboration section not for um I actually want to have something and again you did it on your own and you can go and do it again yes I have a friend that's working on a office and we can go there and do some photos yeah go to the one again where on the left where you're next to the window I I suggest to begin with this one uh on the left where you're yeah yeah these ones next to the window yeah here these ones okay so let's let's let's do two things number one can you send me one of these the ones that you actually chose um and and send it over to me upload it here in in the chat so I can open it up and we can I can work on it together with you yeah this one yeah so before before I open up Photoshop and try to to play around with it a little bit I wanted to go back into your mood board what I want you to pay attention to is that there's actually the designs that you have here are actually black and white which in fashion is very very common if because your references here are they look like from fashion right and so a lot of fashion is black and white with touches of color uh the what you have in the bottom Yeah by the middle which is just golden blue is another it's the so you basically have here two different palettes which one of them is black and white which you have two examples and one of them is gold and blue which you have one example okay in a way you haven't really made up your mind and then again in the actual design you've used something completely different yeah so let's I'm going to try to apply one of them let's try two options I'm gonna try one which is black and white and has just a splash of a little color and then one which is actually kind of like blue and gold and see how that looks like okay so I'm gonna stop your screen share and I'm going to download this image and try to open it up and play around with it and Katrin I saw the okay so Catherine are these questions for Andrew what is the purpose of your website is it a personal branding website to show if your style I guess ideally what was but I feel a bit disconnect and I don't know why Ryan can you maybe explain what I mean you know yeah I understand so do you want to answer yeah so I want to do a yeah it's kind of like boat it's a personal brand showing my work like showing my portfolio also like you can meet me and you can also see what I worked on but yeah if you feel disconnected I think it's because I'm doing probably something wrong or something it's I don't know because I work everything backwards I've started with that um template but like I couldn't use it like there was something that didn't connect with what I was trying to show about myself and then I show my image and then I start it from there and create a palette and everything so it's I think honestly it's kind of like it's probably your first website you're still not necessarily sure about your Niche so this is uh you're still not sure who are your clients so this is a personal website portfolio that is basically trying to show personality and this is where his personality goes I think uh in around these areas of Premium fashion you can see the way that he created like into intuitively the choices that he made tells me that this is where he wants to go okay so just to try and work around this I've created like a section let's say it's a hero section and let's take this uh let's take the image so now we have it here it's actually pretty big so we can play around with the crop of how we want this to be set up um maybe and now you can see that because this is wider than your original website then we not sure how we're to crop this but let's say that this is good but now you can see that if I want my text to be here I actually forgot to say that yeah I actually edited edited you see you have that bar in in from my foot yeah I would probably try and remove it no I I can send you ah never mind remove bar let's see if Photoshop can do that like that fast I don't think it works I don't think it works oh let's see I think I tried something in you never know oh yeah maybe yours is smarter than mine it's the I've just updated it yesterday so maybe it's smarter and maybe not a band it worked like magic wow it's so good okay it's actually notified I don't know actually you know what so now let me remove the plant as well we don't need the plant remove plant oh my god do you know that when I started in my advertising agency I would get this task for like two hours and it was like clean this up so we can put the tax here and then I would have to go and raise it with the stamp tool and just like spend hours doing it and now it's like well this nobody's doing that anymore okay so now we have clear now we've cleared up some space and we can use it here to um to put yeah so let's do I'm going to compress this let's try and do two things one that is going to be black and white um so let me see how I'm going to do this I'm going to add black and white black and white um correction kind of like how do you call this I don't remember correction layer that's turning it into black and white and now I can choose between presets to see you know different contrasts see which one looks uh better okay so high contrast is good I think high contrast looks good let's try some other ones infrared actually infrared looksie better with more contrast lighter okay White natural density also looks good okay so I think in yellow okay I think natural density was actually bright and more detailed here so I think this looks actually pretty good and now let's bring in some text so forgive me if I'm going to write your name incorrectly um or maybe you can help me spell it yeah right so it is Andre Andre like this or with Y or yeah he's perfect the off all right yep okay so let's go ahead align it to the left we can make it bigger and let's go ahead and change this to this font similar to what you have which was oh it's only one dog or no which one is it I that's how you said but Donny yeah yeah um then I can go ahead and make it uppercase okay one thing I would do is I would whoa make the the lines kind of like pretty tight together okay so and maybe we will put this behind this in a second but maybe we we also don't need to and then another one which was web designer right web designer it was on top let's make this black and maybe let's see our type choices here uh maybe not book maybe this would be italic maybe this would actually be web designer not not an uppercase maybe that would look yeah that's also stylish right so not everything needs to be a uppercase um okay or maybe at the bottom at the top we can stay at the top okay so first of all you can already see that even black well this is white on white so that's not a good idea but maybe this is white already kind of like looks cleaner I guess you can say and maybe here we can add like for this web designer let's add a layer let's make kind of like a golden gradient here so let's see if we have purple pinks oranges yeah we have some that's not really golden but let's take this gradient let's try to make something like this whoa nope um and I'm basically going to put this inside of this web designer no it doesn't look good because it's bright on bright so it doesn't look good to use that it might be well if it's on dark right so here on dark this could could work but on light it's not going to work but maybe if we had here one of these do blue gradients like this professional blues that you were talking about let's see the blue gradients uh maybe something like this okay so this is kind of like okay so now it's God damn this menu thing that we have now it's black and white with a little touch of color right um we can also we can also do something like I don't know if I want to but we can add like a line or something like this that can add a touch of color but I don't know if we I don't know if we need that one more thing that we can do is I'm gonna group this as an option and duplicate it so that we can see two different options one thing that we can do instead of this black and white is we can give it kind of like a color overlay so let's do gradient map basically what gradient map does where is gradient map gradient now basically it Maps out because the image is black and white it can remap the color so instead of blacks we can pick some like dark blue okay and so now look what happened like all the blacks are now yeah blue and instead of white we can pick maybe just like a different blue that is slightly slightly lighter and now we have this kind of like color wash on top of it and now we can we can do the maybe now we can do the call The Golden thing that you've wanted so here for this um let's do it over this text let's do the gradients let's pull the golden one again oh it does it has gray Iris pastels neutral no oranges second one should look like yeah it's something like this and I'm gonna clip it inside this so now this is more similar to you know what you had in your mood board again you can play around with this we can go into the gradient map and say we want this to be darker right I don't I don't remember it would be helpful by the way if I were doing this for real I'd maybe open up the your reference here so I can really literally steal the color palette from the image that you like and try to maybe it needs to be darker here and this is uh maybe it's darker maybe not I don't know it gives the darker I make it like the more contrast it gives kind of to this okay so now you have a color palette that I think is more in line with what you're trying to do kind of like hey it's premium it's the blue is like trustworthy and and that kind of stuff uh now if we wanted to to kind of like do this effect let's see if we remove and by the way now I have two options so can always always good to have like two options which one I like better uh you only know something if you like something or not when you can like compare it and a a good thing to do is kind of like look one next to it next to each other so I can go ahead and duplicate this file and then have like this one here and that one here and then okay which one looks better which one I like better what's your intuition well mine yeah uh you actually open my my my mind and my eyes to something that I didn't think that I I've seen uh so far it's like a cold shower I don't know how to call it but the thing is in the left I actually see my mood board uh to life and I actually understand what my mistake was and in the right I can see that feeling I I can also see the feeling of magazine more I have this feeling more now that's in black and white and with that text it's like is this guy is this guy a story or something it's like web designer is not belonging here like it's more like a I don't know Survivor from the I don't know something fresh plane and yeah I agree I agree that's why you know what if you had the exact same photo that shared that window in the background because it's a good layout and you can see that it gives you a lot of space to play around here but instead of a magazine you would hold your your uh computer your laptop generation that would be that would be great Adobe Photoshop generate field uh remove oh magazine that's that's great I have not thought about this but let's try it out I gotta try it I think it's nah okay let's do it will this work I think maggot Zine with MacBook Pro I think he's going to turn so here we go everybody very quickly vote in the comments will it work I don't win or lose what do you think Simon Says win no okay so this is option number one we have multiple options this is option number two not really good uh no option number four no no no this is ah no no it doesn't look bad maybe it doesn't look good I mean I would yeah it's not it's not worth it I mean it's just like I would I would go ahead and take that photo again if it's not if it's not too difficult go ahead and do it I mean daylight if you don't have you know professional lighting equipment natural light is your best friend you're sitting next to a window that's great the design of the chair is great the fact that you know you have Skyline I mean in terms of layout this is great it's just that we need to replace the the magazine with a computer I think to send the right story mm-hmm absolutely and hmm so is this the biggest issue like what what else is there that I can change or improve it's um I think it was again it's uh not necessarily the to me the colors and the colors were not telling this the colors and the image we're not telling exactly the story The Right story in my mind because it was retro and it was like again magazine and not like a professional design settings so those were kind of like in terms of Storytelling right those were my my points where I thought that we can improve okay that one also said that it it's nice that it stands out it's not the cliche web developer and web designer page and I think it can work well and attract certain types of clients I was thinking about the same thing the truth is you can only be you and it's great that you're not like everybody else so you know do you and if you think that's cool that's great the other people who will think it's cool are exactly the people who you need to work with so I understand that that actually makes sense I I'm not trying to be something that I'm not I'm actually trying to I I think no I'm what I'm saying is maybe my advice to you is kind of like forcing you into a path that is not not what you want to be and I'm like I encourage you to do everything actually yeah that's true because I I really think as I'm going through this course and trying to build everything that you you you teach in this course I think I'm actually just covering myself more and more and I also discovering uh where my probably where what my Niche is and where I'm going for and I think I'm not understanding everything from the beginning but I think for everyone that's watching this is a journey that you cannot know the end result that you want to achieve and you maybe Discover it as you go and I think that's very good and we can also encourage ourselves to discover more about who we are and what we want to create in this world right so and it never ends I'm also discovering this actually yeah it never ends but at least at least you have some more questions that you ask you have the answers for about yourself and because if you if you asked me before I started this course what do you do for a living I would say maybe like an entrepreneur or something because I try to create businesses and things like that but now I can call myself maybe a web designer or something or not but I'm I'm going there I'm trying to achieve something I'm having this purpose for now yeah I think it's a really fun Deep dive yeah thank you but it's uh also for everyone that's watching I think it's a very inspiring well also of what you've done and I think everyone here is grateful you you created multiple things that help us discover more about ourselves and I'm thankful for that I appreciate it thank you for the thank you for the kind words yeah also great comments right now uh Andre's style and taste is very specific uh very nice very nice all right thank you everybody uh it was a really fun fun uh call we should do this we should do this more often we should just pick somebody and work deeply on on a single problem or a project and try to see how we can raise the right questions maybe not necessarily reach the solutions but at least open our heads uh to more possibilities amazing all right I will see you here same time next week have an awesome week