PORTFOLIO REVIEW: Web Developer

Key Takeaways

on today's episode we're going to review a portfolio of a web developer based in berlin we're going to talk about the strategy of the website the content and the visual design let's [Music] rock [Music] hey friends what is up welcome back to flux my name is ron segal and in this episode we're gonna drill down into a portfolio website like you people love me to do and keep submitting in the comments your website for reviews i love checking them out and giving you feedback let's dive in um so this is the website of ibrahim for come based in berlin let me just scroll through this it has these nice over effect here and uh we're gonna drill down into this you can see we have this kind of effect when we're hovering over image or stuff um let's let's start with this so i'm going to start with the content and what he's trying to achieve from strategic but strategic perspective here then i'm going to dive into the visual design we're going to talk about type color layout all of these important things so first thing i'm reading here from strategic perspective copywriting a web developer that will grow your brand and get you results immediately i am confused because usually when you go to a web developer you need to get things developed right he's a developer and so i'm not really used to hearing that developers help me grow my brand or get me results now so i'm confused right i know that sometimes designers or strategic designers or consultants help me build a brand or get specific results i'm also not really sure what the results are that the website is going to be developed fast that it's going to be scalable that it's like going to help me convert more so i think there's something confusing here with his definition of himself i think um coming from development in and what he's trying to communicate with the client again i'm not really sure again i i think ibrahim here is still very early on saying he might not really know what kind of clients he wants to work with and how exactly he's going to help them so he's keeping it kind of broad but i do think that if you call yourself a web developer people are going to expect that the problem that you solve for them is development versus when you're talking about branding which is something that has to do with design so maybe you need to call yourself a web designer again i don't really care about how you call yourself but you just want to make sure that you're not going to confuse the person that you're talking to so this is the first thing um one more thing is you know when i'm opening up you you can click it and then the the projects open up in a kind of a pop-up now when you open that up then he writes you this is a template for an asian restaurant this project for this project i used react js and scss for the styling so visit the live website and visit the github repository so this is again kind of aligned with the fact that he's a web developer obviously he cares about the technical stack in which this website was developed but let me tell you from a client's perspective if you're looking for somebody to build your brand or help to convert more or do more sales they don't even know what react js means they don't even care about the technical foundation they just want to get their problem solved so again i i really think that it's not really clear if ibrahim is looking to maybe get hired as a developer and he's actually talking to other developers who might want to hire him for his development skills and his understanding in react.js and or or all the other frameworks that he's using or he's actually looking to work with clients who are going to hire him for his design skill and his ability to you know put things out there so i think this needs a little bit of clarification in terms of you know who do you what do you want from this website who do you want to hire you and i think once you are a little bit more focused about that that's going to help you to be more effective in how you write to people so i'm going to keep it to that in terms of the strategy and copywriting for this website let's move on to talk about the graphic design aspect and i want to start with talking about the layout here there's all kinds of layout decisions here which i found a little bit confusing right the the purpose of layout is either help me organize the content so that i orient myself i know where i am at any time and that i feel like there's some kind of structure not everything is thrown around where you see things not aligned and every time they're in a different place a lot of times they give you a sense of disorder right you can use that you can break out of the grid to create more interesting stuff but if that's not done properly sometimes it looks like a mess now what am i talking about here in this case though usually in most website you have a logo here that's on the left and then menu on the right that's kind of the standard now sometimes do people do put the logo in the background in the in the circle that's being said when they put the logo in this in the center either it's just the logo in the center and then it creates kind of a centered layout or it's balanced out with two things like two navigations or two buttons at the side to kind of balance it out but here we have you know a button that is centered or an icon that is centered and only button on the right in that sense something is missing on the left side here which just makes the website it doesn't feel balanced the navigation doesn't feel balanced and then here as we scroll down again there is no coherent structure or container usually most of our content fits within a container which is means basically this is the maximum with our content is going to be laid out here but here it's not really different it's not really aligned right this is wider than this and then as we go here this is aligned to something completely different and then it's aligned to the center so i think some fundamental decisions about you know how things are going to be laid out are we going to use container um should be used here also one thing that struck me here is we have a contact form here but the labels in the contact form are centered now this is very confusing because even if you click here and you start writing your email um you'll see that we're writing from the left side and so first of all it's very confusing that it's what you see here is email and name is not aligned with how you type but usually our expectations from seeing forms all over the internet is that the form is the label is left aligned because we're writing from left to right and so what actually happens when you have a label that's centered is that it actually feels like a button right and it's i have to really look into this and make sense that oh actually this is probably a form because when a label is centered we're used to thinking about that as you know as a button and then also this part misses a mislabel at all so i might completely you know miss the fact that i can write somewhere in here um okay that being said let's talk about the colors um i like this color palette you know we just made a video about color palette and this is not a bad color palette that we have going around here that being said some of these colors uh like you know this purple on black is not highly contrasted and while it's visible when it's you know when the letters are colored we have a lot of text here which is very very thin line of a color that is not very contrasted so when i'm scrolling here i can totally miss this i would not say that this very very thin lines of color that's not super contrasted are visible you can see this is way more visible the project name versus the numbers and the project's title and so i would consider this you can see it also happening here with a very very thin line of a color that's not super contrasted um that actually makes it very hard to have to squint my eyes to make sure that i can actually read this so i would consider either using like really you see when you actually color the letters it becomes really really good so i would think about what happens you know before the hover and how to make this more you can see here very very thin lines sometimes make things not very readable um in terms of typography i actually you know typography is not very bad here um i like the the follower the color choice and of course the outline thing is is quite trendy um that being said you know we're starting out here with you know a very thin thin kind of font and then we have this bold font which is outline and then we have a font that's even bolder bolder bolder bolder and then we have these titles which are kind of in the middle they're not very light they're not very bold and feels like kind of in the middle to me so somehow i feel like that there wasn't really a decision or a consistent decision when it came to these titles that we have here um i'm missing some of the titles that i saw here before let's see what happens when we go into the about section yeah india note what happens in the about section first of all it's all centered now again i don't have something against centered actually it's not really centered the about is you can notice it's a little bit identical to the left which also i'm not really sure if this is on purpose or a mistake and this is this is always a bad thing if you're not sure if something is a mistake or on purpose that should be fixed it should either be obviously to the left which would make it weird or completely to the to center if everything here is centered um but it's some somewhat of like a misaligned here also reading a long text in centered alignment is pretty tough so not sure how we do this and note what i said again about he actually probably wanted to highlight the fact that he's 20 years old in his name however because this purple color has less contrast than the actual white color what ended up happening is he actually hid this text is harder to read it so it actually i have to stop pause and try to look harder so i can see what's written here before going back to the actual easier to read white text all right um ibrahim overall i know that you're just starting out and these are one of your first projects so i think well done i mean i think it looks quite all right as a first step i think you need to be a little bit more focused as to what you're trying to achieve here who are you talking to and make some more consistent decisions in terms of your layout make sure things are aligned make sure your decisions are clear and good luck on your journey finding your next project or job thank you all for watching make sure that you comment with your website below so that we can cover them on a future video make sure that you like this video that you subscribe and we'll share more of this awesome videos with you we'll see you on the next video bye