DEV Community

loading...

Discussion on: My struggles designing a personal website

Collapse
larizzatg profile image
Larizza Tueros • Edited

Some feedback

  • For general sizing don't use vh/vw the v stand for viewport and is gonna take up the space of every screen. Maybe in yours look fine but in others is going to be a mess. For a consistent design rem/px are better. (there are some cases when the vh/vw are useful like when you have a section or background that you want to occupy the whole screen height).

There are some patterns that will help you. You don't have to follow them 100% but break them with a purpose.

  • Reduce the height of the nav and cookie alert.
  • Make the nav full width.
  • Move the logo to the left and push the main-nav to the right.
  • Social icons in the footer, in a contact section.
  • You don't have to put your face if you don't want it.
  • The cookie and the footer have the same color. Change one to have a visual hierarchy.
  • Is better if you put the skills in their own section with some of your projects if you have them (links, pictures or a little description).
  • You can have a dark theme but pick the colors carefully. coolors.co/ is an app that generates a color scheme with your input and you can alternate between the colors.
  • Choose one font for your headers and one for your content. Put different header levels (h1 h2 h3) depending on the hierarchy you want to give.
  • Make titles short and sweet.
  • Remove the margin and reduce the padding of the nav-grid. (don't use vh/vw or percents for this).

I attached a quick redesign maybe that will give you some ideas.

thepracticaldev.s3.amazonaws.com/i...

Collapse
natonathan profile image
Nathan Tamez Author

Thanks for the feedback and redesign. You didn’t need to do a redesign really. People like you make DEV.to awesome.