Website Review

Hello!

Just finished the basic UI and content for my first website that I actually decided to push live. I was wondering if anyone here could give me some feedback (Critical is welcome, but please give a reason and a solution) on how it can be improved (Yes, I am working on more content, but if you think the existing content needs work, please let me know).

Thanks in advance!

Oh, cannot forget the URL: tinkertechlab.com

And if anyone wants to check out the “tools” page that is still under construction: tinkertechlab. com/tools

Basically I like the design because it has lots of open space, also the navigation is good and responsive.

Did you create the design yourself or is it a template?

1 Like

The one thing that stands out to me is the the horizonal alignments. On the homepage the Web Hosting section and Htaccess section have the same width as the the content in the footer, which I quite like.

The coming soon section is narrower.

I see on the tutorials page you have this narrower width as well and on the SEO page there is a side menu with a small left margin, which again kind of stands out to me.

It could be just peroneal preference, but if it were me I would be looking to keep the layout consistent. That might mean widening the body content to match the footer content, or narrowing the footer content to match the body.

Apart from that I’m with John_Betong and like the use of space and it’s easy to read. You have also got my interest with your upcoming 3D printing section :slight_smile:

5 Likes

It’s a very clean design.

Suggestions:
I suggest tightening the copy on the About Us page. Remove the "Why is this page so blank section and everything in parentheses. You’ll sound more professional that way.
Change “We are secretive people (person?) who love(s?) technology,” to “We love technology,”

The Support Us page can use a graphic designer who will bring consistent, color-coordinated graphics to the page (and a consistent look to the site as a whole). As is, it shows a clipart approach, typical of a do-it-yourselfer.

Legal > Terms of service: “but please let us know by emailing at … so we can try to find a solution that works for you” Excellent! +1

1 Like

Overall, nice and clean.

A couple comments, though:

  • The green hover color is concerning as the contrast ratio is off when displayed and the item being hovered becomes much harder to read. This is most noticeable in the menu, but it is noticeable everywhere the hover color is activated. Luckily it is just the hover and not the main color, but something to consider.
  • Watch spelling and punctuation. There are several throughout the site but the contact us has the most egregious since it’s all on one line.
    • notifyed should be notified
    • cupons should be coupons
    • dont and wont should be don’t and won’t
  • Some of the pages having larger margins on the content and others having almost none is a bit jarring. Consistency would be good.
  • Can the green background on the contact us be tweaked a little? It’s a bit…bright
  • If you’re going to use dropshadows on the cards, use them on the buttons too. It seems off to have one but not the other. Front page is most noticeable for this.
2 Likes

Custom coded with the help of a knowledgeable UI/UX person!

Thanks! I do agree, and will look into fixing it without breaking everything else :lol:

That was one of the first pages I wrote (About an entire year ago) and I never re-read it since (Although probably should have). I agree with that as well.

Yep, and ever since the UI got redone, the aspect ratio is off as well. That one has been on my to-do list for a bit of time now.

:blush:

Agree. Do you think making the text bigger/bolder when hovered would help it out, or just change the hover color?

Darn. Those were fixed before, but I must not have changed them on my backup, the backup I used when I completely messed up. Will fix that :hammer_and_wrench:

This background?

Now that I think about it, that makes sense.


Thanks, everyone for the replies! I honestly did not expect this much feedback.

1 Like

I would change the color, personally. I took your color choices and put them into the webAIM color contrast checker and as you can see, the combination is not good.
image

WebAIM is not a be all/end all tool, but it is a good indicator that people are going to struggle using the site, and possibly not return.

Yes, that background. I think it clashes with the white background. Perhaps if you just add a dark border around the fields. I used your menu green as a border in the screenshot below, and find that less harsh to look at and more pleasing to the eye.

2 Likes

I kind of like it boarderless. Maybe just add a border when the field is selected?

Your site. I personally find the green against the white background bright and hard to look at - of course, the contrast ratio 1.04:1 which means they’re very close to each other.

But it’s your site. If you like it borderless, it’s your call. It may just affect people using your site slightly is all.

1 Like

I can’t give you the low-down on colour theory, but you might have a bit of fun with this
https://color.adobe.com/create/color-wheel

1 Like

That is kind of fun to play around with, and it will certainly be useful later! It has been added to my overflowing folder of bookmarks :slight_smile:

2 Likes

So I have come across this stat twice today, once on the adobe colour wheel site and again just now on an MDN page on document and website structure.

Taking @DaveMaxwell 's comments into account I thought it prudent to post.

Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion

Just for your consideration :slight_smile:

2 Likes

Oops. I thought of that when the logo was created, but not when designing the actual site. Do you know of a good way to test this? Otherwise, I will just generate print previews in blank and white.

I confess I am a bit ignorant on the matter. Here is a couple of links though.

5 tips on designing colour-blind-friendly visualizations

I’m not entirely sure it would make a huge difference actually, given the greyscale shades don’t seem to shift. The only change would be your green shifting more towards a yellow in some cases.

I am somewhat in agreement with DaveMaxwell on the lack of contrast though, in particular the main nav when you hover over the menu items. Obviously not as vibrant but you do have that darker shade of green in your logo. Just a thought :person_shrugging:

2 Likes

This might also be of interest, as a downloadable tester which includes colour-blindness simulation:

I believe if there is sufficient contrast to pass the accessibility tests, then the site should be accessible to anyone with colour-blindness. The colours might look odd, but presumably they would be used to the world looking that way.

2 Likes

Hello again!

I made a lot of the changes that you suggested, as well as a few more, would you mind taking another look?

Main page: tinkertechlab.com
I also made a few changes to the UI in tinkertechlab.com/webhosting/htaccess. The “Webdesign” category is almost done, and should be released within a month.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.