The Dribbble of 2019

Screen Shot 2019-11-03 at 11.47.10 AM.png

Dribbble is where designers post their work (also called a “shot”) to gain exposure, get feedback and potential nab a job.

I saw the founders of Dribbble talk about their platform several years ago. They talked about helping people get constructive criticism while deciding on which direction to take their work and emphasized the posts that were in the sketch-phase. That Dribbble is no longer in existence.

Today, it’s a place where designers post polished work that is often the end result of many hours of pixel pushing. This high fidelity work is beautiful, and the beauty of everyone’s work has ultimately transformed the platform into a fashion show that’s more eye candy than thoughtful user experiences.

Moreover, designers are starting to use Dribbble as a reference for an aesthetic that you should follow. Highly large radii on card layouts, parallax motion, spring interactions, rounded sans serifs, huge colored drop shadows high on blur, the same glowing chart that is measuring wealth? fitness? brightness? They are everywhere.

There’s many, many UIs that appear clean, because they only use icons. But on closer inspection, you realize that you don’t know what any of the icons do. There are endless onboarding tutorials that are beautifully laid out, except that nobody – I mean nobody – reads onboarding tutorials that are three screen long. There are gorgeous text fields where the outline and suggestion text is so faint it would never pass an accessibility test.  Design is more than pretty images. Design is about usability, function and intent.

As a designer, Dribbble is fantastic for getting visual inspiration for your next app design or ideas for micro-interactions that are fluid and unique. As an employer, it tells you how good someone is with a software program that they could have just learned a week ago and how well they can copy a style. If you want to look for real design, look to the real world – ask people what they are doing, how they do it and what their habits are to developing success in their field. I promise, there’s good stuff.

Intentions & Execution of Design

“Look at this website,” my coworker said with his eyes rolled. I swivel my chair and peer at his screen. The website features a multi-colored word art title with a textured background that may have been popular twenty years ago. We both groan at the lack of professionalism the site shows.

We’ve all experienced the frustration of seeing bad design. Our gut reaction as designers is “someone ought to fix it.” Sometimes, we take it upon ourselves to fix it.

Several years ago, I saw a popular website that was promoting goods made in the US. The content was great, the navigation worked, but the styling of the website was appalling. There were boxes upon boxes, unnecessary drop shadows and weird illustrations that didn’t really make sense to me. I decided right there and then that I was going to redesign the site and then send the site owner my work.

I spent a weekend coming up with a new design for the site. “This is so much better,” I thought as I stepped back from it.  I emailed it to the owner, happy with the result.

A few days later, I got an email back. It went something like this: “Your designs are lovely, and I really like the ideas you came up with. But I’m really proud of the little drawings I did for this site, and I want to keep them.” I was exasperated. The drawings on the current site were, in my opinion, terrible.

It was then that I realized something. Even though my execution of the website was more modern and professional, the site owner clearly wanted her personal mark on it. I realized that maybe she wanted the website to be funky and unpolished. I was the arrogant designer, coming in and telling her to change something that she clearly did not want to change.

Jared Spool, keynote speaker at the User Experience Professionals’ Association Conference (held yesterday), spoke about this exact topic. In his presentation, a designer named Tyler Thompson saw the boarding pass for Delta Airlines, which can be difficult to comprehend at first glance, and decided to redesign it so that it could be “better.”

unnamed w

Tyler’s design is beautiful. It uses modern fonts and rich colors. The flight, gate, seat and zone are clear to the customer. But Jared pointed out a few things about this design: the colors bleed out to the edge, it uses white stock, and it uses high-definition fonts that require printing at 300dpi. Delta’s low-resolution, thermal printers can’t do these things.

If Delta were to actually use Tyler’s design, it would have to replace 10,000+ boarding pass printers, change paper size and add cutting for bleeds on top of creating a new supply chain for colored inks.

Which design is better now? It’s easy to create designs without understanding the real constraints, but the best design is the end is one that satisfies real world needs. As Jared said, “to improve design, we must work on both the intention and the skills of rendering.” We can’t only improve the rendering.

Both my own website redesign from years ago and Jared’s talk have taught me that we, designers, need to have a little bit of humility. We can’t just tell someone how to do something “right” if we don’t know the context around which the original design was created. It’s easy to be nit-picky, and there are circumstances where better design is absolutely called for. But it’s time we stop to understand what situation we’re in so that we can do things with the right intention and execution.

Mobile is Changing Web

Many web-based companies are choosing to align their web and mobile interfaces so that their visual branding is the same on all platforms. The result is that websites begin to include mobile elements in their interface. Below are examples of how mobile design is influencing the web.

————————————————————————————————————————————————————————

1. Basement Menus: YouTube is now using the “hamburger” icon to represent a hidden menu (usually to the left of the icon).

Image

2. Circular profile icons were/are a mobile trend. (Designers sometimes places profile icons on top of product images in mobile to save on screen space). Now they’re on web too. [Below: Etsy]

Image

3. Pinterest uses the default iOS 6 share icon for its share button. This icon has become universal to people to frequently use mobile software.

Image

4. No, that’s not a screenshot of my phone. That’s responsive web below. Designers are choosing to optimize their websites for mobile, as well as using mobile-looking buttons and text fields for say…login screens.

Image

5. Disclosure arrows are used in mobile to indicate that you can tap on a row or cell. They also show up on twitter (web) to let you know that you can see more Tweets, Following, Followers, etc.

Image

Creaktif

Screen_shot_2012-01-25_at_10

Check this website out!

  • Moving the mouse from left to right changes the viewer’s perspective of the background image.
  • Clicking on the links in the center leads to some interesting effects within the center-top circle. Each image zooms in and pixelates to transition to the next image.
  • Because the background image is a 3D rendering, it appears that some parts of it are closer to you than others.

All in all, a very cool webpage.

Got milk? Interactive website

Screen_shot_2012-01-20_at_12

Got Milk? (click to see website)

This is a great example of a website that really uses interactive elements to its advantage. The animation isn’t overdone, and it doesn’t come off as corny. The graphics are also very realistic and clean. The best part, though, has to be the sound. When the milk bottle spins, it makes that heavy glass-on-table scraping noise. It makes the whole experience real.

After two weeks of insane stress…

Dsc02094

My portfolio website is finally up.

I learned a lot making this website.

  1. Do wireframe the website out in advance.
  2. Graphic design is a lot harder than you think.
  3. Change one element and you’ll want to change the entire website.
  4. If it’s not displaying properly, check for typos in code and don’t panic.
  5. Better to measure and calculate than to eyeball.
  6. Don’t let one project consume your life, make you pause exercise.
  7. Doing a little every day really does make a difference.