Agreed.

Here are my 2 cents.

I would go as far as having one single item in the menu : Contact

We don't need the other 2. It's only one page, About is the top and Work is just after, most likely visible on page load. Get rid of the burger menu.

I'd make a few other edits:

loose the hello-my-name-is tone and go straight to the point like the rest of the page does. For ex. :

• Yarosky Cruz
• Interactive Designer in the Sunshine State
• I do web/app design and front-end coding

The intro section needs further tweaking. You don't need all those margins upon margins and percentage width breakpoints. It makes awkward word-wrap (and a taller than needed section) on everything under 1200px.

Same thing for the contact section. For ex. :

• emailaddress@@gmail.com
• LinkedIn — Twitter — Instagram — Dribbble
• Or grab my phone number on my resume

Make edits for narrow viewports. Quick ex :

Before:

After:

Your images look blurry. Use 2x images and SVG.

Also agree with Cristian Moisei's and Matthew Blode's comments.

Don't fade the pictures, it makes the colors look washed out. The scaling hover effect is enough. Would be nice if you had one effect on the whole item, including the title, instead of one for the image and one for the title. By the way, html5 is just fine with you using tags to wrap divs or other block-level elements. Just make the itself a block-level element.

Do something about the footer, it looks bad when it doesn't reach to bottom of the screen. Make the page background the same color or stick it to the bottom or anything else that says: I took care of it. I would just remove the footer.

Add a way to navigate the works on work pages. A basic (looping) previous/next nav. will do but don't make me go back to the homepage every time.

Work the style (See live demo links, color scheme, etc.)

And finally, please don't mind the imperative tone, this is just an opinion :)

What to think of this...

It's unfortunate that they are not accompanying this with statements about the future orientations of the company or even better, a new product release or major update. It comes off as snooty when it could mean "moving toward new directions". It says "I want to be bold and cool" so loud that it's struggling at telling something else... like what Dropbox concretely does, for starters.

That being said, I think they are still great with illustrations.

Now for the self-promotion : I did an unsolicited brand refresh of Dropbox a while ago. It was the exact opposite — incremental — and looked like this :

Dropbox brand refresh on Behance

ajgm.xyz

Built over Behance projects (API)

Well, if letter boxing is not required, it's a design choice. Have the illustration overflow, like on the welcome part, and it's clearer.

But then, my point was: I think those black parts/bands add to the look. I may have forced it too much on the exemple ^{^}

Hey!

This is a nice looking website. So I'll focus on a styling detail for the sake of conversation: borders. I think it looks better with thicker borders, adds some character, gives a nice contrast.

I made a quick test to get the idea, see these captures:

Normal vs Thicker

Or when you first load the homepage. There is this band that you can close (the one saying "Welcome! In honor of our new site..."). I closed it, and visually missed it. See captures:

With vs Without

Anyway, those were my two cents. Then, nice looking website.

Thanks a lot!

I think it's very interesting, so here is a lengthy comment. You can mentally add « I think that … » in the beginning of almost every sentence. I did not for the sake of brevity and not being overly repetitive.

The Eye

The intention behind this route is valid and straightforward but the execution is miles away. This really says « Big Brother is watching you » and « Sauron’s Evil Eye will find you ». The black and yellow does not help. I get the « watch out for you » sentiment but making a connection to this logo is more of an intellectual process, whereas the evil eye is a gut feeling, instantaneous like a reflex.

Two eyes might help shifting from internet dictator to internet’s friendly Sully. Or teeth (see t-shirt). Not convinced this would be the right look anyway. It does take Mozilla’s history into account though. And you could argue that it makes sense to look like a friendly bestiary when most people knows you for something called Firefox.

I suspect that the designers at johnson banks knows it all and that this route is made public as a « let’s check what people see in this one », that’s the whole point about the open design process.

The Connector

Clear winner for me. Strong concept and execution that embrace the values of Mozilla in a broad non-geeky way. It has an Olympics feel in it (in a good way) which says a lot about celebrating humanism and human potentials. It also takes multiple shapes without looking forced, making it flexible, even more coherent with the concept and very expressive (the « Maker Party » version is spot on). The black background version is a nod to NeXT, nice touch for an internet related entity like Mozilla.

The « Developer Network » one (and « All Hands » one, to a lesser extent) is really subpar compared to the others.

Not so found about the Privacy, Open Systems etc. They look kinda random:

• Privacy works in an (good) obvious way.
• Open Systems works by comparison to Privacy but does not make much sense alone.
• Web Literacy happens to form a « W » but is the only one depicted by a letter which feels like « that’s the only idea we had ».
• Speaking Out may be some kind of open mouth. It mostly feels like « we had to pick a symbol from the logo, so… »

