Workflow on Responsive Web Design Projects

Jared Spool

January 20th, 2014

The old workflow of designing for the desktop and a tablet, working up images in Photoshop or Fireworks, falls apart with responsive design. With the growing number of mobile devices, how do you design for the multitude of screen sizes? What priority will elements take on shrinking screens? How can designers make their intentions clear for developers ready to code? These are some of the questions Ben Callahan’s workflow seminar will answer.

With Ben, learn to manage expectations and create stronger products, faster by:

  • Structuring teams to be more flexible
  • Planning responsive projects, from soup-to-nuts
  • Designing interfaces using faster methods
  • Managing expectations and doing testing
  • Pushing “the whole” instead of “the parts”
  • Using more than one tool
  • Learning to let go of control

When Ben Callahan speaks, everyone listens. He has been a leading voice in making flexibility the core of responsive design workflows. Don’t miss his full-day workshop at UXIM14 in Denver, CO on April 7.

You’ll learn how to:

  • Build small “surgical” teams to maximize collaboration
  • Delay decisions until the last responsible moment
  • Overcome “baggage” that hampers a responsive process
  • Facilitate a collaborative design process that’s still adaptable
  • Convince others that responsive web design is a competitive advantage
  • Identify when trust waivers, then address it with transparency

Ben will help you overcome common workflow challenges. He’ll also offer practical, relatable takeaways from real-world stories and case studies from his own experiences in running projects.

If your design process is missing something and you want to know how to shift the focus from the process to the people involved—check out this workshop.

Get inspired at the UXIM Mobile Conference.

Wireframes – A January 30 Virtual Seminar on Choosing the Right Strategy

Adam Churchill

January 17th, 2014

The virtual seminar series is put together with your design challenges in mind.  We chase down the most important topics, and find the leading experts to show you the important how tos associated with the topic. Our next is one we’ve been chasing for some time.

Wait no longer.

On January 30, Chris Farnum presents Choosing the Right Wireframe Strategy for Your Project.

You’ll learn to:

  • Drive design and communication by using wireframes
  • Plan projects by defining unique page types
  • Build scenarios with states and layers
  • Learn to draw “just enough”

Save your team’s spot for this long-awaited presentation.

 

 

 

 

Brad Frost – Creating Responsive Interfaces

Sean Carmichael

January 16th, 2014

Play

[ Transcript Available ]

Brad Frost

Brad is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Brad’s and 5 other workshops, visit uxim.co.

Frameworks and design patterns are no strangers in the world of web design. As responsive web design becomes common practice, making sure these templates work across every imaginable screen and device is trickier. There have been attempts to break down page elements in separate modules, but you often never see it fully assembled.

Brad Frost shares this frustration and introduces Atomic Design as a solution. Borrowing from the metaphor of atoms making up molecules, molecules making up organism and so forth, Brad thinks responsive design needs to be approached deeper than at the page level. Having these individual modules is great, but how do they all fit together?

Designing in this way allows you to be more deliberate and systematic in your approach. Dividing an interface up creates the ability to stitch webpages together but in a way that builds from an atomic level and you can clearly see how you’ve arrived at the end product. This approach to responsive design, as Brad says, serves to solve problems in a very acute way.

Recorded: January, 2014
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

UIEtips: Atomic Design

Jared Spool

January 14th, 2014

It’s quite common for designers to develop design systems and libraries of patterns. A designer can save a considerable amount of time if they develop a reliable design system. One that goes beyond colors, fonts, grid etc but rather focuses more on how the various elements and parts become a whole. In today’s UIEtips, we feature a post from Brad Frost where he explains a methodology for creating design systems. It’s called Atomic Design. It’s a term rising in popularity.

We’re fortunate that Brad is giving a daylong workshop at this year’s UXIM conference in Denver, April 7-9. He’ll show you how your design team can establish a practical foundation to make flexible, adaptive UIs. Learn more about Brad’s workshop, Using Atomic Design to Create Responsive Interfaces.

