Hacker News new | ask | show | jobs
by djehuty 5071 days ago
I intend this as constructive criticism, so I hope you understand that and take it as such: please hire a designer. Email is an app one stares at all day, it has to look good. Not fancy, but restful and pleasing to the eye with function dictating form.
2 comments

I agree. It kinda looks like a HyperCard stack.
I promise I will hire a designer as hire #1, I'm aware my design is atrocious :D
You should be able to fix the readability of this without hiring a designer. Not that you shouldn't hire a designer, but you shouldn't wait to fix it before you hire one either. Since email is all about text, if it looks unreadable that's going to be a big turn-off. Read at least the next paragraph of my post!

To start, I would reduce the font sizes on your header-type items somewhat. It's clear that you're using large fonts and bold to emphasize key information (which is the right idea), but a heuristic I've found is that if you're using bold, your font doesn't need to be as big, or if you're using a large size, you may not need to be bold. When you do both, it's like an assault on the eyes, which you don't need here. Doing this alone would make your app like 75% better (note: I made that number up entirely and don't know very much about your app.)

Next, you could tone down the reds (I would change the hard red #F00 color to the softer pink-ish color, and then reduce the pinkish color further), and exchange the black on white for something else. For your icons, you could experiment with grays (I like to start with #333 and then go up or down), so they're less overwhelming.

Finally, add some labels for your icons. Remember how you made your fonts smaller before? Well that applies to these labels. They should be contrasty so you can read them, but otherwise it's fine if they're subtle.

A couple of minor points about your website: the proper name of your competitor is Gmail, not GMail. You should add more spacing between your icons and the text (it feels crowded currently.) Also, your circle arrow jobs are getting cut off at the bottom.

Finally part ii: don't forget to steal from others. Obviously I don't mean blatantly stealing a design, but just check out what other sites do. To do this effectively, you have to pick a particular thing and examine it closely. So for example, if you want to figure out how to do headers, go to other sites and see what they do to give emphasis to things without being overwhelming.

I actually like the red and black. It is powerful and direct, but probably won't appeal to all sensibilities. Good luck.
Yes, once-upon-a-time it was #F00, which felt like your eyeballs were getting torn from their sockets

Design is something I find quite difficult, and I usually keep my head in the backend

I really, really, really want to hire a designer so I can stay there, but being self-funded makes that impossible

It's not just the color scheme, in my opinion. I'm not a fan of the font, a lot of the icons don't carry semantic meaning (for me, YMMV), etc.
The font is Segoe UI, I did that screenshot before I bought Proxima Nova, so the font will become Proxima Nova (I may Instapaper this and give you a bazillion settings for it)

As for the icons, they are a very tricky subject, I intended to create symbols for major features such as Funnel and Triage and have common icons for everything else, but it seems I've failed there

Which icons don't you like?

Typekit gets you Proxima Nova as part of their package among others fonts. It's not bad, but for something like email, it may be helpful to use the standard stack of fonts.

My app sends emails (not a competitor). The interface uses proxima nova, but the email rendering is generally in an iframe with default sans-serif or serif font-faces.

If you use sans-serif as the first font-face that will default to Helvetica on Macs and Arial on Windows.

I generally don't like toolbars with lots of icons that don't have labels. Google's web properties have been moving in this direction and I find myself having to click buttons to figure out what they do.
How do you feel about hover-over Twipsy sort of things?

So when you hover over, a tooltip appears underneath the icon?

NO MAIL FOR YOU!