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
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
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
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.
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
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.
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
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.
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.
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.
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’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
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.
