Design, Theme + UX

Design, Theming and User Experience (UX) form the foundation of all interactions on the web and requires consideration beyond the web. These interactions include off-screen/non-web interactions the user may have had with your company or product or the environment in which they’re interacting with the web. It’s inherent in all aspects of production - from strategy and content creation to design and development. Let’s talk about the technologies and procedures that are in use in today’s Front End development: preprocessors, build automation, JS and CSS architecture, new template systems and client-side applications. Whether you identify yourself as a Designer, Themer, UX practitioner or not, any part of the web that you touch affects the user’s experience. Conceptual thinkers, strategists, decision makers, content creators, designers and developers are encouraged to present topics on their area of expertise.

Suggested Topics

  • UX process and techniques
  • Current and emerging best practices, tools, & techniques (BEM/OOCSS, static prototyping, design in browser, progressive enhancement)
  • Front End and Back end templating systems (Twig, Twig.js, Handlebars)
  • Strategy and planning
  • Content strategy
  • Visual and interaction design
  • Content-first, atomic design, and new design issues
  • Responsive and accessible design
  • Usability
  • The impact of non-web interactions on the web user experience

Flexible Design Module: We Made Content Movable!

MOVEABLE CONTENT, on the page, after design is completed. Give your client the ability to modify the page and move content blocks around, left, right, center, up, and down. This new tool/module has been developed and QA’d for live deployment and is currently in use at L.A. Care. From mild to wild, this allows a page to be re-organized, and still fully function. Poke it with a stick, change it up, iterate the presentation, and change it all back to “default” at the click of a few buttons.
Facts:

Designing a Publication: I Learned the Hard Way So You Can Learn the Easy Way

INTRODUCTION

“Designing a Publication” takes the audience on an engaging trip to the heart of modern web design. I’ll show them the biggest lessons I learned while leading the ground-up redesign of No Depression (“The Roots Music Authority”), a publication with tens of thousands of registered users and hundreds of thousands of pieces of content. Lessons they can apply to your project, no matter what size it is.

 

Throwdown - only Twig templates vs. Twig plus Display Suite in Drupal 8 - you decide!

There is a growing group of Drupal 8 front end developers who just LOVE twig and are doing all of their theming using just that. There is also a group that LOVE display suite and are still using it as their go-to in Drupal 8.

This session will got through the pros and cons of each type of theming and then will allow for discussion and debate on which setup is better.

Which side are you on? Come and throwdown!

Setting up a front end development environment for Drupal 8

Modern theming is getting more and more complex. This session will walk you through the steps to setup your theme development environment in Drupal 8. Topics will include many of the standard things that you need to do to set up a new theming environment in Drupal 8:

21 things i learned with Twig & Drupal

A hands on Drupal8 Theming Twig extravaganza 
 

Theming in Drupal8 was a massive shift from phptemplate to twig, but its more than changing the syntax. We changed the way of thinking about Drupal theming. Drupal twig theming is easy to learn, powerful, flexible and overall as awesome as warm coffee on a rainy day. The downside is that all the things you learned in Drupal now have to be relearned - Yes it's by design.

Over the last 4 years we (the frontend drupaltwig group) we got one burning question from the Drupal community.

The Slice Template: Design principles, Dev Options & Content Curation

This talk will EXPLAIN what the Slice Template is, different development tactics for creating it, and challenges we’ve seen in crafting content for it.

WHAT IS THE SLICE TEMPLATE?
The Slice Template is kind of like a layer cake. It’s a design structure that enables site authors to create web pages out of modular, horizontal components that span the width of the browser. Popularized by responsive design, this pattern has become a web standard. That’s because it can support a myriad of content.

Using NPM without Gulp or Grunt

If you're sick or skeptical of package managers and dependencies in your front-end build process this could be the talk you've been waiting for. Over the past few years the front-end build process has been enhanced (or complicated by) Grunt, Gulp, Bower and other systems designed to automate and standardize the front-end.

However more developers are turning back to NPM (Node Package Manager) on which some of these tools are built to simplify the build process and eliminate multiple dependences. In this session we'll cover:

INCLUSIVE DESIGN: Going beyond Accessibility

People are not ones(1) and zeros(0) and the world is not just black and white. Everyone identifies themselves differently and while it may be impossible to cater to everyones needs, it is important that we strive to make our websites, applications and tools as inclusive as possible.

Inclusive Design is a form of accessibility. It is the concept of begin mindful in making technology available to and usable by all people whatever their abilities, age, economic situation, orientation, language, etc...

Reduce, Reuse, Recycle: Modular CSS for Enterprise Websites

CSS bloat is a challenge for every enterprise website. As design elements grow and change, code gets added but rarely deleted and our CSS files get larger and harder to maintain. What was that class name that makes the font color black and 22px? Where is the pattern that gives me the right layout and color scheme for this design? Modular design encourages us to look beyond classes and begin styling on the component level using data attributes. Separate content from design and your code base becomes reusable and more compact.

Images 101: File Types, Web Optimization, Retina Screens, oh my!

Images seem simple: save, compress, and upload. Yet, I’m willing to bet you’ve asked yourself one of these following questions: What file type do I use? What file size (or k-weight) should I target? Is there a “correct” way to save an image for the web? What about retina screens, do I need to do something different? This session will explore all of these questions and more.

Pages