DEV Community

TechMan09
TechMan09

Posted on

My new website

Hello!

Not only is this post about my new website, it's also my first post here (So please let me know if I am doing something wrong).

I just wanted to ask for any advice you may have on my website, The TinkerTechLab. Let me know if you like my outline, navigation, and overall content and UX.

The webhosting catagory is completely finished, although the rest of the site is slowly coming together. Feel free to comment on anything (If you see something you don't like, let me know! Although also give me something that you think would be a good fix).

Thanks!

Top comments (16)

Collapse
 
diegofranco2001 profile image
DiegoFranco2001

UI is not good, use tools to improve it, maybe an external css, bootstrap, tailwind. Fonts and colors consistency are an important part to take into account. I can not give you more advices because I do not have enough information about your project. But, generally, good job!.

Collapse
 
techman09 profile image
TechMan09

What do you mean by โ€œNot goodโ€? What exactly can be done to improve it?

Collapse
 
diegofranco2001 profile image
DiegoFranco2001

I'm not a Senior UI designer, I'm Junior UI D. (I learn several different things every day, I don't focus on just one, I'm usually Frontend) ;D. What I mean by "Not good", is that the website gives the impression that it is an old website, therefore, the content will not have much relevance to the user as it conveys the feeling of outdated, no matter how updated and valuable the content is.

Specific points to improve:

  1. Font size, and font types. I recommend that you change to a more user-friendly font for reading large amounts of content, for example: Roboto (Titles), Open Sans || Times New Roman || Montserrat || Poppins (For content), you can use the Google Fonts tool, which helps you select a font and recommends popular combinations for a selected font.

  2. The combination of bold and regular. Define well where the bold and regular fonts will go (the same if you plan to add Thin).

  3. I guess green is the brand color (It is the most repeated color), so, I suggest you look for a color palette and look for combinations that look good with green and at least 2 - 5 (max) base shades of green and define their uses. Generally, for a blog, green is not a good color, but you can get inspiration from W3Schools (W3S uses green and black as main colors).

  4. Improve the size in height of the inputs, and don't combine gray with green :D.

  5. A table of contents in the articles, it wouldn't be bad.

Just by choosing a better font, the content will have more visual and psychological validity. ;D

In case of code, I can't recommend anything because I'm not involved.

I have nothing to do this month, so, if you want me to propose changes, contact me XD.

Good Luck!

Thread Thread
 
techman09 profile image
TechMan09 • Edited

I agreed on the font type, I Dident think I made a good choice, so I was thinking someone would say that. I fixed the font and bolding, but not quite sure what you mean by โ€œInputsโ€. Does it look better now?

I will consider the Table Of Contents. Itโ€™s a god idea, and I will certainly add it to the longer ones, not sure about the shorter ones though.

Thread Thread
 
diegofranco2001 profile image
DiegoFranco2001 • Edited

With the new font it looks even better!

One suggestion I missed regarding the UI, there should be consistency in the elements, i.e. if the buttons have border-radius, the other elements like cards, boxes, etc. should have it.

  • Regarding the table of contents, I suggest you add it to all articles, even if they are small, (Unless the article is just paragraphs), use for it!

  • What I meant with the inputs, is the padding they have, the containing box, must be the same height as the paragraph containing box.

  • Regarding the gray-green combination, I suggest this:
    Recommended img

If you don't really like the idea or you don't have the possibility to change much, just put a green border, round it and remove the gray background, it's enough, ah!, and add some margin bottoms (8px recom.) between and and (12px recom) between an input, and the next label.

With the rest, it is simply layout, here I can't intervene much because I don't know the motives or the main idea of the project. Besides, I think I'm abusing dev.to by adding long comments XD.

Good luck!

Thread Thread
 
techman09 profile image
TechMan09

"Regarding the gray-green combination, I suggest this" Wow, that's so cool! I will certainly add that.

"if the buttons have border-radius, the other elements like cards, boxes, etc. should have it."

Good idea. I think I will ditch the grey background and change it to a darker green.

I would also like to add you to my sites "Thank-you" page for all your help, what username and link should I use?

Thread Thread
 
diegofranco2001 profile image
DiegoFranco2001 • Edited

I'm glad I could help you!

Thanks for adding me, my username is DiegoFranco2001, and the link to my website is:
diegofranco2001.xyz,

If you need more support, you can contact me ;D. Good luck!

The content of your site is useful to me :D

Thread Thread
 
techman09 profile image
TechMan09 • Edited

How do things look now? Be sure to check out Site Credits - The TinkerTechLab for your attribution!

Thread Thread
 
diegofranco2001 profile image
DiegoFranco2001

Better! - I want to join your project, Can I participate as a UI designer?

Thread Thread
 
techman09 profile image
TechMan09 • Edited

Of course! You can contact me at supporter@tinkertechlab.com

Thread Thread
 
techman09 profile image
TechMan09

@diegofranco2001, do you think I should make the main navigation sticky on article pages?

Also, should the table of contents be placed in the sidebar, or below the article title+intro?

Thread Thread
 
diegofranco2001 profile image
DiegoFranco2001 • Edited

I send an apply request to support. I have not replied.

1: Just the breadcrumb
2: That depends of the layout purpose, if you have the sidebar as Advertisements bar, content table must be after the introduction to article.

Thread Thread
 
techman09 profile image
TechMan09

The mail has been received. Your email provider was marked as a spam server by GMail, that is why is was not seen immediately. A filter has been implemented to prevent this in the future.

Collapse
 
manushifva profile image
manushifva

Heya! Welcome to the community!

Here's my personal advice for the web. The web is great, but i think that's need some improvement.

  1. Use sticky head nav. It's annoying to scroll up to seeing or accessing something in the nav.

  2. Change the dropdown. The dropdown making the whole header moving, and that's not that good. Here's a tips to fix that; set the parent position to relative, and the overlay position to absolute.

  3. Use left text align for the newsletter input.

Collapse
 
williamlake profile image
William Lake

Welcome to dev.to!

I took a (very quick) look and at first glance noticed on mobile the search bar doesn't span the full screen in landscape mode like it does in portrait.

I really like what you're doing with the color scheme and the clean design.

Sometimes a visual break can be useful on pages when there's a lot of text. Even just a Horizontal Rule between articles can go a long way.

All that being said Im not a UI guru, so I tracked down a site I always found useful in the past and thought you might as well:

lawsofux.com/

In terms of whether you're doing anything right or wrong in your first post, there's never anything wrong with reaching out for help- great work!

Collapse
 
zastixx profile image
TARUN KUMAR UTTAM

it was Good if you are making for first time
Great work done
Great effort you made
Great use of time