DEV Community

Cover image for My struggles designing a personal website

My struggles designing a personal website

Nathan Tamez on May 24, 2019

Hi, everybody. I have been making my website and have been struggling with the general design of it. As a developer/software engineer, my design sk...
Read full post
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 •

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

Collapse
 
kevinhch profile image
Kevin • • Edited

Hi, im noob web designer too, i check your web and i'll try to don't be so rude.
Don't try to use the same palette of colors (dark, dark blue) your web needs a little of contrast.
You should read about this: vwo.com/blog/crap-design-principles/
HEADER:
-Your header / nav don't need your social links, it should be in footer.
-Your header has a margin in all directions, this is not good, because your footer doesn't have, it should be the same design (i mean about the size)
-The background img about your header is a good idea
MAIN:
-Your main design its good, but maybe its a little dark, and the img it's to mutch big in mobile design
FOOTER:
-Your should delete the list-style from your lists, and your social media shoud be in this section, and your skills should be in "About me" section
-Don't use "align-center" in lists.

DESIGN (tips):
-You should read about the "mobile first" design, it's mutch better for sure
-You should use "rem" or "em" or "px" size instead "vh" or "vw"
-You should read about modern design patters or new features about css3 (flex and grid)
-Web pages that have helped me:
+calltoidea.com/
+colorhunt.co/
+flatuicolors.com/
+pexels.com/

(Sorry for my english)

Collapse
 
iceorfiresite profile image
Ice or Fire •

colourlovers.com/ is a great website to pick colors and palettes. Good luck!