Taking these symbols (if they are needed at all) from parts of the logo doesn’t add much and is far too restrictive.

Overall it’s a solid starting point with lots of obvious ways to tweak it in its current form and see if it feels better (colors, thickness, ends and joins shape, backgrounds… ). The stroke width could use some work to look correct. Right now, the « o » looks thicker and « m » thinner even though they are not.

The Open Button

The most uninspired of the whole to me. From the concept to the execution. Yet another smiling figure. Smiling but looking sad. It’s vague and says « digital tech stuff » in a dated way more than anything else. It looks extracted from an 80’s signposting system: men’s room, information, locker, baby changing room... Or an on/off switch on a tape recorder. Is it bad enough to switch Mozilla off ? I certainly hope not. Then the type looks mismatched. And why is the « Not closed » figure angry ?

Protocol

Feels obvious in a geeky way. Should Mozilla’s public face speak in a geeky way. I don’t think so. I think it should be broader.

It definitely works but I’m not convinced it’s the right tone for Mozilla to adopt when they need to make a statement of how great they still are to less and less people using Firefox.

The current execution looks really Microsoft-y. The blue doesn’t help. The single color versions of the full name work better. They don’t emphasize M:// (or is it oza ?) and it’s not lacking. The whole thing, with it’s safe blue and Helvetica bold + light is too quiet.

Wireframe

Very obvious execution of an obvious concept. Not that it has to be a bad thing but in the particular case, the mariage of the symbol and the type really screams designer’s underground t-shirt brand if I may be caricatural. It sets it in a a trendy realm, which could end up being a very short-lived one.

Impossible M

Nice concept but like the « Wireframe », the execution, from the patterns and stroke/fill color choices to the font family and tracking, really sets it in trendyland with all its downsides: there are tons of logos and graphics like it right now as it’s one of the current best-seller to look « edgy », it doesn’t say much and it could be over 6 months from now.

All the derived material, like the WebMaker, MozFest etc. symbols and catch phrase posters, are just that times 1000.

Flik Flak

Makes for cool illustrations and goodies but for a very complicated logo. Like with the other routes, the derived symbols (MozFest, All Hands, Speaking Out etc.) look forced and superfluous.

It’s hard to decipher but it doesn’t lack in originality which is really what ties it to the concept behind it. It has a slight dated look to it though and I am suspecting the color scheme.

It would be a shame to ditch it without some further rework though.

This is escalating quickly...

So the principle here is bigger hit target = mobile, smaller hit target = desktop

As I see it the principle is not that mobile needs a bigger hit target than desktop. The principle is that touch needs a bigger minimum hit target than mouse.

A 40 something pixels wide icon button on desktop does not necessarily need to be bigger on mobile. A 12px checkbox does.

Checkboxes and switches serve the same function : a boolean widget. Switches did became a thing with the first iPhone where it made sense to have a bigger hit target. They could have make a giant checkbox, probably tried and decided it was ridiculous and ugly. They could have make a regular checkbox within a larger hit target but not only did it make sense to have a bigger hit target, it also made sense to look like it. As a bonus switches were way cooler (remember how slide to unlock blew everybody’s mind). I feel like switches sort of became a mobile trademark.

A button does not have these issues thanks to its very flexible shape that both makes and shows the hit target. The button might benefit from a label so that you know what it does, desktop or mobile, but that is an other story.

The problem with your principle is that you're only looking at the superficial cosmetic appearance of switches and ignoring the underlying mechanics of it.

Usability and affordance are hardly superficial cosmetic issues.

You are stating your point as an actual fact and refusing every other reason to choose between a checkbox and a switch. Your point is not an actual fact. Checkboxes and switches make what we make them do, instant or not, desktop or mobile, web or native.

And then in the app landscape in 2016 :

Desktop native apps, where you use a mouse, are filled with « instant » checkboxes. Mobile native apps, where you use your fingers, are filled with « instant » switches (and « instant » checkboxes on android and windows).

Switches are native widgets of native apps on touch-enabled platforms. Not on traditional mouse controlled desktop, not on the web.

As a user, I do expect both checkboxes and switches to act instantly in native apps and to need a form validation on the web. Not as a rule of thumb but because that's the way I've been accustomed to in most cases.

It does seems like it comes down to mouse vs touch and/or native vs web. These are the facts.

What I think : Do not present your opinion has an actual technical fact and you should do just fine.

Instantly think of "Day of the Tentacle" every time I see the Rails logo ^^

Still do.

It has to be on purpose by now.

I agree. It's very unoriginal but I think it's not that bad. The drop shadow is hard on the eyes but you can definitely feel some restraint on the ChromeFX™.

Restraint they could have used on the whole header. Or maybe it's me and it just lacks some sweet Chamfered Edges ®^{^}