My struggles designing a personal website

#design #discuss #help #feedback

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 skills are limited. I try a few things, but I can't get a design I'm happy.

My biggest issue seems to be picking a good color scheme. I wanted a dark theme, but I'm not sure if it works. Another problem is if I should have a header image or not. What should I have for my hero image(I can be camera shy)?

I wonder if anyone else has/had similar issues when designing their website and if there are any tips, they could give me. Also, if there are any other issues, people had, please share them below as well.

Here is the like to my current personal website if your interested in looking and leaving some constructive feedback 😃. nathantamez.me.

Enjoy the rest of your day. 😊

Top comments (4)

Larizza Tueros • May 24 '19 • 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...

Nathan Tamez • May 25 '19

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

Kevin • May 24 '19 • 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)