Here’s an excerpt from the article:

The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

Read the article Atomic Design.

Does your company build interfaces using atomic design patterns? Tell us about it below.

Websockets and Why Designers Should Learn To Code

Jared Spool

January 9th, 2014

HTML5 has an awesome feature that’s now gaining attention from designers: Websockets. It’s a way to create a persistent communication channel between the client and a server, without using page refreshes or the asynchronous mechanics behind AJAX. Think much faster communications, because it’s not establishing a new connection for each round trip.

Look at this cool Racer demo from Google, showing race cars racing across multiple devices, with no noticeable lag when the cars jump from one device to the next. Imagine moving messaging, data, or anything else at that speed.

Real time updated stock prices, auction bids, or other fast-changing data. The limit is your imagination.

Here’s the deal though: because it’s new, each browser implementation is somewhat idiosyncratic. The Racer demo works in Chrome, but may not work elsewhere. Making websockets work can be finicky. It won’t always be that way — the browsers will eventually fall into line. But for now, it’s a difficult thing to get it all to work.

Here we are with a great, powerful tool. If we want to take advantage of it, we need to dive in and start playing. We need to see what it can do and what it can’t. We need to learn it like an artist learns their paintbrush, paint, and canvas.

Websockets are just one reason why smart designers are taking the plunge and learning to code. With some simple coding skills, these designers can start playing with websockets and see what they are all about. They can work up simple demos and prototypes to test out ideas. They can get their coworkers excited about exploring these new technologies too.

Learning enough code to play around with websockets isn’t about learning production-quality coding skills. It’s tinkering in the garage, not building a new car for Toyota. That’s all that’s necessary here. Enough code to learn what the tools can do and speak intelligently to our peers in development.

Designers don’t need to learn to code. But those that do now can start playing with things like websockets.

Still not convinced? Take everything above and swap in “media queries” for “websockets.” That’s where responsive design started 3 years ago. Remember, it was designers like Ethan Marcotte and John Allsopp that got everyone excited about what responsive design was all about. And that started by playing with CSS tools like media queries.

Designers don’t need to learn to code. However, designers that learn to code will be the ones leading us to better user experiences.

UIEtips: Taxonomy-driven Content Publishing

Jared Spool

January 7th, 2014

The term for disorganized content throwing off your user experience is called content sprawl. To help you solve this problem, we’re publishing an excerpt from an article by Stephanie Lemieux and Michele Ann Jenkins of Dovecot Studio Inc. In it, they suggest taxonomies are perfect allies in the mission to tame the content chaos.

If flexibility in content publishing is a key goal for your team, then it’s time to try taxonomy-driven design. On January 9, Stephanie will show you how when she presents our next virtual seminar,
Managing Content Sprawl.

Here’s an excerpt from the article:

If you’re using a taxonomy to tag your content, you can really begin to leverage its structure to not only keep your site fresh and reduce manual content management, but also to simplify the way users navigate your content.

Taxonomy-driven content publishing (also referred to as search-driven display) allows you to dynamically retrieve and display content on a page based on specific taxonomy or other structured fields enabled within your content. A content display block (or entire page) is programmed to perform a search on one or more taxonomy tags or other fields selected in the configuration. This content is dynamically loaded when the page is accessed, eliminating the need for a content manager to manually assign the content to a particular page.

Read the article Taxonomy-driven Content Publishing

How does your organization use taxonomy to manage content sprawl? Tell us about it below.

Jason Grigsby – Responsive Web Design with Mobile in Mind

Sean Carmichael

January 7th, 2014

Play

[ Transcript Available ]

Jason Grigsby

Jason is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Jason’s and 5 other workshops, visit uxim.co.

With the mobile web, specifically m dot sites increasingly becoming a thing of the past, responsive web design has become common practice. The ability for your site to display across screen sizes and devices, reduces development time and allows for one design to work anywhere. However, this shouldn’t signal a shift away from mobile-first thinking.

