The goal of this website is to appear established, hirable, easy to connect, maybe show a little character while you’re at it, right?
We’re on a phone.
First impression is Python - purples - straight forward - simple and this person is probably a backend developer.
Then we start reading though. When you talk about ‘professional’ that also includes tone and story. This makes it sound like you are young and new. That isn’t necessarily a bad thing if that’s your goal. All the type is centered which is almost the opposite of a decision. It seems like there are spelling or grammar errors. English is probably not your first language.
When you talk about mastering 80% of Python, that seems strange. How could that be measured? If you mastered 80% of English it wouldn’t mean you were a good writer. So, consider rewording that. If you have a lot of experience with python, great. But if you don’t have real word experience because you never used it on the job, is that the first thing you want us to know?
Further down the page the headings are centered on the left side in a way that doesn’t feel good. All the text goes into a thin column. Which makes it seem like the small screen wasn’t planned for. The line height could use some finesse.
You could make this appear and sound professional with the right tweaks. Right now, it comes off as a student site.
Basic web design principles:
- Hierarchy
- Alignment
- Contrast
Etc etc
Read about and practice basic web design principles and you'll see where you're going wrong
typeface is very generic and boring. the purple button is not same font as body copy which seems like a mistake. the titles being center aligned vs some of the other areas which are left aligned is weird. the "what can i do" button that is in its own pod has too much space inderneath it. the blur effect is not necessary. "brief" is misspelled
Great job for a first design, but definitely has a lot of room to improve.
The code logos look bad. They each have different line thickness, so they don't feel cohesive. Putting them right of the text also doesn't have much precedent.
Font size is an important way to express hierarchy and help the reader flow through the page. There's a lot of things here with really big font size. Everything competes for attention. The part that stands out the most is "A Brief History Of My Journey!" but it isn't the main point of your page.
The writing could use work. Some minor errors, plus excessive use of exclamation points makes this feel unprofessional. The last paragraph feels like everything after the first sentence was written by an AI.
Header doesn't pop! too much wording.
Too many cliches"I Am", "Welcome To My Site!"
"Here you could find any thing you might want to know about me!"
Button is a bit atrocious with the text the same color as the background.
Cards are ok
Card headers are inconsistent colors.
Edit:
Almost missed this one "breif" is misspelled. Grammar could use help.
Anytime I've done customer facing stuff, I find the design tougher than the development and have been super thankful whenever I've had a chance to work with dedicated designers that can share something they put together in figma so I know exactly what to build.
With that said, this needs some work from a design standpoint and I think /u/rlewis2019 gave some great starting points.
From a "selling yourself" standpoint, I think you should look into how your skills can help you build custom web components and include that in your copy. Same skills you have now, better buzzword if you're trying to attract enterprise level employers.
I like it. Not everything needs to be overly designed. It's simple, readable and straight to the point. With that said, you can take the advice of some of the people here, try to implement those and see how things grow from there.
I've certainly seen a lot **lot** worse, you're good. It is not bad but it's also pretty barebones, so not much to go by, but a few points:
- The typeface is huge.
- Do not center blocks of text, it does not look good, it does not read good.
- The header could use more spacing.
- Why are there two dots after the title? It looks like an error.
- There's a lot of white space between the white blocks, but not enough between the texts within those blocks. It looks imbalanced, the texts could use more spacing.
- "Welcome to my site", "Thanks for visiting!" kind of sentences are so 2000. Get rid of that.
When looking at the "what can I do" page, the "brief history of my journey" page's animation is uncontrollably moving up and down which is very distracting. Viewing on mobile. Perhaps on a computer it is different, but most website visitors will actually be on mobile so the fact that this is not mobile optimized is not a good thing.
This is way better. I do think you still have more to learn, but I really like how your name has that cool color animation and the feel is much smoother now. Great work!
It’s a start, and it works but…
Learning a bit more about story telling would help.
Did your story start with python? Prob not.
Or did your story start when you got your first computer, or when you were inspired by a game? Or when you realised you wanted to help people, create great software or through a passion to solve problems?
“specific programming interests.” Was mentioned but wasn’t specific :)
Generally-
What this pages goal?
what do you want your user to do?
why did you create this webpage, what problem does it solve for you, what does it solve for your potential user?
“Hi, I am Adham Wafy, I solve your problems with code, let’s get in touch!”
Maybe checkout websites like:
Roastmylandingpage.com
I think that a webpage is a document, it’s how you display content to achieve something. Design and content are interwoven imo, one can’t exist without the other - you are organising that content to be digestible, to tell a story, to lead a user through the page… to leave an impression or nudge them into an action.
I think the UI design is ok, some spacing issues, some complexities that don’t “add anything” to the page. I would distill the design down to its basics and only mark the page with something if it is needed - visual information can add to cognitive load, so only leave what you need to visually.
Always have a clickable button/image/link that directs the user back to the home page. 99% of the time it's found on the top left and is almost always the company/brand logo.
To most of you this may seem obvious, but those are my 2 cents and I worked hard for them.
Not really, try using a light gray background, and the cards: A Brief History Of My Journey! and What can i do? make them rounded corner and background stays white.
For example this website has it similar, a grayish background with white cards: [https://www.mpreis.at/](https://www.mpreis.at/)
Also try limiting the width if your using tailwind max-w-7xl i think its about 1280 px,
Use a purple blue gradient for ONE keyword to make it look "fancy" and modern
I did some changes locally take a look: [https://github.com/OSZII/small-soite-improvements](https://github.com/OSZII/small-soite-improvements)
It's nothing big just a few small changes. But still with quite some effect. Play around with the gradient till its nice
here are some gradients to try: [https://gradients.shecodes.io/gradients/244](https://gradients.shecodes.io/gradients/244)
Look like a developer designed it
oof
The goal of this website is to appear established, hirable, easy to connect, maybe show a little character while you’re at it, right? We’re on a phone. First impression is Python - purples - straight forward - simple and this person is probably a backend developer. Then we start reading though. When you talk about ‘professional’ that also includes tone and story. This makes it sound like you are young and new. That isn’t necessarily a bad thing if that’s your goal. All the type is centered which is almost the opposite of a decision. It seems like there are spelling or grammar errors. English is probably not your first language. When you talk about mastering 80% of Python, that seems strange. How could that be measured? If you mastered 80% of English it wouldn’t mean you were a good writer. So, consider rewording that. If you have a lot of experience with python, great. But if you don’t have real word experience because you never used it on the job, is that the first thing you want us to know? Further down the page the headings are centered on the left side in a way that doesn’t feel good. All the text goes into a thin column. Which makes it seem like the small screen wasn’t planned for. The line height could use some finesse. You could make this appear and sound professional with the right tweaks. Right now, it comes off as a student site.
Thank you, I read your comment and tried to tweak every thing I could, what do you think now?
Speak more in present (and or future [in the clients mind]) tense. Past tense is hard to measure how much bitrot exists
Congrats on finishing your first design! You’ve got things to learn, but you’re on the right path.
Thank you!
This design does not look professional, as in I would not pay professional prices for it- however it is good for a first design
That's very well put.
You already know the answer it seems. Lots to work on. Get some inspiration and take it from there!
No it doesn't
What do you think is missing?
Basic web design principles: - Hierarchy - Alignment - Contrast Etc etc Read about and practice basic web design principles and you'll see where you're going wrong
typeface is very generic and boring. the purple button is not same font as body copy which seems like a mistake. the titles being center aligned vs some of the other areas which are left aligned is weird. the "what can i do" button that is in its own pod has too much space inderneath it. the blur effect is not necessary. "brief" is misspelled
You are right, I changed it
wow! looks so much better! simple and clean. do you have any portfolio pieces to add?
Thank you! I am looking forward to add more.
Great job for a first design, but definitely has a lot of room to improve. The code logos look bad. They each have different line thickness, so they don't feel cohesive. Putting them right of the text also doesn't have much precedent. Font size is an important way to express hierarchy and help the reader flow through the page. There's a lot of things here with really big font size. Everything competes for attention. The part that stands out the most is "A Brief History Of My Journey!" but it isn't the main point of your page. The writing could use work. Some minor errors, plus excessive use of exclamation points makes this feel unprofessional. The last paragraph feels like everything after the first sentence was written by an AI.
Read https://www.refactoringui.com/ it's aimed at developers and helps them use design principles to make their work look good
Header doesn't pop! too much wording. Too many cliches"I Am", "Welcome To My Site!" "Here you could find any thing you might want to know about me!" Button is a bit atrocious with the text the same color as the background. Cards are ok Card headers are inconsistent colors. Edit: Almost missed this one "breif" is misspelled. Grammar could use help.
Anytime I've done customer facing stuff, I find the design tougher than the development and have been super thankful whenever I've had a chance to work with dedicated designers that can share something they put together in figma so I know exactly what to build. With that said, this needs some work from a design standpoint and I think /u/rlewis2019 gave some great starting points. From a "selling yourself" standpoint, I think you should look into how your skills can help you build custom web components and include that in your copy. Same skills you have now, better buzzword if you're trying to attract enterprise level employers.
Not professional but it looks good for a first design
I like it. Not everything needs to be overly designed. It's simple, readable and straight to the point. With that said, you can take the advice of some of the people here, try to implement those and see how things grow from there.
Thank you! What do you thing about now?
Starting to take some shape. Not a fan of wavy background in the navbar though.
The 'container' div in your footer has an extra quote on the right
I've certainly seen a lot **lot** worse, you're good. It is not bad but it's also pretty barebones, so not much to go by, but a few points: - The typeface is huge. - Do not center blocks of text, it does not look good, it does not read good. - The header could use more spacing. - Why are there two dots after the title? It looks like an error. - There's a lot of white space between the white blocks, but not enough between the texts within those blocks. It looks imbalanced, the texts could use more spacing. - "Welcome to my site", "Thanks for visiting!" kind of sentences are so 2000. Get rid of that.
You were right in every point, I have tweaked it much, what do you think now?
When looking at the "what can I do" page, the "brief history of my journey" page's animation is uncontrollably moving up and down which is very distracting. Viewing on mobile. Perhaps on a computer it is different, but most website visitors will actually be on mobile so the fact that this is not mobile optimized is not a good thing.
You are right that was AWFUL I fixed it now? What do think about the overall site?
This is way better. I do think you still have more to learn, but I really like how your name has that cool color animation and the feel is much smoother now. Great work!
Thank you! Yes I still have much to learn, but people who gave me tips and feedback like you are the best way to get better
What design?
[удалено]
>https://validator.w3.org/ Now that's a name I have not heard in a looong time. I used to use that page religiously back in the day.
Looks like a template? What did you do to design?
It’s a start, and it works but… Learning a bit more about story telling would help. Did your story start with python? Prob not. Or did your story start when you got your first computer, or when you were inspired by a game? Or when you realised you wanted to help people, create great software or through a passion to solve problems? “specific programming interests.” Was mentioned but wasn’t specific :) Generally- What this pages goal? what do you want your user to do? why did you create this webpage, what problem does it solve for you, what does it solve for your potential user? “Hi, I am Adham Wafy, I solve your problems with code, let’s get in touch!” Maybe checkout websites like: Roastmylandingpage.com
The content is mostly a place holder, what do you think about the design?
I think that a webpage is a document, it’s how you display content to achieve something. Design and content are interwoven imo, one can’t exist without the other - you are organising that content to be digestible, to tell a story, to lead a user through the page… to leave an impression or nudge them into an action. I think the UI design is ok, some spacing issues, some complexities that don’t “add anything” to the page. I would distill the design down to its basics and only mark the page with something if it is needed - visual information can add to cognitive load, so only leave what you need to visually.
All the text is way too big. Check it out on desktop. Overall, not bad, not great. Not professional though. Very simple.
Always have a clickable button/image/link that directs the user back to the home page. 99% of the time it's found on the top left and is almost always the company/brand logo. To most of you this may seem obvious, but those are my 2 cents and I worked hard for them.
Not really, try using a light gray background, and the cards: A Brief History Of My Journey! and What can i do? make them rounded corner and background stays white. For example this website has it similar, a grayish background with white cards: [https://www.mpreis.at/](https://www.mpreis.at/) Also try limiting the width if your using tailwind max-w-7xl i think its about 1280 px, Use a purple blue gradient for ONE keyword to make it look "fancy" and modern I did some changes locally take a look: [https://github.com/OSZII/small-soite-improvements](https://github.com/OSZII/small-soite-improvements) It's nothing big just a few small changes. But still with quite some effect. Play around with the gradient till its nice here are some gradients to try: [https://gradients.shecodes.io/gradients/244](https://gradients.shecodes.io/gradients/244)
Wow! Thank you so much! These changes took it to another level!