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

Make Content Management Great Again

Drupal does a lot, maybe too much. What if Drupal didn't build your UI? Or more importantly, what if your CMS _couldn't_ build a UI? How would that change how you think about your content? Change how you think about your website? Your webapp? Your native apps? If content management was truly just that, managing content, its revisions, its approval, its lifecycle, not how it gets displayed, how does that change your team? Your process?

The Ultimate Super Duper Guide to Content Quality

This is the scene: your organization’s website means well. It always has. But through the years, the content on that site has piled up, grown wild, and has little rhyme or reason. It’s out of control. But you’re trying to make it better. You want to make it better. You need to make it better.

Low quality content hurts your organization all around. It makes for poor search engine discovery. It makes it difficult for people to understand you and your products or issues. And in the worst cases, it gives your visitors the wrong idea and turns them away.

Testing Your Style Guide and Theme in Drupal 8

Style guide driven development and the intelligent re-use of design components can prevent quite a bit of heartache as the look and feel of your site evolves. Your style guide can protect you from unexpected regressions throughout your theme and let you break the cycle of wasting time and effort styling redundant variations of page templates and content.

This session will focus on the tools available to create a living style guide for your Drupal site, along with methods to test for visual regression during the development cycle. We’ll cover:

Creating semantic, structured content and markup in Drupal 8

A guide to creating semantic, structured content and markup in Drupal 8 using Entity Reference fields, Paragraphs, and Inline Entity Form.

This presentation will review how to use the Paragraphs and Inline Entity modules, along with Entity Reference fields and various field formatters to replace the body field and create semantic, structured markup.

Make Flexible Themes

Let me first just state this up front: I'm not a themer. Don't ask me about theming, because I don't know the answer. I'm a module developer. Ask me about module development. I probably still don't know the answer, but at least I won't pretend I don't see you when you ask. (Okay, maybe I still might pretend I don't see you.)

STREAMLINED FRONT-END DEVELOPMENT WITH PATTERN LAB AND TWIG

Pattern Lab and Twig, the perfect duo to streamline your front-end development process.

Pattern Lab (patternlab.io) is “a custom static site generator that constructs an interface by stitching atoms, molecules, and organisms together to form templates and pages.” The philosophy of Pattern Lab parallels several core tenets of OOP: Don’t Repeat Yourself and Keep It Simple, Stupid.

Twig (twig.sensiolabs.org) is a fast, secure, and flexible templating engine from Sensio Labs, the people who brought us Symfony.

Static Fanatics: Tips on Developing Static Sites with Jekyll

It's typical that websites get made for an event, a marketing campaign or other temporary uses. Small sites typically don’t require as much power as a big CMS like Drupal or WordPress.

Although static HTML and CSS can fill this need, they can be hard to update without duplicating a lot of work.

A static site generator or SSG can be used to write modular and reusable HTML. They can even be hosted with Github Pages. Let's talk about leveraging Jekyll for small and easy to maintain sites.

Twig recipes: Making Drupal 8 render the markup you want

The addition of Twig has revolutionized the way we do theming in Drupal 8. Although very powerful, it is still fairly new to most of us. Using Twig requires us to take a new approach in order to produce the markup that we want. This session will be a presentation on how to use new features provided by Twig.

Some recipes that will be covered include:

Pattern Libraries the Easy Way

You have a beautiful design for your new website. You have a blank custom theme. How to get the first one into the second one?

At Exygy we use an elegant workflow involving pattern libraries that include real html and css. Even better, we integrate our pattern libraries directly into the end product.

You can have all this, and more. This will be a hands-on session, so bring your laptop.

Component-driven Drupal theming

Modern front-end development has become a complicated mix of fast-moving technologies. The challenge for front-end developers is trying to keep up with the latest changes in Front-end. How do you find and learn about the best tools and techniques? And even after we've learned a new tool, it can feel like our skills are soon out-dated.

Pages