9

In follow up to this question: Critique: Tritium software logo design. For reviewing the website code (performance, bugs, related user experience), please visit the sister question on Code Review.


I am looking for a review of the design for my Tritium website (source code).

enter image description here

Specifically:

  • One goal of the website was to keep it simple. Have I accomplished that?
  • Do the colors in my palette complement each other?

  • Are all of the past critique implemented correctly design-wise? Did I go overboard?

  • Does my font choice work well with the rest of the website's look and feel?

  • Are there any design concepts I overlooked and haven't implemented?

I am still somewhat new to website design, so please be as harsh as necessary with this.

4
  • I think the colors look OK. Obviously I don't know too much on the background or consultation of the design, but I personally use the Eye Dropper plugin for Chrome along with Paletton.com. It gives you a great range of flexibility in choosing the right colors. The Eye Dropper tool also gives you lots of options for declaring that color in CSS/HTML. Commented Aug 18, 2014 at 14:09
  • When clicking "Visit download page" a new tab is opened but I didn't notice that, because a popup showed up and I thought that was all that was supposed to happen... If the new tab was opened and put in focus the user wouldn't miss it. Using target="_blank" should do the trick (check out w3schools.com/html/html_links.asp). If you also made it look like an ordinary link (blue, underlined or similar) I think people will assume that it opens a new tab. Commented Aug 18, 2014 at 15:59
  • 1
    I agree with the critique on the pop-up. I would add a button in the pop-up to click that will then continue on to the github page, rather than opening two things at once. Really great job on the site by the way.
    – Hanna
    Commented Aug 22, 2014 at 2:34
  • I would give the popover that appears when the Visit download page link is clicked a bit more padding between the edge and the text, and probably also down the size and leading of the copy in it a bit. And add an event listener to register escape clicks to get rid of the popover, too, while you’re at it—popovers that don’t react to escape clicks are an annoyance to the user. :-) Commented Sep 22, 2014 at 21:38

4 Answers 4

1

Great design! I especially like the atom animation at the right.

I like your colors. As an alternative you could use a dark blue for the background. This gives the page a deepness like the night blue sky:

Screenshot of page with alternative color palette

I used Colorizr.js to play with your color palette. If you would like to fine-tune your colors use the following settings that fit your page:

Colorizr.js settings

The colors are from top to bottom: rgb(25, 33, 44), rgb(14, 191, 14), rgb(212, 212, 212), rgb(26, 40, 60), rgb(26, 40, 60)

1

I think the website design works. I like your transitions for the header links. Clear and concise communication.

Color palette reminds me of a nutrition company or similar.

I think font choice works well for tech-related website. I would probably scrap the serif face for a complimentary sans-serif face, but that's purely personal taste.

Also, I noticed that in terms of responsiveness, a dropdown might be useful in your headers when viewed on small screens (mobile). As I am new to the coding side of graphic design, I thank you for including the source files. I will probably dissect it and learn some of the header transitions you implemented.

0

Not exactly a design issue, but on usability -
The site says it is FREE, but when you click 'VISIT DOWNLOAD PAGE' the pop-up asks for a donation. What if I don't want to donate before trying the software? There should be another option like 'CONTINUE' or 'CANCEL' so that the user can actually visit the download page and download the software, if is he / she doesn't donate.

So I'd recommend redesigning the layout of the pop-up and including another button as suggested.

-2

You won't win the designer of the year for that. But the less there is, the less there is to dislike I guess.

Your yellow version of the icon has ellipses taller than wide:

enter image description here

It is weird looking and even weirder as a mustard on gray when it is put in the browser tab icon. If you are going to make a browser tab icon then just make it dark gray or black.

It seems like there is just one thing to click on which is "visit download page". If that's all you have, why isn't it the page?

It asks for money but my browser doesn't give anything else. Maybe it does in your browser, but I use TorBrowser and you all should too. NSA is evil. Anyway, for what it is worth, it just pops up a dialog and does nothing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.