Web Design Trends: Lessons from WebVisions Portland 2013

Written by Cyrene Domogalla, Intel Open Source Technology Center & Connie Berardi, Developer Products Division

WebVisions is a conference about philosophies, workflows, and ideas. To me, it's the coming together of the design scene in Portland and the powerhouse of developers that are just as creative as they are technical. The following summarizes our key takeaways from this conference.

Trends

 

 

   The best advice we heard was from the Anti-patterns talk, as outlined by Bill Scott. Mr. Scott worked as a design team manager at Netflix* before coming to Pay Pal* and stirring things up. Some anti-patterns to recognize and avoid are:

 

The Genius    There is no single genius designer or developer. There are awesome, crazy skilled veterans. But in the end, the customer is god. If the work isn't benefitting the customer of your product, it's worthless. Also, there are always benefits from having different perspectives and viewpoints.

Perfectionism   It's okay if a design isn't "100% done." In fact, it's better if it isn't. When a design becomes about fidelity, highly refined designs in static format, it's time to move to prototypes and work on functionality.

Tribalism   The only way to work quickly is to work in diverse teams of designers, copywriters, developers, and managers. However, it's in our nature to group together with those who share our own sensibilities. This is bad. We must talk to each other. Designers need to communicate with developers regularly and frequently, and vice versa.

Going Dark   At some point, the designers on Mr. Scott’s team disappeared for a few days. They were off in a conference room on their own, developing their ideas. By working on their own for too long, not only were they hurting themselves by working in a vacuum, they were hurting their team.  They were ignoring the value of ideas generated from other members on the project. There's no reason to go dark, even if you're in a different location. With telepresence software, Skype*, Google* hangouts, Microsoft Lync*, IRC, we have all the tools we need to collaborate.

"Designers felt like they were creating Picassos in Photoshop and then had their feelings hurt when the developers dumped all over them."

This goes for developers, as well. There's no way a designer can anticipate everything up front, and they shouldn't have to. It’s also the developer’s responsibility to find these issues and raise them. The manager or leader should also recognize the problem and help the team solve it.

Too many cooks   We all know "design by committee" is synonymous with disastrous. And yet we still do it. We have too many voices coming from too many places, all wanting their own agenda addressed. The solution is one voice, one leader on a given project. Have a clear decision maker from each discipline of a team. This isn't about org charts. This is about roles.

The Visitor  Then there's 'the Visitor'. This person is a high-ranking officer of the company or outside company swooping in to see progress and offer their opinions. While their input should be valued, in the end, it's still about the customer and the value of the product.

Always test assumptions, decisions, opinions, and suggested directions with user research and customer input. Always. Data provides more solid ground for everyone involved to stand on than all the opinions in the world. 

Mark Trammell, who worked for Twitter*, retold his company’s success story by evolving a product over cycles. Twitter started as a way to communicate with coworkers through their own server, using SMS. Early on, they collected data from user studies of people that used the service, soon after left, and at some point came back. This gave them data about why they signed up in the first place, why they left, and what drew them to return. Actual usage models were used to adapt and change the service. Mr. Trammell's advice was to release early, release often, and pay attention to the feedback cycles. 

Tips and Tools

CSS Mixins" allow developers to define patterns of property value pairs, which can then be reused in other rule sets. Think of them as CSS variables that allow you to further compartmentalize your CSS code.
  • Use "rem" units when you need to be certain about the relationship of sizing of the object to the browser, rather than its parent element. Set the font size on the element and then use rem units as a percentage of that size. Jonathan Snook has a great blog on the topic.
  • SVG graphics are now a widely supported format across most modern browsers. The xml can be directly inserted into your HTML or be referenced in your CSS and manipulated by JavaScript.
  • For images, consider sprite sheets to reduce memory and http round trips.

On the designer side of things:

  • Stick with native style guides and conventions. Don't try to circumvent the system just to assert your creativity.
  • Don't try to be pixel perfect. There's no way to keep up with the cacophony of devices with different with resolutions.
  • Get into the code. Learn enough to be dangerous and have meaningful conversations with developers. Prototype. There are now many tools to help a designer prototype moving mockups.
  • Compress your visual assets. Size matters, the mobile environment has fewer resources than a desktop pc.
  • Don't use labels like "sidebar" because responsive design changes the location of content in a layout. Think rather in terms of "primary content, secondary content," that is, priorities.

Tools

Items of Note

Smart City" in Spain; the city uses sensors and apps on trash dumpsters and store fronts telling the city when the dumpsters are full and shoppers how to buy merchandise after business hours.

Now you can even build and manufacture parts yourself, with the $1000 3D printer and services like Shapeways. Crowdsourcing sites and product packs, like the Arduino starter kit, allow people to create projects that ultimately become products. In some cases, makers have been able to improve existing products, influencing manufacturers to follow suit. In the spirit of open source, you can find thousands of maker individuals willing to share plans with each other, enabling the most basic designs to continually improve. We now have better espresso machines that make the perfect shot, mind controlled robots, and even remote control lawn mowers.

For WebVisions Portland 2013, we walked away with several key tools to simplify the myriad of libraries and design choices out there. We will continue to attend because of the unique opportunity to be on even footing with artists, visionaries, and hard core developers. There is a human fabric to this conference that goes beyond the talks and lectures, reminding us that technology truly influences lives and people. It’s also the kind of place where you may arrive with an idea and leave with a startup.

For more complete information about compiler optimizations, see our Optimization Notice.