Warning; I'm going to have a brutally honest opinion here.

It's better to start over. With a proper UX design, a proper visual design and a good quality frontend developer. Or at least, as close as you can get.

My first few thoughts on the design:

The design language doesn't seem to convey anything. Whoever chose that color palette? What are the core principles it's supposed to show you?

Elements are severely misaligned all over the place. There is no coherency, composition or vertical rhythm to be found. It has a hodgepodge of font sizes and weights without clear typographic hierarchy.

Links are actually missing a hover state. Buttons have a hover state, just don't expect it to be noticeable. Just like the font size on the buttons - those are 12px. We don't have 1280x1024 screens, unless I've somehow traveled back in time to 1999. 16px minimum, please.

There is too little breathing room on mobile. It's not actually responsive, it just collapses on a single breakpoint. That breakpoint is also in the wrong place (960px), making it too big on tablet portrait (750px buttons, really?) and too small on desktop (960px max on HD+ screens, even 2.5K screens - really?).

It looks like it's made with an off the shelf layout framework without any sort of customization. There's a horrible google calendar embed - why not a simple, integrated solution? There are upscaled(!) PNG logos on there (Chucklefish, Yelp) - why not use a vector file, like decent folk?

Those design patterns are barebones, but work reasonable well on the homepage. However, the moment you click through they seem to be (ab)used for anything and everything. Where are the other, less generalized patterns? And why are the patterns not actually designed for mobile as well? Just dumping all the buttons below each other and making them 100% wide does not make for a good user experience. For that matter, why are there not more effective patterns used? Code example could really use an, oh I don't know, inline code example perhaps? Fortunately, almost all links go to external (sub)sites -without warning- so you won't have to look at this for too long. Just a shame everything looks different from each other, even subsites.

Where are the loving touches? It doesn't have to be a christmas tree, but a little transitions and effects go a long way.

As for the code:

A display font is fine, but preloading six (6!) font weights of the body font, just on the homepage? And not even .woff2 or .woff, but huge .ttf files at that! That's about 3MB of fonts. Nice when you're on 3G; you can see the webpage building up.

It seems to use utility classes. The responsibility for style composition should be in your stylesheets, never in the HTML. The classes look like some clever backend developer cooked them up: "v-top pl4 pl0-l pt0 pt3-l measure-wide-l mw4 mw5-ns w-100 mw-none ph3 mw8-m mw9-l center f3". There, everybody intelligent will immediately know what it does! If you rely on good will for maintenance, this will limit the amount of developers willing to dig in.

Also, there are 4 different CSS files, separated for no apparent reason. Three of which aren't even minified.

SVG illustrations should be placed inline.

As someone with an enmity for big javascript libraries used in the wrong places, the fact that there's no JS should be wonderful. Except that I'm guessing that's part of the reason those design patterns are so barebones.

There's lots more, but let's pick the low hanging fruits first.

PS: I prefer this version: https://www.rust-lang.org/en-US/ ;-) It might be stamp-sized visually, but it does some things much better.

1.	Responsive photography on the web – the right way(medium.com) 2 points by disillusion 5 years ago \| 0 comments
2.	Responsive photography on the web–the right way(fabrique.nl) 1 points by disillusion 6 years ago \| 0 comments
3.	6 years ago \| discuss

user:	disillusion
created:	January 15, 2017
karma:	76