Jason Grigsby, of Cloud Four, believes that there are considerations that responsive design alone doesn’t address. The total experience of your site is more than just what it looks like. Simply using media queries to optimize your site’s design for different page widths is not a viable solution. Page weights, image sizes, and network speeds all need to be factored into the equation.

In Jason’s mind, performance is a key differentiator. He says that you can have a beautiful design or the perfect user experience, but if your performance is bad, people won’t use it. Sites that look good and work well on the desktop may feel slow and bloated on a mobile device. Starting with performance in mind and considering mobile-first avoids these problems early in the process.

Recorded: December, 2013
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

Coding Prototypes, Even if You’ve Never Tried

Jared Spool

January 6th, 2014

An hour of prototyping can save days of meetings and misunderstandings. Collaborate with developers earlier to refine interactions; your team — and users — will thank you for it. Let Nate Schutta take the scare out of using JavaScript and jQuery to build mobile prototypes, using HTML and CSS in a text editor, and debugging what you’ve built. Come and see for yourself that you don’t need JavaScript expertise to build a simple application.

Nate’s workshop, Coding Prototypes Even If You’ve Never Tried, will cover:

  • Demystifying JavaScript
  • Digging into jQuery Mobile
  • Using jQuery Mobile
  • Building a mobile app
  • Fitting the parts together
  • Showing your vision to developers
  • Stepping beyond basic CSS and HTML

Nate is one of those people who makes everyone feel comfortable. His expertise in prototyping comes from working with cross-functional teams. As a senior software engineer, Nate focuses on making usable applications — the ideal end-result of any project.

He’ll teach you how to:

  • Use browser tools and a text editor, comfortably
  • Debug what’s screwed up
  • Address often-overlooked pieces like error messages
  • Use the not-so-mysterious dollar sign ($) with ease
  • Understand and navigate a document library
  • Simulate a mobile interface right on your laptop

Nate Schutta will help you build out the pages for a prototype, use tools like lists, create a detail page, decide how to handle transitions, and experiment with different themes. After his workshop at UXIM14 on April 9 in Denver, CO you’ll have everything you need to get your mobile prototype up and running.

See you at UXIM14!

Nate Schutta – Coding Mobile Prototypes

Sean Carmichael

January 6th, 2014

Play

[ Transcript Available ]

Nate Schutta

Nate is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Nate’s and the other 5 workshops, visit uxim.co.

The “designer who can code” has been dubbed the elusive unicorn of the UX realm. But more important than being equally good at both skill sets is being able to communicate with the other side. If designers understand even a little bit about code it breaks down silos within the team. Greater communication leads to shared understanding. This collaborative environment allows for faster iteration and better design.

Nate Schutta believes that prototyping in code helps solidify this communication. Being able to visualize and demonstrate your ideas not only provides for greater understanding, but a faster workflow. Even though this code won’t make it into the final product, it gets a representation of the final design in front of users and stakeholders.

Prototyping in code isn’t as daunting as it may sound. Nate believes that making the transition from using HTML and CSS to exhibiting functionality in JavaScript and jQuery isn’t all that difficult. Even if you’re throwing something quick and dirty together in less-than-production-ready code, the important thing is to get that feedback early and iterate on the design.

Recorded: December, 2013
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

UIEtips: Design is the Rendering of Intent

Jared Spool

December 30th, 2013

In this week’s TIPS, I’ll begin explaining design as “the rendering of intent.” Simply put, this is when the designer imagines an outcome and puts forth activities to make that outcome real.

Here’s an excerpt from the article:

What if the team had approached the design with a different intention? What if they had intended that users would get through the sign-up process without ever seeing an error message?

Designer extraordinaire, Robert Fabricant once said, “Behavior is the medium of design.” When we encounter a user’s behavior that isn’t what we’ve intended, we change the design until we see what we want.

An implication of this definition for design is how it changes our notion of who is a designer.

Read the article Design is the Rendering of Intent.

How do you assure your design process is a way to come to a single intention? Tell us about it below.