Over the past few months, I’ve been called to task to do a good deal of development for the web. Whether that be in the form of programming/development or more on the front end in terms of PSD development of concept/layout. And, being who I am, that means three times the amount of time I’m working being invested into research — immersing myself in what is, at the moment, considered good work. And that’s something I’ve tried to do since before I left college. It’s a mantra one of my professors passed on to me, being: “Constantly surround yourself with good design, so you can immediately recognize bad design.” Thanks for that Ben, it’s something I’ll carry with me always and teach to others.

I’m fascinated by just the massive amount that can now be done with CSS3, HTML5, and JQuery (while maintaining the ability to fall back to previous browsers that don’t support them without horrible train derailments).  The possibilities are a constant stopping point to imagine the different ways in which these technologies can be leveraged to convey information in interesting and memorable ways.

Below, I’m listing some amazing sites that I’ve found in my journeys that employ the best of current web standards and practices. Gone are the boring sites of the 90’s and early 2000’s with their awful tables, unnecessary flash components, and overuse of antiquated practices (in the modern vernacular known as ‘sins’), such as: constant elipses, exclamation points, 1024×768 box-floating layouts, and unoriginal (and uninspired) stock resources.

Hello media queries, responsive design, and innovative thinking.

[quote] “Gone are the boring sites of the 90’s and early 2000’s with their awful tables, unnecessary flash components, and overuse of antiquated practices (in the modern vernacular known as ‘sins’), such as: constant elipses, exclamation points, 1024×768 box-floating layouts, and unoriginal/uninspired stock resources.

Hello media queries, responsive design, and innovative thinking.” [/quote]

 

WeTransfer

wetransfer

I really love the feel as well as the mechanics of WeTransfer. It seems like I’ve been using the free capabilities of yousendit forever, so this service not only offers 2 gigs of free uploadability (yeah, that’s a word), it also offers just an absolutely beautiful and ballsy approach to site design. The tool that the site is built around is off-center and not some enormous Gundam of an interface. It’s simple, clean, and to-the-point. No bullshitting with unnecessary fluff. The user’s there to do one thing, and it’s obvious what it is. The giant background images that gracefully transition in and out just make the experience that much more rich and inviting to stay longer than your upload may take to complete.

 

MAILBOX

MailBoxApp

This gem came known to me mere hours ago. The site design is wonderfully simple. I especially love the marriage between the color choices in the cellphone line art illustrations and the corresponding headlines in the text boxes adjoining them. Everything is open and accessible. Some of the deeper pages really shine in another way in that they very masterfully handle an abundance of copy with excellent web typography and hierarchy.

 

Kuvva

Kuuva

I actually found Kuvva thanks to WeTransfer. The way you navigate through this site is so different from the boring, boxed style navigation that’s ruled the web for eons. I’m constantly on the hunt for how people are approaching site navigation that break out of the norm of ‘it’s either above or to the side.’ This site is just so wonderfully clean and simple. Scroll or click the navigational dots and enjoy as the page subtly transitions to the next section, changing the display aspects of the app and shifting the color scheme behind and around it. And really, that’s all it needs isn’t it? No need for a plethora of puns and one-dimensional, literal statements. It speaks for itself, without even having to speak.

 

ETCH

etchapps

I’m such a supporter of the modular, geometric turn a lot of ‘future-forward’ web design is taking. It’s amazingly clean, easy to navigate with your eyes while digesting content, and my God, look how well it reflows as you resize your browser. It works absolutely hand-in-hand with responsive design principles. As if that’s not enough to merit some eye popping, click around on the iconographic navigation. The site reshapes and transitions according to your selection. Smooth, graceful easing. No clunky, resource-heavy animations. Also, note the typography. Beautifully simple, incredibly smart.

 

WELIKESMALL.

welikesmall

WELIKESMALL. is intriguing to me. The navigation is that numeric list just sort of nested to the right side there. Scrolling through the contents, everything seems very current in terms of design trends. Sort of noisy and abstract photographic treatments and smart typographic choices. I’m a big fan of how each navigational element pops out a small video to the side of it. Also, on the usability side, it’s really nice to see each featured element have a call to action to allow the user to explore further is so desired. Delving deeper into the site, the design doesn’t falter at all. The layout is reminiscent of Apple’s site design in that it’s open with nice type and image treatments to aid in digesting all of the content while still being widely interested, if not hungry for more.

 

MapBox

Mapbox

Again, kudos for some really well done responsive design. I like the playfulness and soft color tones of this illustrative look and feel. It’s a breath of fresh air to not feel like it’s screaming ‘stock illustration’ all over it. Great, simple step processes along with some very open design. The site is easily navigable and genuinely interesting to explore in terms of content and ‘what happens next?’ with the steps buttons. And the pages aren’t all white space either, they break it up with sections that heavily contrast and heavily feature certain imagery, contrasting to other areas where it’s large, simple vector infographics and iconography. Just, really well executed.

 

PROMISE UP

promiseup

More of this awesome implementation of hard-edged geographic elements and colors outside the norm. Great walkthrough in how to use the app and the meaning behind it, as well as just really dialed in UI design across the board. I love the typeface choices and treatments. Not afraid to blast the all caps and reversed out executions. No playing it safe here with conservative, dated design aesthetics. This is balls out contemporary if not somewhat future-forward.

 

Banger’s

bangers

this site grabbed my attention immediately with all the things going on. It seems like it’s so dangerously close to being crowded, but it performs SO well. Every element seemingly hand drawn or hand printed at some point, leading to just this wonderfully rich and warm feeling brand that transports us all back in time (of course the sepia toning helps with the flashbacks too!). I really like how, as I scroll through the site, the footer meets up with the header and locks in, joining me on my journey through their content. You’ll also find as you hover your cursor over the main masthead image as well as other pieces, little quote bubbles pop up, adding humor to an image and feel that might otherwise be seen as on the serious side. Next time I’m in Austin, I imagine I’ll hit these guys up.

 

DATA DRIVEN LONDON

datadriven

Nice and simple full width design work here. Spaced out typography that’s tastefully placed and treated. It’s not image bombardment or sensory overload, it’s just what it needs to be. Simple. To the point. Honestly, just good.

 

The Experiential

theexperiential

I was won over on this one with the animated graphic element at the very top of the page that’s requiring no flash to work. Everything about this index page is strong, yet concise. I like the bright colors and textures that’re contrasting between sections as well as the subtle enlarging of the sections below the fold as you roll over them with your cursor. It’s an appealing UI that got wheels turning in my head for some things I’d maybe like to try in the future.

 

DON’T TALK TO ROBOTS

donttalktorobots

Favorite thing about this site, hands down is the left aside. As you scroll through the page, THE ROBOT IS ASSEMBLED! It’s a well constructed site, making use of some great contrasting elements like line art devices and full color, produced contents within them. Even though there are several JQuery sliders employed on the index page, they’re colored and placed subtly so they fit in with everything else. Everything’s wrapped in the great, quirky brand possessing some real personality.