Hey there everyone. I’m starting to blog about some projects I’m working on, I’ve dubbed it ridiculous rails. It’s just a fun way to structure my learning.
It’s a four column grid style with centered titles. I’m happy with the fonts, and layout, for now, but I’d like to make the page just “pop”, a little more.
Can any designers take a look and recommend some things?
On that page you have, you were asking for other ridiculous ideas. I have got one! Musical Theatre Karaoke!
My wife and I are musical theatre fans. So couple months ago I went to a Musical Theatre Karaoke event (nerdiest event ever but was so much fun, imagine 10 engineers/scientists singing “Do you hear the people sing…” from Les Miserables).
The problem was the whole karaoke flow. I’ve been toying with the idea of creating an app that makes it less painful. Ideally, it will have a backend that parses emails sent from youtube and save them into a proper “event” (youtube being the richest source of karaoke videos and sharing via email is necessary because there were andorid/iphone/windows users all trying to submit at the same time). The front end will be some type of live event driven thing where users can see videos being submitted live and the “owner” of the event can reorder or reject video submissions.
The key problem I’m trying to solve is if the host goes out to find another song on youtube, the entire room has to stop singing and wait for searching and validating (many videos have lyrics or just bad music). We tried youtube playlist but for some ridiculous reason, it doesn’t refresh on googletv. It would be much easier if all users could just do the finding/validating independently on their own, hence the phone idea. All the host needs to do is worry about ordering (fairness). Anyway, anyone else interested please let me know. Perhaps it would be a great pairing thing too.
I’m not sure exactly what your target audience is, but the Frat or University style headings might not be the right message. Then again, if you’re going for get drunk and go pee on a children’s play equipment type of ridiculous then maybe the frat boy typography is okay.
Obviously you don’t have the solutions filled in yet, so it’s hard to comment on the design because this huge visual element is missing. I like the simplicity of the overall design.
Another aspect of the design is you’re not making any promises to the viewer. Tell me what I get for reading the rest of the page. What am I going to learn? Why should I give you another 30 seconds. Where to go to get started? There aren’t any guide posts.
Again, it’s simplicity is attractive, but you’re missing some key pieces of guidance for your users.
I too enjoy the simplicity and the reliance on typography. That said if you are going to rely on typography make sure it is spot on. I agree with Noah that your type choices seem a bit off. Be careful picking fonts from google fonts most of them are not great (you get what you pay for). Here are two lists that could help with narrowing down those choices: http://sachagreif.com/google-webfonts-that-dont-suck/ and How to Write an Essay About Happiness: Smart Guide | hellohappy.org
A couple other problems within your design:
Your header and subheader have too much space between them
Your dividers are coming off really strong and getting more emphasis than they deserve. I tone them down a lot. Also make sure the space around them is consistent.
Your navigation looks like it is floating in the middle of the page. It also doesn’t go to anything
As Noah pointed out you are missing videos which throws off the balance of the site
Let me know when you make updates and I’m happy to look at it again.
I agree with Kyle. One nitpick I noticed is that you’re using a fake bold on your header and on “The Latest Challenge” text and “solution videos”. Graduate, the font you’re using, only comes in one weight (400), so when you set the weight to 600+ or to “bold”, the browser auto thickens the text and it becomes much less crisp. The blurring is more obvious on “The Latest Challenge” etc. than the header because that text is smaller. I’ve attached a screenshot to illustrate — notice how the fake bold also destroys the subpixel hinting on the letters.